Offered by instructional computing at the university of missouri st louis
This presentation is the property of its rightful owner.
Sponsored Links
1 / 26

A WEB DEVELOPMENT SHORT COURSE PowerPoint PPT Presentation


  • 37 Views
  • Uploaded on
  • Presentation posted in: General

OFFERED BY INSTRUCTIONAL COMPUTING AT THE UNIVERSITY OF MISSOURI – ST.LOUIS. A WEB DEVELOPMENT SHORT COURSE. What is a webpage?. It is A TEXT FILE full of hints for your internet browser . Those hints are called “ TAGS ”

Download Presentation

A WEB DEVELOPMENT SHORT COURSE

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Offered by instructional computing at the university of missouri st louis

OFFERED BY

INSTRUCTIONAL COMPUTING

AT THE UNIVERSITY OF MISSOURI – ST.LOUIS

A WEB DEVELOPMENT SHORT COURSE


A web development short course

What is a webpage?

It is A TEXT FILEfull of hints for your internet browser.

  • Those hints are called “TAGS”

  • “TAGS” tell your browser how to make your web page look.

  • Where it should place an image, text, a link to another document, etc.


Where the web page is stored

Where the web page is stored?

  • While you are working on webpage, you can save it on your computer, it does NOT have to be published on the WWW.

  • If you want your page to be available online, it will have to be uploaded to the remote computer called a “server”


Programs that can be used to create a web document at umsl computer labs

Programs that can be used to create a web document at UMSL computer labs

  • Notepad

  • NVU

  • ADOBE Dreamweaver MX

  • Hotdog Professional

  • Microsoft Word 2007

  • Microsoft PowerPoint 2007


Common rules

Common rules

  • The start page should be called “index.html”

  • Following pages may have almost any name

    Some restrictions apply:

    The filename should have a *.html or *.htm extension

    Recommendation –

    File name should not contain spaces and special characters


Let s create the first web page of your website

Let’s create the first web page of your website

  • To create a simple website we can use a simple tool

    NOTEPAD


1 click save as in file menu 2 change the file type from txt to all files

Now let’s save your webpage

1. Click “Save as” in file menu2. Change the file type from *.txt to “All files”

  • The best place to save the file is a folder in your“K: drive”called “public_html”.

  • This folder isopen to public. People from all over the world can read files in it buttheycannot delete them.

  • “K drive” is nothing else but a storing space on the remote computer called“admiral.umsl.edu”.


A web development short course

Now let’s check your web page

  • The address for your webpage is :

    http://www.umsl.edu/~Your(SSO)ID

  • This link is an internet address for your “public_html” folder.According to the rules, the first file is named “index.html”

  • If you have such file in your“public_html” folder it will show up in your browser window


A web development short course

Here it is ...

Wait……This is not exactly what we wanted, is it?.

There are no line breaks!

How can we fix this?


Html stands for the hypertext markup language

HTML stands for the HyperText Markup Language

  • HyperText – text containing links to other texts

  • Markup Language – defines hints/Tagsfor the browser.

    • Tagsare only visible for the browser.

    • The Browser interprets the Tags

    • The result shows up in the BrowserWindow.


A web development short course

For example in html we write something like this:

This is a <b> bold </b>

- The browser will show us the result:

This is abold

- If we want a line break at the end of line:

This is a<b> bold </b><br>new line

- The browser will show :

This is abold

new line


Let s make changes to our webpage

Let’s make changes to our webpage


And we got what we wanted

And we got what we wanted!


Let s try to use software suited for building web pages

Let’s try to use software suited for building web pages

START>Programs>Web Publishing>Macromedia Dreamweaver


Toolbars

Toolbars

Menus

Properties panel


Dreamweaver has 3 types of views

Dreamweaver has 3 types of views

  • Design view

  • Code View

  • Code And design view (split)

    You can switch back and forth between them using these 3 buttons


Step 1 save your webpage

Step 1 : SAVE YOUR WEBPAGE


With dreamweaver you can easily modify the page s properties

With Dreamweaver you can easily modify the page’s properties

Path: from the top menu choose Modify/Page Properties


You can modify text

You can modify text

  • You can make it bold, Italic

  • Change color

  • Size

  • Font type

  • Center text

  • Create a link


A web development short course

Probably the most important part of a website are “links”


A big part of a web page are images

A big part of a web page are images


You can preview your web page in a browser at any time

You can preview your web page in a browser at any time


More information on web page development

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


  • Questions

    Questions?

    SSB 103

    SSB 452

    Math TLC (UC 050)

    Ward E. Barnes Library

    Thomas Jefferson Research Commons

    If any further questions arise, please contact a lab consultant in any of the following Instructional Computing Labs.


    Questions1

    QUESTIONS ?


    Additional information

    Additional Information

    • http://www.micros.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://mell.umsystem.edu

      • Microsoft E-Learning Library has tutorials on many MS Office products available to all UMSL students and staff

    • http://www.umsl.edu/stg

      • The Online Student Technology Guide has answers to many computing questions.


  • Login