| Lecture
V: HTML Basics (continued)
 Please
proceed through the lecture below. Click on the links to audio/video segments
in order. The menu to the right gives you links to major written sections
within the lecture.
The
audio/video segments:
• The
first video segment is a brief introduction to the lecture.
• The
subsequent video segments are descriptions of the course material with
-screen movements on video
-voice description on audio
After
you have proceeded through the lecture below, review the assignment
for this session. |
Lecture
Menu
Lecture
Objectives
Hyper
linking
Introduction
to Photoshop
Review
Assignment
|
1.
 |
<<
click here to view video segment |
After
viewing video segment please proceed through the material for this section.
Then proceed to the next video clip.
|
(video/L5/
ART391_L5_AV1.wmv) |
| Lecture
Objectives
 Understand
hyper linking in Web pages and how it works
Learn
to insert hyperlinks to anchors within a Web page, to other Web pages
within a Web site, and to other sites on the Web as well as learn
to insert a link to an email address
Continue
drawing and have a brief introduction to Photoshop
|
2.
|
<<
click here to view video segment ( 28 minutes) |
After
viewing video segment please proceed through the material for this section.
Then proceed to the next video clip.
|
(video/L5/
art391_L5_av2.wmv) |
Hyper
linking
As we already
know, HTML is a visually based mode of communication on the Web on the
Internet. One of the defining features of HTML is the ability to link
documents on the Web together.
A
hyperlink is a defined spot within a Web document which, when clicked
on by the Web page viewer, brings up another document (or section, email
link, etc.) into the browser.
Hyperlinks
can be text elements, images, or defined areas within images.
Hyperlinks
are defined using the anchor tag in HTML:
<a
href="URL">linked
element</a>
• The
anchor tag is a container tag placed in the body of the HTML document
around the text or image that is to be linked.
• The
<a>
... </a> element
of the tag defines the beginning and end of the hyperlink
• The
href="URL"
element
of the tag defines the location of the linked file. Mostly you will
be linking to other Web documents but you can also link to a variety
of Web resources, including images, audio and video files, Adobe pdf
files, etc.
• The
links may be absolute links or relative
links. This means that you may insert a link to a document in the
same folder as the Web document itself by simply placing the name
of the document in the link tag, or you may place the entire URL in
the link tag.
A relative
link (within your own site) looks like this:
<a
href="index.htm">linked
element</a>
An absolute
link (outside your own site) looks like this:
<a
href="http://www.sitename.com/index.htm">linked
element</a>
 |
Links
to Web pages |
|
Let
us now go through an example of adding a hyperlink to a Web document.
Following
is the HTML code for the simple Web page that we've been using for
our examples for the past several lectures. There have been several
additions to the code, let us first focus on the anchor coding,
or hyperlinks: |
| |
 |
|
Now
let us look at some of the formatting elements that may make the
page look more interesting.
By
default, browsers will display links in the color blue. Once the
link has been clicked upon (visited), the browser's default color
for the link is purple. If you want to change these colors, the
place to do it is within the <body> tag as attributes. You
can specify a color for
links,
link="color", this affects links that have not been
clicked on yet
visited
links, vlink="color", this affects links that have been
click on (visited)
active
links, alink="color", this affects links as they are
being clicked
Notice
in our example below that the background color has been set to "black",
all links have been set to "red", and the text in the
body with no linking has been set to "white":
|
| |
 |
| |
Let
us now look at the result in our browser of the above simple HTML
document (This is just an illustrative
image in the courseware-you will not be able to click on the links
displayed in the image below): |
| |
 |
| |
Notice
that there is a red box around the image. This is because by setting
the link attribute in the <body> tag we have instructed the
browser to put a red border around any image with a link associated
with it. To correct this we simply need to add an attribute within
the <image> tag which sets the border=0: |
| |
 |
| |
The
result is what we intend, the image now fades into the background
but it is still a link (This is
just an illustrative image in the courseware-you will not be able
to click on the links displayed in the image below): |
| |
 |
|
You
may view the actual Web page (on which you may click through the
links on the text and the image) from the above example in a new
browser window by
CLICKING
HERE
|
| |
|
| |
 EXERCISE
Create
a new HTML file and insert a jpeg image into the body of the Web
document. You may use one of the images you sketched and scanned
as part of the assignment from Lecture 2. Then add a couple of hyperlinks
to another Web page you create. Add a link to the image and add
a link to text.
|
| |
Now
let us move on to discuss links to sections within a page |
| |
|
|
Links
to Sections within Web pages |
| |
It
is often very useful to add links to a section of a Web page. This
is particularly useful when you have a long scrolling Web page with
many sections (such as the one you are now viewing!). An
example of such linkage is the menu at the top of this lecture.
When you click on the items in the menu you are linked to spots
within this Web page.
The
tagging for links within a Web page is similar to that of links
to other Web pages. But instead of linking to a URL, the tag links
to an anchor point within the body section of a document.
The
tagging this time, however, includes two anchor tags: 1) An anchor
tag where the link is inserted and an 2) An anchor tag where the
link destination is. Let us assume we want to put a link to a section
later in a given Web page called Section 2.
The
anchor tag where the link is inserted is, for example:
<a
href="#section2">Click
here to go to Section 2</a>
Notice
the # sign precedes the anchor point name!
The
anchor tag where the link destination is, for example:
<a
name="section2">This
is Section 2</a>
Notice
these are both anchor tags <a> but with different attributes.
The first designates "href" the second designates "name"
|
| |
EXERCISE
As
an exercise, view the source code for this Web page. To do this,
click view>source on your browser toolbar. Go
through the source and look for the anchor tags at places in the
code where you know there is a link from the menu. Then go find
the link to that anchor name on the menu itself in the source.
|
| |
|
| |
You
can also link to a named anchor point in another Web document by
simply placing #anchorname after the URL for the link in the hyperlink
anchor tag. For example:
The
following link tagging would send the viewer to a section within
another Web page:
<a
href="page2.htm#section2">Click
here to go to
Section 2 on Page 2</a>
|
|
Links
to Other Folders within the Site |
| |
Within
the href attribute of the anchor tag you may specify
URLs of documents that are in sub-folders or higher level folders
in the Website.
The
following link tagging specifies a link to a URL in a lower directory
(a sub-folder) than the one in which the HTML document resides:
<a
href="directory_name/page2.htm">Click
here to
go to Page 2</a>
The
following link tagging specifies a link to a URL in a higher directory
than the one in which the HTML document resides (the current folder
being a sub-folder of the one in which the linked to file resides):
<a
href="../Page0.htm">Click
here to go to Page0</a>
To
go two directories higher, simply add another ../
:
Click
here to go to HOME
|
|
Email
Address Links |
| |
Within
the href attribute of the anchor tag you may specify
an email
address by using the mailto protocol. In this case,
the link will send the viewer to the computer's designated email
program.
For
example, if the viewer has configured Outlook Express
to be his or her default email program, then when s/he clicks
a mailto link, Outlook Express will launch and the email address
contained in the mailto link will appear in the "To"
section of the outgoing email address.
The
following link tagging specifies a mailto link
to an email address:
<a
href="mailto:gsmith@ksi.edu">Click
here to
email gsmith@ksi.edu</a>
|
|
This
concludes the discussion of hyperlinking. In addition to what we've
covered here, the textbook contains an excellent discussion of basic
HTML linking in Chapter 9. As mentioned, we will discuss image maps,
that is, multiple links within a single image, in a later chapter. |
|
2.
|
<<
click here to view video segment (22 minutes) |
After
viewing video segment please proceed through the material for this section.
Then proceed to the next video clip.
|
(video/L5/
art391_L5_av3.wmv) |
Introduction
to Photoshop
In preparation
for the next lecture, in which we will start learning our image editing
software, Photoshop, I would like to devote some time now to introducing
you to the first steps.
For this
Lecture's assignment
you will be asked to create very small Website, consisting of two pages
only. The opening page will contain text in a table with a hyperlink to
a second page which will contain an image.
The image
you will use will be an image that you draw on white paper with black
ink and scan onto your computer's hard disk or a portable disk that you
may read from your computer. You should scan the image at 72dpi and save
it in JPEG file format if possible. If your scanning software will not
let you save it as a JPEG file, that's okay, simply choose another file
format, (such as TIFF) and you will be able to change the file format
to JPEG once you open the file in Photoshop.
You will
then open the image in Photoshop and add color! I will show you now how
to do this, we will begin very simply by using one command only. You will
then save the image in Photoshop in JPEG file format and use this image
in the Website you create for this Lecture's assignment.
|
Introducing
Photoshop |
| |
Launch
Adobe Photoshop by clicking START>PROGRAMS on you Windows operating
system desktop
|
|
You
will see the Photoshop environment which looks something like this:
|
| |
 |
|
At
this time, please close all dialog boxes except the tools dialog box.
Do this by "unchecking" the toggles on all checked dialog
boxes listed under the Window
menu on the toolbar: |
| |
 |
|
Now
you may open the image which you scanned onto your hard-disk or
portable disk by clicking file>open
and locating the file on your hard- or portable disk.
Open
the image and make the sizing comfortable for you to work with by
using the view>zoom in/zoom out
commands.
Now,
check to make sure the image color format is correct. Make sure
the image mode is set to RGB color in the image>mode
menu: |
| |
 |
|
Now
you may add some color. Click on the foreground color box on the
tools menu. You will see a large color palette and you can use your
mouse to select a color: |
| |
 |
|
Now
you may experiment with some of the tools on the tools menu bar
in order to add your simple color to this drawing. Simply try several
of the tools to find out what they do.
Remember
you may always "undo" to reverse your latest command!
(CTRL+Z or Edit>Undo)
And don't worry about making mistakes, you can always close the
file without saving or save the file under a new filename to preserve
the original.
If
you don't wish to experiment at this time, consider the following
suggestion as a start for this lecture's assignment: Use the selection
tool, or the Rectangular Marquee
Tool, at the top of the tools box and select a portion of
your drawing. Then use the Paint
Bucket Tool, in the middle section of the tools box, and
fill the area you selected. See how it looks, change the selection
or color if you don't like it. |
| |
 |
|
Now
you may end up with an image that is quite simple but still satisfactory
as a design element we can develop. Here is my example below, using
only a sketch and the paint bucket tool: |
| |
 |
| |
|
|
You
may not yet realize it, but you have already gained a good knowledge
of the basic tools you need to create great Web designs! In the coming
lectures you will be able to put these tools to use in designing great
Web page layouts! |
|
2.
|
<<
click here to view video segment (4 minutes) |
This
is the final video clip for this lecture |
(video/L5/
art391_L5_av3.wmv) |
Review
One
of the defining features of HTML is the ability to link documents on the
Web together.
A
hyperlink is a defined spot within a Web document which, when clicked
on by the Web page viewer, brings up another document (or section, email
link, etc.) into the browser.
Hyperlinks
can be text elements, images, or defined areas within images.
Hyperlinks
are defined using the anchor tag in HTML:
<a
href="URL">linked
element</a>
The
links may be absolute links or relative
links. This means that you may insert a link to a document in the same
folder as the Web document itself by simply placing the name of the document
in the link tag, or you may place the entire URL in the link tag.
By
default, browsers will display links in the color blue. Once the link
has been clicked upon (visited), the browser's default color for the link
is purple. If you want to change these colors, the place to do it is within
the <body> tag as attributes.
By
default a browser will put a border around a linked image. This is because
by setting the link attribute in the <body> tag we have instructed
the browser to put a border around any image with a link associated with
it. To correct this we simply need to add an attribute within the <image>
tag which sets the border=0.
It
is often very useful to add links to a section of a Web page. This is
particularly useful when you have a long scrolling Web page with many
sections
The
tagging for links to sections within a Web document include two anchor
tags: 1) An anchor tag where the link is inserted with the href
attribute, and an 2) An anchor tag where the link destination is with
the name attribute.
Using
the drawings you have been creating and very few commands in Photoshop
you can create interesting work that we can begin to incorporate in our
Web designs! |
