Technologies

HTML

Hypertext Markup Language. The publising language of the World Wide Web used to create and design websites. HTML is a standard text file with specific tags that a browser reads and interprets into a webpage. HTML is an international standard, the specification for which is maintained by the World Wide Web Consortium. The current version of the HTML specification is HTML 4.01.

You are here to learn the basics of HTML and create your first web pages. Let's start simplfying an HTML:

An HTML file is a text file containing markup tags
These tags (<>) tell the browser such as Internet Explorer how to display the page
An HTML file must have an .htm or .html file extension

A text editor is needed to create HTML files, so we open notepad, if you are running Windows. If using Mac, start SimpleText. (Use "plain text" preferences in these text editors as your html files won't probably work)

TYPE IN THE FOLLOWING TEXT:

<html>
<head>
<title>My Homepage </title>
</head>
<body>
This is my first website <b>This text is bold</b>
</body>
</html>

SAVE THE FILE IN A DIRECTORY AS "index.html"

You'll notice that the file you saved has the icon of your default browser. Open it. The browser displays the page.

NOW WE EXPLAIN WHAT HAPPENS HERE:

The first tag is <html>, which tells your browser that this is the start of an HTML document. The last tag in your document is </html>, which also tells your browser that this is the end.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.

Let's move on . . .

If you observed carefully:

HTML tags are surrounded by the two characters < and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and </b>
The first tag in a pair is the start tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>

REMEBER THE HTML EXAMPLE FROM THE PREVIOUS PAGE:

<html>
<head>
<title>My Homepage </title>
</head>
<body>
This is my first website <b>This text is bold</b>
</body>
</html>

THIS IS AN HTML ELEMENT:

The HTML element starts with a start tag: <b>
The content of the HTML element is: This text is bold
The HTML element ends with an end tag: </b>

The purpose of the <b> tag is to define an HTML element that should be displayed as bold.

THIS IS ALSO AN HTML ELEMENT:

<body>
This is my first website <b>This text is bold</b>
</body>

This HTML element starts with the start tag <body>, and ends with the end tag </body>.

The purpose of the <body> tag is to define the HTML element that contains the body of the HTML document.

NOW LET US INTRODUCE YOU TO TAG ATTRIBUTES:

Tags have attributes. Attributes can provide additional information about the HTML elements on your page.

This tag defines the body element of your HTML page: <body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">.

This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">

Attributes always come in name/value pairs like this: name="value".

Attributes are always added to the start tag of an HTML element.

Quote Styles, "red" or 'red'?
Attribute values should always be enclosed in quotes. Double style quotes are the most common, but single style quotes are also allowed.

In some rare situations, like when the attribute value itself contains quotes, it is necessary to use single quotes:

Example: name='John "ShotGun" Nelson'

Next, we have headings

Headings are defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>

HTML AUTOMATICALLY ADDS AN EXTRA BLANK LINE BEFORE AND AFTER A HEADING

Then we have paragraphs

Paragraphs are defined with the <p> tag.

<p>This is a paragraph</p>
<p>This is another paragraph</p>

HTML AUTOMATICALLY ADDS AN EXTRA BLANK LINE BEFORE AND AFTER A PARAGRAPH

Line Breaks

The <br> tag is used when you want to end a line, but don't want to start a new paragraph. The <br> tag forces a line break wherever you place it.

<p>This <br> is a para<br>graph with line breaks</p>

The <br> tag is an empty tag. It has no closing tag.

Let's summarize what we have learned thus far:

BASIC HTML TAGS ARE:

<html> Defines an HTML document
<body> Defines the document's body
<h1> to <h6> Defines header 1 to header 6
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a horizontal rule