Penn State University -- School of Visual Arts
ART 315 New Media Art: New Media Studio
Professor: Eduardo Navas (eduardo@navasse.net)
Tuesdays and Thursdays
11:15A - 02:15P

Office Hours: Tuesdays 2:15 -4:15 by appointment
Please contact me at: 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.