Introduction to web development

architectgroundhogInternet and Web Development

Dec 4, 2013 (3 years and 11 months ago)

90 views

Introduction to web development
and HTML


MGMT 230

LAB

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
-
5)

•
Week 7: Introduction to
WordPress

and themes

•
Week 8: How to use
WordPress

for an organization or company website

•
Week 9:
WordPress

Tips and Tricks.

•
Week 10: Using Google Docs to create a form

•
Week 11: Work on project website using
WordPress

•
Week 12: Work on project website using
WordPress

•
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:
drive

•
For lab work in MGMT 230 you will need a
web

folder on
your U: drive


•
Your
web

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
web

folder

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


•
You CANNOT create it yourself


•
Go to
http://viu.ca/technology/students/webfolder.asp



and follow the instructions on how to set up your web
folder


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



Create a sub
-
folder

•
INSIDE your web folder, create a sub
-
folder
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:



U:
\
web
\
mgmt230
\
happy.html


•
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:


http://www.discovery.mala.bc.ca/web/
username
/mgmt230/happy.html



yourusername

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
tags

•
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
-
Lee
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

Tags
-

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
-

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

<p>This is a paragraph</p>

or whether text should be bolded

<strong>
This is bolded text
</strong>


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>
</title>

–
<body>Contains the content of the page
-

text, images etc
</body>

–
<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=” “ />


Text
editor
(Note
pad)

Browser
(Internet
Explorer

Options for web development: Web
editors

•
Hand coding

•
Automatic “save as html” from MS Office

•
Previous generation WYSIWYG tools aimed at non
-
professionals
eg
. 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
applications


Eg
. Adobe Dreamweaver, Microsoft Visual Studio

•
Content management system tools such as
WordPress
,
Drupal
, 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:


barbara.thomas@viu.ca