DayDream warriors
Dr Psychotic Home PageDayDream Warriors Main PageArticlesMediaCommunityContact
Basic HTML...Lesson 2 By Bob Craypoe
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>
Back To The Top Of The Page

This Site Is Brought To You By Craypoe.com: Craypoe.com HOME