Introduction to web development

architectgroundhogInternet and Web Development

Dec 4, 2013 (4 years and 7 months ago)

100 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