| Date post: | 20-Jan-2016 |
| Category: |
Documents |
| Upload: | lynne-summers |
| View: | 221 times |
| Download: | 1 times |
1
Introduction to HTML: Part 1
OutlineIntroduction
Elements and Attributes Editing HTML Common Elements Headers Images Unordered Lists Nested and Ordered Lists Linking Special Characters and More Line Breaks More Examples
2
- 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.
3
Main.html
Program Output
<html > <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body> </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
4
HTML Text FormattingTag 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
5
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>
</body></html>
6
Header.html
<html> <head> <title>Internet and WWW How to Program - Headers</title> </head> <body> <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> </body> </html>
The font size of the text between tags decreases as the header level increases.
Program Output
7
<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>
<p align="center"> this is the center side </p>
8Placing image on web page:
Tag Description
<img> Defines image
Attribute Description
Src defines the image file location.
Width specify the image width.
Height specify the image height.
Alt is an attribute give a description of the image, the description is displayed if the image cannot be displayed
Border defines the image border width
align defines the placement side of the image (the default is left).
9
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 </>
<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 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.
10
Program Output
The second image could not be displayed properly, so the value of
its alt attribute is displayed instead.
11
<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">
12
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)
13
List.html <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: <ul> <li>New games</li> <li>New applications <ol type = "I"> <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"> <li>XML</li> <li>Java</li> <li>XHTML</li> <li>Scripts</li> <li>New languages</li></ol></li></ul></li> <li>Links</li> <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>
Entries for an ordered list must be placed between the <ol> and </ol> tags.
By inserting a list as an entry in another list, lists can be nested.
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.
14
List.html
Program Output
</body> </html>
Some sequence types available to order lists are roman
numerals, letters and numbers.
Nested lists are indented underneath the main list.
15
Linking
Tag Description
<a> Defines an anchor, used to create an anchor to link for.
Attribute Description
href Used to address the document to link to
target Defines where the link document will be opened
16
Links.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> <p><a href = "http://www.deitel.com">Deitel</a></p> <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>
Text between strong tags will appear bold.
Elements placed between paragraph tags will be set apart from other
elements on the page with a vertical line before and after it.
Linking is accomplished in
XHTML with the anchor (a) element.
The anchor links to the page that’s value is given
by the href attribute.
The text between the a tags is the anchor for the link.
17
Program Output
Clicking on the “Deitel” link will open up the Deitel homepage in a new browser window.
18
Contact.html
<html> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body> <p>My email address is <a href = "mailto:[email protected]"> [email protected] </a>. Click the address and your browser will open an email message and address it to me.</p> </body> </html>
To create an email link include “mailto:” before the email
address in the href attribute.
19
Program Output
When a user clicks on an email link, an email message addressed to the
value of the link will open up.
20
Character Entities
Entity name Description Result
Non-breaking space Space
< Less than <
> Greater than >
" Quotation mark “
© Copyright ©
21
Contact2.html
<html> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body> <p>My email address is <a href = "mailto:[email protected]">[email protected] </a>. Click on the address and your browser will automatically open an email message and address it to my address.</p> <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>
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.
22
Contact2.html
Program Output
Text placed between del tags is struck out..
Text placed between the sup tags is superscripted.
Text placed between the sub tags is subscripted.
23
Nav.html <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 /> <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 href = "form.html"> <img src = "buttons/form.jpg" width = "65" height = "50" alt = "Feedback Form" /></a><br /> </p> </body> </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.
24
Nav.html
Program Output
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.
25
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> </li> </ul> </body> </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.
26
Program Output
Each entry in the list is rendered on its own line with a bullet before it.
