HTML Basics

Question 1

What’s an ID? how often can it be used?

Answer 1

ID = way to mark a code in HTML for CSS. Only one ID value per document.

Question 2

What’s a class? How often can you use it?

Answer 2

Way to mark an element in HTML for CSS. Can be used multiple times.

Question 3

ID vs class?

Answer 3

ID value = x1 use

Class value = x many many times. Good for grouping.

Question 4

What is the lowest specificity weight? How much?

Answer 4

Tags are only one point

Question 5

Which thing in HTML has the highest specificity weight? How much?

Answer 5

An inline style = 1000pts

Question 6

Rank the following in specificity points: how many each?

ID, class, tags

Answer 6

ID = 100 points
Class = 10 points
Tags = 1

Question 7

What examples of inline styles worth 1000 specificity points?

Answer 7

!important (bang important)

Question 8

What’s a bang important? How and where to write it?

Answer 8

Bang important = most important code in your sheet for CSS.

Write in VSS declaration after value:
Color: red !important;

Question 9

When’s the only time you should bang important?

Answer 9

Right before a deadline to string quick CSS together.

Question 10

What’s an element? Give an example code.

Answer 10

Element = name of your structure. Ex. A, p, div

Question 11

What are tags?

Answer 11

Carrots/ brackets + element

Question 12

What are HTML attributes? Where do they go? Write example.

Answer 12

Gives more information to an element.
Go inside OPENING tag.
Ex. <a>click here</a>

Question 13

What are all important structures in an HTML document. (From start to finish)

Answer 13

!DOCTYPE html
Html
Head
Body
/html

Question 14

What part of an HTML document tells us what version of the HTML it is? Where does it go?

Answer 14

The document type declaration or doc type, “!DOCTYPE html” goes @ top first.

Question 15

What are semantics

Answer 15

Meaning/purpose behind an HTML content

Question 16

What 2 elements in HTML have NO semantic value (only for styling purposes)

Answer 16

DIVs and Spans

Question 17

Block vs inline elements

Answer 17

Block start on their own line and stack on each other. For bigger content.
Inline start at next space in a content line. For smaller content.

Question 18

Can Block elements wrap inline elements? What about the opposite?

Answer 18

Yes. And no.

Question 19

How to write an HTML comment?

Answer 19

<!—content—>

Question 20

Difference between strong & b element

Answer 20

Strong = strong semantic importance
B= stylistically different text

Question 21

You want to make “study” bolded and important in the following HTML. How do you write?

P< it’s really important to study every day >

Answer 21

P < its really important to < strong > study < / strong > every day < / P > < / strong >

Question 22

What 2 elements to italicize text in HTML? How are they different?

Answer 22

< em > = stressed emphasis

< i > = alternative voice or tone * good for quotes

Question 23

You want to group some content at the TOP of your webpage. What structure element to use?

Answer 23

Header

Question 24

You want to group some content at the BOTTOM of your webpage. What structure element to use?

Answer 24

Footer

Question 25

Header vs head vs h1

Answer 25

``` Header = content at top of page Head = meta data H1 = important content title ```

Question 26

You want to make a section for navigation links, table of contents, previous/next links… what section element to use?

Answer 26

< nav >

Question 27

What’s an article element?

Answer 27

< article > = For text that can be used independently. (Ex. Blog posts)

Question 28

what is the best content to use for < aside > elements?

Answer 28

Sidebars, notes, brief explanations, “tips” sections, inserts

Question 29

Where to find codes for special characters in HTML?

Answer 29

Copy paste character.com

Question 30

How to code a hyperlink

Answer 30

< a href= “website url” > content < / a >

Question 31

Can you make an entire block of content, a hyperlink? How?

Answer 31

Yes. Use anchor element < a >

Question 32

What are two common types of links

Answer 32

To other pages | To other websites

Question 33

Another name for href

Answer 33

A path

Question 34

What href (path) to put when linking to another page on the same website?

Answer 34

Use a RELATIVE path. Href = “file NAME of link page”

Question 35

Relative vs absolute paths (hrefs)

Answer 35

Relative = direction to file name or page Absolute = exact address

Question 36

How to create an email link in HTML

Answer 36

Href = “ mailto: davidaych@gmail.com”

Question 37

How do you program a subject into an html email hyperlink?

Answer 37

After the email hyperlink, write: ? Subject=content Spaces = %20

Question 38

How to add a body to an html email hyperlink?

Answer 38

If subject is coded, attach w/ & If no subject coded, attach to hyperlink via ? Code: body=content Space = %20 Enter= %0A

Question 39

How to code a hyperlink to open in a NEW window. Give example

Answer 39

``` Attribute = target Value = _blank ``` Ex. < a href= “website URL” target= “_blank” > content < / a >

Question 40

How do you link to different parts of the same page?

Answer 40

Put your ID in your destination Chose your hyperlink location and Put your ID in it. Ex: < a href= “# ID name” > content < / a >

Question 41

Does letter casing matter in HTML? What’s the best practice?

Answer 41

No. General practice = all lower case

Question 42

What parts comprise an element?

Answer 42

Open and closing tag + content

Question 43

What types of elements should you always include the head of your html? Describe each.

Answer 43

< meta charset= " utf-8 " > for character sets < title > for tab titles

Question 44

Why do some tags not need a closing tag? What are these called?

Answer 44

Because the tag itself is already the content (ex. An image tag). These are called self-closing tags.

Question 45

Why is it important to follow HTML rules? (3 reasons)

Answer 45

1. Better user experience (ex. Broken image link will still show image label) 2. Accessibility (ex. Screen readers) 3. SEO - search engine optimization (better result in google searches)

Question 46

What is the shortcut to creating an HTML document structure?

Answer 46

Save doc as an HTML document. At top, write HTML and click “HTML 5”

Question 47

What is the progressive enhancement concept? Why is it important?

Answer 47

Think of an Peanut M&M Core of website = content (HTML) Chocolate coating = presentation (CSS) Thin candy wrap = client-side script (JS) Not everyone has good access. Remember this model to build max accessibility for all.

Question 48

What meta data should you always include in your HTML documents? Where do you write it?

Answer 48

Character sets, description, title, links.

Question 49

How do you code character sets into your HTML? Where?

Answer 49

In the head: < meta charset = “ utf - 8 “ >

Question 50

How do you code a description for your webpage that won’t be visible to visitors?

Answer 50

In head; < meta name = “ description “ content = “ write your description “ >

Question 51

How do you code keywords into your html for search engine optimization?

Answer 51

In head: < meta name = “ keywords “ content “ word 1 , word 2, word 3… “ >

Question 52

How do you write the title for your page to show on the browser tab?

Answer 52

In head: < title >

Question 53

How and where do you set the language of your html doc?

Answer 53

In root tag (html) < html lang = “ en “ >

Question 54

What image formats are the most supported across all browsers? How are they different?

Answer 54

Gif, jpg, png ``` Jpg = best quality photos PNG = lower color/transparency. Great for icons or background patterns. ```