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.

OFFERED BY INSTRUCTIONAL COMPUTING UNIVERSITY OF MISSOURI – ST.LOUIS Fall 2011 WITH A WEB DESIGN FOCUS A WEB DEVELOPMENT SHORT COURSE WITH A WEB DESIGN FOCUS SHORT COURSE

HyperText – text containing links to other texts Markup Language – defines hints/Tags for the browser. Tags are only visible to the browser. The Browser interprets the Tags The result shows up in the Browser Window.

TEXT FILE, It is a TEXT FILE, called an HTML file, full of hints for your internet browser. TAGS 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.

Notepad Macromedia Dreamweaver MX Kompozer Microsoft Word 2010 Microsoft PowerPoint 2010

Insert Background Click Page colors and background from the format menu. Enable Use custom colors, choose the desired background color and click OK.

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.

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.

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.

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.

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

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.

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.

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.

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.

1. Click Save as in file menu 2. 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

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

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:

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

The Microcomputer Program at the University of Missouri-St. Louis offers day and evening computer courses as part of the Chancellor's Certificate series. The Online Student Technology Guide has answers to many computing questions. Online self-service solutions for UMSL Technology Issues