Table tags 2
- 1. HTML 4 Hypertext Markup Language Tables, Lists & Links Science & Art MultimediaScience & Art Multimedia
- 2. HTML – Tables Why tables are important: • to maintain the elements of your website • to be creative with the design of pages • to separate & organize different formatting styles
- 3. <table> to begin table <tr> defines beginning of first row <td> defines beginning of the cell </td> to complete cell </tr> to complete row </table> to end table Basic Table tags:
- 4. These attributes all rest inside the first table tag: <table border=0 (invisible border – very common) border=10 (by default takes up 2 pixels of space) bordercolor=“red” bgcolor=“yellow” width=320 (there is a height tag but not often used) align=center (left or right) (allows text to wrap) <br clear=left or right or all> (to stop wrap) valign=top (top, middle, bottom or baseline) hspace=20 vspace=20 (border around picture) colspan=2 (cell spanning more then one column) rowspan=2 (cell spanning more then one row) > Table Code: Exploring Different Attributes
- 5. cellspacing=0 determines the number of pixels between each cell (default is 2 pixels) cellpadding=0 determines the number of pixels between the contents and the cell wall (default is 1 pixel) Setting cells to =0 is common in layout design <!--browsers can be finicky so make sure to set border=0 to ensure there is no space between any web page elements (if desired)--> Table Code:
- 6. HTML – Lists Why lists are important: • they are widely used on links pages • they help in the organization of data • they are quick and easy to create
- 7. Creating Lists: • first determine the style of list • then determine the content (sometimes writing this out first helps) • there are two main types of lists: • ordered lists: perfect for giving step-by-step instructions to a visitor (numbers, roman numerals or letters) • unordered lists: mostly used to simply list items on a web page such as links (discs, round or square bullets)
- 8. <ol> to begin ordered list <li> list item </li> </ol> to end ordered list <ul> to begin unordered list <li> list item </li> </ul> to end unordered list Basic List tags:
- 9. List Code: in Notepad
- 10. These all rest inside the first list tag: <ol type=I or i (for large or small roman numerals) type=A or a (for capital or small letters) type=1 (for numbers, which is the default) > <ul type=disc (the default for first level lists) type=round (the default for second level lists) type=square (the default for third level lists) > List Code: Exploring Different Attributes
- 11. Nested Lists are useful for creating website site maps , and are simply just lists inside of lists: <ol> <li> Introduction </li> <ol> <!-- indenting helps organize code --> <li> Are lists fun? </li> <li> Are lists not fun? </li> </ol> <li> Conclusion </li> <ol> <li> Lists are fun </li> <li> Lists are not fun </li> </ol> </ol> List Code: Nested Lists (pg.141)
- 12. HTML – Links Why links are important: • to let visitors easily browse your webpages • to execute or download files (ie. movies, pdf’s, etc.) • to create the ability to browse via a text or image • to let users easily move to & from a particular spot
- 13. Links have three parts: destination, label & target • destination: determines where link will go (another page, a movie or an anchor) • label: determines what visitors see and click on (text, image or combination) • target: determines where destination is seen (in new window or frame, etc.) (pg. 122) Creating Links: NOTE: Planning determines where viewers can and cannot go?
- 14. • Absolute: shows entire path to file “elephant.jpg” (http://www.site.com/web/images/elephant.jpg) • Relative: seen when on website (zoo.html) (“images/elephant.jpg”) Another type of link is: • Local: an anchor to and from a particular spot (<a href=“#bottom”>Go to Bottom</a>) (<a name=“bottom”></a>) Two types of Links: Absolute & Relative
- 15. Relative: as if going to page on your site <a href=“welcome.html”>Welcome</a> Absolute: as if going to another site <a href= “http://www.ibm.com/web/home.html”> IBM Home</a> Basic Link tags:
- 16. Link Code: in Notepad
- 17. Changing the color of links: Must reside in the <body tag: link= changes color of link not used yet vlink= changes color of link already visited alink= changes color of link when clicked > example: (<body link=“black”>) <!-- used to coordinate colors on pages. If a clients website is black & red, you may not want to have the standard blue links. Viewers still need to know it’s a link--> Link Code: Exploring Different Attributes
- 18. Link Pages to Make a Website: a b o u tu s .h tm l s e r v ic e s .h tm l c o n ta c tu s .h tm l m a r k e tin g .h tm l h o m e .h tm l in d e x .h tm l Write out an organization chart for the pages your website will contain. * most browsers only look for index.html (contain meta tags)
- 19. Link Pages to Make a Website: • create a new folder on your desktop (site name?) (remember to use lowercase) • in notepad create index.html (in folder) • in notepad create the home, aboutus, services and contactus pages • create folder in website called marketing and create a page called marketing.html • link all the pages
- 20. HTML – Practice Assignment Create a Links page for your website: • put links inside a table using a list • do research for relevant links • explore your textbook for all the different options you can utilize • maybe use a picture link NOTE: This is not for marks but is valuable to include in your website.