Ukieweb

Class Notes

Notes for Students

HTML Headings & Text

In this section of the tutorial we will discuss different ways to display text on the web page. This will include headings, paragraphs, bold, italics, underline and new lines.

Headings

There are six different sizes of headings when writing HTML. The largest heading is a <h1> tag. The second largest heading is a <h2> tag and they continue to get smaller until the smallest heading which is a <h6> tag. As with many other tags the heading tags have an opening and closing tag. This would look something like:

<h1>My Heading</h1>

My Heading

Paragraphs

Adding text into a page is very simple, you just need to add the text you would like into the body of the page however this will not apply formatting to the text. You should use always try to use <p> tags to enclose your text in a paragraph.This will ensure that the paragraph has adequate spacing around itself.

<p>This is some text in a paragraph.</p>

This is some text in a paragraph.

Bold, Italics & Underline

We can change the text style by adding bold, italics and/or underline to our text. These tags are very simple to use and are often found inside the paragraph tags. The bold tag is simply <b> which will change the text inside to bold. The <i> tag will italicise text and the <u> will underline text. You can also combine tags to apply mutliple effects. This is shown below.

<b>Some bold text</b>
<i>Some italic text</i>
<u>Some underlined text</u>
<b><i>This is some italic, bold text.</i></b>
Some bold text
Some italic text
Some underlined text
This is some italic, bold text.

Line Breaks

You may have noticed that new line (pressing enter) inside code does not create a new line on the page. There is a special tag for line breaks that will achieve this. The line break tag is one of the few tags that does NOT have a closing tag.

<p>This paragraph will be split<br/>onto two lines.</p>

This paragraph will be split
onto two lines.

Activity

Below is an activity to test your HTML knowledge so far. Give it a try.

<html>
	<head>
		<title>Sample Page</title>
	</head>

	<body>

	</body>
</html>
Exercises
  1. Add the largest heading
  2. Add the second smallest heading
  3. Add a paragraph into the page
  4. Add some bold text to your paragraph
  5. Add some italic text to your paragraph
  6. Add some underlined text to your paragraph