GRAF 1031 – Week 2

Part 1: Intro to HTML/XHTML

HTML- hypertext markup language

What Is XHTML?

XML is a markup language where everything has to be marked up correctly, which results in "well-formed" documents.

XML was designed to describe data and HTML was designed to display data. 

Today's market consists of different browser technologies, some browsers run Internet on computers, and some browsers run Internet on mobile phones and hand helds. The last-mentioned do not have the resources or power to interpret a "bad" markup language.

Therefore - by combining HTML and XML, and their strengths, we got a markup language that is useful now and in the future - XHTML.

XHTML pages can be read by all XML enabled devices AND while waiting for the rest of the world to upgrade to XML supported browsers, XHTML gives you the opportunity to write "well-formed" documents now, that work in all browsers and that are backward browser compatible.

The Most Important Differences:

Coding XHTML (basic tags) - use Text Edit

Pages consist of tags, and each tag has to be closed. The most important tag, which tells the browser to read the code as HTML (or XHTML) is:

<html> </html>

Note: all tags are enclosed by angled brackets - and tag names must be lowercase

The second of the two tags above is a closing tag </html>. Closing tags have a forward slash infront of the name of the tag. Not all have closing tags - this will be discussed later.

Type the following code into Text Edit (format>plain text first) to create a basic webpage:

<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>

Notice how the tags are nested:

<html> - always the first tag

<head> - starts the head of the doc, which is not seen by visitors

<title> - title of the page (used for search engines and esthetics
</title> - end title tag

</head> - end head tag

<body> - starts the body content (seen by visitors)
</body> - end body tag

</html> - end html tag

Add a title and some text (with the paragraph tag) to the body:

<html>
<head>
<title>Nicola's Webpage</title>
</head>

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

</body>
</html>

more font options (headings, italics, bold, lists)

<h3>My heading</h3>
<p>here is a paragraph with a list
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>
</p>

<h3>My heading</h3>
<p><em>here is an italicized paragraph with a list and <strong>bold words</strong>
<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul></em>
</p>

Note: we won't be formatting fonts until we work with CSS...so the following is for example only:

Some tags have attributes, and attributes have values which must be enclosed in “”:

<p><font face="arial" size="2" color="red">here is a red paragraph</font></p>

save your file as test.html (be sure you don't append with .txt!), and then open the file in your browser

See following article
http://www.hotdesign.com/seybold/ - about semantic markup

Creating a new XHTML doc:
http://www.w3schools.com/xhtml/default.asp

Part 2: Folder Structure/Dreamweaver intro

example

click here to download image

Terms

www root
define your site
tables (cells: columns and rows)
hexadecimal code

Define a local site

A "site" in Dreamweaver is a storage location for all the documents and files belonging to a particular Web site. Defining a local site delineates the structure of the site you are creating and tells Dreamweaver where you plan to store all of the site's files. Define a new local site for each Web site you create using Dreamweaver.

Launch Dreamweaver.

Choose Site menu>Manage Sites...

In the Site Definition dialog box (advanced tab), make sure Local Info is selected in the Category list.

In the Site Name field type: YourSiteName - The site name lets you easily identify and select a site from a list of sites you've defined.

In the Local Root Folder field type: C:\YourSiteName\ OR click the browse for file button, and then select the folder you previously created. At this point (on a PC) you could also create a new folder, and select that.

Click OK. Then click done.

Create a page

File>New

create a basic html page

save the page as index.htm into the main root of your site

Tables

Tables are an extremely powerful Web design tool for laying out data and images on an HTML page. Tables provide Web designers ways to add vertical and horizontal structure to a page.

Tables consist of three basic components:

rows (horizontal spacing)

columns (vertical spacing)

cells (the container created when a row and column intersect)

Use tables to lay out tabular data, to design columns on a page, or to lay out text and graphics on a Web page. Once you create a table you can easily modify both the appearance and structure of HTML tables. You can add content; add, delete, split, and merge rows and columns; modify table, row, or cell properties to add color and alignment; and copy and paste cells.

Inserting Tables

Insert panel>Common tab>Table button

Today's Webpage

Create a new folder on your desktop

name it week2

create an graphics and raw folder inside the week2 folder

define your site in DW

create a new page

Insert the following table structure (discussed further in class)

This is what it looks like with text in it

other formatting we'll work on together

Homework

Design a new banner for the site we created today

Size: 770x250px

Design elements - start with stock photography, and incorporate some text (to represent a basic logo)

HTML changes: you can leave the structure the same, but modify the colours to work with your banner

Format: jpg

Due: the beginning of class week 3

Location - copy your web folder to:

www.graphic-design.ca/~yourlastname/week2/