Lesson 03: Marking Up Text

In this lesson you will learn about each of the units within this course.
This lesson should take you approximately 60 minutes.

Introduction | Block-Level Elements | Line Breaks | Inline Elements | Generic Elements | Special Characters | Activity

Introduction

In this lesson you will learn how to mark up your text using block-level, inline and generic elements. Make sure to keep your code clean and simple. The appearance of you web page will change with the things we add in this lesson but the coding we add now is more to organize each element on our page that to change the look and feel. We will do this latter with style sheets.

Block-Level Elements

Block-level elements are like the building blocks of your initial mark-up of the page. They start things on a new line and give a little space above and below the element. Use these to create an outline of your information.

Type	Element(s)
Headings	h1,h2,h3,h4,h5,h6
Paragraphs	p
Block (long) quotes	blockquote
Preformatted text	pre
Various list elements	ol,ul,li,dl,dt,dd
Horizontal rule (lines)	hr

Paragraph | <p>

Paragraph tags are the most basic elements. Simply open a <p> tag at the beginning of a paragraph and put a closing </p> tag at the end. Paragraphs can contain text, images and inline elements within the p tags but make sure not to include any other block elements.

Paragraph Tutorial

Activity: Add the paragraph tag to the paragraph of text on your index page.

top

Headings | <h1,2,3,4,5,6>

If you have ever made an outline you know that headings are used to communicate the hierarchy of information. Even though heading tags will change the way your text looks in HTML, you need to ignore the presentation because we will be changing that with our style sheets. Think of the heading numbers as being levels of importance. For example, if you are planning to use the heading tags:

• h1 might be used for the title of your page
• h2 might be used for section headings
• h3 might be used for sub section headings

Heading Tutorial

Activity: Use a heading 1 tag for all page titles on the School Adz web site. Use heading 2 tags for the section titles on the business page.

top

Long Quote | <blockquote>

Block quotes are for long quotes, a testimonial or a section of text from another source. The text within a block quote should be contained within another element such as a paragraph tag.

See the "blockquote" example in the "Coding Examples" folder.

Practice Activity: Try using the blockquote tag on the opening paragraph on the home page. Then remove it.

Preformatted Text | <pre>

Preformatted text allows you to format your text with as much white space as you want. Basically your text will look exactly the way you typed it with extra spaces and carriage returns. But by default it will be displayed in a constant width font like Courier. There is also

top

Horizontal Rule | <hr />

The horizontal rule is a simple tag often used to separate section of your page. It basically puts a line across your page with a little space above and below. Horizontal rules can be formatted use style sheets. It is a self closing tag so make sure to include the "space forward slash" at the end.

Activity: Add a horizontal rule to at the bottom of all the web pages.

Horizonal Rule Tutorial

top

Lists | ol,ul,li,dl,dt,dd

There are basically three types of list in HTML.

• Unordered list: These are list who order is not structured. By default a round bullet will be placed in front of each item (just like this unordered list) but you can change it with a style sheet using the "list-style-type" property. You will use the <ul> and </ul> tags to open and close your list. Then use the <li> and </li> tags to open and close each item.
• Ordered List: These are list who have a structured order with numbers or letters. You can use a style sheet to format this type of a list and you can define the number you want to start inside the opening ordered list tag with a start attribute. (start="5" will start the list at 5) You will use the <ol> and </ol> tags to open and close your list. Then use the <li> and </li> tags to open and close each item.
• Definition List: Definition list are use to indent the meaning of a definition after the word. Start the list with an open <dl> and a close </dl> (definition list). Then use an open <dt> and a close </dt> around the definitions term. Finally, use an open <dd> and a close </dd> around the definition itself.

W3C Recommendations for list.

List Tutorial

Activity: Use a series of unordered list to help organize the information on the businesses and form pages and the navigation links on all pages. Use a definition list to format the information on the contacts page. We will use style sheets to format these list later.

top

Inline Elements

Line Breaks | <br />

Sometimes you want to break up a line of text but don't want that extra space above and below that a paragraph tag give you. That is where line breaks come in. The inline line break element <br /> allows you to force text or images onto the next line without that space. It is an empty element so it will be self closing.

Inline Text Elements | <em> and <strong>

We are only going to focus on the two semantic inline text elements that indicate that text should be emphasized. The cool thing about these two is that some screen readers will change the tone of voice to convey the emphasis! This are tags need to enclose the text they are formatting with an open and closing tag.

• em: Text that should be emphasized. This will usually display as italisized text.
• strong: Text that should be strongly emphasized. This will usually display as bold text.

Activity: Emphasize the word FREE on the home page.

Emphasis Tutorial

top

Special Characters

Since HTML uses characters like the < (less than) sign in the coding of a web page browsers might mistake it if you try to using it in the content of your page. So there is both a "numberic" and "named" way to get these special characters onto your web page. Use the "Special Characters" chart in the Files/Coding Examples folder for reference.

Activity: Replace the quote marks on the home page with special characters.

Special Characters Tutorial

Generic Elements

Generic elements allow you to create a block level <div> or inline element <span> that has not inherent presentation but uses style sheets to do all the formatting. We are going to use the <div> tag to create block level containers for positioning each of the sections of our page. Then when we apply our cascading style sheets we can format these sections anyway we want.

Since both the div and span tags are empty you need to give them an element identifier (id or class). The id identifier is used for identifying unique or one of a kind elements. For example we are going to use the following div elements, but only once on each page. These elements must be opened and closed around the text that you want to format. The class identifier is used to identify similar elements so it can be used multiple times on the same web page.

Activity: Add the following div tags to the web pages.

• All pages: <div id="head"> | <div id="nav"> |
• Home page and contacts page: <div id="content"> |
• Form page: <div id="form"> |
• Business page: <div id="buslist"> |

Activity: Add a current page span tag to the title of the current page in the navigation list.

Generic Elements Tutorial

top

Turn it in: Upload all four web pages to your FTP folder. Send your instructor an email with the URL's for each of the web pages.

top

Activity Summary

1. Add the paragraph tag to the paragraph of text on your index page.
2. Use a heading 1 tag for all page titles on the School Adz web site. Use heading 2 tags for the section titles on the business page.
3. Add a horizontal rule to at the bottom of all the web pages.
4. Use a series of unordered list to help organize the information on the businesses and form pages and the navigation links on all pages. Use a definition list to format the information on the contacts page. We will use style sheets to format these list later.
5. Emphasize the word FREE on the home page.
6. Replace the quote marks on the home page with special characters.
7. Add the following div tags to the web pages.
   • All pages: <div id="head"> | <div id="nav"> |
   • Home page: <div id="content"> |
   • Form page: <div id="form"> |
   • Business page: <div id="buslist"> |
8. Add a current page span tag to the title of the current page in the navigation list.

Grading Rubric

Tag	Point Possible
p	2
heading	4
hr	2
lists	4
Emphasis	2
div	4
special character	2
Total	20

top