That covers the HTML tags we will use in our layout! Once created open that file and paste in this template CSS code and then save it:. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page. I think that is one of the such a lot important info for me. And i am glad studying your article. But should commentary on some basic things, The web site style is wonderful, the articles is really great : D. Good activity, cheers.
You are commenting using your WordPress. You are commenting using your Google account. You are commenting using your Twitter account. You are commenting using your Facebook account. Notify me of new comments via email.
Go to your desktop and create a simple text document. That will create a simple blank text document on your desktop. Name the file: practiceHTML. Windows will show you a warning asking you if you want to change the file extension, just say yes. Now right click on the file and select: 'open with' and select notepad. This code forms the basic structure for all HTML pages. Comments are a way to place notes that cannot be seen in the browser.
In that same folder, create a new text document and call it: 'myCSS. Once created open that file and paste in this template CSS code and then save it:. Don't let the CSS freak you out, I will explain the important details and you will soon see how easy it really is. One last thing for you to do before I finish this part of the tutorial, we need to add some code to our HTML page.
With this in place we will be able to start styling our page. If you take a look at the HTML page now you may be surprised to see that we already started!
If you haven't set the page up yet, please do so to make sure you have everything working thus far. We could just as easily have said that we want all the text to appear in the div the div with the ID 'navigation' bold instead:.
This tutorial was about creating an easy to use page template so I will point out the 2 main elements that make this thing work. In our page the navigation div is sitting on the left and it has a border It has a nice light green 1 pixel border because I set this in my CSS:. Pretty self explanatory, no? I would suggest changing the color of the border and changing the pixel thickness of the border and see how it looks.
Why is the navigation sitting on the left of the page while the centerDoc is to the right of it? Well first thing to look at is this line in the navigation selector:. This tells the browser to just place this div on the page as is. This is oversimplifying the subject, but for our purposes this works for now. Tells the browser to insert px pixels of padding to the left of the div with the ID 'centerDoc'.
That pushes that div over giving room for the div 'navigation' to take that place. Or in this case, just creates a nice left hand column. Let's back up here a second.
0コメント