This Presentation Contains Narration and Notes

1. This Presentation Contains Narration and Notes • To hear the narration, turn on your speakers or plug in headphones. • If you would like to view this slideshow WITHOUT narration please do the following: • Click on the ‘Slide Show’ tab in the ribbon. • In the ‘Set Up’ section click the ‘Set Up Slide Show’ button. • Under ‘Show Options’ check the box next to ‘Show without narration.’ • Click ‘Ok’ and view the slideshow as normal. • The notes at the bottom are a transcription of the narration or extra information.

2. A WEB DEVELOPMENT SHORT COURSE with a Web Design focus short course OFFERED BY INSTRUCTIONAL COMPUTING UNIVERSITY OF MISSOURI – ST.LOUIS Fall 2011

3. HTML stands for the HyperText Markup Language • HyperText – text containing links to other texts • Markup Language – defines hints/Tagsfor the browser. • Tagsare only visible to the browser. • The Browser interprets the Tags • The result shows up in the BrowserWindow.

4. What is a webpage? It is a TEXT FILE,called an HTML file,full of hints for your internet browser. • These hints are called “TAGS” • “TAGS” tell your browser how to display a webpage. • They tell it where it should place an image, text, a link to another document, etc.

5. Web Creation Programs at UM-Saint Louis • Notepad • Macromedia Dreamweaver MX • Kompozer • Microsoft Word 2010 • Microsoft PowerPoint 2010

6. Let’s create the first web page of your website • To create a simple website we can use a simple tool called Kompozer

7. A Sample Webpage

8. Let’s Build It! Insert Background • Click “Page colors and background” from the format menu. • Enable “Use custom colors”, choose the desired background color and click “OK”.

9. Heading • From the dropdown menu on the left, select “Heading 1”. • Select the desired font color as pointed by the arrow. • Click on the main screen and type the desired heading.

10. Inserting Text • Place the mouse cursor to the desired location on the webpage and start typing. • You can also copy text from a different file and paste it on the webpage.

11. Insert an Image • Select “Image” from the insert menu. • Click on the “open icon” circled and select the desired image (make sure the image being inserted in in the same folder as the webpage itself). • Type in a name associated with the image in “Alternate text” field and click “OK”. • Alternate text is a text which would be displayed in case the image does not show up on the webpage.

12. Positioning an Image • Right click on the image and click “Image properties”. • Click on “Advanced Edit”. This will open a different menu. • Click on the “Attribute” dropdown menu and select “align”. • Now click on the “Value” dropdown menu and select the desired (right) alignment value. • Click “OK”. You will return to “Image Properties” menu. • Click “OK” again.

13. Positioning an Image • The image is positioned to the right with text being written around it.

14. Inserting a Table • Click at the end of the webpage. • Click “Table” from the insert menu. • Select the desired number of rows and columns and click “OK”.

15. Editing a Table • Click on the table and then click “Table properties” from the table menu at the top. • Edit the size of the table by changing the “”Height” and “Width” values. • Change the alignment by selecting the desired value(center) from the “Table Alignment” dropdown menu. • Click “OK”.

16. Editing a Table (inserting text) • Highlight the whole table, and change the alignment form the alignment options at the top. • Type the desired text inside the table.

17. Hyperlink • A hyperlink is a link to another webpage or a different location within the same webpage. Adding a Hyperlink • Highlight the text you want to hyperlink. • Click on the “Link” button at the top. • Enter the desired url in the field circled and click “OK”. • This will hyperlink the highlighted text.

18. Now let’s save your webpage 1. Click “Save as“in file menu2. Give an appropriate title to your webpage and click on “OK”.3. Now give an appropriate name to your file and click on “Save “. • We are going to save our sample page on our desktop. • For convenience we are going to name it as index.html

19. Let’s view our webpage On the desktop, double click the index.html. It will open in your default web browser.

20. More information on web page development • You can find html reference books in the following computer labs • SSB 103 • TJ 316 • Ward E. Barnes • Of course there is a lot of help online too: • http://www.w3schools.com • http://www.w3.org

21. Questions? If any further questions arise, please contact a lab consultant in any of the following Instructional Computing Labs. SSB 103 SSB 452 Benton Hall 232 Math TLC (UC 050) Ward E. Barnes Library Thomas Jefferson Research Commons

22. Additional Information • http://www.cetc.umsl.edu • The Microcomputer Program at the University of Missouri-St. Louis offers day and evening computer courses as part of the Chancellor's Certificate series. • http://www.umsl.edu/stg • The Online Student Technology Guide has answers to many computing questions. • http://help.umsl.edu • Online self-service solutions for UMSL Technology Issues