|
|
To keep things a little cleaner I am only going to write what is in the <BODY> tags. I will omit the <HTML>, <HEAD> & <TITLE> tags. Needless to say, keep these in your document. |
 This is my page |
Open your page1.html file in Notepad. Save it as page2.html. The text changes you make today will all be saved as page2. Now open it in your Browser, to watch the changes as you change your code during the lesson. As you look at my screenshots, you can see that the TITLE has been changed to 'My big ole bad page!' Change yours too.
The first text tags we will use are B - Bold, I - Italic, U - underline.
We can use tags in combination if we want to.
<BODY>
Something really <I><B>cool</B></I>
</BODY>
|
Something really cool
|
<THIS><THAT></THIS></THAT> Overlapping tags.... bad
<THIS><THAT></THAT></THIS> Nested tags.... good
A very useful type of text effect is the mono-spaced font, or Typewriter Text.
<BODY>
<TT>Something really cool</TT>
</BODY>
|
Something really cool - the normal version Something really cool - the <TT> version |
Each letter uses the same amount of horizontal space.
| This is regular type -> |
iiiiiiiiii oooooooooo mmmmmmmmmm |
| This is monospaced type -> |
iiiiiiiiii oooooooooo mmmmmmmmmm |
We can change the font size too... It's pretty easy!
First add the <FONT> tags...
<BODY>
Something really <FONT>cool</FONT>
</BODY>
Then specify a SIZE attribute.
<BODY>
Something really <FONT SIZE=6>cool</FONT>
</BODY>
|
Something really cool
|
| teeny tiny | small | regular | extra medium | large | real big & | yelling! |
| 1 | 2 | 3 | 4 | 5 | 6 | 7 |
Two things I want to discuss now. First, a <TAG> tells the browser to do something. An ATTRIBUTE goes inside the <TAG> and tells the browser how to do it.
Second point is about defaults. As you probably know, the default value is a value that the browser assumes if you have not told it otherwise. A good example is the font size. The default font size is 3. If you say nothing it will be 3. If you make faces at your computer it will still be 3.Every browser has a default font setting- font name, size and color. Unless you have messed with it the default is Times New Roman 12pt(which translates into 3 for our purposes) and it's black. Now with Netscape 3.0 we can specify font names other than the defaults. Like ARIAL and COMIC SANS.
<BODY>
Something really <FONT FACE="ARIAL">cool</FONT>
</BODY>
The font will only display if your viewer has that font installed on their computer.
Let me repeat... If the person looking at the page doesn't have installed on their computer the font you specify, then they will only see the default font. So be very judicious in your use of fonts. Arial and Comic Sans MS are pretty widely distributed with Windows. So is Impact!. You can hedge your bets a little by specifying more than one font. (Yes! You can do that!). Just do one of these... <FONT FACE="ARIAL, HELVETICA, LUCIDA SANS">Hidee Ho</FONT>.
For lunkheads like me that might not understand that right away, here's what's happening- The browser looks for ARIAL. If it finds it, it uses it. If not, it goes on to HELVETICA. If it can't find that, it looks for LUCIDA SANS. And if it can't find that it uses the default font.You are used to using your collection of fonts in your Word Processing program.
Now I guess is a good time to yap a bit about syntax. You notice here and there I use quotation marks, these are important. You have no idea how many times I made a page and it was all screwed up... I mean all screwed up because of a single missing or misplaced quotation mark or a missing space or a missing greater than > sign . Someday we will be separated from this kind of coding, but for now we just have to be careful. Another thing is my use of CAPITAL LETTERS for most of my marking up. This is just personal preference. I find that the tags stand out more when using all caps. You could just as well use <font> instead of <FONT>. You can even use <fOnT> if that's what trips yer trigger.
Alright, back to the fun stuff.
You can change the font color if you like.<BODY>
Something really <FONT COLOR="#FF0000">cool</FONT>
</BODY>
We can, of course use more than one ATTRIBUTE in a <TAG>...
<BODY>
Something really <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT>
</BODY>
Oh boy we're on a roll now!
<BODY>
Something really <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">cool</FONT></B></I></U>
</BODY>
I feel the need to point out once again that multiple tags should be nested.
<TAG3><TAG2><TAG1>Hooha!</TAG1></TAG2></TAG3> It doesn't matter which tag is first. It's not like if you want to make something red and bold you have to do one or the other first. You can do them in any order you want. Such as..
<TAG2><TAG1><TAG3>Hooha!</TAG3></TAG1></TAG2> The fastest way to confuse the browser, not to mention yourself is to overlap the tags...
<TAG3><TAG2><TAG1>Hooha!</TAG3></TAG1></TAG2> (I couldn't think of a way to explain it so I hope the use of examples makes it clear.)
There! You now know just about everything that has to do with mainpulating the text in your document. You can now make Big red letters or small bold letters You can use other Fonts, or monospaced fonts.
You can even make a rollercoaster!Coding for the roller coaster uses font size from 4 to 7 then back down to 1. See if you can code it before you look at my source page.
The browser has 143 words which are recognised as the names of colors.
Extra stuff you may like to know I've written a neat HTML & JavaScript page called Colour that makes it easy (and kind of fun) to experiment with different color settings. Click on the name button to change the background, and see which font colours look good - and which ones are barely visible!
This is the code for the coloured greeting. Hullo Elizabeth
<BR><center><H1><FONT COLOR=navy>H</FONT><FONT COLOR=mediumblue>u</FONT><FONT COLOR=blue>l</FONT><FONT COLOR=royalblue>l</FONT><FONT COLOR=darkturquoise>o</FONT>
<FONT COLOR=turquoise>E</FONT><FONT COLOR=springgreen>l</FONT><FONT COLOR=lime>i</FONT><FONT COLOR=yellowgreen>z</FONT><FONT COLOR=darkkhaki>a</FONT><FONT COLOR=orange>b</FONT><FONT COLOR=tomato>e</FONT><FONT COLOR=orangered>t</FONT><FONT COLOR=red>h</FONT></H1></center>
Notice that all the letters for each word are written on one line. Your browser may require quote marks around each colour name. (Which the HTML language spells 'color'.)
|