HTML Basics


What is Hyper Text Markup Language (HTML)?


HTML 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.


What are Tags?

HTML consists of a series of codes denoted by angle brackets like: <tag>   These tags are basically a series of simple commands that tell browser 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, Firefox, etc.). In order to format the text you simply need to wrap the proper tag around the text.


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


Creating your first HTML page


  1. Open "Notepad" program. Start > Programs > Accessories > Notepad
  2. Type the following codes and go to: File > Save As
  3. Adjust “Save As Type” to “All files” and Encoding to UTF-8
  4. Type example.html in the File Name area and click “Save”


<!doctype html>


<title>My first web page</title>



Hello there!



Now go where you saved this file and double click to run it. As the result the Internet Explorer will open a page with one line showing: Hello there!


<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:



<!DOCTYPE html>

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


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


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


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.


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, it will format the entire rest of the web page. There are four exceptions to this rule.


Single Tag Exceptions:  
The following tags are single tags and don’t need closing tags.




UPPERCASE or lowercase?


Although most browsers will display your page regardless of the case you use, it's good practice to code in lowercase. This helps keep your code XML compliant and consistent with current and future web standards.


Correct: <head>                  Incorrect: <HEAD>

Please Keep in Mind that:


  • 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)
  • Keep all the tags in lowercase
  • Put attribute values in quotes (we’ll talk about this later)
  • If you can't see an element displayed in the browser, check that you have closed the tag and nested properly, or if there’s a syntax error. These are the usual suspects. 



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    >>