FE1: Web Development Fundamentals Flashcards
Elements and Structure
< li > List Item Element
The <li> list item element create list items inside:
- Ordered lists <ol>
- Unordered lists <ul>
Elements and Structure
<video> Video Element
The <video> element embeds a media player for video playback. The src attribute will contain the URL to the video. Adding the controls attribute will display video controls in the media player.</video>
Note: The content inside the opening and closing tag is shown as a fallback in browsers that don’t support the element.
Elements and Structure
Emphasis Element
The <em> emphasis element emphasizes text and browsers will usually italicize the emphasized text by default.</em>
斜体
Elements and Structure
Attribute Name and Values
HTML attributes consist of a name and a value using the following syntax: name=”value” and can be added to the opening tag of an HTML element to configure or change the behavior of the element.
Elements and Structure
Line Break Element
The <br></br> line break element will create a line break in text and is especially useful where a division of text is required, like in a postal address. The line break element requires only an opening tag and must not have a closing tag.
Elements and Structure
Unique ID Attributes
In HTML, specific and unique id attributes can be assigned to different elements in order to differentiate between them.
When needed, the id value can be called upon by CSS and JavaScript to manipulate, format, and perform specific instructions on that element and that element only. Valid id attributes should begin with a letter and should only contain letters (a-Z), digits (0-9), hyphens (-), underscores (_), and periods (.).
Elements and Structure
HTML Attributes
HTML attributes are values added to the opening tag of an element to configure the element or change the element’s default behavior. In the provided example, we are giving the <p> (paragraph) element a unique identifier using the id attribute and changing the color of the default text using the style attribute.
Elements and Structure
alt Attribute
An <img></img> element can have alternative text via the alt attribute. The alternative text will be displayed if an image fails to render due to an incorrect URL, if the image format is not supported by the browser, if the image is blocked from being displayed, or if the image has not been received from the URL.
The text will be read aloud if screen reading software is used and helps support visually impaired users by providing a text descriptor for the image content on a webpage.
Elements and Structure
<span> Span Element</span>
The <span> element is an inline container for text and can be used to group text for styling purposes. However, as <span> is a generic container to separate pieces of text from a larger body of text, its use should be avoided if a more semantic element is available.</span></span>
Elements and Structure
<strong> Strong Element</strong>
Elements and Structure
<a> Anchor Element</a>
The <a> anchor element is used to create hyperlinks in an HTML document. The hyperlinks can point to other webpages, files on the same server, a location on the same page, or any other URL via the hyperlink reference attribute, href. The href determines the location the anchor element points to.</a>
Elements and Structure
Target Attribute
The target attribute on an <a> anchor element specifies where a hyperlink should be opened. A target value of “_blank” will tell the browser to open the hyperlink in a new tab in modern browsers, or in a new window in older browsers or if the browser has had settings changed to open hyperlinks in a new window.</a>
Elements and Structure
Link to a Different Part of the Page #
The anchor element <a> can create hyperlinks to different parts of the same HTML document using the href attribute to point to the desired location with # followed by the id of the element to link to.</a>
HTML
Comments
In HTML, comments can be added between an opening <!-- and closing -->. Content inside of comments will not be rendered by browsers, and are usually used to describe a part of code or provide other details.
Comments can span single or multiple lines.
Elements and Structure
Whitespace
Whitespace, such as line breaks, added to an HTML document between block-level elements will generally be ignored by the browser and are not added to increase spacing on the rendered HTML page. Rather, whitespace is added for organization and easier reading of the HTML document itself.
Elements and Structure
Title Element
The <title> element contains a text that defines the title of an HTML document. The title is displayed in the browser’s title bar or tab in which the HTML page is displayed. The <title> element can only be contained inside a document’s <head> element.</title></title>
Elements and Structure
Document Type Declaration
The document type declaration <!DOCTYPE html> is required as the first line of an HTML document. The doctype declaration is an instruction to the browser about what type of document to expect and which version of HTML is being used, in this case it’s HTML5.
<!DOCTYPE html>
Tables
Table Row Element
The table row element, <tr>, is used to add rows to a table before adding table data and table headings.
Tables
Table Data Element
The table data element, <td>, can be nested inside a table row element, <tr>, to add a cell of data to a table.
Tables
Table Head Element
The table head element, <thead>, defines the headings of table columns encapsulated in table rows.
Tables
rowspan Attribute
Similar to colspan, the rowspan attribute on a table header or table data element indicates how many rows that particular cell should span within the table. The rowspan value is set to 1 by default and will take any positive integer up to 65534.
Tables
Table Body Element
The table body element, <tbody>, is a semantic element that will contain all table data other than table heading and table footer content. If used, <tbody> will contain all table row <tr> elements, and indicates that <tr> elements make up the body of the table. <table> cannot have both <tbody> and <tr> as direct children.
Tables
Table Body Element
The table body element, <tbody>, is a semantic element that will contain all table data other than table heading and table footer content. If used, <tbody> will contain all table row <tr> elements, and indicates that <tr> elements make up the body of the table. <table> cannot have both <tbody> and <tr> as direct children.
Tables
Table Heading Element
The table heading element, <th>, is used to add titles to rows and columns of a table and must be enclosed in a table row element, <tr>.
Tables
colspan Attribute
The colspan attribute on a table header <th> or table data <td> element indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000.
Tables
<tfoot> Table Footer Element
</tfoot>
The table footer element, <tfoot>, uses table rows to give footer content or to summarize content at the end of a table.
Forms
<input></input>: Checkbox Type
When using an HTML input element, the type=”checkbox” attribute will render a single checkbox item. To create a group of checkboxes related to the same topic, they should all use the same name attribute. Since it’s a checkbox, multiple checkboxes can be selected for the same topic.
Forms
textarea Element
The textarea element is used when creating a text-box for multi-line input (e.g. a comment section). The element supports the rows and cols attributes which determine the height and width, respectively, of the element.
When rendered by the browser, textarea fields can be stretched/shrunk in size by the user, but the rows and cols attributes determine the initial size.
Unlike the input element, the <textarea> element has both opening and closing tags. The value of the element is the content in between these tags (much like a <p> element). The code block shows a <textarea> of size 10x30 and with a name of "comment".</textarea></textarea>
Forms
《form》 Element
The HTML <form> element is used to collect and send information to an external source.
<form> can contain various input elements. When a user submits the form, information in these input elements is passed to the source which is named in the action attribute of the form.
</form>
Forms
<input></input>: Number Type
HTML input elements can be of type number. These input fields allow the user to enter only numbers and a few special characters inside the field.
The example code block shows an input with a type of number and a name of balance. When the input field is a part of a form, the form will receive a key-value pair with the format: name: value after form submission.
Forms
<input></input> Element
The HTML <input></input> element is used to render a variety of input fields on a webpage including text fields, checkboxes, buttons, etc. <input></input> element have a type attribute that determines how it gets rendered to a page.
The example code block will create a text input field and a checkbox input field on a webpage.
Forms
<input></input>: Range Type
A slider can be created by using the type=”range” attribute on an HTML input element. The range slider will act as a selector between a minimum and a maximum value. These values are set using the min and max attributes respectively. The slider can be adjusted to move in different steps or increments using the step attribute.
The range slider is meant to act more as a visual widget to adjust between 2 values, where the relative position is important, but the precise value is not as important. An example of this can be adjusting the volume level of an application.
Forms
<select> Element</select>
The HTML <select> element can be used to create a dropdown list. A list of choices for the dropdown list can be created using one or more <option> elements. By default, only one <option> can be selected at a time.</option></option></select>
The value of the selected <select>’s name and the <option>’ s value attribute are sent as a key-value pair when the form is submitted.</option></select>
Forms
Submitting a Form
Once we have collected information in a form we can send that information somewhere else by using the action and method attribute. The action attribute tells the form to send the information. A URL is assigned that determines the recipient of the information. The method attribute tells the form what to do with that information once it’s sent. An HTTP verb is assigned to the method attribute that determines the action to be performed.
Forms
<input></input>: Text Type
HTML <input></input> elements can support text input by setting the attribute type=”text”. This renders a single row input field that users can type text inside.
The value of the <input></input>‘s name and value attribute of the element are sent as a key-value pair when the form is submitted.
Forms
<datalist> Element
</datalist>
When using an HTML input, a basic search/autocomplete functionality can be achieved by pairing an <input></input> with a <datalist>. To pair a <input></input> with a <datalist> the <input></input>’s list value must match the value of the id of the <datalist>. The datalist element is used to store a list of <option>s.</option></datalist></datalist></datalist>
The list of data is shown as a dropdown on an input field when a user clicks on the input field. As the user starts typing, the list will be updated to show elements that best match what has been typed into the input field. The actual list items are specified as multiple option elements nested inside the datalist.
datalists are ideal when providing users a list of pre-defined options, but to also allow them to write alternative inputs as well.
Forms
<input></input>: Radio Button Type
HTML <input></input> elements can be given a type=”radio” attribute that renders a single radio button. Multiple radio buttons of a related topic are given the same name attribute value. Only a single option can be chosen from a group of radio buttons.
The value of the selected/checked <input></input>’s name and value attribute of this element are sent as a key-value pair when the form is submitted.
Forms
Submittable Input
HTML <input></input> elements can have a type attribute set to submit, by adding type=”submit”. With this attribute included, a submit button will be rendered and, by default, will submit the <form> and execute its action.
The text of a submit button is set to Submit by default but can also be changed by modifying the value attribute.
Forms
<input></input> name Attribute
In order for a form to send data, it needs to be able to put it into key-value pairs. This is achieved by setting the name attribute of the input element. The name will become the key and the value of the input will become the value the form submits corresponding to the key.
It’s important to remember that the name is not the same as the ID in terms of form submission. The ID and the name of the input may be the same, but the value will only be submitted if the name attribute is specified.
In the code example, the first input will be submitted by the form, but the second one will not.
Forms
<label> Element</label>
The HTML <label> element provides identification for a specific <input></input> based on matching values of the <input></input>‘s id attribute and the <label>‘s for attribute. By default, clicking on the <label> will focus the field of the related <input></input>.</label></label></label>
The example code will create a text input field with the label text “Password: “ next to it. Clicking on “Password: “ on the page will focus the field for the related <input></input>.
Forms
<input></input> Password Type
The HTML <input></input> element can have the attribute type=”password” that renders a single row input field which allows the user to type censored text inside the field. It is used to type in sensitive information.
The value of this <input></input>’s name and value (actual value and not the censored version) attribute of this element are sent as a key-value pair when the form is submitted.
The code block shows an example of the fields for a basic login form - the username and password fields.
Forms
required Attribute
In HTML, input fields have an attribute called required which specifies that the field must include a value.
The example code block shows an input field that is required. The attribute can be written as required=”true” or simply required.
Forms
max/min Attribute
HTML <input></input>s of type number have an attribute called max that specifies the maximum value for the input field.
The code block shows an input number field that is set to have a maximum value of 20. Any value larger than 20 will mark the input field as having an error.
<input type="number" name="rating" min="1" max="10"> <input type="number" max="20">
Forms
maxlength/minlength Attribute
In HTML, input fields with type text have an attribute called maxlength that specifies the maximum number of characters that can be entered into the field. The code block shows an input text field that accepts text that has a maximum length of 140 characters.
<input type="text" name="tweet" maxlength="140"> <input type="text" name="username" minlength="6" />
Forms
pattern Attribute
In a text input element, the pattern attribute uses a regular expression to match against (or validate) the value of the <input></input>, when the form is submitted.
Forms
HTML Form Validators
HTML forms allow you to specify different kinds of validation for your input fields to make sure that data is entered correctly before being submitted. HTML supports a number of different validators, including things like minimum value, minimum/maximum length, etc. The validators are specified as attributes on the input field.
Semantic HTML
Semantic HTML
Semantic HTML introduces meaning to the code we write. Before Semantic HTML the elements didn’t have any meaning as to what it does or what content goes in it. An element such as <div> was used as a general-purpose element to create things from headers to footers to articles. With Semantic HTML we were introduced to elements that tell developers and browsers exactly what it does and what content should go in it.
Semantic HTML
Embedding media
Semantic HTML introduces us to <video>, <audio> and <embed></embed>. <video> allows us to add videos to our website. <audio> allows us to implement audio into our website. <embed></embed> can be used to implement any type of media. These elements are universal in that they all use the src attribute to link the source of the content. <video> and <audio> requires a closing tag while <embed></embed> is a self-closing tag.</audio></video></audio></video></audio></video>
Semantic HTML
<figure> and <figcaption>
</figcaption></figure>
The <figure> element is used to encapsulate media such as an image, diagram. or code snippet. The <figcaption> element is used to describe the media encapsulated within the <figure> element. Developers will normally use <figcaption> within the <figure> element to group the media and description. This way, if a developer decides to change the position of the media, the description will follow along with it.</figure></figure></figure>
Semantic HTML
<section> and <article>
</article></section>
<section> defines elements in a document, such as chapters, headings, or any other area of the document with the same theme. <article> holds content that makes sense on its own such as articles, blogs, and comments. Generally developers will use <section> to define a theme for the webpage and use <article> to write independent content for that theme. This does not mean that <article> has to be used with <section>.
</section></article></article></section></article></section>
Semantic HTML
<aside> Aside Element
</aside>
The <aside> element is used to mark additional information that can enhance another element but isn’t required in order to understand the main content. Usually, this information would be in a sidebar or a location where it doesn’t obstruct the main piece of content. An example of this would be an article that discusses how to take care of a dog and next to the article an ad would appear advertising a dog grooming product.
Syntax and Selectors
<link></link>
Link Element
The <link></link> element is used to link HTML documents to external resources like CSS files. It commonly uses:
- href attribute to specify the URL to the external resource
- rel attribute to specify the relationship of the linked document to the current document
- type attribute to define the type of content being linked
Syntax and Selectors
Write CSS in HTML File
CSS code can be written in an HTML file by enclosing the code in <style> tags. Code surrounded by <style> tags will be interpreted as CSS syntax.</style></style>
Syntax and Selectors
Inline Styles
CSS styles can be directly added to HTML elements by using the style attribute in the element’s opening tag. Each style declaration is ended with a semicolon. Styles added in this manner are known as inline styles.
Syntax and Selectors
Class and ID Selectors
CSS classes can be reusable and applied to many elements. Class selectors are denoted with a period . followed by the class name. CSS ID selectors should be unique and used to style only a single element. ID selectors are denoted with a hash sign # followed by the id name.
Syntax and Selectors
Groups of CSS Selectors
Match multiple selectors to the same CSS rule, using a comma-separated list. In this example, the text for both h1 and h2 is set to red.
Syntax and Selectors
Chaining Selectors
CSS selectors can be chained so that rule sets apply only to elements that match all criteria. For instance, to select <h3> elements that also have the section-heading class, the selector h3.section-heading can be used.
Syntax and Selectors
HTML attributes with multiple values
Some HTML attributes can have multiple attribute values. Multiple attribute values are separated by a space between each attribute.
Syntax and Selectors
Selector Specificity
Specificity is a ranking system that is used when there are multiple conflicting property values that point to the same element. When determining which rule to apply, the selector with the highest specificity wins out. The most specific selector type is the ID selector, followed by class selectors, followed by type selectors. In this example, only color: blue will be implemented as it has an ID selector whereas color: red has a type selector.
Syntax and Selectors
CSS descendant selector
The CSS descendant selector combinator is used to match elements that are descended from another matched selector. They are denoted by a single space between each selector and the descended selector. All matching elements are selected regardless of the nesting level in the HTML.
Visual Rules
CSS declarations
In CSS, a declaration is the key-value pair of a CSS property and its value. CSS declarations are used to set style properties and construct rules to apply to individual or groups of elements. The property name and value are separated by a colon, and the entire declaration must be terminated by a semi-colon.
Visual Rules
!important Rule
The CSS !important rule is used on declarations to override any other declarations for a property and ignore selector specificity. !important rules will ensure that a specific declaration always applies to the matched elements. However, generally it is good to avoid using !important as bad practice.
Visual Rules
Font Weight
The font-weight CSS property can be used to set the weight (boldness) of text. The provided value can be a keyword such as bold or normal.
font-weight: bold;
Visual Rules
CSS Rule Sets
A CSS rule set contains one or more selectors and one or more declarations. The selector(s), which in this example is h1, points to an HTML element. The declaration(s), which in this example are color: blue and text-align: center style the element with a property and value. The rule set is the main building block of a CSS sheet.
Visual Rules
Setting foreground text color in CSS
Using the color property, foreground text color of an element can be set in CSS. The value can be a valid color name supported in CSS like green or blue. Also, 3 digit or 6 digit color code like #22f or #2a2aff can be used to set the color.
Visual Rules
Resource URLs
In CSS, the url() function is used to wrap resource URLs. These can be applied to several properties such as the background-image.
background-image: url("../resources/image.png");
Visual Rules
Font Family
The font-family CSS property is used to specify the typeface in a rule set. Fonts must be available to the browser to display correctly, either on the computer or linked as a web font. If a font value is not available, browsers will display their default font. When using a multi-word font name, it is best practice to wrap them in quotes.
The Box Model
CSS Margin Collapse
CSS margin collapse occurs when the top and bottom margins of blocks are combined into a single margin equal to the largest individual block margin.
Margin collapse only occurs with vertical margins, not for horizontal margins.
The Box Model
CSS auto keyword
The value auto can be used with the property margin to horizontally center an element within its container. The margin property will take the width of the element and will split the rest of the space equally between the left and right margins.
div {
margin: auto;
}
The Box Model
Dealing with overflow
If content is too large for its container, the CSS overflow property will determine how the browser handles the problem.
By default, it will be set to visible and the content will take up extra space. It can also be set to hidden, or to scroll, which will make the overflowing content accessible via scroll bars within the original container.
small-block {
overflow: scroll;
}
The Box Model
The visibility Property
The CSS visibility property is used to render hidden objects invisible to the user, without removing them from the page. This ensures that the page structure and organization remain unchanged.
.invisible-elements {
visibility: hidden;
}
The Box Model
The property box-sizing of CSS box model
The CSS box model is a box that wraps around an HTML element and controls the design and layout. The property box-sizing controls which aspect of the box is determined by the height and width properties. The default value of this property is content-box, which renders the actual size of the element including the content box; but not the paddings and borders. The value border-box, on the other hand, renders the actual size of an element including the content box, paddings, and borders.
~~~
.container {
box-sizing: border-box;
}
~~~
The Box Model
CSS box-sizing: border-box
The value border-box of the box-sizing property for an element corresponds directly to the element’s total rendered size, including padding and border with the height and width properties.
The default value of the border-box property is content-box. The value border-box is recommended when it is necessary to resize the padding and border but not just the content. For instance, the value border-box calculates an element’s height as follows: height = content height + padding + border.
#box-example {
box-sizing: border-box;
}
Display and Positioning
CSS z-index property
The CSS z-index property specifies how far back or how far forward an element will appear on a web page when it overlaps other elements.
The z-index property uses integer values, which can be positive or negative values. The element with the highest z-index value will be at the foreground, while the element with the lowest z-index value will be at the back.
Display and Positioning
Fixed CSS Positioning
Positioning in CSS provides designers and developers options for positioning HTML elements on a web page. The CSS position can be set to static, relative, absolute or fixed. When the CSS position has a value of fixed, it is set/pinned to a specific spot on a page. The fixed element stays the same regardless of scrolling. The navigation bar is a great example of an element that is often set to position:fixed;, enabling the user to scroll through the web page and still access the navigation bar.
~~~
navbar {
postion : fixed;
}
~~~
Display and Positioning
CSS display property
The CSS display property determines the type of render block for an element. The most common values for this property are block, inline, and inline-block.
Block-level elements take up the full width of their container with line breaks before and after, and can have their height and width manually adjusted.
Inline elements take up as little space as possible, flow horizontally, and cannot have their width or height manually adjusted.
Inline-block elements can appear next to each other, and can have their width and height manually adjusted.
Display and Positioning
CSS position: absolute/relative
The value absolute for the CSS property position enables an element to ignore sibling elements and instead be positioned relative to its closest parent element that is positioned with relative or absolute. The absolute value removes an element entirely from the document flow. By using the positioning attributes top, left, bottom and right, an element can be positioned anywhere as expected.
.element {
position: absolute;
}
The value relative of the CSS position property enables an element to be positioned relative to where it would have originally been on a web page. The offset properties can be used to determine the actual position of the element relative to its original position. Without the offset properties, this declaration will have no effect on its positioning, it will act as the default value static of the position property.
~~~
.element {
position: relative;
}
~~~
Display and Positioning
CSS float property
The CSS float property determines how far left or how far right an element should float within its parent element. The value left floats an element to the left side of its container and the value right floats an element to the right side of its container. For the property float, the width of the container must be specified or the element will assume the full width of its containing element.
Display and Positioning
The CSS clear property
The CSS clear property specifies how an element should behave when it bumps into another element within the same containing element.The clear is usually used in combination with elements having the CSS float property. This determines on which sides floating elements are allowed to float.
Typography
CSS font-weight Property
The CSS font-weight property declares how thick or thin should be the characters of a text. Numerical values can be used with this property to set the thickness of the text. The numeric scale range of this property is from 100 to 900 and accepts only multiples of 100. The default value is normal while the default numerical value is 400. Any value less than 400 will have text appear lighter than the default while any numerical value greater than the 400 will appear bolder.
In the given example, all the <p> elements will appear in a bolder font.
/* Sets the text as bolder. */
p {
font-weight: 700;
}
Typography
CSS font-style property
The CSS font-style property determines the font style in which text will appear.
It accepts italic as a value to set the font style to italic.
.text {
font-style: italic;
}
Typography
CSS @font-face rule
The CSS @font-face rule allows external fonts or font files to be imported directly into stylesheets.The location of the font file must be specified in the CSS rule so that the files can be loaded from that location. This rule also allows locally hosted fonts to be added using a relative file path instead of a web URL.
Typography
CSS Fallback Fonts
The CSS font-family property can have multiple fonts declared in order of preference. In this case the fonts following the initial font are known as the fallback fonts.
If the initial value of the property font-family fails to load to the webpage, the fallback fonts will be used.
Typography
The CSS line-height property
The CSS line-height property declares the vertical spacing between lines of text. It accepts both unitless numbers as a ratio (eg. 2) and numbers specified by unit as values (eg. 12px) but it does not accept negative numbers. A unitless number is an absolute value that will compute the line height as a ratio to the font size and a unit number can be any valid CSS unit (eg. pixels, percents, ems, rems, etc.). To set the line-height of the <p> elements to 10px, the given CSS declaration can be used.
p {
line-height: 10px;
}
Typography
CSS Linking fonts
Linking fonts allow user to use web fonts in the document. They can be imported in an HTML document by using the <link></link> tag. Once the web font URL is placed within the href attribute, the imported font can then be used in CSS declaration.
<head> <link href="https://fonts.googleapis.com/css?family=Droid%20Serif" rel="stylesheet"> </head>
