THE BASICS OF WEBPAGE DESIGN

1
THE BASICS OF WEBPAGE DESIGN

• PRL Brownbag 2
• February 28, 2003

2
Plan for the day

• What is HTML?
• Definition, uses
• Sections of a web page
• Creating a web page, pt. I.
• Using Notepad to write basic HTML
• Creating a web page, pt. II.
• Using Macromedia to create a basic page
• 10 helpful things

3
What is HTML?

• HTML (an acronym for Hyper Text Markup Language)
  is a simple, powerful, and intuitive way to
  publish text and images.
• To use a simple analogy, HTML marks (or tags) are
  like stage directions, telling the browser what
  to show.
• For example

• All HTML commands are in ltbracketsgt
• Must have two brackets for every command
• Nothing more than text (.txt)

4
What the browser sees
5
The two major sections of every webpage

• Header
• 1) gives the browser the background
  characteristics of the web page
• 2) contains the web page identifiers, ie., meta
  names and tags

• Body
• 1) the largest part of a webpage
• 2) the content section of the webpage,
  identifying content and its attributes to the
  browser

6
Lets try and modify a page . . .

• Open up example1.txt in wordpad . . .

• Lets change the title . . .
• Delete First webpage and type Puppy Love . . .

• Now lets change the headline . .
• Delete My First Webpage between the lth1gt tags
• Type in My Puppy

7

• Now its time to insert a picture of our puppy .
  . .
• Under the headline tag, hit enter, and then type
  ltpgtlt/pgt
• Then type the following lines
• ltcentergt
• ltimg srchttp//psweb.sbs.ohio-state.edu/grads/bs
  trath/puppy.jpggt
• lt/centergt

It should look something like this . . .
8
Finally, lets add a link to our home page and
email address . . .

• For a link to a web page . . .
• After the Hello World line, create a space
  (ltpgtlt/pgt).
• Now type in ltpgtVisit my web lta
  hrefhttp//www.osu.edugtpagelt/agt
• . . . and email . . .
• 3. Type or lta hrefmailtostudent_at_osu.edugtemai
  llt/agt me.lt/pgt

Should look something like this . . .
9
In a browser, this code looks like this . . .
10
Using Dreamweaver
Dreamweaver is a WYSIWIG product do not need to
know any HTML code.
3 steps to designing a basic web page with
Dreamweaver

• Layout and Design
• Creation
• Posting to the web server

Lets go to Dreamweaver . . .
11
First, look at Dreamweaver . . .
12
(No Transcript)
13
Insert a table 2 X 2
Then resize to get the layout
14
Now its time to include some color
15
Adding text is just like a word processor use
the objects window to change font, spacing,
alignment, etc.
16
Adding links is easy again, use the objects
window to modify
17
After saving as an .htm file, the browser
presents this
18
(No Transcript)
19
(No Transcript)
20
10 Helpful things

• Macromedia foibles
• -- the font thing
• -- automaticity
• -- links (I.e., make them universal)
• Steal, steal, steal
• Free things on the net
• Keep it simple . . .
• . . . but dont be boring
• Steal, steal, steal (so important I say it twice)
• New machine in the Stats room
• People are scum
• Keep page current especially if on the job
  market
• Use Wordpad to update