1.2 Adding Content
Flashy graphics, award winning art and beautiful page layouts aside, the most important part of any web page is the content, the text, the actual information that people require desperately enough to search the Internet for. It is this content that the search engines such as Google will take a record of (or index) to present to such visitors. Before we add the content to our web page, whatever that may be, another tag is required first: <title>.
The title tag gives the web page a title that will appear in the top left of a browser bar, like this:
This tag and its contents are written into the head section of a webpage and will not appear on the actual page itself, just the browser bar. Now then, to add content to the page that will be displayed on screen, tags are added into the body section of the HTML document (i.e. between the body tags). The most commonly used content tag is the paragraph tag <p>. So putting all of this together:
<html> <head> <title>My very first website</title> </head> <body> <p>Hello World!!!</p> </body> </html>
Now we are getting a little closer to building a real website. Again all tags were closed in the same order in which they were opened, and some web designers like to indent their code like above because they maintain it makes the code easier to read. Personally I find it harder to read and so don't indent mine, and it actually makes no difference to the finished result anyway.
Copy the above code (highlight it using the left mouse button and dragging the mouse, and then do a right button click and select copy). Open Microsoft Notepad and then paste it in (right button again). In Notepad, click "File" in the top left part of the menu bar, then choose "Save as..." from the options in the pull-down menu that appears (see left). A dialogue box will then appear (see below).
From this dialogue box select "All Files" in the "Save as type" box. Then enter index.html into the File name box and then click "Save" to save your document. The first page of any website is usually called index, and the .html extension indicates that it is an HTML document (.htm can also be used but be consistent).
Open your web browser (Internet Explorer, Mozilla Firefox etc - see below). In the top left of the toolbar menu choose "File" then "Open". Then click "Browse" in the box that appears. Finally, find your saved HTML document and click "Open". And there you go, there on the screen is your first simple website!
Although this is an incredibly basic example of a website, and is no doubt rather dull and depressing in its simplicity, this is how most static websites actually work. In order to progress from this simple start and build better looking web pages with more content, all you need to do is:
The first part mentioned above can be dealt with in this HTML Tutorial. The second part will be dealt with later in the CSS Tutorial. Keep going!