Introduction to web development

architectgroundhogInternet και Εφαρμογές Web

4 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

81 εμφανίσεις

Introduction to web development
and HTML

MGMT 230


After this lab you will be able to....

Understand the VIU network and web server
environment and how to access it

Save files to your web folder for publishing on
the World Wide Web

Be able to distinguish between the main types
of tools that can be used to create web sites

Understand the basics of hypertext markup
language (HTML)

MGMT 230 lab activities

This week: intro to web folders, web development tools, basic html

Week 2: Fonts, text & colour on the web

Week 3: Inserting images and image descriptions on a web page

Week 4: Using multimedia on the web

Week 5: Cascading style sheet basics

Week 6: In class lab assignment (testing weeks 2

Week 7: Introduction to

and themes

Week 8: How to use

for an organization or company website

Week 9:

Tips and Tricks.

Week 10: Using Google Docs to create a form

Week 11: Work on project website using

Week 12: Work on project website using

Week 13: Website project demonstrations

The VIU Network environment

You should use your network drive (U: drive) to manage
your files

Do not use My Documents or any other folder on the C:

For lab work in MGMT 230 you will need a

folder on
your U: drive


folder is actually a directory on a web server.
Files saved in your web folder will be:

Live on the internet

Accessible to anyone using a web browser

May turn up in Google searches

Setting up your


First, check to see if you have one (you probably will not)

You CANNOT create it yourself

Go to

and follow the instructions on how to set up your web

DO NOT delete, change, or move the web folder, as it will
not work if you do

Create a sub

INSIDE your web folder, create a sub
called mgmt230 (no spaces, all lower case)

You will use this folder to save the lab
exercises that you do over the next few weeks
and your lab assignment

Publishing your exercises and assignments so
I can see them

If you open your files directly from your U: drive the URL will look
something like this:


DO NOT send me this as the web address for your exercise

I will not be
able to open it

The URL you send me MUST include the full domain name and path to
your file, accessible over the Internet. For example:


is your Student Network Account username

Creating web pages

Web pages are written in Hypertext Markup
Language (HTML)

Why learn about source code?

What software can be used to write the code?
Web editors.

What software renders the code into
something we can recognize as a web page?
Web browsers.

About HTML

An HTML document is a text file that contains
both text and special mark
up codes called

The tags control the structure and appearance of
the document

An HTML file contains references to other files
that will be included in the page when it is
rendered in the browser (eg. images, sounds)

A little history

HTML and the first browser invented by Tim Berners
and launched in 1991

Very simple to learn (just a handful of tags)

Text only display in the early days

In 1993 a tag was added for the display of images
(Mosaic browser)

Browser development was the impetus for new tags to
be added to the language


the vocabulary of HTML

Tags delineate elements of the page for example a
paragraph or heading, and how text should be formatted

Tags are always contained within angle brackets

You must include both opening tags, and closing tags

the browser knows where, for example, a paragraph
starts and finishes

<p>This is a paragraph</p>

or whether text should be bolded

This is bolded text

Basic html tags that are present on
every page

<html> </html> Tells the browser that everything
between these tags is an HTML document

Within these tags, every HTML document is separated
into a header element and a body element

<head>Contains information about the document</head>

The most common tag within the header section is the <title>

<body>Contains the content of the page

text, images etc

<h1>Page or section heading

largest size</h1>

the most common text layout tag is the <p>paragraph tag</p>

The path to an image file is shown as
<img src=” “ />



Options for web development: Web

Hand coding

Automatic “save as html” from MS Office

Previous generation WYSIWYG tools aimed at non
. FrontPage

now phased out

Professional tools that incorporate a WYSIWYG interface
and a code interface, plus powerful tools to manage files,
and produce standards compliant coding and web

. Adobe Dreamweaver, Microsoft Visual Studio

Content management system tools such as
, Adobe Contribute etc

Practice HTML exercise

Create a very simple
web page
with an image
(downloadable from the course website)

Save it to your web folder

View it in your browser to test that your web
folder is working correctly

Email the correct URL to: