Terminal

Intro to HTML

A web page is a file that ends in html (hyper-text markup language). A browser renders its contents into a web page.

HTML is the language of web sites. It it not a programming language because you cannot run loops and logic. It is what's known as a markup language. It's purpose is to define the structure of a website, not how it looks. How it looks is defined using style sheets (more of that later).

Elements of a web page are declared via opening and closing tags. For example, the web page title might be written as:

<title>Awesome Website</title>

HTML, Head and Body

All html files start and end with the <html></html> tag that tell a browser to expect to see html. Within the <html> block there are two others, the <head></head> and <body></body>

The <head> block contains things like the page title, links to external libraries that let you programme a web page, and meta data that does things like tell search engines what kind of content your website contains.

The <body> block contains the actual contents of the website, links, images, titles etc.

Hello Word

So the most basic website you can imagine would look like this:

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        Hello World
    </body>
</html>

Creating Your First HTML File

Since a web page is just a bunch of text that a browser uses to build a web page, we can use a simple text editor to create a basic web page.

The first page on a website is always called index.html

On a Mac, open the Text Editor (command-shift >> type text editor). On a PC, open notepad.

The Text Editor by default writes files in a format called Rich Text Format (.rtf). We don't want that, it's rubbish and browsers don't understand it. So step 1 is to tell the Text Editor to write in plane text.

Under the Format menu, select Make Plain Text

We can now past in our Hello World example

<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        Hello World
    </body>
</html>

Save the file somewhere easy to find but replace the .txt at the end of the file with .html. You will get a warning but click Use .html to save your first HTML file.

Navigate to the file in Finder and open it to see your first web page.

Extension: Explore what other HTML tags a browser can understand.

PreviousThe InternetNextBasic Elements

Last updated