Making Your First Webpage
Tutorial by Charlie
A quick introduction into the structure of a webpage and how each part works. By the end of this tutorial you should be able to make your very first webpage.
Starting something new is never easy, and learning programming, whatever type, for the first time is like learning a new language. Fortunately when it comes to programming for websites, things are fairly simple once you understand the basic structure of a page. This tutorial aims to demonstrate how to make your very first website. Let's start with a basic page, whose code would look something like what is shown below:
<html> <head> <title>My First Webpage</title> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of normal text. You can start a new paragraph like...</p> <p>This! This is your second paragraph.</p> </body> </html>
Confused? Don't be, it's really not that hard when you break it down...
<html> </html>
This is perhaps the most important part of your code. It tells the browser that is looking at the page's code that you are writing in HTML (or XHTML), so that it can interpret it properly. If you don't enclose your code inside these tags, chances are your website will not render properly.
<head> <title>My First Webpage</title> </head>
This is telling the browser what to call it's window (the part you see to the very top left of a webpage. This site has something along the lines of "fantastiode | xhtml tutorials | Coding Tips, Tutorials and Forums". See it? Good. The text you want your browser to display in this way MUST be enclosed withing the <title> & </title> tags. And they MUST be within the <head> & </head> tags (and all obviously within the <html> & </html> tags!). You can put other things in the <head> & </head> tags, but for now we're keeping it simple. What's next...
<body> </body>
These tell the browser where the body text for your website is held. The body section always comes after the head section. Now let's look what's inside it...
<h1>This is a heading</h1>
Kind of speaks for itself really! you can imagine "h1" stands for "heading 1", you can also have h2, h3, h4.. etc. , where h1 is usually the largest, and they get progressively smaller. Note once again that the heading is surrounded by <h1> and </h1>, this is because if you fail to add the closing </h1> tag, the browser will not think that your heading is finished and will make the rest of your page have large text too! It's really good practice to make sure you close all your tags in the order they were opened, so you wouldn't do <h1>My Heading<p>Some text</h1></p>, it should be <h1>My Heading</h1><p>Some text</p>. Got it? Let's move on...
<p>This is a paragraph of normal text. You can start a new paragraph like...</p> <p>This! This is your second paragraph.</p>
So again we're seeing a new tag, this time it's a "p", which you can think of as standing fcr "paragraph". As the above code in the box implies, you can create a new paragraph by closing the existing one with a </p> tag and opening a new one with a <p> tag. Easy really! The last part is...
</body> </html>
As we said before, we need to close the tags in the order they were opened, so we've just done the body section of our document, so we close it with a </body> tag, and then we want to end our webpage, so we tell the browser that's the end of our code with a </html> tag. Now it's your turn to have a play! Open a text editor such as notepad, and insert the code that was shown at the start of this tutorial, then save it, not as a "mypage.txt" but "mypage.html" (all html documents end in either ".html" or ".htm", then open it with your web browser. Once you've done that you can start changing things and playing with the code. This was a very basic introduction into web design with HTML (or XHTML) coding, but it's really designed to allow you to understand the basic structure of a webpage. Have a look at some more tutorials to see what other cool stuff you can do! Enjoy!
