Download Presenter

BASIC Web Page Creation
Presenter: Jolanta Soltis
Academic Computing Services 2009
INTERNET
U.S. Department of Defense laid the foundation of
the Internet about 30 years ago
General public didn't use the Internet much until after
the development of the World Wide Web in the early
1990s.
Academic Computing Services 2009
WORLD WIDE WEB (WWW)
World Wide Web came into being in 1991
Early on, the Internet was limited to noncommercial uses because its
backbone was provided by the
– National Science Foundation
– the National Aeronautics and Space Administration
– U.S. Department of Energy
Funding came from the government
By the end of 1992, the first commercial online service provider, Delphi,
offered full Internet access to its subscribers, and several other
providers followed
As of 1993, there were only 130 Web sites-Now Millions
Academic Computing Services 2009
WHAT IS A URL?
A URL (or uniform resource locator) is the address of
an Internet file.
http://ist.njit.edu/webhosting/step_by_step.php
Usually consists of four parts
– protocol
http://
– server (or domain)
ist.njit.edu/
– path
webhosting/
– Filename
step_by_step.php
Academic Computing Services 2009
GETTING STARTED
When creating your web pages, follow your interests,
and then your instincts
Of course, the best way to get an idea of what you
want to do is to first visit other websites
Academic Computing Services 2009
PLANNING THE WEB PAGE
Step 1
Select Topic
Step 2
Design on paper
Step 3
Create Text File
Step 4
Search for Graphics
Step 5
Create Directory
Step 6
Download Text Files
Step 7
Work with Graphics
Step 8
Develop webpage
Academic Computing Services 2009
DEVELOPING THE WEB
PAGE
Start with a title - The title should be placed at the
beginning of your page
Headings styles - There are built in styles for
headings of differing importance
– In HTML there are six levels of headings
– H1 is the most important, H2 is slightly less important,
and so on down to H6, the least important
Academic Computing Services 2009
DEVELOPING - TEXT
Add a bit of emphasis
– Use blinking text
– Web page lists
– Make a table
Use text in different colors and different sizes
Academic Computing Services 2009
POINTERS - FONTS
Don't load your documents too many different
fonts? That's called "design bloat."
When using headlines, stick to the smaller sizes.
Don't use italics too often. Italics can be very hard
to read with smaller font sizes.
Academic Computing Services 2009
Develop your color scheme
Be aware of colors selected.
Make sure all images on the same page share a common palette.
Wrap text around images that are less than half as wide as the display
area.
Use a graphic-manipulation program not only to improve color and
contrast, but also to crop out parts of a picture that doesn't relate
anything useful.
Match link colors with colors occurring in images you've used on the
page. Keep link colors consistent across multiple pages.
Somewhere on your home page, let users know when the page was
last updated.
Your opening graphic should display fully on the user's screen without
scrolling-that means nothing larger than 640 x 480 pixels.
Academic Computing Services 2009
The Color Wheel
Complementary colors:
Colors on opposite sides of
the color wheel
Triad or tertiary colors:
Three colors that are
equidistant from each other
on the color wheel
Analogous colors:
Colors that are next to each
other on the color wheel
Academic Computing Services 2009
DEVELOPING - GRAPHICS
Use images to spice up your pages
– Control the size of your images
Have text appear beside an image
Create image backgrounds
Use Animation
Reuse graphics such as title banners
Keep graphics as simple and small as possible
After you've uploaded your page, log on with a browser and time
how long it takes for an opening graphic or the entire page to
load.
Academic Computing Services 2009
POINTERS
Carefully choose the background. Other background
colors may impact other page elements. White is a
safe choice.
Don't use textured backgrounds that are too busy.
Try viewing your page in Netscape and Internet
Explorer.
If you use a 17-inch or larger monitor, also test your
design on a computer with a standard 14-inch
screen.
Academic Computing Services 2009
DEVELOPING - LINKS
Link to other pages
– Make images into links
– Make a link that opens a new browser Window
Create a table of contents
Use background music
Academic Computing Services 2009
NAVIGATION
Use Toolbars
Drop-down Menus
Search Engines
Academic Computing Services 2009
SUGGESTED SOFTWARE
Microsoft Word
Microsoft Front Page or Expression
Flash/Fireworks - This product is easy and good
for creating animations
Gif Animation
Academic Computing Services 2009
How to create web page with
NJIT help
AFS to store files
SSH, Telnet, Tera Term Pro to access files
SSH (Secure Shell) is a terminal emulation protocol that
allows a user to connect to a remote host via an encrypted
and secure link.
Telnet is a terminal emulation protocol that lets a user log in
remotely to other computers on the Internet; it has a
command line interface.
Front Page or Microsoft Expression to create files
Academic Computing Services 2009
How to create web page with
NJIT help continued
You can download SSH® Secure Shell™ from the Public
Download Section.SSH® Secure Shell™ also contains an FTP
client.
You can download Tera Term Pro from the Public Download
Section or you can run Windows' telnet client by typing "telnet
afsx.njit.edu" from the "Run..." command in the Start Menu.
Academic Computing Services 2009
Web Server
All Highlander AFS users can create a website.
Web.njit.edu is the web server for AFS.
All student, club, faculty, staff, and research group
web pages on AFS will have the URL in the form:
http://web.njit.edu/~yourUCID.
Java programs, PHP, JSP, and MySQL are
currently supported.
Academic Computing Services 2009
Step by step instruction on how
to create Your Homepage.
1.
2.
3.
4.
Prerequisites for Creating Web Pages at NJIT
Hardware and Software Requirements
Create account on an AFS system.
Check if you have public_html directory (if not create
one).
5. Prepare your PC and web editor.
6. Edit your page.
7. Upload your page to the web server.
http://ist.njit.edu/webhosting/createwebpage.pdf
Academic Computing Services 2009
Prerequisites for Creating Web
Pages at NJIT
The following is a list of skills you need to have in order
to create and maintain your own web pages.
– Competency in the use of Microsoft Windows
• Effective use of the mouse; controlling the tracking speed
• Effective use of Windows Explorer, Taskbar and START
button
• How to minimize and maximize applications on the desktop
• Basic editing functions, e.g. cut/copy/paste, building
shortcuts to applications or files, use of right mouse button
for extended functions.
Academic Computing Services 2009
Prerequisites for Creating Web
Pages at NJIT
– Proficient in the use of Microsoft Word or PowerPoint
for Office 2003
• Save files in various formats
• Define and set styles for Word
Academic Computing Services 2009
Prerequisites for Creating Web
Pages at NJIT
– Familiar with basic concepts of the World Wide Web.
• Use a browser to view a particular web site
• Create bookmarks to a particular web site
• Search for a topic with a search engine
Academic Computing Services 2009
Hardware and Software
Requirements
Hardware Requirements:
Pentium III computer capable of supporting Internet Explorer 6.0.
Internet connection.
Software Requirements:
A Browser - for interacting with the Web. We suggest Microsoft Internet
Explorer (Free).
File Transfer Protocol program (FTP) - for moving your pages from your
PC to a web server. We suggest FTP Explorer, SSH (Available to
download from http://ist.njit.edu/software/)
Additional Software:
WinZip - To uncompress files.
Graphic programs - to create graphics for your page. You can use
Paint, Paint Shop Pro.
Equation rendering programs. You can use Microsoft Word, Paint Shop
Pro.
Academic Computing Services 2009
Create account on an AFS
system
Check if you have an AFS account
For instructions on setting up an account see:
http://ist.njit.edu/accounts/afs.php
Academic Computing Services 2009
Prepare your AFS account to
host a web site.
If you created your UCID after Feb 2007, your AFS account is already
set up to host a web site.
To check if your web site has been set up, go to
http://web.njit.edu/~yourUCID (replace "yourUCID" with your
UCID).
If you had previously created a web site, you will be able to see it.
If your account has been configured to host a web site but you
have not already created one, you should see default page.
If you need to configure your AFS account to host a web site, follow
these instructions provided on the next slide.
Academic Computing Services 2009
Create public_html directory
Run an SSH.
The "host" or "domain" should be "afsx.njit.edu" where x is any
number between 1-36.
Enter your username.
Enter your password.
Type "home.page.setup" at the prompt.
Type "y" and press ENTER.
Type "exit" and close your telnet client.
Run an FTP client.
The "host" or "domain" should be "afsx.njit.edu" where x is any
number between 1-36.
Enter your username in the appropriate field.
Enter your password in the appropriate field.
Connect to the system.
Upload your web pages to the "public_html" folder.
Disconnect from the system.
Academic Computing Services 2009
Prepare your PC and web
editor
Create a directory/folder on your PC called
public_html (already created)
Start Microsoft Front Page and create a new page.
Click on 'File' - ' New'.
Choose 'One Page Web Site'.
Click right mouse button and choose 'Site
Settings...'. Type the title for your page (for example,
Professor Watson's Homepage).
Then click on the 'Ok' button and enter the
directory/folder you created on your PC (i.e.,
c:\\public_html).
Academic Computing Services 2009
Edit your page
Make the necessary changes to your homepage.
When you edit a hyperlink be sure it is set up with the
proper url.
The proper URL formats are:
– For pages in your local directory: simply the file name
(including directory if necessary).
– For example, if you store your vita (we'll call the file vita.html)
in your public_html directory (the same directory as your
homepage), the link format would be A HREF="vita.html" If
you store your vita in a sub directory of public_html (we'll call
the directory Bio) the link format would be A
HREF="Bio/vita.html". Important Note: the URL is case
sensitive.
Academic Computing Services 2009
Edit your page continued
– For pages at NJIT and external sites: the full web
address. For example, to refer to the NJIT homepage the
link format would be A HREF=www.njit.edu.
When you are finished, be sure to save and close
your file. The default homepage name that
FrontPage uses is index.htm. Use this for your main
homepage.
Academic Computing Services 2009
Upload your page to the web
server
Start your SSH software and connect to your
web server (afsx.njit.edu).
Copy your homepage file from your PC to
your public_html directory on the web
server.
Academic Computing Services 2009
Web.njit.edu/~yourUCID
Now use a web browser to check your
webpage. Go to
http://web.njit.edu/~yourUCID where
yourUCID is your UCID.
Academic Computing Services 2009
To access your home directory use
SSH
• Log in
Click on New File Transfer Window
• Click on public_html
• Choose file
• Click Upload or
Download button to
work on files
MySQL
MySQL is a multi-user, multithreaded SQL
(Structured Query Language) database
server.
Any user with a Highlander AFS account may
request access to MySQL by sending an
email to [email protected].
For more information on MySQL at NJIT,
please visit http://web.njit.edu/mysql/.
Academic Computing Services 2009
Useful Resources
http://www.webnovice.com/
http://www.w3schools.com
HTML Tutorial
HTML Quick Reference
Welcome to The HTML Station
Academic Computing Services 2009
NJIT Internet Style Guidelines
Academic Computing Services 2009
HTML basic
<!-- ..... -->
Specifies a comment. Anything between these tags will be
skipped by the browser.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
//EN">
This is the necessary first element of any HTML 3.2
compliant document.
<HTML>.....< /HTML>
Encloses the entire document.
<HEAD>.....< /HEAD>
Encloses the head of the document. The following optional
tags are placed inside the head.
<TITLE>.....< /TITLE>
Indicates the title of the document that is used as the
window caption. This is the second of the two required tags
for any HTML 3.2 compliant document.
Academic Computing Services 2009
Body of the Web page
<BODY attribute1="..." attribute2="...">.....< /BODY>
Encloses the main body of the document.
Attributes:
ALINK="..."--Specifies the color of the activated links in the
page.
BACKGROUND="..."--Specifies an image to be tiled as
background.
BGCOLOR="..."--Specifies the background color.
BGPROPERTIES=FIXED--Fixes the background image
so that it doesn't scroll. (IE)
TEXT="..."--Specifies the color of the text in the page.
Academic Computing Services 2009
Body of the Web page continued…
LEFTMARGIN="n"--Specifies the left margin for the entire
page. (IE)
LINK="..."--Specifies the color of the links in the page.
TEXT="..."--Specifies the color of the text in the page.
TOPMARGIN="n"--Specifies the top margin for the entire
page. (IE)
VLINK="..."--Specifies the color of the followed links in the
page.
NOTE: Color is always expressed as RGB (Red Green Blue), where
each color has a value between 0 and 255 expressed in hex notation.
For example, BGCOLOR=#FFFF00 sets the background color to
yellow. For more information check out Colors of the Web.
Academic Computing Services 2009
Link to another web page
<LINK attribute=" HREF="..." >
Currently this tag is not widely supported, however in
the future browsers will use a list of these tags to
generate a navigation bar for the site. Without
browser support, this tag can still be useful for site
maintenance.
Attributes
REL="..."--Specifies the type of relationship of the link
to this page. Possible values are: "home", “TOC"
(table of contents), "index", "glossary", "copyright",
"bookmark", "up", "next", "previous", and "help".
Academic Computing Services 2009
Link to another web page continued
Attributes continued:
REV="..."--Used instead of REL, this specifies a reverse
relationship from this page to the link. Possible values are:
"made" (author, set HREF=email address) and all the
ones used in REL.
HREF="..."--Specifies the address of the link.
TITLE="..."--Specifies a title for the link.
Academic Computing Services 2009