You are here: Home / Computer / Web Site / Dreamweaver 8 / HTML code

Html code

In this section we will start creating our web page.

  1. New File
  2. Display view
  3. HTML

 

New File

We will launch the Files tab, and then the Files sub-tab.

DW8 files tab

To create a new project right click on Site-My Project (C:\....), and then on create a new file...

Rename it "index.html" (don't forget the .html)

FYI: the file "index.html" is the first file of your project. It is the Home page, or the first page that will display when going to your site.

For all other pages, it's best that you name them in such a way that you will recognize them easily.

A double click on index.html will make your page appear in Dreamweaver's main page

 

Display View

Dreamweaver 8 gives you 3 different display views

  • Code
  • Split
  • Design

 

Code View

DW8 example of code view

HTML

It is a coder language that defines your page, so that it can be placed on your internet browser. To learn the HTML code, please go to this site.

Each part (text, table, picture,...) is surrounded by Tags (the arrows)

(<p> </p>) for paragraph, (<table> </table>) for a table, (<img> </img>) for an image, etc.

We will not teach you HTML here, so let's go to the designer mode.

 

 

Designer mode

DW8 design view example

The first thing to do is to draw an overview of your project on a piece of paper.

What do you want to do?

A logo, a page header, a menu, page content, or the footer of a page?

A simple way to lay out your page is through the use of tables. It gives the project a nice look.

Using div or templates is a little more complex.

 

 

HTML Tags

Document

<html></html> : html document

<body></body> : main body of the document

 

Titles

 

<h1></h1> : 1st level title

<h2></h2> : 2nd level title

<h3></h3> : 3rd level title ( and so on until level 6)

 

Text Elements

 

<p></p> : paragraph

<ul></ul> : bullet list (unorganized list)

<ol></ol> : numbered bullet list (organized list)

<li></li> : element in a list

<a href=''''></a> : hypertext link

 

Table

 

<table></table> : table

<th></th> : line or column legend

<tr></tr> : table line

<td></td> : table column

 

Positioning

 

<div></div> : block definition