Transcript Making web pages using Netscape Composer

Lecture 2
 Building
Web pages
 Languages
and programs
HTML - Hyper Text Markup Language
 Netscape’s Composer
 MicroSoft Front Page
 Dreamweaver
 Word

Lecture 2 Building Web Pages
1
Keep it simple

Word can save a file as a web page file (html)


Netscape’s Composer


Lots of syntax to learn but the best way understand what is
happening
Front Page





Easy to learn and very simple html code, but not very
powerful
Straight HTML


Word is familiar to you, but it creates complex and
nonstandard html code
Easy to use
Available on LAN and part of MS package
More sophisticated than Composer
Recommended for you after you use HTML
Dreamweaver


Excellent when working with a large site.
Similar to FrontPage, but more complicated and more
powerful
Lecture 2 Building Web Pages
2
Use Word to make a web page
Use word to create a file and save it as a ‘web page’
File --- Save as
Lecture 2 Building Web Pages
3
Word’s html code
From Wordpad (or Notepad) open the word htm file called
wordhtmltest.htm
Pretty messy looking html.
Lecture 2 Building Web Pages
4
Use Wordpad (or Notepad) to create an htm file:
Start – Programs – Accessories - Wordpad
If you are using Wordpad, you must save the file as a text document,
making sure you explicitly type the name and the extension in the filename
line. Wordpad has more saving options than Notepad, so be careful to save
the file correctly.
Lecture 2 Building Web Pages
5
htmltest.htm in Browsers
Netscape 4.7
Netscape 7.0
Internet Explorer 5.5/6.2
Mozilla 1.0
Lecture 2 Building Web Pages
6
Conclusions?
 Keep
it simple.
 A little html knowledge goes a long way.
Lecture 2 Building Web Pages
7
How to open your www account
go to: http://www.lehigh.edu/account
enter username and password
click here:
W3Setup
Lecture 2 Building Web Pages
8
Entering your
password is all you
need to do.
Lecture 2 Building Web Pages
9
What we want for pa1:
Lecture 2 Building Web Pages
10
Using Wordpad to create a file called index.html
and save it to your desktop folder.
Remember: If you are
using Wordpad, you must
save the file as a text
document, making sure
you explicitly type the
name and the extension
in the filename line.
Enter the text shown here.
A great place to learn more about what tags are is:
http://www.htmlclinic.com
Lecture 2 Building Web Pages
11
Text entry
In the body tag area, we will
create a table of one column
and width of 100% of the
browser window.
<tr> means new row and <td>
means next table cell
<center> means center and
<br> means line break.
table tag must be closed
Lecture 2 Building Web Pages
12
Save your file and take a look at it
(open it) in a browser.
So far so good!
Lecture 2 Building Web Pages
13
An Image
In the body tag area, add
another row to the table and
insert an image.
An image needs a source
SRC=“yourpicture.jpg”, and dimensions
of height and width (in pixels).
You have to have an image in the same
folder as your index.html file! Go get one
if you don’t have one.
Lecture 2 Building Web Pages
14
Resume Link
Insert a link to a Word file that is called
resume.doc. <a href is an anchor tag to a
hypertext link.
The words My Resume
will be seen on the
page.
Make sure you have a
document named
resume.doc in your
local folder.
Lecture 2 Building Web Pages
15
Save your file and take a look at it
(open it) in a browser.
So far so good!
Lecture 2 Building Web Pages
16
Favorite Link
Insert a link to a external www
location. This is identical to the
document link, but we now enter
a location on the web, rather
than a file name.
Lecture 2 Building Web Pages
17
Email Link
Insert a link with the action word:
mailto:[email protected], where
xxxx is your four digit id.
Lecture 2 Building Web Pages
18
Looking Good!
Lecture 2 Building Web Pages
19
Upload files
Lecture 2 Building Web Pages
20
To Edit your page
 Download
the index.html file
from ws2 using SSH
 Make changes in Notepad, or
FrontPage, or Dreamweaver
 Upload the page back to ws2
using SSH
Lecture 2 Building Web Pages
21
pa1 requirements – 20 points

The page must appear
when entering
www.lehigh.edu/~xxxx
 Name
and address
 A picture
 Your resume link
 Your favorite link
 Your email button
Lecture 2 Building Web Pages
22