Scribd
Upload
46 views

HTML - Part I

Uploaded by

Nouf ra
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
46 views

HTML - Part I

Uploaded by

Nouf ra
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 153

INFS3412

Web Development 1
Introduction to HTML (Part 1)

© Information Systems Department


College of Economics & Political Science
Sultan Qaboos University
Prepared by: Mohamed Al Fairuz
Introduction
 HTML stands for HyperText Markup Language
 Not a programming language, it is a markup language
 A markup language is a set of markup tags
 Markup tags are used to describe web pages
 HTML pages are text documents
 Managed by World Wide Web Consortium (W3C)
HTML History
Year Version
1991 HTML
1993 HTML+
1995 HTML 2.0
1997 HTML 3.2
1999 HTML 4.01
2000 XHTML
2008 HTML 5 (First draft)
2011 HTML 5 (Final call)
2014 HTML 5 (Recommended)
Why HTML 5?
 HTML 4 hasn’t been updated for about 10 years
 XHTML was introduced but it made things stricter and
not easier
 Embedding audio/video was dependent on flash and
other third party plugins
 New websites have to be interactive
HTML 5: An Overview
 HTML 5 (referred to as Web Applications 1.0) is an
improvement of HTML 4.0 and XHTML 1.0
 Work started in 2003 by W3C and WHATWG
 Released a draft version in 2008
 A change from document markup language to a web
application language
 An attempt to enhance the functionality and flexibility of
the web
 New features like form control, multimedia, structure
semantics, local storage, etc…
How Pages Are Structured? d

HEADLINE

Digital versions
often have similar
Sub- structure
Heading
TEXT
IMAGE
Structure in Word Docs.

Headings and
The
Maininformation
heading andis
subheadings
expanded
importantand
information
may use
reflect hierarchy
subheadings
appear first
of information
HTML – general facts
 HTML uses tags (referred as elements), which act like
containers and tell you about the information that lies between
them.
 Tags usually come in pairs. Opening tags denote the start of a
piece of content; closing tags denote the end.
 Opening tags can carry attributes, which tell us more about the
content of that element. Each attribute require a name and a
value.
 Every HTML document contains a start <html> tag and an
end </html> tag
 Comments in HTML always begin with <!-- and end with -->.
The browser ignores all text inside a comment
A Closer Look at TAGs
CHARACTER CHARACTER

FORWARD SLASH

OPENING TAG CLOSING TAG


Syntax – body, p
 The body element:
◦ Contains the document’s content, which may include text
and tags
 All text placed between the <p> and </p> tags forms
one paragraph
 Attributes tell us more about elements

ATTRIBUTE
NAME

<p lang="en-us">Paragraph in English</p>

ATTRIBUTE
VALUE
<html>
<body>
<h1>This is the Main Heading</h1>

<p>This text might be an introduction to


the rest of the page.</p>

<h2>This is a Sub-Heading</h2>

<p>Many long articles have sub-headings


to help you follow the structure.</p>

<h2>Another Sub-Heading</h2>

<p>Here you can see another paragraph.</p>

</body>
</html>
Syntax – head, title
 Every HTML document contains a head element which
generally contains:
◦ A title
 head element
◦ generally is not rendered in the display window
 The title element:
◦ Names a web page
◦ Usually appears in the colored bar (called the title bar) at
the top of the browser window
◦ Is the text identifying a page when users add your page
to their list of Favorites or Bookmarks
Syntax - Example
 HTML Tag Syntax
<tag attribute1="value1" attribute2="value2">some text</tag>

 HTML Comment Syntax


<!-- a comment goes here -->

 HTML Document Creation


<html>
<head>
<title>Web Application Development 1</title>
</head>
<body>
<h1>This is the Body of the Page</h1>
<p>Anything within the body of a web page is displayed in the main browser
window.</p>
</body>
</html>
Syntax - Example
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" HTML comments, not
3
4
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
interpreted by the browser
5 <!-- Fig. 4.1: main.html -->
6 <!-- First XHTML example. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head> Creates a head element
9 <title>Welcome</title>
10 </head> Creates a title element, which
11
12 <body>
contains the text Welcome
13 <p>Welcome to XHTML!</p>
14 </body> Creates a p element within the
15 </html>
body, which displays welcome text
W3C HTML Validation Service
 HTML documents that are syntactically correct are
guaranteed to render properly
◦ <p>this is my first paragraph</p>
 HTML documents that contain syntax errors may not
display properly
◦ <p>this is my first paragraph</h1>
 Validation services (e.g., validator.w3.org) ensure that an
HTML document is syntactically correct
GENERAL ELEMENTS
Introduction to HTML
Headings – h1,h2,h3,h4,h5,h6
 HTML provides six headings (h1 through h6) for
specifying the relative importance of information
◦ Heading element h1 is considered the most significant
heading and is rendered in the largest font
◦ Each successive heading element (i.e., h2, h3, etc.) is
rendered in a progressively smaller font
Syntax – h1, h2, h3, h4, h5, h6
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.2: heading.html -->
6 <!-- Heading elements h1 through h6. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Headings</title>
10 </head> Creates six headings, each with
11
12 <body> decreasing significance
13 <h1>Level 1 Heading</h1>
14 <h2>Level 2 heading</h2>
15 <h3>Level 3 heading</h3>
16 <h4>Level 4 heading</h4>
17 <h5>Level 5 heading</h5>
18 <h6>Level 6 heading</h6>
19 </body>
20 </html>
Paragraphs – p
<p>A paragraph consists of one or more sentences that form a
self-contained unit of discourse. The start of a paragraph is
indicated by a new line.</p>

<p>Text is easier to understand when it is split up into units of


text. For example, a book may have chapters. Chapters can have
subheadings. Under each heading will be one or more
paragraphs.</p>
Paragraphs – p
Bold – b & Italic – i
<p>This is how we make a word appear <b>bold.</b>
</p>

<p>This is how we make a word appear <i>italic.</i>


</p>
Superscript – sup &
Subscript – sub
<p>On the 4<sup>th</sup> September you will learn about
E=MC<sup>2</sup>.</p>

<p>The amount of C0<sub>2</sub> in the atmosphere grew by


2ppm in
2009<sub>1</sub>.</p>
Whitespace is collapsed
<p>The moon is

drifting away from the

earth.</p>
Line Breaks – br
<p>The Earth<br />gets one hundred tons heavier
every day<br />due to falling space dust.</p>
LINKING
Introduction to HTML
Syntax – Linking
 A hyperlink references or links to other resources, such as HTML
documents and images
 Web browsers typically underline text hyperlinks and color them blue
by default
 Users can insert links with the a (anchor) element.
◦ The href attribute specifies the resource (e.g., page, file, e-mail
address) being linked
◦ Anchors can link to an e-mail address using a
mailto:emailaddress
 When a user clicks this type of anchored link, most browsers launch the
default e-mail program (e.g., Outlook Express) to initiate an e-mail
message addressed to the linked address
Syntax – Linking

The page the


LINK takes you to

<a href="http://squ.edu.om">SQU</a>

The TEXT the


user clicks on
Linking to Other Sites

• <a href="http://omanair.com">OmanAir</a>
• <a href="http://alwatan.com">Al-Watan</a>
• <a href="http://facebook.com">Facebook</a>
• <a href="http://eoman.com">eOman</a>

• OmanAir
• Al-Watan
• Facebook
• eOman
Linking to Other Pages on the
Same Site

• <a href="index.html">Home</a>
• <a href="about.html">About Us</a>
• <a href="products.html">Products</a>
• <a href="contact.html">Contact Us</a>

• Home
• About Us
• Products
• Contact Us
DIRECTORY examplearts
STRUCTURE index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
DIRECTORY examplearts
STRUCTURE index.html
movies
cinema
index.html
listings.html
ROOT FOLDER reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
DIRECTORY examplearts
STRUCTURE index.html
movies
cinema
index.html
listings.html
CHILD reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
DIRECTORY examplearts
STRUCTURE index.html
movies
cinema
index.html
listings.html
CHILD reviews.html
PARENT dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
DIRECTORY examplearts
STRUCTURE index.html
movies
cinema
index.html
listings.html
CHILD reviews.html
PARENT dvd
index.html
GRANDCHILD
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
DIRECTORY examplearts
STRUCTURE index.html
movies
cinema
index.html
listings.html
CHILD reviews.html
PARENT dvd
index.html
GRANDCHILD
listings.html
GRANDPARENT reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
index.html
listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
SAME index.html
reviews.html listings.html
reviews.html
dvd
index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
SAME index.html
reviews.html listings.html
reviews.html
CHILD dvd
music/index.html index.html
listings.html
reviews.html
music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
SAME index.html
reviews.html listings.html
reviews.html
CHILD dvd
music/index.html index.html
listings.html
PARENT reviews.html
../index.html music
index.html
listings.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
SAME index.html
reviews.html listings.html
reviews.html
CHILD dvd
music/index.html index.html
listings.html
PARENT reviews.html
../index.html music
index.html
GRANDCHILD listings.html
movies/dvd/index.html
reviews.html
theater
index.html
listings.html
reviews.html
RELATIVE examplearts
URLS index.html
movies
cinema
SAME index.html
reviews.html listings.html
reviews.html
CHILD dvd
music/index.html index.html
listings.html
PARENT reviews.html
../index.html music
index.html
GRANDCHILD listings.html
movies/dvd/index.html
reviews.html
GRANDPARENT theater
../../index.html index.html
listings.html
reviews.html
Syntax – Email Links

<p>My email address is


<a href="mailto:[email protected]">
[email protected]
</a>
Click the address and your default email
client will open an email message and address
it to me.<p>
Syntax – Linking
Opening Links in a New Window

opens in a
new window

<a href="http://squ.edu.om" target="_blank">


Sultan Qaboos University
</a>
Internal Linking
 The a tag can be used to link to another section of the
same document by specifying the element’s id as the
link’s href.
 To link internally to an element with its id attribute set,
use the syntax #id.
Syntax – Internal Linking
1
2
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.14: internal.html -->
6 <!-- Internal hyperlinks to make pages more navigable. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Internal Links</title>
Sets the id attribute for the
10 </head> h1 element
11
12 <body>
13 <!-- id attribute creates an internal hyperlink destination -->
14 <h1 id = "features">The Best Features of the Internet</h1>
15
16 <!-- an internal link's address is "#id" -->
17 <p><a href = "#bugs">Go to <em>Favorite Bugs</em></a></p>
18
19 <ul>
20 <li>You can meet people from countries Creates a link to the element in
21 around the world.</li> this document with id = bugs
22 <li>You have access to new media as it becomes public:
23 <ul>
24 <li>New games</li>
25 <li>New applications
26 <ul>
27 <li>For Business</li>
28 <li>For Pleasure</li>
29 </ul>
30 </li>
31
32 <li>Around the clock news</li>
33 <li>Search Engines</li>
34 <li>Shopping</li>
35 <li>Programming
36 <ul>
37 <li>XHTML</li>
38 <li>Java</li>
39 <li>Dynamic HTML</li>
40 <li>Scripts</li>
41 <li>New languages</li>
42 </ul>
43 </li>
44 </ul>
45 </li>
46
47
Sets the id attribute for
<li>Links</li>
48 <li>Keeping in touch with old friends</li>
49 <li>It is the technology of the future!</li>
this h1 element
50 </ul>
51
52 <!-- id attribute creates an internal hyperlink destination -->
53 <h1 id = "bugs">My 3 Favorite Bugs</h1>
54 <p>
55 <!-- internal hyperlink to features -->
56 <a href = "#features">Go to <em>Favorite Features</em></a>
57 </p>
58 <ol>
59 <li>Fire Fly</li>
60
61
<li>Gal Ant</li>
<li>Roman Tic</li>
Creates a link to the element in
62 </ol> this document with id =
63 </body>
64 </html>
features
LINKING – Summary
 Links are created using the <a> element.
 The <a> element uses the href attribute to indicate the
page you are linking to.
 If you are linking to a page within your own site, it is best
to use relative links rather than qualified URLs.
 You can create links to open email programs with an
email address in the "to" field.
 You can use the id attribute to target elements within a
page that can be linked to.
IMAGES
Introduction to HTML
Choosing Images for your site
 Images can set the tone for a site in less time than it
takes to read a description.
 Images are subject to copyright but there are stock
photography sites where you can buy them.
 If a page shows several photos of products or members
of a team, keep them consistent
◦ Width
◦ Height
 HINT: store images in a separate folder under your root
directory.
Syntax – Images
 The img element’s src attribute specifies an image’s
location
 Every img element must have an alt attribute, which
contains text that is displayed if the client cannot render
the image
◦ The alt attribute makes web pages more accessible to
users with disabilities, especially vision impairments
◦ Width and height are optional attributes
 If omitted, the browser uses the image’s actual width and
height
 Images are measured in pixels
Syntax – Images
 Some HTML elements are empty elements that contain
only attributes and do not mark up text (also called void
elements)
 Void elements (e.g., img) should be terminated by using
the forward slash character (/) inside the closing right
angle bracket.
 Create an image hyperlink by nesting an img element in
an anchor element
Syntax – Images
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.5: picture.html -->
6 <!-- Images in XHTML files. --> Specifies the image file’s location
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Images</title>
10 </head> Specifies the image’s width
11
12 <body> Specifies the image’s height
13 <p>
14 <img src = "cpphtp6.jpg" width = "92" height = "120"
15 alt = "C++ How to Program book cover" /> Specifies text to display if
16 <img src = "jhtp.jpg" width = "92" height = "120"
17 alt = "Java How to Program book cover" /> the image is unavailable
18 </p>
19 </body>
20 </html>
Syntax – Images
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.6: nav.html -->
6 <!-- Images as link anchors. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Navigation Bar</title>
10 </head> Creates a hyperlinked image
11
12 <body>
13 <p>
14 <a href = "links.html">
15 <img src = "buttons/links.jpg" width = "65"
16 height = "50" alt = "Links Page" />
17 </a>
18
19 <a href = "list.html">
20 <img src = "buttons/list.jpg" width = "65"
21 height = "50" alt = "List Example Page" />
22 </a>
23
24 <a href = "contact.html">
25 <img src = "buttons/contact.jpg" width = "65"
26 height = "50" alt = "Contact Page" />
27 </a>
28
Where to place images in your
code?

<img src="images/bird.gif" alt="bird"


width="100" height="100" />
<p>There are around 10,000 living species of birds
that inhabit different ecosystems from the Arctic to
the Antarctic. Man species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.</p>
Where to place images in your
code?
Where to place images in your
code?

<p><img src="images/bird.gif" alt="bird"


width="100" height="100" />There are
around 10,000 living species of birds that inhabit
different ecosystems from the Arctic to the
Antarctic. Man species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.</p>
Where to place images in your
code?
Where to place images in your
code?

<p>There are around 10,000 living species of birds


that inhabit different
<img src="images/bird.gif" alt="bird"
width="100" height="100" />
ecosystems from the Arctic to the Antarctic. Man
species undertake long distance annual migrations,
and many more perform shorter irregular
journeys.</p>
Where to place images in your
code?
Where to place images in your
code?

<p><img src="images/bird.gif" alt="bird"


width="100" height="100" align="left" />
There are around 10,000 living species of birds that
inhabit different ecosystems from the Arctic to the
Antarctic. Man species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.</p>
Where to place images in your
code?
Where to place images in your
code?

<p><img src="images/bird.gif" alt="bird"


width="100" height="100" align="right" />
There are around 10,000 living species of birds that
inhabit different ecosystems from the Arctic to the
Antarctic. Man species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.</p>
Where to place images in your
code?
Where to place images in your
code?

<p><img src="images/bird.gif" alt="bird"


width="100" height="100"
valign="top" />
There are around 10,000 living species of birds that
inhabit different ecosystems from the Arctic to the
Antarctic. Man species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.</p>
Where to place images in your
code?
Where to place images in your
code?

<p><img src="images/bird.gif" alt="bird"


width="100" height="100"
valign="middle" />
There are around 10,000 living species of birds that
inhabit different ecosystems from the Arctic to the
Antarctic. Man species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.</p>
Where to place images in your
code?
Where to place images in your
code?

<p><img src="images/bird.gif" alt="bird"


width="100" height="100"
valign="bottom" />
There are around 10,000 living species of birds that
inhabit different ecosystems from the Arctic to the
Antarctic. Man species undertake long distance
annual migrations, and many more perform shorter
irregular journeys.</p>
Where to place images in your
code?
Image Dimensions

Create each image the same


width and height as you would
like it to appear on your website.
Image Dimensions

Create each image the same


width and height as you would
like it to appear on your website.
Image Dimensions

If an image
has the
wrong
dimensions, it
can look
squished.
Image Dimensions

If an image is too small, it can


look blurry when shown bigger.
Image Dimensions
ANIMATED GIF
ANIMATED GIF
TRANSPARENT GIF

STRAIGHT
TRANSPARENT PNG

DIAGONAL
TRANSPARENT PNG

ROUND
TRANSPARENT PNG

SEMI-OPAQUE
TRANSPARENT PNG

DROP-SHADOW
HTML5: Figure & Caption
<figure>
<img src="images/otters.gif"
alt="Photograph of two sea otters
floating in the water" />
<br />
<figcaption>Sea otters hold hands when
they sleep so that they don’t
drift away from each other.
</figcaption>
</figure>
HTML5: Figure & Caption
IMAGES – Summary
 The <img> element is used to add images to a web
page.
 You must always specify a src attribute to indicate the
source of an image and an alt attribute to describe the
content of an image.
 You should save images at the size you will be using
them on the web page and in the appropriate format.
 Photographs are best saved as JPEGs; illustrations or
logos that use flat colors are better saved as GIFs.
LISTS
Introduction to HTML
THREE LIST TYPES

UNORDERED ORDERED DEFINITION

• 1kg King Edward potatoes 1. Chop potatoes into quarters Sashimi


• 100ml milk 2. Simmer in salted water Sliced raw fish
• 50g salted butter 3. Heat milk and butter Scale
• Freshly grated nutmeg 4. Drain potatoes and mash A device used to
• Salt and pepper to taste 5. Mix in the milk mixture accurately measure weight
Syntax – Unordered Lists
 Unordered list element ul
◦ creates a list in which each item in the list begins with a
bullet symbol (called a disc)
◦ Each entry is an li (list item) element. Most web
browsers render these elements with a line break and a
bullet symbol at the beginning of the line
Syntax – Unordered Lists
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.8: links2.html -->
6 <!-- Unordered list containing hyperlinks. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Links</title>
10 </head>
11 Creates an unordered list
12 <body>
13 <h1>Here are my favorite sites</h1>
14 <p><strong>Click on a name to go to that page.</strong></p>
15
16 <!-- create an unordered list --> Makes hyperlinked
17 <ul>
18 <!-- add four list items --> elements into individual
19 <li><a href = "http://www.deitel.com">Deitel</a></li> list items
20 <li><a href = "http://www.w3.org">W3C</a></li>
21 <li><a href = "http://www.yahoo.com">Yahoo!</a></li>
22 <li><a href = "http://www.cnn.com">CNN</a></li>
23 </ul>
24 </body>
25 </html>
Syntax – Unordered Lists
Syntax – Ordered Lists
 The ordered list element ol creates a list in which each
item begins with a number
 Lists may be nested to represent hierarchical data
relationships
Syntax – Ordered Lists
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.9: list.html -->
6 <!-- Nested and ordered lists. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Lists</title>
10 </head>
11
12 <body>
13 <h1>The Best Features of the Internet</h1>
14
15 <!-- create an unordered list -->
16 <ul>
17 <li>You can meet new people from countries around
18 the world.</li>
19 <li>
20 You have access to new media as it becomes public:
21
22 <!-- this starts a nested list, which uses a -->
23 <!-- modified bullet. The list ends when you -->
24 <!-- close the <ul> tag. -->
25 <ul> A single list element
26 <li>New games</li>
27 <li>New applications
28
Syntax – Ordered Lists
29 <!-- nested ordered list -->
30 <ol> Creates an ordered list within
31 <li>For business</li> a list element
32 <li>For pleasure</li>
33 </ol>
34 </li> <!-- ends line 27 new applications li --> Ends nested list
35
36 <li>Around the clock news</li>
37 <li>Search engines</li>
Ends the list element
38 <li>Shopping</li>
39 <li>Programming Another single unordered
40
41 <!-- another nested ordered list -->
list element
42 <ol>
43 <li>XML</li> Creates an ordered list within
44 <li>Java</li> this list element
45 <li>XHTML</li>
46 <li>Scripts</li>
47 <li>New languages</li>
48 </ol>
49 </li> <!-- ends programming li of line 39 -->
50 </ul> <!-- ends the nested list of line 25 -->
51 </li>
52
53 <li>Links</li>
54 <li>Keeping in touch with old friends</li>
55 <li>It is the technology of the future!</li>
56 </ul> <!-- ends the unordered list of line 16 -->
57 </body>
58 </html>
Syntax – Ordered Lists
Syntax – Definition Lists
 Definition lists are useful to explain the meaning of terms
◦ <dl>: definition list
◦ <dt>: definition term
◦ <dd>: definition description
Syntax – Definition Lists
<dl>
<dt>Sashimi</dt>
<dd>Sliced raw fish served with condiments.</dd>
<dt>Scale</dt>
<dd>Device used to measure the weight of
ingredients.</dd>
<dd>A technique by which the scales are
removed from the skin of fish.</dd>
</dl>
Syntax – Definition Lists
Syntax – Nested Lists
<ul>
<li>Mousses</li>
<li>Pastries</li>
<ul>
<li>Croissant</li>
<li>Milles-feille</li>
<li>Palmier</li>
<li>Profiteroles</li>
</ul>
<li>Tarts</li>
</ul>
Syntax – Nested Lists
LISTS– Summary
 There are three types of HTML lists: ordered, unordered,
and definition.
◦ Ordered lists use numbers.
◦ Unordered lists use bullets.
◦ Definition lists are used to define terminology.
 Lists can be nested inside one another.
TABLES
Introduction to HTML
Syntax – table
 table element
◦ defines a HTML table
◦ Attribute summary summarizes the table’s contents and
is used by speech devices to make the table more
accessible to users with visual impairments
◦ Element caption describes the table’s content
 The text inside the <caption> tag is rendered above the
table in most browsers
Syntax – table
 A table can be split into three distinct sections:
◦ Head (thead element)
 Table titles
 Column headers
◦ Body (tbody element)
 Primary table data
◦ Foot (tfoot element)
 Calculation results
 Footnotes
 Above body section in the code, but displays at the bottom in
the page
Syntax – table
 Element tr
◦ Defines individual table rows
 Element th
◦ Defines a header cell
 Element td
◦ Contains table data elements
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.10: table1.html -->
6 <!-- Creating a basic table. --> Begins a new XHTML
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
table
9 <title>A simple XHTML table</title>
10 </head> Sets the table’s border to
11 be one pixel wide
12 <body>
13
14 <!-- the <table> tag opens a table -->
Sets the table’s width to
15 <table border = "1" width = "40%"
16 summary = "This table provides information about 40% of the screen
17 the price of fruit">
18
19 <!-- the <caption> tag summarizes the table's --> Describes the table’s
20 <!-- contents (this helps the visually impaired) --> contents in the
21 <caption><strong>Price of Fruit</strong></caption>
22 summary attribute
23 <!-- the <thead> section appears first in the table -->
24 <!-- it formats the table header area --> Sets the text above the
25 <thead> table
26 <tr> <!-- <tr> inserts a table row -->
27 <th>Fruit</th> <!-- insert a heading cell -->
28 <th>Price</th> Creates a head element
29 </tr>
30 </thead>
31
Creates a table heading cell in
the new table row
Makes a new table row Creates the next cell in the row
Syntax – table
32 <!-- the <tfoot> section appears last in the table -->
33 <!-- it formats the table footer -->
34
Creates a foot section
<tfoot>
35 <tr>
36 <th>Total</th>
37 <th>$3.75</th>
38 </tr> Creates table header cells
39
40
</tfoot>
at the bottom of the table
41 <!-- all table content is enclosed -->
42 <!-- within the <tbody> -->
43 <tbody>
44 <tr> Creates a body section
45 <td>Apple</td> <!-- insert a data cell -->
46 <td>$0.25</td>
47 </tr> Inserts a cell in the body
48
49
<tr>
<td>Orange</td>
of the table
50 <td>$0.50</td>
51 </tr>
52 <tr>
53 <td>Banana</td>
54 <td>$1.00</td>
55 </tr>
56 <tr>
57 <td>Pineapple</td>
58 <td>$2.00</td>
59 </tr>
60 </tbody>
61
62
</table>
Ends the table
63 </body>
64 </html>
Syntax – table
Syntax – table
 You can merge data cells with the rowspan and
colspan attributes
◦ The values of these attributes specify the number of rows
or columns occupied by the cell
◦ Can be placed inside any data cell or table header cell
Syntax – table
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.11: table2.html -->
6 <!-- Complex XHTML table. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Tables</title>
10 </head>
11
12 <body>
13 <h1>Table Example Page</h1>
14
15 <table border = "1">
16 <caption>Here is a more complex sample table.</caption>
17
18 <thead>
19 <!-- rowspans and colspans merge the specified -->
20 <!-- number of cells vertically or horizontally -->
21 <tr>
22
23
<!-- merge two rows -->
<th rowspan = "2">
Makes the header cell
24 <img src = "camel.gif" width = "205" span 2 rows
25 height = "167" alt = "Picture of a camel" />
26 </th>
27
Syntax – table
28 <!-- merge four columns -->
29 <th colspan = "4"> Makes the header cell span 4 columns
30 <h1>Camelid comparison</h1>
31 <p>Approximate as of 6/2007</p>
32 </th>
33 </tr>
34 <tr>
35 <th># of Humps</th>
36 <th>Indigenous region</th>
37 <th>Spits?</th>
38 <th>Produces Wool?</th>
39 </tr>
40 </thead>
41 <tbody>
42 <tr>
43 <th>Camels (bactrian)</th>
44 <td>2</td>
45 <td>Africa/Asia</td>
46 <td>Yes</td>
47 <td>Yes</td>
48 </tr>
49 <tr>
50 <th>Llamas</th>
51 <td>1</td>
52 <td>Andes Mountains</td>
53 <td>Yes</td>
54 <td>Yes</td>
55 </tr>
56 </tbody>
57 </table>
58 </body>
59 </html>
TABLES– Summary
 The <table> element is used to add tables to a web
page.
 A table is drawn out row by row. Each row is created
with the <tr> element.
 Inside each row are cells represented by the <td>
element (or <th> if it is a header).
 You can make cells of a table span more than one row or
column using the rowspan and colspan attributes.
 For long tables you can split the table into a <thead>,
<tbody>, and <tfoot>.
FORMS
Introduction to HTML
WHY FORMS?
Why forms?
 HTML provides forms for collecting information from
users
 Forms contain visual components, such as buttons, that
users interact with
 Forms may also contain nonvisual components, called
hidden inputs, which are used to store any data that
needs to be sent to the server, but is not entered by the
user
Form Controls
How FORMS work

1: User fills in form and presses button to submit info to server


How FORMS work

2: Name of each form control sent with value user entered


How FORMS work

3: Server processes information using programming language


How FORMS work

4: Server creates new page to send back to the browser based


on info received
NAME & VALUE Pairs

NAME

Username = Ivy
VALUE
Syntax – form
 A form begins with the form element
◦ Attribute method specifies how the form’s data is sent to
the web server
◦ The action attribute of the form element specifies the
script (page) to which the form data will be sent
Syntax – form
<form action="join.php" method="get">

<!-- This is where the form controls


will appear. -->

</form>

 action: shows the page the form is sent to


 method: describes how data are to be sent
◦ Example: get or post
Syntax – form: text
<form action="join.php" method="get">

<label for="username">Username:</label>
<input type="text" name="username"
id="username" />
</form>

 for: indicates which input id this label is connected to


 type: indicates which type of control you want
◦ Example: text, password, email, month, hidden, etc…
 name: tells the server which form element this is
Syntax – form
Syntax – form: password
<form action="join.php" method="get">

<label for="username">Username:</label>
<input type="text" name="username"
id="username" />

<label for="password">Password:</label>
<input type="password" name="password"
id="password" />
</form>

 Password type does not mean what is entered is secure, it just


stops people from being able to read the characters off screen
Syntax – form: password
Syntax – form: textarea
<form action="join.php" method="get">

<label for="comments">What did you think of this


gig?</label>
<textarea name="comments" cols="20"
rows="4" id="comments" />
Enter your comments… </textarea>
</form>

 cols: sets the width of the textarea (in average character width)
 rows: sets the number of rows the textarea spans
Syntax – form: textarea
Syntax – form: radio button
<p>Please select your favorite color:<br />
<input type="radio" name="color"
value="red" id="red" checked="checked" />
<label for="red">Red</label>

<input type="radio" name="color"


value="blue" id="blue" />
<label for="blue">Blue</label>

<input type="radio" name="color"


value="white" id="white" />
<label for="white">White</label>
</p>

 checked: default selection when page is loaded


Syntax – form: radio button
Syntax – form: checkbox
<p>Please select your favorite color(s):<br />
<input type="checkbox" name="color"
value="red" id="red" checked="checked" />
<label for="red">Red</label>

<input type="checkbox" name="color"


value="blue" id="blue" />
<label for="blue">Blue</label>

<input type="checkbox" name="color"


value="white" id="white" />
<label for="white">White</label>
</p>
Syntax – form: checkbox
Syntax – form: dropdown box
<select name="devices">
<option value=”iPod"
selected=”selected">iPod</option>
<option value=”radio">Radio</option>
<option value=”PC">PC</option>
</select>

 Drop down list (or "select") boxes allows the user to pick one
from several options. They are useful when there are long
lists (e.g. a country selector) and not enough space to show
each option.
 Adding the attribute size="number" attribute to the select
element will change the element to a multiple select box
Syntax – form: dropdown box
Syntax – form: file input box
<form action="upload.php" method="post"
enctype="multipart/form-data">
Upload photo:
<input type="file" name="photo" /><br />
<input type="submit" value="Upload" />
</form>

 enctype: specifies how the form-data should be encoded


when submitting it to the server. The enctype attribute is
only used with POST method
 multipart/form-data: This value is required for enctype
when the form is used to upload a file
Syntax – form: file input box
Syntax – form: hidden controls
<form action=”add.php" method=”post">
<button>
<img src=”images/add.gif" alt=”add”
width=”10” height=”20" />
</button>
<input type=”hidden" name=”bookmark”
value=“Oman” />
</form>

 Hidden controls are not displayed in the form, but users


can see the content by viewing the source of the page
Syntax – form: hidden controls
Syntax – form: Grouping
<fieldset>
<legend>Contact details</legend>
<label>Email:
<input type=“text” name=“email”></label>
<br /><label>Mobile:<br />
<input type=“text” name=“mobile”></label>
<br /><label>Telephone:<br />
<input type=“text” name=“tel”></label>
</fieldset>

 Fieldsets are helpful on long forms to group controls


Syntax – form: Grouping
Syntax – form: submit
<form action="email.php" method="get">

<label for="email">Subscribe to our email


list:</label><br />
<input type="text" name="email" id="email" />
<input type="submit" value="Subscribe" />
<input type=”reset" value=”Clear" />
</form>

 The submit input submits the data entered in the form to


the web server for processing
 The reset input allows a user to reset all form elements to
their default values
Syntax – form: submit
Syntax – form: EXAMPLE
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.13: form2.html -->
6 <!-- Form using a variety of components. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>More Forms</title>
10 </head>
11
12 <body>
13 <h1>Feedback Form</h1>
14 <p>Please fill out this form to help
15 us improve our site.</p>
16
17 <form method = "post" action = "">
18 <p>
19 <input type = "hidden" name = "recipient"
20 value = "[email protected]" />
21 <input type = "hidden" name = "subject"
22 value = "Feedback Form" />
23 <input type = "hidden" name = "redirect"
24 value = "main.html" />
25 </p>
26
27 <p><label>Name:
28 <input name = "name" type = "text" size = "25" />
29 </label></p>
30
31 <!-- <textarea> creates a multiline textbox -->
32 <p><label>Comments:<br />
33 <textarea name = "comments"
34 rows = "4" cols = "36">Enter comments here.</textarea>
35 </label></p>
36
37 Inserts a text area with 4 rows and 36 columns,
<!-- <input type = "password"> inserts a -->
38 <!-- textbox whose display is masked whose
with --> initial text is "Enter comments here."
39 <!-- asterisk characters -->
40 <p><label>E-mail Address:
41 <input name = "email" type = "password" size = "25" />
42 </label></p>
43 Inserts an input field that displays
44 <p>
entered text as asterisks (or another
45 <strong>Things you liked:</strong><br />
46 character)
47 <label>Site design
48 <input name = "thingsliked" type = "checkbox"
49
50
value = "Design" /></label>
<label>Links
Inserts several checkboxes
51 <input name = "thingsliked" type = "checkbox" with different labels
52 value = "Links" /></label>
53 <label>Ease of use
54 <input name = "thingsliked" type = "checkbox"
55 value = "Ease" /></label>
56 <label>Images
57 <input name = "thingsliked" type = "checkbox"
58 value = "Images" /></label>
59 <label>Source code
60 <input name = "thingsliked" type = "checkbox"
61 value = "Code" /></label>
62 </p>
Syntax – form: EXAMPLE
63
64 <!-- <input type = "radio" /> creates a radio -->
65 Initially sets this radio
<!-- button. The difference between radio buttons -->
66 <!-- and checkboxes is that only one radio button -->
67 <!-- in a group can be selected. --> button as selected
68 <p>
69 <strong>How did you get to our site?:</strong><br />
70
71 <label>Search engine
72 <input name = "howtosite" type = "radio"
73 value = "search engine" checked = "checked" /></label>
74 <label>Links from another site
75 <input name = "howtosite" type = "radio"
76 value = "link" /></label>
77 <label>Deitel.com Website
78 <input name = "howtosite" type = "radio" Inserts a group of radio
79 value = "deitel.com" /></label> buttons, only one of which
80 <label>Reference in a book
81 <input name = "howtosite" type = "radio" can be selected
82 value = "book" /></label>
83 <label>Other
84 <input name = "howtosite" type = "radio"
85 value = "other" /></label>
86 </p>
87
88 <p>
89 <label>Rate our site:
90
Syntax – form: EXAMPLE
91 <!-- the <select> tag presents a drop-down -->
92 <!-- list with choices indicated by the -->
93 <!-- <option> tags -->
Create a drop-down list named
94 <select name = "rating"> "rating"
95 <option selected = "selected">Amazing</option>
96 <option>10</option>
97 <option>9</option>
98
99
<option>8</option>
<option>7</option>
Sets "Amazing" as the initially
100 <option>6</option> selected option
101 <option>5</option>
102 <option>4</option>
103 <option>3</option>
104 <option>2</option>
105 <option>1</option>
106 <option>Awful</option>
107 </select>
108 </label>
109 </p>
110
111 <p>
112 <input type = "submit" value = "Submit" />
113 <input type = "reset" value = "Clear" />
114 </p>
115 </form>
116 </body>
117 </html>
Syntax – form: EXAMPLE
FORMS – Summary
 Whenever you want to collect information from visitors,
you will need a form, which lives inside a <form>
element.
 Information from a form is sent in name/value pairs.
 Each form control is given a name, and the text the user
types in or the values of the options they select are sent
to the server.
 HTML5 introduces new form elements which make it
easier for visitors to fill in forms.
Syntax – meta
 One way that search engines catalog pages is by
reading the meta element’s contents.
◦ The name attribute identifies the type of meta element
◦ The content attribute
 Of a keywords meta element: provides search engines with
a list of words that describe a page, which are compared
with words in search requests
 Of a description meta element: provides a three- to four-line
description of a site in sentence form, used by search
engines to catalog your site. This text is sometimes
displayed as part of the search result
1 <?xml version = "1.0" encoding = "utf-8"?>
2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 4.15: meta.html -->
6 <!-- meta elements provide keywords and a description of a page. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>Welcome</title>
10
11
12
<!-- <meta> tags provide search engines with -->
<!-- information used to catalog a site -->
Provides keywords
13 <meta name = "keywords" content = "web page, design, describing the page for a
search engine
14 XHTML, tutorial, personal, help, index, form,
15 contact, feedback, list, links, deitel" />
16 <meta name = "description" content = "This website will
17 help you learn the basics of XHTML and web page design
18
19
through the use of interactive examples and
instruction." />
Provides the site’s description
20 </head> in sentence form for a search
engine
21 <body>
22 <h1>Welcome to Our Website!</h1>
23
24 <p>We have designed this site to teach about the wonders
25 of <strong><em>XHTML</em></strong>. <em>XHTML</em> is
26 better equipped than <em>HTML</em> to represent complex
27 data on the Internet. <em>XHTML</em> takes advantage of
28 XML’s strict syntax to ensure well-formedness. Soon you
29 will know about many of the great features of
30 <em>XHTML.</em></p>
31
32 <p>Have Fun With the Site!</p>
33 </body>
34 </html>
Syntax – meta
References
 PowerPoint file, Chapter 4 (Internet & WWW: How to program – 4 th Edition)
 PowerPoint files, Jon Duckett (HTML & CSS: design and build websites,
Wiley)

Readings…
 Chapter 2 (Internet & WWW: How to program
– 5th Edition)

You might also like