~Html school, learn html easy with Love4Colors~

~ My first html dokument, step by step ~

Now let´s sit down and write your website a letter. Come on, open up your notepad, I´ll help you get started! So we should start with writing hello to your website. You do this by writing <html> on the top of your document. We better write goodbye to right now so we don´t forget that. So we also write </html> at the end of the document. Good this is a start. After this we need to figure out what we want to tell your website, while we do that I will tell you some basic things thats good to know. Now listen up! All html is written between a < (left bracket) and a > (right bracket). For example to decide what to do with text, you would use <font> this is called a tag. To most tags you can add attributes. Adding an attribute to the text tag could for ex. be that we want to specify the color for the text. The attribute is written between a =" and another ". The text tag with the color attribute would look like this. <font color="#000000"> You will also have to close your tags. To close a tag you use the same tag but write a / in front of the tag so and end tag for the text will look like this </font> you do not write the attributes in the close tag. Ok, are you following? Here is an example. In order to write this text in pink I wrote like this in my notepad <font color="#E67698"> In order to write this text in pink I wrote like this in my notepad </font>
There is a whole bunch of tags and attributes, and you are going to learn them all Well, many of them atleast! So let´s get back to writing your website the letter! Where were we, we had written hello and goodbye, I´ll make the html pink so you can see it better.. <html> </html> In between hello and goodbye, we want to first give your website a head this is where you put a lot of smart info. It will look like this... <html> <head> </head> </html> After we put the head in, we have to tell the head a title for your letter. We do this with a title tag like this... <html> <head> <title>My first letter to my website!</title> </head> </html> Don´t forget to close the title tag also! So now we are done with the tags that tells your website hello and what its called, what you write between <title> and </title> is what will show up in the list on the top of your window! Now lets tell your website that we are done with the boring stuff and would like to go on with giving it all the interesting news! We do this by giving it a body tag, the body tag tells your website that everything in between the body tag will show on your site, the html will look like this.. <html> <head> <title>My first letter to my website!</title> </head> <body> </body> </html> We need to close the body tag also, and it should always be just over the closed html tag. In between <body> and </body> is where you will put all your content. For example lets say you want to write this: "Dear website, this is my first letter to you. I am sure there will be many more in the future... Sincerly ~Me!" Then you simply write that in between the body tags, and then your document will look like this. <html> <head> <title>My first letter to my website!</title> </head> <body> Dear website, this is my first letter to you. I am sure there will be many more in the future... Sincerly ~Me </body> </html> Now, lets try to upload this to your webspace! You have to save the dokument as for ex. myletter.html, you can not forget the .html or it won´t show up on your site. When you want to look at it you must type the whole url, like this http://www.love4colors.com/myletter.html. You do that and see how it looks in the browser, and I´ll move along to the next class. I´ll wait for you there!

Take me back