CSE 154

Lecture 2: More HTML, Accessibile Design, and Intro to CSS

Today's Agenda

Administrivia

Finish discussing HTML

Discuss Accessible Design

Start CSS

Administrivia

Syllabus

Sections and Labs

Sections and Labs will reinforce learning from lectures

Quick checks in section starting next week

Attend the section you are signed up for!

Cloud 9 update

Local development (example)

Testing quick things using Codepen.io

Review: Internet

Things that are relevant

  • There are layers
  • IP = Internet Protocol, also addresses like 192.168.0.1
  • No centralized control but...
    • DNS maps the numbers to names like Google.com
    • W3C Validates web pages
  • Websites use a client-server model over the Internet
Client Server Model

From Wikipedia

Review: Websites

Content

pile of bones

Words and images

Structure

skelton

HTML

Style

skelton

CSS

Behavior

skelton

Javascript & Server programs

skelton

HTML

Hypertext Markup Language (HTML)

Describes the content and structure of information on a web page

  • Not the same as the presentation (appearance on screen)

Surrounds text content with opening and closing tags

Each tag's name is called an element

  • Syntax: <element> content </element>
  • Example: <p>This is a paragraph</p>

Most whitespace is insignificant in HTML (ignored or collapsed to a single space)

We will use a newer version called HTML5

Structure of an HTML Page


                  <!DOCTYPE html>
                  <html>
                    <head>
                      information about the page
                    </head>
                    <body>
                      page contents
                    </body>
                  </html>

HTML

The <head> tag describes the page and the <body> tag contains the page's content

An HTML page is saved into a file ending with extension .html

The DOCTYPE tag tells the browser to interpret our page's code as HTML5, the lastest/greatest version of the language

HTML Tags

There are many different types of HTML tags used to structure web pages (we can't possibly cover all of them within lecture).

A comprehensive list is here (it's a great bookmark page for reference this quarter!)

Unless otherwise specified, all of the tags listed are required to be in the <body> of an HTML page rather than the <head>

Our compiled list is here and here

Clarifications

HTML is a subset of Extensible Markup Language (XML) ( more info)

Self closing tags like Horizontal rule <hr> can either have the slash in the tag or not, but BE CONSISTENT IN YOUR CODE.

                  
<hr />

<hr>

Tags that start with <! like is <!DOCTYPE html> is considered Markup Declaration

HTML vs Rendered Web page


                    <!DOCTYPE html>
                    <html>
                      <head>
                        <title>About Me: Nicole Riley</title>
                      </head>
                      <body>
                      <div class="container">
                           <div class="jumbotron">
                               <h2>About Me: Nicole Riley</h2>
                           </div>

                           <p>Hello, everyone! My name is ......</p>

                          ...
                       </body>
                    </html>
Sample About Me

More About HTML Tags

Some tags can contain additional information called attributes

  • Syntax:
    <element attribute="value" attribute="value"> content </element>
  • Example:
    <a href="page2.html">Next page</a>

Some tags don't contain content and can be opened and closed in one tag

  • Syntax:
    <element attribute="value" attribute="value" />
  • Example:
    <br />, <hr />, <br>, <hr>
  • Example:
    <img src="bunny.jpg" alt="pic from Easter" />
  • Note: whether you use the '/' in a self-closing tag is up to you, as long as you're consistent

Nesting Tags

<p> HTML is <em>really, <strong>REALLY</em> lots of</strong> fun! </p>

HTML (bad)

<p> HTML is <em>really</em>, <strong>REALLY</strong> lots of</strong> fun! </p>

HTML (good)

Tags must be correctly nested

  • A closing tag must match the most recently opened tag

The browser may render it correctly anyway, but it is invalid HTML

  • How would we get the above effect in a valid way?

Block and Inline Elements (explanation)

elements

Block elements contain an entire large region of content

  • Examples: paragraphs, lists, table cells
  • The browser places a margin of whitespace between block elements for separation

Inline elements affect a small amount of content

  • Examples: bold text, code fragments, images
  • The browser allows many inline elements to appear on the same line
  • Must be nested inside a block element

You knew there were going to be rules and exceptions...

Block vs. inline:

  • Some block elements can contain only other block elements: <body>, <form>
  • <p> tags can contain only inline elements and plain text
  • Some block elements can contain either: <div>, <li>

Some elements are only allowed to contain certain other elements:

  • <ul> is only allowed to contain <li>

Some elements are only allowed once per document:

  • <html>
  • <body>
  • <head>
  • <main>

Accessible Design

Slides based on content from Profs. Richard Ladner, Jake Wobbrock, and Amy Ko.

Disabilities

Everyone has different abilities

Nearly 1 in 5 people have a disability in the U.S. (from the U.S. Census)

(Some) kinds of disabilities

  • Vision
    • Blind
    • Low-Vision
    • Color Blind
  • Hearing
    • Deaf
    • Hard of Hearing
  • Speach
    • Ability to speak
    • Speach impediments
  • Mobility
    • Ability to Walk
    • Ability to use limbs
  • Cognative
    • Dyslexia, dysgraphia, dyscalculia
    • ADHD
    • Memory loss
    • Learning disabilities
  • Behavioral
    • Bipolar

Temporary and Situational disability

Disabilties can be temporary

  • having a broken arm in a cast
  • difficulty hearing after a loud concert

Disabilties can be situational

  • trying to open your door while carrying groceries
  • trying to talk on the phone in a noisy room
  • trying to read your phone under direct sunlight

Disabilty affects all of us

Accessible design

Designs that account for all abilities are called accessible designs

Try your phone's screen reader!

Enable your phone's screen reader

  • iOS: Settings > General > Accessibility > VoiceOver > Hit the switch
  • Android: Settings > Accessibility > Talkback > Hit the switch

Input works differently now. For example, tap now reads the screen and double-tap selects. Use two or three fingers to scroll by page. Play with it for a minute.

Try closing your eyes and reading a webpage or a social networking site. Try writing an email.

Views of disabilities

Medical view

  • Disabled people are patients who need treatment and/or cure.

Legal view

  • Disabled people have rights and responsibilities, such as access to public buildings, voting, education, etc.

Sociocultural view

  • Variation in ability is natural. "Disability" is caused by how society is designed, not by nature.

Universal Design

Design for as many users as possible, not just the average user

Example: Airplane cockpits:

  • In 1952, the U.S. Air Force redesigned seats to fit the average pilot.
  • They fit nobody (nobody is actually average), training results dropped.
  • Redesigned seat to be configurable for any pilot; training results rose above previous levels.

Universal Design is often used in architecture

Universal Design Principles

  1. Equitable use
  2. Flexibilty in use
  3. Simple and intuitive
  4. Perceptible information
  5. Tolerance for error
  6. Low physical effort
  7. Size and space for approach and use

Ability Based Design

Instead of focusing on the abilities that someone lacks (dis-ability), and trying to compensate

Focus on making systems work with what abilities people have

Don't make people adapt to the system

Make the system adapt to the abilities of the user

Ability Based Design Principles

  1. Focus on Ability, not dis-ability.
  2. Accountability: If user has difficulty, system changes.
  3. Adaptation: Interface may be self-adaptive or user-adaptable.
  4. Transparency: Give user awareness of adaptations
  5. Performance: System may monitor users' performance
  6. Context: System may sense context
  7. Commodity: System may be affordable

First two are required, other five are recommended

Tools and Resources

Tools

Resources

Back to HTML

Accessible Web design principles

Use document structre tags: e.g., <article>, <strong> as opposed to deprecated style tags like <b>

Provide metadata: e.g., <html lang="en">

Provide alternatives: e.g., img alt tag, video captions, transcripts, allow both keyboard and mouse input

Avoid directional text: eg. "the diagram on the right shows..."

Note: These design prinicples help in other ways as well

  • Captions allow people to watch your video without turning sound on.
  • Transcripts help people find your page through Google.
  • Structure and metadata help programs understand your page.

Images: <img>

Inserts a graphical image into the page (inline)

Koalified koala

HTML

Koalified koala

output

The src attribute specifies the image URL

HTML5 also requires an alt attribute describing the image, which improves accessibility for users who can't otherwise see it

More About Images


                    <a href="http://en.wikipedia.org/wiki/Koala/">
                      <img src="images/irrelephant.jpg" alt="Irrelephant elephant"
                           title="dumbo!" />
                    </a>

HTML

Irrelephant elephant

output

If placed in an <a> anchor tag, the image becomes a link

What's the title attribute?

  • title attribute is an optional tooltip (on ANY element)
  • BUT the title attribute doesn't always work well for mobile and accessibility, so its usage and future are debated

A note about images that are links

White space usually doesn't matter in HTML pages, except apparently here

image link test results

Preview of imagelinktext.html

Web Page Metadata: <meta>

information about your page (for a browser, search engine, etc.)

HTML

Placed in the head section of your HTML page

meta tags often have both the name and content attributes

  • Some meta tags use the http-equiv attribute instead of name
  • The meta tag with charset attribute indicates language/character encodings

Using a meta tag Content-Type stops validator "tentatively valid" warnings

Web Standards

It is important to write proper HTML code and follow proper syntax

Why use valid HTML and web standards?

  • More rigid and structured language
  • More interoperable across different web browsers
  • More likely that our pages will display correctly in the future
  • Can be interchanged with other XML data: SVG (graphics), MathML, MusicML, etc.

Coding Standards

It is vital that you write readable code. We have Coding Standards

Comments: <!-- ... --> comments to document your HTML file or "comment out" text


        <!-- My web page, by Suzy Student
             CSE154 Spring 2048       -->
        <p>CSE courses are <!-- NOT --> a lot of fun!</p>

HTML

CSE courses are a lot of fun!

output


Many web pages are not thoroughly commented (or at all)

Still useful at top of page and for disabling code

Comments cannot be nested and cannot contain a --

Do not leave commented-out HTML code in your homework assignments!

W3C HTML Validator


                  

                    
                      Validate

HTML

Validate

output

validator.w3.org

Checks your HTML code to make sure it follows the official HTML syntax

More picky than the browser, which may render bad HTML correctly

HTML Character Entities

a way of representing any Unicode character within a web page

character(s) entity
< > &lt; &gt;
é è ñ &eacute; &egrave; &ntilde;
™ © &trade; &copy;
π δ Δ &pi; &delta; &Delta;
И &#1048;
" & &quot; &amp;

HTML-encoding text

&lt;p&gt;
  &lt;a href=&quot;http://google.com/search?q=puppies&amp;ie=utf-8&quot;&gt;
      Search Google for Puppies
  &lt;/a&gt;
&lt;/p&gt;

HTML

<p> <a href="http://google.com/search?q=puppies&ie=utf-8"> Search Google for Puppies </a> </p>

output

To display the link text in a web page, its special characters must be encoded as shown above

Review: Websites

Content

pile of bones

Words and images

Structure

skelton

HTML

Style

skelton

CSS

Behavior

skelton

Javascript & Server programs

skelton

CSS

The Bad Way to Produce Styles

            
<p>
  <font face="Arial">Welcome to Greasy Joe's.</font>
  You will <b>never</b>, <i>ever</i>, <u>EVER</u> beat
  <font size="+4" color="red">OUR</font> prices!
</p>

HTML

Welcome to Greasy Joe's. You will never, ever, EVER beat OUR prices!

output

Tags such as b, i, u and font are discouraged in strict HTML

Why is this bad?

  • Accessibility
  • Code organization
  • Changing style easily

Cascading Style Sheets (CSS): <link> 


            <head>
              ...
              <link type="text/css" href="filename" rel="stylesheet" />
              ...
            </head>

HTML (template)

            
              <link type="text/css" href="style.css" rel="stylesheet" />

HTML (example)

CSS describes the appearance and layout of information on a web page (as opposed to HTML, which describes the content)

Can be embedded in HTML or placed into separate .css file (preferred)

Basic CSS Rule Syntax


            selector {
              property: value;
              property: value;
              ...
              property: value;
            }

CSS (template)


            p {
              color: red;
              font-family: sans-serif;
            }

CSS (example)

A CSS file consists of one or more rules

A rule selector specifies HTML element(s) and applies style properties

  • A selector of * selects all elements