HyperText Markup Language (HTML) and Cascading Style Sheets (CSS)

Preparation

Mozilla Developer Network (MDN)’s Web technology for developers

• Getting started with the Web (for anyone without prior exposure to web development)
• Introduction to HTML
• Introduction to CSS

Learning Objectives

• Describe the structure of HTML documents
• Distinguish between the different roles of HTML and CSS
• Create a simple website using HTML and CSS

Design Principles

The following principles are from Basics of Web Design – HTML5 and CSS3 (Felke-Morris 2017)

• Basic Web Design
  • Know your target audience and their needs
    • Compelling graphics draw users into the site
    • Text and navigation intensive for information purposes
  • Friendly for a wide range of browsers – test on a variety
  • Screen resolution – minimum resolution 800x600 (or 1024x768) or 240x320 (or 320x480) for mobile devices
  • Organizations of pages – hierarchical, linear, random, …

• Principles of Visual Design

  Repetition

  Repeat visual elements throughout design

  Contrast

  Add visual excitement and draw attention

  Proximity

  Group related items

  Alignment

  Align elements to create visual unity

• Accessibility: Section 508 of Rehabilitation Act

  Perceivable

  Alt text for pictures

  Operable

  Navigation by the blind

  Understandable

  Easy to read

  Robust

  Will work in the future

• Writing for the Web
  • Writing for the web
    • Short sentences and phrases
    • Organizes with headings, sub-headings, etc.
    • Bullets stand out well
  • Text deesign
    • Common fonts – Arial, Verdana, etc.
    • Font size, weight, color (contrast)
    • Alignment and visual cues (lines)
• Colors (see https://webdevbasics.net/color/)
  • RGB (Red-Green-Blue) as #ff1a5b where ff for red, 1a for green, and 5b for blue
  • Avoid font-background combinations that are difficult to read (e.g., red on blue)
  • Seek expert advice
    • Color design
      • ColRD
      • Paletton
    • Pick colors per age of target audience
      • Bright colors for children and preteens
      • Dark colors for late teens and early twenties
      • Light backgrounds with well-defined images and large text for 55+
    • Compelling graphics with white background for general appeal
• Navigation
  • Navigation bars with text / graphics aimed at target audience
  • Graphics for navigation
    • e.g., embed img tags inside hyperlinks
  • Dynamic navigation: tailored based upon top-level choices (e.g., http://www.fresno.gov)
  • Site map
  • Site search
• Other considerations
  • Load times (based upon various connection speeds)
  • Perceived load times (show in incremental pieces)
  • “Above the fold” (borrowed from newspapers) – put key information on top
  • Adequate white space (Google is great at this)
  • Avoid horizontal scrolling

Practice

Using the information from the introductions assignment, create an HTML web page with a title (using the title tag), headings, hyperlinks, lists, images, etc. for your biographical sketch (i.e., all the information in the README). Use CSS to alter the visual display of the various elements (e.g., you might change the font color of the headings).

Name your web page lastname.html where lastname is replaced with your last name. After creating this file, you can open it directly in your preferred web browser to see how it looks. You may also find the W3C Markup Validation Service helpful (see the “Validate by File Upload” or “Validate by Direct Input” tabs) – your web page should be well-formed and valid HTML.

Expected duration

1 hour or less, depending on prior experience

Deadline

1645 on Lesson 23 (15 March)

Points

10 points

Help Policy

Authorized Resources

Any, including classmates

Notes

Never copy another person’s work and submit it as your own.

You must document all help received from all sources, including the instructor and instructor-provided course materials (such as the textbook).

For this assignment, you may not use someone else’s web page as a template, only modifying the content (i.e., personal information). You must create the web page yourself, although you may ask classmates about HTML and CSS syntax.

Submission

Submit your web page and CSS style sheet using Blackboard.