Presentation is loading. Please wait.

Presentation is loading. Please wait.

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.

Similar presentations


Presentation on theme: "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."— Presentation transcript:

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

2 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}

3 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

4 1a. LTU = Olympus C3000 Serial connection –slow? Multiple resolutions Large pixel array Easy to use?

5 2. Text editor - template Basic Web page code : Here is my page.

6 3a. Add Browser title code Browser title : Put the Title of the page here – will show up in the Browser This is what the browser will put in the “status bar”

7 3b. “On the page” title code Title that goes on the page : Title of the page in H1 Size H1 is the largest “standard” size Align = “Center” puts it in the center of the page Notice we have to “close” the tag with

8 3c. Regular paragraph Start and stop with and : Here is some text to start with. Any “spacebar” or extra “returns” are ignored by the browser – everything merged inside that “container” Can “center” the paragraph with

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

10 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 screen Could also put an image tag in – make it very long and thin – like barbed wire.. or curly wire …

11 3f. Bulleted text Line items (ordered or unordered) This is my First point. This is my Second point. If you want them numbered.. Use and Open and close each Line Item ( LI)

12 3g. Web links (or local) Anchor tag Scott’s Web Page 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

13 3h. Mix links and bullet list! Here are some very important web links : http://www3.ltu.edu/~s_schneider Tony's Page

14 3i. The Final Result!

15 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?

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


Download ppt "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."

Similar presentations


Ads by Google