Section 1
Preview this deck
How do you add a link to your email with a predetermined subject line?
Front
| 5 | 0 | ||
| 4 | 0 | ||
| 3 | 0 | ||
| 2 | 0 | ||
| 1 | 0 |
Active users
0
All-time users
0
Favorites
0
Last updated
6 years ago
Date created
Mar 1, 2020
Cards (58)
Section 1
(50 cards)
How do you add a link to your email with a predetermined subject line?
<a href="mailto:acosta816@gmail.com?subject=Link Here, Link There">
Is HTML a logical programming language? Why or Why not?
No, you cannot write logical statements with HTML . It is a Mark up language and is used to mark up content so web browsers know what kinds of content they're dealing with.
The alt attribute
used to define alternative text describing the image. If the image can't be loaded for some reason, users will see the alternative text displayed in its place. Even more importantly, the alt text is read aloud by screen readers, which makes your images accessible to visually impaired users.
inline element
*only takes up as much width as necessary, and does not force line breaks *can't explicitly set the width, height, margin, or padding of an inline element; instead, its dimensions are determined by how much space its contents require. However, the text in an inline element can be set to a large or smaller font-size or different color, and it will be different than the text around it. *DOES tolerate other elements on the same line.
How do developers maintain consistency in their content's appearance/styling across different browsers?
They use CSS resets to zero out browser default CSS stylings.
How do we calculate the box model for an element?
Add width, plus 2x padding, plus 2x border, plus 2x margin.
<title> tag
This tag identifies the document title. Most browsers will display the title in the browse's title bar. The <title> tag is placed within the <head> container tags. *(Extra: Web crawlers also look to this element to help classify web pages, so it plays an important part in SEO.)
What does * { box-sizing: border-box; } do? What are its advantages?
It makes sure that the width, border, padding, margin, all add up to the explicitly declared width we set for that element.
What do we mean when we say that HTML is about structuring content?
First, we mean that an HTML document specifies each and every one of its elements. These can be visible elements (paragraphs and images) or ones that human users never see (for instance, <meta> elements appearing in the head of the document). Second, HTML specifies the hierarchical relationship between elements in a document.
CSS (Cascading Style Sheets)
a language that can be used to style a web page via changes in colors, sizes, spacing, fonts, and more and is used to compliment HTML.
When you need to horizontally center inline elements (such as text or img) within a block element we use this CSS deceleration:
Place text-align: center directly on the parent BLOCK element and all of the inline elements within will become horizontally aligned.
display value
CSS value of an element. Can be set to display: inline, inline-block, block
What is "semantic HTML"?
When people talk about "semantic HTML", what they mean is that when you're choosing an HTML element to wrap content, you should choose the one that most clearly aligns with the meaning of your content. For instance, if you're putting a paragraph of content into the body of your HTML page, use a <p> element (and not, say, a <div>).
What is thelang attribute on the opening <html> tag?
It is a way of telling the browser what language the content is written in. More importantly however, it tells the screen reader what language it is in. This way the screen reader pronounces the words appropriately. code example: <HTML lang="en">
<body> tag
This tag begins the body of the document and includes all the displayable content of the Web page, such as the text, video, hyperlinks and images and some non-displayable elements as well. The <body> tag is placed after the <head> tag.
heading elements (H1.....H6)
used to establish information hierarchy. (Although these elements are often styled so that h1s are bigger than h2s are bigger than h3s etc., their main role is to indicate the relative importance of different content in the page.)
position: fixed
When an element's position is set to fixed, it will stay in place even when the user scrolls; this is a good approach for stick nav bars/ banners that you want to remain on top of the screen. Fixed elements are taken out of the normal flow, and other elements will position themselves as if the fixed element does not exist. Similar to Photoshop's layers, the sticky/fixed element will appear atop other material.
What CSS hack is used to remove white-space between inline elements?
font-size: 0; (setting font-size to 0 on the parent of a set of inline block elements removes white space between them.)
Whenever you need to horizontally center a block-level content within some parent element, this technique is your friend:
Place margin-left: auto; margin-right: auto directly onto the block you want to center.
How do you add comments to an HTML document?
<!-- this is an example of an html comment -->
HTML elements existing on the same hierarchical level are referred to as __________ to one another.
siblings
HTML tags
used to mark off the beginning and end of an element. Both opening and closing tags consist of angle brackets and the tag name (< ... >), with closing tags distinguished by a forward slash (</ ...>).
normal flow
Displays the elements on the page in the order they appear in the HTML markup, one on top of another, starting from the top left corner of the document, and inline elements stretch as wide as their inside content (usually text).
<HTML> </HTML> Tag
We say that the HTML element is the root element and all other elements are children of this element, meaning they're contained within the HTML tags.
what are ARIA roles?
They tell the browser and Assistive technologies what the content's purpose is by explicitly assigning these roles to sectioning elements such as the header. code example: <header role="banner"> or <nav role="navigation">
Are heading elements (h1-h6) used for their differing text sizes?
No, they are used to describe importance of information and hierarchy. CSS is used to change font/text size.
The convention with HTML is to indent your code one tab for each level deep in the hierarchy. true or false?
True
block-level element
*It gets displayed on a new line (and takes up the whole available line) *may contain additional block-level or inline elements its height and width can* be explicitly set. *Can override blocks from taking all the space of parent block by setting width or max-width of inner block.
position property
A CSS property of an element that determines the flow of the element on the page. By default an element's property is static but can be changed to... absolute, fixed, or relative.
Who benefits from semantic HTML?
It help browsers, web-crawlers (SEO), screen readers (visually impaired), and project collaborators to better understand our content.
position: relative
A mix of fixed and static. It is still in normal flow but we can also add offsets! The HTML element will be set to some position relative to where it would normally be positioned. It is still in normal flow, so elements that come after it dont just "move in" to fill in the gap and appear under it like Photoshop's layrs. Also it is positioned relative to the html structure/ normal flow and NOT the viewport, this means that when we add a margin to any parent of the fixed element, the fixed element is also altered.
box model
most elements on a web page are really rectangular boxes, even if they appear to be a different shape. The total space taken up by an element is determined by its width, height, padding, border, and margin
what is normalize.css?
A CSS library that normalizes a subset of browser elements to be consistent between browsers.
HTML Attribute
Attributes are for setting properties on an HTML element and consist of a name (e.g., href) and a value enclosed in quotes (e.g. <a href="https://www.somewhere.com"></a>)
Can you skip headings on a page? (For instance, an h1, then two h2s, and jump to four h5s.)
No
<!DOCTYPE html>
Strictly speaking, this is not a tag, but rather a command to the browser to parse the page as HTML5
"Inline-Block" Display Property
CSS setting that can be set to an element that you want to explicitly set the width, height, margin, and padding on but also want to display inline with other elements side by side
How many banner roles should there be on a page?
Just one, usually the site-wide banner
HTML element (or simply, element)
a unit of content in an HTML document formed by HTML <tags> and the text or media it contains. (HTML element usually consists of some content (could be plain text or additional HTML elements) wrapped by opening and closing tags.)
What is a meta description tag?
The meta description is an HTML attribute that provides a brief summary of a web page. Search engines such as Google often display the meta description. Code example: *<head> <meta name="description" content="This is an example of a meta description. This will often show up in search results."> </head>*
HTML (Hypertext Markup Language)
Defines the structure and links and content of a webpage.
How many h1 elements should there be per page?
One
What are the main ARIA roles you need to focus on?
<header role="banner"> for site-wide headers <nav role="navigation"> for navigation elements <main role="main"> for main elements <footer role="contentinfo"> for your site's footer
position: static
the default setting and positions elements according to the standard flow of the page
<head> and </head> tags
The head element contains metadata about the HTML document. By default, we get <title> inside the head (discussed next). There are numerous children types that can appear in the head. If you take a look at head elements out in the wild, you'll often find metadata related to SEO (search engine optimization), Facebook sharing, or definition of document-wide variables going on in document heads.
How can you guarantee cross-browser consistency for default styles?
Using a CSS reset, most popular one to use is the Meyer reset which you link in the html. or you can use the normalize.css library
offset property ( left, right, top, bottom)
The offset CSS property can be used on elements whose position has been explicitly set from static to relative, absolute, fixed. They are used to set fixed display positioning offsets to an element. (For example you may want a fixed/sticky navbar at the very top of your screen but you need it to be slightly floating from the left wall of the screen, not exactly touching it. so you set left: 10px;)
How do we make the box model respect the widths we explicitly set for an element?
We use the CSS property "box-sizing" and set its value to "border-box" code example: * { box-sizing: border-box; }
What is a browser's internal styling defaults?
determines what the structure/content we provided should look like. In the absence of custom style information (in the form of CSS), all modern browsers have default styles they will use to display HTML and they vary between browsers.
What is a "well-formed" element?
Some elements are self-closing and don't have inner content. For example, the <img> element, which is used to embed images in an HTML document, has no inner content and doesn't require a closing tag.
Section 2
(8 cards)