C06D


Web Site Development

Lesson 2.1 - ASCII and the HTML charset Attribute

code to apply style to Headers size 1, 2, and 4:  h1, h2, h4 { text-align: center }
code to apply style to the Paragraphs in the lesson is more elaborate
p.lesson {
  font-size: 14pt; 
  margin-left: 5em;
  margin-right: 5em;
  text-align: left;
  color: #334455 }

In Lesson 1.5 you were introduced to the idea of using a templet / template to save time on each new .html or .htm file you begin.You saw your templet had two distinct sections, one the Head and the other the Body.Here are some additions to both the Head and the Body. The tag <meta> sits in the Head and has several uses, Caps here are for emphasis only, don't use Caps.

code to apply style to unordered list:  ul { text-align: center }
Could I have done it all at once?, like this:
h1, h2, h4, ul { text-align: center } , yes the rules allow this.
the same could be effected with:
body { text-align: center } , but that would center the paragraphs as well.

Templet II - charset Attribute/meta tag - style tag - pre tag

Let's discuss one more specific use of the 'meta' tag. Old timers will tell you, once upon a time the character set was called EBCDIC. see here -> http://en.wikipedia.org/wiki/EBCDIC Then ASCII came along.
The <meta> tag can be used to define the HTML charset Attribute to tell which character set the Browser will deploy, here are some examples

For HTML 3.2 and HTML 4.01:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

HTML5 has a new attribute, charset, which makes it easier to define charset:
* HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
* HTML5: <meta charset="UTF-8">
-
This above and the other blocks of this type face display thusly 
by it being wrapped in a set of 'pre' tags.

For HTML 5:
<meta charset="UTF-8">

  Your updated Templet should include a 'meta' tag with a 'http-equiv' attribute set to 'content-type' and and 'content' specifying a character set.

Templet / Template pt2 - Table Example, 'table' tag - 'tr' tag - 'td' tag - 'th' tag

In Lesson 1.5 a table was used to depict lots of DOCTYPE data. Now we take time to explain one tag used, the tag 'th', in the first row
Here is a table (two columns) and a table inside that, again to depict Character Set data on the right side, and continue explanations on the left side.

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. 
" &#60; " & " &lt; " produce the same.<br>
 -below this code in the &lt;pre&gt; tags <br>
... Here we go.</p>

To make it more complicated,
the code within the "Pre" tags that
depicts the " &#60; " & " &lt; "
and &lt;pre&gt; ,,
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 &#60;?
Answer; by typing code &#38;#60;
and to show you the above I must type
&amp;#38;#60;


Shorthands

&amp; = &#38; = &
&lt; = &#60; = <
no shorthand &#61; = =
&gt; = &#62; = >
and I might as well tell you,
&nbsp; = &#160; = (a no-break space)

&amp; = &#38; = &
&lt; = &#60; = <
no shorthand &#61; = =
&gt; = &#62; = >
and I might as well tell you,
&nbsp; = &#160; = (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;

Numb ASCII ANSI 8859 UTF-8 Description
32 space
33!!!!exclamation mark
34""""quotation mark
35####number sign
36$$$$dollar sign
37%%%%percent sign
38&&&&ampersand
39''''apostrophe
40((((left parenthesis
41))))right parenthesis
42****asterisk
43++++plus sign
44,,,,comma
45----hyphen-minus
46....full stop
47////solidus
480000digit zero
491111digit one
502222digit two
513333digit three
524444digit four
535555digit five
546666digit six
557777digit seven
568888digit eight
579999digit nine
58::::colon
59;;;;semicolon
60<<<<less-than sign
61====equals sign
62>>>>greater-than sign
63????question mark
64@@@@commercial at
65AAAALatin capital letter A
66BBBBLatin capital letter B
67CCCCLatin capital letter C
68DDDDLatin capital letter D
69EEEELatin capital letter E
70FFFFLatin capital letter F
71GGGGLatin capital letter G
72HHHHLatin capital letter H
73IIIILatin capital letter I
74JJJJLatin capital letter J
75KKKKLatin capital letter K
76LLLLLatin capital letter L
77MMMMLatin capital letter M
78NNNNLatin capital letter N
79OOOOLatin capital letter O
80PPPPLatin capital letter P
81QQQQLatin capital letter Q
82RRRRLatin capital letter R
83SSSSLatin capital letter S
84TTTTLatin capital letter T
85UUUULatin capital letter U
86VVVVLatin capital letter V
87WWWWLatin capital letter W
88XXXXLatin capital letter X
89YYYYLatin capital letter Y
90ZZZZLatin capital letter Z
91[[[[left square bracket
92\\\\reverse solidus
93]]]]right square bracket
94^^^^circumflex accent
95____low line
96````grave accent
97aaaaLatin small letter a
98bbbbLatin small letter b
99ccccLatin small letter c
100ddddLatin small letter d
101eeeeLatin small letter e
102ffffLatin small letter f
103ggggLatin small letter g
104hhhhLatin small letter h
105iiiiLatin small letter i
106jjjjLatin small letter j
107kkkkLatin small letter k
108llllLatin small letter l
109mmmmLatin small letter m
110nnnnLatin small letter n
111ooooLatin small letter o
112ppppLatin small letter p
113qqqqLatin small letter q
114rrrrLatin small letter r
115ssssLatin small letter s
116ttttLatin small letter t
117uuuuLatin small letter u
118vvvvLatin small letter v
119wwwwLatin small letter w
120xxxxLatin small letter x
121yyyyLatin small letter y
122zzzzLatin small letter z
123{{{{left curly bracket
124||||vertical line
125}}}}right curly bracket
126~~~~tilde
127DEL    
128   euro sign
129 NOT USED
130   single low-9 quotation mark
131 ƒ  Latin small letter f with hook
132   double low-9 quotation mark
133   horizontal ellipsis
134   dagger
135   double dagger
136 ˆ  modifier letter circumflex accent
137   per mille sign
138 Š  Latin capital letter S with caron
139   single left-pointing angle quotation mark
140 Œ  Latin capital ligature OE
141 NOT USED
142 Ž  Latin capital letter Z with caron
143 NOT USED
144 NOT USED
145   left single quotation mark
146   right single quotation mark
147   left double quotation mark
148   right double quotation mark
149   bullet
150   en dash
151   em dash
152 ˜  small tilde
153   trade mark sign
154 š  Latin small letter s with caron
155   single right-pointing angle quotation mark
156 œ  Latin small ligature oe
157 NOT USED
158 ž  Latin small letter z with caron
159 Ÿ  Latin capital letter Y with diaeresis
160    no-break space
161 ¡¡¡inverted exclamation mark
162 ¢¢¢cent sign
163 £££pound sign
164 ¤¤¤currency sign
165 ¥¥¥yen sign
166 ¦¦¦broken bar
167 §§§section sign
168 ¨¨¨diaeresis
169 ©©©copyright sign
170 ªªªfeminine ordinal indicator
171 «««left-pointing double angle quotation mark
172 ¬¬¬not sign
173 ­­­soft hyphen
174 ®®®registered sign
175 ¯¯¯macron
176 °°°degree sign
177 ±±±plus-minus sign
178 ²²²superscript two
179 ³³³superscript three
180 ´´´acute accent
181 µµµmicro sign
182 pilcrow sign
183 ···middle dot
184 ¸¸¸cedilla
185 ¹¹¹superscript one
186 ºººmasculine ordinal indicator
187 »»»right-pointing double angle quotation mark
188 ¼¼¼vulgar fraction one quarter
189 ½½½vulgar fraction one half
190 ¾¾¾vulgar fraction three quarters
191 ¿¿¿inverted question mark
192 ÀÀÀLatin capital letter A with grave
193 ÁÁÁLatin capital letter A with acute
194 ÂÂÂLatin capital letter A with circumflex
195 ÃÃÃLatin capital letter A with tilde
196 ÄÄÄLatin capital letter A with diaeresis
197 ÅÅÅLatin capital letter A with ring above
198 ÆÆÆLatin capital letter AE
199 ÇÇÇLatin capital letter C with cedilla
200 ÈÈÈLatin capital letter E with grave
201 ÉÉÉLatin capital letter E with acute
202 ÊÊÊLatin capital letter E with circumflex
203 ËËËLatin capital letter E with diaeresis
204 ÌÌÌLatin capital letter I with grave
205 ÍÍÍLatin capital letter I with acute
206 ÎÎÎLatin capital letter I with circumflex
207 ÏÏÏLatin capital letter I with diaeresis
208 ÐÐÐLatin capital letter Eth
209 ÑÑÑLatin capital letter N with tilde
210 ÒÒÒLatin capital letter O with grave
211 ÓÓÓLatin capital letter O with acute
212 ÔÔÔLatin capital letter O with circumflex
213 ÕÕÕLatin capital letter O with tilde
214 ÖÖÖLatin capital letter O with diaeresis
215 ×××multiplication sign
216 ØØØLatin capital letter O with stroke
217 ÙÙÙLatin capital letter U with grave
218 ÚÚÚLatin capital letter U with acute
219 ÛÛÛLatin capital letter U with circumflex
220 ÜÜÜLatin capital letter U with diaeresis
221 ÝÝÝLatin capital letter Y with acute
222 ÞÞÞLatin capital letter Thorn
223 ßßßLatin small letter sharp s
224 àààLatin small letter a with grave
225 áááLatin small letter a with acute
226 âââLatin small letter a with circumflex
227 ãããLatin small letter a with tilde
228 äääLatin small letter a with diaeresis
229 åååLatin small letter a with ring above
230 æææLatin small letter ae
231 çççLatin small letter c with cedilla
232 èèèLatin small letter e with grave
233 éééLatin small letter e with acute
234 êêêLatin small letter e with circumflex
235 ëëëLatin small letter e with diaeresis
236 ìììLatin small letter i with grave
237 íííLatin small letter i with acute
238 îîîLatin small letter i with circumflex
239 ïïïLatin small letter i with diaeresis
240 ðððLatin small letter eth
241 ñññLatin small letter n with tilde
242 òòòLatin small letter o with grave
243 óóóLatin small letter o with acute
244 ôôôLatin small letter o with circumflex
245 õõõLatin small letter o with tilde
246 öööLatin small letter o with diaeresis
247 ÷÷÷division sign
248 øøøLatin small letter o with stroke
249 ùùùLatin small letter u with grave
250 úúúLatin small letter u with acute
251 ûûûLatin small letter with circumflex
252 üüüLatin small letter u with diaeresis
253 ýýýLatin small letter y with acute
254 þþþLatin small letter thorn
255 ÿÿÿLatin small letter y with diaeresis

Font Properties

font: -- for shorthand
font-family:
font-feature-setting:
@font-feature-values:
font-kerning:
font-language-override:
font-synthesis:
font-variant-alternates:
font-variant-caps:
font-variant-east-asian:
font-variant-ligatures:
font-variant-numeric:
font-variant-position:
font-size:
font-style:
font-variant:
font-weight:
@font-face:
font-size-adjust:
font-stretch:

Text Decoration Properties

text-decoration:
text-decoration-color:
text-decoration-line:
text-decoration-style:
text-shadow:
text-underline-position:

Text Properties

hanging-punctuation:
hyphens:
letter-spacing:
line-break:
line-height:
overflow-wrap:
tab-size:
text-align:
text-align-last:
text-indent:
text-justify:
text-transform:
white-space:
word-break:
word-spacing:
word-wrap:

Back to Top


bin counter C06D

-------------------- Next Lesson


Copyright © 2011 - Alain Lareau
All Rights Reserved unless with Writen Request.
alainelj@yahoo.com this page C06D
https://metaphorman.tripod.com/000/006.html