Advanced Web Programming Intro to HTML5 part 1 Course Topics • Review of HTML5 • Review of Web Site design • Review of Cascading Style Sheets (CSS) • DHTML using JavaScript and jquery • Server-side processing using PHP and cgi • Database using mysql Course Topics • • • • • Review of HTML5 Review of Web Site design Review of Cascading Style Sheets DHTML using JavaScript 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. – HTML4 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 W3C web page at https://www.w3.org/TR/html5/ What is HTML 5? • HTML5 is the successor to HTML 4 • HTML5 does NOT have the syntax rules of XHTML – HTML5 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> • HTML5 simply uses the following syntax: <script src="scriptfile.js"></script> The <link> tag • Used to link to stylesheets • HTML4: <link rel="stylesheet" type="text/css" href="stylefile.css"> • HTML 5: <link rel="stylesheet" href="stylefile.css"> HTML5 Elements • HTML5 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> • HTML5 tag names are case insensitive – convention is to use all lower case. HTML5 Elements • HTML5 elements: https://www.tutorialspoint.com/html5/html5_tags.htm HTML5 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. HTML5 structure • New tags introduced in HTML5 for better structure – section − This tag represents a generic document or application section. It can be used together with h1-h6 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. HTML5 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. HTML5 example <!DOCTYPE html> <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> HTML5 example <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Example 1</title> </head> <body> <header role="banner"> <h1>HTML5 Document Structure Example</h1> <p>This page should be tried in safari, chrome or Mozila.</p> </header> Continued on next page HTML5 example <nav> <ul> <li><a href="#">HTML Tutorial</a></li> <li><a href="#">CSS Tutorial</a></li> <li><a href="#">JavaScript Tutorial</a></li> </ul> </nav> <article> <section> <p>Once article can have multiple sections</p> </section> <section> <p>This is a second section</p> </section> </article> Continued on next page HTML5 example <aside> <p>This is aside part of the web page</p> </aside> <figure align="right"> <img src=”logo.png" alt="TutorialPoint" 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 <!-- Fig. 4.1: main.html --> 6 <!-- Our first Web page --> 7 8 <html > 9 <head> 10 <title>Internet and WWW How to Program - Welcome</title> 11 </head> 12 13 <body> 14 <p>Welcome to HTML!</p> 15 </body> 16 </html> The text between the title tags appears as the title of the web page. Elements between the body tags of the html document appear in the body of the web page 1 2 <html> 3 <head> 4 <title>Internet and WWW How to Program - Headers</title> 5 </head> 6 7 <body> 8 9 <h1>Level 1 Header</h1> Every HTML document is 10 <h2>Level 2 header</h2> required to have opening 11 <h3>Level 3 header</h3> and closing html tags. 12 <h4>Level 4 header</h4> 13 <h5>Level 5 header</h5> 14 <h6>Level 6 header</h6> The font size of the text 15 between tags decreases as 16 </body> the header level increases. 17 </html> 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 > <!-- Fig. 4.5: links.html --> <!-- Introduction to hyperlinks --> <html > <head> <title>Internet and WWW How to Program - Links</title> </head> Text between strong <body> tags will appear bold. Linking <h1>Here are my favorite sites</h1> 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 <!-- Fig. 4.6: contact.html --> <!-- Adding email hyperlinks --> <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 <!-- Fig. 4.7: picture.html --> <!-- Adding images with XHTML --> <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 <!-- Fig. 4.8: nav.html --> <!-- Using images as link anchors --> <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><br /> 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><br /> <a href = "contact.html"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /></a><br /> <a href = "header.html"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /></a><br /> <a href = "table.html"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /></a><br /> 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><br /> 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 > <!-- Fig. 4.9: contact2.html --> <!-- Inserting special characters --> Contact2.html <html > <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body> <!-- Special characters are entered --> <!-- using the form &code; --> <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 /> <!-- Inserts a horizontal rule --> case, the special <p>All information on this site is <strong>&copy;</strong> characters are Deitel <strong>&amp;</strong> Associates, Inc. 2002.</p>ampersand and copyright. <!-- Text can be struck out with a set of --> <!-- <del>...</del> tags, it can be set in subscript --> <!-- with <sub>...</sub>, and it can be set into --> <!-- superscript with <sup...</sup> --> <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>&lt; &frac14;</strong> of the information 38 presented here is updated daily.</p> 39 40 </body> 41 </html> Contact2.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> <!-- Fig. 4.10: links2.html --> <!-- Unordered list containing hyperlinks --> Links2.html <html> <head> <title>Internet and WWW How to Program - Links</title> </head> <body> <h1>Here are my favorite sites</h1> <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 <!-- Fig. 4.11: list.html --> <!-- Advanced Lists: nested and ordered --> <html> <head> <title>Internet and WWW How to Program - Lists</title> </head> <body> <h1>The Best Features of the Internet</h1> <ul> <li>You can meet new people from countries around the world.</li> <li>You have access to new media as it becomes public: <!-- This starts a nested list, which uses a --> <!-- modified bullet. The list ends when you --> <!-- close the <ul> tag --> <ul> <li>New games</li> <li>New applications <!-- Another nested list --> <ol type = "I"> <li>For business</li> <li>For pleasure</li> </ol> <!-- Ends the double nested list --> </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> <!-- Ends the first level nested list --> </li> <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> </ul> <!-- Ends the primary unordered list --> <h1>My 3 Favorite <em>CEOs</em></h1> <!-- ol elements without a type attribute --> <!-- have a numeric sequence type (i.e., 1, 2, ...) --> <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.
