Professor: Eduardo Navas (ean13@psu.edu)

 

Dreamweaver HTML Lecture #1

HTML stands for Hyper Text Mark Up Language. It was designed to interpret information on a browser. Today, HTML is combined with scripting and programming languages such as Javascript and php. While with web 2.0 the way pages are constructed has changed drastically, knowing the basics of HTML is crucial to develop complex websites.

HTML consists of tags that construct pages, which are customized to follow specific designs. As the web grew, HTML was combined with CSS (Cascading Style Sheets), made to develop websites that are efficient in their maintenance and design.

Following are some of the main tags you should know in HTML

HTML tags to know:

Tags in HTML follow a hierarchy. the tags closest to the object being modified takes precedent. The main tag of an HMTL page is:

<html>
</html>

Notice that the second tag has a slash. This is the second tag. Whatever is inside this tag will be included in the page. Anything outside will be ignored.

All HTML pages must have inside their html tags two important tags:
<head>
</head>
which is not visible by the user, but is hold important information that the browser and search engines will use to evaluate the page, and the

<body>
</body>
which holds all the visible information on any browser.

The second used tag within the body tag is the paragraph tag:
<p>
</p>
This tag allows you to separate content in basic blocks of text. There will always be a line separating one paragraph from the following tag (which could also be a paragraph or other tag that you decide).

<br>
the break tag is used to create a break when you don't necessarily want to start a new paragraph, but rather start a new line.

To create a table use the table tag:
<table>
</table>

Each table has two tags that define its columns and its rows:
Rows:
<tr>
</tr>

Columns:
<td>
</td>

A table will two rows and one column will be defined as follows:

<table>
<tr><td>the content goes in here for the first td</td></tr>
<tr><td>The content goes in here for the second td</td></tr>
</table>

A table with two rows and two columns will be defined as follows:
<table>
<tr>
<td>the content goes in here for the first td</td>
<td>This is the second td on the first row and second column</td>
</tr>
<tr>
<td>The content goes in here for the second td on the first column</td>
<td>This is the second td on the second column</td>
</tr>
</table>

To create a link use
<a href = " ">
</a>

Whatever is inside the tag is clickable.

A link will look like this:
<a href = "http://nytimes.com">New York Times</a>

To embed an image use:
<img src = "the address of your image source here">

This is how a simple HTML page would look:

<html>
<head>

javascript and css will go here

</head>

<body>
<p>this is a paragraph</p>

<table>
<tr>
<td>the content goes in here for the first td</td>
<td>This is the second td on the first row and second column</td>
</tr>
<tr>
<td>The content goes in here for the second td on the first column</td>
<td>This is the second td on the second column</td>
</tr>
</table>

<a href = "http://nytimes.com">New York Times</a>

</body>
</html>

One thing to remember is that you can always embed tags within tags, as long as you are aware of were the closing tags (< / >) end and begin. This will take a bit of practice, but you'll get it soon enough.

--------

You can create the design of a webpage on Photoshop and Imageready. To do this, first, study various webpages and decide on a look. Then once you know how many pages your project will have (for the final assignment is five), which will also define how many links you will have, do the following:

Create your first webpage in Photoshop, which should be no wider than 1000 pixels. The length does not matter.

Design the links and other areas that you desire, then click on the icon at the bottom of your tool palette menu, below the color control palette; this will take you to Imageready.

In Imageready, from the Tool Palette Menu choose the Slice Tool. Slice squares around the links you want to create.

You will learn how to create links in the following lecture. For now you should have your page sliced properly ready to be linked.