This is my basic HTML tutorial which I wrote in order for those of you out there who are interested in making your own websites but have no idea on where to start. Hopefully after reading this you will have the knowledge to create your very own site.
To begin with open up notepad, now we need the tag to denote that the page is a HTML document, you must start every page with this tag: <html>, the HTML tag tells the browser that this is a HTML document, simple huh?
The next tag will be the head tag, <head>, inside this tag you will then put the title for the page, you see the title at the top of your browser window, the very top that says Joe2Torials, well that is the title. Start the title by opening the title tag, <title>title for your page</title> and then you close the tag again after you have entered the text you want to be your title. You open all tags this way and you close them all by using the backslash as shown. Then you close your head tag, </head>.
Next off we have the body of the document, this will be everything you want shown on your page. Open the body tag the same way as the head and the html tag, <body>, and inside add your content. For this tutorial we will just add some basic text, all you do is type. Simple! Once you have inserted your text you then close the body tag in the same way as the others, </body>. After that we close the html page, </html>.
So what we have so far is:
<html>
<head>
<title>Page Title</title>
</head>
<body>
Text to be shown in the body of the document.
</body>
</html> |
To save the document, go to file > save as in notepad. Name the file index.html. The extension *.html stands for Hyper Text Markup Language, this is the file extension for web pages. There is also *.htm files but they are no different and mean the same thing. Now by using this code you have created your very own simple web page. Open it in Internet Explorer (or any other browser you are using) to view your very first page.
Adding breaks between text
This breaks the text and starts it again on the next line. Remember you saved your document as TEXT so where you hit ENTER to jump to the next line, this does not work when your page is viewed as a web page. In a HTML document, you need to denote where you want every carriage return with a <br>.
Adding a paragraph
It does the exact same thing as the <br> above except this skips a line instead of jumping to the next line. It is also good for grouping long lines of text together to form proper paragraphs, just like writing a letter.
Headings in a page
Surround the text you want to make a heading with the attribute <h1> and remember to close the attribute </h1>.
The numbers denote how big the heading is, 1 being the highest and 6 being the smallest, There are only 6 headings.
Adding images to your page
To add an image to a page all you need to do is add this simple little code, <img src="image.gif">, which will produce the following result. The src="" attribute is the location of your image.
Aligning an image
Now you probably want to position an image on a page, well this can be done by using the <div> tag. The <div> tag can also be used to position text but we will come to using advanced div's later on. When you have your code to insert an image '<img src="image.gif">' you then put this inside a div tag like so:
| <div align="center"><img src="image.gif"></div> |
Again you must remember to close the tag otherwise the changes will not take place. This will align the image in the center, you can change the center to left or right.
This image is aligned to the left. The text is aligned in the middle
This image is aligned to the right. The text is aligned to the top
To make text appear next to an image you use the align=" top / middle / bottom " attribute. So your code would look like this:
| <div align="center"><img align="middle" src="image.gif"></div> |
This would make the text next to the image aligned in the middle. Try aligning an image in the center of the page with the text aligned to the bottom, if you can do this then you have understood how to add an image to a page and align text next to it.
This should be enough information to create your own basic web site.