(html)

Lesson 5 . Going Beyond 10-Minute HTML

View text at : http://www.basic-english.org/zines/lesson5.txt

More Color ATTRIBUTES

More common attributes include:
BGCOLOR= Useful with <BODY BGCOLOR=>, TD, TH, (more)
COLOR= is used with FONT, HR, (more)
Colors can be expressed as words : <FONT COLOR=red>
red, green, blue, black, white, gray, aqua, fuchsia, lime, maroon, navy, olive, purple, silver, teal, yellow.

Or colors may be expressed as numbers, such as <FONT COLOR="#996633> Where the number is in three, 2-digit groups representing a blend of the colors RED, GREEN and BLUE. From these primary colors, all other colors can be made.
"#000000" is black (no colors) and "#FFFFFF" is white (all colors), and
"#FF0000" is <font color="#FF0000"red, (no green, no blue), etc. Note that quotes and # are required if not using a color name. The number "#0099FF" is this -- no red, medium green, strong blue -- The numbers range from 0 to F (hexadecimal 0-15) (Older computers only recognized 256 colors made from the values 0, 3, 6, 9, C, F). The RGB color numbers give you thousands of colors to select.
Try a variety of color numbers. A larger number gives more of that color to the blend.

CASCADING STYLE SHEETS (CSS)

EXAMPLE #1 . Embedded Style Tag STYLE
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,
<HEAD>
<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> </HEAD>
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.

EXAMPLE #2 . Linked Style Sheets
The elements above , BODY ..., H1 ..., P ..., SUB ... (without STYLE) may be saved into a separate file with the suffix ".css", such as : mystyle.css .
These attributes are brought to the HTML page with this command in the HEAD division. Any web page code with this line will have the same BODY, H1, P attributes.
Comment : there are hundreds of new attributes available in CSS.
We will talk about one other useful feature of CSS in another lesson.

More on the HEAD division
META TAGS.

The HEAD division tells about the web page, it is not THE web page.
The META tag means the same thing, about the page and is not content.
<META NAME="AUTHOR" CONTENT="your name"> -- is what shows on search engines
<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. Search engines find NEW pages every night, but only look for updates infrequently. It may take a month before your test pages are changed to your real updates are found. Using the META ROBOTS tag while developing your webpage. When finished, you will remove NOINDEX and your finished pages to be seen sooner.
    There are other tags for the HEAD division. One will be discussed later in this lesson.
TEMPLATE.
Now lets update our template for writing web pages by adding the line in HEAD of <HEAD> </HEAD>
<HTML>
<HEAD><TITLE>something 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, for search engines">
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"> 
<LINK HREF="mystyle.css" type="text/css" rel="stylesheet">
</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>Back to the text version of this page --  http://www.basic-english.org/zines/lesson4.html
<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 Lesson Menu