A Simple Web Page

The simpliest web page

Right let's go straight in, launch TextEdit or NotePad to create a simple text file, cut & paste the below HTML into it, and then save it to your desktop as "index.html".

Though if you can't be bothered, here's one I prepared earlier.

HTML

<!DOCTYPE html>

      <html>

      <head>

        <title>Title of the Page</title>

      </head>

      <body>

        Lorem  ipsum dolor sit amet,

        consectetur adipiscing elit,

        sed do eiusmod tempor incididunt

        ut labore et dolore magna aliqua.

        Ut enim ad minim veniam, quis

        nostrud exercitation ullamco

        laboris nisi ut aliquip ex ea

        commodo consequat.

      </body>

      </html>

Then open it with a browser (double click should do it) and you should see something like this

Displayed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Now things to notice are

The browser tab/window should be called "Title of the Page".
Although the file is full of markup tags (e.g. <title>...</title>) and other stuff, only the text between the <body>...</body> tags is displayed.
The displayed text doesn't start new lines in the same place as the text in the html file - if you really want to force a new line you'll need to use a <br> tag, but I wouldn't advise it as it looks horrible when you make the browser window smaller.
And finally, if you're really paying attention you would have noticed that the double space on the first line between 'Lorem' and 'ipsum' has disappeared - another gotcha when rendering HTML is that multiple spaces are collapsed. Again you can get around this by using ' ' to force render a space (I just did in front of 'Again'), but try to avoid doing this.

The HTML tags used

`<!DOCTYPE html>`	this just tells the browser that it's loading an html file.
`<html>...</html>`	everything in between is html.
`<head>...</head>`	all sorts of stuff goes in here, but it never shows.
`<title>...</title>`	this sets the browser title.
`<body>...</body>`	this is where all the displayable stuff goes.

*If you're wondering what 'HTML' stands for, it's 'Hyper Text Markup Language', which makes a lot more sense if you remove the 'Hyper'.