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 webdocuments (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 texteditor
6
Example
•Save the file as “firstpage.htm".
7
Example Explained
•The DOCTYPE declaration defines the document typeto be HTML
•The text between <html> and </html> describes anHTML document
•The text between <head> and </head> providesinformation about the document
•The text between <title> and </title> provides a titlefor the document
8
Example Explained
•The text between <body> and </body> describes thevisible page content
•The text between <h1> and </h1> describes aheading
•The text between <p> and </p> describes aparagraph
*Using this description, a web browser can display adocument 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 tothe end tag:
<p>My first HTML paragraph.</p>
HTML Attributes
15
•HTML Attributes
•HTML elements can have attributes
•Attributes provide additional information about anelement
•Attributes are always specified in the start tag
•Attributes come in name/value pairslike: 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="AboutW3Schools">W3Schools is aweb 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 theleast 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 (amargin) 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 anempty line before and after aparagraph.
19
HTML Line Breaks
•The HTML <br> element defines a line break.
•Use <br> if you want a line break (a new line) withoutstarting 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 (backgroundcolor 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 usingthe 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 LongQuotations Test Long Quotations Test Long Quotations Test Long Quotations TestLong Quotations Test Long Quotations.
</blockquote>
HTML Computer Code Elements (cont.)
28
HTML Styles - CSS
29
Styling HTML with CSS
CSS stands for Cascading Style Sheets
Styling 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 Syntax
CSS 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 Model
The 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>
css
p#p01 { color:blue;}
css
p.error { color:red;}
HTML Links
35
HTML Links - Syntax
In 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 Attribute
The 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 Syntax
In 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.CSS
Another way to create a responsive design, is to use an already existingCSS style sheet, like W3.CSS or HTML5.CSS
<link rel="stylesheet" href="html5.css">
Using Bootstrap
Bootstrap is the most popular HTML, CSS, and JS framework fordeveloping responsive webs<link rel="stylesheet" href="bootstrap.min.css">
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