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
Diskette
Serial Connection
JPG or GIF most popular formats
1a. LTU = Olympus C3000
•
Serial connection
–
•
•
•
slow?
Multiple resolutions
Large pixel array
Easy to use?
2. Text editor - template
•
Basic Web page code :
<HTML>
<BODY>
<P>Here is my page.</P>
</BODY>
</HTML>
3a. Add Browser title code
•
Browser title :
<HEAD>
<TITLE>Put the Title of the page here –
will show up in the Browser</TITLE>
</HEAD>
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
with.</P>
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
<P ALIGN="CENTER"><IMG
SRC="badform.gif"></P>
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
<HR>
One of the few tags that is single
Puts a bar across the screen – full width of the
screen
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)
<UL>
<LI>This is my First point.</LI>
<LI>This is my Second point.</LI>
</UL>
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 = "http://www3.ltu.edu/~s_schneider">
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>
<UL>
<LI><A HREF = "http://www3.ltu.edu/~s_schneider">
http://www3.ltu.edu/~s_schneider</A></LI>
<LI><A HREF="http://www3.ltu.edu/~sky">
Tony's Page</A></LI>
</UL>
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!!