Introduction to web development

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

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

90 εμφανίσεις

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