Getting Started
"HTML" or Hyper Text Mark up Language
is the code that exists behind web pages. Everything you create in Dreamweaver
is made in to HTML automatically by Dreamweaver. Dreamweaver is just a convenient
way of having a visual representation to your code while you are making a website.
This is called a What You See Is What You Get
(or WYSIWYG) editor.
Coding in Dreamweaver
Since Dreamweaver already creates the code for you, you might wonder why it
is even necessary to learn the language. Anybody that knows HTML and uses
a WYSIWYG editor would tell you that their knowledge of HTML helps them greatly
when using the editor. It better allows you to see and understand what the
editor is doing and if it is doing it to your satisfaction. As you may have
already noticed with your basic tutorials with Dreamweaver, there are many
different ways of doing things when creating web pages, so knowing which way
it is doing it can be important. It is suggested that you do all of these tutorials
still in Dreamweaver, but with the "Code and Design" view in use. To get the
"Code and Design" view, go to View->Code and Design on
the menu. Instead of using the bottom half of the screen like you did before,
now use the top half and watch what happens to the page when you make code.
Introduction to "Tags"
HTML tags are the code that drives web pages. They tell the web browser (like
Internet Explorer) how the web page should look and act. They always start
with a left arrow operator ( < ) and end with a right arrow operator
( > ). There are no exceptions to this. What goes between the arrow
operators varies. For instance, to make bold text, you would write <b>text
goes here</b> and it would display as text goes here. You'll notice
with that example that the tag started with <b> (the "b" being for "bold",
conveniently) and ended with </b>. Whatever goes between the <b> and </b> will
be made bold. As hinted at before, all tags must be closed or else they will
run on forever, resulting in improper coding. To close off a tag, it is generally
the same as the opening tag's beginning except with a "/" in it. </b> would
be an example of a closing tag.
Many of the tags you'll use are related to text formatting. It should be noted
that even if you make a tab or press enter for a new line in HTML, it will not make
these changes for you automatically on the output like you'd think it would.
You must use special formatting tags to tell it to do so. I will talk more
about these in the next section. To re-emphasize, here are some examples showing
what you'd write in the text editor (Code Example) and what it would
display in the web browser (Code Display). I will be using many boxes
like these throughout my HTML tutorials.
Code Example: |
I write my text in Dreamweaver's code box like this,
but it displays differently. Why?! |
Code Display: |
I write my text in Dreamweaver's code box like this, but it displays differently.
Why?! |
Some More Important Basic Tags
The <i> tag for Italics acts much the same way the bold tag.
Notice that you can nest tags within each other as well, as long as you close
them off properly. For instance, writing <b><i>Italics and Bold!</i></b> would
look like this: Italics and Bold! Nesting tags within one another
becomes a very important aspect of HTML.
The <br> tag creates a line break. It will skip your text down
one line. It should be noted that the <br> tag is one of the exceptions to
the rules about closing tags. There is no </br> tag that is required after
making a <br> tag.
Code Example: |
A break in the page would be really good right about<br>now. |
Code Display: |
A break in the page would be really good right about now. |
One more very important tag is the <p> tag which creates new paragraphs.
Unlike the <br> tag, the <p> tag does require a closing tag ( </p> ). This
entire page really is a demonstration of the <p> and <br> tags at work, but
one more example could show the difference between <p> and <br>.
Code Example: |
<p>A new paragraph break would suit me much better here because I would like
more spacing than what a page break tag would give me.</p> <p>Here's my new
paragraph!</p> |
Code Display: |
A new paragraph break would suit me much better here because I would like
more spacing than what a page break tag would give me.
Here's my new paragraph! |
On to Page 2
|