Home Page LinkTutorial 01




   Lesson 1    Lesson 2    Lesson 3    Lesson 4    Tutorial 1    Tutorial 2    Contact
HTML Tutorial

Our goal is to make a web page that looks something like this...


EG of our goal

We are going to start with basic HTML/XHTML using a text editor

On your PC the Text Editor is Notepad. Notepad can be found by going to Start
then programs then accessories.  On a Mac the text editor is called TextEdit
and can be found in the Applications folder.

 We will, step by step, build the page on the left...

I will surround text that you  can try out, by cutting from this page
and pasting into Notepad  the following way








<!-- -----------------------------Snip -->

Just highlight eveything between  the  "<!-- -----------------------------Snip -->"  snip comment

This too...
<!-- -----------------------------Snip -->

However, if you include the "<!-- -----------------------------Snip -->" comment they won't show up in your browser at all!  Just your editor!

Because the <!--      put any comment here   --> tags  make up a comment element that is there for you to easily identify what follows, but is invisible in a browser.


Now...
Paste the cut into your text editor and save the files as... try01.html

load try01.html into a browser line IE or Firefox or Seamonkey or Safari to see the result...

One more thing ---getting more organized...

Where to put the graphics for this tutorial In order for the graphics to show up on your computer

Save all your tutorial html files to a folder called wbdesign or "Your-Website" or what you have decided to call the folder.
In that folder put the following graphic Create.jpg  (Right click  the blue underlined Create.jpg You'll get a requester, choose the menu item "save link target as..." and save to your folder wbdesign)  Inside wbdesign create another folder called mandarin inside mandarin put the following graphics bg1b.gif and web.jpg

WEB PAGE BASICS

Okay, here we go... This is the basic form of every web page!
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

</body>
</html

where
The first line is always...
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Transitional can be used if we will mix html and Xhtml markup language.


<html> This tag tells the browser that what follows is an html document  (in html you can mix lower and upper case, but in Xhtml you must always use lower case as it's a stricter language and must adhere to the rules, we'll use strict every where we can)

<head>
<title> This is where you place the title of the html page </title>
<meta name=" " content=" " />
... (there may be one or more meta tags)

This is where you place the meta data,  and cascading style sheet information... We will do that later

---the head tag must be closed with </head>

< body >
Everything that goes on the web page goes here between <body> and </body>

the html document must always end with </html>

So lets enter the text we want on the web page and let's see what happens

Our First HTML Document
If you cut the text below and paste it into a text editor then view the results in a browser... first save the file as try01.html  You get this
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Tutorial Test Page 01</title>
</head>
<body>
Basic Web Design
Concepts, ideas, tools, and knowledge
Fall 2008 Create Your Own Web Site

Syllabus
Lesson 1
Lesson 2
Lesson 3
Lesson 4

Contact

Explore concepts and ideas to develop a clear, concise, usable and attractive web site
</body>
</html>

 Basic Web Design Concepts, ideas, tools, and knowledge Spring 2008 Create Your Own Web Site Syllabus Lesson 1 Lesson 2 Lesson 3 Lesson 4 Contact Explore concepts and ideas to develop a clear, concise, usable and attractive web site





eh?

If you double click the following,  try01.html   you'll see the results of what we have created so far...

eh?



All we see here is that everything is strung together as one long line of text. Not pretty, and not useful at all...

In order to make the text look the way we want we have to add instructions called "mark ups." We will use XHTML and CSS markup where possible.

Remember html and xhtml is written in the form of labels  or tags.
There are always a beginning and ending tag (xhtml)
A beginning and ending tag makes an element
Elements are the basic building blocks for HTML  XHTML and CSS markup.
Elements have two basic properties: attributes and content

Basic html, xhtml


Headings <h1></h1>

Headings are defined with the <h1> to <h6> tags.
<h1> defines the largest heading.
<h6> defines the smallest heading.
In your text editor it looks like this...
 In your browser, it looks like this
<h1>This is an h1 heading</h1>
<h2>This is an h2 heading</h2>
<h3>This is an h3 heading</h3>
<h4>This is an h4 heading</h4>
<h5>This is an h5 heading</h5>
<h6>This is an h6 heading</h6>

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading

This is an h5 heading
This is an h6 heading
Note: (Hidden rule)
HTML & XHTML automatically adds an extra blank line before and after a heading.


Paragraphs <p></p>

In your text editor  it looks like this
 

Which looks like this in a browser...
 
<p>This is a paragraph</p>
<p>This is another paragraph</p>

This is a paragraph

This is another paragraph
(Hidden Rule)
HTML automatically adds an extra blank line before and after a paragraph.



Line Break <br> in html; <br /> in xhtml

In HTML the <br> tag is used when you want to end a line, but don't want to start a new paragraph.
The <br> tag forces a line break wherever you place it.
But, the <br> tag in html is an empty tag.  It has no need for a closing tag!

In XHTML you MUST make it both an open and closed tag by adding a slash eg.) <br />
Okay weve added the basic markup tags here
 and this is the result, it looks like this in a browser...
<!-- -----------------------------Snip -->

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Tutorial Test Page 02</title>
</head>
<body>

<h1>Basic Web Design</h1>
<h3>Concepts, ideas, tools, and knowledge</h3>
<h5> Summer 2007</h5> <h1> Create Your Own Web Site</h1>

<p>Syllabus<br />
Lesson 1<br />
Lesson 2<br />
Lesson 3<br />
Lesson 4</p>

<p>Contact </p>

<h1>Explore concepts and ideas to develop a clear, concise, usable and attractive web site</h1>
</body>
</html>

<!-- -----------------------------Snip -->

Basic Web Design

Concepts, ideas, tools, and knowledge

Summer 2007

Create Your Own Web Site

Syllabus
Lesson 1
Lesson 2
Lesson 3
Lesson 4

Contact

Explore concepts and ideas to develop a clear, concise, usable and attractive web site

Okay, got the routine?
Cut, paste, save and load...

If you double click the following, you'll see the results of what we have created so far in your default browser...
try02.html


Okay, not bad, but position and color is everything!

To Table or Not to Table

There are several many ways to proceed from here.

We will look at two ways to build our web page
1. Using Tables and HTML - XHTML (Transitional) markup
2. Not using tables, but XHTML 1.1 (Strict) only markup

1. The table way.
       HTML is easy to use because it is not strict, thus easier and more forgiving... and tables came first and are easy to use...

But before we begin the table itself, lets talk about adding background colors and patterns.

Expanding the <body> </body> element

Single colored backgrounds and link colors


A simple <body> open tag automatically displays a white page with black text.
links are automatically colored the following way:

A link is colored blue, before you click on it eg  lesson1

This tells us it is an ACTIVE link and #000099 is the hex number for the color blue... your browser automatically sees this  (alink="#000099).

A link you have already used or Visited is a (vlink="#990099) will turn "alink" from blue  #000099 to purple  #990099

In the example box below the background color is rgb(255, 244, 102)  -- plain orange


the HTML <body> markup will  looks like this

<body style="color: rgb(0, 0, 0); background-color: rgb(255, 204, 102);" alink="#000099" link="#000099" vlink="#990099">

Graphic or patterned backgrounds

If we want to use a pattern for the background this is the markup

<body style="background-image: url(mandarin/bg1b.gif);">

Note that url indicates the path to the graphic file which is mandarin/bg1b.gif
"mandarin"  is a file folder that contains the graphic "bg1b.gif"
Here's what the html looks like for a background graphic
 This is what it looks like in a browser
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
</title>
</head>
<body style="background-image: url(mandarin/bg1b.gif);">

Hello Hello
</body>
</html
 Hello Hello

Inserting Graphics, pictures, the html <img> tag; -- in xhtml <img />


orange gradient background This is the orange graphic pattern bg1b.gif that is used for the background in the Basic Web Design site...

It is inserted here just to show you what it actually looks like, you'll note that  inserting a background graphic or image is different from inserting a single image or graphic on a page

on the left is a single gradient graphic 600 pixels high and 8 pixels wide.

In order to insert a picture or a graphic into a web page you use the  <img> tag

    <img style="width: 8px; height: 600px;" alt="orange gradient background"
    src="mandarin/bg1b.gif" align="left">
    <img> is an empty tag that has no closer tag like</img> so to make the code compliant with XHTML use the following:
    "/>" at the end of the open tag
like this
 
<img style="width: 8px; height: 600px;" alt="orange gradient background"
    src="mandarin/bg1b.gif" align="left" />

    The orange pattern is a simple gradient (dark orange to light orange)
    and was made in a program like Adobe's Photoshop Elements
    http://www.adobe.com/products/photoshopelwin/
   

     or  Corel's Paint Shop Pro
     http://www.corel.com/servlet/Satellite/us/en/Product/1155872554948

   
    The orange pattern was kept to a minimal size at 8 by 600 pixels to ensure the site will load quickly.
    We are presumming our final page will be 800 x 600 pixels in size and
    because it only uses a few colors it was converted or saved as the .gif file format
   
    Repeatable seamless patterns are usually 200 x 150 or 200 x 200 pixels in size like
    this embossed starry background

    embossed star background

    You can find all kinds of background patterns on the internet
So let's see what the orange background looks like...
<!-- -----------------------------Snip -->

 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Tutorial Test Page 03</title>
</head>

<body style="background-image: url(mandarin/bg1b.gif);">

<h1>Basic Web Design</h1>
<h3>Concepts, ideas, tools, and knowledge</h3>
<h5> Fall 2008</h5> <h1> Create Your Own Web Site</h1>

<p>Syllabus<br />
Lesson 1<br />
Lesson 2<br />
Lesson 3<br />
Lesson 4<p />

<p>Contact </p>

<h1>Explore concepts and ideas to develop a clear, concise, usable and attractive web site</h1>
</body>
</html>

<!-- -----------------------------Snip -->

Basic Web Design

Concepts, ideas, tools, and knowledge

  Fall 2008

Create Your Own Web Site

Syllabus
Lesson 1
Lesson 2
Lesson 3
Lesson 4

Contact

Explore concepts and ideas to develop a clear, concise, usable and attractive web site

 
You can see the results in a browser here try03.html

Okay Now Tables

For this example we only need a table that looks like this... 2 x 2






we really want the boarder to be set to zero, but so you can see the above table we set the boarder to 1, the background to white (rgb (255, 255, 255))


<table  style="text-align: left; width: 90%; background-color: rgb(255, 255, 255);"
border="1" cellpadding="2" cellspacing="4">
<tbody>

<!-- Comment   This is cell #1 top left -->
<tr> <td style="vertical-align: top;"><br>   insert tags for pictures and text here   This is cell row #1 top left   </td>

<!-- Comment   This is cell #2 top right -->
<td style="vertical-align: top;"><br>    insert tags for pictures and text here    This is cell row #1 top right </td>
</tr>

<tr>
<!-- Comment   This is the bottom left cell -->
<td style="vertical-align: top;"><br>     insert tags for pictures and text here    This is cell row #2  bottom left    </td>

<!-- Comment    and this is the bottom right cell -->
<td style="vertical-align: top;">         insert tags for pictures and text here        This is cell row #2  bottom right      </br>
</td>
</tr>
</tbody>
</table>

This is what the above table markup produces...
insert tags for pictures and text here   This is cell row #1 top left insert tags for pictures and text here   This is cell row #1 top right
insert tags for pictures and text here   This is cell row #2 bottom left   insert tags for pictures and text here        This is cell row #2 bottom right

Before we go to the next step. here's some info on how to insert photographs, pictures graphics and link to them

using the image element <img>
and the <a></a> Anchor Element

Images and Links

Let's fill the cells...


<!-- -----------------------------Snip -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title> Tutorial Test Page 04</title>
</head>

<body style="background-image: url(mandarin/bg1b.gif);">
<table  style="text-align: left; width: 90%; background-color: rgb(255, 255, 255);"
border="0" cellpadding="2" cellspacing="4">
<tbody><br>

<tr> <td style="vertical-align: top;"><img style="width: 150px; height: 103px;" alt="Spiderwebgraphic"
src="mandarin/web.jpg"><br>
</td>

<td style="vertical-align: top;"><br> <h1>Basic Web Design</h1>
<h3>Concepts, ideas, tools, and knowledge</h3></td>
</tr>
<tr>
<td style="vertical-align: top;"> <p>Syllabus<br />
Lesson 1<br />
Lesson 2<br />
Lesson 3<br />
Lesson 4<p />

<p>Contact </p><br>
</td>
<td style="vertical-align: top;"> <img style="width: 522px; height: 198px;" alt="create your own web site"
src="PastedObjects/Create.jpg"><br>
 <br><h1>Explore concepts and ideas to develop a clear, concise, usable and attractive web site</h1><br>
</td>
</tr>
</tbody>
</table>


</body>
</html>

<!-- -----------------------------Snip -->
Spiderwebgraphic

Basic Web Design

Concepts, ideas, tools, and knowledge

Syllabus
Lesson 1
Lesson 2
Lesson 3
Lesson 4

Contact


create your own web site

Explore concepts and ideas to develop a clear, concise, usable and attractive web site


Click here to see the results in a web browser try04.html

Okay we've got everything in the right place...
Let's change the background and text colors and make everything fit

Tiding up

Note:
In the example you'll discover that the line "Fall 2008 Create Your Own Web Site along with the pictures of web sites is a graphic that I created in Photoshop... It's called create.jpg and it's in a file folder called PastedObjects

You'll also note that the tables cell spacing was set to 4


<!-- -----------------------------Snip -->

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Tutorial Test Page 05</title>
</head>
<body style="background-image: url(mandarin/bg1b.gif);">
<br>
<table
 style="text-align: left; width: 90%; background-color: rgb(255, 255, 255); margin-left: auto; margin-right: auto;"
 border="0" cellpadding="4" cellspacing="4">
  <tbody>
    <tr>
      <td style="vertical-align: top; background-color: rgb(0, 0, 0);"><img
 style="width: 150px; height: 103px;" alt="Spiderwebgraphic"
 src="mandarin/web.jpg"><br>
      </td>
      <td
 style="vertical-align: bottom; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
      <h1 style="background-color: rgb(0, 0, 0);">Basic Web Design</h1>
      <h3>Concepts, ideas, tools, and knowledge</h3>
      </td>
    </tr>
    <tr>
      <td
 style="text-align: justify; vertical-align: top; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
      <p style="background-color: rgb(0, 0, 0);"><br>
Syllabus<br>
      </p>
      <p style="background-color: rgb(0, 0, 0);"><br>
Lesson 1<br>
      </p>
      <p style="background-color: rgb(0, 0, 0);">Lesson 2<br>
      </p>
      <p style="background-color: rgb(0, 0, 0);">Lesson 3<br>
      </p>
      <p style="background-color: rgb(0, 0, 0);">Lesson 4</p>
      <p style="background-color: rgb(0, 0, 0);"></p>
      <p style="background-color: rgb(0, 0, 0);"><br>
Contact </p>
      <br>
      </td>
      <td style="vertical-align: bottom;"> <img
 style="width: 522px; height: 198px;" alt="Create your own web site graphic"
 src="PastedObjects/Create.jpg"><br>
      <br>
      <h1>Explore concepts and ideas to develop a clear, concise,
usable and attractive web site</h1>
      <br>
      </td>
    </tr>
  </tbody>
</table>
</body>
</html>
<!-- ---------------------Snip -->
Spiderwebgraphic

Basic Web Design

Concepts, ideas, tools, and knowledge


Syllabus


Lesson 1

Lesson 2

Lesson 3

Lesson 4


Contact


Create your own web site graphic

Explore concepts and ideas to develop a clear, concise, usable and attractive web site


You can see the results here in a browser try05.html

Links

The only thing left to do is add the links
We want to link the word  "Syllabus" in our document to the file syllabus.html

<a href="syllabus.html">Syllabus</a>

A link has two ends -- called anchors -- <a> and a direction. "href" The link starts at the "source" anchor
and points to the "destination" anchor, which may be any Web resource
(e.g., an image, a video clip, a sound bite, a program, an HTML document, an element within an HTML document, etc.).

So href refers to the source (it's our hyperlink to the Universe of the www)

If you set the target attribute of a link to value  "_blank",

<a href="syllabus.htm" target="_blank">Syllabus</a>

the link will open in a new window.

So let's link up our web page links!


<!-- -----------------------------Snip -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Tutorial Test Page 06</title>
</head>
<body
style="background-image: url(mandarin/bg1b.gif); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#ffffff" link="#ffffff" vlink="#ff6600">
<br>
<table
style="text-align: left; width: 90%; background-color: rgb(255, 255, 255); margin-left: auto; margin-right: auto;"
border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="vertical-align: top; background-color: rgb(0, 0, 0);"><img
style="width: 150px; height: 103px;" alt="Spiderwebgraphic"
src="mandarin/web.jpg"><br>
</td>
<td
style="vertical-align: bottom; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
<h1 style="background-color: rgb(0, 0, 0);">Basic Web Design</h1>
<h3 style="color: rgb(255, 102, 0);">Concepts, ideas, tools, and
knowledge</h3>


</td>
</tr>
<tr>
<td
style="text-align: justify; vertical-align: top; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
<p style="background-color: rgb(0, 0, 0);"><br>
<big><a style="color: rgb(255, 255, 255); font-weight: bold;"
href="syllabus.html" target="_blank">Syllabus</a></big><br>
</p>
<p style="background-color: rgb(0, 0, 0);"><br>
<big style="color: rgb(255, 255, 255);"><a href="lesson1.html">Lesson
1</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="lesson02.html">Lesson 2</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="lesson03.html">Lesson 3</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="lesson04.html">Lesson 4</a></big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><br>
<a href="mailto:garrystasiuk@comcast.net">Contact</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="HTML_XHTMLTutorial.html">TUTORIAL</a><br>
</big></p>
<br>
</td>
<td style="vertical-align: bottom;"> <img
style="width: 522px; height: 198px;" alt="Create your own web site graphic"
src="PastedObjects/Create.jpg"><br>
<br>
<h1>Explore concepts and ideas to develop a clear, concise,
useable and attractive web site</h1>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

<!-- -----------------------------Snip -->
  
Spiderwebgraphic

Basic Web Design

Concepts, ideas, tools, and knowledge


Syllabus


Lesson 1

Lesson 2

Lesson 3

Lesson 4


Contact

TUTORIAL


 Create your own web site graphic

Explore concepts and ideas to develop a clear, concise, useable and attractive web site






You can see the results here, did you notice what I did to the alink and vlink colours? try06.html

There is one thing to add and that's a search engine for your site
Lucky for us we can use Googles search engine, here's the markup from Google  all you have to do is replace the red text with your domain name and url
<!--SiteSearch Google -->
    <form method="get" action="http://www.google.com/search">
    <div id="search">
      <label for="q">Search:</label>
      <input id="q" name="q" size="20" maxlength="255" value="" type="text" />
      <input name="domains" value="http://uofgts.com/" type="hidden" />
      <input name="sitesearch" value="http://uofgts.com/" checked="checked" id="mysite" type="radio" />
      <label for="mysite">Just this site</label>
      <input name="sitesearch" value="" id="www" type="radio" />
      <label for="www">WWW</label>
      <input name="btnG" value="Go" type="submit" />
    </div>
    </form>
    <!-- SiteSearch Google -->   


Now let's add the search engine


<!-- -----------------------------Snip -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Tutorial Test Page 06</title>
</head>
<body
style="background-image: url(mandarin/bg1b.gif); color: rgb(0, 0, 0); background-color: rgb(255, 255, 255);"
alink="#ffffff" link="#ffffff" vlink="#ff6600">
<br>
<table
style="text-align: left; width: 90%; background-color: rgb(255, 255, 255); margin-left: auto; margin-right: auto;"
border="0" cellpadding="4" cellspacing="4">
<tbody>
<tr>
<td style="vertical-align: top; background-color: rgb(0, 0, 0);"><img
style="width: 150px; height: 103px;" alt="Spiderwebgraphic"
src="mandarin/web.jpg"><br>
</td>
<td
style="vertical-align: bottom; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
<h1 style="background-color: rgb(0, 0, 0);">Basic Web Design</h1>
<h3 style="color: rgb(255, 102, 0);">Concepts, ideas, tools, and
knowledge</h3>
<!--SiteSearch Google -->
    <form method="get" action="http://www.google.com/search">
    <div id="search">
      <label for="q">Search:</label>
      <input id="q" name="q" size="20" maxlength="255" value="" type="text" />
      <input name="domains" value="http://uofgts.com/" type="hidden" />
      <input name="sitesearch" value="http://uofgts.com/" checked="checked" id="mysite" type="radio" />
      <label for="mysite">Just this site</label>
      <input name="sitesearch" value="" id="www" type="radio" />
      <label for="www">WWW</label>
      <input name="btnG" value="Go" type="submit" />
    </div>
    </form>
<!-- SiteSearch Google -->   

</td>
</tr>
<tr>
<td
style="text-align: justify; vertical-align: top; background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);">
<p style="background-color: rgb(0, 0, 0);"><br>
<big><a style="color: rgb(255, 255, 255); font-weight: bold;"
href="syllabus.html" target="_blank">Syllabus</a></big><br>
</p>
<p style="background-color: rgb(0, 0, 0);"><br>
<big style="color: rgb(255, 255, 255);"><a href="lesson1.html">Lesson
1</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="lesson02.html">Lesson 2</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="lesson03.html">Lesson 3</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="lesson04.html">Lesson 4</a></big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><br>
<a href="mailto:garrystasiuk@comcast.net">Contact</a><br>
</big></p>
<p
style="background-color: rgb(0, 0, 0); color: rgb(255, 255, 255);"><big><a
href="HTML_XHTMLTutorial.html">TUTORIAL</a><br>
</big></p>
<br>
</td>
<td style="vertical-align: bottom;"> <img
style="width: 522px; height: 198px;" alt="Create your own web site graphic"
src="PastedObjects/Create.jpg"><br>
<br>
<h1>Explore concepts and ideas to develop a clear, concise,
useable and attractive web site</h1>
<br>
</td>
</tr>
</tbody>
</table>
</body>
</html>

<!-- -----------------------------Snip -->
Spiderwebgraphic

Basic Web Design

Concepts, ideas, tools, and knowledge


Syllabus


Lesson 1

Lesson 2

Lesson 3

Lesson 4


Contact

TUTORIAL


 Create your own web site graphic

Explore concepts and ideas to develop a clear, concise, useable and attractive web site






Next part 2 --- no tables....