HTML

Question 1

Doctype

Answer 1

Information about the document for the browser

Question 2

Two Parts of HTML Skeleton

Answer 2

Head - brower info and metadata

Body - the content that will be displayed online

Question 3

Accessibility

Answer 3

Including practice ensuring there are no access barriers to those with disabilities or restrictions.

Question 4

CDN

Answer 4

Content Delivery Nietwork - provides service with high availability and performance to users

Question 5

Local Resource

Answer 5

an asseet that your webpage depends on thast is stored on your local machine

Question 6

Navbar

Answer 6

Navigation bar often at the top of website

Often made using unordered lists

Question 7

Remote resource

Answer 7

an asset that your webpage depends on that is stored on a remote machine - often just on the internet

Question 8

Tag attributes

Answer 8

Characteristics or properties of elements such as width, height of an image.

Question 9

3 elements of a table

Answer 9

Header (thead)
kind of like a table- bolded and centered
Body (tbody)
tr is used to define each row of the table
td is used to fill in the table
each tr defines a new row
Footer (tfoot)
it’s a footer. it looks weird without CSS - slides talk abot using (colspan) to merge cells

Question 10

Block vs. Inline

Answer 10

div - block element
always starts on a new line, takes up whole
width of parent, repects padding and margins
span - inline element
continues on the same line, doesn’t repect
padding and margins

use “display: inline-block” to get the best of both worlds

Question 11

Adding audio or video to HTML

Answer 11

replace ( with < in your code.

(audio controls)
(source src=”” type=”audio/mp3”)
(/audio)

You can place as many different types of file as you want. The browser will choose one that works.

You can also use “autoplay loop instead of controls

replace “audio” with “video” for video files

Question 12

iframes

Answer 12

Embedding content that has iframe links - i.e. YouTube videos.

When clicking “share” on youtube, select embed and copy and paste link into your code

iframes are not the SAFEST way to embed things to your site!

Question 13

Subtitles and closed captioning

Answer 13

link WebVTT files for subtitles

replace ( with < in your code
 (video controls)
   (source src="")
   (track
       src=".vtt"
       kind="subtitles"
       srclang="en"
       lable="English"
    )
 (/video)

in the WebVTT file you can add timestamps

00:00:00.000 –> 00:00:02.500
This is the text that will show up during this time
00:00:02.500 –> 00:00:05.500
This is the next bit of text. You should try to only show two lines of text at once if you can. Three is okay, but don’t overdo it.

Question 14

When to use subtitles?

Answer 14

Pretty much always!!! US accessibility laws almost always require them.

Question 15

What are forms?

Answer 15

Forms collect information from usersx

Question 16

Input tags

Answer 16

Use input tags in your HTML so the form knows what kind of content is acceptable i.e.

replace ( with < in your code

(form)
Your Name:
(input type=”text”)
(/form)

Question 17

Action and Method

Answer 17

Action: where a form sends data
Method: GET or POST
GET passes data in the URL, there are size
restriction, requests data
POST is for adding or modifying data, does
not appear in URL, no size restrictions

Question 18

Submit Buttons

Answer 18

“submit” can be used as an input type to create a submit button that sends the users posted data

replace ( with < in your code

(form method="GET" action="result.html")
  (div)
      YOUR NAME:
      (input type="text" value="name")
  (/div)
 (input type="submit" value="make your choice")
(/form)

Question 19

Radio Buttons

Answer 19

Like multiple choice bubbles! But you can only select one

replace ( with < in your code

(form method="GET" action="result.html")
  (div)
      (label)Coke(/lablel)
      (input type="radio" value="coke" 
      name="soda")
  (/div)
  (div)
      (label)Pepsi(/lablel)
      (input type="radio" value="pepsi" 
      name="soda")
  (/div)
 (input type="submit" value="make your choice")
(/form)

Question 20

Checkboxes

Answer 20

Like multiple choice bubbles but you can choose as many options as you want!

replace ( with < in your code

(form method="GET" action="result.html")
  (div)
      (label)Coke(/lablel)
      (input type="checkbox" value="coke" 
      name="soda")
  (/div)
  (div)
      (label)Pepsi(/lablel)
      (input type="checkbox" value="pepsi" 
      name="soda")
  (/div)
  (div)
       (label)Mt Dew(/lablel)
       (input type="checkbox" value="dew" 
       name="soda")
  (/div)
 (input type="submit" value="make your choice")
(/form)

Question 21

Dropdown Lists

Answer 21

Creates a clickable down arrow that brings up a list of choices for the user. User can choose one

replace ( with < in your code

(form method="GET" action="results.html")
    (select name="state")
        (option value=AK)Alaska(/option)
    (/select)
    (input type="submit" value="submit")
(/form)

Question 22

Why labels?

Answer 22

Labels help screen readers understand how to prompt the user. Add labels to connect the input ids to attributes

Question 23

Boolean Attributes

Answer 23

some examples are “readonly” and “required”

Boolean Attributes are like an OFF and ON switch

Question 24

Semantic Input Types

Answer 24

some examples are “number” “date” “time” “email” “url” or “tel”

These tell the computer what kind of response you’re expecting. Like if you use “email” it won’t let the user submit the form without a properly formated email which includes the @ symbol and some sort of .com, .net, etc.

Question 25

Length Contraints, Minimums, and Maximums

Answer 25

You can add perameters to how you want the form formatted by using the following:

These will require the user to input between 5 and 20 characters
minlength=”5”
maxlength=”20”

or

This will require the user to input a number between 5 and 20
min=”5”
max=”20”

Question 26

Pattern Attribute

Answer 26

pattern=”{a-z}{5}”

This would require the user to input a 5 letter lowercase word

Question 27

Query String

Answer 27

The part of a GET request that is in the URL. comes after “?”

Question 28

WCAG and W3C

Answer 28

Web Content Accessibility Guidelines
World Wide Web Consortium

the first one is the gold standard of web accessibility right now - we are currently in version 2.1

Question 29

WCAG Grading system

Answer 29

A - minimul level
AA- standard
AAA- exceptional!

There are 23 criteria to meet to achieve AA - 50 to acheive AAA (including the 23 above)

Question 30

Alt Text

Answer 30

Descriptive text for screen readers (also good in case the link breaks and no image appears)

Question 31

Identifiable Link Text

Answer 31

avoid “click here” and use more specific terms like “see the full recipe here” so it’s easier for users to understand where they are being directed and they know it’s an intentional link

Question 32

ARIA

Answer 32

Accessible Rich Internet Applications - adds attributes to HTML elements to help identify their purpose

replace ( with < in your code

(div role="tablist")
    (button role="tab" id="one")
        TAB ONE
    (/button)
    (button role="tab" id="two")
        TAB TWO
    (/button)
(/div)
(div role="tabpanel"
    aria-labelledby="one")
    CONTENT OF TAB ONE
(/div)
(div role="tabpanel"
    aria-labelledby="two")
    CONTENT OF TAB TWO
(/div)