Build a simple Website The Steps:

1
Build a simple WebsiteThe Steps

• Make Container on Desktop
• Make some content
• Link the content pages
• Test the links
• Make Web Space Available (Drive M)
• Upload the web pages
• Test the pages
• Launch

2
Plan ahead - save headaches later
Make a folder on your desktop 202Website (File-
gtNew Folder)
Go to MS Word and get a new page Command-N
(Open-Apple-N) for a new page to fill with
content
Type in some text which announces your 202 web
pages
Example next
3
Sample Text -- Note the organization
Das ist meine GER202 Website. Diese Link fuehrt
zur ersten Seite. Home
When you have completed your organized text
sample, save it to your Desktop folder
202Website File Menu/Save As
Webpage/index.html
4
In MS Word

• Make second blank page (Command-N)
• Enter some text. Here is mine

Das ist Text. Diese Link fuehrt zur zweiten
Seite. Home

• When you are finished,
• Save as Web Page.. into your Desktop folder
  202Website. Name it seite1.html

5
Make another new (3) blank page (Cmd-N)

• Enter more text. Here is mine

Diese Seite ist Seite zwei. Diese Link fuehrt zu
Seite eins. Home

• When you have finished, Save as Web Page..
• into the folder 202Website as
• seite2.html

6
Make Links connecting the pages together

• Open the index.html file in Word
• Highlight a word (or two) that will lead to
  Seite 1
• Enter a Hyperlink Insert Menu/Hyperlink (CmdK)
• Click on Web button in dialog box
• In Link to dialog, type seite1.html / then
  Done
• And the link is made!
• Click on the link and it takes you to
  seite1.html

7
Next, link seite1.html to seite2.html
With the seite1.html window in Word in front,
Highlight a word (or two) that will lead to
Seite 2
Press CmdK again to begin to make a link
Click on Web link button
Type in the name for second page, seite2.html
Press Done to complete the hyperlink
Repeat to make a link to Home name the link
index.html
8
Link seite2.html back to seite1.html and link
Home back to index.html

• Navigate to seite2.html
• Select text which will navigate back
• to seite1.html
• Make link to seite1.html
• Create links leading back to index.html

In Word, click on the hyperlinks to assure
yourself that the links work as desired.
Correct, if necessary
9
On naming your content files
The filenames of all these webpages will end
with EITHER of the universal suffixes .htm
or .html
A word to the wise Be consistent in your naming
of files. If you build your site using MSWord or
another editor, there will usually be a default
for that application. MSWord uses the default
.htm. Another editor will use .html. The server
doesnt care which you use.
To reduce troubleshooting later, choose one or
the other.
10
You have created a simple website with
interconnecting hyperlinks.
This is how your website looks for navigating
from page to page
Link
Link
Link
The hyperlinks give you access to all pages
11
Now, you need somewhere on the internet to place
your site. Drive M is the place where your
GER202 Website will be located
You must first notify the server that you want to
use its services. To get your webspace, you
notify the server by giving it a command.
12
Get Web Space for your site
Point your browser to http//www.units.muohio.edu
/mcs/univapps/netapps/www/novell/wwwsetup.htm
Provide your Novell userid (mine is siebendc) and
your Novell password. Answer the questions,
press ltreturngt.
Activate your new web site by running the WWW
Setup command. Your Universal Disk Space (UDS)
will then be used to publish web pages on the
internet.
13
Success! Youre on the M drive
The system responds to the request with the
message
Correctly set up Web Server Message after
creation! Your UDS web space has been set up
correctly! You may now publish your documents by
placing them in the M\public.www (your UDS
space) directory Visit your website at
http//www.users.muohio.edu/siebendc/
Now, how do you publish your pages?
14
WWWsetup has done a lot of work for you
It created a folder titled with yourUserID.
And it placed a folder public.www inside
15
WWWsetup has done a lot of work for you
Inside the public.www folder is a generic
index.html page
index.html holds a standard message for all new
websites
Edit this access page to welcom visitors to your
site. Links on the page index.html bring your
visitors to additional web pages.
16
Now that you have space available and that you
have a generic index.html page,
Have a look at your file, index.html http//www.us
ers.muohio.edu/yourUserID/
17
See what has happened(Lets have a look
insideyour new website)

• Open a new browser window (cmdN)
• In your browser, navigate to http//files.users.m
  uhio.edu/index.html
• Enter yourUserID and Novell password

Or...
18
you can access your M drive after logging into
myMiami
19
There will be one file inside index.html
The contents of the index.html file were
provided by the server when you commanded WWW
Setup
20
My site siebendc looks like this
21
Your webpageswill be stored and served from the
public.www folder
Click on the folder public.www to enter into it.
22
Next, we will make a place to store your new
webpages
Make a new folder inside public.www to store
your new webpages
23
Make a new directory (folder)

• In your browser window, click on Create
  Directory

• Name it 202Website
• Click ok
• Your new folder appears

24
There are now two items in the public.www
folder index.html and 202Website
Click on the new folder to go inside it
25
Upload your index.htmlpage to M (1)

• Using your browser, navigate to
  http//files.users.muhio.edu/index.html
• Enter yourUserID and Novell password
• Navigate deeper into 202Website

• To the left, click on
• Upload file

26
Upload your index.htmlpage to M (2)
Desktop/202website/index.html

• To complete the upload, Browse to your Desktop,
  select index.html
• Click to accept the choice.
• index.html is uploaded to your website
• (inside the folder 202Website)

27
Upload your other pages to M (2)

• In the 202Website folder, you see the
  index.html
• In File Options window, click on the Browse
  Button.
• Navigate to your Desktop, select 202Website on
  your Desktop, and open
• Select Seite1.html
• Click to accept the choice.
• Seite1.html is uploaded to your website
• Repeat with Seite2.html
• Seite1.html and Seite2.html have been
  uploaded into the folder 202Website

You now have three files located inside
202Website index.html, seite1.htm and
seite2.htm
28
The contents of my public.www folder looks like
this
The index.html file
The 202Website directory
29
The contents of my 202Website directory looks
like this
All 3 files are available for viewing index.html,
seite1.html, seite2.html
30
Test the site 1

• http//www.users.muohio.edu/UserID/202Website/
• This address shows the contents
• of your index.html page
• This shows my index.html page

31
Test the site 2

• Click on Seite1
• Takes you to contents of Seite1.html
• This is my seite1.html

32
Test the site 3

• Click on Seite2
• Takes you to contents of Seite2.html
• This is my seite2.html

33
Test the site 4

• Click on Home
• Takes you back to the entry page, index.html
• Ready to Launch

34
Launch means making the address of your new
website available to us, the visitors to your
website.
The address for your new website will look
something like this http//www.users.muohio.ed
u/UserID/202Website/
The UserID will be yours (mine is siebendc)
You access my site http//www.users.muohio.edu/s
iebendc/202Website
35
Review (Setup your 202Website)

• Create some content for 202 Website on your
  local Desktop
• Make links (locally using MSWord)
• Test the links
• Edit content and links
• Create Space on Drive M
• http//files.users.muohio.edu/index.html
• Make a directory 202Website inside directory
  public.www
• Upload files to Drive M
• Launch

36
Review

• To view your site/distribute the address
• http//www.users.muhio.edu/UserID/202Website/
• To work with your site
• http//files.users.muohio.edu/index.html
• Make a working original on your Desktop
• Plan your file structure carefully to make your
  links work correctly
• Maintain the exact file structure on Drive M as
  is your Desktop version
• Your website is an exact copy/backup of the
  version on your Desktop

37
File Structure of public.www
public.www
202Website
Links

index.html
index.html
Seite1.html
Seite2.html
38
Das Ende
Fragen?

• http//www.users.muohio.edu/siebendc/202WebsiteV
  iew my 202Website built on this model
• The three sample pages index.html,
  seite1.html, seite2.html
• View Guidelines for 202Website content
• This PowerPoint presentation also
• available as webpages

39
Meine Web-Seiten
http//montgomery.cas.muohio.edu/siebendc/ 202Web
site (Demo Building Instructions) http//www.use
rs.muohio.edu/siebendc/