HTML Tutorials > Day One > Page 2

Making your First Page from Scratch

Create a new web page in Dreamweaver. In the code view, clear out everything Dreamweaver wrote in there to begin with so you are left with an empty page.

All web pages coded within basic HTML (which is what we are doing) must begin with an <HTML> tag to let the web page know that the HTML code will be written from that point. The very last thing on every web page must be a </HTML> tag to end the HTML coding. Another tag to put at the top of your page is the <TITLE> tag. Anything you put in-between the <TITLE> and </TITLE> tags will display on the top of the browser. It's a good idea to have one of these on every page for organization and for professionalism. This is one of the Tips to Design referred to on another section of our site. Another tag that should be on every web page is the <BODY> tag (and </BODY at the end). This should always come after your title and before your real page code starts. The body tag is used for page styling. Some of its attributes can be will be written about in later tutorials. It should be closed off right before the </HTML> tag is placed. Also, play with your <b>, <i>, <br>, and <p> tags that you have also now learned and make a page out of them. Here's an example page I made that should look somewhat similar to yours.

Code Example:

<HTML>

<TITLE>My First Web Page</TITLE>

<BODY>

<p><b>I'm trying out a little bold text.</b></p>

<p><i>Maybe a little bit of italics now too.</i></p>

<p><b><i>Maybe some of both</i></b></p>

<p>I'll<br>even<br>try<br>some<br>line<br>breaks</p>.

<p>I don't want to forget to end the HTML code!</p>

</BODY>

</HTML>

Code Display:

I'm trying out a little bold text.

Maybe a little bit of italics now too.

Maybe some of both

I'll
even
try
some
line
breaks.

I don't want to forgot to end the HTML code!

To test out your page you have just made in the Code view of Dreamweaver, press the F12 key on your keyboard. This should open up Internet Explorer and show you what you just coded. You've just coded your first web page. Yay.

Paragraph Alignment

With this section, you will be working with different tag attributes in HTML coding for the first time. A tag attribute is something added on to a regular tag (such as <p> in this case) which make it do different things. The attributes are tagged on to the opening tag, but the closing tag is left alone. They often involve setting something to = "something". In this case, we will talk about align attributes that are common in most tags. Here's a bit of code to demonstrate what these features can do.

Code Example:

<p align="left">I'm aligning the text left now, which is the default orientation.</p>

<p align="center">Now I'm in the middle of the page.</p>

<p align="right">Now I'm on the right side.</p>

Code Display:

I'm aligning the text left now, which is the default orientation.

Now I'm in the middle of the page.

Now I'm on the right side.

Back to Page 1 | On to Page 3


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