Download presentation
Presentation is loading. Please wait.
1
Advanced Web Programming Intro to HTML5 part 1
John Barr
2
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
3
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
4
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
5
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
![What is HTML 5 * HTML 5 [HTML] is NOT an SGML (Standard Generalized Markup Language) application conforming to International Standard ISO](http://slideplayer.com./slide/13197387/79/images/5/What+is+HTML+5+%2A+HTML+5+%5BHTML%5D+is+NOT+an+SGML+%28Standard+Generalized+Markup+Language%29+application+conforming+to+International+Standard+ISO.jpg "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")
6
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
7
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.
8
Character Encoding specify Character Encoding as follows:
<meta charset="UTF-8"> the above syntax is case-insensitive.
9
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>
10
The <link> tag Used to link to stylesheets HTML4: HTML 5:
<link rel="stylesheet" type="text/css" href="stylefile.css"> HTML 5: <link rel="stylesheet" href="stylefile.css">
11
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.
12
HTML5 Elements HTML5 elements:
13
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.
14
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.
15
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.
16
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>
17
HTML5 example Continued on next page
<!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
18
HTML5 example Continued on next page
<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> <p>This is a second section</p> </article> Continued on next page
19
HTML5 example Continued on next page
<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 </footer> </body> </html> Continued on next page
20
The text between the title tags appears as the title of the web page.
Main.html <!DOCTYPE html> 4 5 <!-- Fig. 4.1: main.html --> 6 <!-- Our first Web page --> 7 <html > <head> <title>Internet and WWW How to Program - Welcome</title> </head> 12 <body> <p>Welcome to HTML!</p> </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
21
Every HTML document is required to have opening and closing html tags.
1 2 <html> <head> <title>Internet and WWW How to Program - Headers</title> </head> 6 <body> 8 <h1>Level 1 Header</h1> <h2>Level 2 header</h2> <h3>Level 3 header</h3> <h4>Level 4 header</h4> <h5>Level 5 header</h5> <h6>Level 6 header</h6> 15 </body> 17 </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.
22
Program Output Select a header based on the amount of emphasis you would like to give that text.
23
Links Text between strong tags will appear bold.
2 <!DOCTYPE html > 4 5 <!-- Fig. 4.5: links.html > 6 <!-- Introduction to hyperlinks --> 7 8 <html > <head> <title>Internet and WWW How to Program - Links</title> </head> 12 <body> 14 <h1>Here are my favorite sites</h1> 16 <p><strong>Click on a name to go to that page.</strong></p> 18 <p><a href = " 20 <p><a href = " Hall</a></p> 22 <p><a href = " 24 <p><a href = " Today</a></p> 26 </body> 28 </html> Text between strong tags will appear bold. Linking is accomplished in HTML with the anchor (a) element. The text between the a tags is the anchor for the link. 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.
24
Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.
25
Contact.html 2 <!DOCTYPE html> 4 5 <!-- Fig. 4.6: contact.html --> 6 <!-- Adding hyperlinks --> 7 8 <html> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> 13 <body> 15 <p>My address is <a href = </a>. Click the address and your browser will open an message and address it to me.</p> 20 </body> 22 </html> To create an link include “mailto:” before the address in the href attribute.
26
When a user clicks on an link, an message addressed to the value of the link will open up. Program Output
27
Picture.html 2 <!DOCTYPE html> 4 5 <!-- Fig. 4.7: picture.html --> 6 <!-- Adding images with XHTML --> 7 8 <html> <head> <title>Internet and WWW How to Program - Welcome</title> </head> 12 <body> 14 <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> 20 </html> The value of the src attribute of the image element is the location of the image file. The height and width attributes of the image element give the height and width of the image. The value of the alt attribute gives a description of the image. This description is displayed if the image cannot be displayed.
28
The second image could not be displayed properly, so the value of its alt attribute is displayed instead.
29
A line break will render an empty line on a web page.
2 <!DOCTYPE html > 4 5 <!-- Fig. 4.8: nav.html > 6 <!-- Using images as link anchors --> 7 8 <html > <head> <title>Internet and WWW How to Program - Navigation Bar </title> </head> 13 <body> 15 <p> <a href = "links.html"> <img src = "buttons/links.jpg" width = "65" height = "50" alt = "Links Page" /></a><br /> 20 <a href = "list.html"> <img src = "buttons/list.jpg" width = "65" height = "50" alt = "List Example Page" /></a><br /> 24 <a href = "contact.html"> <img src = "buttons/contact.jpg" width = "65" height = "50" alt = "Contact Page" /></a><br /> 28 <a href = "header.html"> <img src = "buttons/header.jpg" width = "65" height = "50" alt = "Header Page" /></a><br /> 32 <a href = "table.html"> <img src = "buttons/table.jpg" width = "65" height = "50" alt = "Table Page" /></a><br /> Nav.html Placing an image element between anchor tags, creates an image that is an anchor for a link. A line break will render an empty line on a web page.
30
Using an image as an anchor works exactly the same as using text.
36 <a href = "form.html"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /></a><br /> </p> 41 </body> 43 </html> Nav.html Clicking on the image entitled “links” brings the user to the page on the right. Using an image as an anchor works exactly the same as using text.
31
The horizontal rule element renders a horizontal line on the web page.
Contact2.html 2 <!DOCTYPE html > 4 5 <!-- Fig. 4.9: contact2.html > 6 <!-- Inserting special characters --> 7 8 <html > <head> <title>Internet and WWW How to Program - Contact Page </title> </head> 13 <body> 15 <!-- Special characters are entered --> <!-- using the form &code; > <p>My address is <a href = </a>. Click on the address and your browser will automatically open an message and address it to my address.</p> 23 <hr /> <!-- Inserts a horizontal rule --> 25 <p>All information on this site is <strong>©</strong> Deitel <strong>&</strong> Associates, Inc </p> 28 <!-- 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> 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 case, the special characters are ampersand and copyright.
32
Contact2.html Text placed between del tags is struck out..
36 <p>Note: <strong>< ¼</strong> of the information presented here is updated daily.</p> 39 </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.
33
2 <!DOCTYPE html> 4 5 <!-- Fig. 4.10: links2.html > 6 <!-- Unordered list containing hyperlinks --> 7 8 <html> <head> <title>Internet and WWW How to Program - Links</title> </head> 12 <body> 14 <h1>Here are my favorite sites</h1> 16 <p><strong>Click on a name to go to that page.</strong></p> 18 <ul> <li><a href = " 21 <li><a href = " Hall </a></li> 24 <li><a href = " 26 <li><a href = " Today</a> </li> </ul> </body> 31 </html> Links2.html The entries in an unordered list must be included between the <ul> and </ul> tags. An entry in the list must be placed between the <li> and </li> tags.
34
Program Output Each entry in the list is rendered on its own line with a bullet before it.
35
By inserting a list as an entry in another list, lists can be nested.
List.html 2 <!DOCTYPE html> 4 5 <!-- Fig. 4.11: list.html > 6 <!-- Advanced Lists: nested and ordered --> 7 8 <html> <head> <title>Internet and WWW How to Program - Lists</title> </head> 12 <body> 14 <h1>The Best Features of the Internet</h1> 16 <ul> <li>You can meet new people from countries around the world.</li> <li>You have access to new media as it becomes public: 21 <!-- 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 28 <!-- Another nested list --> <ol type = "I"> <li>For business</li> <li>For pleasure</li> </ol> <!-- Ends the double nested list --> </li> 35 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
Text placed between the em tags will be italicized.
List.html <li>Around the clock news</li> <li>Search engines</li> <li>Shopping</li> <li>Programming 40 <ol type = "a"> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li> </ol> 48 </li> 50 </ul> <!-- Ends the first level nested list --> </li> 53 <li>Links</li> <li>Keeping in touch with old friends</li> <li>It is the technology of the future!</li> 57 </ul> <!-- Ends the primary unordered list --> 59 <h1>My 3 Favorite <em>CEOs</em></h1> 61 <!-- 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> The type attribute of the ordered list element allows you to select a sequence type to order the list. Text placed between the em tags will be italicized.
37
69 70 </body> 71 </html>
List.html 69 </body> 71 </html> Nested lists are indented underneath the main list. Some sequence types available to order lists are roman numerals, letters and numbers.
Similar presentations
