CHAPTER 1 HTML & 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 and describes an HTML document The text between and provides information about the document The text between and provides a title for the document 8

Example Explained The text between and describes the visible page content The text between and describes a heading The text between and 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. content The HTML element is everything from the start tag to the end tag: My first HTML paragraph.

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 My First Heading My first paragraph. The title Attribute W3Schools is a web developer's site.

HTML Attributes (cont.) 17 The href Attribute This is a link Size Attributes

HTML Headings Headings are defined with the to tags. defines the most important heading. defines the least important heading. This is a heading 1 This is a heading 2 This is a heading 3 This is a heading 4 This is a heading 5 This is a heading 6 Browsers automatically add some empty space (a margin) before and after each heading. 18

HTML Paragraphs Paragraphs are defined with the tag. This is a paragraph 1. This is a paragraph 2. This is a paragraph 3. Browsers automatically add an empty line before and after a paragraph. 19

HTML Line Breaks The HTML element defines a line break. Use if you want a line break (a new line) without starting a new paragraph: This is a para graph with line breaks 20

HTML Styles HTML Styling Every HTML element has a default style (background color is white and text color is black). This is a heading This is a paragraph. 21

HTML Styles (cont.) The HTML Style Attribute style="property:value" 22 HTML Text Color This is a heading HTML Fonts This is a heading HTML Text Size This is a heading HTML Text Alignment Centered Heading

HTML Text Formatting Elements 23 HTML Bold and Strong Formatting This text is bold. This text is strong. HTML Italic and Emphasized Formatting This text is italic. This text is emphasized. HTML Small Formatting HTML Marked Formatting

HTML Text Formatting Elements (cont.) 24 HTML Deleted Formatting My favorite color is blue red. HTML Inserted Formatting My favorite color is red. HTML Subscript Formatting This is subscripted text. HTML Superscript Formatting This is superscripted text.

HTML Comments HTML Comment Tags You can add comments to your HTML source by using the following syntax: This is a paragraph. 25

HTML Quotation and Citation Elements HTML for Short Quotations MCT => Mobile Computing Technology. 26 HTML for 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 Test Long Quotations Test Long Quotations.

HTML Computer Code Elements 27 Defines programming code Defines keyboard input Defines computer output Defines a mathematical variable Defines preformatted text

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 element in the HTML 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) This is a Blue Heading Internal Styling (Internal CSS) body {background-color:lightgrey} h1 {color:blue} p {color:green} External Styling (External CSS)

HTML Styles – CSS (cont.) 32 CSS Fonts h1 { color:blue; font-family:verdana; font-size:300%; } p { color:red; font-family:courier; font-size:160%; }

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 I am different The class Attribute I am different css p#p01 { color:blue; } css p.error { color:red; }

HTML Links 35 HTML Links - Syntax In HTML, links are defined with the tag: link text Example UP Web site

HTML Links (cont.) 36 HTML Links - The target Attribute The target attribute specifies where to open the linked document. Example UP Website Target ValueDescription _blankOpens the linked document in a new window or tab _selfOpens the linked document in the same frame as it was clicked (this is default) _parentOpens the linked document in the parent frame _topOpens the linked document in the full body of the window framenameOpens the linked document in a named frame

HTML Images 37 HTML Images Syntax In HTML, images are defined with the tag. The alt Attribute Image Size - Width and Height or

HTML Images (cont.) 38 Width and Height or Style? img { width:100%; }

HTML Images (cont.) 39 Images in Another Folder Images on Another Server Animated Images Using an Image as a Link

HTML Tables 40 Defining HTML Tables Jill Smith 50 Eve Jackson 94

HTML Tables (cont.) 41 An HTML Table with a Border Attribute Jill Smith 50 Eve Jackson 94

HTML Tables (cont.) 42 An HTML Table with Collapsed Borders table, th, td { border: 1px solid black; border-collapse: collapse; } An HTML Table with Cell Padding table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; }

HTML Tables (cont.) 43 HTML Table Headings Firstname Lastname Points Eve Jackson 94

HTML Tables (cont.) 44 Table Cells that Span Many Columns Name Telephone Bill Gates

HTML Tables (cont.) 45 Table Cells that Span Many Rows Name: Bill Gates Telephone:

HTML Lists 46

HTML Lists (cont.) 47 Unordered HTML Lists Coffee Tea Milk Ordered HTML Lists Coffee Tea Milk HTML Description Lists Coffee - black hot drink Milk - white cold drink Nested HTML Lists Coffee Tea Black tea Green tea Milk

HTML Block Elements 48

HTML Classes 49

HTML Layouts 50

HTML Layouts (cont.) 51 HTML Layout Using Elements

HTML Layouts (cont.) 52 HTML Layout Using 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 existing CSS style sheet, like W3.CSS or HTML5.CSSW3.CSSHTML5.CSS * You can download the different style sheets from w3css_downloadsw3css_downloads Using Bootstrap Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive webs * To learn more about Bootstrap read our Bootstrap Tutorial.Bootstrap Tutorial

HTML Iframes 55 Iframe Syntax Iframe - Set Height and Width Iframe - Remove the Border Use iframe as a Target for a Link up.ac.th

HTML Scripts 56 The HTML Tag document.getElementById("demo").innerHTML = "Hello JavaScript!"; The HTML Tag document.getElementById("demo").innerHTML = "Hello JavaScript!"; Sorry, your browser does not support JavaScript!

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. ResultDescriptionEntity NameEntity 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. ResultDescriptionEntity NameEntity Number non-breaking space   <less than<< >greater than>> &ampersand&& ¢cent¢¢ £pound££ ¥yen¥¥ €euro€€ ©copyright©© ®registered trademark®®

61 THE END