If you haven’t gone through our first part of the tutorial, please go back and watch the video.
Ok, so we learned how we can get our website up, and how to begin our development process. But now at this point, you should be ready to learn how to start styling your website, and using the basics of HTML to do this.
Once you have mastered HTML, your next step will be CSS (Cascading Style Sheet). This will give you more control over how your website looks. For example, line spacing or a good replacement for tables.
So lets begin with HTML. We learned that every HTML page should have the beginning <html> tag, and the ending </html> tag. Now inbetween them, we will place our beginning header <head> tag, and ending </head> tag. Then after the ending </head> tag, place <body></body>. This will be where our page content will be placed. At this point, our page should look like this…
<html>
<head></head>
<body></body>
</html>
Things we can place in our <head></head> section are…
| Tag |
Description |
| <title> |
Defines the title of a document |
| <base /> |
Defines a default address or a default target for all links on a page |
| <link /> |
Defines the relationship between a document and an external resource |
| <meta /> |
Defines metadata about an HTML document |
| <script> |
Defines a client-side script |
| <style> |
Defines style information for a document |
Inside the <head></head> tags, place <title></title> tags, and type in a title you want for this page. Next, inside the <body></body> tags, type in something you want for the body of the page. Your page should now look like this…
<html>
<head><title>This is an Example Title</title></head>
<body>This is my website!</body>
</html>
Your page should look fairly basic. White with black text. Lets change the text color and background color. Now, the thing about website coloring is that it uses hexadecimal colors. A website I like to use to find hexadecimal colors is http://www.december.com/html/spec/color.html select the section you want Purples: indigo purple violet pink red, Blues: teal cyan blue, Greens: green teal, Warms: red orange brown yellow yellowgreen, Neutrals: black, grays, white.
Now we should have some idea in our heads about what colors we want to appear on our page. Now, to make these colors happen we have to modify our beginning <body> tag. Lets say we want #0099CC for our background color, and #FFFFFF as our font color. (light blue background with white font). We should change our <body> tag to <body bgcolor=”#0099CC” text=”#FFFFFF”>. Save the file, refresh the page, and there you have your new colors! Have some fun with these and change them around to see what fits.
Now lets create a link, leading to another page on our site. Create a new file called test.html and save it. Go back to our page we were working on before, and in the <body></body> section of the page, add an anchor tag, with a hyperlink reference. Otherwhise known as <a href />. Now lets make a link. Add to the text of the body tag <a href=”test.html”>test page</a>. When you save the file, refresh the page, and press on the link, you will be taken to the test.html page. A good idea would be to add the reverse link on the test.html page, like <a href=”index.html”>Go Back</a>
If you would like to open the page into a new tab (or new window if your using XP) use <a href=”test.html” target=”_new”>test page</a>.
Creating an image is simple, as shown in the first part. Create the image tag with source. Lets say our image file is called image.jpg, our image tag would look like this <img src=”image.jpg” />. Keep in mind our path is shown at the same time. So this example only works in the image.jpg file is directly next to our page file. Lets say our image file is in a folder next to the page file called IMAGES. Then our image tag should look like this <img src=”IMAGES/image.jpg” />. Our current page, should look something like this…
<html>
<head><title>This is an Example Title</title></head>
<body>This is my website!<br>
<a href=”test.html” target=”_new”>test page</a><br>
<img src=”IMAGES/image.jpg” />
</body></html>
Good styling techniques to use are to include line breaks <br>, and to use tables. Using tables without software to assist you will be a challenge. If you want to put images next to text, or to make text on top of images, this would be a great way. Don’t forget you can remove borders from tables, and change width and height properties.
Once you master HTML styling, follow me over to part 3 where we will learn about CSS (Cascading Style Sheets)!
