Creating a Webpage I

materialisticrampantInternet και Εφαρμογές Web

10 Νοε 2013 (πριν από 3 χρόνια και 10 μήνες)

96 εμφανίσεις



Creating a Webpage I


Welcome to Student

Computing

Education!



Information Technology Division (ITD)


http://itd.ncsu.edu



Computing Services (CS)


http://www.ncsu.edu/it/essentials



Student Education


http://www.ncsu.edu/it/education/students


Instructor:

Jen Riehle


jen_riehle@ncsu.edu



Handout written by
Don Schmidt and Jen Riehle


Objectives:



What is HTML?



Useful Terminology



Computing at
NC State University



HTML Coding



What is Dreamweaver?



Dreamweaver Layout



Dreamweaver
Site Management



Creating Your Web Page

o

Preview the page

o

Edit Page Properties

o

Creating Links

o

Indents and Lists

o

Adding Images

o

Linking Images



Microsoft Word and the Web


Materials:


This class does have some pre
-
created files to be used during the class. Please
navigate to the ‘Webpages II’ folder in:
I:
\
\
Dept
\
ITTC
\
ITD
\
StudentEd

using ‘My
Computer’. If you have any problems with these instructions, please notify your
instructor.



Eva
luation:

Please evaluate this class by going online within 24 hours of the end of class to
http://www.ncsu.edu/it/education/students/evaluations

.

Thank you!

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
2



What is HTML?


HTML stands for
H
yper
T
ext
M
arkup
L
anguage. HTML is a
standards based tag
language used to define the layout and attributes
for the displaying of

a World Wide
Web document, as well as to create links between documents,
and

images, audio and
video
.


By a
“language;” we actually mean
a set of special “tags” used to markup plain ordinary
text that
so that it
can be
interpreted

by browsers to display Web pages. Each tag
produces a specific result. Some tags are used for structure, others are used for
format
ting, and others for linking, etc. Most tags also have

one or more

“attributes” that
allow you to specify
various
options for color, size,
et
c. The application of HTML tags
and their attributes allow you to achieve the desi
r
ed results

for the way a Web p
age
appears
.


Note:

Not all Web browsers interpret HTML tags and their attributes the same way. In
addition, if a Web browser encounters a tag or an attribute that it doesn’t know or
doesn’t know how to interpret fully, it will generally ignore the tag o
r the attribute and
treat it is if it did not exist.


HTML may appear intimidating at first but once you begin to get the feel of it, there is
very intuitive.

The best place to start learning about HTML is its source, the W3C’s
Home Page for HTML,
http://www.w3.org/MarkUp/
. There are numerous
other
HTML
resources available to assist you
; a list of these resources can be found at the back of
this document
.

Or you can use a Web search engine like Google to look for “HTML
Tutorials” or “HTML Tags”.
Here at NC State, a couple of the (many) resources
available to you are:
Create a Web Pag
e

and
How to publish your own WWW hom
e
page

which we will use today.


HTML is limited by its very nature. It is not meant to control heavy layouts or fancy
acti
ons. That is why other languages such as Java and JavaScript are used and why
HTML is continuing to evolve into other languages such as DHTML and XML.
The
combination of HTML and JavaScript is also called DHTML (Dynamic Hypertext Markup
Language).


Please
note that Java Script and JAVA is not the same thing. JAVA is a full featured
programming language and is not dependent on HTML. Javascripting works with HTML
to perform “actions”. By the way, it is generally usually not fruitful to ask a JAVA
programmer

to help you with a JavaScript problem (or visa versa).


Useful Terminology and Explanations


Linking

(hyperlink)

One of the most powerful features of HTML is the ability to link. You can link to other
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
3



web pages,
documents,

other locations within the same file or to multimedia resources,
etc.


A link usually appears as underlined text or a color different from the rest of the
document so that it can be distinguished easily. It is also possible to use another page
element, s
uch as an image to represent the link.


Categories of links

There are three categories of links:



An
absolute

link


These usually begin with
http://...

and specifies the full URL
(Universal Resource Locator). Usually to an external resource.



A
relative

link usually has a short path name to an internal resource i.e., another
file within the same site (folder or group of folders). You will usually see
something like.../, or ../../ before the file name.



A
named anchor

(or ID anchor) link connects to anoth
er location in the same
document or a specific location within another document. It is specified by a
unique name or ID.



What is a
URL (Uniform Resource Locator)?

A URL,
Uniform Resource Locator is the electronic address that goes in the address bar
at the top of the web browser.

Officially the term URL (
Uniform Resource
Locator) has
been replaced by the term URI (
Uniform Resource Identifiers
), but “URL” is still more
commonly used.


URLs are structured addresses that comply with W3C standards.
URL’s are unique to
each document and generally begin with: http:// or https://
..., but there are other options
such as ftp://..., etc.


To learn more about URLs visit the W3C N
aming and Addressing
Home Page,
http://www.w3.org/Addressing/
.



URLs are
sometimes

case sensitive and
they
should not contain any blank

s
paces. If a
URL is not entered exactly correctly, the site will not o
pen.

You may have noticed that you do not always have to type in

http://

.

That is because
most modern browsers

assume that http:// is a given



they automatically plug it in for
you
.

Many pages, however, do not use a ‘www’, which is why we still need i
t.


Likewise,
pages addressed to https:
// require that you type it in. Sometimes websites are also
registered several different ways. i.e.,
http://www.gopack.com
,
http://gopack.com
,
gopack.com
, or
http://gopack.collegesports.com/

will all get you to the same place.


Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
4



HTML file extensions

When naming HTML files, keep in mind that
Web browsers

require
the

file name to
have an ".html"
or

".htm" extension.

It does not make any difference which extension
(htm or .html) you use. Pick one as a naming convention and then be consistent in
using it
.


Computing at NCSU

Everyone
actively associated with

NCSU,

s
tudents,

fac
ulty

and
staff
,

ha
s

a
unique
Unity
ID
.


This is what you use to access your Unity email account (Webmail), login into labs
and authenticate to view webpages such as TRACS.


The
U
niversity also
provides

y
our
Unity account
with

1
50 megabytes of
f
ile
space
. This space can be used for mail
storage or filespace

that will store W
eb page
s

and
other files (your k:// drive)
.


If y
ou
have not used your Unity file space before or if you have not yet
set up

access
controls, i.e., define a space for Web pages and restrictions to who has access to your
files, then you need to use the
WWW Setup Utility
.

Go to
https://sysnews.ncsu.edu/tools
-
bin/www
-
setup

and be s
ure that
you

have our Unity ID

and Password. If you have any problems, y
our instructor can assist you
.


HTML Coding

HTML cod
ing follows a simple structure; markup elem
ents contained w
ithin
angle
brackets (“<

>”), called tags
. Almost all tags follow a simple “open” and “close”
structure.


The opening tag:

< attribute >

The closing tag:

</ attribute >


Any information that is applicable to the tag attribute will fall
in between the opening and
closing tags.


Under the older versions of HTML, not all tags were required to have an end tag. Under
the latest rules for XHTML and XML, all tags are required to have an end tag. A few
HTML commands remain that do not have to
have closing tags and we will discuss
them as we go.


HTML tags are not case sensitive, however, XHTML and XML tags are. XML tags need
to be lower case and therefore, you should develop the habit of using lower case.


At
t
ributes

Most HTML tags have
attributes. These are options for modifying the default effect of
the tag. For example you can change color, alignment or font face. One or more
attributes can be used within a tag. The general format for coding tags and their
attributes is:


<tag attr
ibute=”
value
” attribute=”
value,value
”>
CONTENT

</tag>


Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
5



Changing the color of an object is possibly the most commonly used attribute. HTML
does this one of two ways. The more common method is by using a hexadecimal chart,
which has assigned a combination of

letters and numbers to represent hundreds of
different colors.

The second method involves entering the name of the color. Unlike the hexadecimal
number, only a few dozen colors have specific names, but this can be an easier way to
remember to stick with
a specific color.


A full spectrum of named colors and hexadecimal colors can be found at
http://www.htmlclinic.com/colorchart.php
.


Special characters

Sometime you will need to enter special characters or expressions in your web page but
HTML/XHTML may not be able to accept them directly as entered from the keyboard.
i.e., the expression A>B (A is greater than B) would be interpreted as having a markup
t
ag, or some characters


like the “&” symbol
-

have special meaning to XHTML. These
characters or expressions would have to be entered by using a special code, either a
“character reference” or an “entity reference”. For more information and a complete
l
isting of these codes see:

HTML Codes
-

ASCII Special Characters at:



http://www.w3.org/MarkUp/html
-
spec/html
-
spec_13.html



http://webdesign.about.com/library/bl_htmlcodes.htm



http://www.w3.org/TR/REC
-
html40/sgml/entities.html



Also see
, HTML Codes
-

ASCII Special Characters
:

http://webdesign.about.com/library/bl_htmlcodes.htm



Core Tags for an HTML Page

The “core” tags for a webpage are those that need to be included on all web pages.
Webpage editor application
s, such as Dreamweaver often include these tags for you
automatically.


<html>

<head>


Head tags (title, style or link, meta, script)

</head>

<body>


Page
content

</body>

</html>


All HTML pages begin with the <html> tag and end with the </html> tag. The

pages
must also include two sections; the Head and the Body:



The Head contains information about the page. This is helpful to browsers so
they will know how to best interpret the code. Information needed for
javascripting and other information is include
d in the head. The Head begins with
the <head> tag and ends with the </head> tag signifying that it is the end of the
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
6



Head component of document.
With the exception of the “title”, the contents of
the Head are not displayed by the browser
.



The Body cont
ains

the information to be displayed by the browser, according to
the specifications contained within the HTML markup tags (and their attributes).
The Body begins with the “<body>” tag and ends with the “</body>” tag. The
body tag has a large series of att
ributes related to defining the properties of the
web page (default font color, size, font, page background color or patter, page
layout etc.)


HTML Tags

There are dozens of HTML tags that can be modified in thousands of different ways to
display your age
in any way you wish. For a full list of tags, look in the Appendix of this
document.



What is Dreamweaver?

These days, HTML Editor Applications
, such as Dreamweave
r, GoLive

and FrontPage
are very common and take most of the work of the coding out of your hands.



You may ask why, if these tools do such a great job of developing Web pages and
generation the HTML code for me, do I need to know HTML coding? Unfortunately,
som
etimes these applications cannot do everything the way you would like it done.
Occasionally it is necessary to modify the code directly to get the results you want. If

you are familiar with HTML and how it works, you will better be able to use and
unders
tand the HTML editors and get them to do the things you would

like to do

or do
the things that the tools can’t do.


In addition to its extensive Web page development and site management capabilities,
Dreamweaver also has features that allow developers to:

1.

Automate production and enhance team efficiency.

2.

Integrate and interact with other Macromedia applications, Microsoft Office and
leading e
-
commerce and application servers.

3.

Customize Dreamweaver by importing “extensions” for additional functions.

4.

Custom
ize Dreamweaver’s workspace to make it convenient for you and to suit
your style of work. You can even rearrange the workspace, change colors of
items and create your own hot keys or shortcuts.

5.

Develop advanced Web sites using HTML, XHTML, JavaScript, CS
S, PHP and
XML etc.

6.

Develop Web based applications using a wide variety of “scripting” languages.
e.g., ASP JavaScript, ASP VBScript, ASP.NET C#, CFML, ASP.NET VB,
ColdFusion, ColdFusion Component, JSP and PHP.

Scripting languages and Dreamweaver’s many a
dvanced capabilities for advanced Web
page design, Web applications development and database interaction will not be
covered in these workshops.


Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
7



Dreamweaver Layout


1.

Title Bar


Document (file) name, location and type of document

2.

Menu Bar


Dreamweaver’
s main menu bar (File, Edit, View, etc.). Edit >
Preferences is where you can set up default attributes for your style of work for
developing Web pages and where Accessibility features are activated.

3.

Insert drop down menu
-

The Insert feature contains eit
her drop down or tab
options for selecting

common objects and functions
to insert into your Web page.
There are several categories under the drop down menu. The “Common”
category is usually the default. Each category provides a variety of commonly
used
functions, such as tables, templates, forms, meta tags and special
characters.

4.

Document title tabs
-

The name of each document that is open will be placed in a
separate tab across the top of the document tool bar. This provides for rapid
switching betwe
en documents. Multiple documents can also be viewed
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
8



cascading, vertically or horizontally by selecting Window (from the main menu
bar) then selecting the preferred option (near the bottom of the selections).

5.

Document Tool Bar:

o

Views on the Document Toolb
ar:



Code view
-

Shows the editable HTML source tags.



Split (code and design View)


Shows both the HTML source and
the design views of your document in a split window.



Design view


Displays the

What
-
You
-
See
-
Is
-
What
-
You
-
Get


view
of the document in the window.



Live Data View


For testing applications. Not used in these
workshops.

o

Title


Here you can enter the Document’s Title. This title will appear at
the top of the page when viewed by a Web browser. It is also used b
y
many search engines to help locate your Web page.

o

No Browser Check Errors


A tool to help you check various browsers for
compatibility with your Web page.

o

File Management functions
-

Used to move your Web page (files) to and
from the Web server.

o

Previ
ew/Debug in Browser
-

Used to look at your Web page through a
Web browser.

o

Refresh


Updates the site cache.

o

View Options


More options to help develop and test web pages.

6.

Tag View
Document Window (main workspace)
-

Provides a
view of the code as
you
would see if you were using a traditional text editor to hand
-
write the page.
Can be edited directly.


7.

Design View
Document Window (main workspace)
-

Provides a What
-
You
-
See
-
Is
-
What
-
You
-
Get display of your Web page approximately as it will appear in a
bro
wser such as Internet Explorer, Mozilla or Opera, etc.

8.

Window Size

& Download Speed



Settings for
the size of the document window
and an indicator of

the size of the Web page and approximately how long it
should take to download to a visitor’s browser.


9.

Properties Inspector (at the bottom of the screen)
-

A context
-
sensitive window
that displays the properties (specifications) for the object currently selected.

10.

Panels
-

a variety of docked panels

that appear
on the right side of the screen.
These panel
s provide quick access to commonly used functions. They are
customizable and moveable. We will be using the Files panel in all of these
workshops.


You can set up Dreamweaver’s workspace to suit your individual style of work so that
you may work as effic
iently or as comfortable as you desire. This is accomplished by
setting or changing “Preferences
.

To edit Preferences and to set up various options, go
to Edit > Preferences and select the functions and their attributes for your style of work.
This is al
so where Accessibility features are activated.



Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
9



Dreamweaver Site Management

Professional Web developers usually maintain two sets of their Web files (pages,
documents, files, etc.), a working copy and a production copy. For that reason,
Dreamweaver was
designed with the capacity for “defining a site” and storing that
information.


Defining a site means that the web server and folder in which your webpage exists are
saved, and can be accessed repeatedly. For some people who manage multiple sites, it
is u
seful to save each of their sites so they can move between the files they need with
great ease.


These sites can be accessed in multiple ways. If they site is located in a drive on the
machine you are on, a site can be created directly linking to the sourc
e of the
webpages. In many cases however, the source of the webpage is web server that is not
directly linked to the user’s machine. If that is the case, a site can be setup to FTP to the
web server to move the files back and forth as needed. Additionally,

the Files Panel will
also allow you to expand the window to view all files in each folder and even move
between folders.


In the case of this class, as long as you have logged in with your Unity ID and password
you should be able to directly access the k:// drive, and hence the source of your
webpage. To define the site we will simply

1.

Click on the drop
-
down menu under “Files
” and select “Network Drive (K:)

2.

Dreamweaver should automatically populate the Files window with all the
documents in your K:// drive.

3.

To make changes to this site, or others, click on the drop down menu again and
select “Manage Sites”. This menu will all
ow you to choose a site and view or
modify its properties.


Occasionally, when working with sites
Dreamweaver will “Cre
ate Cache” for your site.
This means taking
a complete inventory of every
thing within the site and checking

for all
links and relationshi
ps so that it can manage
the

site.

It may do this after each time you
reboot your machine, or if someone else has modified files within the site from another
location.


Creating Your Web Page

Before we start the page, we must consider that many times we ne
ed to look at what
the page looks like in a real browser.

Preview your page in a Web browser

T
here are several methods that can be used t
o preview your page in a Web browser:

Method 1:

From the main menu, select File > Preview in Browser > iexplorer

(there
are ways to select other browsers)

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
10



Method 2:

On the document menu bar select the round icon of the world > Preview in
iexplorer

Method 3:

Press F12

You should now be able to see your Web page as it would be seen on the World Wide
Web


but it’s not

there. It’s only on your local computer. No one else can see it


yet.

Editing the Page Properties

Remember the <head> tag that we mentioned as a vital part of the page, that didn’t
display anything? Here’s where its work comes in.
To edit the entire pa
ge, use the

Page
Properties;
Modify

> Page Properties.





Change the color of the background or use a background image.



Change the color of all the text on the page.



Change the color of all the links on the page.



Save your work (File > Save or CTRL + S).



Preview your work in the browser (F12)

Most of the changes made to the entire page will appear in the <body> tag as attributes,
or within the <head> tags. These preferences for page background, link properties and
other effects, when saved and stored to mu
ltiple web pages are known as Cascading
Style Sheets.



Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
11



Inserting

a

Horizontal Rule

A horizontal rule is actually a line that can divide your page into sections. You can select
the length and width of the rule and whether or not it should have shadowing. W
e will
insert two in two separate ways.

1.

For the first one:

a.

Use you cursor to click after the <body> tag on the code view section of
the main screen.

b.

Type in: “<hr>

c.

Click on the circular arrow

in the Document Tool Bar. This will refresh
the Design view of

the page to show changes made in the code view.

2.

Second choice:

a.

Use your cursor to select anywhere on the Design view section of the
main screen.

b.

Go to the “Insert” menu and select HTML, then Horizontal Rule.

c.

The rule will appear on your screen and, while
selected, changes to the
length, width and shadow can be made using the Properties Inspector.


Creating a Link

As mentioned earlier, there are three types of links: absolute, relative and anchors.

For
a refresher on these links, look on page 3.

Let’s
start by
put
ting

an
absolute link

into our
pages.

Exercise
1


Absolute

Links

1.

Highlight
“Link to Travel Deals Website”

2.

Look in the Properties Inspector and enter the full URL in the “Link” box.

Use
http://www.expedi
a.com

or another well known travel site.

3.

Preview your work in the browser (F12)

4.

Test your link.


Exercise
2



Relative Links

In a previous exercise, you inserted some Absolute Links
.

Now we will learn how to insert another type of link


a Relative Link.


1.

Highlight “Pictures from Spring Break 2004”.

2.

Inserting the relative link address into the link box in the properties


three
methods:

3.

Method one


Type in the relative address.

a.

In the link box

type in the relative address. If you do not know, or are not

sure of the relative address, try using one of the other methods.

4.

Method two


Browse to the file.

a.

To the far right of the link box are two icons, one that looks like a little
clock and the last one, a little yellow tab folder. Select the yellow tab
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
12



fo
lder icon and navigate (browse) to the file you want to link to and select
it (
sb2005/index.html
). The relative address should now appear in the link
box.

5.

Method three


Point to the file.

a.


Just to the right of the link box is an icon that looks like a l
ittle clock.
Click on it, the Point to File wheel, and drag your cursor to the tables.html
file in the Files Panel. This will establish the link to the page.


In a previous exercise, you inserted some absolute

and relative links.

Now we will learn how to

insert another type of link


a Named (or ID) Anchor Link.

Anchor links are primarily used to “jump” from one place in a Web page to another place
in the same page. This is often helpful if the page is a long one.


Exercise
3

-

Inserting Named (ID) Ancho
rs and links

1.

Click at the beginning of the first in the list of information about vacation spots:
“Bahamas”

2.

Click on the Anchor icon in the Insert bar (Common category).

3.

Name it “
bahamas


4.

Highlight the word “Bahamas” in the “Information about:” list

5.

Insert

the link to the anchor


two methods:

a.

Method one


In the link box in the Property Inspector, type in the anchor’s
address (name)

with a “#” before it: “#bahamas”. B
e sure to spell i
t exactly
the way you named it
.

b.

Method two


Point to the fil
e.
Just to the right of the link box is an icon
that looks like a little clock. Click on it, it’s the Point to File wheel, and
drag your cursor to the
“bahamas” a
nchor that you created
next to the
Bahama’s paragraph.

6.

Repeat this process for each of the five
potential Spring Break vacation spots.

7.

Save your work (File > Save or CTRL + S).

8.

Preview your work in the browser (F12)

9.

Test your link(s).


If you want to link to a named anchor within another page all you have to do is add a #
symbol and the anchor’s name

(i.e., #
anchor_name)
at the end of the URL or the end of
the relative addre
ss
. For example,
go to:
http://www4.ncsu.edu/~jmriehle/othrlinks.html#homestar


There is a fourth type of link, and this is a link to send an email to someone.


Exercise 4



Email

Links

1.

Go to
bottom of the w
eb page.

2.

Highlight the
words “Vote by emailing Jen Riehle”

3.

Complete one of the following:

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
13



a.

Method One
-

In the Insert bar (Common category), select the “Email link”
icon (it looks like an envelope). The information in the “Text”
box should
be the same as the information yo
u highlighted on the Web page. Type in
the email address you want to refer the user to. Make sure it is typed in
correctly!

b.

Method Two


In the link location of the Properties Window type in
“mailto:[insert email

address here]”.

4.

Click on OK

5.

Save your work (File > Save or CTRL + S)

6.

Preview your work in the browser (F12)




Indents and Lists

Indents and lists are an important way of formatting the structure of your page and
organizing the content in a way that is a
ttractive and legible.

Exercise
5

-

Indents

1.

Indenting and Outdenting:

a.

Select some information that you would like to indent.

b.

From the Properties Inspector, use Indent and Outdent functions to
structure information.

c.

Try this in several different areas of

the page.

2.

Nesting Indents:

a.

Try inserting an indent inside another indent.

b.

Notice
-

it is not really indenting. True indenting is usually only on the left.
Here it indents on both sides. These are called “blockquote” tags in
HTML.

3.

Save your work (File >

Save or CTRL + S).

4.

Preview your work in the browser (F12)


Exercise
6

-

Lists

1.

Take a look at the bulleted list of potential vacation spots

2.

View the indents with the “Bullets” button and the “Numbering” button selected in the
Properties inspector.

3.

Note tha
t the coding changes slightly based on the type of list you have selected.

a.

Bulleted lists = “<ul>” or “unordered lists.

b.

Number lists = “<ol>” or “Ordered lists.

4.

You can also control how the list look by specifying the “Type” attribute:

a.

<ol type=1> “1., 2.,

3.,…”

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
14



b.

<ol type=A> “A., B., C.,…”

c.

<ol type=a> “a., b., c.,…”

d.

<ol type=I> “I., II., III.,…”

e.

<ol type= i> “i., ii., iii.,…”

f.

<ul type=disc> “
●”

g.

<ul type=circle> “○”

h.

<ul type=square> “■”

5.

Nesting Lists:

a.

Try inserting a list inside a list.

b.

Select a list item(s)
and use the Indent/Outdent function.

c.

For a real challenge, create the list in the “code” window

6.

Save your work (File > Save or CTRL + S).

7.

Preview your work in the browser (F12)


Note: Although not covered in this class, there is a third type of list, Defi
nition List.
These are generally used for description or glossaries applications.


Exercise
7

-

Adding
Images:

Let’s add a couple of images to the Web page.
The images you will need are in the
“Images” folder on the I:// drive.



Position
your cursor below

the paragraph about the Bahamas



From the Insert bar (with the Common Tab selected) click on the Image icon (the
one with the little tree on it). This will open the Select image dialog box. (You
can also select Insert from the main menu then select Image
.)



In the Look in window, navigate to the Desktop >
WebPages

> images folder and
select the
“bahamas.jpg”




The alt t
ext dialog should now stop you.

Type in
“Bahamas”
. Click on OK.



Repeat these steps for photos of each of our potential vacation spots.



You

may want to format the way the photos look. Using the properties inspector
you can:

o

Alter the image size

o

Add an “alt” tag (as discussed above)

o

Add a border to the photo

o

Align the photo on the page

o

and much more we will learn later…



Save your work (File >
Save or CTRL + S).



Preview your work in the browser (F12)


Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
15





Exercise
8

-

Adding Links to Images

Sometimes it’s helpful for an image to be the link to another resource. Let’s make the
images at the top and the bottom of the page link to somewhere.



To ad
d links to
an image
:

o

Select the image.

o

In the properties inspector, in the
L
ink box, type in

http://www.bahamas.com

.

o

Click away or press enter to lock it in.



Save your work (File > Save or CTRL + S).



Preview your
work in the browser (F12)



Test the links


You should
always

test a link before adding it to your page to ensure that it is correct
and that you know where the link goes.


Microsoft Word and the Web

You can use Microsoft Word to save a document as an HTML p
age. While this is an
easy and convenient way to create an HTML page, you'll notice that Word doesn't
always save the original formatting, nor does it use standard HTML tags. And it adds a
lot of its own codes, which can cause problems when the document
is edited later.

Exercise
10

-

Convert a Microsoft Word document to HTML for use with Dreamweaver

Open PowerPoint.htm

If you look at the code view you will notice that there is a great deal of coding there that
we have not discussed. This is a different
type of coding and it is very difficult to make
changes to the html document with this type of coding.

Some of this coding can be cleaned up by going to “Commands>Clean Up Word
HTML”.

Dreamweaver
also
gives you the opportunity to clean up some of Microsoft
's code
by
importing.

Import a
Word

Document directly into Dreamweaver:

A new feature added to Dreamweaver MX 2004 is the ability to directly import Word
documents into your Web pages. The import feature “cleans up” the files as it imports
them.


Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
16



To do
this in Dreamweaver:

1.

Create or open a new or position the pointer in an already open file.

2.

Switch to Design view.
-

The command will not work from within Code view.

3.

From the main menu, select File > Import > Word Document…, then browse to
the location wher
e the file is stored and select the file.

4.

Click on OK.

5.

The (cleaned up) information should now appear in your Web page.

6.

Save your file.

7.

Preview in browser.


Copy and Pasting from
Word

into Dreamweaver

Another new feature in Dreamweaver MX 2004 is the abili
ty to copy content from Word
and Paste it directly into Dreamweaver. The content that you copy can be anything,
text, tables, pictures, etc. This should be used if the file is small enough or has only
limited amounts of fancy formatting. It can also be d
one when moving content from
Excel!

The pasted content will be nicely formatted and ready for use.


Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
17



Appendix


Other HTML help:



Basic XHTML Tag Library:

http://webdesign.about.com/cs/htmltags/a/bl_index.htm




http://www.ncsu.edu/it/edu/html_trng/html_basics.html



http://www.w
eb
-
source.net/216_color_chart.htm

(hexadecimal color chart)



NC State Help Knowledgebase

http://help.ncsu.edu



Web based forms at NC State
http://www.ncsu.edu/tools/inform3.html


Coding
Tutorial
s:



XHTML Tutorial
:

http://www.w3schools.com/xhtml/default.asp




Programming Languages Assistant

http://www.bigwebmaster.com/



Writing HTML Tutorial:

http://www.mcli.dist.maricopa.edu/tut/lessons.html



HTML Goodies HTML Tutorial:

http://www.htmlgoodies.com/tutors/



How Can I Learn HTML?

http://webdesign.about.com/cs/beginninghtml/f/bl_faq2
-
1.htm


Dreamweaver Tutorials:

Following are just a few Dreamweaver

resources available to you:



Numerous
Dreamweaver books



Within Dreamweaver:

o

press the F1 key to access “Using Dreamweaver topics”

o

Click on “Help” on the Dreamweaver menu bar



On line Dreamweaver resources (just a few):

o

Macromedia’s Dreamweaver support site

http://www.macromedia.com/dreamweaver/support

o

Dreamweaver top hints

http://www.macromedia.com/devnet/mx/dreamweaver/articles/dwmx_top_tips
.html

o

Lynda Weinman’s Application Tips
:
http://www.lynda.com/tips/

o

Dreamweaver Depot
-

http://www.andrewwooldridge.co
m/dreamweaver/

o

Macromedia’s developers support site
http://www.macromedia.com/desdev



You can find many other Dreamweaver resources on the Web by using a Web
search engine.


Web Ethics, Copyright, Fair Use and Intellectual Property Issues:



NCSU’s Computer
Use Rules and Regulations

http://www.ncsu.edu/it/essentials/rules_and_regs/overview_rules_and_regs.html
#computer

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
18





NCSU’s Policy Statement on Copyrigh
t Infringement

http://www.ncsu.edu/copyright/policy_statement.html



NCSU Administrative Regulation on Copyright Infringement

http://
www.ncsu.edu/copyright/index.html



10 Big Myths about Copyright explained

http://www.templetons.com/brad/copymyths.html



CyberLaw

http://www.cyberlawusa
.com/



Web Law FAQ

http://www.patents.com/weblaw.htm



Copyright Website

http://www.benedict.com/


Other Resources:



Build a Web site

http://www.learnthenet.com/english/section/webpubl.html



Build a personal Web page:

http://personalweb.about.com/libra
ry/bl_tutorial.htm


Accessibility:

As a public institution, we are required to comply with Section 508 of the Rehabilitation
Act.

requiring "any item, piece of equipment, or product system, whether acquired
commercially off the shelf, modified, or customiz
ed, that is used to increase, maintain,
or improve functional capabilities of individuals with disabilities.” This means that our
web pages must be accessible to persons with disabilities.


To do this in Dreamweaver:

1.

From the main menu

Select Edit (from t
he main menu bar)

2.

Select Preferences (near the bottom)

3.

Select Accessibility (the second item in the list)

4.

Turn on, place a check in, all of the options


Images, Tables and Forms, etc.

5.

Click on OK


Time may not permit us to use all these options in this class, but you should make a
habit of keeping these options activated at all times.


More about assistive technology:

1.

NC State is committed to supporting accessibility, see:

http://www.ncsu.edu/it/access

2.

For information on operational, technical and training support for assistive
technology (AT), see:

http://www.ncsu.edu/it/dss

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
19



3.

NC State Libraries Assistive Techno
logies Center (ATC), see:

http://www.lib.ncsu.edu/risd/atc/


4.

US Federal government requirements for accessible Web pages. For detailed
technical information about making Web pages accessible compliant, se
e:

Web
-
based Intranet and Internet Information and Applications

http://www.access
-
board.gov/sec508/guide/1194.22.htm

5.

W3C Web content accessibility guidelines, see:

http://www.w3.org/TR/1999/WAI
-
WEBCONTENT
-
19990505/checkpoint
-
list

6.

Macromedia’s accessibility support site, see:


http://www.macromedia.com/macromedia/accessibility/
.

7.

Sample of “reading” a Web page, see:

http://www.websavvy
-
access.org/resources/formexample.php


8.

Techniques for Web Content Acc
essibility Guidelines 1.0, see:

http://www.w3.org/TR/WCAG10
-
TECHS/

9.

Web Accessibility Initiative (WAI), see:

http://www.w3.org/WAI/


10.

LTS Improving Your Web Site Access
ibility, see:

http://lts.ncsu.edu:8170/guides/accessibility/

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
20



Basic HTML/XHTML Tags

Skeletal Tags



<html>
the entire HTML document
</html>

<html attribute(s)="
value
">
the entire HTML document
<
/html>


Defines the beginning and end of an
HTML document.

<head></head>

<head attribute(s)="
value
">
content of the head
</head>

Defines the beginning and end of the
"head" part of an HTML document.
Sets off the title and other information
that isn't
displayed on the Web page
itself.

<body>
content of the document body
</body>

<body attribute(s)="
value
">
content of the document
body
</body>

Defines the beginning and end of the
"BODY" part of an HTML document.
Sets off the visible portion of the
document.

<!
--

comments in the source

--
>

The Comment tag is used to contain
textual matter that appears in the
source code of the document but is
not rendered by the browser.

<frameset>
content of the frameset
</frameset>

Defines a collection of frames and
framesets and controls their spacing
and borders. Replaces the <body> tag
in a frames document; can also be
nested in other framesets.

<frameset rows="
value
,
value
"></frameset>

Defines the number and width (value)
of the rows within a frameset. Values
are
in pixels or percentages of
frameset width.

<frameset cols="
value
,
value
"></frameset>

Defines the number and width (value)
of the columns within a frameset.
Values are in pixels or percentages of
frameset width.

<frame>
content of the frame
</frame>

Defines

a single frame


or region


within a frameset.

<noframes>
message to be displayed by browser that is not
frame
-
compliant
</noframes>

Defines the message that will be
displayed by a browser that doesn't
support frames.




Header Tags



<title>
title of
the document
</title>

Displays the name of the document in
the browser's title bar for the
displayed document.

<meta>
information about the document
</meta>

Meta

tag(s) provide additional
information about the document. May
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
21



<meta attribute(s)="
value
">
information about the
document
</meta>

be used by search engines to locate
the document.

<style>
style properties
</style>

<style attribute(s)="
value
">
style properties
</style>

Used to create properties to control
the display of the
body content for the
entire document.

<script>
executable script to be processed by the
browser
</script>

<script attribute(s)="
value
">
executable script to be processed
by the browser
</script>

Defines one or more scripts that can
be invoked by elements with
in the
document.
Some scripts are invoked
by code or attributes within the
"body".






Body Tag and Commonly Used Attributes



<body bgcolor="
value
">
document content
<body>

Specifies the background color, using
the name or hex value of the color.

<body

background="
url of the image
"
(or

"
path to the
image
"
)
>
document content
<body>

Uses an image for the background.

<body text="
value
">
document content
<body>

Specifies the text color, using the
name or hex value of the color.

<body vlink="
value
">
document c
ontent
<body>

Specifies the color of followed links,
using the name or hex value of the
color.

<body alink="
value
">
document content
<body>

Specifies the color of links on click.




Text Markup Tags



<pre>
text to be preformatted
</pre>

Displays
preformatted text. Preserves
all spacing and text characteristics.

<h1>
headline content
</h1>

Displays the largest headline.

<h6>
headline content
</h6>

Displays the smallest headline.

<b>
text to be displayed in bold
</b>

Displays bold text.

<i>
text to be
displayed in italic
</i>

Displays italic text.

<tt>
text to be displayed in teletype style
</tt>

Displays teletype or typewriter
-
style
text.

<cite>
information to be cited
</cite>

Displays a citation, usually in italic.

<em>
text to be emphasized (italic)
</em
>

Emphasizes a word (currently with
italic).

<strong>
text to be emphasized (bold)
</strong>

Emphasizes a word (currently with
bold)

<font face="
value
">
text to be displayed in a certain font
</font>

Specifies font face (e.g., Arial,
Courier, Times Roman)

<
font size="
#
">
text to be displayed in a certain font
</font>

Specifies font size, from 1 to 7.

<font color="
value
">
text to be displayed in a certain font
</font>

Specifies font color, using the name or
hex value of the color.

Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
22






Hyperlink Tags




<a href
="
url
"
(or

"
path
"
)
>
text to be displayed as a link
</a>

Displays a hyperlink.

<a href="mailto:
emailaddr@somewhere.com
"></a>

Displays a mailto link.

<a name="
name of the target
"></a>

Displays a target location within a
document.

<a href="
#
name of the
target
"></a>

Displays a link to a target location
from elsewhere in the same
document.




Formatting Tags




<p>
content of the paragraph
</p>

Begins a new paragraph or inserts a
double line break.

<p align="
value
">
content of the paragraph
</p>

Aligns a
paragraph to the left, right or
center.

<br />

Inserts a single line break.

<blockquote>
text to be indented
</blockquote>

Indents text from both sides.

<dl>
list of definitions
</dl>

Defines the beginning and end of a
definition list.

<dt>
term to be defin
ed
</dt>

Displays each definition term.

<dd>
definition of the term
</dd>

Displays each definition.

<ol>
ordered (numbered) list
</ol>

Defines the beginning and end of a
numbered list.

<li>
individual item in a list
</li>

Displays a list item and its number.

<ul>
unordered (bulleted) list
</ul>

Defines the beginning and end of a
bulleted list.

<div align="
value
">
content to be formatted
<div>

A generic tag used to format large
blocks of HTML. Also used for
stylesheets.




Tags for Graphic Elements



<img src="
path to the image
"

or

"
url of the image
"></img>

Inserts an image.

<img src="
path to the image
"

or

"
url of the image
"
align="
value
"></img>

Aligns an image: left, right, center;
bottom, top, middle.

<img src="
path to the image
"

or

"
url of the image
"
border="
#
"></img>

Specifies thickness of the border
around an image.

<hr></hr>

Inserts a horizontal rule.

<hr size="
#
"></hr>

Specifies the thickness (height) of a
rule.

<hr width="
#
"
(or

"
%
"
)
></hr>

Specifies the width of a rule, as a
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
23



percentage of the
page width or an
absolute value (pixels).

<hr noshade></hr>

Creates a rule without a shadow.




Table Tag and Attributes



<table>
entire table contents
</table>

<table attribute(s)="
value
">
table row contents
</table>

Defines a table.

<caption>
text of
the caption
</caption>

Displays the caption for a table. The
caption tag must be inside the table
tag.

<table border="
#
">
entire table contents
</table>

Specifies the width of the border
around a table.

<table align="
value
">
entire table contents
</table>

Specifies the horizontal alignment of
the table on the page. Options are left,
center and right.

<table cellspacing="
#
">
entire table contents
</table>

Specifies the amount of space
between table cells.

<table cellpadding="
#
">
entire table contents
</table>

Specifies the amount of space
between a cell's border and its
contents.

<table width="
#
" or "
%
">
entire table contents
</table>

Specifies the width of a table


as a
value in pixels or as a percentage of
document width.

<table bgcolor="
value
">
entire table
contents
</table>

Specifies the background color of a
table. Value must be a color's hex
number or one of the approved color
words. This attribute can also be used
to specify the background color of a
table row or of an individual cell.




Table Row Tag
and Attributes



<tr></tr>

<tr attribute(s)="
value
">
table row contents
</tr>


Displays a row in a table. Table row
tags and their content must be inside
the <table></table> tag.

<tr align="
value
">
table row contents
</tr>

Specifies the horizontal alignment

for
cell(s) (left, center or right).

<tr valign="
value
">
table row contents
</tr>

Specifies the vertical alignment for
cell(s) (top, middle or bottom).





Table Data Cell Tag and Attributes



<td>
content of a data cell
</td>

Displays the contents of a
cell in a
row. <td> (data cell) tags and their
content must be placed inside a
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
24



<tr></tr> tag.

<th>
content of a table column heading
</th>


When placed inside the first row of a
table tag, <th></th> tags display
column headings in bold, centered
text.

<td

width="
value
">
content of a data cell
</td

Specifies the width of a cell.

<td align="
value
">
content of a data cell
</td>

Specifies the horizontal alignment for
the content of an individual cell (left,
center or right).

<td valign="
value
">
content of a data

cell
</td>

Specifies the vertical alignment for the
content of an individual cell (top,
center, middle, baseline or bottom).

<td colspan="
#
">
content of a data cell
</td>

Specifies the number of columns a
cell should span.

<td rowspan="
#
">
content of a data

cell
</td>

Specifies the number of rows a cell
should span (default=1).

<td nowrap>
content of a data cell
</td>

Prevents the lines within a cell from
being broken to fit.




Frame Tag and Attributes



<frame src="
url

of the document to be displayed in the
frame
">
content of the frame
</frame>

Specifies the HTML document to be
displayed within the frame.

<frame name="
name of the frame
">
content of the
frame
</frame>

Names the frame, or region, so that it
may be targeted
by other frames.

<frame marginwidth="
#
">
content of the frame
</frame>

Specifies the left and right margin
widths for the frame; must be equal to
or greater than 1.

<frame marginheight="
#
">
content of the frame
</frame>

Specifies the top and bottom margin
widths for the frame; must be equal to
or greater than 1.

<frame scrolling="
value
">
content of the frame
</frame>

Determines whether the frame has a
scrollbar; values are "yes," "no" and
"auto." The default, as in ordinary
documents, is auto.

<frame noresi
ze>
content of the frame
</frame>

Prevents resizing a frame.




Form Tags



HTML creates only the appearance of a form. For the form to
work properly, a script is needed on the server. The script
processes the transaction after the "Submit" button is
pressed.



<form>
content of the entire form
</form>

Displays a form.

<select multiple name="
name
" size="
#
"></select>

Displays a scrolling menu. Size sets
the number of menu items visible
Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
25



before you need to scroll.

<select name="
name
"></select>

Displays a pulldown menu.

<option>
description of a menu item
</option>

Labels a menu item.

<textarea name="
name
" cols="
#
" rows="
#
">
text or instruction
to be displayed inside the box (usually left blank)
</textarea>

Displays a text box area. "Cols" value
se
ts the width; "rows" value sets the
height.

<input type="checkbox" name="
name
">
text to be displayed
next to the box
</input>

Displays a checkbox and its
associated text (label).

<input type="radio" name="
name
" value="
x
">
text to be
displayed next to the b
utton
</input>

Displays a radio button and its
associated text (label). Value
indicates the symbol or text that will
be sent to the server if this option is
selected.

<input type="text" name="
name
" size="
#
">
text to be
displayed next to the area
</input>

Displays a one
-
line text area. Size
indicates the number of characters
that the user can type in the box.

<input type="submit" value="
name
">
text to be displayed next
to the button (often left blank)
</input>

Displays a "Submit" button

<input type="image"
border="
#
" name="
name
" src="
path to
or url of the image
">
text to be displayed next to the image (often
left blank)
</input>

Displays a "Submit" button using an
image.

<input type="reset">
text to be displayed next to the button
(often left blank)
</input>

Di
splays a "Reset" button.





Deprecated Tags (outdated, to be discontinued)



The following tags are currently supported by HTML 4.01
and XHTML 1.0, but their use is discouraged.


Use instead:

<applet>
-

Embedded Java or other language applet

object

<basefont>
-

Default font properties

cascading style sheets (CSS)

<center>
-

Centered block of text

CSS

<dir>
-

Directory list

ul

tag and CSS

<font>
-

Inline text font properties

CSS

<isindex>
-

Queryable document (text query interface)

input

element inside a
form

<menu>
-

Menu list

ul

tag and CSS

<s>
-

Strike
-
through text style

CSS

<strike>
-

Struck
-
out text style

CSS

<u>
-

Underline text style

CSS

URL
-

Uniform Resource Locator. An informal term (no longer
used in technical specifications) associated with popular URI
schemes: http, ftp, mailto, etc.

URI
-

Uniform Resource Identifier.
The generic set of all
names/addresses that are short
strings tha
t refer to resources.



Information Technology Division | Student Education

| Creati
ng a Webpage I

Page |
26



Thank

you for your interest in Student Education. We hope that this class has been
helpful. If you have additional questions or comments about this class or any others,
please contact us at
classreg@ncsu.edu

or leave us feedback at out webpage,
http://www.ncsu.edu/it/education/students
.