Setting up a simple Web Page Anatomy of posting some text and images using a simple text editor and...
-
Upload
bathsheba-rice -
Category
Documents
-
view
213 -
download
1
Transcript of Setting up a simple Web Page Anatomy of posting some text and images using a simple text editor and...
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– Even Powerpoint!– (Output of format sometimes disappointing)
• Commercial web editors – I like HotMetal from SoftQuad
• Web master takes content and does it for you?• Find a 5 year old to help with the latest!!