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
Enter the password to open this PDF file:
File name:
-
File size:
-
Title:
-
Author:
-
Subject:
-
Keywords:
-
Creation Date:
-
Modification Date:
-
Creator:
-
PDF Producer:
-
PDF Version:
-
Page Count:
-
Preparing document for printing…
0%
Comments 0
Log in to post a comment