Webpage Basics

1
Webpage Basics

• Three Methods of Creating a Web Page.

By Andrew Binder
2
Webpage Basics

• Three Methods of Creating a Web Page.

1. Code it by hand. With a simple text editor
like Simpletext (Macintosh) or Wordpad
(Windows.) 2. Use An HTML Converter to Convert
an Existing Document (Like Microsoft Word /
QuarkXpress 5 etc.) 3. Create the Page with An
HTML Editor (Dreamweaver of Frontpage etc.)
3
Code it by Hand. With a simple text editor like
Simpletext (Macintosh) or Wordpad (Windows.)
Page Displayed in Browser
ltHTMLgt ltHEADgt ltTITLEgtBinders Homepagelt/TITLEgt lt/H
EADgt ltBODYgt ltCENTERgtltIMG SRCname1234.jpggtlt/CENT
ERgt ltCENTERgtltH6gtWelcome to My Homepage!!lt/H6gtlt/CEN
TERgtltBRgt ltCENTERgtI am a Professor at ltA
HREFhttp//www.fau.edugtFAUlt/Agt. lt/CENTERgtltBRgt
ltHRgtltCENTERgt ltA HREFpage2.htmgtEnter The Main
Menult/Agtlt/CENTERgt ltHRgtlt/BODYgt lt/HTMLgt
HTML VOCAB Web BrowserSearch EngineHTMLURLHTM
L TagStand Alone TagWidowed TagRelative
LinkAbsolute LinkLocal LinkExternal
LinkUploadDownloadServerClient
MachineFTPCase SensitiveDomain NameNaming
ConventionsExtension
Code of Page
4
Use An HTML Converter to Convert an Existing
Document (Like Microsoft Word/ QuarkXpress 5
etc.)

• Open The Document in its Parent application.
• Perform a save as operation or export the file
  to HTML.
• Remember to name the file correctly
  (Alpha-Numeric
• w/ correct extension ie .htm or .html no
  spaces
• in the file name use underscores or dashes
  instead.)
• 4. Also Remember to collect any of your linked
  graphic
• files to upload to the server.

5
Create the Pages in An HTML Editor
6
Programs for Image Optimization.
Step 1
Image/ Resize Pallet
Pallets from Photoshop.
Image Optimization
Virtual Size Setting
PPI Setting
Save As compression settings for .JPEG
1. Scan/ Create/ Resize the image files to
72ppi. 2. Adjust the files virtual size. 3. Save
the image files as .jpg, .gif, or .png 3.
Compress/ Optimize the files. 4. Name the files
with the Naming Conventions.
7
Procedures For Creating The Pages In An Editor
Step 2
1. Create a folder on the disk that you will be
using to save your project. (Mac. Goto the disk
w/ your mouse and use the key board command
"command N" in order to create a folder, for
the Windows machine goto the disk and right
click the mouse and select new folder.) Name the
folder html. Scan your pictures and place them in
your HTML folder by dragging and dropping them
into your folder with your mouse. IMPORTANT.A
note about file names make your filenames 8
characters or less use alphanumeric names with no
spaces and no odd characters, (if you must use
spaces replace them with dashes or underscores.)
For you Mac folks remember to put on the proper
extension (. jpg for example.) Make sure that the
extension that you use is appropriate to the file
type that you need and is being saved in that
format when you scan or save. 2.Note Most
problems occur if you ignore the naming
conventions in creating links ( in saving the
files), or if you insert picture files from the
wrong folder or directory. 3.Make a list with
the correct spellings of the files that you are
going to be using for your pages and for the
graphics (pictures) on your pages. 4. Open the
HTML editor and select new normal page. Save that
page as index.htm in your html folder. Remember
to give the page a title that fits the content of
the page. Add the name index.htm to your list. 5.
Start typing in the menu system that you have
designed. Center the menu. Indicate one of the
your menu items w/ your mouse. Then goto insert /
link to URL on the programs menu. Type in the
file name that will be associated with the link
name. For example home index.htm (make a note
on your list what link item is associated with
each file.)Complete all of the links, and all of
the other in common parts of your page and use
it as a template for the others. Saving it as
index.htm, page2.htm etc.) 6. Open each page and
customize/ complete. (IE, insert pictures and
text. Etc.)
8
Step 3
http//www.tripod.com http//www.geocities.com
FTP
Server
FTP WS_FTP (Win.) Fetch (Macintosh) Easy File
Uploader
Get an Account on a server and transfer them up
to the WWW.
9
The Assignment
Resume
Photos

• 5 HTML Documents
• A Menu System
• Content (Text and Pictures.)

10
Web Browser A program to view web pages like IE
or Netscape.Search Engine A service that
indexes web pages.HTML Hyper Text Markup
Language, the code that a browser uses to read
and display a web page.URL Universal Resource
Locator (Web page address.)HTML Tag A single
code of HTML.Stand Alone Tag An HTML tag that
does not have a encapsulating partner tag. (And
does not need one.)Widowed Tag An HTML tag
that does not have a encapsulating partner tag.
(And In other words the code is
broken.)Relative Link A link that calls a file
that is in the same folder or directory as the
parent file, or describes a local description
of the files where abouts. Absolute Link A link
that calls a file that has its exact where abouts
described for the browser in terms of the
internet. (For example, http//www.fau.edu/index.
htm) . External Link A link the exists off the
server where the other linked files
reside. Upload To place files up on a server
via FTP.Download To transfer files down from a
server to a client machine.Server A machine
that holds public HTML files to be viewed by a
client machine over the internet.Client
Machine A machine that is used to look at public
HTML files from the internet.FTP File Transfer
Protocol, A method of transferring files over the
internet. Case Sensitive The password or
address/ filename will not be recognized unless
the proper arrangement of caps and lowercase
letters are used.Domain Name The registered
part of the URL that is applied to a network on
the internet.Naming Conventions The convention
of names that will work for any kind of machine
on the internet.Extension Typically the three/
or four letter extension that is used to identify
the file to a Windows type machine. (Which is
invisible on that platform.)
HTML VOCAB