CHAPTER 1 HTML & HTML5 I อ. ยืนยง กันทะเนตร คณะเทคโนโลยีสารสนเทศและการสื่อสาร มหาวิทยาลัยพะเยา

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:



<p>This is a paragraph.</p>



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

http://www.w3schools.com/tags/tag_code.asp

http://www.w3schools.com/tags/tag_kbd.asp

http://www.w3schools.com/tags/tag_samp.asp

http://www.w3schools.com/tags/tag_var.asp



http://www.w3schools.com/tags/tag_pre.asp

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;}


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">


32

CSS Fonts<style>h1 {

color:blue; font-family:verdana; font-size:300%;

}p {

color:red; font-family:courier; font-size:160%;

}</style>


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;

}


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.

http://www.w3schools.com/w3css/default.asp

http://www.w3schools.com/w3css/w3css_html5.asp

http://www.w3schools.com/w3css/w3css_downloads.asp

http://www.w3schools.com/bootstrap/default.asp

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