Welcome to the third installment of the Web Design Basics series, if you have followed us so far, you will have already created a basic HTML and CSS file, with some basic CSS styling applied. If you haven’t got that far yet, please head to the first or second tutorial to get started. To advance any further with CSS, we need to create a basic HTML structure to work with. In this episode, we will cover <div>, <span> <p> and <h1> tags.
First things first, open up your index.html file we created in the first tutorial. We will be making some modifications to this file, so it might be worth creating a backup to make sure that you can always get back to where you started if things go wrong. It is worth doing this as you design because, occasionally, you’ll be working on some HTML or CSS and make a mistake. Finding that mistake can be time consuming. Having a backup allow you to find the mistake a lot quicker and easier!
Once you have opened up your index.html file you will need to make the following adjustments. We’ll go through what they mean once the edits have been made.
<html> <head> <link rel="stylesheet" id="" href="style.css" type="text/css" media="all"> </head> <body> <div> </div> <div> </div> <div> <div> </div> </div> </body> </html>
As you can see, we have put a few empty tags in our HTML <body> tag. This is using HTML to structure the page in a format that CSS can understand and work with. <div> is short for division, and is a structural HTML tag that forms the majority of a pages structure. By default, a <div> tag stretches 100% of the width of it’s parent and has 0 height. When content is put into a DIV tag, unless a height is specified in CSS, it will expand in height. DIV tags can be styled using CSS, which we will be tackling in the next tutorial to create a basic page structure.
At the moment, if we were save and view out new HTML file, we would see nothing on the page. This is because we have not yet included any content into our page, just the structure. To see our efforts in action, modify the code as follows:
<html> <head> <link rel="stylesheet" id="" href="style.css" type="text/css" media="all"> </head> <body> <div> The page Header </div> <div> The Sidebar </div> <div> <div> The Content </div> </div> </body> </html>
Now, you can see the three <div> tags have content ready to display. If you remember, we learnt that the <div> tag has 100% width by default, this means that each of our <div> tags appear on a separate line on the page. In the next tutorial, we will start fleshing this new HTML structure with CSS to create a basic structure for our website. But, for now, lets cover some additional HTML tags.
The <p> tag is another very commonly used HTML tag to specify a paragraph of text. To use the <p> tag, simply view the HTML below:
<html> <head> <link rel="stylesheet" id="" href="style.css" type="text/css" media="all"> </head> <body> <div> The page Header </div> <div> The Sidebar </div> <div> <div> <p>The content</p> </div> </div> </body> </html>
As you can see, we have wrapped our content text into <p> tags. This will put the text inside the <p> tags into a paragraph format. Refresh your browser page to view the changes. You should see some padding and perhaps a font-size change when viewing the new additions. CSS can be used to change the formatting of the <p> tag, just like any other HTML tag. For example, if you wanted to change the colour of all of the paragraphs on your website, you can do this in CSS.
Another useful tag is the <span> tag. This is another structural type of HTML tag that is similar to a <div> except that a <span> will not automatically assume 100% width. It is useful when creating header text that need a background-colour or sophisticated borders for images. The <h1> tag is a text formatting tag that is used (primarily) to display header text. Typically, the <h1> tag will have a larger, more bold font, perhaps a different colour and will have more padding to draw the readers eye to it. Similar to <h1> there is also <h2>, <h3>, <h4> etc tags which become smaller respectively. By default, the <h1> tag will have a larger and more bold font, but similarly to the <p> tag the <h1> tag can be styled using CSS. To see the <h1> tag in action, make the following changes:
<html> <head> <link rel="stylesheet" id="" href="style.css" type="text/css" media="all"> </head> <body> <div> <h1>The Header</h1> </div> <div> The Sidebar </div> <div> <div> <p>The content</p> </div> </div> </body> </html>
Now, you should see the header text is a lot larger than the remainder. In the following tutorial, we will be learning how to style our new tags. Stay tuned!