In the first part of this series on how to build a website, you learned how to: Develop a purpose for your site; Organize a project outline; Draw a wireframe; Organize your folder structure; and Define HTML and JavaScript.
In the second part of the series, you learned how to: Get an HTML editor; Define the different parts of an HTML file; Write your first HTML code; and Start your CSS file.
In this third article, you will learn how to: Add additional styles to the CSS and Learn how links work and how to style them.
Start by opening your CSS file. If you’ve been following along in the series, you’ve already defined your <h1> tag. It’s now time to define your <h2> tags, the paragraph tags and the links.
Side note: It’s important to use <h1> tags in your web pages for a couple of reasons. The first reason is that it allows you to globally assign style to your headers. The second reason relates to SEO (search engine optimization). The details for SEO best practices will be discussed in future articles, but for now, it’s good to understand that search engines look for keywords within <h1> tags to help determine search results. For example, if your <h1> tag contains the text, “How to make ice cream” and someone used a search engine such as Google to look for “How to make ice cream” it’s a good probability that your page will appear near the top of the search results. Of course, several other variables come in to play, but using <h1> tags is an excellent place to start when executing your SEO strategy.
Defining Your Styles: Using CSS
Type the following into your CSS to define your first-level header, second-level header and your paragraphs:
- H1 {text-align:left; color:black; font: normal 20pt “Arial Black”}
- H2 {text-align:left; color:black; font: italic 12pt “Verdana”}
- P {text-align:left; color:black; font: normal 10pt “Verdana”}
A good rule of thumb when it comes to fonts is to never use more than three different fonts on a given page. Try to use one font style for your header <h1>, a slightly smaller and different font for the subheader <h2>, and then the same font but a different size for the paragraphs <p>. Also, keep your styles consistent from page to page.
Now, type the following to define your links. Here, you might want to use your own preferences. The following provides some ideas and suggestions as to what is possible (and commonly used):
- A:link {color: blue; text-decoration:none}
- A:visited {color: gray; text-decoration:none}
- A:hover {text-decoration:underline}
It was true in the beginning and it’s still true today: the vast majority of websites designate a link with the color blue. Most sites also provide some kind of visual clue or transitional effect to show when you are hovering over a link with the cursor. Also, it’s a good idea to change the color of a link after a visitor has clicked on it. This provides the visitor a reminder that they already visited that page. That may or may not prove useful to your site.
Creating a Link: Using the Anchor Tag
Before moving too much further, it’s time to learn how to create a link (aka anchor tag); after all, you just learned how style one. In your .htm file, between the <body> tags, type:
<h2><a href=”http://www.google.com/” target=”_blank”>My first link</a></h2>
You should recognize the <h2> as being your second-level heading. The new code is the “a href=“. That’s how all links start. You then type any valid URL inside the quotes. For added functionality, the target=”_blank” simply means that a new browser window will open when the visitor clicks the link. If the link takes the visitor off your site to another site, you might want to use this, so the visitor can easily come back to your site. If you’re simply linking to another page within your own site, then it’s good practice to eliminate this code. The text, “My first link” can be any text you want to describe where the link will take the visitor. In this case, the link will open Google.com. To end the link, you need the closing tag </a> and then to finish, you need the closing tag </h2>.
If you’re playing along at home, go ahead and test this now. You can test your page a couple of different ways. The first way, is to simply click the Preview button in your HTML editor. Or, you can navigate to your .htm file in your folder structure and click on it. Doing so will open your web browser. Click the link. You should see a new window open to Google.com. Close that new window. Your web page should still be open. Take note that your blue link has turned gray (if you used the same code in the above examples).
Adding Images: Using the IMG Tag
At this point, you might be thinking that your page is looking pretty barren with no images. It’s time to add a picture to your site. First things first, add a .jpg to your Images folder. If you have no .jpg files, simply go to Google.com, click Images, and search for the image of your choice. Make sure there’s no copyrights attached to the file and then save it in your Images folder. Now, type the following between the <body> tags:
<img alt=”earth (213K)” src=”Images/earth.jpg” height=”350″ width=”350″ />
The text within the first set of quotes appears in the web browser in the event that the visitor’s browser does not support images. The src is exactly what it sounds like, it’s the location of your image. You can use height and width to spoecify the size of the image.
Looking at your preview, you’re seeing a lot of left-aligned content. It’s time to create a page layout. You will learn how to do just that in the next article in this series!
