Basic HTML: I
Here's a short introduction to writing HTML by hand. For the sake of simplicity, it disregards the distinction between document head and document body. This distinction will be introduced in the second part.
- HTML is the source code which your browser requests from a server and then renders on the monitor so you can see the page. Your browser also allows you to look at the source itself. Assuming that you use Internet Explorer as your browser, do this:
You may be startled by this strange-looking text with all the angle brackets (this is a left-pointing angle bracket: <, this is a right-pointing angle-bracket: >). However: don’t panic. - Let’s take this step by step. To write HTML, you first need a text editor. MS Word is not suitable to write HTML, it’s far too big. You need a smaller program, and MS Notepad will do nicely. To open Notepad, click the "Start" button in the bottom left corner of your screen, then select Programs | Accessories | Notepad. You can also click on Notpad and drag it onto your desktop, so you can open it with a single click next time.
- Open a new document in Notepad, then write:
<html>
This is the opening html tag. A browser that reads this tag understands that the tag marks the beginning of an html document. The opening html tag has a partner, the closing html tag, which looks like this:
</html>
Insert a few blank lines after the opening html tag and then add the closing html tag. Whenever a browser comes across the closing html tag, it understands that the html document ends here. In other words: everything you want to put on a web page has to appear between the opening and the closing html tag. - What shall we put on the page? Well, first we need a heading. Headings need heading tags. The most important of these heading tags is the first-level heading tag, which looks like this:
<h1>
That’s the opening tag. The closing tag looks like this:
</h1>
Now, use both of these tags and write your title below the opening html tag. For example:
<h1>How to Find Things on the Web</h1>
- In addition to the heading, you need text. Text comes in paragraphs, and for paragraphs there’s the paragraph tag, which opens like this:
<p>
and closes like this:
</p>
Put these two tags around a paragraph:
<p>Search engines make it easy to find things on the Web. The best and most popular of these engines is google.</p>
- Next, you need to know the most important tag, the tag without which the web would not work: the link tag. The opening link tag looks like this:
<a href="URL">
the closing link tag looks like this:
</a>
Everything you write between the opening and the closing link tag will appear as hyperlinked text. In the opening tag, be careful to insert the full URL you want to link to, including the "http://" part. So, if you want to hyperlink the word "google" in the above example, here’s what your code will look like:
<p>Search engines make it easy to find things on the Web. The best and most popular of these engines is <a href="http://www.google.com">google</a>.</p>
- Let’s pull all of the above together:
<html>
<h1>How to Find Things on the Web</h1>
<p>Search engines make it easy to find things on the Web. The best and most popular of these engines is <a href="http://www.google.com">google</a>.</p>
</html>
- This is a complete html page. To save it, choose a name and add the ".html" extension. For example: websearch.html.
- Open your new file in a web browser to see if it works.