More on HTML Communication Skills BASICS
- 1. More on HTML IS103 Communication Skills
- 2. Content Overview • Creating Lists and Inserting Images in HTML • Creating Links in HTML 2
- 3. Creating Lists • There are two fundamental types of lists: • Ordered list: A list that defines an order or a series of events • Unordered list: A list that defines a group of items that are related to one another but the order in which they appear is irrelevant. 3
- 4. Ordered Lists • There are two sets of tags necessary to create an ordered list. • The first, <OL> and </OL> defines the beginning and end of the entire list. • The second, <LI> and </LI> defines each element within the list. Tip : All formatting tags are available for use within the <LI> tags including the <P>, <BR>, <B>, <I>, and <FONT>. 4
- 5. START Attribute • Lists can also be started at an index value other than 1. To modify the starting index value, add a START attribute to the <OL> tag • For example: <OL START = “4”> 5
- 6. TYPE Attribute • To change the character used as the index, add the TYPE attribute to your <OL> tag. • Here is an example showing Roman numerals used within a nested list. <OL> <LI>Choose a product</LI> <LI>Enter your personalinformation</LI> <OL TYPE="i"> <LI>Enter your name</LI> <LI>Enter your address</LI> <LI>Enter your phone</LI> </OL> 6
- 7. Unordered Lists • Two sets of tags are used for unordered lists as well. • The tag that defines each item in the list is identical to that of the ordered list, the <LI>. • When defining the unordered list as a whole, you enclose it with <UL> …..</UL> 7
- 8. TYPE Attribute • HTML supports three different bullet types: circle, square and disc. • To change the bullet type, add the TYPE attribute to the <UL> tag. • For example: <UL TYPE=“square”> 8
- 9. Inserting Images on a Page • Before you can insert images on your Web pages, the images must be stored on your system. • You use the <img> tag to insert images on Web pages. 9
- 10. The <img> tag • The <img> tag lets you reference and insert a graphic image into the current text flow of your document <img> Function inserts an image into a document Attributes align, border, width, height End tag None in HTML 10
- 11. The src attribute • The src attribute for the <img> tag is required. Its value is the image file’s URL, either absolute or relative to the document referencing the image. • For example: Here we are now, trying to master the art of inserting images into HTML: <p> <img src=“imagename.jpg” </p> What an exciting moment, to be able to insert a picture into a HTML document. 11
- 12. The align attribute • You can control the alignment of images with the surrounding text through the align attribute for the <img> tag. • HTML standards specify five image-alignment attribute values: left, right, top, middle and bottom. • Example: <img src=“imagename.jpg” align=left> 12
- 13. Wrapping text around images • The left and right image-alignment values tell the browser to place an image against the left or right margin, respectively, of the current text flow. • Document content can be wrapped around images using this sample code: <img src="pics/car.jpg" border="1"width=200 height=200 align=left> <p><font color=red><font size=4> This little red car is such a beauty. Imagine it being a convertible, that would be even better. When I think of such beautiful inventions, they remind me of all the hardwork the ancient scholars had to go through to develop such motor machines that would make a great part of 21st century lifestyle choices. 13
- 14. 14
- 15. Centering an Image • You can horizontally center an inline image in the browser window, but only if it’s isolated from surrounding content. • Use the <center> tag. For example: <center> <img src="pics/car.jpg" border="1"width=200 height=200> </center> 15
- 16. The border attribute • Borders are lines that surround the edges of an image. • Below are examples of how borders can be applied to images: <img src="pics/car.jpg" border="1“/> <img src="pics/car.jpg" border=“2“/> <img src="pics/car.jpg" border=“4“/> <img src="pics/car.jpg" border=“8“/> 16
- 17. The height and width attributes • A more efficient way for authors to specify an image’s dimensions is with the height and width <img> attributes. • Both attributes require an integer value that indicates the image size in pixels; the order in which they appear in the <img> tag is not important. • Example: <img src="pics/car.jpg" width=200 height=200 align=left> OR <img src="pics/car.jpg" height=200 width=200 align=left> 17
- 18. Inserting Background Images • You may also place an image into the background of a document with the background attribute in the <body> tag. • Syntax: <BODY BACKGROUND="pics/bg1.jpg"> 18
- 19. Adding Links to Web Pages 19
- 20. HTML Links • A link is a word, group of words, or image that you click on to jump to another document (or file). • When you move a cursor over a link in a Web page, the arrow will turn into a little hand. • By default, links will appear as follows in all browsers: • An unvisited link is underlined and blue • A visited link is underlined and purple • An active link is underlined and red 20
- 21. The Importance of Links • Why links are important: • To let visitors of the site easily browse the web pages • To execute or download files • To create the ability to browse via a text or image 21
- 22. Parts of a Link • There are three parts to a link : source, label and target. • Source – is the current document you are inserting a link to. • Label – determines what visitors see and click on (text or image). • Target – determines where the link connects you to (another page or file). 22
- 23. Link Pages to make a Website 23 Write out an organization chart for the pages your website will contain. aboutus.html services.html contactus.html marketing.html home.html index.html
- 24. The Anchor <a> tag • The <a> tag is most commonly used with its href attribute to create a link. The href attribute is most important as it indicates the link’s destination. • It is a container that encompasses the text or image to be used as a link. • The syntax for using the anchor tag to create a link is as follows: <a href="URL"> linked text or image </a> 24
- 25. Examples of the <a> tag in use… • The <a> tag to link to another web page: <a href="research.html">Return to Activity Page</a> • In the above example, research.html is the name of the web page we are linking to (URL), and Return to Activity Page is the label of the link. 25
- 26. The Anchor Tag, cont. 26 • Make sure that you: – Use a closing anchor tag </a> – Place quotation marks around the value of the URL – Include the closing bracket at the end of the opening <a> tag • Various issues to troubleshoot with hyperlinks – Text and images disappear – All successive Web page text is a hyperlink – Code appears on screen – Code will not validate due to a problem <a> tag
- 27. The id Attribute • The id attribute is used with the <a> tag to create a section identifier within a document. Once created, the section identifier becomes a potential target of a link. • Here is an example of the id attribute in use with the <a> tag: <a id="PRR">Proposed Research Report</a> • In the above example, Proposed Research Report is the section that has been identified and given the id “PRR” 27
- 28. The id Attribute, cont. • After you have identified a section, you can link to it from anywhere within the same document or from another document. • For example: <a href="#PRR">Proposed Research Report</a> linking to the identified section from within the same document. <a href="research.html#PRR">Return to Activity Page and see proposed report</a> Linking to the identified section from another document. 28
- 29. Linking to a file from a HTML document. • Creating hyperlinks to files in HTML allows users to execute files as well as download and save them. • The HTML syntax for linking to a file is as follows: <a href=“filename.ext">View my Presentation </a> • When linking to a file, always specify the correct filename and extension to ensure the hyperlink works when it is clicked on. 29
- 30. Using Images as Links • Some authors of web pages like to use images and icons instead of words for link contents. • For example: <a href="Graphics.html"><img src="pics/car.jpg" length=100 height =100 border=1></a> 30
- 31. Managing Links 31 • All hyperlinks need to be verified – Verify that the URL or other reference is valid – Verify that the target page or location is accessed • Hyperlinks also need to be managed – Over time, URLs (and content) change – “Dead” links frustrate users • Manually check links to review and verify relevance of linked content.
- 32. References C. Musciano & B. Kennedy. (2006). HTML & XHTML : The Definitive Guide, 6th Edition. United States of America: O’Reilly,Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472 Gary P. Schneider & J. Evans. (2007). The Internet, 6th Edition. United States of America: Thomson Course Technology. 32