Fonts in HTML - HTML Tutorial

Keep it Clean

When you are writing HTML, it is advised that you quickly develop an organised approach. You will be surprised how long an HTML document can become, therefore if you do not keep your HTML code cleam and organised, you can easily become lost in it. The examples below follow one such organised approach. You can also write notes in your HTML document that will not appear on the web page. This is done as follows:

HTML Font Settings

Text can be emphasised by bold, italics, underlined, or a combination of these. Again, you do this using tags, not forgetting the all important end tags. For bold text use  and , for text in italics use  and  and for underlined text use  and . The word or words that you want emphasised must be between these tags. Add the red text below to your work and, again, save then refresh.

HTML Paragraph

To create a paragraph of text the  and  tags are used. At this stage no font styles have been applied. Therefore if you are using Internet Explorer the default font is Times New Roman, whereas the Firefox default font is Arial.

HTML Font Settings

<html>

<body>

<h1>My First Web Page</h1>

I am going to build my first website using HTML.

The content of my website is expanding and the I am learning how to make a word bold or emphasise it in italics. I could use bold and italics

</body>

</html>

Your web page should now look like this Example

Here is an important issue for writing HTML work. Look at the order of the code to describe bold and italics. The Bold Start Tag is before the Italic Start Tag, whereas the Bold End Tag is after the Italic End Tag. If these are in the wrong order, it will not work.

Font Style

You are now in a position to choose a font that will look the same across the browsers. You can also choose font colours and sizes! There are a number of ways of achieving this but for now we will use the in-line method using the style code.

<html>

<body>

<h1>My First Web Page</h1>

I am going to build my first website using HTML.

The content of my website is expanding and the I am learning how to make a word bold or emphasise it in italics. I could use bold and italics

</body>

</html>

Your web page should now look like this Example.

Note that only the first line of text has changed colour and font. This is typical of using the in-line method of styling. For consistency throughout the page each paragraph would need the same in-line style code being added to the tag. This method can be cumbersome and an easier method is to use Cascading Style Sheets, which will be covered seperately. Against the font-family note that in this case there are two fonts chosen. The browser will display the first compatible font in this list.

HTML Paragraph Breaks

In the exmple above you will see that each line of text uses the  tags. This defines your website content in paragraphs. Should your need to insert more vertical whitespace between paragraphs, use the   tag.

>> Next - Tables in HTML >>

Summary of HTML Tips so far

Keep your work organised and follow a common methodology throughout.

Write notes in your code to remind yourself of where things are.

Use small letters throughout your HTML code.

Save your webpages using the .html file extension.

Refresh your browser to see the changes that you have made.

Ensure HTML tags are in the correct order.

Ensure HTML code is written in US English.

The front page of a website should be saved as 'index.html'.

Use percentage or the em method to define font sizes.

Use tags to create vertical whitespace.

Summary of HTML Tags

<a>		Anchor Tag for creating links.
<b>		Bold tag.
<br />		Break tag.
<body>		Designates the body of the web page. Must come after the </html> tag.
<h1>		Heading tag number from 1 to 6, with h1 having the largest font.
<html>		Designates the document as a web page.
<i>		Italics tag.
<p>		Paragraph tag.
style=		Used within the <p> tag to define font type, colour and size.
<u>		Underline tag.