making your own piece of cyberspace: web page 101 martin dodge ([email protected]) practical 1,...
TRANSCRIPT
![Page 1: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/1.jpg)
Making Your Own Piece of Cyberspace: Web Page
101
Martin Dodge([email protected])
Practical 1, Friday 8th October 2004
http://www.casa.ucl.ac.uk/cyberspace
3011: Geographies of Cyberspace
![Page 2: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/2.jpg)
Today’s 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
![Page 3: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/3.jpg)
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
![Page 4: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/4.jpg)
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
![Page 5: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/5.jpg)
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 don’t 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 don’t need permission to put stuff on the Web
![Page 6: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/6.jpg)
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 com’s)
![Page 7: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/7.jpg)
Number of Web sites• A web site is hard concept to define• Netcraft’s survey <http://www.netcraft.com/>
• 54,407,216 web servers estimated Sept. 2004 survey
![Page 8: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/8.jpg)
• 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)
Size of some ‘local’ sites?
![Page 9: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/9.jpg)
Most popular Web sites?
Nielsen//NetRatings, <http://www.nielsen-netratings.com/>
![Page 10: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/10.jpg)
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
![Page 11: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/11.jpg)
• lets look at the html code of a typical page, such as the homepage for the 3011 website
![Page 12: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/12.jpg)
Now work through the rest of the slides by yourself
Ask for help if you get stuck!
![Page 13: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/13.jpg)
• 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 -> Page Source
• a new window will pop up with the html code for this page
![Page 14: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/14.jpg)
html code• at first glance it looks complicated but it can be
easily deciphered• <title> Geographies of Cyberspace </title>• <b> text </b>• <I> text </I>• <a href=“page2.html”>Go To Page 2 </a>
• generally you won’t have to worry about the technicalities of the markup codes as applications like Dreamweaver handle this for you
• close the source window and Netscape
![Page 15: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/15.jpg)
Making a web page of your cv• open your cv in Word
• start program called Dreamweaver Start -> Internet Applications -> Dreamweaver • this is a powerful web authoring package
Watch out for thepop-up tool windows
![Page 16: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/16.jpg)
• you now want to copy and paste the text of your cv from Word into Dreamweaver
• In Word select all the text, Edit -> Select All
• then Edit -> Copy
• now switch to Dreamweaver and go Edit -> Paste
• the result in Dreamweaver should look something like this (but with your cv obviously!)
![Page 17: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/17.jpg)
Getting started in Dreamweaver
• Dreamweaver is pretty powerful. It uses several pop-up menus with different functions
• we’ll go through some of the common things you can do
• lets start with a bit of formatting of the text
Objects
Properties
![Page 18: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/18.jpg)
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 I’m sure)
BOLDAlign center
![Page 19: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/19.jpg)
• 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
![Page 20: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/20.jpg)
Make a quick table
Put in a horizontal bar
[Properties of rules]
![Page 21: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/21.jpg)
• 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’
![Page 22: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/22.jpg)
Page properties• Modify -> Page Properties
• set the page title and try experimenting with some different background and text colours if you want
![Page 23: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/23.jpg)
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
• don’t 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
![Page 24: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/24.jpg)
• you need to make a html.pub directory now, at the top of the r:\ drive, you can use Window Explorer
now in Dreamweaver save (File -> Save) the cv web page into the html.pub directory.
Name the file you save as ‘index.htm’
directory you need isR:\html.pub
![Page 25: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/25.jpg)
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 -> Preview in Browser
![Page 26: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/26.jpg)
• 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
• don’t worry this is all handled automatically• go to Start button -> Programs -> Internet Software ->
Publish Web Pages
![Page 27: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/27.jpg)
When you run the Publish Web Pagesprogram 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 behttp://www.homepages.ucl.ac.uk/~xxxxxxx/
(where xxxxxxx is your username)
(The squiggle ~ is a tilde symbol)
![Page 28: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/28.jpg)
You should see something like this.
WELL DONE.(If not, please ask for help now!)
![Page 29: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/29.jpg)
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
![Page 30: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/30.jpg)
In Netscape, go to www.streetmap.co.uk and enter
your postcode
![Page 31: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/31.jpg)
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
![Page 32: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/32.jpg)
Now in Dreamweaver, highlight the postcode text and right-click in the Link
box, on the properties pop-pop menu, and then Paste
![Page 33: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/33.jpg)
• 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 you’ve loaded the latest. clicking on your postcode should open the Streetmap page showing the map
![Page 34: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/34.jpg)
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 don’t 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
![Page 35: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/35.jpg)
Next steps• email me the address of your web page so I
can check it - [email protected]• 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
![Page 36: Making Your Own Piece of Cyberspace: Web Page 101 Martin Dodge (m.dodge@ucl.ac.uk) Practical 1, Friday 8th October 2004](https://reader036.vdocuments.net/reader036/viewer/2022070403/56649f2c5503460f94c4796a/html5/thumbnails/36.jpg)
More help - try netskillswww.ucl.ac.uk/is/training/netskills.htm
(when you register, enter ‘University College London’as your organisation)