Good Typography is important for every webpage.
When your visitor reads your site they want the text to be presented in a way that is easy to read and is highlighted or styled to bring emphasis and guide the reader.
In lesson 2 we saw that there are basic mandatory tags that must be included in every webpage. As we continue learning we will start off with a HTML file template that contains those basic tags.
We know that within the <body> tag is where we will place all of our text and links and image references but before we get started with laying out a fancy design this lesson will cover many of the ways that you can use basic HTML to be creative. You should also remember that we are learning basic HTML in these beginning lessons and in later ones we will cover the use of CSS style sheets that can perform many of the same tasks and many more advanced formatting commands.
Ok lets start with adding a line of text to our template file within the Body Area.
Code view is on the left and what you see in the browser is on the right.
| <html> <head> <title>Lesson 3</title> </head> <body>This is a line of text that we are adding to our html file. As you can see it is pretty plain. </body> |
This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
.
.
Now lets add a Headline for our Page
As you can see the <H1> header tag makes the font bigger, bold and it also forces a line break between the Headline and the paragraph of text we had already written.
| <html> <head> <title>Lesson 3</title> </head> <body> <h1>This is Lesson 3</h1>This is a line of text that we are adding to our html file. As you can see it is pretty plain. </body> |
This is Lesson 3This is a line of text that we are adding to our html file. As you can see it is pretty plain. |
Headline Tags <h1> have a starting tag and an ending tag <h1>stuff</h1> You must always close your tags or the rest of the page will pickup the formatting until the tag is closed or you reach the end of the page.
Headline Tags come in sizes 1 through 6 and the strange thing is the lower the number the larger the Headline. To use a different size you must open and close your text with the number included in the closing tag. Here are some examples:
<h1>HEADLINE</h1>
<h2>HEADLINE</h2>
<h4>HEADLINE</h4>
<h6>HEADLINE</h6>
.
.
But what if we just want to make something within our paragraph Bold and we don’t want a line break that a <H1> tag will force? Then we can use the <strong> or <b> bold tags
| <html> <head> <title>Lesson 3</title> </head> <body><h1>This is Lesson 3</h1> This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is strong>Bold</strong> </body> |
This is Lesson 3This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is Bold |
.
.
To make a Word Italic we can use the <em> tag
| <html> <head> <title>Lesson 3</title> </head> <body><h1>This is Lesson 3</h1> This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is <strong>Bold</strong> <em>This line is Italic</em> </body> |
This is Lesson 3This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is Bold This line is Italic |
.
.
To underline a word we can use the <u> tag
| <html> <head> <title>Lesson 3</title> </head> <body><h1>This is Lesson 3</h1> This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is strong>Bold</strong> <em>This line is Italic</em> This word is <u>Underlined</u> </body> |
This is Lesson 3This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is Bold This line is Italic This word is Underlined |
.
.
To change font face, color or size of a word we can use the <font> tag
| <html> <head> <title>Lesson 3</title> </head> <body><h1>This is Lesson 3</h1> This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is strong>Bold</strong> <em>This line is Italic</em> This word is <u>Underlined</u> This word is <font color=”ffff00″>blue</font> </body> |
This is Lesson 3This is a line of text that we are adding to our html file. As you can see it is pretty plain. This word is Bold This line is Italic This word is Underlined This word is blue |
.
.
Review
Lets cover some of the ways that you can add styling to your text in HTML.
<H> headline tags they are used for headlines that will be separate from the other text and include a forced line break after the headline tag.
<strong> tags make your fonts bold
<em> tags make your words italic
<font> tags can set color font-family and size
NOTE
It is important to note that the font tag has been deprecated in favor of CSS Styles even so you can use the font tag to insert your local styles or replace it with a <span> tag.
In CSS which we will learn later a <span> tag can be used to style fonts and would look something like this.
<span style=”font-family:times;font-size:16pt;color:#0000ff;text-decoration:underline”>this line of text is blue 16 point high underline in Times Font </span>
this line of text is blue 16 point high underline in Times Font
We will add to our understanding of web design in stages.
More complex tasks will come in manipulation of divs for layout and menu systems but it is important to understand the use of tags and elements before you begin styling them.
Complex tasks are nothing more then a series of easy ones.
For instance baking a cake when you never have before can seem to be complex but each step is pretty simple.
Measure the flour and sugar and water, add your baking powder and mix it up, set the oven to 350F, grease the pan and cook it for 30 minutes and in the end you endup with a cake.
Websites are the same… you learn how to style your fonts (just like measuring flour) and then you will understand that part when you begin making a menu system.
