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.
Main.html Program Output <head> <title>Internet and WWW How to Program - Welcome</title> </head> <body> <p>Welcome to XHTML!</p> </body> </html> Main.html Program Output 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
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
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>
<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> Header.html The font size of the text between tags decreases as the header level increases. Program Output
<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>
Placing image on web page: Tag Description <img> Defines image Attribute 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).
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 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.
Program Output The second image could not be displayed properly, so the value of its alt attribute is displayed instead.
<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">
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 type Type of ordering or unordering (circle, square, disk)
By inserting a list as an entry in another list, lists can be nested. 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: <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> 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. 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.
List.html Program Output </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.
Linking Tag Description <a> Attribute href target Defines an anchor, used to create an anchor to link for. Attribute href Used to address the document to link to target Defines where the link document will be opened
Text between strong tags will appear bold. 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. Linking is accomplished in XHTML with the anchor (a) element. The text between the a tags is the anchor for the link. 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.
<html> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body> <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> Contact.html To create an email link include “mailto:” before the email address in the href attribute.
Program Output When a user clicks on an email link, an email message addressed to the value of the link will open up.
Character Entities Entity name Description Result Non-breaking space Space < Less than > Greater than " Quotation mark “ © Copyright ©
The horizontal rule element renders a horizontal line on the web page. <html> <head> <title>Internet and WWW How to Program - Contact Page </title> </head> <body> <p>My email address is <a href = "mailto:deitel@deitel.com">deitel@deitel.com </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> Contact2.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.
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.
A line break will render an empty line on a web page. <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> 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.
Nav.html Program Output 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.
<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> 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.
Program Output Each entry in the list is rendered on its own line with a bullet before it.