shs-adcppt1
- 2. Lists A list is simply a collection of two or more related items. There are three (3) types of lists in HTML: unordered lists, ordered lists, and definition lists .
- 3. Unordered List <ul> </ul> The ul element, the name for which is an abbreviation of unordered list, is used to group a collection of items together in a list, but in a way that doesn’t suggest an order of precedence or importance . Each list item in the unordered list is in turn defined by its own li element, all contained by the surrounding <ul> and </ul> tags.
- 4. EXAMPLE: The shopping list below utilizes ul element (unordered list) with each item living in its own li element. <ul type= “ disc ” > <li>Eggs</li> <li>Cheese</li> <li>Milk</li> <li>Papadums</li> <li>Tickle-me Elmo</li> </ul> Eggs Cheese Milk Papadums Tickle-me Elmo OUTPUT:
- 5. Ordered Lists <ol> </ol> The ol element defines an ordered list, one in which the items are meant to be followed in a specific sequence. Each list item is defined by li element, which suggests an order of importance or sequence, as ol is an abbreviation of ordered list. The <ol> tag attributes: type and start type=”{ a | A | i | I | 1 }“ start=”number“
- 6. Definition List <dl> </dl> A definition list is not merely a collection of items, but rather a collection of items and description of each. A definition list doesn’t contain list item ( li ) elements. Rather, items in a definition list may consist of definition terms ( dt ) and definition description ( dd ).
- 7. Nested Lists You can also nest one or more lists inside another list item (see example below). <ul> <li>Home</li> <li>About Us <ul> <li>Our History</li> <li>The Team</li> <li>Our Vision</li> </ul> </li> <li>Portfolio</li> <li>Clients</li> <li>Contact</li> </ul> Home About Us Our History The Team Our Vision Portfolio Clients Contact Us OUTPUT:
- 9. ALL ABOUT HYPERLINK One of the greatest feature of the WWW is its huge collection of documents, which number in millions. All of these documents are brought together by the use of HYPERLINKS. The user navigates the web by clicking on the links that the web author provides.
- 10. HYPERLINKS/LINKS Hyperlinks/links provide a connection between different documents. Links are one of the most important features that make the World Wide Web so powerful. Using links, you can point to other documents, graphics, and programs from within your document.
- 11. These actions include: Moving to another part of the document Opening and displaying an image, text, or sound files Opening a document from other URL or web sites around the globe within the internet.
- 12. The ANCHOR Tag <A>…</A> The use of link is based around a tag: the anchor tag. The basic syntax of the anchor tag is as follows: <a href=”URL”>text link</a> You use the anchor element to mark any markup that causes the user’s browser to navigate to a different location when interacted with. The text between <a></a> is presented to the user. When the user clicks on the link, the browser is directed to the document that is specified by the href attribute.
- 13. Linking to Other Documents Example: <a href=”http://www.google.com”>Search</a> This sample uses the <a> tag along the href attribute to provide users the ability to do a search using Google. The href provides the location – in this case, http://www.google.com – where the browser should navigate to. When you want to link to other documents that are part of your Web site: <a href=”news.html”>News</a> In this case, the browser looks for the document named news.html in the same location of the original document.
- 14. Target Is a named location or anchor within a Webpage to which a link can be created. Values: _new, _self
- 15. _new Is used by the browser to initiate a newly opened window.
- 16. _self This target points to the current frame or window, that is, the frame or window that contains the document that is the source for the anchor, <a> The target URL will open in the same frame as it was clicked
- 17. name This attribute is used to identify a section or fragment of the page Link to specific location within the document <a name=“TOP”></a> <a href=“#TOP”>return to top of the page</a>
- 18. Using Graphics as a Hyperlink Combining the Anchor tag and the Image tag can create a clickable image that acts as a link to other HTML documents <a href=“Image filename”><img src=“Image filename”/></a>