Class Notes:
In the book chapter two and parts of five.
Recall the basic XHTML template.
<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www/w3/org/TR/xhtml/11/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
</head>
<body>
</body>
</html>
Now lets build.
Where do we build them?
- Notepad or another TEXT editor
How do we build them?
- Start with the basic xhtml template and grow from there
- One paragraph at a time
The <p> tag and some of it's attributes.
- Divide and concur
The <div> tag, how and why.
- Lets get ahead of the game
The heading tags and who decides.
<h1>.....<h6>
- Use the formatting tags and attributes.
Do it with style!
Body tag formatting attributes
link, vlink, bgcolor, background, style.
Style attribute can override your formatting concerns.
<h1 style="color: red; font-style: italic">
- "NO COMMENT! NO COMMENT"
<!-- Please make it a habit, to comment your pages-->
Why?
- If you don't break up this text there is going to be a rule created!
line break <br/>
Horizontal Rule <hr/>
<hr/> attributes: align, size, style, width.
Where do we save them?
- Save to the desktop
- Publish your page
(This document describes how to publish your page by
first uploading your page using WinSCD. If you are
using other tools the procedure is similar. The key point
is you must upload your file under the public/html directory.
So you need to first find the public directory and
change to this directory. Under the public directory
there should be the html directory. If the html directory
does not exist you need to make a directory called
"html". Then you can change to html directory. Now
you can upload your page under public/html directory.)
- URL - http://www.pitt.edu/~username/cs134/pagename.html
How do we save them?
- Don't forget the file extension!
- html vs htm
Why is hypertext hyper?
A hypertext document is one that contains the elements called links that
allow users to activate a particular part of the screen to perform some action.
The actions that we will look at include
- Navigating to another part of the document
- Navigating to another document on the same web site.
* We will also look at navigating to another part of ANOTHER document of the
same web site AND potentially navigating to another part of an external
document.
- Navigating to an external web site.
Let's drop anchor here and get started!
Like most new concepts introduced this semester we will start by introducing
a new tag called the "anchor" tag.
<a> click me </a>
source anchor vs target anchor
Two important attributes for the anchor tag.
- href - hypertext reference- identifies the target of the link
- id - used to identify a location within an html document. used
with the <a> tag to set the target.
Intrapage links.
- Link to spot in the current page (or html document).
- Uses both the source and target anchor
- ID'ed in the target anchor and identified with href="#fdjglkjflkg" in the
source anchor.
<a href="#area1"> area1 </a>
<a id="area1"> adfgfdagakjdfghf </a>
<a href="file1.html#area1"> area 1 on file one page </a>
Intrasystem links.
- Links to a different page within your web site.
- Uses source anchor with href
- may need path identified
<a href="page3.html"> click me for page 3
</a>
Intersystem links.
- Links to an external page
- Uses source anchor with href
- Need to supply URL
<a href="http://www.cs.pitt.edu"> take me to the
CS web site! </a>
This is absolutely the path to a successful link, relatively speaking..
In most Intrasystem links you will find it necessary to provide the path to
the html document you want to link to. This can be done by use of the
absolute or relative paths. We will primarily be using the relative
path.( See page 113 in your book.)
|-- folderz --- file1.html
folderx --- foldery --
|-- folderq --- file2.html
<a href="../../folderq/file2.html> in file1.html will get me from file1.html in folderz to
file2.html in folderq
Final thought: A begin quote always requires a
matching end quote. For instance an attribute
value should be entered as "page1.htm", and
so on. If you enter "page1.htm without the matching
end quote the attribute value will be misinterpreted!
This concept of pairing is also central to the concept
of tags. Every tag is really a pair consisting of
an opening tag and a closing tag. We call this pair
a container tag.