IntroHTML Part1

Advanced Web
Programming
Intro to HTML5
part 1
John Barr
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:[email protected]">John</a></p>
</footer>
</body>
</html>
Continued on next page
Main.html
2 <!DOCTYPE html>
4
5 
6 
7
8 <html >
9 <head>
10 <title>Internet and WWW How to Program -
Welcome</title> The text between the
11 </head> title tags appears as the
12 title of the web page.
13 <body>
14 <p>Welcome to HTML!</p>
15 </body> Elements between the body tags
16 </html> of the html document appear in
the body of the web page
1
2 <html>
3 <head>
Headers</title>
5 </head>
6
7 <body>
8
Every HTML document is
9 <h1>Level 1 Header</h1> required to have opening
10 <h2>Level 2 header</h2> and closing html tags.
11 <h3>Level 3 header</h3>
14 <h6>Level 6 header</h6> The font size of the text
between tags decreases as
15 the header level increases.
16 </body>
17 </html>
Select a header based on the
amount of emphasis you
would like to give that text.
Program Output
Links
2 <!DOCTYPE html >
4
5 
6 
7
8 <html >
9 <head>
10 <title>Internet and WWW How to Program - Links</title>
11 </head> Text between strong
12 tags will appear bold.
13 <body>
14
15
Linking is accomplished
<h1>Here are my favorite sites</h1>
16 in HTML with the anchor
17 <p><strong>Click on a(a) element.
name to go to that page.</strong></p>
18
19 <p><a href = "http://www.deitel.com">Deitel</a></p>
The text between the a tags
20
21 <p><a href =
is the anchor for the link.
"http://www.prenhall.com">Prentice Hall</a></p>
22
23 <p><a href = "http://www.yahoo.com">Yahoo!</a></p>
The anchor links to the
24
page that’s value is given
25 <p><a href = "http://www.usatoday.com">USA Today</a></p>
Elements placed between paragraph by the href attribute.
26
27 </body> tags will be set apart from other
28 </html> elements on the page with a vertical
line before and after it.
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.
2 <!DOCTYPE html>
4
5 
Contact.html
6 
7
8 <html>
9 <head>
10 <title>Internet and WWW How to Program - Contact
Page
11 </title>
12 </head>
13
14 <body>
15 To create an email link include
16 <p>My email address is “mailto:” before the email
17 address in the href attribute.
<a href = "mailto:[email protected]">
[email protected]
18 </a>. Click the address and your browser will open
an
19 email message and address it to me.</p>
20
21 </body>
22 </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 <!DOCTYPE html>
4
5 
Picture.html
6 
7
8 <html>
9 <head>
Welcome</title>
11 </head>
The value of the src attribute
12
of the image element is the
13 <body> location of the image file.
14
15 <p><img src = "xmlhtp.jpg" height = "238" width
= "183"
16 alt = "XML How to Program book cover" />
17 <img src = "jhtp.jpg" height = "238" width =
"183"
18 alt = "Java How to Program book cover"
/></p>
19 </body>
The height and width
20 </html>
attributes of the image
The value of the alt attribute
element give the height and
gives a description of the image.
width of the image.
This description is displayed if
the image cannot be displayed.
The second image could not be
displayed properly, so the value of
its alt attribute is displayed instead.
2 <!DOCTYPE html >
4
5
6
7

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

-->
Contact2.html
7
8 <html >
9 <head>
10 <title>Internet and WWW How to Program - Contact Page
11 </title>
12 </head>
13
14 <body>
15 The horizontal rule element renders a
16  horizontal line on the web page.
17 
18 <p>My email address is Special characters
19 are denoted with an
<a href = "mailto:[email protected]">[email protected]
20 </a>. Click on the address and your browser will
21
ampersand (&) and
automatically open an email message and address it to my
22 address.</p> an abbreviation for
23 that character. In this
24 <hr /> 
25
case, the special
26 characters are
<p>All information on this site is <strong>©</strong>
27 ampersand
Deitel <strong>&</strong> Associates, Inc. and
2002.</p>
28
29
copyright.

30 
31 
32 
33 <p><del>You may download 3.14 x 10<sup>2</sup>
34 characters worth of information from this site.</del>
35 Only <sub>one</sub> download per hour is permitted.</p>
36
37 <p>Note: <strong>< ¼</strong> of the information
38
39
40
presented here is updated daily.</p>
</body>
Contact2.html
41 </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 <!DOCTYPE html>
4
5
6


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


List.html
7
8 <html>
9 <head>
10 <title>Internet and WWW How to Program - Lists</title>
11 </head>
12
13 <body>
14
15 <h1>The Best Features of the Internet</h1>
16
17 <ul>
18 <li>You can meet new people from countries around
19 the world.</li>
20 <li>You have access to new media as it becomes public:
21
22 
23  By inserting a list as an entry in
24  another list, lists can be nested.
25 <ul>
26 <li>New games</li>
27 <li>New applications
28
29 
30 <ol type = "I">
31 <li>ForEntries for an ordered list must be placed
business</li>
32 <li>For pleasure</li>
33
between the <ol> and </ol> tags.
</ol> 
34 </li>
35
36 <li>Around the clock news</li>
37
38
39
<li>Search engines</li>
<li>Shopping</li>
<li>Programming
List.html
40
41 <ol type = "a">
42 <li>XML</li>
43 <li>Java</li> The type attribute of the ordered
44 <li>XHTML</li>
45
list element allows you to select a
<li>Scripts</li>
46 sequence type to order the list.
<li>New languages</li>
47 </ol>
48
49 </li>
50
51 </ul> 
52 </li>
53
54 <li>Links</li>
55 <li>Keeping in touch with old friends</li> Text placed between the em
56 <li>It is the technology of the future!</li> tags will be italicized.
57
58 </ul> 
59
60 <h1>My 3 Favorite <em>CEOs</em></h1>
61
62 
63 
64 <ol>
65 <li>Harvey Deitel</li>
66 <li>Bill Gates</li>
67 <li>Michael Dell</li>
68 </ol>
69
70
71
</body>
</html>
List.html
Nested lists are indented

underneath the main list.
Some sequence types available

to order lists are roman
numerals, letters and numbers.

IntroHTML Part1

Uploaded by

Copyright:

Available Formats

IntroHTML Part1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

IntroHTML Part1

Uploaded by

Copyright:

Available Formats

Advanced Web

• Tagging scheme for Web pages

• From nothing to a global

• SGML is a language for describing markup

• SGML has been around since the middle 1980's and

* this discussion taken from the W3C web page at https://www.w3.org/TR/html5/

• HTML5 does NOT have the syntax rules

• HTML added support for multimedia

• HTML 5 specify DOCTYPE as follows −

• HTML5 simply uses the following

– section − This tag represents a generic document or

– article − This tag represents an independent piece of

– aside − This tag represents a piece of content that

– footer − This tag represents a footer for a section and

– nav − This tag represents a section of the document

– dialog − This tag can be used to mark up a conversation.

– figure − This tag can be used to associate a caption

Continued on next page

Using an image as an anchor works

Clicking on the image entitled “links”

Text placed between del

Text placed between the

Text placed between the

Nested lists are indented

Some sequence types available

You might also like