Advanced Web Programming Intro to HTML 5 part

Advanced Web Programming Intro to HTML 5 part 1 John Barr

Course Topics • Review of HTML 5 • Review of Web Site design • Review of Cascading Style Sheets (CSS) • DHTML using Java. Script and jquery • Server-side processing using PHP and cgi • Database using mysql

Course Topics • • • Review of HTML 5 Review of Web Site design Review of Cascading Style Sheets DHTML using Java. Script Server-side processing using Perl and cgi

What is HTML? • HTML has a central role in the Web • Tagging scheme for Web pages • From nothing to a global information utility in just 8 years

What is HTML 5? * • HTML 5 [HTML] is NOT an SGML (Standard Generalized Markup Language) application conforming to International Standard ISO 8879. • SGML is a language for describing markup languages, – used in electronic document exchange, document management, and document publishing. – HTML 4 is an example of a language defined in SGML. • SGML has been around since the middle 1980's and has remained quite stable. – the language is both feature-rich and flexible. – very complexity - too complex for the World Wide Web. * this discussion taken from the W 3 C web page at https: //www. w 3. org/TR/html 5/

What is HTML 5? • HTML 5 is the successor to HTML 4 • HTML 5 does NOT have the syntax rules of XHTML – HTML 5 has lots of flexibility: • • Uppercase tag names. Quotes are optional for attributes. Attribute values are optional. Closing empty elements are optional. • HTML added support for multimedia

DOCTYPE • DOCTYPEs in older versions of HTML were longer – the HTML language was SGML based and required a reference to a DTD. • HTML 5 specify DOCTYPE as follows − <!DOCTYPE html> • the above syntax is case-insensitive.

Character Encoding • specify Character Encoding as follows: <meta charset="UTF-8"> • the above syntax is case-insensitive.

The <script> tag • In HTML 4 add a type attribute with a value of "text/javascript" to script elements: <script type="text/javascript" src="scriptfile. js"></script> • HTML 5 simply uses the following syntax: <script src="scriptfile. js"></script>

The <link> tag • Used to link to stylesheets • HTML 4: <link rel="stylesheet" type="text/css" href="stylefile. css"> • HTML 5: <link rel="stylesheet" href="stylefile. css">

HTML 5 Elements • HTML 5 elements are marked up using start tags and end tags. – Tags are delimited using angle brackets – with the tag name in between. – end tags include a slash before the tag name. • Example: <p>. . . </p> • HTML 5 tag names are case insensitive – convention is to use all lower case.

HTML 5 Elements • HTML 5 elements: https: //www. tutorialspoint. com/html 5_tags. htm

HTML 5 Attributes • Elements may contain attributes – used to set various properties of an element. • Some attributes are defined globally and can be used on any element, • others are defined for specific elements only. • All attributes have a name and a value • Attributes defined in CSS • Attributes may only be specified within start tags and must never be used in end tags. • attributes are case insensitive • convention is to stick with lower case.

HTML 5 structure • New tags introduced in HTML 5 for better structure – section − This tag represents a generic document or application section. It can be used together with h 1 -h 6 to indicate the document structure. – article − This tag represents an independent piece of content of a document, such as a blog entry or newspaper article. – aside − This tag represents a piece of content that is only slightly related to the rest of the page.

HTML 5 structure – header − This tag represents the header of a section. – footer − This tag represents a footer for a section and can contain information about the author, copyright information, etc. – nav − This tag represents a section of the document intended for navigation. – dialog − This tag can be used to mark up a conversation. – figure − This tag can be used to associate a caption together with some embedded content, such as a graphic or video.

HTML 5 example <!DOCTYPE html> <head> <meta charset="utf-8"> <title>…</title> </head> <body> <header>. . . </header> <nav>. . . </nav> <article> <section>…</section> </article> <aside>. . . </aside> <figure>. . . </figure> <footer>. . . </footer> </body> </html>

HTML 5 example <!DOCTYPE html> <head> <meta charset="utf-8"> <title>Example 1</title> </head> <body> <header role="banner"> <h 1>HTML 5 Document Structure Example</h 1> <p>This page should be tried in safari, chrome or Mozila. </p> </header> Continued on next page

HTML 5 example <nav> <ul> <li><a href="#">HTML Tutorial</a></li> <li><a href="#">CSS Tutorial</a></li> <li><a href="#">Java. Script Tutorial</a></li> </ul> </nav> <article> <section> <p>Once article can have multiple sections</p> </section> <p>This is a second section</p> </section> </article> Continued on next page

HTML 5 example <aside> <p>This is aside part of the web page</p> </aside> <figure align="right"> <img src=”logo. png" alt="Tutorial. Point" width="200" height="100"> </figure> <footer> <p>Created by <a href="mailto: barr@ithaca. edu">John</a></p> </footer> </body> </html> Continued on next page

Main. html 2 <!DOCTYPE html> 4 5  6  7 8 <html > 9 <head> 2 10 <title>Internet and WWW How to Program - Welcome</title> The text between the 3 11 </head> title tags appears as the 4 12 title of the web page. 8 13 <body> 9 14 <p>Welcome to HTML!</p> 2 15 </body> 3 16 </html> Elements between the body tags of the html document appear in the body of the web page

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <html> <head> <title>Internet and WWW How to Program - Headers</title> </head> <body> <h 1>Level 1 Header</h 1> <h 2>Level 2 header</h 2> <h 3>Level 3 header</h 3> <h 4>Level 4 header</h 4> <h 5>Level 5 header</h 5> <h 6>Level 6 header</h 6> </body> </html> Every HTML document is required to have opening and closing html tags. The font size of the text between tags decreases as the header level increases.

Select a header based on the amount of emphasis you would like to give that text. Program Output

Links 2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html >   <html > <head> <title>Internet and WWW How to Program - Links</title> </head> Text between strong <body> tags will appear bold. Linking <h 1>Here are my favorite sites</h 1> is accomplished in HTML with the anchor (a)page. </strong></p> element. <p><strong>Click on a name to go to that <p><a href = "http: //www. deitel. com">Deitel</a></p> The text between the a tags is the anchor for the link. <p><a href = "http: //www. prenhall. com">Prentice Hall</a></p> <p><a href = "http: //www. yahoo. com">Yahoo!</a></p> <p><a href = "http: //www. usatoday. com">USA Today</a></p> </body> </html> Elements placed between paragraph tags will be set apart from other elements on the page with a vertical line before and after it. The anchor links to the page that’s value is given by the href attribute.

Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.

2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <!DOCTYPE html>   Contact. html <html> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body> To create an email link include <p>My email address is “mailto: ” before the email <a href = "mailto: deitel@deitel. com"> deitel@deitel. com in the href attribute. </a>. Click the address and your browser will openaddress an email message and address it to me. </p> </body> </html>

When a user clicks on an email link, an email message addressed to the value of the link will open up. Program Output

2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <!DOCTYPE html> Picture. html   <html> <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> The value of the src attribute of the image element is the location of the image file. <p><img src = "xmlhtp. jpg" height = "238" width = "183" alt = "XML How to Program book cover" /> <img src = "jhtp. jpg" height = "238" width = "183" alt = "Java How to Program book cover" /></p> </body> </html> The value of the alt attribute gives a description of the image. This description is displayed if the image cannot be displayed. The height and width attributes of the image element give the height and width of the image.

The second image could not be displayed properly, so the value of its alt attribute is displayed instead.

2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html > Nav. html   <html > <head> <title>Internet and WWW How to Program - Navigation Bar </title> </head> <body> <p> <a href = "links. html"> <img src = "buttons/links. jpg" width = "65" height = "50" alt = "Links Page" /></a> Placing an image element between anchor tags, creates an image that is an anchor for a link. <a href = "list. html"> <img src = "buttons/list. jpg" width = "65" height = "50" alt = "List Example Page" /></a> <a href = "contact. html"> <img src = "buttons/contact. jpg" width = "65" height = "50" alt = "Contact Page" /></a> <a href = "header. html"> <img src = "buttons/header. jpg" width = "65" height = "50" alt = "Header Page" /></a> <a href = "table. html"> <img src = "buttons/table. jpg" width = "65" height = "50" alt = "Table Page" /></a> A line break will render an empty line on a web page.

36 37 <a href = "form. html"> 38 <img src = "buttons/form. jpg" width = "65" 39 height = "50" alt = "Feedback Form" /></a> 40 </p> 41 42 </body> 43 </html> Nav. html Using an image as an anchor works exactly the same as using text. Clicking on the image entitled “links” brings the user to the page on the right.

2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html >   Contact 2. html <html > <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body>   <p>My email address is <a href = "mailto: deitel@deitel. com">deitel@deitel. com </a>. Click on the address and your browser will automatically open an email message and address it to my address. </p> The horizontal rule element renders a horizontal line on the web page. Special characters are denoted with an ampersand (&) and an abbreviation for that character. In this <hr />  case, the special <p>All information on this site is <strong>© </strong> characters are Deitel <strong>& </strong> Associates, Inc. 2002. </p> ampersand copyright.     <p><del>You may download 3. 14 x 10<sup>2</sup> characters worth of information from this site. </del> Only <sub>one</sub> download per hour is permitted. </p>

$36 37 <p>Note: <strong>< &frac 14; </strong> of the information 38 presented here is$

36 37 <p>Note: <strong>< &frac 14; </strong> of the information 38 presented here is updated daily. </p> 39 40 </body> 41 </html> Contact 2. html Text placed between del tags is struck out. . Text placed between the sub tags is subscripted. Text placed between the sup tags is superscripted.

2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 <!DOCTYPE html>   Links 2. html <html> <head> <title>Internet and WWW How to Program - Links</title> </head> <body> <h 1>Here are my favorite sites</h 1> <p><strong>Click on a name to go to that page. </strong></p> <ul> <li><a href = "http: //www. deitel. com">Deitel</a></li> <li><a href = "http: //www. prenhall. com">Prentice Hall </a></li> <li><a href = "http: //www. yahoo. com">Yahoo!</a></li> <li><a href = "http: //www. usatoday. com">USA Today</a> An entry in the list must </li> be placed between the </ul> <li> and </li> tags. </body> </html> The entries in an unordered list must be included between the <ul> and </ul> tags.

Each entry in the list is rendered on its own line with a bullet before it. Program Output

2 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 <!DOCTYPE html> List. html   <html> <head> <title>Internet and WWW How to Program - Lists</title> </head> <body> <h 1>The Best Features of the Internet</h 1> <ul> <li>You can meet new people from countries around the world. </li> <li>You have access to new media as it becomes public:    <ul> <li>New games</li> <li>New applications  <ol type = "I"> <li>For business</li> <li>For pleasure</li> </ol>  </li> By inserting a list as an entry in another list, lists can be nested. Entries for an ordered list must be placed between the <ol> and </ol> tags.

36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 <li>Around the clock news</li> <li>Search engines</li> <li>Shopping</li> <li>Programming <ol type = "a"> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol> List. html The type attribute of the ordered list element allows you to select a sequence type to order the list. </li> </ul>  </li> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul>  <h 1>My 3 Favorite <em>CEOs</em></h 1>   <ol> <li>Harvey Deitel</li> <li>Bill Gates</li> <li>Michael Dell</li> </ol> Text placed between the em tags will be italicized.

69 70 </body> 71 </html> List. html Nested lists are indented underneath the main list. Some sequence types available to order lists are roman numerals, letters and numbers.