Dec
How To Get Started Creating Web Pages
by admin
This is the next part in the WordPress series. In the last part, WordPress setup, Themes and Plugins, you either copied across your current blog, or setup a basic skeleton of your planned blog.
For this installment, we are going to take a slight detour regarding the theme. Because of the length I have split this into two parts. In this part you will learn how to use HTML-kit, the Web Developer ToolBar and then the basics of HTML and CSS. In the next part we shall then use these tools to modify a theme.
Requirements
You will need two/three things:
- Web Design Application - Though Nvu is often recommend I prefer to use HTML-Kit, it is free, there are lots of plugins to expand it, plus, there is a lively support forum. It’s also better laid out and less clunky.
- A decent browser - There is only one choice really, if you haven’t already got it, go and get FireFox, it has addons that we will be using.
- The Web Developer ToolBar - This isn’t needed, but it makes life a lot easier for verifying and finding errors in your coding. Note that you will need FireFox in order to install it.
Preparation
- Download HTML-Kit and install it by double-clicking on the download file.
- On the Desktop create a folder named playground.
- Startup HTML-kit, from the menu select Workspace > Add Folder/FTP Server > Add Local/Network Folder… The Add Folder dialog shows, click the icon on the Folder path line and select the playground folder.
- In the Display name textbox enter a name, I used playground.
- Finally hit the OK button. On the right-hand tab the playground folder will appear. This allows easy access to all the files that you will want to edit.
Page Structure and Coding
A web page is constructed with a series of "boxes" as shown in the diagram. This is called HTML (HyperText Markup Language) or XHTML (eXtensible HTML).The names I have used are fairly standard on most pages.
If you look at any web site, especially blogs, you will notice that virtually every page is identical except for the content box. This allows us to use a template for the page layout and this is what WordPress does. When you type in a post, that text is then put into the content box of the template.
What is a Tag?
HTML code is made up of tags. A tag is a word that is enclosed by a < and a > - an example being <div>. Most tags will come in pairs like <div> and </div>, called opening and closing tags. Anything that is placed between the two will move with the div pair. An example of a single tag is a line break - <br />, the tag name is followed by a space and forward slash.
Code Layout
You will need a page to look at. In HTML-kit, select File > New Document to create a new web page, immediately save it by File > Save As, name it index.htm and save it in the playground folder.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
This tells the browser what language the document is using, in this case it is HTML 4.01.
<html>
This is the start of your document. Note the very last tag is a </html>, the whole document is contained between this tag pair.
<head> and </head>
The head section holds code that helps the page in some way. For example, between the head tags you will see:
<title>Untitled</title>
This tag pair displays text, between them, in the title bar of your browser.
<body> and </body>
Anything that is between these tags will display on the web page.
What is CSS?
CSS (Cascading Style Sheets) is used to change how the HTML will appear on the display device. I say display device because you can "view" a web page on different devices - screen, paper, braille device and screen reader. You can have a different style sheet for each device, so that the screen would show all the graphics, animation and text, whereas on paper only the text would show.
Example CSS
If you wanted to display a red box that was 300 pixels wide, 200 pixels high and the top right corner is 100 pixels away from the top and right side of the browser window, you would use a div tag pair to make the box and then a style property to change the appearance of "box" created by the div pair as follows:
<div style="position: absolute; background: red; width: 300px; height: 200px; left: 100px; top: 100px;"> </div>
Then if you wanted, for example five identical boxes on one page, you could copy the code five times, but that is a lot of text. Instead, you can give the style a name and put it in a separate file as follows:
.redbox {
background: red;
width: 300px;
height: 200px;
left: 100px;
top: 100px;
}
and then the div would look like:
<div class="redbox"> </div>
What is a Class and an Id?
In the above code, redbox had a period before it (.redbox), then inside the first div tag it had class=. This means that you could have several red boxes on the same page. But if you wanted only one div to use the style you would use the combination of CSS:
#redbox {
background: red;
width: 300px;
height: 200px;
left: 100px;
top: 100px;
}and then the HTML would look like:
<div id="redbox"> </div>
Examples of where this is used are the header, sidebar, content and footer divs. There is only one of each on any page, but they are on most pages, and so they have an id (much like you have an id, your name).
The third way of adding style information is by "wrapping" the css in a set of style tags and putting it all in the head section like so:
<head>
<title>My CSS Experiment</title>
<style>
#redbox {
background: red;
width: 300px;
height: 200px;
left: 100px;
top: 100px;
}
</style>
</head>
Note that if anything is missing, the page may or may not display properly. To check if it right or wrong (this is called syntax) you can use the Web Developer Tool Bar and select Tools > Validate Local HTML (you have to be online for this to work). Move them into the playground folder.
With the Web Developer ToolBar, you can also highlight the divs by going to Outline > Outline Block Level Items, and then see their names by going to Information > Display Id & Class Details.
If you go to Jack Daniels you will find a downloadable CSS Cheat Sheet, this is a handy reference and you should print it out.
Practise
Now you shall use what you have learnt. All the example files have a .txt extension, right-click to download, you should change them to .htm before viewing in your browser.
Using the index.htm file you created above:
- Type
Here is a red box:between the body tags - Press Ctrl-S to save it.
- Press the F8 key to view it in your default browser (download: index a).
- You should see the text at the top left of the browser window. Well done.
Now we shall style it.
- Change the text to:
Here is a <span class="rbox">red box</span>: - Below the
<title>Untitled</title>enter the following:<style> .rbox { color: red; } </style> - Press Ctrl-S to save it, then F8 to Preview in Browser, (download: index b).
Now you shall make a red box.
- After the text type
<div class="redbox">Hello World</div> - Above the </style> tag enter:
.redbox { width: 100px; height: 100px; background: red; color: yellow; font-weight: bold; } - Save it and preview it, you should see, below the text, a red box with the words Hello World in yellow, (download: index c).
A Rollover Button
There are lots of ways that you can style text. In the next example you shall make a link. Then you shall make it act like a rollover button but with no images.
- After the red box div add:
<a href="http://ageeksjourney.com/">CK Marketing</a> - Save and preview it. You should see CK Marketing underlined and under the red box, (download: index d).
- Above the </style> tag add:
a { text-decoration: none; font-size: 2em; font-family: verdana; font-weight: bold; text-transform: uppercase; color: yellow; background: red; border-top: 6px solid pink; border-left: 6px solid pink; border-right: 6px solid brown; border-bottom: 6px solid brown; padding: 0px 5px; } - text-decoration: none removes the underline. The border bits give the outline to the area of the link. The padding adds a bit of space between either side of the text and border. The a at the start stands for anchor as in the HTML.
- Save and preview, (download: index e).
- Now you shall make the rollover effect. Add the following css:
a:hover { color: orange; background: brown; border-top: 6px solid #600; border-left: 6px solid #600; border-right: 6px solid pink; border-bottom: 6px solid pink; } - For the last time, save and preview it, try moving the mouse over the button, does anything happen? (download: index f).
- Here all we need to do is change the colors so it looks like the button is pressed in. This time we have a:hover which means the changes will happen only when the mouse is over the link. Colors can be defined not only by name, as we have done, but also in hexadecimal. For now you do not need to learn the hex colors, you can get them from the PhotoShop color requester or other similar tools.
Well, I think that is more than enough for you to play with until the next part. As usual, if you have a problem with anything, compare what you typed to the downloaded files. If you still can’t see where you went wrong use the Web Developer ToolBar to verify the code is right. If there’s still a problem leave a comment here for me.
If you got it working first time, well done. Playing around with the code, change the colors and sizes, see if you can have multiple colored boxes on the page.
Next time we shall attack a theme, we shall take a plain theme and jazz it up a bit.
Tags: css, html, page layout, theme, wordpress
Category wordpress |
Print This Post
|
How To Get Started Creating Web Pages | CK Marketing…
This is the next part in my series about WordPress themes. In this part I discuss what (free)tools you will need to create your page layouts. I recommend using HTML-kit, FireFox and theWebDeveloper ToolBAR. Next up, I go over what HTML and CSS is. I sh…
your blog is very clear and detail…thx for sharing…=)
Very clearly explained - I’ve not used HTML-kit and will take a look, sounds good. Also TY for the heads up on the Cheat Sheets - excellent resource, especially for someone like me who falls over her own feet where CSS is concerned!
@Joshuaun: thx for the comps;
@flamingdancer: I don’t know why it isn’t more popular, it has some very good addons and can rival my tool of choice, Homesite.
Colin King’s last blog post..How To Get Started Creating Web Pages
Nice post! Finally all the html and css stuff is starting to make some sense to me. Have a happy and prosperous New Year!
@Susan: Thx Susan, it’s not that hard really, and happy New Year to you too
Colin King’s last blog post..How To Get Started Creating Web Pages
Very well written post! Happy New Year!
@Sammy: thx guy, now you have to put it into practise
Colin King’s last blog post..EntreCard Meme- Top Droppers Link Love
[…] is the next part in the WordPress series. In the last part How To Get Started Creating Web Pages I introduced you to some very basic HTML and CSS. If you missed it and haven’t had any […]
Whew ! Thank you so much. now it made sense to me.
@Pmonchet: Yeah… I know it’s a lot to take in
If there’s anything that would make it easier let me know.
I have a question all the recommendations can I use them with MAC? thanks