HTML Basics

 

What is Hyper Text Markup Language (HTML)?

 

HTML (Hyper Text Markup Language) is the code behind web pages and is what your browser uses to display and format different elements like text, images, hyperlinks and forms in a web page. The fact that it is hyper just means that it is not linear, and you can go to other pages by clicking on links. In this course we’ll be learning XHTML (Extendible HTML) coding which is a stricter and cleaner version of HTML 4.01. HTML is the language that allows us to define the content of a web page and CSS is a series of coding to format or style a web page.

 

What are Tags?

 

HTML consists of a series of codes denoted by angle brackets like <tag> named tags. These tags are basically a series of simple commands that tell browsers how to define a web page. Web pages are text documents which are saved as an html file, and viewed through a web browser (Internet Explorer, Safari, Chrome, Firefox, etc.). In order to apply a tag to a web page content, you simply wrap the proper tag around that part of the text:

 

Syntax<tag>type your text here!</tag>

 

Creating your first HTML page

 

  1. Open the "Notepad" program on your PC computer
  2. Type the following codes and go to: File > Save As
  3. Type example1.html in the File Name area and click “Save”
  4. Save the file on your desktop

 

<!doctype html>
<html>

<head>

<title>My first web page</title>

</head>

 

<body>
Hello there!

</body>
</html>

 

Now go to the desktop and locate the example1.html file and double click it to run it. As the result your computer default browser will open the page with one line showing:

 

Hello there!  

 

HTML Essential Tags

 

<html>, <head>, <title> and <body> tags are essential for any html page. These tags must be typed and closed as shown in the example above.

 

Here's the explanation of each tag:


Tag

Purpose

<!doctype html>

This declaration helps the browser to display a web page correctly.

<html>

This tag tells the browser that the Notepad document is a web page and not a text document.

<head>

This tag contains information that is not viewed in your web page.

<title>

The content of the <title> tag which resides within the <head> tag is displayed at the very top in the browser's title bar and the bookmarks.

<body>

The area between <body> and </body> is where you put all the elements of your web page (such as text, paragraph, heading text, hyperlinks, images, Flash movies, and tables).

 

Closing Tags

 

In the example above, you probably noticed that all commands have an opening and a closing tag, and the content of the tag is placed in between them. You'll also notice that the closing tag is slightly different to the opening tag. The closing tag contains a forward slash “/”. This tells the browser to close the previous tag with the same code. If you don’t close a tag, the HTML command will be applied to the web page content from that point forward. For instance, if you introduce the bold tag <b> somewhere in the content but don’t close it, all the text content from that point forward will be in bold typeface.

 

Single Tag Exceptions:  
The following tags are single tags which do not need closing tags.

 

<br>
<hr>
<img>
<meta>

 

Code HTML in lowercase 

 

Correct: <head>                  Incorrect: <HEAD>

 

Notes:

  • HTML documents must be text only and saved with html extension
  • Close all your tags right away so that you don’t forget
  • Ensure proper nesting (we’ll talk about this later)
  • Type tags in lowercase
  • Put attribute values in quotes (we’ll talk about this later)
  • If you can't see an element showing in the browser, check to ensure you have closed all the tag. That’s usually the usual suspect. 

 

Buy "Digest Web Design" PDF Book

 

All the information on this website is also provided in a PDF book for only $30.
Click here to buy.

 

<<    Previous Page                                                                    Next Page    >>