Getting Started

 Introduction

Welcome to Web Design. This tutorial is designed to guide you through the process of learning HTML (HyperText Markup Language) to create web pages.

HTML is a structured code, combining text with tags used to format the text. Every web page has certain aspects that define its structure. The following HTML code demonstrates the basic structure of a web page, including the two main sections: the heading and the body. These are marked with the <HEAD>and <BODY> tags.

Example 1 
<html>
<head>
    <title>My Web Page</title>
</head>
<body>
    <p>This text appears on the web page.</p>
</body>
</html>

There are a number of tags that can be inserted in your document to change the formatting of the words. Most tags come in pairs; there must be a start tag (e.g. <B>) to begin the formatting and an end tag (e.g. </B>) to stop.

In Example 1, the page begins and ends with the <HTML> tag. This tells the browser (like Internet Explorer) that the document is designed for the web. Then, the <HEAD> tag begins the heading. In this page, the heading only contains the title of the page, defined with the <TITLE> tag. Note that the title does not appear in the web page itself. Rather, it is displayed in the title bar of Internet Explorer at the top of the window. The title of this page of instructions is “Web Design” — can you find it?

Practice:

  1. In your documents, create a folder called Web Design.
  2. Inside this folder, create a subfolder called practice.
  3. Open Notepad by clicking on Start, Programs, Accessories.
  4. Type the code from Example 1. Be sure to capitalize all tags and indent as shown.
  5. Save the file in your practice folder with the name first.html.
  6. Find the new file you saved through My Documents and view it in Internet Explorer.

Formatting Text

There are several simple tags that allow you to mark text as bold, italicized, underlined, or strikeout. These tags are used in the following example.

Example 2 
...
<body>
    <p>
    This text is <b>bold</b>.
    This text is <i>italicized</i>.
    This text is <u>underlined</u>.
    This text has <s>strikeout</s> formatting.
    </p>
</body>
</html>

Pay attention to how the start and end tags match each other. Any tag that is started must be ended as well.

Practice:

  1. Open your first.html file in Internet Explorer.
  2. From the View menu, choose Source. This will open the file in Notepad for editing.
  3. Edit the single line of text in the body to look like Example 2.
  4. Save the modified file and close Notepad.
  5. Click Refresh in Internet Explorer to see the changes you have made.

You will notice that in the above practice activity, your page may not appear as expected. Web browsers automatically wrap text as best as it fits on the screen. Instead of the four lines of text appearing separately, they are all combined into a single paragraph.

Line Breaks

To force a line of text to begin on a new line, you can use the <BR> tag. This line break tag forces the text that follows to begin on a new line. This is necessary because the browser ignores whitespace (spaces and new lines) in your HTML source file. Note that the <BR> tag does not require an end tag.

Practice:

  1. Edit your first.html file to include a line break tag after each of the lines of text in the body.
  2. Save the modified file and refresh to see the changes you have made.

Headings

HTML has six levels of headings. The tags are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>. Generally speaking, you would use <h1> (a large text heading) for the main title of a page, <h2> for a subtitle, and so on. <h6> is no bigger than regular text.

Practice:

  1. Add a level-1 heading before the other rows in the body of first.html:
    <h1>Text Formatting</h1>
  2. Save the modified file and refresh to see the changes you have made.

Paragraphs

Regular body text should always be divided into paragraphs using the <P> tag. This marks the beginning and end of each paragraph, telling the text to stay together and be spaced appropriately. In Example 2, the text could be separated into lines by marking each line as a separate paragraph, as shown below:

Example 3 
...
<body>
    <p>This text is <b>bold</b>.</p>
    <p>This text is <i>italicized</i>.</p>
    <p>This text is <u>underlined</u>.</p>
    <p>This text has <s>strikeout</s> formatting.</p>
</body>
</html>

Horizontal Rule

The easiest way to divide your page into sections is using a horizontal rule, which is basically a line across your page. The tag is <hr>, and like <br>, it does not require an end tag.

Practice:

  1. Add a horizontal rule after the level-1 heading in first.html.
  2. Save the modified file and refresh to see the changes you have made.