Introduction to web development and HTML

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 webfolder 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 (Notepad) 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 codingand 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

Introduction to web development and HTML