Hi kids, it’s time
for lesson 2. This lesson will deal with text alignment and lists. We’ll
begin with defining Block-level and Text-level elements. An element that
affects a paragraph or multiple paragraphs is a Block-level element and
elements that affect things as small as a character or word are referred
to as Text-level elements. If you remember from lesson 1, an element is
basically the word within the HTML tag. For example, <html> is an HTML
tag. We’ll start by creating a basic HTML file in notepad. So just open up
Notepad and type in the following HTML code:
<html>
<head><title>Lesson two</title></head>
<body>
</body>
</html>
Save it as a text file named lesson2.txt, right-click on the file and
change the file extension from .txt to.html. Double-click on the file and
it should open up in your browser. It will be a blank page but should have
Lesson two displayed in the title bar.
In your browser, select view then source and the file should come up in
Notepad again. We will be toggling back and forth between Notepad and your
Browser.
Let’s start by adding simple text. We’ll start a paragraph with the
paragraph tag <p> So between your two body tags, enter the following code:
<p>This is a line of text. It’s the beginning of a paragraph.</p>
<p>This is another paragraph. Notice how the browser automatically
separates them with a line between each paragraph.</P>
Your code should look like this:
<html>
<head><title>Lesson two</title></head>
<body>
<p>This is a line of text. It’s the beginning of a paragraph.</p>
<p>This is another paragraph. Notice how the browser automatically
separates them with a line between each paragraph.</P>
</body>
</html>
The paragraph tag is a Block-level element because it begins and ends a
paragraph. You’ll also notice that it is a container tag because it uses
both an opening and closing tag. So let’s enter an example of a Text-level
element that is an empty tag. Let’s use the line break element. After the
text you’ve already entered, type the following code:
<p>This is more text with the line break element<br />
Notice how this sentence begins on a new line.
But this one doesn’t because the line break tag was not used.</p>
Save the file and hit the refresh button in your browser. Your code should
no look like this:
<html>
<head><title>Lesson two</title></head>
<body>
<p>This is a line of text. It’s the beginning of a paragraph.</p>
<p>This is another paragraph. Notice how the browser automatically
separates them with a line between each paragraph.</P>
<p>This is more text with the line break element.<br />
Notice how this sentence begins on a new line.
But this one doesn’t because the line break tag was not used.</p>
</body>
</html>
Let’s play around with text alignment now. We’ll use <p> tags with the
align attribute and the center value to center the text. Enter the
following code into your file:
<p align=”center”>This text should be centered</p>
<p align=”left”>This text should be to the left</p>
<p align=”right”>This text should be to the right</p>
Save the file and hit the refresh button in your browser. Your code should
no look like this:
<html>
<head><title>Lesson two</title></head>
<body>
<p>This is a line of text. It’s the beginning of a paragraph.</p>
<p>This is another paragraph. Notice how the browser automatically
separates them with a line between each paragraph.</P>
<p>This is more text with the line break element.<br />
Notice how this sentence begins on a new line.
But this one doesn’t because the line break tag was not used.</p>
<p align=”center”>This text should be centered</p>
<p align=”left”>This text should be to the left</p>
<p align=”right”>This text should be to the right</p>
</body>
</html> |
