|
The 'p' tag of the paragraph above this one
has an attribute for class with a value set to 'lesson'.
This paragraph as well but the value here is set to 'list'.
By this means a different set of CSS ( cascading style sheets )
properties can be applied by selecting 'class' in the code
between the 'style' tags.
Templet / Template
<!DOCTYPE html> for html 5
<html>
<head>
<title>THIS SHOWS IN TOP BLUE BAR</title>
<meta charset="UTF-8">
<style>see above</style>
</head>
<body>
<p>PAGE
<br>
DISPLAY</p>
<hr>
</body>
</html>
(lesson)
The content displayed here is set within a "Table"
using tags like these below.
(list)
<table class="cover" width=100%>
<tr><td valign="top" width=48%>
,,, ,,, this stuff ,,, ,,,
</td><td width=48%>
<table class="reference">
<tr><th>Nunb</th><th>ASCII</th></tr> - etc.
<tr><td>32,33,34</td><td>x x</td></tr>
,,, ,,, the stuff on the right ,,, ,,,
<tr><td>253,254,255</td><td>x x</td></tr>
</table></td></tr></table>
This code below, I carried
over to this page from Lesson 1.5 so you can keep track of how the "StyleSheet"
changes and grows as we go along. Examine the difference between p.lesson and p.list
<style rel="stylesheet" type="text/css">
h1, h2, h4 { text-align: center }
p.lesson {
font-size: 14pt;
margin-left: 5em;
margin-right: 5em;
text-align: left;
color: #334455 }
p.list {
font-size: 14pt;
color: #ff33cc;
margin-left: 16em;
text-align: left }
b { color: blue }
ul { text-align: center }
</style>
I added this part below, in the in-head style of this page's 'head'
to allow me to apply attributes/properties to the content of the <pre> tag.
pre { margin-left: 26em }
table tr td pre {
margin-left: 2em;
margin-right: em }
Update your templet / template again
this is a better way to provide you a place to copy from
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<html lang="en">
<head>
<title> -X- </title>
<meta name="keywords" content="Enter keywords here">
<meta name="description" content="Enter a description here">
<meta name="author" content="Enter your name here">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1>
<style>
body { color: #000000 } this is text color(black)
</style>
</head>
<body>
<p>PAGE - DISPLAY
TAGS TO DUMP
<center> <marquee> ya, we didn't cover marquee, no biggie
Not Yet ; <font>
and Tag List 'Tags to Keep'<br>
<address> </address>
<b> </b>
<blockquote> </blockquote>
<big> </big>
<blink> </blink>
<cite> </cite>
<em> </em>
<i> </i>
<q> </q>
<s> </s>
<small> </small>
<strike> </strike>
<strong> </strong>
<u> </u>
</p>
<hr>
<h1> </h1>
<h2> </h2>
<h3> </h3>
<h4> </h4>
<h5> </h5>
<h6> </h6>
<ol>
<li> </li>
</ol>
<ul>
<li> </li>
</ul>
<dl>
<dt> </dt>
<dd> </dd>
</dl>
<pre>code</pre>
<hr>
<table>
<tr>
<th>
column header
</th>
</tr>
<tr>
<td>
cell data
</td>
</tr>
</table>
</body>
</html>
The above templet displayed here functions as a list of
the tags you have covered so far. The HTML file that you write and save
is text file that the Browser Program reads. It is told to treat all the
stuff between angle brackets as instructions. When the browser sees
<!-- the comment capsule --> it will not act on it.
So in order for me to show you how the code looks, that is, to show angle brackets without the Browser acting on them, I must "escape" from
the parse of the Browser, in the writing of this code.
To depict the <
I must type ( & # 60 ; ) or ( & lt ; ) , ( but with no spaces ) in the code to do it.
See just to the right the number 142, well,
putting & and then a # in front and ; in back of 142 makes Ž
Once more. " < " & " < " produce the same.
-below this code in the <pre> tags
,, there is an additional level to this as you see the
Browser responds to the & # xx ; as a command to insert a character, a shorthand could be used,
with the letters (lt) between the & and ; instead of the #60 does the same.
Here we go.
<p class="lesson">Once more.
" < " & " < " produce the same.<br>
-below this code in the <pre> tags <br>
... Here we go.</p>
To make it more complicated,
the code within the "Pre" tags that
depicts the " < " & " < "
and <pre> ,,
must use (& #38 ;) or (& + amp ;) to show just the '&' part of '&+#60; &+lt;'
One last thing and this should all make sense, if typing
& # 60 ; without the spaces give this <, how do you depict <?
Answer; by typing code &#60;
and to show you the above I must type
&#38;#60;
Shorthands
& = & = &
< = < = <
no shorthand = = =
> = > = >
and I might as well tell you,
=   = (a no-break space)
& = & = &
< = < = <
no shorthand = = =
> = > = >
and I might as well tell you,
=   = (a no-break space)
The ASCII Character Set
ASCII uses the values from 0 to 31 (and 127) for control characters.
ASCII uses the values from 32 to 126 for letters, digits, and symbols.
ASCII does not use the values from 128 to 255.
The ANSI Character Set (Windows-1252)
ANSI is identical to ASCII for the values from 0 to 127.
ANSI has a proprietary set of characters for the values from 128 to 159.
ANSI is identical to UTF-8 for the values from 160 to 255.
The ISO-8859-1 Character Set
8859-1 is identical to ASCII for the values from 0 to 127.
8859-1 does not use the values from 128 to 159.
8859-1 is identical to UTF-8 for the values from 160 to 255.
The UTF-8 Character Set
UTF-8 is identical to ASCII for the values from 0 to 127.
UTF-8 does not use the values from 128 to 159.
UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.
UTF-8 continues from the value 256 with more than 10.000 different
characters.
For a closer look at ASCII, ANSI, ISO, and UTF-8,
please study
Complete HTML Character Set Reference.
So now that your head is spinning, let's calm down and chat about the 'font' tag.
<font size="4" color="black" face="Arial">
if you are aiming to HTML 3.2 (FINAL) or HTML 4.01 (Transitional) this format is just fine,
but,
if you are aiming to HTML 4.01 (Strict) or XHTML you want to take advantage of style.
If you are aiming to HTML 5 you must junk the 'font' tag and employ StyleSheets, CSS; in-line, in the head, or external with the 'link' tag in the head. I showed you an in-line style back in Lesson 1.3, think of it this way,
apply values to properties instead of applying values to attributes.
<font size="4">
<font style="font-size: 12pt">
That is in-line style.
To do the same in-head, (embeded style), leave the 'font' tag vacant, <font>xxx</font>
and put -- font { font-size: 12pt } between the 'style' tags in the head.
BUT
since you can apply the property values directly to the paragraph that the 'font' tags sit in, do it this way:
<style>
p {
font-size: 12pt;
(leave a space after these semicolons before you Carriage Return - good habit)
color: black;
font-family: Arial, Geneva, Verdana, sans-sarif }
(leave a space before the closing curly braket - another good habit)
OK, see why we can dump the 'font' tag ( we don't have to unless we shoot for HTML 5 ) but now that you know enough about CSS to make sense of the application of style properties to text. You are ready validate your pages to HTML 4.01 if you wish to.
We have some space here so let's get a list posted of font styles and the font-family groups and a list of properties we can apply to text.
size set to 14pt in stylesheet
Default Font --
for comparative test - using font tags
Default Font Andale Mono
Default Font Arial
Default Font Arial Black
Default Font Comic Sans
Default Font Comic Sans MS
Default Font Courier New
Default Font Courier
Default Font Geneva
Default Font Georgia
Default Font Helvetica
Default Font Times
Default Font Times New Roman
Default Font Impact
Default Font Trebuchet MS
Default Font Verdana
Default Font Bainbridge
Default Font Cartoon
Default Font Palomino
Default Font Angel
Default Font Iceland
Default Font Messenger
Default Font Savannah
Default Font Crush
Default Font Nautica
Default Font Quarter
Default Font Apple Chancery
Default Font Last Ninja
Default Font
Default Font
Default Font
Default Font
Default Font
font-family:
monospace;
sans-serif;
serif;
cursive;
fantasy;
|
