Lesson: Creating HTML Pages

Understanding HTML Doctypes

When you choose to create a new HTML document via CTRL+N or File > New..., you get the following New Document dialog:To start with a basic blank HTML page, you should select HTML for the Page Type and "<none>" for the Layout. But what about the DocType? The DOCTYPE is used to specify the "flavor" of HTML you want to use.

It used to be pretty important to understand the different DOCTYPEs, but with the introduction of HTML5, there is an easy way out, which we highly recommend as it is both simpler and backward-compatible. DOCTYPEs differ, so just go with the new HTML5 DOCTYPE as it's easier to remember.

It is possible that you are working on a development team or project that has standardized around one of the other DOCTYPEs. If so, you may want to stick with that one. However, unless otherwise instructed by a manager or site administrator, you should choose the HTML5 DOCTYPE.

Adding a Title to Your Page

The title of an HTML page does not show up on the page itself, but it is important to include for a couple of reasons:

1. The title shows up on the browser tab as shown below making it easy for users to navigate between tabs:
2. Search engines present the page title as the heading of a search result:
3. The title plays a significant factor in the search results themselves. The page title gives Google and other search engines a good idea of what the page is about.

In Dreamweaver, you enter the page title in the Title field on the Document toolbar:

To illustrate let's add a title to ClassFiles/Dreamweaver/Exercises/hello-world.html:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already open.
2. Place your cursor in the Title field on the Document toolbar and type "Hello world!"
3. Save your page.
4. Preview the page in your browser (File > Preview in Browser). You should see the title on the tab heading:

Paragraphs, Headings and Blockquotes

Paragraphs

The paragraph is the default format for a block of text. Just like in a word processor, when you press Enter at the end of one paragraph, Dreamweaver begins a new paragraph.

To illustrate let's add a paragraph to ClassFiles/Dreamweaver/Exercises/hello-world.html:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already open.
2. Place your cursor at the end of the first line of text and press Enter (Return on a Mac).
3. Type the following:
   • The text 'Hello world!' is very often used in the first exercise of programming classes.
4. Save your page.
5. Preview the page in your browser (File > Preview in Browser). It should appear as follows:

Headings

HTML supports six levels of headings. Heading 1 is the most important and Heading 6 is the least important. Like paragraphs, headings are block-level elements, meaning that they affect the whole line of text (or multiple lines if the heading is long enough to wrap). Later in the course, we'll see how you can control the look of headings, but by default, they are bold and the size of the text changes based on the heading level:

There are several ways to add headings in Dreamweaver, but the most common is to use the Properties Inspector. To illustrate:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already open.
2. Place your cursor anywhere in the first paragraph (i.e, the "Hello world!" paragraph).
3. Select "Heading 1" for the Format in the Properties Inspector:
4. Save your page.
5. Preview the page in your browser (File > Preview in Browser). It should appear as follows:

You can also add headings from the Format menu or using shortcut keys:

Blockquotes

Blockquotes are used to designate quoted blocks of text. In Dreamweaver, blockquotes are added by clicking on the Blockquote icon in the Properties Inspector:

To remove the blockquote, click the Remove Blockquote icon () to the left of the Blockquote icon.

To illustrate let's add a blockquote to ClassFiles/Dreamweaver/Exercises/hello-world.html:

1. Open ClassFiles/Dreamweaver/Exercises/hello-world.html in Dreamweaver if it's not already open.
2. At the end of the first paragraph under the heading, type "According to wikipedia:"
3. Press Enter to add a new paragraph.
4. Open ClassFiles/Dreamweaver/Exercises/hello-world-blockquote.txt and copy all the text.
5. Switch back to hello-world.html and paste the text into the new paragraph you added.
6. In the Properties Inspector click on the Blockquote icon ().
7. Save your page.
8. Preview the page in your browser (File > Preview in Browser). It should appear as follows:

Adding Content to Your Page

In this exercise, you will add content to your web page.

1. Create a new HTML page and save it as index.html in your Exercises folder.
2. Add content so that your web page will look like this in the browser:
3. Save your page and open it in the browser. Does it look like the screen shot above? If not, go back to Dreamweaver and fix it.

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.

Breaks and Horizontal Rules

As we have discussed, when you press Enter in Dreamweaver, a new paragraph gets added. Sometimes it is desirable to have a hard return appear within a paragraph. In HTML, this is called a break. In Dreamweaver, you can add a break by pressing Shift+Enter.

Horizontal rules are used for visually separating content. For example, you might use them to section off blocks of related content in an article or to provide a separator above the footer or below the header.

To add a horizontal rule, do one of the following:

• In Dreamweaver CS6 Select Insert > HTML > Horizontal Rule:
• In Dreamweaver CC Select Insert > Horizontal Rule:
• Make sure the Insert panel is open (Window > Insert): And select Horizontal Rule from the Common Insert panel:

Special Characters

Special characters (i.e, characters that do not show up on your keyboard) can be added to your pages via in Dreamweaver CS6 Insert > HTML > Special Characters:

Dreamweaver CC Insert > Character . If you do not see the character you are looking for - Insert > Character > other will allow you to choose more symbols.

Adding Breaks and Horizontal Rules

In this exercise, you will make some modifications to /index.html.

1. Open ClassFiles/Dreamweaver/Exercises/index.html in Dreamweaver if it's not already open.
2. Modify the page so it will look like this in the browser:
3. Save your page and open it in the browser. Does it look like the screen shot above? If not, go back to Dreamweaver and fix it.

Solution:

The solution to this exercise will be reviewed in the presentation that follows in the next activity.