Basic HTML Part 1

HTML is an acronym and stands for Hyper Text Markup Language. It is the most basic building block of websites.  HTML is used to organize and display information on a web page, and utilizes tags to tell the web browser how to display the content.

HTML can format headings, paragraphs, lists and tables. It can also display images and create hyperlinks to other web pages.

The following post will cover some basic HTML tags that may help you build better web pages with clean and accessible code.

Before you get started there are a couple of things you will need.

  • Your favorite web browser (Internet Explorer, Firefox or Safari)
  • A simple text editor like Notepad for Windows users or TexEdit on a Mac.

Getting started the <html> Tag

Open your text editor. The first thing you will need to do is define the document as an html web page. Simply type the following

<html>
</html>

The <html> opening tag tells the web browser that this is the beginning of a HTML document. The </html> closing tag tells the browser that this is the end of the HTML document.

Note: all tags must open with ‘<’ and close with ‘>’. Closing tags must include the ‘/’.

Opening and closing tags are important. For a web browser to render your page elements correctly the opening and closing tags must be preset.

<head> & <title> Tags

In your text editor type the following between the <html> tags.

<html>

<head>
<title>Basic HTML Exercise</title>
</head>

</html>

The <head> tags define an area of the html document where information is provided to the web browser about the document but is not rendered on the screen. Head information can include the page title, description and links to other documents like style sheets or program scripts. For now, let’s stick to adding a <title> to the page.

Using your text editor, save your html document. Use “Save As” and title your document “index.html” It is important to include the “.html” file extension. Also, save the document to your desktop to find it easily later.

saveas1

Save the document as a .html file so web browsers can read it.

Now, open your web browser and select File > Open. Find the “index” file on the desktop and open it. You should see a blank browser window with the title “Basic HTML Exercise”.

blank

Note the title in the top left of the browser window.

<body> Tag

In your text editor, after the </head> tag type the following

………
</head>

<body>

</body>
………

The <body> tag tells the browser that this area of the document will contain content that is to be rendered on the screen. Try typing the following between the <body> tags.

<body>
Basic HTML Exercise
</body>

Save your work, then open or refresh the document in your web browser. The text now appears on webpage.

textonpage

The text is rendered with the browser default font and size.

Headers and Paragraphs

In traditional documents information is organized into paragraphs and some paragraphs have a header that describes the subject of the paragraph.

In your text editor type the following in place of the “Basic HTML Exercise“ text.

<h1>Basic HTML Exercise</h1>
<p> HTML is an acronym and stands for Hyper Text Markup Language. It is the
most basic building block of websites.  HTML is used to organize and display
information on a web page, and utilizes tags to tell the web browser how to
display the content.</p>
<p> HTML can format heading, paragraphs, lists and tables. It can also
display images and create hyperlinks to other web pages.</p>

Save your work, then open or refresh the document in your web browser.

headerandparagraph

The </h1> and </p> tags add some organization to the text.

The <h1> tag makes the text is surrounds large and bold. This is useful for page titles or paragraph headings. The heading tag comes in several flavors <h2>, <h3>, <h4>, <h5> and <h6>. With each higher number the heading becomes smaller.

Heading 1 <h1>

Heading 2 <h2>

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>
Heading 6 <h6>

The <p> tag defines the text it surrounds as a paragraph and any following paragraph or header text is separated by a browser emulation of a carriage return.

In Part 2 of the Basic HTML Exercise you will be introduced to some more formatting and styling tags as well as create an ordered and unordered list.

Remember. Always close your tags!