1. Introduction to web development and HTML MGMT 230 LAB

2. 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)

3. 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 website form Week 11: Work on project website using WordPress Week 12: Work on project website using WordPress Week 13: Website project demonstrations

4. 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

5. 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.asphttp://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

6. 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

7. 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

8. 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.

9. 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)

10. The web: A little technical history HTML devised by Tim Berners-Lee and launched in 1989 (The web was 26 this year!) Very simple to learn in the early 90s (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) HTML is an open standard (managed by World Wide Web Consortium (W3C)W3C HTML 5 is the current standard (along with CSS 3 for web style sheets)

11. 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 This is a paragraph or whether text should be bolded This is bolded text

12. Basic html tags that are present on every page 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 – Contains information about the document – The most common tag within the header section is the – Contains the content of the page - text, images etc – Page or section heading – largest size – the most common text layout tag is the paragraph tag – The path to an image file is shown as

13. Text editor (Note pad) Browser (Internet Explorer

14. Options for web development: Website creation tools Hand coding (using Notepad or other similar text tool) 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 (CMS) tools such as WordPress, Drupal, Joomla etc

15. Practice HTML exercise Create a very simple web page with an image (downloadable from the course website)web page Save it to your web folder View it in your browser using the full internet URL (web address) to test that your web folder is working correctly Email the correct URL to: barbara.thomas@viu.ca