Basic of HTML

In this tutorial you will learn the basics of HTML. This tutorial contains online editor which you can edit and run the codes to view the results. Try to solve the exercise by editing the codes in the online editor. This tutorial is not meant to be comprehensive. For more information please refer to the slide presentation available on eLearn@USM, reference book or the internet.

Headings and Paragraphs

HTML has six levels of headings. Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading or main headings. <h6> defines the least important heading. Browsers display the headings at different sizes; <h1> is the largest and <h6> is the smallest. A paragraph is created by surrounding the words with an opening <p> tag and closing </p> tag

Exercise

Create an HTML document that contains the following text. Use h3 for the title (the first sentence of text), p for text (the second and third paragraphs of text).

What is computer science?
Computer Science is the study of computers and computational systems. Unlike electrical and computer engineers, computer scientists deal mostly with software and software systems; this includes their theory, design, development, and application.
Principal areas of study within Computer Science include artificial intelligence, computer systems and networks, security, database systems, human computer interaction, vision and graphics, numerical analysis, programming languages, software engineering, bioinformatics and theory of computing.


Bold and Italic

Texts can be set to bold and italic by enclosing them with tags <b> and <i>. The <b> can be used to represent key words in a paragraph while <i> can be used to represent technical terms or foreign words. When the browser comes across two or more spaces next to each other, it only displays one space. This is known as white space collapsing. Notice white spaces in the following example.

Exercise

Edit the code that you have written from the above exercise as follows.

1. Bold "computer science".
2. Italic the words "deal mostly ... software systems".


Divisions, Line Breaks and Horizontal Rules

The HTML Division element <> is the generic container for flow content. It can be used to divide the content of HTML document into sections. However, it has no effect on the content or layout until styled using CSS (you will learn about styling later). In the example, the id attribute is specified to give unique id to the divisions.

A horizontal rule (line) can be added to break sections. To add a horizontal rule use the <hr/> tag. Browsers will automatically show new paragraph or heading on a new line. To add a line break inside the middle of a paragraph, use the line break tag <br/>.

Exercise

Edit the code that you have written from the above exercise as follows.

1. Add a line between the title and the paragraphs.
2. Use <div> tag to divide the paragraphs. Give unique id values to the divisions.


Links and Images

HTML links allow you to move from one web page to another. Links are defined with the <a> tag. The link's destination is specified in the href attribute. Attributes are used to provide additional information about HTML elements. Images can improve the design and the appearance of a web page. Images are defined with <img> tag. The following example shows how to reference (or link to) the sections of the page.

Exercise

Edit the code that you have written from the above exercise as follows.

1. Insert a USM logo before the title. Set the width of the logo to 100px.
2. Add a menu after the logo. The menu contains two links, one link to the first paragraph and the other one link to the second paragraph.