MM252 - Introduction to Web Authoring

From Courses

Contents 1 Catalog Description 2 Learning Outcomes 3 Course Requirements 4 Grading Policies 5 Required Text, Software, and Hardware 6 Means of Assessment 7 Brief Outline of Course 8 FAQ

Catalog Description

Topics covered in this course include history of the Internet, Internet protocols, and HTML. Students will apply this knowledge to create web pages using HTML and simple web-authoring tools. Emphasis in this class is how basic web pages work and how to design pages that are effective and efficient. Student must have at least sophomore standing to register for this course.

Learning Outcomes

Upon completion of this course students should:

• be fluent with HTML 4.01 and fundamental CSS markup.
• effectively gather, organize, and publish information to the web.
• apply standard workflows when publishing web content to web servers.
• solve basic layout problems with HTML and CSS markup.
• create HTML forms.
• utilize basic Photoshop techniques in the web development process.

Course Requirements

MM252 will explore current trends and topics of web development focusing on the fundamental technology of web development, HTML and CSS. The course seeks to define the processes involved in publishing information to the web and introduces the aesthetic and technical problems and solutions of web development.

Students will learn and implement HTML, CSS and related software and hardware to construct a website with consideration to course topics.

The lectures are posted on the web. MM252 - Video Lectures. If you are an online student, you have been emailed a password to access each video lecture.

I will be adding lectures weekly as we move through the course.

If you are an online student, there are weekly discussion boards posted on Blackboard. Use the boards to discuss topics and ask or answer questions. These are open discussions. Be considerate and helpful to your peers. The more you communicate with each other through the discussion, the more you'll learn! Please use the boards to ask all questions related to course material. I will check the discussions several times a week and add input.

Grading Policies

No late work will be accepted. A "0" will be assigned as a consequence.

• Final Exam (cumulative) - 25%
• 2 Exams - 25% each
• Lab assignments - 25%

For online students, the exam schedule follows:
Exam 1 = Week 4, Wednesday through Friday.
Exam 2 = Week 8, Wednesday through Friday.
Final Exam = Week 11, Monday through Thursday.

For students who are on-campus, the exams dates will be determined for:
Week 4, Exam 1
Week 8, Exam 2

The final exam date an time can be found here for on-campus students.

For online students, all exams are available 8am to 5pm on the scheduled days.

Online students must find a proctored exam site to take each of the exams. Contact the EOU testing center for a list of sites in your area.

Three unexcused absences in the MWF course will justify the lowering of the final grade by one letter. Five unexcused absences will lower final grade two letters. One unexcused absence in the M course will justify the lowering of the final grade by one letter. Two unexcused absences will lower final grade two letters.

Exams and quizzes are given on Blackboard. On exam day, students must be prepared to get access to Blackboard and be in LH235 or their desginated exam location to take the exam.

Required Text, Software, and Hardware

The text and software for this course are available on the Internet for free!

• W3Schools (main text)
• Photoshop 30-day Trial
• GIMP
• Aptana
• an high speed Internet connection
• a fairly recent computer, Mac or PC

Means of Assessment

• Lab assignments, exams, final exam.

Brief Outline of Course

• Week 1 - Welcome. What is the Internet and how does it work? The client-server architecture. What is HTML and CSS? Elements, tags, and attributes. The basic HTML structure of a webpage. Configuring Aptana. Writing your first HTML page, Hello World! Learn the development workflow.
  • Video Lecture: MM252 - Video Lectures#Week One
  • Reading
    • HTML The Basic Structure of a Webpage
    • HTML Introduction
    • HTML Basic
    • HTML DOCTYPE declaration
    • HTML head Elements
    • HTML Elements
    • HTML Attributes
  • Assignment
    • Assignment One - Hello World, Your First Public Webpage
  • Worksheet
    • The basic structure of a webpage

• Week 2 - Basic Typography. Formatting text in HTML. Styling text using inline CSS; font family, size, color. Using lorem ipsum. What are deprecated tags? Managing whitespace. Lists. Character entities.
  • Video Lecture: MM252 - Video Lectures#Week Two
  • Reading
    • HTML Headings
    • HTML Paragraphs
    • HTML Center
    • HTML Formatting
    • HTML Font (deprecated)
    • CSS Styles (inline only)
    • Lists
    • Character Entities
    • Break tag
  • Assignment
    • Assignment Two - Basic Text Formatting

• Week 3 - Understanding directory structures. Creating a basic navigation menu. Absolute and relative links. Writing paths. Linking to regions within pages and downloadable resources.
  • Video Lecture: MM252 - Video Lectures#Week Three
  • Reading
    • HTML Links
    • Absolute and Relative Links
    • Inline CSS backgrounds
    • Hexadecimal Colors
  • Assignment
    • Assignment Three - Links
  • Worksheet
    • Learn and practice how to write "relative" links

• Week 4 - Adding images to your page. GIF vs. JPEG for the web. The image folder/directory and directory structures. Writing paths. Five image attributes.
  • Video Lecture: MM252 - Video Lectures#Week Four
  • Reading
    • HTML Images
  • Assignment
    • Assignment Four - Web Images
  • MM252 - Study Guide - Exam One
  • Worksheet
    • Learn and practice placing images on a webpage.

• Week 5 - Building HTML table. Table attributes. Spanning rows and columns. Fixed versus fluid layouts. Choosing the width of a webpage. 'Slice and dice' with Photoshop/GIMP.
  • Video Lecture: MM252_-_Video_Lectures#Week_Five
  • Reading
    • HTML Layouts - do not worry about "divs" at this point.
    • HTML Tables
    • 10 Rock Solid Webpage Layouts
  • Assignment
    • Assignment Five - Table Layouts

• Week 6 - Building forms.
  • Video Lecture: MM252_-_Video_Lectures#Week_Six
  • Reading
    • HTML Forms
    • Textareas
  • Assignment
    • Assignment Six - Basic Registration Form

• Week 7 - What are Cascading Style Sheets? Selectors, properties, and values. CSS page backgrounds. External and internal stylesheets. Span and div tags. Class and id selectors. Primary and secondary navigation. Pseudo classes.
  • Video Lecture: MM252_-_Video_Lectures#Week_Seven
  • Reading
    • CSS Introduction
    • CSS Syntax
    • CSS How to
    • Class versus ID
    • CSS Background
    • CSS Text
    • CSS Font
    • Exam Two - Study Guide
  • Assignment
    • Assignment Seven - Backgrounds and External Style Sheets
    • Assignment Eight - Text and Internal Stylesheets
    • Assignment Nine - Pseudo Classes

• Week 8 - More with CSS. Div and span tags. The box model. Tableless layouts using <div> and CSS.
  • Video Lecture: MM252_-_Video_Lectures#Week_Eight
  • Reading
    • CSS Box Model
    • Blocks
    • HTML Layouts using with "divs"
    • CSS Floats
    • Float property
  • Additional Reading
    • Two Column Tableless Layouts
    • Two Column Tutorial
    • Three Column Tutorial
  • Assignment
    • Assignment Ten - Convert Layout to CSS

• Week 9 - Layouts with CSS, cont'd.
  • Video Lecture:
  • Assignment
    • Continue working on Assignment Ten - Convert Layout to CSS

• Week 10 - Final Exam Review
  • Assignment
    • Prepare for final exam. Study all material.

FAQ

• You indicate: 'If you are an online student, you have been emailed a password to access each video lecture' but I did not receive an email giving me the password yet. When will you send it?
  • I will email the password out the first day of class.

• If Photoshop is a 30 days trial, do I need to wait before downloading it? I want to have enough time for exercices to do for class. Do you think I need to buy it or just wait before downloading it?
  • Yes you should wait a few weeks before you download it. You wouldn't want the trial version of the software to end before you complete your assignments. If you are not able to use Photoshop, I will be doing demonstrations with GIMP as well, which is free! I think you should buy Photoshop if you plan on developing and designing websites or have design as a career goal.

• Be sure to visit the disclaimers page for information on academic misconduct and disabilities.