Content Introduction to HTML HTML Basic Examples HTML
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 <h 1> and </h 1> 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 • HTML Documents 12
HTML Basic Examples • HTML Headings 13
HTML Elements • 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> 14
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" 15
HTML Attributes (cont. ) • The lang Attribute <!DOCTYPE html> <html lang="en-US"> <body> • The title Attribute <p title="About W 3 Schools">W 3 Schools is a web developer's site. </p> <h 1>My First Heading</h 1> <p>My first paragraph. </p> </body> </html> 16
HTML Attributes (cont. ) • The href Attribute <a href="http: //www. w 3 schools. com">This is a link</a> • Size Attributes <img src="w 3 schools. jpg" width="104" height="142"> 17
HTML Headings • Headings are defined with the <h 1> to <h 6> tags. • <h 1> defines the most important heading. <h 6> defines the least important heading. <h 1>This is a heading 1</h 1> <h 2>This is a heading 2</h 2> <h 3>This is a heading 3</h 3> <h 4>This is a heading 4</h 4> <h 5>This is a heading 5</h 5> <h 6>This is a heading 6</h 6> • 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 element defines a line break. • Use if you want a line break (a new line) without starting a new paragraph: <p>This is a para 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"> <h 1>This is a heading</h 1> <p>This is a paragraph. </p> </body> 21
HTML Styles (cont. ) The HTML Style Attribute style="property: value" HTML Text Color <h 1 style="color: blue">This is a heading</h 1> HTML Fonts <h 1 style="font-family: verdana">This is a heading</h 1> HTML Text Size <h 1 style="font-size: 300%">This is a heading</h 1> HTML Text Alignment <h 1 style="text-align: center">Centered Heading</h 1> 22
HTML Text Formatting Elements 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 <h 2>HTML <small>Small</small> Formatting</h 2> HTML Marked Formatting <h 2>HTML <mark>Marked</mark> Formatting</h 2> 23
HTML Text Formatting Elements (cont. ) 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> 24
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> HTML <blockquote> for Long Quotations <p>Test Long Quotations. </p> <blockquote> Test Long Quotations Test Long Quotations Test Long Quotations. </blockquote> 26
HTML Computer Code Elements <code> Defines programming code <kbd> Defines keyboard input <samp> Defines computer output <var> Defines a mathematical variable <pre> Defines preformatted text 27
HTML Computer Code Elements (cont. ) 28
HTML Styles - CSS Styling HTML with 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 29
HTML Styles – CSS (cont. ) CSS Syntax CSS styling has the following syntax: element { property: value; } p { color: red; font-family: courier; } 30
HTML Styles – CSS (cont. ) Inline Styling (Inline CSS) <h 1 style="color: blue">This is a Blue Heading</h 1> Internal Styling (Internal CSS) <style> body {background-color: lightgrey} h 1 {color: blue} p {color: green} </style> External Styling (External CSS) <link rel="stylesheet" href="styles. css"> 31
HTML Styles – CSS (cont. ) CSS Fonts <style> h 1 { } p { } </style> color: blue; font-family: verdana; font-size: 300%; color: red; font-family: courier; font-size: 160%; 32
HTML Styles – CSS (cont. ) The CSS Box Model The CSS border property defines a visible border around an HTML element: p { border: 1 px solid black; } The CSS padding property defines a padding (space) inside the border: p{ border: 1 px solid black; padding: 10 px; } The CSS margin property defines a margin (space) outside the border: p{ border: 1 px solid black; padding: 10 px; margin: 30 px; } 33
HTML Styles – CSS (cont. ) The id Attribute The class Attribute <p id="p 01">I am different</p> <p class="error">I am different</p> css p#p 01 { color: blue; } css p. error { color: red; } 34
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> 35
HTML Links (cont. ) 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 36
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="HTML 5 Icon"style="width: 128 px; height: 128 px; "> Image Size - Width and Height <img src="html 5. gif" alt="HTML 5 Icon" style="width: 128 px; height: 128 px; "> or <img src="html 5. gif" alt="HTML 5 Icon" width="128" height="128"> 37
HTML Images (cont. ) Width and Height or Style? <!DOCTYPE html> <head> <style> img { width: 100%; } </style> </head> <body> <img src="html 5. gif" alt="HTML 5 Icon" style="width: 128 px; height: 128 px; "> <img src="html 5. gif" alt="HTML 5 Icon" width="128" height="128"> </body> </html> 38
HTML Images (cont. ) Images in Another Folder <img src="/images/html 5. gif" alt="HTML 5 Icon“ style="width: 128 px; height: 128 px; "> Images on Another Server <img src="http: //www. w 3 schools. com/images/w 3 schools_green. jpg"> Animated Images <img src="programming. gif" alt="Computer Man“ style="width: 48 px; height: 48 px; "> Using an Image as a Link <a href="default. asp"> <img src="smiley. gif" alt="HTML tutorial“ style="width: 42 px; height: 42 px; border: 0; "> </a> 39
HTML Tables Defining HTML Tables <table style="width: 100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> 40
HTML Tables (cont. ) An HTML Table with a Border Attribute <table border=“ 1” style="width: 100%"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> 41
HTML Tables (cont. ) An HTML Table with Collapsed Borders <style> table, th, td { border: 1 px solid black; border-collapse: collapse; } </style> An HTML Table with Cell Padding <style> table, th, td { border: 1 px solid black; border-collapse: collapse; } th, td { padding: 15 px; }</style> 42
HTML Tables (cont. ) HTML Table Headings <table style="width: 100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Points</th> </tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> 43
HTML Tables (cont. ) Table Cells that Span Many Columns <table style="width: 100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> 44
HTML Tables (cont. ) Table Cells that Span Many Rows <table style="width: 100%"> <tr> <th>Name: </th> <td>Bill Gates</td> </tr> <th rowspan="2">Telephone: </th> <td>555 77 854</td> </tr> <td>555 77 855</td> </tr> </table> 45
HTML Lists 46
HTML Lists (cont. ) Unordered HTML Lists Ordered HTML Lists <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> HTML Description Lists Nested HTML Lists <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> 47
HTML Block Elements 48
HTML Classes 49
HTML Layouts 50
HTML Layouts (cont. ) HTML Layout Using <div> Elements 51
HTML Layouts (cont. ) HTML Layout Using <div> Elements 52
HTML Responsive Web Design 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 53
HTML Responsive Web Design (cont. ) Using HTML 5. CSS Another way to create a responsive design, is to use an already existing CSS style sheet, like W 3. CSS or HTML 5. CSS <link rel="stylesheet" href="html 5. css"> * You can download the different style sheets from w 3 css_downloads Using Bootstrap 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. 54
HTML Iframes 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> 55
HTML Scripts The HTML <script> Tag <script> document. get. Element. By. Id("demo"). inner. HTML = "Hello Java. Script!"; </script> The HTML <noscript> Tag <script> document. get. Element. By. Id("demo"). inner. HTML = "Hello Java. Script!"; </script> <noscript>Sorry, your browser does not support Java. Script!</noscript> 56
HTML Scripts (cont. ) 57
HTML Scripts (cont. ) Java. Script can change HTML content: document. get. Element. By. Id("demo"). inner. HTML = "Hello Java. Script!"; Java. Script can change HTML styles: document. get. Element. By. Id("demo"). style. font. Size = "25 px"; Java. Script can change HTML attributes: document. get. Element. By. Id("image"). src = "picture. gif"; 58
HTML Entities 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 ; 160#& > less than < ; 60#& < greater than > ; 62#& & ampersand & ; 38#& ¢ cent ¢ ; 162#& £ pound £ ; 163#& ¥ yen ¥ ; 165#& € euro € ; 8364#& © copyright © ; 169#& ® registered trademark ® ; 174#& 59
HTML Entities 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 ; 160#& > less than < ; 60#& < greater than > ; 62#& & ampersand & ; 38#& ¢ cent ¢ ; 162#& £ pound £ ; 163#& ¥ yen ¥ ; 165#& € euro € ; 8364#& © copyright © ; 169#& ® registered trademark ® ; 174#& 60
THE END 61
- Slides: 61
