Introduction to web development and HTML MGMT 230 LAB.
15
Introduction to web development and HTML MGMT 230 LAB
-
Upload
shannon-townsend -
Category
Documents
-
view
212 -
download
0
Transcript of Introduction to web development and HTML MGMT 230 LAB.
Introduction to web development and HTML
MGMT 230LAB
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 website 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)
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)• HTML 5 is the current standard (along with CSS 3 for web
style sheets)
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: 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 applicationsEg. Adobe Dreamweaver, Microsoft Visual Studio
• Content management system (CMS) tools such as WordPress, Drupal, Joomla 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 using the full internet URL (web address) to test that your web folder is working correctly
• Email the correct URL to: [email protected]
