HTML Flashcards
• Where do you put non-visible content about the HTML document?
nested within the head element
this is not visible
This is where metadata is stored
• Where do you put visible content about the HTML document?
Within the body element
….
• Where do the
and tags go in a valid HTML document?
<
begins before the body and after the html element
body happens after the losing tag of the element
…
- What is the purpose of a declaration?
The DOCTYPE declaration is an instruction to the web browser about what version of HTML the page is written in. This ensures that the webpage is parsed the same way by different web browsers
Is an HTML list a block element or an inline element?
Block element
What is the difference between an ordered list and an unordered list in HTML?
- Ordered list uses numbers, unordered makes a list with data, usually bullet points
List 5 html elements
html, p, body, h1, img
Give an example of an HTML entity (escape character)
ampersand (&) with &
How do block-level elements affect the document flow?
A Block-level element occupies the entire horizontal space of its parent element (container), and vertical space equal to the height of its contents, thereby creating a “block”.
What is a relative URL?
A relative URL is a URL that only includes the path. The path is everything that comes after the domain, including the directory and slug. Because relative URLs don’t include the entire URL structure, it is assumed that when linking a relative URL, it uses the same protocol, subdomain and domain as the page it’s on.
What is an absolute URL
includes full link to website
What HTML tag is used to link to another website
an anchor tag
What is the purpose of an HTML attribute?
HTML attributes can be used to change the color, size, and other features of HTML elements. For example, you can use an attribute to change the color or size of a font for a text element or the width and height for an image element.
name - value
Escape Characters
There are some characters that are used in and reserved by HTML code. (For example, the left and right angled brackets.)
For example, to write a left angled bracket, you can use either < or <. For an ampersand, you can use either & or &.
How do you indicate the relative link to a parent directory?
../filename
How do you indicate the relative link to a child directory?
example/index.html
- How do you indicate the relative link to a grand parent directory?
../../
How do you indicate the relative link to the same directory?
- state name of file you’re looking for ./.
What is the purpose of an HTML form element?
- To collect data from users – group up form control elements, to send over to server – encapsulate all form control elements
Give five examples of form control elements.
Checkboxes, drop down, option, select, text input, password, file upload, text area
Give three examples of type attribute values for HTML elements.
- – date, image, file, submit, text,radio
Is an HTML element a block element or an inline element?
Inline
Span
default inline
div
default block
Attribute
name -> value
What are the six primary HTML elements for creating tables?
- Table tr td th tbody thead tfoot
What purpose do the thead and tbody elements serve?
The HTML element defines a set of rows defining the head of the columns of the table.
- The HTML element encapsulates a set of table rows (elements), indicating that they comprise the body of the table ().*
Tr
start of row
td
start of cell
td col span
tr col span
The colspan attribute can be used on a
or element and indicates how many columns that cell should run across
td rowspan
The rowspan attribute can be used on a
or element to indicate how many rows a cell should span down the table.
Everything about Tables
All excape characters
Selector and Declaration
Where do you put the label?
AboVE or to thE lEFt:
● Text inputs ● Text areas
● Select boxes ● File uploads
to thE rIGht:
● Individual checkboxes ● Individual radio buttons
How do make a dead-link?
Sometimes you want to add a elements to your website before you know where they will link.
This is also handy when you’re changing the behavior of a link using JavaScript
How do you create an internal link?
How do you make a site open in a new tab?
How to build a web form?
You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an action attribute on your form element.
For example:
radio buttons
All related radio buttons should have the same name attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
3 ways:
Indoor
Indoor
Indoor
Meta tag, what goes in?
Metadata elements, such as link, meta, title, and style, typically go inside the head element.
Example title
negative margin
An element’s margin controls the amount of space between an element’s border and surrounding elements.
If you set an element’s margin to a negative value, the element will grow larger.
Try to set the margin to a negative value like the one for the red box.
Change the margin of the blue box to -15px, so it fills the entire horizontal width of the yellow box around it.
sizing fonts etc
The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, in and mm refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen’s resolution.
Relative units, such as em or rem, are relative to another length value. For example, em is based on the size of an element’s font. If you use it to set the font-size property itself, it’s relative to the parent’s font-size.
!important
In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use !important.
Let’s go all the way back to our pink-text class declaration. Remember that our pink-text class was overridden by subsequent class declarations, id declarations, and inline styles.
Let’s add the keyword !important to your pink-text element’s color declaration to make 100% sure that your h1 element will be pink.
An example of how to do this is:
color: red !important;
figure element, fig caption
<figure>
<img src=”pic_trulli.jpg” alt=”Trulli” style=”width:100%”>
<figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
placed under img, does not effect document flow
Action Attribute –
The action attribute indicates where form data should be sent. For example,
tells the browser that the form data should be sent to the path /submit-url.
Action Attribute –
The action attribute indicates where form data should be sent. For example,
tells the browser that the form data should be sent to the path /submit-url.
name attribute
In order for a form’s data to be accessed by the location specified in the action attribute, you must give the text field a name attribute and assign it a value to represent the data being submitted. For example, you could use the following syntax for an email address text field: .
fieldset
The fieldset element is used to group related inputs and labels together in a web form. fieldset elements are block-level elements, meaning that they appear on a new line.
legend
The legend element acts as a caption for the content in the fieldset element. It gives users context about what they should enter into that part of the form.
article elements commonly contain multiple elements that have related information.
<article>
<p>French Vanillap>
<p>3.00p>
article>
<article>
<p>Caramel Macchiatop>
<p>3.50p>
article>
How to make everything inside a div appear next to each other,
instead of:
The p elements are nested in an article element with the class attribute of item. You can style all the p elements nested anywhere in elements with a class named item like this:
.item p { }
Using the above selector, add a display property with value inline-block so the p elements behave more like inline elements.
a:visited
Step 81
You change properties of a link when the link has actually been visited by using a pseudo-selector that looks like a:visited { propertyName: propertyValue; }.
Change the color of the footer Visit our website link to be grey when a user has visited the link.
Submit and go to next challenge
a:active
a:active
add
What does UTF-8 mean?
To tell browsers how to encode characters on your page, set the charset to utf-8. utf-8 is a universal character set that includes almost every character from all human languages.
How to make sure, there is no horizontal scroll bar with a body of 100%
Now, get rid of the horizontal scroll-bar, by setting the body default margin added by some browsers to 0.
DIRECT DESCENDENT
DIV > A
means the first child that is a direct descendent, so it could be the last thing in a whole list that is a direct child
h1 + p
first p after an h1
