DMS 380: Beginning Markup--
HTML/CSS

Objectives

by the end of this module, you will be able to

• explain what a markup language is
• identify HTML syntax features
• identify CSS syntax features
• explain the conceptual relationship between HTML and CSS
• demonstrate how to read a specification

Tutorials

1. what is markup language?
2. HTML and CSS Syntax
3. basic functions of HTML and CSS
4. specifications and how to use them

complete playlist

Web Resources

• HTML 5 Specification
• CSS 3 Specification
• w3schools HTML Tutorial
• w3schools CSS Tutorial
• TEI by Example

Assessment

Module 1 is assessed through the Module 1 Quiz in Canvas

Evaluation Criteria

You must achieve an 80% or higher on the Module 1 Quiz to proceed to the rest of the course. You may take the Quiz more than once.

Objectives

by this end of this module, you will be able to

• identify main sections of an HTML page
• code a page with multiple HTML body tags
• code a page with embedded CSS that modifies the style of HTML tags

Tutorials

1. getting ready to code: recommendations for system settings (PC)
2. getting ready to code: solutions for iOS (Mac)
3. getting ready to code: recommendations for using an iPad to code (Mac)
4. your first HTML page
5. formatting text with HTML tags
6. introduction to CSS
7. how does color work in HTML?

complete playlist

Web Resources

• HTML 5 Specification
• CSS 3 Specification
• Sample Text for Tutorial 3
• Chrome Browser Download
• HTML Color Picker
• w3schools HTML Tutorial
• w3schools CSS Tutorial
• Module 6 Video Tutorial: Learning New Code on Your Own

Assessment

this module will be assessed through the following coding exercises:

1. 2.1 formatting content on the page
2. 2.2 using CSS on an HTML page
3. 2.3 original page: learning code on your own

Objectives

by the end of this module, you will be able to

• code a page with multi-tag sets
• use properties withing HTML tags and assign variable values appropriately
• code a page with semantic organizational tags
• use CSS to apply styling to organizational tags and multi-tag sets

Tutorials

1. multi-tag sets and how to use them
2. properties and how to set them
3. using organizational tags on your page
4. applying CSS to multi-tag sets
5. applying CSS to organizational tags

complete playlist

Web Resources

• CSS reloader: Google Chrome extension
• HTML Color Picker
• Eye Dropper: Google Chrome extension
• w3schools HTML Tutorial
• w3schools CSS Tutorial

Assessment

this module will be assessed through the following coding exercises:

1. 3.1 formatting content on the page: multi-tag structures
2. 3.2 organizational tags and CSS

Objectives

by the end of this module, you will be able to

• explain what File Transfer Protocol means and why it is important
• use the FTP command line to execute basic commands e.g. open, cd, mkdir, dir, get, put, close
• use FTP to transfer a file to a server
• use FTP to update a file on a server

Tutorials

1. FTP explained
2. FTP command line demo
3. FTP client demo (FileZilla) -- folders and files (works for PC, Mac)
4. FTP client demo (Koder app on iPad)

complete playlist

Web Resources

• List of FTP commands
• FTP command example syntax
• FileZilla Download
• Cyberduck Download

Assessment

This module will be assessed by demonstration of the following:

1. 4.1 using the FTP command line
2. 4.2 using an FTP client

Objectives

by the end of this module, you will be able to

• explain basic principles of universal design and why they are important
• demonstrate sound universal design for page structure elements
• demonstrate sound universal design for text structure elements
• demonstrate sound universal design for color pallette selection
• demonstrate best practices for user-centered functionality
• demonstrate best practices for aesthetic design

Tutorials

1. what is universal design, and why is it important?
2. universal design in code and tools for testing your page design
3. tools for making coding easier

complete playlist

Web Resources

• Principles of Universal Design from the Centre for Excellence in Universal Design
• Universal Design for HTML Code from the Centre for Excellence in Universal Design
• HTML Validator -- checks for obsolete code
• Colorblind Web Page Filter - from Toptal; simulates the effects of different types of color blindness
• Accessible Code Check Tool - WAVE from WebAIM.org
• coolors.co color pallette generator
• CSS reloader: Google Chrome extension
• Eye Dropper: Google Chrome extension

Assessment

This module will be assessed through the following coding exercises:

1. 5.1 editing a code page to conform to the technical specifications of universal design
2. 5.2 create a page with aesthetic design elements that also conform to principles of universal design

Objectives

by the end of this module, you will be able to

• use the HTML or CSS tutorials to check applicable properties for tags
• use the "stopped at" principle to narrow down the sectoin of code with an error and fix it
• use strategies to teach yourself new code

Tutorials

1. debugging tips
2. using browser tools to detect coding errors
3. learning new code on your own

complete playlist

Web Resources

• HTML 5 Specification
• CSS 3 Specification

Assessment

This module will be assessed through

1. 6.1 submission of a debugging log
2. 6.2 successful completion of a quiz

Evaluation Criteria: Quiz

You must achieve 100% on the Module 6 Quiz to demonstrate mastery of the outcomes for this module. You may take the quiz at any point after Module 1 has been completed. You may take the Quiz more than once.