Introduction to HTML, CSS, & JavaScript Flashcards
Discuss the history and objectives of HTML (4)
1 HTML stands for HyperText Markup Language;
2 enables documents to be displayed as web pages on the Internet.
3 Tags represent the elements of an HMTL page like paragraphs, lists, and tables.
4 HTML5, the latest version, supports:
a pages written in HTML or XML syntaxand markup
b APIs for web storage, video, and audio content
c also works across devices and with earlier HTML versions
explain HTML (2) vs XHTML (3)
XHTML:
1 needs all lowercase tags
2 must be well-formed or the parser will stop processing
3 advantage = more strict syntax rules so easier to maintain/less room for error
HTML:
1 case-insensitive
2 unmatched quotations and non-terminated/uncontained elements are allowed
define the HTML DOM Tree
and explain its purpose
“Document Object Model” = data representation of the objects that comprise the structure and content of a document on the web.
serves as an interface between HTML and scripting languages like JavaScript, enabling dynamic interactions with the document
Describe how HTML uses APIs. (4)
When a webpage loads in the browser, it becomes a Document object.
The Document object lets you access and control everything on the webpage using JavaScript.
The DOM (Document Object Model) is like a tree that shows all the elements on the webpage. JavaScript can use this to find and work with parts of the page.
To get or change something on the page with JavaScript, you start by using the document object. For example: document.getElementById(“header”) finds the element with the ID “header.”
explain html5
- syntax compatible with…?
- new and refined…?
- HTML web apps have…?
1 syntax compatible with HTML4 and XHTML1
2 new and refined APIs for video and audio elements, offline web apps, and drag and drop
3 HTML5 Web Applications have:
a Improved search indexing with meta tags,
b better page load times,
c enhanced user experience,
define scripting (1)
explain how browsers enable scripting (4)
1 scripting refers to writing code, typically in JavaScript, that interacts with the elements of an HTML document to make the webpage dynamic and interactive.
2 can be done directly within your HTML code within the script tag, or within a separate file which is called in your HTML code.
3 It can be used for various tasks, such as form validation, dynamically changing the content of a website, and manipulating images.
4 Since scripting can be turned off, the recommendation is to use scripting but not to rely on it.
5 Scripting is enabled when certain browser conditions are met.
what is html5 sandboxing and how does it work? (2)
1 Sandboxing an iframe is a way to limit the permissions that an iframe can run with. HTML5 isolates the iframe’s content from the parent document
3 This sandboxed browsing context can be set at the
page level or specified as an attribute for embedded objects.
Outline how HTML is supported by common browsers.
- old versions of certin browsers do not support certain features
- caniuse.com
- you can use JavaScript to check whether a certain HTML5 element is supported by a browser.
LIist some of the features of HTML5,
HTML5
includes features for categorizing sections of web pages, and managing data, video and
audio tools.
Enables you to develop a single, cross-browser application for the web and portable devices.
and helps you to create a more engaging user experience.
Define parsing vs processing
Parsing
Parsing is the act of analyzing and breaking down input data (like text, code, or a file) into smaller, understandable components. For example, when a browser reads HTML, it parses the text to identify tags, attributes, and content, forming a structured representation (the DOM tree).
Processing
Processing is the step that follows parsing, where the program takes the structured data and performs actions or computations with it. For instance, after parsing the HTML, the browser processes it to render the webpage, apply styles, execute scripts, and respond to user interactions.
describe the Document Object Model or DOM tree,
The DOM tree is an in-memory representation of a document.
DOM trees contain nodes, which define the type
of document and its structure, such as
headers and paragraphs, text nodes, and comment nodes.
list some HTML document API properties
and methods, describe how scripting is enabled in browsers,
describe browser support for HTML5 features.
- Use titles and headings to label information
- Insert text using the paragraph element
- Insert line breaks on a page
- Add links to different sections of a page and other pages
- Create a list of items
- Add a table of data
- Insert an image
how do you always have to start an html document?
must always start by specifying the DOCTYPE. The entire content is then enclosed within an <html> tag
eg <!DOCTYPE html>
what does the head tag do?
The <head> tag contains all the metadata about the page: This information may include the document title, character set, styles to be used, scripts, etc.
Contents of <head> section are not displayed to the user.
what is the purpose of the body tag?
<body> tag contains the content that is displayed to the end user.
</body>
what is the title of a page, where is it displayed, and how do you format it?
The title of the page appears on the browser tab when you open a webpage in the browser.
using the <title> tag, which is placed within the <head> section of your HTML markup:</title>
<head>
<title>Sample Page Title</title>
</head>
explain headers
HTML defines six different font sizes for headings. Each heading represents a different level of importance and text size
<h1> through <h6>
should be placed in <body> as follows:
<body>
<h1>Most Important (and Largest) Heading</h1>
<h6>Least Important (and Smallest) Heading</h6>
<body>
NOTE: cannot be placed within <address>, <footer>, or other <header> elements.
</header></footer></address></body></body></body></h6></h1>
explain <p> tag
<p> tag should be used to insert text into your HTML document. stands for paragraph and includes any text content, whether it is a single word or a 10-page essay.
<body>
<h1>Most Important (and Largest) Heading</h1>
<p>This is some text. The content within this paragraph element can be as short or as long as needed.</p>
<h6>Least Important (and Smallest) Heading</h6>
<p>This is another paragraph of text.</p>
<body>
</body></body></p>
explain <br></br> tag
A line break is used to complete one line and continue the remaining text
at the start of a new line,
explain how to hyperlink text
<a> tag defines a hyperlink in HTML, followed by the href attribute to define the destination address of the hyperlink.</a>
<a href="https://www.ibm.com">IBM</a>
how do you get a link to open in a new tab?
target=”_blank” before the hyperlink text
<a>IBM</a>
how do you link to a different section in the same page?
either of the following two ways:
1 2 <a href="#">Top of Page</a> <a href="#top">Top of Page</a>
explain linking to a diff section within a page and how you label them
o link to a different section of the page, you can use the id of the section you want to link to, as follows:
1 2 3 4 5 <a href="#section">Link to section</a> ... <h1 id="section">Section</h1>
how do you create a list of items?
use the <ol> (ordered list) tag for numbered lists and the <ul> (unordered list) tag for bulleted lists.
how do you represent one item on a list?
Each point within a list will be enclosed by a <li> opening and closing tag, which represents a list item. This same tag is used for both ordered and unordered lists.
how do you represent the data within a table? (3)
1 each row of data is represented using the <tr> (table row) tag.
2 The column or row headings can be specified by the <th> (table heading) element.
3 each data element within the table cells is specified using the <td> (table data) tag.
how do you create a table? how is it formatted in the code?
A table is created with HTML using the <table> tag.
NOTE: does not display a border by default.
<table>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>H1 - Data Item 1</td>
<td>H2 - Data Item 1</td>
<td>H3 - Data Item 1</td>
</tr>
<tr>
<td>H1 - Data Item 2</td>
<td>H2 - Data Item 2</td>
<td>H3 - Data Item 2</td>
</tr>
<tr>
<td>H1 - Data Item 3</td>
<td>H2 - Data Item 3</td>
<td>H3 - Data Item 3</td>
</tr>
</table>
how do you add an image?
1 Images can be added within a web page by using the <img></img> tag.
2 to add an image, you need to know the image file name and include it in the ‘src’ attribute, which specifies an external resource that you want to link, such as the URL or file path of an image
NOTE: the file path of the image relative to the location of your HTML file.
3 <img></img> tag also requires the ‘alt’ attribute, which defines alternative text to be displayed in the event the image cannot be loaded and when a screen reader is used.
4 The size of an image can also (optionally) be specified using the ‘width’ and ‘height’ attributes, with the numbers listed in pixels.
what does the skeleton of an html document look like?
<html>
<head>
</head>
<body>
</body>
</html>
what ae the 2 types of css layouts to design websites?
fluid and fixed
what do html5 sandboxes help manage?
iframe mashups (???)
what is xml?
An “eXtensible Markup Language” Designed to store and transport data allowing users to define their own markup languages, primarily to displaydocuments on the web.
what is XHTML?
An “eXtensible Markup Language” Designed to store and transport data allowing users to define their own markup languages, primarily to displaydocuments on the web.
What are web storage apis?
APIs that allow data storage in a browser.
explain div tag
ften used to separate sections in the body of a document in order to style that content with CSS. no particular semantic meaning
When using a <div> tag, note that browsers will insert a line break before and after the element.
how do you comment in html?
<!-- -->
This tag denotes a comment in HTML, which is not displayed by a browser but can be useful to hide and document code.
1 <!-- This is a comment -->
<link></link>
tag
<link></link>
Used to link an external document, such as a CSS file, to an HTML document.
<meta></meta>
tag
`
Used to provide metadata about the HTML document.
1
2
3
<head>
<meta name=“author” content=“Christopher Moore”>
</head>
<script> tag </script>
Used to embed JavaScript in an HTML document.
define web worker
a JavaScript script executed from an HTML page that runs in the background, independently of scripts that may also have been executed from the same HTML page.
what is sandboxing?
Sandboxing an iframe is a way to limit the permissions that an iframe can run with. The sandbox attribute in HTML5 restricts browser behavior and scripts. It does this by isolating the iframe’s content from the parent document and other browsing contexts.
what is an iframe?
iframe, or inline frame, is an HTML element that allows a user to embed another HTML document or webpage within the current document. This allows content from one website to be displayed on another website.
define <article> tag
even more specific than a <section>tag. It is used to group together semantically related, self-contained content which can be meaningful on its own. Similar to the <section> element, articles usually have headings immediately after their opening tag to indicate what the article is about.
define <section> tag`
A section defines a logical separation in the document such as the numbered chapters
of an online manual.
content within a <section> element is grouped in a semantically meaningful way, that is, there is a reason, other than for styling purposes for putting the content together. Content within a <section> tag has a theme, which is usually indicated by a heading tag (e.g. <h1>) used immediately after the opening <section> tag.
define <aside> tag
The <aside> element is used to provide additional information that is related to the main discussion. It lets you display further content or additional resources without detracting from the main discussion, and is often placed as a sidebar in a document.
While the <aside> element itself is not displayed different from the rest of the content, it is useful for understanding your code and for styling purposes.
define <figure> tag</figure>
The figure tag defines a self-contained element that is referred to from the main
content.
The figure element can be used to embed graphics, images, or code sections.
define <figcaption> tag
The figcaption tag defines the caption for the contents of the figure element. It can be placed as the first or last child element within the <figure> element. (before or after the img)</figure>
define <nav> tag
Websites typically have sections that are dedicated to navigational links that go to
these sites or for moving between pages of a single application.
In HTML5 syntax, these navigational links are placed inside a nav tag.
The nav tag is a convenience tag for grouping navigational links in a web page.
define <footer> tag
A <footer> element defines the area at the bottom of the page (known as a footer). This often contains copyright information, contact information, and contact links.
define <audio> tag</audio>
The <audio> element is used to embed sound content, such as music or podcasts. It contains one or more <source></source> tags with different audio sources (e.g. MP3, WAV), so the browser can select the first supported source to play.</audio>
If a browser does not support the audio formats provided, the browser will instead display any text within the <audio> element.</audio>
define <canvas> tag</canvas>
used to draw graphics via scripting. JavaScript is one way to utilize scripting to draw these graphics
If a browser does not support graphical content or JavaScript is disabled, the browser will display any text within the <canvas> element</canvas>
define <embed></embed> element
used as a container to embed external resources such as media players and plug-in applications into your web page.
<embed></embed>
define <track></track> element/tag
defines text tracks, such as subtitles or captions, for <audio> and <video> elements. This text should be visible as the related media source it playing, and are formatted in the WebVTT (.vtt) format.</video></audio>
how do you represent a section id?
#
<legend> tag
</legend>
The <legend> tag defines a caption for the <fieldset> element/gorup of related fields. this makes it easier to understand the purpose of grouped form elements.
<fieldset> element
</fieldset>
The <fieldset> tag is used to group related elements in a form.
The <fieldset> tag draws a box around the related elements.
<label> element</label>
The label tag is used to identify to a user the type of input they should be providing, which is also specified in the id of the input tag.
<input></input> element
The input field uses the type attribute for specifiyng the input type (e.g. text, number, etc.).
describe html5 input elements
explain the different input type attributes, such as tel, email, datetime, number, range, and color,
and importance of implementing validation fallback.
input type=color
user to select a color.
The dialog varies depending on the browser.
Some browsers don’t support this input type.
In non-supporting browsers, this input type is displayed as a regular text
input field into which the user might type a valid color name or color code.
input type=”date” attribute
input dialog varies from browser to browser.
The datetime-local attribute provides input for a date and time (year, month,
day, hour, minute, AM/PM) with no time zone.
explain input type=”email” attribute
The input type=”email” attribute is displayed as a regular text input field.
It provides feedback when the input does not follow the email format.
explain input type=”number”
takes a numeric value as input.
You can optionally specify the minimum, maximum values, step size, etc.
input type=”range”
takes a numeric range as input
Only the numbers in the range of the minimum and the maximum are available for selection.
explain differences between input type=”search” / and input type=”text” /
mostly in style.
explain input type=”tel” pattern=”[parameters]” attribute
expects a telephone number as input.
On its own, the input type=”tel” provides
nothing more than a text entry field in the browsers.
It does not enforce numeric only input
since many telephone numbers include other characters, such as the plus sign and hyphens.
You need to supply your own pattern matcher if you want the browser to validate the telephone number.
explain URL attribute
used to validate that the user
typed in a properly formatted URL or web address.
explain input list=”some_list” uses the datalist feature.
Not to be confused with the select element.
The datalist options are only suggestions.
Useful for auto-complete functionality.
You can fill the list by nesting <option> elements inside the datalist tag.
These options are the types of fruits listed in the drop-down list.
Placeholder text is used to provide hints of what the input text format looks like.
The placeholder fills the input text field with the example values in a lighter shade of text.</option>
The form does not submit the placeholder text value if the input text is not overwritten.
The required attribute implies that some text must be typed.
The requirement to type some input applies even if the field contains placeholder text.
What happens if browser-based validation is not supported for these input attributes?
There are several options to performing validation
in browsers that do not support all HTML5 input attributes.
You can use JavaScript and JQuery libraries.
You can assume that more browsers will support these features over time,
and leave all final validation to server-side processing.
You can code client-side validation that is attached to the form submit
event handler to validate all the fields on the form when the form is submitted.
explain <form> tag
The <form> tag is used to create an HTML form for user input.
The <form> element can contain one or more of the following form elements:
explain <fieldset> tag
syntax: <fieldset> Contents… </fieldset>
found within the <form> tag and is used to group related elements in an HTML form, often by enclosing them within a box.
There is no restriction to the kind of elements that can be inside a fieldset, but they are mostly used to group related input type of elements, as shown in the example below.
The fieldset element is especially useful in large forms, where readability and ease of access can be improved with segmentation. Browsers will most likely render a frame around the grouped controls.
<fieldset> attributes (3)
</fieldset>
1 disabled: It specifies that the elements belonging to the fieldset should be disabled.
2 form: It specifies the id of the form that the fieldset is to be considered a part of.
3 name: It specifies the name for the fieldset.
Explain what a Cascade Style Sheet (CSS) is
1 CSS is the design that is layered over the top of an HTML web page
2 CSS is a style sheet language that describes how HTML elements are displayed
3 What makes the style sheet “cascading” is that developers can apply CSS to create
a uniform look throughout each element of each page of the website
4 Design can be removed for special accessibility renders
how can you integrate css into an HTML project? (3)
You can code CSS as a style attribute in an HTML tag, a head section of a document, or
an external document
The preference is to code CSS in external documents (referred to as style sheets)
Guidelines for base CSS styles
Generally, follow these guidelines:
1 When a color is specified, use Red-Green-Blue (RGB) hexadecimal light values.
2 When a size is specified, use pixels (indicated by a px after the number); an em, which is indicated by em after the number (that is, the size of the font multiplied by the specified number); or a percentage, which is indicated by a % after the number.
3 Text can be aligned left, right, or center.
4 Floats can also be left or right.
5 Vertical alignments must be top, middle, or bottom.
6 Fonts can be any specific font or font family (serif, sans-serif, or monospace) or even a downloadable font.
explain fluid vs. fixed layout
fluid layout: is a layout in which the height and width of elements is flexible and can expand or contract based on the browser window, the operating system, and other user preferences.
You specify these elements mostly by using percentages and ems.
A fixed layout: is a layout where you specify the height and width of elements, and those values remain the same regardless of which operating system or browser you use to access the website.
You specify these elements mostly by using pixels
When determining the layout, consider also the pros and cons for fluid and fixed layouts; consider the type and amount of content and the target
audience of the website
how do you apply css to html? (3)
To apply a CSS, you must tell the browser where to look for it. This step is the only true point where HTML references a CSS.
You can make the reference in one of three ways:
1 Inline CSS:
a) used for a single HTML element,
b) but the HTML document can get messy very quickly as more styles get added
USE: this method, insert the “style” attribute inside any HTML element
2 Internal CSS:
a) used for a SINGLE PAGE; however
b) It “dirties” the page with a non-HTML code
c) If you copy and paste this style on each page, this approach increases the load time of each
page
USE: the <style> tag must be used, with your CSS code inside</style>
3 External CSS:
a) used to style an entire website
b) can link to it from other pages, which ensures a clean HTML and a smaller page size
USE: the <link></link> tag must be added to the <head> tag section in your HTML code
explain separation of data and appearance
For websites, it is an important concept to separate the data from the design
The data is sent to the browser by using HTML, and the design is applied to that data by
using a CSS
This separation allows people to render a web page without your design if they have
special accessibility needs
It allows machines (such as search engines) to index a website without the design interfering
how do you use all 3 css approaches to html at once?
if more than one CSS method points to an element,
the type with the highest priority will override the others and be applied to that element.
The order of precedence for CSS styles is:
inline CSS > internal CSS > external CSS
what is a framework?
a framework provides a foundation on which you can build your code. CSS frameworks, specifically, can provide you with all the tools you need to spin up a basic user interface (or UI).
Different frameworks focus on different features, so it’s important to identify which are most important to your project when deciding which framework to use.
After watching this video, you will be able to:
differentiate between the different types of CSS frameworks,
list the advantages and disadvantages of each type of popular framework and
identify popular CSS frameworks and how to use them.
What are the 2 types of CSS frameworks?
There are two types of CSS frameworks: utility frameworks and component frameworks.
define component framework
Component frameworks, which provide a wide selection of pre-styled components and templates that can be implemented onto a website.
This results in the ability to develop well-styled websites rapidly, as significantly less time
needs to be spent styling each element.
It also makes it easier to keep all related elements styled uniformly, as you can simply
choose the same or similar styles each time.
However, having all these pre-defined styles limits you only to what the framework provides,
and doesn’t give you the freedom of customizing everything exactly as you want it.
They also provide a lot of overhead code that you wouldn’t otherwise get if you choose
not to use any frameworks, as component frameworks will often provide you with more components
than what you’ll use.
define utility framework
Utility-first frameworks, which provide utility classes to help in building one’s own styles and layouts.
Utility-based means that when implementing designs, you use predefined classes to set css properties: font sizes, padding, margins, colors, etc on each individual item to create a custom element from the available options. The major perk of this is being able to customize elements independently, one at a time. Each element can be altered slightly without writing additional styles.
This makes it easier to apply CSS properties directly in your HTML code, which can save
a lot of time while still giving you the freedom to style components as you wish.
Since utility-first frameworks involve adding many classes to your HTML markup, this often causes the download size of your markup to increase, and potentially slows down your web pages.
explain <header> vs <head> vs <h1>-<h6>
<header>
We now know that we can have multiples headers in a page but what are the must have’s within the element in order for it to validate?
A container for introductory content such as heading elements, logo, or authoring information.
In short, a <header> typically contains at least (but not restricted to) one heading tag (<h1> – <h6>). The element can also contain other content within the document flow
<head>
The <head> tag contains all the metadata about the page: This information may include the document title, character set, styles to be used, scripts, etc.
Contents of <head> section are not displayed to the user.
EXAMPLE
<head>
<meta name=“author” content=“Christopher Moore”>
</head>
</head></head></head></h6></h1></header></header>
explain <strong> tag</strong>
The <strong> tag is used to define text with strong importance. The content inside is typically displayed in bold.</strong>
Tip: Use the <b> tag to specify bold text without any extra importance!</b>
<style>
tag</style>
Used to apply simple CSS to an HTML document.
<head>
<style>
p {color:red}
</style>
</head>
<body>
<p>This paragraph will be red because I've styled
the paragraph tag with CSS.</p>
</body>
<input></input>
Specifies an input field on a form with the type attribute. Common input types include: “color,” “date,” “datetime- local,” “email,” “number,” “range,” “search,” “url,” “tel,” “datalist,” “select,” “text,” “option,” and “placeholder.”
describe JavaScript primitives and objects
there are five primitive types that are associated with various primitive
values:
Number: All numbers, such as 0 or 3.1412,
String: All strings, such as “Hello World”,
Boolean: The values true or false,
Null: The value null.
Undefined: The value undefined, since a data type has not been assigned or the variable
does not exist.
All other non-primitive data types are objects.
number primitive represents both integer and floating point values, the value NaN (not
a number), and Infinity.
Integers can be coded as base 10 (decimal), base 8 (octal), or base 16 (hexadecimal) values.
The integer literal 16 in decimal, 020 in octal, and 0x10 in hexadecimal all have the
same value.
JavaScript is a scripting language that adds behavior to otherwise static web content.
Primitives are values, and have no properties or methods. Examples of primitives include:
number, string, boolean, null, and undefined.
Wrapper objects allow objects of corresponding primitive data types to be created.
Wrapper objects can store a primitive value and provide methods with which to process it.
Wrapper objects have the same name as the primitive type, but they begin with a capital
letter to differentiate them from the primitive data type itself.
define JavaScript variable declaration,
show how JavaScript uses variables, and identify JavaScript control structures.
Variables are declared using the keyword var followed by the variable name.
You can initialize variables at the time of declaration or assign a value later.
You do not need to declare the data type of a variable. Variables take their data type
from the value assigned and can change type during program execution.
Variables also have a scope.
Variables declared within a function have a scope local to that function.
Variables declared outside of a function have a global scope.
Variables declared without the var keyword have a global scope.
When executing, the flow of the program is directed by control statements, including:
Conditional statements like if…then…else,
Switch statements,
repeat statements like for loops and while loops.
describe functions in JavaScript,
describe prototypes in JavaScript, and demonstrate how to create a custom object
what is the syntax of a function?
the keyword function,
the name of the function, parentheses with optional parameter arguments,
curly braces with the logic
he last statement in a function block is the optional return statement that
returns control back to whatever called the function.
Prototypes allow you to easily define properties and
methods for all instances of a particular object.
All JavaScript objects which can be created with the new keyword inherit
properties and methods from a prototype.
Auto-invocation or
self-executing functions start running immediately after being declared.
The functions and variables inside self executing functions
are only available to the code inside the self executing function.
Auto-invocation functions can also be unnamed or anonymous functions and
have the format that is shown in the code block on the slide.
Self-executing functions are often used to initialize data or
to declare DOM elements on the page
Prototypes exist for
all JavaScript objects that can be created with the new keyword.
To add a new function to the template for
the object, modify the prototype for the object.
explain how to work with nodes,
describe how to modify the content of an element,
explain how to modify the inline style and attributes of an object,
and describe how to use the Window object methods and events.
how do you retrieve a node referenced by an element given an id?
use the document.getElementById function
and pass the id value as an argument.
This returns one specific HTML or XML element if a matching unique id is found on the web page
document.getElementsByTagName(“tagName”)
The getElementsByTagName function
retrieves a NodeList of elements with a specified tag name.
The NodeList contains an array of elements in your document.
You provide the name of the element you are interested in
and an array of all elements with that name found in the document is returned.
