Introduction to HTML

Introduction to HTML

Budding Website developers need to know three languages: HTML, CSS and JavaScript. This is your introduction to the first of those languages: HTML

A Minimal Website

We are about to build a simple website comprising a single page of HTML. The  following four steps will create a web page with your text editor:

  1. Open Notepad (PC)

Windows 8 or later: Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

  1. Write some HTML
<!DOCTYPE html>
 <html>
 <body>
 <h1>This is a Heading</h1>
 <p>This is a paragraph.</p>
 </body>
 </html>
  1. Save the HTML page

File > Save as in the Notepad menu.

Name the file “index01.html” and set the encoding to UTF-8 (which is the preferred encoding for HTML files) and save the file in a specific directory, reserved for your website’s experimental HTML pages. Folder “MyWebPages/HTML” is suggested.

  1. View the HTML Page in Your Browser

Double click on the file, or right-click – and choose “Open with” and select your preferred browser).

The result will be two lines of text:

This is a Heading
This is a paragraph

The fonts and styles of the two lines will be the defaults embedded within your particular browser since our html page did not explicitly set them.

You have not merely created a simple Web page here, you have also potentially created a complete website.

On an actual Website this single html page  would be called index.htm or index.html. The most boring Website on the planet perhaps?  Nevertheless; this single file is a complete website in its own right conforming entirely to the HTML5 specification. The index.html page of a website is called the default web page.

Default Web Page

For the time being, you are learning HTML by playing with .html files but you should keep in mind that your goal is to build a real Website. On your future Website,  each web page will exist as a separate file; for example, your “About Us” page may be saved as “about.html” and your “Contact Us” page may be “contact.html”.

Your site will consist of these .html documents. When someone visits the website, they may do so without explicitly specifying one of these specific files in the address. For example: “http://mywebsite.com”; this URL specifies the domain mywebsite.com, but there is no specific file listed. This is what happens whenever anyone goes to a URL specified in an advertisement. They are basically going to the homepage of the site, but they have not requested any specific page.

Even though there is no page listed in the URL, the web server still needs to deliver a page for this request so that the browser has something to display. The file delivered will be the default page for that directory. On most web servers, the default page in a directory is named index.html.

In essence, when you go to a URL without specifying a specific file, the server looks for a default file and displays that automatically. Essentially, when you request the URL:  “http://mywebsite.com”, it is handled as though you had requested the  URL:  “http://mywebsite.com/index.htm”

That is why we are saving our experimental pages as “index##.htm”. Eventually, one of these experimental HTML files will become the home page of a real live Website and it will be called  “index.html

Now lets learn a bit more about HTML Elements and Attributes in Minimal Website 02.

Eric Pickstone