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
<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?
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.
... <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.
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.
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.
HTML has six levels of headings. The tags are
<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.
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:
... <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>
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.