chapter 1 html & html5 i อ. ยืนยง กันทะเนตร...
Post on 29-Dec-2015
234 Views
Preview:
TRANSCRIPT
CHAPTER 1HTML & HTML5 I
อ. ยื�นยืง กั�นทะเนตรคณะเทคโนโลยื�สารสนเทศและกัารส��อสาร
มหาวิ�ทยืาล�ยืพะเยืา
1
Content
• Introduction to HTML• HTML Basic Examples• HTML Elements• HTML Attributes• HTML Headings• HTML Paragraphs• HTML Line Breaks
2
Content
• HTML Styles • HTML Text Formatting Elements• HTML Comments• HTML Quotation and Citation Elements• HTML Computer Code Elements• HTML Styles – CSS• HTML Links• HTML Images
3
Content• HTML Tables• HTML Lists• HTML Block Elements• HTML Classes• HTML Layouts• HTML Responsive Web Design• HTML Iframes• HTML Scripts• HTML Entities
4
What is an HTML File?
• HTML is a markup language for describing web documents (web pages).
• HTML stands for Hyper Text Markup Language• A markup language is a set of markup tags• HTML documents are described by HTML tags• Each HTML tag describes different document content
5
What is an HTML File?
• An HTML file can be created using a simple text editor
6
Example
• Save the file as “firstpage.htm".
7
Example Explained
• The DOCTYPE declaration defines the document type to be HTML
• The text between <html> and </html> describes an HTML document
• The text between <head> and </head> provides information about the document
• The text between <title> and </title> provides a title for the document
8
Example Explained
• The text between <body> and </body> describes the visible page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph
*Using this description, a web browser can display a document with a heading and a paragraph.
9
HTML Page Structure?
10
HTML Versions
11
HTML Basic Examples
12
• HTML Documents
HTML Basic Examples
13
• HTML Headings
HTML Elements
14
• HTML documents are made up by HTML elements.
<tagname>content</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first HTML paragraph.</p>
HTML Attributes
15
• HTML Attributes• HTML elements can have attributes• Attributes provide additional information about an
element• Attributes are always specified in the start tag• Attributes come in name/value pairs
like: name="value"
HTML Attributes (cont.)
16
• The lang Attribute
<!DOCTYPE html><html lang="en-US"><body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body></html>
• The title Attribute
<p title="About W3Schools">W3Schools is a web developer's site. </p>
HTML Attributes (cont.)
17
• The href Attribute
<a href="http://www.w3schools.com">This is a link</a>
• Size Attributes
<img src="w3schools.jpg" width="104" height="142">
HTML Headings• Headings are defined with the <h1> to <h6> tags.• <h1> defines the most important heading. <h6> defines the
least important heading.
<h1>This is a heading 1</h1><h2>This is a heading 2</h2><h3>This is a heading 3</h3><h4>This is a heading 4</h4><h5>This is a heading 5</h5><h6>This is a heading 6</h6>
• Browsers automatically add some empty space (a margin) before and after each heading.
18
HTML Paragraphs• Paragraphs are defined with the
<p> tag.
<p>This is a paragraph 1.</p><p>This is a paragraph 2.</p><p>This is a paragraph 3.</p>
• Browsers automatically add an empty line before and after a paragraph.
19
HTML Line Breaks
• The HTML <br> element defines a line break.• Use <br> if you want a line break (a new line) without
starting a new paragraph:
<p>This is<br>a para<br>graph with line breaks</p>
20
HTML Styles
HTML Styling• Every HTML element has a default style (background
color is white and text color is black).
<body style="background-color:red">
<h1>This is a heading</h1><p>This is a paragraph.</p>
</body>
21
HTML Styles (cont.) The HTML Style Attribute
style="property:value"
22
HTML Text Color<h1 style="color:blue">This is a heading</h1>
HTML Fonts<h1 style="font-family:verdana">This is a heading</h1>
HTML Text Size<h1 style="font-size:300%">This is a heading</h1>
HTML Text Alignment<h1 style="text-align:center">Centered Heading</h1>
HTML Text Formatting Elements
23
HTML Bold and Strong Formatting<p><b>This text is bold</b>.</p><p><strong>This text is strong</strong>.</p>
HTML Italic and Emphasized Formatting<p><i>This text is italic</i>.</p><p><em>This text is emphasized</em>.</p>
HTML Small Formatting<h2>HTML <small>Small</small> Formatting</h2>
HTML Marked Formatting<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML Text Formatting Elements (cont.)
24
HTML Deleted Formatting<p>My favorite color is <del>blue</del> red.</p>
HTML Inserted Formatting<p>My favorite <ins>color</ins> is red.</p>
HTML Subscript Formatting
<p>This is <sub>subscripted</sub> text.</p>
HTML Superscript Formatting<p>This is <sup>superscripted</sup> text.</p>
HTML Comments
HTML Comment Tags• You can add comments to your HTML source by using
the following syntax:
<!-- This is a comment -->
<p>This is a paragraph.</p>
<!-- Remember to add more information here -->
25
HTML Quotation and Citation Elements
HTML <q> for Short Quotations<p>MCT => <q>Mobile Computing Technology.</q></p>
26
HTML <blockquote> for Long Quotations <p>Test Long Quotations.</p>
<blockquote>Test Long Quotations Test Long Quotations Test Long Quotations Test Long Quotations Test Long Quotations Test Long Quotations Test Long Quotations
Test Long Quotations Test Long Quotations.</blockquote>
HTML Computer Code Elements
27
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a mathematical variable
<pre> Defines preformatted text
HTML Computer Code Elements (cont.)
28
HTML Styles - CSS
29
Styling HTML with CSSCSS stands for Cascading Style SheetsStyling can be added to HTML elements in 3 ways:• Inline - using a style attribute in HTML elements• Internal - using a <style> element in the HTML <head>
section• External - using one or more external CSS files
HTML Styles – CSS (cont.)
30
CSS SyntaxCSS styling has the following syntax:
element { property:value; property:value; }
p { color:red; font-family:courier;}
HTML Styles – CSS (cont.)
31
Inline Styling (Inline CSS)<h1 style="color:blue">This is a Blue Heading</h1>
Internal Styling (Internal CSS)<style>
body {background-color:lightgrey}h1 {color:blue}p {color:green}
</style>
External Styling (External CSS)<link rel="stylesheet" href="styles.css">
HTML Styles – CSS (cont.)
32
CSS Fonts<style>h1 {
color:blue; font-family:verdana; font-size:300%;
}p {
color:red; font-family:courier; font-size:160%;
}</style>
HTML Styles – CSS (cont.)
33
The CSS Box ModelThe CSS border property defines a visible border around an HTML element:
p { border:1px solid black; }
The CSS padding property defines a padding (space) inside the border:p {
border:1px solid black; padding:10px;
}
The CSS margin property defines a margin (space) outside the border:p {
border:1px solid black; padding:10px; margin:30px;
}
HTML Styles – CSS (cont.)
34
The id Attribute<p id="p01">I am different</p>
The class Attribute<p class="error">I am different</p>
cssp#p01 { color:blue;}
cssp.error { color:red;}
HTML Links
35
HTML Links - SyntaxIn HTML, links are defined with the <a> tag:
<a href="url">link text</a>
Example<a href="http://www.up.ac.th">UP Web site</a>
HTML Links (cont.)
36
HTML Links - The target AttributeThe target attribute specifies where to open the linked document.
Example<a href="http://www.up.ac.th" target="_blank">UP Website</a>
Target Value Description
_blank Opens the linked document in a new window or tab
_self Opens the linked document in the same frame as it was clicked (this is default)
_parent Opens the linked document in the parent frame
_top Opens the linked document in the full body of the window
framename Opens the linked document in a named frame
HTML Images
37
HTML Images SyntaxIn HTML, images are defined with the <img> tag.
<img src="url" alt="some_text">
The alt Attribute<img src="wrongname.gif" alt="HTML5 Icon"style="width:128px;height:128px;">
Image Size - Width and Height<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> or<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
HTML Images (cont.)
38
Width and Height or Style?<!DOCTYPE html><html><head><style>
img { width:100%;
}</style>
</head><body>
<img src="html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"><img src="html5.gif" alt="HTML5 Icon" width="128" height="128">
</body></html>
HTML Images (cont.)
39
Images in Another Folder<img src="/images/html5.gif" alt="HTML5 Icon“ style="width:128px;height:128px;">
Images on Another Server<img src="http://www.w3schools.com/images/w3schools_green.jpg">
Animated Images<img src="programming.gif" alt="Computer Man“ style="width:48px;height:48px;">
Using an Image as a Link<a href="default.asp"> <img src="smiley.gif" alt="HTML tutorial“ style="width:42px;height:42px;border:0;"></a>
HTML Tables
40
Defining HTML Tables<table style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>
HTML Tables (cont.)
41
An HTML Table with a Border Attribute<table border=“1” style="width:100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>
HTML Tables (cont.)
42
An HTML Table with Collapsed Borders<style>table, th, td { border: 1px solid black; border-collapse: collapse;}</style>
An HTML Table with Cell Padding<style>table, th, td { border: 1px solid black; border-collapse: collapse;}th, td { padding: 15px;}</style>
HTML Tables (cont.)
43
HTML Table Headings<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr></table>
HTML Tables (cont.)
44
Table Cells that Span Many Columns<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr></table>
HTML Tables (cont.)
45
Table Cells that Span Many Rows<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr></table>
HTML Lists
46
HTML Lists (cont.)
47
Unordered HTML Lists<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ul>
Ordered HTML Lists<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li></ol>
HTML Description Lists<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd></dl>
Nested HTML Lists<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li></ul>
HTML Block Elements
48
HTML Classes
49
HTML Layouts
50
HTML Layouts (cont.)
51
HTML Layout Using <div> Elements
HTML Layouts (cont.)
52
HTML Layout Using <div> Elements
HTML Responsive Web Design
53
What is Responsive Web Design?• RWD stands for Responsive Web Design• RWD can deliver web pages in variable sizes• RWD is a must for tablets and mobile devices
HTML Responsive Web Design (cont.)
54
Using HTML5.CSSAnother way to create a responsive design, is to use an already existing
CSS style sheet, like W3.CSS or HTML5.CSS
<link rel="stylesheet" href="html5.css">
* You can download the different style sheets from w3css_downloads
Using BootstrapBootstrap is the most popular HTML, CSS, and JS framework for
developing responsive webs<link rel="stylesheet" href="bootstrap.min.css">
* To learn more about Bootstrap read our Bootstrap Tutorial.
HTML Iframes
55
Iframe Syntax<iframe src="URL"></iframe>
Iframe - Set Height and Width<iframe src="demo_iframe.htm" width="200" height="200"></iframe>
Iframe - Remove the Border<iframe src="demo_iframe.htm" style="border:none"></iframe>
Use iframe as a Target for a Link<iframe src="demo_iframe.htm" name="iframe_a"></iframe><p><a href="http://www.up.ac.th" target="iframe_a">up.ac.th</a></p>
HTML Scripts
56
The HTML <script> Tag<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>
The HTML <noscript> Tag<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
HTML Scripts (cont.)
57
HTML Scripts (cont.)
58
JavaScript can change HTML content:document.getElementById("demo").innerHTML = "Hello JavaScript!";
JavaScript can change HTML styles:document.getElementById("demo").style.fontSize = "25px";
JavaScript can change HTML attributes:document.getElementById("image").src = "picture.gif";
HTML Entities
59
Reserved characters in HTML must be replaced with character entities.Characters, not present on your keyboard, can also be replaced by entities.
Result Description Entity Name Entity Number
non-breaking space  < less than < <> greater than > >
& ampersand & &
¢ cent ¢ ¢£ pound £ £¥ yen ¥ ¥€ euro € €© copyright © ©® registered trademark ® ®
HTML Entities
60
Reserved characters in HTML must be replaced with character entities.Characters, not present on your keyboard, can also be replaced by entities.
Result Description Entity Name Entity Number
non-breaking space  < less than < <> greater than > >
& ampersand & &
¢ cent ¢ ¢£ pound £ £¥ yen ¥ ¥€ euro € €© copyright © ©® registered trademark ® ®
61
THE END
top related