How to Create Web Pages with HTML5
Add Heading Tag and Style sheet Settings
You should complete these lessons in order. If you haven't completed the first exercise, go back and start there.
Completing Your Page Heading
We're going to complete our web page heading by adding some site heading text.
To do this, we only need to add 1 line of code to our HTML page.
Then we'll define the appearance using our style sheet.
Third Exercise
Copy and Paste the code shown in drk red inside of the header element:
<header>
<h1>I Love Responsive Web Design</h1>
</header>
Save the HTML page.
Look at it in your browser if you want to see how it displays before you add the style settings.
Hmmm. Now a black box and a black line. Where's the text?
Define the H1 element
We added a h1 element for our site heading text to the html code. We need to define the text and locate it in the desired positions using the style sheet.
The next block of CSS code defines the appearance of the text of the h1 tag and then positions it within the header element.
Copy and paste the code into your style sheet.
Explanation below:
header h1 { font-size: 28px; color: #efefef; float: left; margin: 1% 5%; }
Save firstpage.html
Font size should be defined in pixels. (*Much less confusing than ems for beginners)
The color property defines forecolor. It is defined here in hexidecimal code. We're changing from the default value because the text will be on a darker background.
The float property aligns an element to the left or right within its container.
You could also use text-align: left
for left aligning the h1 tag.
The margin property is defined in percentages or relative values. It produces space between the edge of the element and the inner wall of the division. The settings are read: 1% top and bottom, 5% left and right.
Once you get everything added to the document and saved, look at the HTML page with a browser.
Refresh or reload if the page is already open.
The Result
If this is what you see, you are ready to continue:
Were you successful?
The display may vary in appearance depending on the width of your browser window and the viewing resolution.
If you don't see something similar, check the code that you added to your HTML page and style sheet.
The exact order of placing entries in your style sheet isn't critical except for the first and second blocks.
You should try to keep it organized by placing division definitions with division definitions and text definitions with text definitions.
We'll show you a practical order for placement as we go along.
QuizTime
Test Your Comprehension
Take a quiz on the information presented so far.
Ready to Proceed
When you get everything working with the desired result in your browser, you are ready to proceed to the next exercise.
Don't go on unless you have a basic understanding of the procedures presented so far.