Friday, October 17, 2008

Font faces, sizes, & colors

Last time I said that next we'd "learn how to put content onto your pages: writing code to change fonts and text sizes and text color and adding images to your pages, just by using html.", but I think I'll do images next time, okay? It is just a lot of material to cover. So let's get started!

First, go back into your .html file that you worked on last time. Remember that to get back to your notepad page so that you can make changes to your code, you first click on the internet explorer looking icon that is labeled as WhateverYouSavedItAs.html. When it is opened and you see your black page, right click anywhere on the black screen and click on "View Source". Voila! There is your notepad page again!

Ok, lets add content in between the <body> </body>. Add spaces between the opening and closing body tags simply by hitting the "enter" key a few times.

Great! Now we're going to play with font colors and text. The first thing that you should be aware of, is that not everyone has the cool fonts that you do on your computer. Your computer might be able to pull up "chiller" or "Bradley Hand ITC", but other people might not. The standard fonts that people have are: Arial, Times New Roman, Comic Sans MS, and most likely Verdana. You can add an alternative code if there is a text that you really want to use, but be sure to make allowances for others. For instance, if you really want Bradley Hand ITC, but arial will do in a pinch, write: <font face="Bradley Hand ITC, Arial">. Go ahead and try it, but let's make sure to specify a font size and color while we're at it. Let's put in <font face="Bradley Hand ITC, Arial size="9" color="#ffffff"> PUT SOME WRITING </font>

You listed the font that you wanted by telling it the "face" you wanted it to have, the "size" you wanted (I often don't write this one, except for a title), and the "color" that you wanted. With black as a background it forces us to choose a font color since default is black, and the default text simply will not show up on a black background.

You can play around with the text by going into microsoft word and picking out a text that you want to try out. Just remember that most of the fancy scripts will not show up, so always add an alternate like Arial, Times New Roman, Comic Sans MS.

If there is time when you need a specific font, say for a logo for your web business, or a header for your blog, you will need to make an image specifically using that font. I'll show you how to do that later, but I just wanted you to know.


One great thing about being able to change the code as you are working in a sentence is that you can <font color="#f70909"> call attention to some words</font> while leaving the rest alone.

You can <font size=+4> really make them stand out</font>

or <font size=-1> downplay them a bit</font> (this one didn't work well here, but it will on your .html page. Try it there, ok?)

You can also <b>bold a word</b>

<i>Use Italics</i>

<center>
Center something (this works for images, too!)
</center>

<strike>strike something out</strike>

<u>underline</u>

If you have a question about how to do a certain something with the fonts, just submit a question in the comments section & I'll find out and let you know, ok?

Steve, my dh, just commented and added that: <span style="background-color:yellow;">will highlight words</span>

That is all we'll do for today, but be sure to play around with it just a bit. It is one of the most basic codes you'll use.

Have a great day!

1 comment:

  1. This is really cool! Another effect you can do is highlighting. this is done by using the <span> tag around your text. For example:

    <span style="background-color:yellow;">This should be highlighted</span>

    Should Produce highlighted text

    ReplyDelete