Scribd
Upload
3 views

lecture02

The lecture covers the introduction to HTML, CSS, and accessible design, emphasizing the importance of understanding the difference between the web and the internet. Students will complete assignments using Git for version control while learning about semantic HTML structure and accessibility principles. The session also includes a preview of CSS and best practices for web design to ensure inclusivity and usability for all users.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

lecture02

The lecture covers the introduction to HTML, CSS, and accessible design, emphasizing the importance of understanding the difference between the web and the internet. Students will complete assignments using Git for version control while learning about semantic HTML structure and accessibility principles. The session also includes a preview of CSS and best practices for web design to ensure inclusivity and usability for all users.

Uploaded by

Furkan Tunç
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 45

More HTML, Accessible

Design, and CSS Preview


Lecture 2
Today’s Agenda

● First Assignment
● Recap Web vs Internet
● More HTML
○ You should not feel like you will know everything yet
○ and we continue learning more as we get into CSS and JS
● Discuss Accessible Design
● Start CSS
Creative Project 1: HTML and CSS
First assignment: Gaining practice with HTML and CSS. But… How?

Every assignment for the entire quarter will follow these steps:

1. You'll get a repo


2. `git clone`
3. Make some edits
4. `git add` and then `git commit` those edits
5. SAVE THOSE EDITS with `git push`
a. (There is no harm or penalty for doing this as often as possible; and in fact will probably save you later.)
6. BEFORE THE DEADLINE submit to Gradescope for grading
a. (We'll demo this again on Wednesday.)
Review: Websites

WORDS + IMAGES HTML CSS JAVASCRIPT


Ok, but really… Web? Internet? The same, right?
Nope! An analogy...

🏠
Where does the house come from?

© City of Toronto public archives


Getting to the House
Usually:

● Get the address


● Ask someone for directions from
your address to the House's address
● Series of instructions:
○ Turn here, follow until there
○ Continue until you reach this
○ Look for House
● Follow directions
In this analogy...
The Internet is kind of like:

● The roads you take to get from one place to another


● Plus the related tools to make using those roads possible (cars, signs, traffic control, GPS, etc.)

The Web is kind of like:

● References to houses or businesses, and the things you see inside of them.
● "If you want to talk to Alex, you can find them at 123 Street Way."
Refining the analogy
We'd never do this for real houses, but the web is more like:

1. Go to the house's address


2. Ask whoever answers for the current blueprints to the house
3. Go back to your own home/residence
4. Build the thing the blueprints represent
○ (Might need to go back to the other house to pick up some speciality supplies.)
5. After you're done looking at or using it, throw it away.
HTML
Like "blueprints" throughout the internet.
Tips when drafting HTML/CSS web pages

Always start with a sketch/wireframe before jumping into code!

A great resource on getting started with wireframes can be found here.


You don’t need
to be an artist.
HTML5 Semantic Tags to Define Structure
Structure of an HTML page
An HTML page is saved into a file ending
with extension .html <!DOCTYPE html>
<html>
The <head> tag describes the page and <head>
the <body> tag contains the page's
information about the page
content
</head>
The DOCTYPE tag tells the browser to <body>
interpret our page's code as HTML5, the page contents
latest/greatest version of the language </body>
</html>
Let's start with a template!
General Outline with HTML5
General outline of a document body (template)
<body>
<header>
<!-- Header of the webpage body (e.g. logo, navigation bar) -->
</header>
<main>
<!-- Main section of the webpage body (where most content is) -->
</main>
<footer>
<!-- Footer of the webpage body (e.g. copyright info) -->
</footer>
</body>

For different types of pages, you may have more elements but there are the
ones you should follow as a guide for most of your web pages.
HTML vs. Rendered Web Page
<!DOCTYPE html>
<html>
<head>
<title>Koala Fan Page</title>
</head>
<body>
<header>
<h1>A Koala-tee Webpage</h1>
</header>
<main>
<aside>
<!-- Left sidebar -->
</aside>
<section>
<!-- Koala facts (header and paragraphs)-->

<article>
<!-- Koala art gallery -->
</article>
</section>
</main>
<footer>
<!-- Image citations -->
</footer>
</body>
</html>
HTML5 and Semantic Tags

<main>
Main content of the document - unlike <header> and <footer> tags, there can only
be one main element in the <body>. The content inside should be unique and not
contain content that is repeated across pages ( e.g. sidebars, nav link, search bars,
etc.)
<header>
Header element - contains header information for page body or section/article,
including logos, navigation bar, etc.
<footer>
Footer element - contains footer information for page body or section/article,
including copyright information, contact, links, etc. Also often used with block
quotes to cite sources (see CP1 about.html for an example!).
article vs. section

We get this question a LOT


Others ask this too
Here are two resources to help you:
● Ian Devlin article (a course reading)
● YouTube video

Articles are complete, standalone content. Sections are pieces of a greater whole.

And remember: div has no semantic meaning, should only be added for selecting
content in CSS/JS, and should be your "last resort"
Some important HTML Details
Links (Anchors): <a>

Links, or “anchors”, to other pages (inline)

<p>
Search for it on <a href="http://www.google.com/">Google</a>!
</p>
code

Search for it on Google!


output

Uses the href (Hypertext REFerence) attribute to specify the destination URL
● This can be absolute (to another web site) or relative (to another page on this
site)
Anchors are inline elements; must be placed in a block element such as a <p> or
Images: <img>

Inserts a graphical image onto the page (inline)

<img src="img/koala-with-leaf.png" alt="A Koala with a leaf" title="Logo">


code

output

The src attribute specifies the image URL


Motivating alt text

HTML5 also requires an alt attribute describing the image, which improves
accessibility for users who can't otherwise see it.
The value of the alt attribute is also what you see if the image is not successfully
loaded.

<img src="img/koala-with-leaf-broken.png" alt="A Koala with a leaf" title="Logo">


code

output
More about Images
If placed in an <a> anchor tag, the image becomes a link

<a href="https://courses.cs.washington.edu/courses/cse154/21sp/">
<img src="img/cse154logo.png" alt="CSE154 Course Logo" title="Logo">
</a> code

output
Relative vs. Absolute Paths for Links and Images

Relative: paths are relative to the document linking to the path.


● Linked files within the same directory: “filename.jpg”
<a href="my-other-page.html">Check out my other page!</a>

● Linked files within a subdirectory (e.g. “img”): “img/filename.jpg”


<img src="img/koala-with-leaf.png" alt="A Koala with a leaf" title="Logo">

Absolute: paths refer to a specific location of a file, including the domain and protocol.
● Typically used when pointing to a link that is published online (not within your own
website).
● Example: "https://validator.w3.org/"
Citing External Material
<figure>
<!--
Image source: Wikipedia, Made by User:Golbez
[CC BY-SA 3.0 (http://creativecommons.org/licenses/by-sa/3.0/)]
-->
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3b/Australia_states_blank.png/
257px-Australia_states_blank.png"
alt="Koala-land map">
<figcaption>Koalas live in Australia</figcaption>
</figure>

In your CP's, you must cite all resources that were not original (and you should give your
own images credits) either on the page (as in about.html or in a footer) and/or in the page
source code.
More examples (view page source to see citation comments):
● Example 1 (citing your own images)
● Example 2 (citing other images)
Nested Lists
A list can contain another list:
<ul>
<li>Koalas are marsupials</li>
<li>Koalas like to eat Eucalyptus plants
<ul>
<li>
They take up to 100 hours to
digest their food!
</li>
</ul>
</li>
<li>
The latin name for koalas is
<em>Phascolarctos cinereus</em>
("ash-colored pouch bear")
</li>
</ul>
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;

● A complete list of HTML entities


● How you you display the text &amp; on a web page?
References for more HTML Tags
You don't need to memorize all of the HTML tags, but should be able to use the
right tag for the right purpose (semantics).

Refer to this slide deck for a list of the common tags you should know, and MDN's
element reference for a much more comprehensive and detailed list (includes
browser compatibility for each!)
Nesting Tags
Tags can “nest” inside of other tags
<body>
<p>
This is a <em>really, <strong>REALLY</strong></em> awesome paragraph.
And here's a neat list:
</p>
<ol>
<li>with one list item</li>
<li>with another list item</li>
</ol>
</body> code

This is a really, REALLY awesome paragraph. And here's a neat list...


1. with one list item
2. and another list item!
output
Incorrectly Nesting Tags
<p>
HTML is <em>really,
<strong>REALLY<em class="bad"></em></em> lots of</strong> fun!
</p> incorrect

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?

<p>
HTML is <em>really,
<strong>REALLY lots of</strong><em class="good"></em></em> fun!
</p> correct
How can we check? Gitlab HTML Validator
Gitlab Validation Guide
● Checks your HTML code to make sure it follows our official HTML syntax
● More picky than the browser, which may render bad HTML correctly

NOTE: To be eligible for full credit on your creative projects and homework
assignments you MUST validate all of your files and pass with no errors. Warnings
are ok.
Web Standards
Moreover, it is important to write proper HTML code and follow proper syntax
Why use valid HTML5 and web standards?
● More interoperable across different web browsers
● More likely that our pages will display correctly now and in the future
● To ensure accessibility
Accessible Design
Slides based on content from Profs. Richard Ladner, Jake Wobbrock, and Amy Ko.

This is another great resource to learn more about why/how to make websites
accessible!
Thinking about accessibility as web developers
Who uses the web?
What are the different ways people visit and interact with websites?
Why is it important to think about users when developing websites?
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 (from W3C Web Accessibility Initiative (WAI)):
○ Visual
○ Auditory
○ Speech
○ Physical
○ Cognitive, learning, and neurological
○ Behavioral
Temporary and Situational Disability
Disabilities can be temporary
● having a broken arm in a cast
● difficulty hearing after a loud concert

Disabilities 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
● it's raining (in Seattle?!?), and touchscreen doesn't work

Disability affects all of us


Accessible Design
Designs that account for all abilities are called accessible designs
Exercise for after lecture: 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
● People with disabilities are patients who need treatment and/or cure.

Legal view
● People with disabilities have rights and responsibilities, such as access to public buildings, voting,
education, etc.
● Lawsuits can occur, but they should not be the motivating factor for making a system accessible

Sociocultural view
● Variation in ability is natural. "Disability" is caused by how society is designed, not by nature.
● Building for inclusion builds innovation (e.g., curb cuts, closed captioning)
Tools and Resources
From the A11y Project
● A really great compendium of resources
● An accessibility workshop from GHC'18
Tools
● Web Accessibility Evaluation Tool: http://wave.webaim.org/
● Color Schemes: http://colorbrewer2.org/
● Color blindness checker: http://www.color-blindness.com/coblis-color-blindness-simulator/
● Text readability: http://juicystudio.com/services/readability.php
Resources
● Web Content Accessibility Guidelines (something to know about when you apply for jobs):
https://www.w3.org/WAI/intro/wcag
● Teach Access Tutorial (general background and covers an important standard called ARIA).
http://teachaccess.org/initiatives/tutorial/
● Web design and development course by AccessComputing
http://www.washington.edu/accesscomputing/webd2/
● A11ycast - YouTube Videos to teach developers how accessibility works.
Accessible Web Design Principles

● Use document structure (Semantic) tags: e.g., <article>, <strong>


● Don't use 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 principles 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.
More about HTML and accessibility here.
Preview of 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> code

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


They are bad because of:
● Accessibility
● Code organization
● Changing style easily
Cascading Style Sheets (CSS): <link>
<head>
...
<link href="filename" rel="stylesheet">
...
</head>

● 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;
} template

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

● A CSS file consists of one or more rules


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

You might also like