This is my Virtual Notebook for "Web Page Design For Beginners" to practice tags and take notes about the lessons.
So far I have learned what tags,attributes and values are. I have also learned how to create a template for future web pages. This notebook is the first step toward developing an exciting new skill.
<br> = The line break tag moves the proceeding text down one line. For Example:
This is a first line break.
This is a second line break.
This is a third line break.<hr> = the horizontal rule tag
The horizontal rule tag creates a straight horizontal line that is centered across the page.
Using just the <hr> tag produced this line:
Adding a width value, expressed as a percentage, such as <hr width="50%"> produces this line:
The line can be further manipulated by manipulating it right or left using the align value. For instance, <hr="50%"align="right";> produces this line:
The thickness of the line can also be regulated. <hr=50%align="left"size="10"> creates this line:
In addition the line can be made to appear solid using the "noshade" value as follows: <hr=50%align="left"size="10"noshade > creates this line:
<img src="..."> = the image tag tag.
The image tag contains the image file so it will display on the browser. Information includes image file name, size (width and height in pixels, and a text description of the image for browsers that don't show the image.
Example: <img src="_____.jpg width=##" height=##" alt="Picture of ___">
The Most Important Tag Sets
<html> <html> : This tag set communicates with the browser that the document is written in HTML. The entire web page is couched between the opening and closing html tags.
<head> <head> : The information between these tags is not visible on the web page. It contains META information, Java Script information, Html comments and the title tage set.
<title> <title> : What you type between this tag set shows up at the very top of the browser. It is also what shows up when the page is bookmarked. It is not seen on the web page itself.
<body> <body> : Everything seen between the body tags comprises the actual web page.
The opening body tag defines a variety of attributes that apply to the web page. Some of these are:
bgcolor="######" This defines the background color
text="######" This defines the color of the text
link="######" This changes the color of a link before a visitor clicks on it. The default color is #0000FF or BLUE
alink="######" This is an Active Link. It changes the color of a link as the visitor clicks on it. The default color is #FF0000 or RED.
vlink="######" This is a Visited Link. It changes the color of a link after a visitor has been to that site. The default color is #800080 or PURPLE
Some of the More Commonly Used Tag Sets
<em> </em> = The strong emphasis or bold tag set emphasizes the importance of the text.
<p> </p> = The paragraph tag set moves the proceeding text down two line.
<u> </u> = The underline tag set emphasizes the importance of the text.
<center> </center> = the center tag set
<h1,2,3,4,5 or 6> </h1,2,3,4,5 or 6> = This tag set produces various heading effects. Notice how each heading automatically take up a full line. Contrast this to font sizes below.
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<font="attribute"> </font> This is the font tag set. It is used for adding variety to the page. Some font attributes include:
font color="######" This is a way of changeing the font within the page.
font size="1,2,3,4,5,..." This defines the font size, with size increasing as the number increase. Notice how all the font sizes can occur on one line. Contrast this to the heading tags above.
Size 1 Size 2 Size 3 Size 4 Size 5 Size 6 Size 7font face="Comic Sans MS, Times Roman, Arial..." = This defines the font size, with size increasing as the number increases.
Formula for a simple two-row and two-column table:Week Two<table> = Opening tag of table
<tr> = Opening tag for first row
<td> xyz </td> = Data in the first row
<td> xyz </td> = Next data in the first row
</tr> = End of first row
<tr> = Opening tag for second row
<td> xyz </td> = Data in the second row
<td> xyz </td> = Next data in the second row
</tr> = End of second row
</table> = Closing tag of table An example of a simple two-row two-column table would be:In my opinion this looks more like the meandering mind of a mad naturalist than a table. An effective way to visually separate the contents of the table is with the border attribute.
giant kelp sea palm garibaldi moray eel Adding a Border:
The border attribute is included in the opening table tag. It is coded as <table border="#" >. This is modeled in the following example in which the border attribute is "5".
Now the various words in the table are making more sense. But there is still no description of what this table is supposed to illustrate. Adding a caption helps make sense of this "hodge podge".
giant kelp sea palm garibaldi moray eel Adding a Caption:
The <caption> </caption> tag set immediately proceeds the table tag set and describes the substance of the table. Here is an example:
Sea Life giant kelp sea palm garibaldi moray eel Table Headers
The caption provided an overall description of what the table is about, but the organization of the table is effected by the table headers which describe the contents of the table columns. The <th> </th> tag set is placed inside of the <tr> <th> Table Heading </tr> </th> tag set.By accident I discovered it is possible to have headings for columns rather than rows by placing the table headers between the <tr> <th> Table Heading </th> </td> tag sets.
Sea Life Deep Shallow giant kelp sea palm garibaldi moray eel
Sea Life Algae giant kelp sea palm Fish garibaldi moray eel Colspan
Think of the heading attribute &ldquo colspan &rdquo as shorthand for &ldquo Column Span &rdquo . It allows a heading to span across more than one column of a table. This is accomplished by placing <colspan= &ldquo # &rdquo> between the <td> and/or the <th> tag set.
Using the example above, it is possible to place &ldquo Sea Life &rdquo as a heading above both columns as follows:
Sea Life Deep Shallow giant kelp sea palm garibaldi moray eel Rowspan
The heading attribute &ldquo rowspan &rdquo allows a heading to be placed along the sides of two or more rows as follows:
Sea Life Algae giant kelp sea palm Fish garibaldi moray eel Cellspacing
The table border attribute &ldquo cellspacing &rdquo adds more space between the cell blocks. It is expressed as <table border = &ldquo # &rdquo cellspacing = &ldquo # &rdquo >.
Sea Life Deep Shallow giant kelp sea palm garibaldi moray eel Cellpadding
The table border attribute &ldquo cellpadding &rdquo adds more space between the items in the cells and makes the cell walls larger.
Sea Life Deep Shallow giant kelp sea palm garibaldi moray eel b