So you back to learn more, in today's lesson i will teach you how to make a simple HTML web page and show you how to change the background color, enter images and and links.Before you move onto this lesson be sure you went through the First Lesson - The basics otherwise you may not understand what im going on about and it will all seem like gibberish.
Lets get started then, open your text editor, but make sure its a new one, do the same as we did before save it then save as a .html file. That is so it will open in your default web browser. Once all that's done type the same codes that are in the picture above, if you can't see that well then click the picture, it should get bigger.
Have you done that? Good, after the first command <title> NOT </title> notice the / . There write what ever you want, the text will show in the tab bar. For an example look at the tab bar for this post, it say HTML lesson 2...
In the big gap after </head> copy this - <body bgcolor="silver">. The <body> tag is everything that will be in the web page so this is going to be a big tag with little commands with in it. Do break down or turn into jelly, it really is simple.
Obviously you can change the color if you would like but im just keeping it basic. Now you can start adding text, i will teach you how to add an image in a little bit so hold on. I recommend starting this code on a new line so you can see everything, this is an example for text <font face="georgia"><font size="5">We Read Your Mind</font> Refer to the last post if you want to change the color of the text.
If you want to put anything in the center then simple write this just before the command, for istance with the font command - <center><font face="georgia"> and after the text close the commands </center></font>
Adding an Image
Now for the fun stuff, well at least it is for me, is that odd? Im joking. To add an image you need to open the image command, this one is weird because you dont have to close the command.
After the last command you write add this <br><br> - these are line breaks which makes everything go down twice, you can write just <b> but for this im giving everything a big gap.
<img src="http://2.bp.blogspot.com/-Sa-3WLCOFWg/T9pjjfKkPRI/AAAAAAAAAYY/Jfad3yxdK7o/s1600/header.png">
You notice the bit that is highlighted is a link, you can get any picture on the web if you like, just make sure you right click on the image and copy image URL or copy image location. Again if you want that in the center just add before it <center> and just after </center> A reminder that after every = sigh you need " " quotation marks.
To add a link you need the <a href> command, lets say i want to go back to the text of We Read Your Mind, unless you have changed it do the same. Just before the <font face="georgia"> add this code -
<a href="http://www.wereadyourmind.com"> then just after where you closed the </font> command put </a>
There you go you have made a simple web page, but not anyone can view it and that is because its only a file on your computer, im only teaching you how to use HTML so you can use it if you actually make your own site.
No comments:
Post a Comment