Lesson Practice 1-2: Words, Words, Words
Lesson Purpose:
You will now create a new web page from your Template, and practice working with basic text elements. You will observe the difference in spacing between elements and between lines separated by line breaks. You will also learn about manual indenting techniques using HTML codes.
Directions: Headings Paragraphs and Indenting
- Open template.htm in notepad++ and immediately resave it as text1.htm
- In the title element, add the title: Headings and Paragraphs
- Add Heading elements to the body:
- In the body element, add an h1 element with the text: This is a level
one heading.
- Under it, add an h2 element containing the text: This is a level two heading.
Continue adding h# elements until you have six similar lines, one for each level of heading.
- Save the document, then open it in Internet Explorer and see how the six heading levels behave on a browser. Return to Notepad++.
- Adding paragraph elements:
- After the last heading, add a paragraph element. Between the tags, type several sentences, enough to cover about three lines on the screen.
- On the line after the first papagraph element, add a second paragraph element. Between the tags, type a short poem of your choice, using the line break tag (and pressing enter to stop the line there in Notepad++) after each line.
- Add a third paragraph element below the others and type another several lines, or copy the text from the first paragraph between the tags.
- Save the file; view it in Internet Explorer (refresh if you left the page open). You should see the difference in line spacing between the paragraphs and between the lines of the poem, where you line used breaks. Return to Notepad++.
- Indenting text using HTML:
- At the beginning of the first paragraph element add the following text:
Adding the nonbreaking space entity
enables you to create indents wherever you want them.
- To make the first line indented, add 5 nonbreaking space entities ( ) at
the beginning of the paragraph.
- For more substantial indents, you might want to use the blockquote element.
Just inside the third paragraph element (not the poem)
nest the blockquote element:
<p><blockquote>(text is between)</blockquote></p>
- To indent a block of text even more you can nest more than one set of blockquote elements. In the paragraph element containing the poem, add two nested blockquote
elements.
- Save your work, and view the page in Internet
Explorer. Make any necessary adjustments to the appearance of your paragraphs. When you are satisfied with your work, save one more time.
- Publish (copy) your file to your Web Design publish folder on the Common drive.
|