Learn how to write HTML - lesson 4

Remember, save your notepad and refresh the html page (MyPage.html) on your computer to see the latest changes!!!

I don't think I need to say anything more about font size!!!!
We don't always want plain old boring fonts. You can select what font style you want to use quite easily. You can add this to your style tag as well. Let's say you like this font. This is Comic Sans, and you use it by typing
"<span style = "font-family:'comic sans ms';">".

To add it to the style tag, you would type "<span style = "color:red;font-family:'comic sans ms';">".
If you have the size as well, it would look like this: "<span style = "color:red;font-size:14px;font-family:'comic sans ms';">".

As not all computers have the same fonts installed, if someone goes to your site who doesn't have the font you choose then the font will be displayed as the default (standard) font. The way around this one is to choose several fonts in your font face tag.For instance, if the font I want to use on my page is BRUSH SCRIPT MT but I know not all computer users will have that font installed and I don't want them to view the page in a plain font, I will choose a second oneto use for those that don't have it. As a second choice, I want ALGERIAN. What you do is put both in your font face tag, and the computer will display the font in the first style that is listed. If that font isn't installed on the computer, thenit looks for the second one. How you would type this is
<span style = "font-family:'BRUSH SCRIPT MT', ALGERIAN;">

Remember to use "</span>" at the end of the section you want to format.

Choose as many as you like, the surfer's computer will use the first style it comes across that is installed on that computer.

Stick to common ones - Arial, Verdana, Georgia, Times New Roman - and you'll suit most browsers without any extra work. Or do what we did above with BRUSH SCRIPT MT and ALGERIAN: list a couple of fallbacks, so if a visitor's computer doesn't have your first choice, it just moves down the list.


To make your text bold, add font-weight:bold; to the style attribute, the same way you've been doing with colour and font. (You'll also see the shorthand tag <b> used for this around the web - same result, but we'll stick with the style attribute here to keep things consistent with everything else you've learned.)

• To make this part of the sentence bold it would look like this:
  
  "To <span style = "font-weight:bold;">make this part of the sentence bold</span> it would look like this."
  
  The same goes with italics. The tag is "<span style = "font-style:italic;">". Remember you need to "close" the tag with "</span>" when you've finished the section you want in italics, the same as all tags.
  
  
• To type this part of the sentence with italics, it would look like this:
  
  "To <span style = "font-style:italic;">type this part of the sentence with italics</span> it would look like this."
  
  
• To use bold and italics at the same time, you would type it like this:
  
  <span style = "font-weight:bold;font-style:italic;">To use bold and italics at the same time, you would type it like this:</span>

Underlining uses the same theory as bold and italic text. You enclose the area you want underlined with a container which directs the text to be underlined, like this:

The <span style = "text-decoration:underline;">text between the tags</span> is underlined

<span style = "text-decoration:underline;font-weight:bold;">...and this is how you use the text-decoration and font-weight properties to format your text...</span>

Pretty simple? I thought so too!!

A quick aside - <b> and <i> (or the style attribute versions you just used) only change how text *looks*. If the bold or italic actually matters to the meaning of the sentence - a genuine warning, or a word you really want to emphasise - use <strong> and <em> instead. They look the same by default, but screen readers announce them differently, and search engines treat them as a small signal about what actually matters on the page. Good habit to get into early!