Creating Our Home Page
So now you have your completed template file. If not already open, open the "template.html" file with your text editor. Now select save as, make sure the settings we discussed earlier are correct, change the name to "index.html" and save it in the same folder as your template file.
Open your favorite web browser, from the file menu select open and navigate to the "index.html" file and open it. Tada! there it is in all its....uhh... glory? Well there it is. It doesn't look like much, and until we create the other pages the navigation links wont have anywhere to take you. But still, you have your first official web page.
What you can see is how the default HTML is displayed by the browser. Its nothing that anyone would call "fancy", but that isn't what HTML is supposed to do. HTML just provides the structure for our content. Lets add a little bit more HTML and content to this page to make it more like a home page, than we can style it up.
Inside the "div" with the "id" attribute of "contentWrapper" we are going to add another heading element and a couple of paragraph elements. Paragraph elements (p) are block level elements that will start there own new line and end with a new line. They can only contain text and "inline" elements. There are some rules as to what can go where, but for the most part you can put a paragraph element in a div element, but not a div element in a paragraph element.
<div id="contentWrapper">
<h2>Welcome to my website</h2>
<p> Thanks for stopping by. I hope that you are having the mot splendid day and that all your dreams come true. Remember to look before you leap, and look both ways before you cross, and always wash your hands before dinner.
</p>
<p> I have created this site as a mock way to learn how to create a website site. I hope you enjoy it, but if you don't, I hope you get better taste, and sense of humor! You might be able to by some <a href="http://www.justkidding.com">here</a>...
</p>
</div>
You can add whatever text you want, in as many paragraphs as you want. Play around with the heading sizes to see the difference, just remember that in text, headings represent a structure of hierarchy which typically flows from big to small. Now re-save your index file (control+s) and reload the page in your browser (control+r). You can see your changes displayed on the page. It is now easy to add content to your web page using what we have covered so far. You could list your favorite activities or artists using more lists, add links within your text to your favorite sites etc!
There is one thing I want to point out that I didn't cover earlier. In the head section of the template page was this line:
This is the link to the style sheet that we are going to create to make our site look better. Like I said, the head section of a web page tells the browser info it needs to display the web page correctly. This basically tells the web pages browser "I need this file to work correctly, would you go get it for me please?".