Webpages are written in HTML - a simple scripting language. HTML is short for HyperText Markup Language.
- Hypertext is simply a piece of text that works as a link.
- Markup Language is a way of writing layout information within documents.
- Basically an HTML document is a plain text file that contains text and nothing else.
When a browser opens an HTML file, the browser will look for HTML codes in the text and use them to change the layout, insert images, or create links to other pages.
Since HTML documents are just text files they can be written in even the simplest text editor.
A more popular choice is to use a special HTML editor - maybe even one that puts focus on the visual result rather than the codes - a so-called WYSIWYG editor ("What You See Is What You Get").
Some of the most popular HTML editors, such as FrontPage or Dreamweaver will let you create pages more or less as you write documents in Word or whatever text editor you're using.
However, there are some very good reasons to create your own pages - or parts of them - by hand...
The structure of an HTML page
An HTML page is divided into two major sections:
1. The head
The head (<head>) section contains underlying information about the page which does not get displayed in the web page (except for the title of the page). It does, however, have an affect on how the web page is displayed.
2. The body
The body (<body>) section: this section contains all the stuff that appears on the actual web page when someone happens to come along with their web browser. We are talking about the actual text, images, flash movies, and so on that people will see. That, of course, means the tags used to format all this stuff are there too...
You will notice that both the head and the body sections of a web site are marked in the HTML page with their respective tags: (<head> </head>) and (<body> </body>).
If the body tag creates the body of an HTML page, and the head tag creates the head of an HTML page, how do you create an HTML page itself? You guessed it, use the HTML tags:
<html> </html>
The 'mother of all tags' is the HTML (<html>) tag, and like all tags it must have a start tag (<html>) and an end tag (</html>). The difference between the start and end tags is the forward slash (/), but you already knew that.
Every web page MUST begin and end with the HTML tag, otherwise the web browser (programs like Internet Explorer) will not be able to display the page. You also have to have the head tags and the body tags. All the other tags are optional.
So the bare-bones HTML page must have these tags and in this order:
<html>
<head>
<title>Title of your page</title>
</head>
<body>
Main content …
</body>
</html>
Top
Time to build your first HTML page by hand
I could go on with more theory and send half of you to sleep (trust me); instead you are now going to actually build your very first web page! One of the best ways to learn something is to actually do it, so don't worry if things are a little foggy for you right now, as we build the web page, things will start to clear up.
Step 1: Let's write some HTML code
Open up a text editor like Notepad
<html>
<head>
<title>Your first hand coded page!</title>
</head>
<body>
<h2>Hand coding web pages is easy! </h2>
<p>I would like to thank everyone who helped me type this page.</p>
</body>
</html>
Step 2: Save the file as an HTML document
Save your HTML file (save it to your desktop so you will be sure to find it!) using your text editor's 'Save as' function and name the file webPage.html.
You can choose any name you want, as long as you follow these four rules:
- Web page names cannot have spaces in them: 'web page.html' is no good but 'webPage.html' is perfect.
- The name has to end with either .html or .htm; by ending the file name this way you are telling the computer that this is a web page and that it should use a web page reader / browser to view it.
- Don't use funny symbol like: $, %, ^, & in your page names. Stick to standard letters and numbers.
- In Notepad, please save the file as UTF-8.
Step 3: Marvel at your work and view your page
You should be able to now just double-click on the page or open it up with your web browser by going to its "File" menu, then select "Open file" and select your page.
You should be able to see your page in all its glory! Ok, not too much glory, but it was your first hand-coded page after all! If you don't see anything, then compare what you typed with the original I gave you and just go over the process again. You will get it if you give yourself a chance!
Top
|