Academic Computing Services 2009 BASIC Web Page Creation Presenter: Jolanta Soltis

Academic Computing Services 2009

BASIC Web Page BASIC Web Page CreationCreation

Presenter: Jolanta Soltis


INTERNETINTERNET

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.


WORLD WIDE WEB (WWW)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


A URL (or uniform resource locator) is the address of an Internet file.

Usually consists of four parts

– protocol

– server (or domain)

– path

– Filename

WHAT IS A URL?WHAT IS A URL?

http://ist.njit.edu/webhosting/step_by_step.php

http://

ist.njit.edu/

webhosting/

step_by_step.php


GETTING STARTEDGETTING 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


PLANNING THE WEB PLANNING THE WEB PAGEPAGE

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


DEVELOPING THE WEB DEVELOPING THE WEB PAGEPAGE

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


DEVELOPING - TEXTDEVELOPING - TEXTAdd a bit of emphasis

– Use blinking text

– Web page lists

– Make a table

Use text in different colors and different sizes


POINTERS - FONTSPOINTERS - 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.


Develop your color Develop your color scheme 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.


The Color Wheel 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


DEVELOPING - GRAPHICSDEVELOPING - 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.


POINTERSPOINTERS

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.


DEVELOPING - LINKSDEVELOPING - 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


NAVIGATIONNAVIGATION

Use Toolbars

Drop-down Menus

Search Engines


SUGGESTED SOFTWARESUGGESTED SOFTWARE

Microsoft Word

Microsoft Front Page or Expression

Flash/Fireworks - This product is easy and good for creating animations

Gif Animation


How to create web page How to create web page with NJIT helpwith NJIT help

AFS to store files

SSH, Telnet, Tera Term Pro to access filesSSH (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


How to create web page How to create web page with NJIT help with NJIT help continuedcontinued

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.

http://csd.njit.edu/software

http://csd.njit.edu/software


Web ServerWeb 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.

http://web.njit.edu/mysql/


Step by step instruction on Step by step instruction on how to create Your how to create Your Homepage. Homepage. 1. Prerequisites for Creating Web Pages at NJIT

2. Hardware and Software Requirements 3. Create account on an AFS system.4. 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


Prerequisites for Creating Prerequisites for Creating Web Pages at NJIT 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.


Prerequisites for Creating Prerequisites for Creating Web Pages at NJIT 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


Prerequisites for Creating Prerequisites for Creating Web Pages at NJIT 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


Hardware and Software Hardware and Software Requirements 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.


Create account on an AFS Create account on an AFS systemsystem

Check if you have an AFS accountFor instructions on setting up an account see: http://ist.njit.edu/accounts/afs.php


Prepare your AFS account Prepare your AFS account to host a web site. 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.


Create public_html Create public_html directory 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.


Prepare your PC and web Prepare your PC and web editoreditor

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).


Edit your pageEdit 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.


Edit your page Edit your page continuedcontinued

– 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.


Upload your page to the Upload your page to the web serverweb 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.


Web.njit.edu/~yourUCIDWeb.njit.edu/~yourUCID

Now use a web browser to check your webpage. Go to http://web.njit.edu/~yourUCID where yourUCID is your UCID.

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


MySQLMySQL

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/.


Useful Resources Useful Resources

http://www.webnovice.com/http://www.w3schools.com

HTML Tutorial HTML Tutorial

HTML Quick ReferenceWelcome to The HTML Station


NJIT Internet Style NJIT Internet Style Guidelines Guidelines


HTML basicHTML basicSpecifies 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.


Body of the Web pageBody of the Web page

<BODY attribute1="..." attribute2="...">.....< /BODY>Encloses the main body of the document.

Attributes: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.


Body of the Web page Body of the Web page continued…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.


Link to another web pageLink 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.

AttributesAttributes

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".


Link to another web page Link to another web page continuedcontinued

AttributesAttributes continued: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.

Documents

Academic Computing Services 2009 BASIC Web Page Creation Presenter: Jolanta Soltis