File

advertisement
1
Introduction to HTML: Part 1
Outline
Introduction
Elements and Attributes
Editing HTML
Common Elements
Headers
Images
Unordered Lists
Nested and Ordered Lists
Linking
Special Characters and More Line Breaks
More Examples
- Introduction to HTML: Part 1
- HTML stands for Hyper Text Markup Language.
- An HTML file is a text file containing .
-The
markup tags tell the Web browser how to display the page.
-An HTML file must have an htm or html file extension.
-An HTML file can be created using a simple text editor.
2
<html >
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<p>Welcome to XHTML!</p>
</body>
</html>
Main.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
Program Output
3
HTML Text Formatting
Tag
Description
<b>
Defines bold text
<big>
Defines big text
<em>
Defines emphasized text
<i>
Defines italic text
<small>
Defines small text
<strong>
Defines strong text
<sub>
Defines subscript text
<sup>
Defines superscript text
<del>
Defines deleted text
<bdo>
defines the text direction
<u>
Defines underlined text
<hr>
Defines horizontal rule
<h1>…<h6>
Defines header text
4
Text Formatting Example
<Html><Head>
<Title> my first example </title>
</head>
<Body>
<b> this is bold text </b>
<Big> this is big text </big>
<Em> this is emphasized text </em>
<i> this is italic text </i>
<Small > this is small text </small>
<Del> this is deleted text </del>
<u> this is underlined text </u>
This is <sub>subscript text</sub>
This is <sup>superscript text</sup>
<bdo dir="rtl"> this is right to left text </bdo>
<bdo dir="ltr"> this is left to right text </bdo>
5 </body></html>
<html>
<head>
<title>Internet and WWW How to Program - Headers</title>
</head>
<body>
<h1>Level 1 Header</h1>
<h2>Level 2 header</h2>
The font size of the text
<h3>Level 3 header</h3>
between tags decreases as
<h4>Level 4 header</h4>
<h5>Level 5 header</h5>
the header level increases.
<h6>Level 6 header</h6>
</body>
</html>
Program Output
6
Header.html
<font> tag
<Font>: defines font
Attribute  size
12 font size flag available
+6

+1
-1

-6
Example:
<font size="+6"> text </font>
<font size="1"> text </font>
centering and aligning:
centering:
<center> text </center>
Aligning:
Attribute  align  left, right, center
<p align="left"> this is the left side </p>
<p align="right"> this is the right side </p>
7
<p align="center"> this is the center side </p>
Placing image on web page:
Tag
<img>
Attribute
Src
Description
Defines image
Description
defines the image file location.
Width
specify the image width.
Height
specify the image height.
Alt
Border
align
is an attribute give a description of the image, the
description is displayed if the image cannot be
displayed
defines the image border width
defines the placement side of the image (the
default is left).
8
Aligning text with images
Aligning text with images:
<img align="top" src="img.gif"> text </>
<img align="middle" src="img.gif"> text </>
<img align="button" src="img.gif"> text </>
The value of the src attribute of
the image element is the
location of the image file.
<html>
<head>
<title>Internet and WWW How to Program - Welcome</title>
</head>
<body>
<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.
9
The height and width
attributes of the image
element give the height and
width of the image.
Program Output
The second image could not be
displayed properly, so the value of
its alt attribute is displayed instead.
10
<marquee> Tag
<Marquee>
Attribute  behavior  alternate
 Scroll
 Slide
Direction right, left, down, up.
ScrollAmount =1,2,3,….
ScrollDelay= 30,40,….
Bgcolor: defines on underground color
<body bgcolor="red">
<marquee bgcolor="green">
11
Ordered and Unordered List
• Ordered list: create a list in which item begin with a number
or letter.
• Unordered list: does not order it's items by letters or
unletters.
Tag
Description
<ol>
Defines ordered list
<ul>
Defines unordered list
<li>
Defines list items
Attribute
Description
type
Type of ordering or unordering (circle, square, disk)
12
List.html
<html> <head>
<title>Internet and WWW How to Program - Lists</title>
</head>
<body>
<h1>The Best Features of the Internet</h1>
By inserting a list as an entry in
<ul>
another list, lists can be nested.
<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>
Entries for an ordered list must be placed
<li>New applications
<ol type = "I">
between the <ol> and </ol> tags.
<li>For business</li>
<li>For pleasure</li></ol>
</li>
<li>Around the clock news</li>
<li>Search engines</li>
<li>Shopping</li>
<li>Programming
<ol type = "a">
The type attribute of the ordered list
<li>XML</li>
<li>Java</li>
element allows you to select a sequence
<li>XHTML</li>
type to order the list.
<li>Scripts</li>
<li>New languages</li></ol></li></ul></li>
Text placed between the em tags
<li>Links</li>
will be italicized.
<li>Keeping in touch with old friends</li>
<li>It is the technology of the future!</li></ul>
<h1>My 3 Favorite <em>CEOs</em></h1>
<ol>
<li>Harvey Deitel</li>
<li>Bill Gates</li>
<li>Michael Dell</li </ol>
13
</body>
</html>
List.html
Program Output
Nested lists are indented
underneath the main list.
Some sequence types available
to order lists are roman
numerals, letters and numbers.
14
15
Linking
Tag
<a>
Attribute
href
target
Description
Defines an anchor, used to
create an anchor to link for.
Description
Used to address the document
to link to
Defines where the link document
will be opened
Links.html
<html>
<head>
<title>Internet and WWW How to Program - Links</title>
</head>
<body>
Text between strong
tags will appear bold.
<h1>Here are my favorite sites</h1>
<p><strong>Click on a name to go to that page.</strong></p>
<p><a href = "http://www.deitel.com">Deitel</a></p>
Linking is
accomplished in
XHTML with the
anchor (a) element.
<p><a href = "http://www.prenhall.com">Prentice Hall</a></p>
<p><a href = "http://www.yahoo.com">Yahoo!</a></p>
The text between the a tags
is the anchor for the link.
<p><a href = "http://www.usatoday.com">USA Today</a></p>
</body>
</html>
16
The anchor links to the
page that’s value is given
by the href attribute.
Elements placed between paragraph
tags will be set apart from other
elements on the page with a vertical
line before and after it.
Program Output
Clicking on the “Deitel” link will open up the
Deitel homepage in a new browser window.
17
<html>
<head>
<title>Internet and WWW How to Program - Contact Page
Contact.html
</title>
To create an email link include
</head>
<body>
“mailto:” before the email
address in the href attribute.
<p>My email address is
<a href = "mailto:deitel@deitel.com"> deitel@deitel.com
</a>. Click the address and your browser will open an
email message and address it to me.</p>
</body>
</html>
18
Program Output
When a user clicks on an email link,
an email message addressed to the
value of the link will open up.
19
20
Character Entities
Entity name
 
Description
Result
Non-breaking space
Space
<
Less than
<
>
Greater than
>
"
Quotation mark
“
©
Copyright
©
<html>
<head>
<title>Internet and WWW How to Program - Contact Page
Contact2.html
</title>
The
horizontal
rule
element
renders
</head>
a horizontal line on the web page.
<body>
<p>My email address is
Special characters are denoted with an
<a href = "mailto:deitel@deitel.com">deitel@deitel.com
</a>. Click on the address and your browser will ampersand (&) and an abbreviation for
automatically open an email message and address it that
to my
character. In this case, the special
address.</p>
characters are ampersand and copyrigh
<hr /> <!-- Inserts a horizontal rule -->
<p>All information on this site is <strong>©</strong>
Deitel <strong>&</strong> Associates, Inc. 2002.</p>
<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>
<p>Note: <strong>< ¼</strong> of the information
presented here is updated daily.</p>
</body>
</html>
21
Contact2.html
Program Output
Text placed between del
tags is struck out..
Text placed between the
sub tags is subscripted.
Text placed between the
sup tags is superscripted.
22
Nav.html
<html>
<head>
<title>Internet and WWW How to Program - Navigation Bar
</title>
Placing an image element between
</head>
anchor tags, creates an image that
<body>
<p>
is an anchor for a link.
<a href = "links.html">
<img src = "buttons/links.jpg" width = "65"
height = "50" alt = "Links Page" /></a><br A
/>line break will render an
<a href = "list.html">
empty line on a web page.
<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 href = "form.html">
<img src = "buttons/form.jpg" width = "65"
height = "50" alt = "Feedback Form" /></a><br />
</p>
</body>
</html>
23
Nav.html
Program Output
Using an image as an anchor works
exactly the same as using text.
24
Clicking on the image entitled “links”
brings the user to the page on the right.
Links2.html
<html>
<head>
The entries in an unordered
<title>Internet and WWW How to Program - Links</title>
</head>
list must be included between
<body>
the <ul> and </ul> tags.
<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>
</li>
</ul>
</body>
</html>
An entry in the list must
be placed between the
<li> and </li> tags.
25
Program Output
Each entry in the list is rendered on its
own line with a bullet before it.
26
Download