HTML
Explain the following *audio attributes*: - autoplay - controls - loop
autoplay Specifies that the audio will start playing as soon as it is ready controls Specifies that audio controls should be displayed (such as a play/pause button etc) loop Specifies that the audio will start over again, every time it is finished
What is the structure of a *hex color*?
#rrggbb red, red, green, green, blue, blue
Explain the following *audio attributes*: - muted - preload - src
muted Specifies that the audio output should be muted preload Allows the author to provide a hint to the browser about what he/she thinks will lead to the best user experience. src Specifies the URL of the audio file
Describe the following tags: <del> ... </del> <ins> ... </ins>
*<del>* and *<ins>* removes a section of text and replaces it with new text. The *<del>* tag defines text that has been deleted from a document. Browsers will usually strike a line through deleted text. The *<ins>* tag defines a text that has been inserted into a document. Browsers will usually underline inserted text. <p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
What is a "heading" element, how many are there, and why are they important?
- Heading elements allow you to specify that certain parts of your content are headings, or subheadings. - There are 6 Headings: <h1>, <h2>, <h3>....<h6>. - h1 is the biggest and most important heading - Headings help organize your webpages and they are also used for SEO.
What does *HSL* stand for and how is it different from *HSLA*?
- Hue, Saturation, Light - HSLA has an Alpha channel for opacity
What does *RGB* stand for and how is it different from *RGBA*?
- Red, Green, Blue - RGBA has an Alpha channel for opacity
What is the purpose of the <html> element?
- The <html> </html> element is the root element and it wraps all the content on the entire page.
What is the purpose of the <title> element?
- The <title> </title> element sets the title of your page, which is the title that appears in the browser tab. - It is also used to describe the page when you bookmark or favorite it. - It is important for SEO.
How do you turn text into a link? What is the purpose of "href" and what does it stand for?
- To turn text into a link, wrap it in anchor tags <a> </a>. To make the link active, you need to add an "href" attribute name, and the attribute value will be the website address. For example: <a href = "https://www.google.com/"> Click this link </a> - href stands for "Hypertext REFerence" - Always include the https:// in front of the URL
What does UTF stand for and what is important about it?
- UTF stands for Unicode Transformation Format. - The Unicode Standard is implemented in HTML, XML, Java, JavaScript, E-mail, ASP, PHP, etc. - The Unicode standard is also supported in many operating systems and all modern browsers.
How would you *add a comment* to your HTML document?
<!-- Put your comment here -->
What is the purpose of <!DOCTYPE html>
<!DOCTYPE html> This is the document type and it tells the browser which version of HTML you're using. It is required.
How would you *link to an e-mail address*?
<a href="mailto:[email protected]">Send email</a>
What's the purpose of the *<audio>* tag?
<audio> embeds sound content into a document. It requires one or more <source> tags For example: <audio controls> <source src="viper.mp3" type="audio/mp3"> <source src="viper.ogg" type="audio/ogg"> </audio>
Explain the following tags and distinguish between them: <b> <strong> <i> <em>
<b> and <strong> both give the text more weight, but <b> gives the browser more information, resulting in better SEO. <i> and <em> both italicize text, but <em> gives the browser more information, resulting in better SEO. <b> = bold <i> = italicize <em> = emphasize
What is the correct HTML element for *inserting a line break*?
<br>
Explain the *<col>* tag
<col> defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.
Why would use use *<hr>* rather than *<br>*?
<hr> is used for defining thematic spacing in your webpage. It's usually edited with CSS. <br> will simply drop the following code down to the next line.
In the following code, explain the importance of the "alt" attribute. <img src="images/autopsy.png" alt="alien autopsy">
<img src="images/autopsy.png" alt="alien autopsy"> The "alt" attribute of an image provides three main benefits: 1.) If the image fails to load, the user will see the description of the image. 2.) For people with visual impairments, the screen reader will read the alt text for the user. 3.) SEO
What is the importance of <li>?
<li> stands for "list item", and it's used to list items... In a list.... For example: <ul> <li>technologists</li> <li>thinkers</li> <li>builders</li> </ul>
Explain the following tags: *<mark> <small> <del> <ins> <sub> <sup>*
<mark> - Highlights text <small> - Decreases font size <del> - Delete strikes line through text <ins> - Inserted underlines text <sub> - Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font <sup> - Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font
What is the purpose of the <meta charset="utf-8"> element?
<meta charset="utf-8"> - This element establishes the character set your document should use to UTF-8. - UTF-8 supports every natural language, so use it.
Describe an HTML attribute.
<p class = "example">I killed a bunch of people once</p> - An attribute should have a space between it and the element name or previous attribute. - The attribute name is followed by an equal sign. - The attribute value is wrapped by opening and closing quotation marks.
True or False: The following code is written correctly <a href=https://www.mybeakhurts.com/>Go to Beak Pain</a>
False Although this link will still work, it is good practice to put quotes around the attribute value <a href="https://www.mybeakhurts.com/">Visit our HTML tutorial</a>
True or False Adding comments to your HTML document is a bad idea; it can lead to issues in larger programs.
False Comments are ignored by the browser. Comments are extremely important for categorizing and organizing your code for readability.
True or False HTML is the code that is used to style a web page and its content.
False HTML is used to structure content. CSS is used to style.
True or False: The "lang" attribute goes in the head section of the index.html and it communicates to the browser which language is being used in the program.
False The lang attribute DOES communicate with the browser which primary language is being used for the program, but it does not belong in the head section; it belongs in the html tag. <html lang="en"> You should always include the lang attribute, it helps with SEO
What's the purpose of the *<abbr>* attribute?
It defines an abbreviation or an acronym. Viewers can see the the definition of the acronym by hovering their mouse over it. For example: The <abbr title="United States">US</abbr> is an awesome place to live.
What's the purpose of the *<address>* attribute?
It defines the contact information for the author/owner of a document.
Explain the *cite* tag
It defines the title of a creative project A person's name is not the title of a project Text is rendered italicized
What is it called when you put elements inside other elements?
It's called "nesting". For example: <p>Have you ever eaten <strong>monkey fingers</strong>?</p> In this example, the "monkey fingers" text will be more bold than surrounding text. The <strong> element is nested inside the <p> element.
Explain the *<colgroup>* tag
The <colgroup> tag specifies a group of one or more columns in a table for formatting. The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row. The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements. To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.
Explain the *<data>* tag
The <data> tag is used to add a machine-readable translation of a given content. This element provides both a machine-readable value for data processors, and a human-readable value for rendering in a browser. If the content is time, or date-related, use the <time> element instead.
Describe the following tags: <details> ... </details> <summary> ... </summary>
The <summary> tag is used in conjunction with <details> to specify a visible heading for the details. The <details> tag specifies additional details that the user can open and close on demand. It is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within. Any sort of content can be put inside the <details> tag. The <summary> tag defines a visible heading for the <details> element. The heading can be clicked to view/hide the details. The <summary> element should be the first child element of the <details> element. <details> <summary> ... </summary> <p> ... </p> </details>
What is the *blockquote* element for and what does it do?
The blockquote element defines a section that is quoted from another source. It also indents the paragraph.
What is the purpose of the "class" attribute?
The class attribute is mostly used to point to a class in a cascading style sheet. However, it can also be used by JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
What's the importance of a *title* attribute?
The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element.
There are two types of lists you can create, what are they?
There are two types of lists: <ol> Ordered Lists - Numerical and alphabetical <ul> Unordered Lists - Bullet point
What is the purpose of the <body> element?
This contains all the content that will be visible by anyone that visits your website. This includes: text, images, videos, games, playable audio tracks, or whatever else.
What is the following code an example of? *hsl(0, 100%, 50%)*
This is a HSL color
True or False The following code uses correct syntax for a button: <button class="counterstrike">Go!</button>
True
True or False: HTML tags are not case sensitive, but it is good practice to use all lower-case.
True
True or False You can wrap text in <q> </q> and the resulting text will have quotes around it.
True <p> Dr. Evil likes to use <q>air quotations</q> alot </p>
True or False HTML is not a programming language.
True HTML is a 'markup' language
True or False You can use the target attribute inside of anchor tags to tell the browser how to open the link.
True, for example: <a href="https://www.nosehairgrower.com/" target="_blank">Visit W3Schools!</a> This will open https://www.nosehairgrower.com in a new browser tab.
What is the purpose of the <head> element?
- The <head> </head> element is a container for metadata and it's placed between the <html> tag and the <body> tag. - Metadata typically defines the document title, character set, styles, scripts, and other meta information
In the following example, identify the "attribute name" and "attribute value" <p class = "example">Snuffleupagus is an abomination</p>
<p class = "example">Snuffleupagus is an abomination</p> - "class" is the attribute name - "example" is the attribute value - The name and value together make up an attribute
In the following example, identify the opening and closing tags. Then, identify the content. <p>ET The Extra Predatorial</p>
<p>ET The Extra Predatorial</p> - The opening tag <p> states where the element begins or starts to take effect, in this case, where the paragraph begins. - The closing tag is almost the same as the opening tag; it includes a forward slash before the element name </p>. This states where the element/paragraph ends. - The content of this element is just the text, "ET The Extra Predatorial". - The opening tag, the closing tag, and the content together comprise the "element".
Explain the *caption* tag
It adds a caption to a table. The <caption> tag must be inserted immediately after the <table> tag By default, a table caption will be center-aligned above a table <table> *<caption>Monthly Budget</caption>* <tr> <th>Month</th> <th>Budget</th> </tr> *</caption>*
What does ASCII stand for?
American Standard Code for Information Interchange
What is an "empty element"? Describe it and name one example.
An empty element has no content, nor does it have a closing tag. For example: <img src="images/not_porn.png"> Imbedding an image does not require a closing tag or content because the content is the image itself.
True or False The three *types* of buttons are: button, reset, and initialize
False The three *types* of buttons are: button, reset, and submit
What is usually the best way to *add style to your webpage*?
External CSS
Name *three ways* to add style to your webpage. *hint* types of CSS
External CSS Internal CSS Inline CSS
What is the following code an example of? *#3cb371*
Hex colors
What are <p> elements?
Paragraph elements <p> </p> are used to house text.
How would you *turn an image into a link*?
Place the <img> inside anchor tags. For example: <a href="https://www.bing.com/"> <img src="poop.gif" alt="Bing isn't THAT bad" style="width:42px;height:42px;"> </a>
What's the purpose of the *<article>* tag?
The <article> tag specifies independent, self-contained content. <article> is a good choice for blog posts, news articles, forum posts, etc. It does not render as anything special in a browser; all styling is done with CSS.
What's the purpose of the *<aside>* tag?
The <aside> tag defines some content aside from the content it is placed in. It is usually used for a sidebar. It does not render as anything special in a browser; all styling is done with CSS
Explain the *<body>* tag
The <body> tag defines the document's body. It contains all the contents of an HTML document that is viewable to a visitor, such as: headings, paragraphs, images, hyperlinks, lists, etc. There can only be one <body> element in an HTML document.
Explain the *<datalist>* tag
The <datalist> tag specifies a list of pre-defined options for an <input> element. It is also used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data. The <datalist> element's id attribute must be equal to the <input> element's list attribute (this binds them together).
Describe the following *description list* tags: <dl> ... </dl> <dt> ... </dt> <dd> ... </dd>
The <dl> tag defines a description list. The <dt> tag defines a term/name in a description list. The <dd> tag is used to describe a term/name in a description list. You can put paragraphs, line breaks, images, links, and lists inside of a <dd>...</dd> tag. <dl> <dt>Coffee</dt> <dd>Black hot drink</dd> <dt>Milk</dt> <dd>White cold drink</dd> </dl>
True or False: HTML5 is built on ASCII
True
Why would you use the *<style>* attribute?
You would use the <style> attribute to apply inline or internal CSS. For example: <p style="color:grey;"> this is inline CSS </p>
Describe the following *target attribute values*: _self _blank _parent _top
_self Opens the document in the same window/tab as it was clicked. This is the default option. _blank Opens the document in a new window or tab _parent Opens the document in the parent frame _top Opens the document in the full body of the window
As per best practice, what should you name the initial html file in your editor?
index.html
