What is a Web Site

1
Topics

• What is a Web Site
• Server Directories
• Web Files
• The HTML File
• Creating a New Web Site with Front Page
• Creating and Saving a Web Page
• Organizing a Web Site
• Hyperlinks
• Miscellaneous

2
What is a Web Site?

• A web site is a collection of files
• having certain properties
• located is special directories
• available on a web server
• You can develop your web site on a local hard
  drive running Microsofts Personal Web Server
• PWS and a computer make a server, even if the
  computer isnt connected to the Internet
• Once we get our username and password, we will
  use FTP and IIS to create websites!

3
Web Server Architecture
DatabaseServers
WebServers
Internal Users
Application Servers
4
Server Directories

• When you install any web server you designate a
  physical directory on the server to be the root
  directory of your web sites
• By default, PWS creates c\inetpub\wwwroot as the
  root directory for your web sites
• You may override this location at installation
  time
• Only recommended if you need to use a different
  physical drive
• Web sites are created directly under this host
  directory in the physical directory structure
• Web servers operate using similar principles
• Remember, for your projects, we will use IIS and
  FTP. PWS is for your knowledge if you want to do
  things like this at home without paying for a
  website host.

5
Server Directories (cont.)

• All web servers have a base URL such as,
  http//www.mycomputer.com
• "mycomputer" is your computer's 'name'
• http//localhost is also a valid path for PWS
• The physical location of your server directories
  and files work with your URL
• The file c\inetpub\wwwroot\mysite\default.h
  tm has the URL http//www.mycomputer.com/
  mysite/default.htmor http//localhost/mysite/defa
  ult.htm

6
Web Files

• Web files are files located in server directories
  and have certain properties
• Files with .html or .htm extensions are
  automatically recognized as web pages to be
  served up
• Files with .asp extensions are recognized as
  files containing web content and script to be
  executed
• .jpg and .gif files are recognized as images to
  be included in .htm or .asp pages (or served up
  separately)
• Other file extensions may be served up by the
  site but browser must be configured to handle them

7
Structure of an HTML/HTM File
lthtmlgt ltheadgt ltmeta http-equiv"Content-Language"
content"en-us"gt ltmeta http-equiv"Content-Type"
content"text/html charsetwindows-1252"gt ltmet
a name"GENERATOR" content"Microsoft FrontPage
4.0"gt ltmeta name"ProgId" content"FrontPage.Edito
r.Document"gt lttitlegtNew Page 1lt/titlegt lt/headgt ltb
odygt ltpgtThis is a simple web page with no
formatting appliedlt/pgt lt/bodygt lt/htmlgt
HTML tag begins content used by the browser
Head section contains data about the document
(optional)
Body contains content displayed by the browser
All of this content (except text above) was
created automatically by the FrontPage editor
8
Creating a New Web Site w/ FrontPage

• Start Front Page
• Select File New Web from the menu
• Select either One Page Web or Empty Web from
  the New dialog
• Enter the web location and name in the Specify
  location box
• http//localhost/webname will work on most
  computers
• c\somefolder\webname will also work
• http//www.myserver.com/webname will work if
  creating the site on a working server
• Will probably require authentication

9
Creating a New Web Site (cont.)

• Front Page creates the web at the location
  specified
• FP also creates some default directories
• Images
• The _private directory
• Used for FPs sitemanagement tasksand
  otherpurposes
• Do not delete or modify

10
Configuring Front Page
Border can be moved

• FP can have up to three panes open in its
  development environment
• Page editing area
• Folder view
• Views bar
• I recommend closing the Views bar as it doesnt
  help your development much

View Menu
11
Creating a Web Page

• Click the new page iconor use File New
  Page menuor type Ctrl-N
• Type text in the page
• Apply formatting as in Word
• Format menu
• Formatting bar

12
Set Page Properties

• Right-click anything in FP to get a properties
  menu
• Open Page properties dialog
• Set Title on the Generaltab
• Set backgroundand colors on theBackground
  tab(But dont use stupid colors)
• More on colors later

13
Saving the Web Page

• Use the File Save As dialog to save a web page
  for the first time
• Select folder (if applicable)
• Set file name
• Set type as .htmor .asp
• Change title if notdone through properties
• Press Save

1
3
2
4
14
Organizing the Web Site

• Use Folders to organize your web site
• Keep similar items together
• Make maintenance easier
• Find folders easier
• Keep folders uncluttered
• Put home page in the web sites root
• Home page must be called default.htm or
  default.asp
• If only a folder is specified by the browser with
  no file then default.htm, default.html, or
  default.asp will be displayed if they exist in
  that folder

15
Organizing the Web Site (cont.)

• Add new folders with
• File New Folder menu
• Folder list must be selected
• New folder will be a subfolder of the currently
  selected folder
• The new object button
• Click the drop-down list
• Select Folder
• Right click any folder and select New Folder
• Name the new folder
• No spaces in folder or file names

16
Organizing the Web Site (cont.)

• Files and folders may be moved within the web
  site by dragging to new locations in the folder
  view
• Images
• Images used throughout the web (or that could be
  used in multiple locations) should go in the
  Images directory
• Images that are distinctly tied only to
  individual pages should be kept with that page
• You may create images directories within other
  subfolders (nothing magical about them)
• More on images later

17
Hyperlinks

• The essence of web-based information is the
  ability to create hyperlinks from one document to
  another
• Hyperlinks are created in Front Page using a
  dialog
• Before attempting to create a hyperlink, ensure
  that the target page already exists and is saved
• There are three types of hyperlinks
• Jumps
• Internal within the same web site
• External to a document on another site (or
  server)
• In-line hyperlinks (most often used for images)

18
Hyperlinks (Creating Internal Jumps)

• Creating Internal Jumps
• Edit the page on which the link willreside
• Type in the text you want displayed in the link
  or add an image
• Select text or image
• Activate the hyperlink dialog
• Type Ctrl-K
• Hit the Hyperlink Button
• Use the Insert Hyperlink menu

19
Hyperlinks (Creating Internal Jumps)

• The Hyperlinkdialog
• Navigate to the target page usingthe directory
  tree
• Select the targetfile in the directorytree
• Press the OK button

20
Hyperlinks (cont.)

• The hyperlink HTML consists of an anchor tag with
  the target
• The text or image that will be displayed and
  respond to the click
• The closing tag

lta href"TestFolder/newpage.htm"gtHyperlink
Textlt/agt
1
2
3
21
Hyperlinks (cont.)

• Hyperlinks can be Relative or Absolute
• A relative hyperlink is only good for links to
  pages in the same web site
• Shows the path starting from the current location
• Absolute hyperlinks can be to internal or
  external pages
• Show entire path to the page, including the
  http// header, machine address, folder, and page
  name
• Always use relative hyperlinks for links to the
  same site
• Allows site to be moved in total from one machine
  to another without rewriting

22
Hyperlinks (Relative Hyperlinks)

• Target located in the same directorylta
  hreffilename.htmgt
• Target located down one directory lta
  hrefdirname/filename.htmgt
• Target located up one directory lta
  href../filename.htmgt
• Target located up one directory and then down
  two lta href../dirname1/dirname2/filename.htmgt

23
Hyperlinks (External Jumps)

• Create external jumps by entering the complete
  URL in the URL combo box
• Type in from memory
• Navigate using your browser and copy the URL to
  the clipboard and paste
• Use the web search button(not recommended)

24
Hyperlinks (cont.)

• We will return to hyperlinks later
• In-line hyperlinks will be covered with images
• We will also cover bookmarks to hyperlink to a
  specific point in a document (including within
  the same document as the link)
• We will also see how to use images as a hyperlink
  instead of text

25
Misc

• You can test your web with your browser by
  entering http//localhost/websitename/page.htm
• You don't need to close the page you are editing
  in order to test it. Just save it
• You will probably need to use the Refresh button
  on your browser to see the updated page
• Close your web site by saving any files being
  edited and closing FP
• Once we have your class username and password,
  you will be able to see and edit your website
  from home as long as you have an HTML editor and
  a FTP Client.