Design Accessible Web Sites
Make a copy of this presentation and put in your Google drive IT folder.
teAch IT and CS Curriculum by debmh.teach is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
Web Design Course
Go to the Design Accessible Websites with HTML and CSS course. Read the Getting Started goals and watch the Course Set Up Video.
Let’s begin learning about the World Wide Web (WWW).
Activity 1.1 Activity
The Internet is fill in
A network is fill in
The world wide web is made up of web servers that are fill in
A web address is used to fill in
A web browser is used to turn the code on a website into fill in
The world wide web is fill in
Who owns the world wide web? fill in
A hyperlink is used to fill in
List two web browsers and find an image for each. fill in names of web browsers and images
How do you know if the website is secure? fill in
2.1 HTML: Elements and Tags
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Elements
Displayed on web page in browser
Watch 2.1 Video and fill in.
HTML is used to add fill in to your web pages. HTML stands for fill in
Different HTML structures you can use are fill in. See if you can find these on different webpages.
To let the computer know what part of the text is a paragraph and what part is the title you use
Fill in
Most elements are made up of three main parts: Fill in
Fill in
Fill in
Fill in
Fill in
2.2 HTML: Headings, Paragraphs and Links
Read w3schools HTML Basic Examples answer the following:
All HTML documents must start with a document type declaration: fill in
The HTML document begins with fill in and ends with fill in
The visible part of the HTML document is between fill in and fill in
Next click to to see how to change the heading and paragraph as shown below.
1. Change what is inside of heading 1 and paragraph tags.
2. Click Run.
3. See the results.
2.2 HTML: Links and Attributes
Click to to see how to create a hyperlink on a website.
Watch the video in Activity 2.2. Read w3schools HTML Attributes and answer the following.
HTML links are defined with the Fill in tag. The link Fill in is specified in the Fill in attribute:
Code Club
Displayed in browser
Href is the attribute
Hyperlink closing tag
Hyperlink opening tag
The web address is the value
HTML Code
2.2 Practice HTML
Watch the video in Activity 2.2. Go to w3schools HTML Examples. Explore the HTML tags. Change the heading 2, paragraph and link to go to piskel as shown below.
Test Result
2. Click Run
1. Edit HTML tags and attributes
3.1 CSS: Selector Property, Value
Watch the video in Activity 3.1 and answer the following.
How is the style of a web page different from structure? fill in
Explain the CSS rule below.
CSS code is used to style how the web page paragraphs, headings, and links look. Explore how you can change the color and alignment of a paragraph with CSS styles.
p is called the fill in . This is used to fill in
The fill in and fill in are used to show where the rule starts and where it ends.
color is called a fill in . This is just one of many fill in we can change.
Purple is called the fill in
The fill in is used to separate the property and value
The fill in is used to show the end of the rule.
3.2 Colors: RGB and Hexadecimal
Pixels are little lights that are fill in and fill in.
Resolution is the way you can measure how many fill in are on a fill in.
Store the values of pixels in a file using fill in, fill in and fill in triplets. The values can range from fill in to fill in. fill in would be very dark and fill in would be very bright. These triplets make a single pixel.
Image files such as fill in, fill in and fill in contains millions of these fill in. A computer stores this data in fill in. A bit has two states: fill in or fill in. Computers use fill in and fill in which is called binary.
Rather than using RGB in binary, many use fill in to represent colors.
Then explore different colors using RGB sliders. Find your favorite color and write the RGB value and the hexadecimal: fill in RGB and fill in hexadecimal
3.2 Practice styling a web page
Explore CSS to style HTML tags. You can use the hex color codes instead of using the name. This gives you more color options.
Go to w3schools CSS Tutorial. Explore changing background-color, color, text-align, font-family and font-size.
3. See Result
2. Click Run
1. Edit CSS styles and HTML tags
Advanced: Here is a video explaining how RGB is converted to hex codes. (youtube)
Try using hex codes for color
Activity 3.3: Build a practice web page using CSS and HTML
HTML and CSS practice: Make a web page about something you like to do.
1. Update the heading, and paragraph.
2. Try copying and pasting the html link element to go to another website.
3. Change the colors of the background and heading using the color picker hex codes.
Challenge:
1. Add a heading 2 and another paragraph.
2. Change the color of the paragraph text.
3. Change the color of your link. (Hint: add a CSS rule for the a tag.
FILL IN YOUR HTML CSS CODE YOU CREATED
Learn how to create your own website to update the HTML, CSS and add an image logo.
1. Go to Glitch to Sign in with Google
3. Click View Source to open the template
2. Close Glitch then Open stem-maker-web-template
4. Click dropdown
5. Make a copy by clicking remix project
8. Click to rename but do not use personal information
9. Click to make your project private so you don’t share it with everyone.
2. Copy address to invite me to edit.
Close Glitch and then open Glitch to find your project. You should find the name of your project. Click edit project to open it. Go to next slide to start editing.
3. Paste shared link: FILL IN LINK
The index.html is the home page that the browser automatically loads. Do not rename this file. style.css is where you will put your styles. The location of style.css is in the <head> element of the index.html file.
Do not share personal information on your website.
4.1 Activity Show your Changes
Open your Glitch website. Explore editing index.html and css.style Make changes and put a screenshot of what changes you made. This is just practice so do not worry about building exactly what you want YET! You will plan your website soon.
What is your definition of a maker? Fill in
How is failure a part of being a maker? Fill in
What did you learn from Robert Rodriguez Fill in
Decide what you want to make your website about. This must be approved by Deb before you start building it.
What is the topic for your web site? FILL IN
What is the purpose of your website? FILL IN
Who are you building this web site for? FILL IN
Watch What is a Maker? (Google Video)
Robert Rodriguez, Filmmaker and Director of Spy Kids and Alita: Battle Angel talks about his secrets to living a creative life.
You can use GIMP, google drawing, piskel, online logo maker, draw your own on paper or other editing tools of your choice to make your web site logo that will go at the top of every page.
What tool did you use to make your logo? Fill in
Which File Format Should You Export/Save your Image as? PNG, JPG or GIF
What file format did save your logo as and why? Fill in
Learn about the image element
Learn what makes a website accessible for all abilities, pick a color scheme and add more content.
Web Accessibility: Access for all people, including people with disabilities, to web environments.
Watch Introduction to Web Accessibility and W3C Standards and answer the following.
Accessibility means people with disabilities can use the Web fill in for example someone that can’t hear well uses fill in and someone who cannot see well uses a fill in
Accessibility has many benefits. For example fill in benefit anyone in a loud or in a quiet environment. Good color fill in works better when there is a glare.
A lot of accessibility can be built in the code of websites. For example, provide text alternatives for fill in which are read aloud by screen readers.
Perceivable - make content so people can fill in and fill in
Operable - people can use the computer by fill in or fill in
Understandable - people get fill in or fill in language
About fill in% of the population has a disability. Web accessibility is important because fill in your own words
Go to Dos and don'ts on designing for accessibility and scroll down to What the posters say. For each pick one you can add to your website.
Designing for users | Do |
autistic spectrum | fill in |
screen readers | fill in |
low vision | fill in |
physical or motor disabilities | fill in |
deaf or hard of hearing | fill in |
dyslexia | fill in |
Copy and paste the colors below
Use the Color Contrast Checker to check if your text color and background color have enough contrast.
Take a screenshot of your contrast ratio results and paste here
#F3F7D4
#CBE432
#AE0D7A
#B81484
#340926
Take a screenshot of the color theme and paste here.
Find a color scheme for your website.
Start changing the colors of your website in your style.css file.
Learn how to comment your CSS
Comments are used to fill in
Comments are fill in by browsers.
A CSS comment starts with fill in and ends with fill in
Go to your css code and add comments for the colors you used. You can see my CSS comments
fill in screenshot of CSS comments
Edit your homepage (index.html) by creating headings, paragraphs, links and images. Copy and paste the code and update it for your web page.
Go to w3schools Block Elements to learn about the div element.
The <div> element is often used as a fill in for other HTML elements.
Go to w3schools CSS #id Selector to learn about the id selector. The fill in selector styles the element with the specified fill in attribute.
Design a sticker on your homepage and learn about CSS gradients, padding, border-radius. Add the code to your index.html and style.css files.
You can create an image in piskel if you want to put on your homepage.
Review how to create alternate text attribute for an image in HTML. Update your images by adding the alt attribute.
You should include alternative text on images because fill in
Read about how to put comments in your HTML.
Comments are not fill in by the browser, but they can help document your HTML source code.
Here is an example of an HTML comment:[fill in]
You can use comments to:
Then put a comment above the image element explaining why it is important to use the alt attribute.
[fill in screenshot of HTML comment]
Learn how to add more pages and a menu to navigate your website.
Add an about-me.html page and a credits.html page in glitch.
Many websites have a navigation menu to help visitors move between pages.
Make links so that you can get to each of your new pages! Let’s put all the links in a list.
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="FILL IN NAME OF FILE">FILL IN LINK TEXT</a></li>
<li><a href="FILL IN NAME OF FILE">FILL IN LINK TEXT</a></li>
</ul>
</nav>
In the index.html file look for the comments after the logo to put your navigation links. Copy an paste the code from above into your index.html. Test your code to see if the links work..
Change the value of the href attribute for each link (remember, that’s the text inside the quotation marks) so that it exactly matches the name of each HTML file that you have created.
Change the text in between the <a> </a> tags to suitable descriptions of your pages.
Copy your html code inside your index.html and paste it in your about-me.html and credits.html files. Change the heading 1 of the new pages to be About Me and Credits. Test to see if your links work to your new pages.
Follow step to add CSS rules to make a menu bar. Remember to look at your color scheme.
The code below is selecting the ul (unordered list) if it is inside the nav tags and styling the background color.
nav ul {
background-color:#FE2712;
}
Learn how to add more style to your menu bar.
Learn how to use media such as images, video, or music created by others in a website while respecting the rights of the creator.
7.1 Video: Copyright and Creative Commons
Read about Copyright and Creative Commons (google video)
Copyright (Big C) means fill in and fill in .
In 1980 laws were changed so that works become fill in.
The only way you can use some else’s work is if you fill in
Creative commons wanted to find an easy way to allow people to use fill in
Creative commons CC means some fill in
So using the CC you can find works fill in and you can invite other people to use fill in
That means the website you just created is already fill in. Soon you will be able to decide how to share your work. Below is how I share my work.
All Rights Reserved
Some Rights Reserved
teAch IT and CS Curriculum by debmh.teach is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
1. Search Google and select images
3. Scroll to usage rights and select free to use or share
2. Select Advanced Search
4. Click
Search Google for image free to use or share
Search Creative Commons for Images that you can modify and adapt.
Here is my about me page. Plan your about me page. Write paragraphs, include images, links to other website, embed a map, youtube video , playlists or sports widget. Use your photos, make your own images or Search for images free to use and share and learn about styling your images. Keep a list of credits (attributions) for the resources you use to make your website. Make a draft for your about me page below.
Your superhero and why: fill in
Your strengths and motivations: fill in
What you do for self care to deal with stress: fill in
You can add more to your about me page. Maype share a map showing where you want to go visit.
You might want to write your information in a google document so you can check your spelling and grammar.
Make sure you have permission before using someone else's work. Attribution means to give credit for someone else’s work you use.
1. On your credits page add Attribution to your heading 1. Then add a paragraph to explain what attribution is.
2. Create list of links. You can also use w3school to practice creating a list and links. Then put your list of links on your credits page. For example:
This website was created using
Put links to resources you used to help you build your website such as resources from w3 schools
Use your answers from the What is web accessibility? to update your homepage (index.html) web accessibility information.
Look at ways to make your website accessible. Update your website to have at least 3 ways you are making your website accessible. List them below.
This website has been designed to be accessible for the following people:
Learn how to create a list. Here are resources from w3schools to make a list. Now add this information to your homepage (index.html)
7.2 Advanced: Share Your Work
Explore Creative Commons Licensing.
Learn more about the different types of creative commons licenses.
This license means fill in
Go to creative commons to create a license to share your work.
Paste the HTML code for your license: Fill in HTML Licence Code
Add a div tag to make your footer. Put your license in the footer on yourthree pages.
Brainstorm what page you want to add next to your website. Here are some project ideas you can create:
Describe the page you want to add to your website: FILL IN
Put the links to the resources such as images, sound, and help to code you use and remember to update your credits page: FILL IN
Add another web page to your website. As you build it fill in problems you have and how your fix them.
Problem | How you fixed it and if anyone helped you |
FILL IN | FILL IN |
FILL IN | FILL IN |
FILL IN | FILL IN |
FILL IN | FILL IN |
Ask at least two people to give you a glow and grow for your website
Name of person | Glow: What did you like best about the web page? | Grow: What can be improved? |
| | |
| | |
| | |
List 1 or more changes you will make to improve your website based on your feedback.
Update your website with these improvements.
Learn about file compression.
File Compression is Fill in.
Go to tools to download your project and move to Google Drive.
Why should you backup your website? Fill in
Why do you think the website is compressed when you download it from Glitch? Fill in
Click on tools at bottom left then click download Project.
Move to Google Drive folder
Make a screen recording explaining how you created your website. You can create notes for your recording. Include the following in your recording:
Make a copy and fill in your script. Use screencastify to create your recording. Name it web design and put screen recording in your web design folder.
Put link to your screen recording: