Making Your Own Piece of Cyberspace: Web Page 101 - PowerPoint PPT Presentation

About This Presentation
Title:

Making Your Own Piece of Cyberspace: Web Page 101

Description:

what is a web page like. making a web page of your CV. getting your web page on the Internet ... the Web is completely decentralised and freely growing and evolving. ... – PowerPoint PPT presentation

Number of Views:70
Avg rating:3.0/5.0
Slides: 37
Provided by: casaU
Category:

less

Transcript and Presenter's Notes

Title: Making Your Own Piece of Cyberspace: Web Page 101


1
Making Your Own Piece of Cyberspace Web Page 101
3011 Geographies of Cyberspace
  • Martin Dodge
  • (m.dodge_at_ucl.ac.uk)
  • Practical 1, Friday 8th October 2004
  • http//www.casa.ucl.ac.uk/cyberspace

2
Todays practical
  • some background on the Web
  • what is a web page like
  • making a web page of your CV
  • getting your web page on the Internet

3
Where did the Web come from?
  • the Web started life in 1989, but really took off
    in the mid 1990s with the release of free
    graphical browser software (Mosaic, then
    Netscape)
  • Invented by Tim Berners-Lee, a British physicist
    working at CERN lab in Switzerland. idea of easy
    sharing of documents for scientists
  • based on ideas of hypertext, distributed set of
    documents that are linked by hyperlinks.
    hypertext originated by Ted Nelson

4
Web and the Internet
  • Web is most common interface to the Internet, but
    they are not one and the same
  • the Internet existed long before the Web
  • the Web can not exist without the foundation of
    the Internet
  • the Internet supports many other information
    sharing and communication services in addition to
    the Web, e.g. IRC, email, telnet, p2p
  • the key Web standards (protocols to exchange
    data) are open and anyone can use them

5
What do we know about the Web?
  • no one really knows anything for sure!
  • the Web is completely decentralised and freely
    growing and evolving.
  • no one is in charge, you dont need permission to
    put a page up or create a link
  • anything can be added or deleted at any time.
    deleting web pages, leaves no trace. lots of
    broken links!
  • the Web is growing quickly, new services and
    technologies are being deployed all the time
  • you dont need permission to put stuff on the Web

6
How big is the Web?
  • minimum of 4,285,199,774 pages (size of Google)
  • maximum of 100 billion pages (database driven
    sites that generate dynamic pages on request)
  • various ways to measure its characteristics
  • number of web pages, sites, servers,users
  • age of the web pages
  • user behaviour (how long online, how many sites
    visited, how many clicks etc)
  • most popular sites (audience ratings)
  • search engines - coverage, currency, search terms
  • number of registered domains (dot coms)

7
Number of Web sites
  • A web site is hard concept to define
  • Netcrafts survey lthttp//www.netcraft.com/gt
  • 54,407,216 web servers estimated Sept. 2004
    survey

8
Size of some local sites?
  • www.casa.ucl.ac.uk - 2,720 odd pages
  • www.geog.ucl.ac.uk - 5,510 odd pages
  • www.ucl.ca.uk - 310,000 odd pages
  • www.ic.ac.uk - 127,000 odd pages
  • (source estimates from Google)

9
Most popular Web sites?
Nielsen//NetRatings, lthttp//www.nielsen-netrating
s.com/gt
10
What is a web page?
  • it is just a single file
  • the file is text
  • written in html (hypertext markup language)
  • the file has the extension of .html / htm
  • it is on a web server (usually a dedicated PC)
  • the file contains content and markup code.
    You see the content on screen in the browser and
    the markup code tells the browser how to display
    the content (e.g. bold, italics, centred text etc
    etc)
  • the html code can also link into other multimedia
    files such as pictures, animations, movies and
    sounds
  • you also define hyperlinks to link to other web
    pages

11
  • lets look at the html code of a typical page,
    such as the homepage for the 3011 website

12
Now work through the rest of the slides by
yourselfAsk for help if you get stuck!
13
  • have a go at viewing the source yourself
  • open Netscape and load the cyberspace course page
    - www.casa.ucl.ac.uk/cyberspace
  • on the Netscape menu bar, go to
  • View -gt Page Source
  • a new window will pop up with the html code for
    this page

14
html code
  • at first glance it looks complicated but it can
    be easily deciphered
  • lttitlegt Geographies of Cyberspace lt/titlegt
  • ltbgt text lt/bgt
  • ltIgt text lt/Igt
  • lta hrefpage2.htmlgtGo To Page 2 lt/agt
  • generally you wont have to worry about the
    technicalities of the markup codes as
    applications like Dreamweaver handle this for you
  • close the source window and Netscape

15
Making a web page of your cv
  • open your cv in Word
  • start program called Dreamweaver
  • Start -gt Internet Applications -gt Dreamweaver
  • this is a powerful web authoring package

Watch out for the pop-up tool windows
16
  • you now want to copy and paste the text of your
    cv from Word into Dreamweaver
  • In Word select all the text, Edit -gt Select All
  • then Edit -gt Copy
  • now switch to Dreamweaver and go Edit -gt Paste
  • the result in Dreamweaver should look something
    like this (but with your cv obviously!)

17
Getting started in Dreamweaver
  • Dreamweaver is pretty powerful. It uses several
    pop-up menus with different functions
  • well go through some of the common things you
    can do
  • lets start with a bit of formatting of the text

Objects
Properties
18
Centre text and make it bold
Select some text and then use the Align Center
and Bold buttons on the Properties pop-up. (you
get the idea Im sure)
Align center
BOLD
19
  • try some different property options
  • for example text colour, font type, font size
  • work through your whole cv, quickly setting the
    formatting you want
  • now try some of the Objects functions
  • embed different things into your web page
  • some of the most useful ones are
  • images
  • tables
  • rules

20
Put in a horizontal bar
Properties of rules
Make a quick table
21
  • the second menu bar (Launcher) is not much use to
    you at this stage
  • although you can use the first set of buttons to
    see the underlying html code of your page
  • remember to switch back to Design View

22
Page properties
  • Modify -gt Page Properties
  • set the page title and try experimenting with
    some different background and text colours if you
    want

23
Getting your web page online
  • once you are happy with the formatting of your cv
    it is time to get it live on the Web, so other
    Internet users can see it
  • dont worry too much about final formatting, it
    is only really a test. also, you can change it
    all later
  • you need to save your web page with a specific
    name and in a specific place on your r\ drive on
    WTS
  • web pages must be saved in a html.pub directory
    on your WTS account

24
  • you need to make a html.pub directory now, at the
    top of the r\ drive, you can use Window Explorer

directory you need is R\html.pub
now in Dreamweaver save (File -gt Save) the cv
web page into the html.pub directory. Name the
file you save as index.htm
25
Previewing your web page
  • before putting your page on the Internet you can
    preview it in a web browser. This will give you a
    good idea how it will look to others
  • In Dreamweaver go to
  • File -gt Preview in Browser

26
  • the last stage is to run a small program that
    changes the file permissions of the index.htm
    file in your html.pub directory
  • this means the UCL web server will see your
    files and then they are online, on the Web for
    all to see
  • dont worry this is all handled automatically
  • go to Start button -gt Programs -gt Internet
    Software -gt Publish Web Pages

27
When you run the Publish Web Pages program a
login screen will pop up. type in your username
password
Your cv is now one of the billions of pages on
the World Wide Web! Now see if you can open
the new web page, start Netscape and the web
address of you cv will be http//www.homepages.ucl
.ac.uk/xxxxxxx/ (where xxxxxxx is your
username) (The squiggle is a tilde symbol)
28
You should see something like this.WELL
DONE.(If not, please ask for help now!)
29
Going a bit further - adding hyperlinks
  • the next step is to add a hyperlink to create a
    virtual link between your page and other pages on
    the web
  • hyperlinks are what gives the web its power and
    usefulness as you can weave information together
  • lets try linking the postcode on your address to
    a map. so the reader of your cv web page can see
    where you live

30
In Netscape, go to www.streetmap.co.uk and enter
your postcode
31
You need to copy the web address of this page so
you can use it in your hyperlink. Right click on
the Use link and then Copy Link Location
32
Now in Dreamweaver, highlight the postcode text
and right-click in the Link box, on the
properties pop-pop menu, and then Paste
33
  • the postcode text will now be coloured blue and
    underlined to show it is a hyperlink
  • save the cv page again as index.htm in the
    html.pub directory. (say yes if you are asked
    to overwrite the existing file)
  • run the Publish Web Pages program again
  • (note, you need to run the Publish Web Pages
    program every time you save something new into
    the html.pub directory)
  • now reload the cv web page again in Netscape and
    see if the hyperlink is working. Click on refresh
    to be sure youve loaded the latest. clicking on
    your postcode should open the Streetmap page
    showing the map

34
Some design issues
  • remember to spell check and proof read anything
    you put on the web
  • just like the design of any document, remember to
    KISS
  • not too much text as people dont like to read a
    lot on the web
  • avoid annoying things like frames, flashing text
    and pop-up windows
  • remember people like to print off web pages to
    read, so check your page prints well
  • avoid horizontal scrolling

35
Next steps
  • email me the address of your web page so I can
    check it - m.dodge_at_ucl.ac.uk
  • spend a bit of time exploring Dreamweaver
    functions and make some other test web pages to
    put online
  • try adding hyperlinks between them
  • Dreamweaver has various tutorials
  • the next step will be putting images in your
    webpage. we cover this in the next practical

36
More help - try netskillswww.ucl.ac.uk/is/trainin
g/netskills.htm(when you register, enter
University College Londonas your organisation)
Write a Comment
User Comments (0)
About PowerShow.com