Unit 1 Web Development Fundamentals_HTML_&_CSS

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.

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.)

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 you add comments to an HTML document?

<!-- this is an example of an html comment -->

How do you add a link to your email with a predetermined subject line?

<a href="*mailto:*[email protected]*?subject=*Link Here, Link There">

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

what is normalize.css?

A CSS library that normalizes a subset of browser elements to be consistent between browsers.

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.

Media queries

A CSS3 feature that detects the user's type of screen and sizes the output accordingly

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.

position: absolute

A mix of relative and fixed traits. Like fixed, absolute-positioned elements are *out of normal flow* and are ignored by other elements. Its on a different layer like Photoshop. Absolute can also use offsets like left 10px and top 10px but it's offset is relative to the first parent element with a non-static position, if none are found, the origin point is the html or root element.

How do we calculate the box model for an element?

Add width, plus 2x padding, plus 2x border, plus 2x margin.

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>)

"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

display value

CSS value of an element. Can be set to display: inline, inline-block, block

HTML (Hypertext Markup Language)

Defines the structure and links and content of a webpage.

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).

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.

Who benefits from semantic HTML?

It help browsers, web-crawlers (SEO), screen readers (visually impaired), and project collaborators to better understand our content.

What is the*lang* 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"*>

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.

How many banner roles should there be on a page?

Just one, usually the site-wide banner

Can you skip headings on a page? (For instance, an h1, then two h2s, and jump to four h5s.)

No

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.

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.

*width* vs *max-width* when setting image size

Notice that width:50% will resize it to 50% of the available space for the image, while max-width:50% will resize the image to 50% of its natural size. This is very important to take into account when using this rules for mobile web design, so for mobile web design max-width should always be used.

How many h1 elements should there be per page?

One

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.

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.

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.

<!DOCTYPE html>

Strictly speaking, this is not a tag, but rather a command to the browser to parse the page as HTML5

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;*)

<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.

Mobile-first means

The idea is that if we can make our content work first within the small confines of a mobile screen, it is fundamentally working. Site has "good bones". (also means respecting limited bandwidth. 2000px wide image that will just be scaled down by the browser anyways.)

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>*

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"*>

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.

<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.

<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.)

The convention with HTML is to indent your code one tab for each level deep in the hierarchy. true or false?

True

clear property(clear:right/left)

Used to clear the horizontal space to the right or left of an element by shifting any prior floating elements back up to the previous line. (floated elements are ignored by other elements since its taken out of normal flow like a Photoshop layer) Put this clear property on the un-floated element. NOTE: its best to just put display:inline-block on the element you want to clear instead of using float. Only use float for wrapping text around an element.

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

<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.

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; }

Why would we use position: absolute when position: relative can also use offsets for precise positioning?

Well the truth is that position:relative is still in the normal flow(same Photoshop layer) as all other elements surrounding it so even if you use offsets there is going to be a big empty space where the element should have been before it was offset. This is where absolute has an advantage. It doesn't leave an empty space because its on a separate layer just like fixed (except we can't use fixed because fixed is locked to the scroller). Position:absolute allows full control because you can place it anywhere on a page even over other elements without shoving those elements out of place(you'll just be covering them up if the floating element isn't see-through). The thing is, position relative is actually used as an anchor point for floating elements that have a position of absolute. Ideally you'll always be using absolute along side with an anchor (parent element with position:relative).

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 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>).

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.

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 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.

How does one scale/resize an image whilst keeping its aspect ratio/proportion

img { max-width:50%; /*(can also use px)*/ height:auto; }

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

HTML elements existing on the same hierarchical level are referred to as __________ to one another.

siblings

position: static

the default setting and positions elements according to the standard flow of the page

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.

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.)

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 (</ ...>).

float property (float:left/right)

used to position boxes on the page and to wrap content, such as text, around a box. Floated elements will continue to stack horizontally until the parent container is out of room. They will then spill onto the next horizontal line underneath. This is very useful for responsive grids. NOTE: floated elements are taken *out of normal flow* !!!NOTE: its best to just put display:inline-block on the element you want to clear instead of using float. Only use float for wrapping text around an element.