Welcome to chapter 3 of part 1. In Chapter 2
of these series,we created our first XHTML page and saw how the main XHTML tags work. We did not put much code in our first page but today, we are going to pimp our page by putting headings, paragraphs and format our text with <em> and <strong> tags!Chapter 3: Pimp my page!
I know most of us are tired of reading long stories, but believe me it is not an easy task to teach and entertain at the same time.
So let's keep stories a side for today and dig straight into practice!
Headings
Organizing your web page is as simple as 1,2,3!
Let's add a heading to our page. Am assuming you still have the code we wrote in our previous chapter. If you don't, please find it here
.The <hn>tag</hn> tag is used for putting headings in our pages, where n is a number from 1-6. The bigger the number , the smaller the size of the heading. For example <h1>My heading </h1> is bigger than <h2>My heading</h2>.
Fire up your text editor and put this code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>My first web page !</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
We just added two lines to our previous code. The result is shown on the following image :
Go ahead,have fun and play around with <h3> and </h3> etc. I will encourage you type rather than copying and pasting,that way , you will remember most of the commonly used tags!
Paragraphs(<p></p>)
The good thing about the XHTML language is, it is close to the human language(English to be precise!). If you want to display a paragraph, inform the computer of your intentions.
<p>Please computer , I want a paragraph here! </p>
By putting <p> , you are telling the computer, this is the beginning of my paragraph and </p> is the end of my paragraph.
Tired of theory? Let's get down to work. Fire up your text editor and put the following code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>My first web page !</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<h1>Heading 1</h1>
<p> This is my 1st HTML paragraph!</p>
<h2>Heading 2</h2>
<p>And this is my second paragraph with a smaller heading</p>
</body>
</html>
. I have a question for you. What will be the result of the following code?
<p>Am learning HTML now.
And will learn CSS later! </p>Does this text appear on one or two lines? If your answer is two, I have bad and good news for you.Let's start with the bad one:Unlike text editors,hitting the "enter" key on your keyboard will not create a new line in HTML
. But the good news is, creating a new line is very simple, put <br/> before the new line: <p>Am learning HTML now.
<br/>And will learn CSS later! </p>Contrary to what we had before,the above code will give us :
Am learning HTML now.
And will learn CSS later!
Try both examples and see the difference! I hope you noted that <br/> is a single tag and you should put a slash at the end.
<strong> and <em> tags
<em> is rendered as emphasized text while <strong> is rendered as strong highlighted text. Let's see an example:
...
<em> This is an emphasized text</em>
<strong>This is strong highlighted text</strong>
..... From now on,I will not put <html>,<header>,<title> or <body> tag in my examples.Yes I know am lazy plus I want my tutorials to look neat and clear. But please do remember that <html> and the <body> tag are compulsory in all HTML documents.
Homework
Don't panic, am not here to torture you, I just want you to put the text on the image in two separate lines! e.g
This is an emphasized text.
And this is strong highlighted text
That brings us to the end of today's lesson! See you soon!
Till then, XoXo
Related links
Learn how to create you website from scratch :Chapter 1 of Part 1
Learn how to create you website from scratch :Chapter 2 of Part 1
No comments:
Post a Comment