We Are Web Designers. We Are Webbed Feet UK. We are a creative web design agency using the latest techniques to create the best sites.

A dummies online guide to HTML Part II

In part one of this guide we learnt how to create a simple web page and view it through our favourite browser. If you have not yet read part one it would be worthwhile going back and reading it prior to part two. In this next guide we are going to learn a few more HTML entities, as well learn how to create an external CSS (Cascading Style Sheet) file and reference to it on our page so we can begin to style elements on our web page design.

Some useful HTML entities

Paragraph tags <p>Text in here</p>
Header tag <h1>Text in here</h1>
Header tag <h2>Text in here</h2>
Header tag <h3>Text in here</h3>
Header tag <h4>Text in here</h4>
Header tag <h5>Text in here</h5>
Header tag <h6>Text in here</h6>
Strong emphasis (bold) <strong>Text in here</strong>
Emphasis (italic) <em>Text in here</em>
Line break <br />
Link <a href=“html://www.example.com/somepage.html”>Link text in here</a>
Image <img src=“myimages/mypic.jpg” />

The most commonly used header tags are h1 (main header) and h2 (sub header). You can use the other headers, but usually there is limited need.
An image can be aligned left or right by using the align=“” attribute, i.e. <img src=“myimages/mypic.jpg” align=“right” />

Adding to our web page

I will now edit the web page we created in part one of this guide. I will add an image, more text, a link, and impose some page structure by using a sub header for additional text.

<html>
<body>

<h1>About Webbed Feet UK - Salisbury Web Design</h1>

<img src=”http://www.webbedfeetuk.com/web-design-company/logo-web-design-companies-salisbury.png” align=”right” />

<p><a href=”http://www.webbedfeetuk.com/index.php”>Webbed Feet UK</a> is a friendly and successful web design company based in Salisbury, Wiltshire. We have produced many professional web sites for satisfied clients throughout Europe since we were established in 2001.</p>

<h2>Professional, experienced web design experts</h2>

<p>The reason for our success is due to the close collaboration with our clients. Our customers can be involved with the site design as much or as little as they wish from the start. We do not use templates like many other web designers, and individually design each web site to suit our client’s needs. This ensures that our work is unique and that each web site is effective and gives our clients the Internet presence that they deserve.</p>

</body>
</html>

The .html should be saved, and then we can view the web page through a browser .

Adding an external CSS file

A CSS can be created to add styling to our page. For now we will created a .css file, link to it in our .html file, and style the background and headers.

We create the CSS file the same way we created the HTML file in the first part of this guide. We open up NotePad, and save the document as a .css file in the same folder as the .html file. I have saved my file as “mycssfile.css”. Now, we open up our HTML file and add this code in-between the <html> and <body> tags:

<head>
<link href=”mycssfile.css” rel=”stylesheet” type=”text/css” />
</head>

So, the webpage.html now has the following code:

<html>
<head>
<link href=”mycssfile.css” rel=”stylesheet” type=”text/css” />
</head>
<body>

<h1>About Webbed Feet UK - Salisbury Web Design</h1>

<img src=”http://www.webbedfeetuk.com/web-design-company/logo-web-design-companies-salisbury.png” align=”right” />

<p><a href=”http://www.webbedfeetuk.com/index.php”>Webbed Feet UK</a> is a friendly and successful web design company based in Salisbury, Wiltshire. We have produced many professional web sites for satisfied clients throughout Europe since we were established in 2001.</p>

<h2>Professional, experienced web design experts</h2>

<p>The reason for our success is due to the close collaboration with our clients. Our customers can be involved with the site design as much or as little as they wish from the start. We do not use templates like many other web designers, and individually design each web site to suit our client’s needs. This ensures that our work is unique and that each web site is effective and gives our clients the Internet presence that they deserve.</p>

</body>
</html>

Our newly created CSS file is now linked to from the HTML file, so we save our .html file and now focus on styling the headers using CSS!

Styling with CSS

I have added the following code to the CSS file:

body {
background:#FFFFCC;
}

h1 {
font-size:24px;
color:#FF9900;
text-align:center;
}

h2 {
font-size:18px;
color:#FF9900;
}

The code is styling everything in-between the <body>, <h1> and <h2> tags.

background:; is used to style the back ground. The colour is placed in-between the : and ;
The colour used in this example (#FFFFCC) is a hex colour code (look online for colour pallets which give you the codes for any colour you will ever need), but you can type out some colours as words, such as background:red; or background:grey;

The other code should be fairly obvious. It would be worth looking at w3schools CSS tutorial for many CSS examples. So, how does our HTML file now look like in a browser after implementing these styles?

The CSS has styled the various HTML entities as we hoped. Go back and try altering the CSS to design the web page to your preference.

Return to articles page


Recent Posts