Writing Source Code ...
Type the code below exactly into your text editor
<html>
<head>
<title>My First Page</title>
</head>
<body>
<h1>Here it is...</h1>
<p>My first ever web page.</p>
</body>
</html>
Now save it as firstpage.html. The extension (html) is very important. If you don't have it, the page will open up as a text file. When you have saved it you should be able to open it your web browser by double-clicking on the icon. Alterately you could open your browser first, and then use the File=>Open command in the program.
If you've got it all right, it will look like this
Lets have a look at the code we've written;
Everything inside a pair of angle brackets like this <html> example is called a tag. Tags come in pairs, an opening and a closing tag. The closing tag has a baclslash before the name of the tag to show it is a closing tag. </html>
There are six pairs of tags;
- <html>…..</html> The first and last elements on the page. The first tag tells the web browser to expect an html document (web page). The second html tag simply says ‘this is the end of the file'
- <head>…..</head> These tags contain the head section of the page. This section has a number of uses. It contains the page title in this case, but can contain other information such as keywords for search engines and the website author's name.
- <title>…..</title> These tags contain the title, displayed in the title bar of the web page.
- <body>…..</body> all the main content of the page goes between these tags
- <h1>…..</h1> This indicates Heading1, the largest of the seven headings (h1…h7)
- <p>…..</p> This is a paragraph. If you want to add more paragraphs, add a new pair of <p>…..</p> tags around each one.
Using Markup
These tags collectively are known as the Markup on a page. Their purpose is to tell the web browser how to display the content of the page. Content is placed between a pair of html tags, and is then displayed using the web browser's rules for displaying that particular tag.
Tag pairs can be placed alongside each other, or nested inside each other, e.g.
<body>
<h1>Here it is...</h1>
<p> My first ever web page. </p>
</body>
In this example the <h1> tag and the <p> tag pairs are next to each other, and both are nested inside the <body> tag pair. The <body> tag is called the parent tag of <h1> and <p>, and the <h1> and <p> tags are called child tags of <body>.
Viewing Source Code
The text we wrote to create this page is called the source code. The web browser takes the source code and presents the final, laid-out version. Most web browsers allow you to view the source code of a web page. Depending on your browser you may have a shortcut menu item (right mouse-button) that says “View Source”. Otherwise look in the “View” menu at the top of the page for a similar option.
When you select “View Source” the original text file opens and you can see the source code. If you can't find a “View Source” option, open your text editor and the open your webpage using the “File => Open” command from within the editor.
Change or add new content to your page using the text editor. Do not alter the tags, change only the content within the tags.
If you add new tags, make sure they are within the <body> tag eg.
<html>
<head>
<title>My First Page</title>
</head
<body>
<h1>Here it is...</h1>
<p>My first ever web page.</p>
<h2>This is what heading 2 looks like</h2>
<p>This is another paragraph. </p>
</body>
</html>
