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

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!!

Documents

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