XHTML and CSS - Creating Your First Webpage
Creating Your First Webpage
First thing we need to do is open up a new empty file, so do that in your new text editor from the last tutorial. The first thing you need to know is all websites are made up of tags, if you wanted a image on your site you would need a image tag, if you wanted a link on your site you would need a link tag etc. A html tag looks like this, a greater than sign and a less then sign with something in the middle, here are some examples. Paragraph tag
<p> text </p>
Image tag
<img src="some image.jpg">
Link tag
<a href="http://google.com">Google.com</a>
So now let's create our first webpage, the first thing you need is to set the doc type tag, I won't be fully explaining what this tag means. It's a special tag that you only use once per webpage, it's basically telling your browser what type of document it's trying to read.
<!DOCTYPE html>
The basics of any website is pretty much the html tags, everything in your website is going to go in between your html tags. So not we'll add them into our webpage. The <html> tag pretty much means I'm going to start here and the </html> tag pretty much means I'm going to be ending here.
<!DOCTYPE html> <html> </html>
Next we have the the head tag, the head is where all the technical stuff goes, the sites tags, the title, the description etc. So let's add in our head tag.
<!DOCTYPE html> <html> <head> </head> </html>
Next we're going to add in a title tag, anything you put in the title tag will show up as the title.
<!DOCTYPE html> <html> <head> <title> This is the title. </title> </head> </html>
Next we're going to preview this webpage, to do that save the file and make sure you save it with the file type html. Now right click on the file and open it with your proffered browser, this is the only thing that will be a little bit different across operating systems. Your webpage should look something like this, the only thing we did is add a title that you can see at the top of the page.
A bored coder
Change the title, save the page again and then refresh your browser, you should see the title change. Next we can add in the body tags, this is where all of the webpage you see goes, the images, the links, the text etc.
<!DOCTYPE html> <html> <head> <title> This is the title. </title> </head> <body> </body> </html>
You can type anything in here and it'll appear on your webpage, so add some text into your body.
<!DOCTYPE html> <html> <head> <title> This is the title. </title> </head> <body> This is text in the body tag. </body> </html>
Now refresh your browser and you will see the text you put in your body appear.
A bored coder
That's it you have created your first webpage, I know it's a pretty boring webpage at the moment but we'll be adding in more things in the following tutorials to make it look better.

Page generated in 0.0051 seconds.