facebook twitter
Webucator's Free Adobe Dreamweaver Tutorial

Lesson: Creating HTML Pages

Welcome to our free Adobe Dreamweaver tutorial. This tutorial is based on Webucator's Introduction to Dreamweaver Creative Cloud (CC) Training course.

In this lesson, you will begin adding simple content to an HTML page.

Lesson Goals

  • Learn about the different HTML Doctypes.
  • Learn to add a title to a page.
  • Learn to add headings, paragraphs, and blockquotes to a page.
  • Learn to add breaks to a page.
  • Learn to insert special characters.

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 box:New DocumentTo start with a basic blank HTML page, you should select HTML for the Page Type. 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: Browser Tab
  2. Search engines present the page title as the heading of a search result:Example Search Engine 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 Document Title field on the Properties panel:Document Title Field

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

  1. Open ClassFiles/dreamweaver-cc/Exercises/hello-world.html in Dreamweaver if it's not already open.
  2. Place your cursor in the Document Title field on the Properties panel and type "Hello World"Document Title Field on Properties Panel
  3. Save your page.
  4. Preview the page in your browser (File > Real-time Preview). You should see the title on the tab heading: Result of Document Title Field

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-cc/Exercises/hello-world.html:

  1. Open ClassFiles/dreamweaver-cc/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 > Real-time Preview). It should appear as follows: Preview Page Result

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:Heading Levels in Browser View

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

  1. Open ClassFiles/dreamweaver-cc/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: Heading Menu
  4. Save your page.
  5. Preview the page in your browser (File > Real-time Preview). It should appear as follows: Hello World Result

To add a new paragraph after a heading, place the cursor at the end of the heading text and press Enter.

Blockquotes

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

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

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

  1. Open ClassFiles/dreamweaver-cc/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-cc/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 (Block Quote Icon).
  7. Save your page.
  8. Preview the page in your browser (File > Real-time Preview). It should appear as follows: Hello Word Result in Browser

Dreamweaver users often use blockquotes incorrectly as a quick and dirty way of indenting paragraphs. You should not do this. Blockquotes should only be used to indicate that the content is taken from another source. The proper way to indent paragraphs for formatting purposes is to use CSS.

Adding Content to Your Page

Duration: 15 to 25 minutes.

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: Index Result in 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.

Breaks

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.

Use Breaks and Horizontal Rules Sparingly

Breaks should be used only for content such as poems or addresses. They are very often mistakenly used for formatting purposes only, use CSS alternatives to layout your basic content.

Special Characters

Special characters (i.e., characters that do not show up on your keyboard) can be added to your pages by choosing Insert > HTML> Character . If you do not see the character you are looking for - Insert > HTML> Character > Other... will allow you to choose more symbols.Insert Character Menu

Adding Breaks

Duration: 10 to 15 minutes.

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

  1. Open ClassFiles/dreamweaver-cc/Exercises/index.html in Dreamweaver if it's not already open.
  2. Modify the page so it will look like this in the browser: Browser View of Page
  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.