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 &nbsp; Description Result Non-breaking space Space &lt; Less than < &gt; Greater than > &quot; Quotation mark “ &copy; 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>&copy;</strong> Deitel <strong>&amp;</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>&lt; &frac14;</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
