Getting Started

It is important to understand that HTML (hypertext markup language) is a text-based language. In other words, unless you specifically tell the browser how something should look, it will not display it the way you would like.

Using Dreamweaver, webpages are automatically saved with the extension .html.

Try This:

Choose: File >> Save as

Locate our web folder.

Type: index.html (Remember your initial page should always be saved as index.html to be recognized by a web server.)

Although we haven't put any content on our page, we have just created our first web page. In the Site panel on the right hand side of your screen you should now see your index.html file. You should now be able to see the value of defining your site so that you are able to view all of your files.

Tags

The basic structure of an HTML document includes tags, which surround content and apply meaning to it.

Recall that the W3C sets the web standard. If you use Dreamweaver to create a file and choose Make Document XHTML complaint the following DOCTYPE is added to your file. You are not expected to memorize this statement but you should be able to recognize that it in the head section of your document and why it is there.

Again if using Dreamweaver the following information will be created each time you create a file. To the right of the code commenting is used to describe what each tag is used for.

<html> <!-- indicates the beginning of the file -->
<head> <!-- information related to displaying the file-->
<title>Untitled Document</title> <!-- changes the title bar -->
</head> <!-- ends the head section -->
<body> <!-- begins what will be displayed in browser -->
<p>This is my first web page. </p> <!-- text to be displayed -->
</body> <!-- ends the body of the web page -->
</html> <!-- ends the web page -->

Because tags surround the content, there must be and opening tag and a closing tag. The two types of tags vary slightly. Here are some examples of opening and closing tags.

OPENING CLOSING
<p> </p>
<title> </title>

Elements

Elements are what tags surround. They will make up the various parts of the webpage.

Try This:

Change the title of the page to All About Me:

There are 2 ways to do this:

  1. In Design view, type into the title text field at the top of the screen.
  2. In Code view, replace the text between the title tags <title>All About Me</title>.

Go to your code view and inside your <body> tag, type: "This is my first page!"

For any changes that need to be made to your web page there are two necessary steps.

  1. Go back to Dreamweaver and make any necessary changes.
  2. Save the changes.
  3. Go back to your browser and refresh the window either by choosing View >> Refresh or by pressing F5.
  4. Replace "This is my first page!" with "

    I am a grade nine student at St. Francis Catholic Secondary School. I am taking Introduction To Business Technology and enjoy learning how to use the different software in this class. I hope to take future business courses to learn even more about these programs.

    Currently we are studying how to make web pages. The tutorials will help us to understand what HTML and CSS and how to use them to create effective webpages. When we understand how to make the pages we will link them all together to create a website. I'm rambling right now because I not sure what else to write.

  5. Ensure that <p> tags are surrounding both paragraphs.

 

NEXT LESSON