Transcript webpage

Setting up a simple Web Page
Anatomy of posting some text and
images using a simple text editor and
some raw HTML code – the cheap
way to create a web page!
Overall Steps
1. Obtain digital pictures
2. Open text editor – load blank template
3. Make changes - Save in editor – Switch
to browser (Alt-Tab) – Reload in browser
– Repeat step 3 until finished
4. Upload to server – very “situation
dependent” – {not covered here}
1. Obtain Digital pictures
Where to get pictures?
From web? (copyright issues)
Regular photos – scan
Digital Camera
USB connection
Serial Connection
JPG or GIF most popular formats
1a. LTU = Olympus C3000
Serial connection
Multiple resolutions
Large pixel array
Easy to use?
2. Text editor - template
Basic Web page code :
<P>Here is my page.</P>
3a. Add Browser title code
Browser title :
<TITLE>Put the Title of the page here –
will show up in the Browser</TITLE>
This is what the browser will put in the “status bar”
3b. “On the page” title code
Title that goes on the page :
<H1 Align="CENTER">Title of the
page in H1 Size</H1>
H1 is the largest “standard” size
Align = “Center” puts it in the center of the page
Notice we have to “close” the tag with </H1>
3c. Regular paragraph
Start and stop with <P> and </P> :
<P>Here is some text to start
Any “spacebar” or extra “returns” are ignored by the
browser – everything merged inside that “container”
Can “center” the paragraph with <P align=“center”>
3d. Image tags
Simple image (centered) – full size
SRC is the location of the image – in this case it
better be in the same directory as the web page!
Or use subdirectory – “images/badform.gif”
By putting image inside paragraph tags … can
center on the page – looks nice!
3e. Horizontal Rule (HR)
Separate sections for clarity
One of the few tags that is single
Puts a bar across the screen – full width of the
Could also put an image tag in – make it very long
and thin – like barbed wire .. or curly wire …
3f. Bulleted text
Line items (ordered or unordered)
<LI>This is my First point.</LI>
<LI>This is my Second point.</LI>
If you want them numbered .. Use <OL> and </OL>
Open and close each Line Item ( LI)
3g. Web links (or local)
Anchor tag
<A HREF = "">
Scott’s Web Page</A>
HREF gives the address of the place – this shows up in
the browser “status bar”, but is hidden on the page
After the first “>” and before the anchor tag closes, we
put the text that we want to show up (underlined) :
Scott’s Web Page
3h. Mix links and bullet list!
<P>Here are some very important web links :</P>
<LI><A HREF = ""></A></LI>
<LI><A HREF="">
Tony's Page</A></LI>
3i. The Final Result!
4. Upload to browser
Depends on your web site
Too many variables to cover here
“FTP” program (WS_FTP is great!)
Give “disk” to web master?
Other ways to create web pages
Most word processing can create pages
Commercial web editors
Even Powerpoint!
(Output of format sometimes disappointing)
I like HotMetal from SoftQuad
Web master takes content and does it for you?
Find a 5 year old to help with the latest!!