HTML Tutorials > Day One

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


This web page created, developed, and maintained by Kyle Spahn and Mr. Krebs.