(html)

Start Lesson 4 . Going Beyond 10-Minute HTML

View text at : http://www.basic-english.org/zines/lesson4.txt
TABLES -- to align columns
Table and a Heading
Row One, Col 1.Row One, Col 2
Row Two, Col 1.Row Two, Col 2Two, Col 2
Row Three Col One and Two
Row Four, Col 1Row Four, Col 2
Row 5&6, Col 1Row 5, Col 2
Row 6, Col 2
Attributes :
Table : align, border, cellspacing, cellpadding, width
Table Cells : align, bgcolor, colspan, height, width

Comments : Most dimensions, height, size, width can be expressed as a number of pixels or as "nn%" of page width.
There are other features of TABLES.
A second table might be nested within another table. There is no limit, but two should be plenty, and more than three are unmanageable.

EXERCISE

Make a table with 4 rows and 4 columns containing each of the 16 named colors.
The names are in lesson 3.
Put the name of the color in each cell.

STYLE (CSS)

This is a way to make all tags have a similar look and save some typing.
The location of the STYLE tag is put in the HEAD division,

The biggest problem with STYLE is a different format than we are used to.
Instead of < > </ > it uses { } ; it uses different names for elements; equal sign become a colon; commas and quotes are used differently.
Obviously two different groups of persons developed HTML and STYLE / CSS.
EXAMPLE.
<STYLE>
	BODY 	{BACKGROUND:#FFCC99 ; FONT-SIZE:10pt ; 
		FONT-FAMILY: "arial","Helvetica","sans-serif";
		MARGIN-LEFT:0.50in; margin-right:0.50in; 
		margin-top:0.0in; margin-bottom:0.0in }
	H1	{COLOR: maroon ; TEXT-ALIGN:center; }
	P	{TEXT-INDENT:0.5in}
  	SUP 	{FONT-SIZE: 6pt}
</STYLE> 
Comments : Style attributes apply to the whole page or any page LINKED by a style sheet -- therefore be careful in limiting the automatic HTML features and the user's personal settings.

EXERCISE 2

In your program with the 4 x 4 color table, add a line to the STYLE tag.
	<STYLE>
	TD {background-color: gray}
	</STYLE>

Note that the alternative was writing 16 <TD BGCOLOR=gray> attributes.
Note the degree of readability with font color and background color.
Change the background color in the STYLE tag.
Note that contrast with font color and background color.
Note that the alternative was changing BGCOLOR 16 times.
META TAGS.
The HEAD division tells about the web page, it is not THE web page.
META means the same thing, about the page and is not content.
<META NAME="AUTHOR" CONTENT="your name">
<META NAME="DESCRIPTION" CONTENT="is what shows on search engines">
<META NAME="KEYWORDS" CONTENT="a,list,of words"> - that search engines are to find.
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> - keeps this web page off of search engines 
until it is ready to be cataloged by search engines.


TEMPLATE. Now lets made a template for writing most of our web pages. Then you may Copy the template and easily add your content. <HTML> <HEAD><TITLE>short for tab line</TITLE> <META NAME="AUTHOR" CONTENT="your name"> <META NAME="DESCRIPTION" CONTENT="is what shows on search engines" <META NAME="KEYWORDS" CONTENT="a,list,of,words"> <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> </HEAD> <BODY> <PRE> . . . content . . . </PRE> <HR color=navy size=4> Back to: <a href="http://www.basic-english.org/institute.html">Basic-English Institute</a> <br>About this Page : mypage name -- description, purpose <br>Last updated on January 01, 2010 . . . added ... something important <BR>Contact us at <script language=javascript><!-- // var link = "E-mail"; var tag1 = "mail"; var tag2 = "to:"; var email1 = "%20name"; var email2 = "website"; var email3=".com"; document.write("<a href=" + tag1 + tag2 + email1 + "@" + email2 + email3"" + link + "</a>") //--> </script> <br>URL: http://www.mywebsite.com/mypage.html </BODY> </HTML>

Back to: Zines Page    
About this Page : Lesson4.html -- Beyond 10-Minutes HTML
Last updated on April 30, 2007
Contact us at
URL: http://www.basic-english.org/zines/lesson4.html