Your Own Page
"A computer is like an Old Testament god, with a lot of rules and no mercy." (Joseph Campbell)
Most web pages are created using HTML
HTML stands for Hyper Text Markup Language so a web/HTML file is a text file containing HTML MARKUP.
MARKUP is a method of telling a web browser how to display a page - which text is a header or what's a normal paragraph etc.
HYPERTEXT refers to the fact that you can link HTML pages together in such a way that you can jump form one page to the next.
You can create HTML pages using a text editor such as Notepad. Don't try and use a word processor such as Microsoft's Word. It isn't suitable.
Open your text editor and type (or copy 'n' paste) the following:
<html>
<head>
<title>My First Page</title>
</head>
<body>
<p>This is my very first web page.</p>
<p><strong>This is bold text</strong></p>
<p><em>This is italic text</em></p>
<p><strong><em>This is bold, italic, text</em></strong></p>
</body>
</html>
Save the file as firstpage.html.
Now, either:
Open your web browser, select File/Open. A dialog box will appear. Select Browse and navigate to the web page you just saved (firstpage.html). select it and click Open, then OK.
Or find the folder in which you saved firstpage.html and double- click on the icon for that page.
You should now see your first web page.
Congratulations!
Explanation:
All web pages are basically comprised of two sort of information:
Content - this is the information/text you actually want to display
Markup - instructions about HOW you want the Content displayed.
Markup instructions, or ELEMENTS, are held in 'tags'. A web browser can differentiate between Content and Markup because each 'tag' starts with a '<' and ends with a '>'.
Each ELEMENT can also have ATTRIBUTES associated with it which supply additional information if needed. You'll be meeting ATTRIBUTES when we look at adding images to web pages
So, let's go through your first page and see what all those tags did.
For a start, notice that all the tags are in lower-case. Some of the older forms of HTML did allow for upper-case tags, however, the World Wide Web Consortium (W3C) - the international body that sets the guidelines for HTML Markup - has declared that lowercase tags are mandatory for XHTML. As this is the newest form of HTML Markup, it would be a good idea to stick to lower-case tags right from the start.
Next, note that all of the tags come in pairs:
one without a '/' at the start of a piece of text. This is called an opening tag.
one with a '/' at the end of a piece of text. This is called a closing tag.
With few exceptions, all tags have both opening and closing forms. You should get into the habit of including both types.
<html></html>
The first line in your HTML document is <html>.
All web pages must begin with a <html> and end with a </html>.
<html> is an opening tag
</html> is a closing tag.
So <html> told the browser that we are opening an HTML document and </html> told the browser that we were closing our HTML document.
<head></head>
The text between these two tag is called Header Information. Header information is not displayed in a web page itself but can contain information about the page such as information for search engines etc.
<title></title>
You place the title for your web page between these two tags and it will be displayed in the top bar of the browser window.
<body></body>
The text between the <body></body> tags is the all of the text that you want to be displayed in a browser window. In other words, the actual displayed web page.
<p></p>
These paragraph tags are called BLOCK ELEMENTS as they are used to enclose whole blocks of text. Text to be displayed should always be placed between two, BLOCK ELEMENT tags.
<strong></strong>
Text placed between these tags will be displayed in a bold font.
<em></em>
Text placed between these tags will be displayed in italics.
Mixing, or nesting, tags
Notice how you were able to have bold and italic text by using both the <strong></strong> and <em></em> tags?
Take a closer look at the code for that last displayed line.
<p><strong><em>This is bold, italic, text</em></strong></p>
See how the first tag opened is always the last tag closed?
This is known as nesting and refers to the fact that, if you use a number of tags together, you must always close them in the reverse order that you opened them.