HTML Flashcards
Doctype
Information about the document for the browser
Two Parts of HTML Skeleton
Head - brower info and metadata
Body - the content that will be displayed online
Accessibility
Including practice ensuring there are no access barriers to those with disabilities or restrictions.
CDN
Content Delivery Nietwork - provides service with high availability and performance to users
Local Resource
an asseet that your webpage depends on thast is stored on your local machine
Navbar
Navigation bar often at the top of website
Often made using unordered lists
Remote resource
an asset that your webpage depends on that is stored on a remote machine - often just on the internet
Tag attributes
Characteristics or properties of elements such as width, height of an image.
3 elements of a table
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
Block vs. Inline
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
Adding audio or video to HTML
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
iframes
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!
Subtitles and closed captioning
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.
When to use subtitles?
Pretty much always!!! US accessibility laws almost always require them.
What are forms?
Forms collect information from usersx
Input tags
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)
Action and Method
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
Submit Buttons
“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)
Radio Buttons
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)
Checkboxes
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)
Dropdown Lists
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)
Why labels?
Labels help screen readers understand how to prompt the user. Add labels to connect the input ids to attributes
Boolean Attributes
some examples are “readonly” and “required”
Boolean Attributes are like an OFF and ON switch
Semantic Input Types
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.
Length Contraints, Minimums, and Maximums
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”
Pattern Attribute
pattern=”{a-z}{5}”
This would require the user to input a 5 letter lowercase word
Query String
The part of a GET request that is in the URL. comes after “?”
WCAG and W3C
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
WCAG Grading system
A - minimul level
AA- standard
AAA- exceptional!
There are 23 criteria to meet to achieve AA - 50 to acheive AAA (including the 23 above)
Alt Text
Descriptive text for screen readers (also good in case the link breaks and no image appears)
Identifiable Link Text
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
ARIA
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)
