HTML (Codecademy)
How many spaces do I use for nested elements?
2 spaces
How do I write a comment in HTML?
<!-- This is a comment -->
What does a document type declaration look like?
<!DOCTYPE html>
Give an example of a link to a Wikipedia page
<a href="https://www.wikipedia.org/">This Is A Link To Wikipedia</a>
How do you add a line break?
<br /> Example: <p>The Nile River is the longest river <br /> in the world, measuring over 6,850<br /> kilometers long (approximately 4,260 <br /> miles).</p>
Always add two spaces of indentation when you nest elements inside of _______
<div>s
What is the div tag and why is it used?
<div>s can contain any text or other HTML elements. They are primarily used to divide HTML documents into sections.
What tag is used for main headings?
<h1>
What tags are used for sub headings?
<h2> <h3> <h4> <h5> <h6>
How do you add an image?
<img src="image-location.com" />
How is an ordered list created?
<ol> <li>Britain</li> <li>United States</li> <li>Canada</li> <li>Australia</li> <li>New Zealand</li> </ol>
What is the paragraph tag and why is it used?
<p> Simply contain a block of plain text
What is the span tag and why is it used?
<span>s contain short pieces of text or other HTML. They are primarily used to wrap small pieces of content that are on the same line as other content and do not break text into different sections.
A table's body is created with the _______ element.
<tbody>
To add data to a row, you can use _______ element
<td>
A table's footer is created with the _______ element.
<tfoot>
The bottom part of a long table can also be sectioned off using the what?
<tfoot> element <table> <thead> <tr> <th>Quarter</th> <th>Revenue</th> <th>Costs</th> </tr> </thead> <tbody> <tr> <th>Q1</th> <td>$10M</td> <td>$7.5M</td> </tr> <tr> <th>Q2</th> <td>$12M</td> <td>$5M</td> </tr> </tbody> <tfoot> <tr> <th>Total</th> <td>$22M</td> <td>$12.5M</td> </tr> </tfoot> </table> In the example above, the footer contains the totals of the data in the table. Footers are often used to contain sums, differences, and other data results.
Table headings clarify the meaning of data. Headings are added with the _______ element.
<th>
A table's head is created with the _______ element.
<thead>
In the last exercise, the table's headings were kept inside of the table's body. When a table's body is sectioned off, however, it also makes sense to section off the table's headings using the what?
<thead> element <table> <thead> <tr> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> </thead> <tbody> <tr> <th>Morning</th> <td rowspan="2">Work</td> <td rowspan="3">Relax</td> </tr> <tr> <th>Afternoon</th> </tr> <tr> <th>Evening</th> <td>Dinner</td> </tr> </tbody> </table> In the example above, the only new element is <thead>. The table headings are contained inside of this element. Note that the table's head still requires a row in order to contain the table headings.
How are rows added to <table>?
<tr> <table> <tr> </tr> <tr> </tr> </table>
Give an example of a video element
<video src="myVideo.mp4" width="320" height="240" controls> Video not supported </video>
Tables can be split into three main sections what are they?
A head, a body, and a footer
What is a markup language?
A markup language is a computer language that defines the structure and presentation of raw text
What is a relative path?
A relative path is a filename that shows the path to a local file (a file on the same website, such as ./index.html) versus an absolute path (a full url, like www.codecademy.com/learn/ruby which is stored in a different folder). The ./ in ./index.html tells the browser to look for the file in the current folder <a href="./contact.html">Contact</a> In this example, the <a> tag is used with a relative path to link from the current HTML file to the contact.html file in the same folder. On the web page, Contact will appear as a link.
How do you create HTML structure and content?
Add opening and closing <html> tags, like so: <html> </html>
What does the <tr> element do?
Adds rows to a table
What is <a></a>?
An anchor element
What is an attribute?
Attributes provide more information about an element's content. They live directly inside of the opening tag of an element. Attributes are made up of the following two parts: 1. The name of the attribute 2. The value of the attribute
Use _______ instead of HTML to show table borders
CSS
What does the <head> tag do?
Contains the metadata for a web page
What does the <table> element do?
Creates a table
Where is the body tag located?
Directly below the closing </head> tag: <!DOCTYPE html> <html> <head> <title>I'm Learning To Code!</title> </head> <body> </body> </html>
A tag and the content between it is called an?
HTML element
What does HTML stand for?
HyperText Markup Language
What does the href attribute stand for and what is it used for?
Hyperlink Is used to link to file path, or the address to where a file is located (whether it is on your computer or another location)
What is hypertext?
Hypertext is text which contains links to other texts
How can you make a link automatically scroll to a specific section?
In order to link to a target on the same page, we must give the target an id, like this: <p id="top"> This is the top of the page! </p> <h1 id="bottom">This is the bottom! </h1>
What is the difference between ordered and unordered lists?
In ordered lists each element is numbered
What is the controls attribute in a video element?
Instructs the browser to include basic video controls: pause, play and skip.
What does HTML do?
It provides a logical way to structure content for websites
What is a document type declaration and where should it be written?
It tells the browser what type of document to expect, along with what version of HTML is being used in the document Must be the first line of code in all your HTML documents
Give an example of a self-closing tag
Line break: <br /> <p>line one<br />line two</p>
What is the source in a video element?
Links to a video file, not to a video on another site.
What is metadata?
Metadata is information about the page that isn't displayed directly on the web page.
Does the spacing between code in an HTML file affect the positioning of elements in the browser?
No
What should I keep in mind about line breaks?
Note: Line breaks are not the standard way of manipulating the position of HTML elements, but it's likely that you'll come across them every now and then.
Where is the title of a web page located?
On the tab
What tags are used to add blocks of text?
Paragraphs, divs or spans
A few types of elements require only one tag. What are they called?
Self-closing elements
Rows aren't sufficient to add data to a table. Each cell element must also be defined. In HTML, you can add data using the what?
Table data element: <td> <table> <tr> <td>73</td> <td>81</td> </tr> </table> In the example above, two data points (73 and 81) were entered in the one row that exists. By adding two data points, we created two cells of data. If the table were displayed in the browser, it would show a table with one row and two columns.
Table data doesn't make much sense without titles to describe what the data represents. To add titles to rows and columns, you can use the what?
Table heading element: <th> <table> <tr> <th></th> <th scope="col">Saturday</th> <th scope="col">Sunday</th> </tr> <tr> <th scope="row">Temperature</th> <td>73</td> <td>81</td> </tr> </table> What happened in the code above? First, a new row was added to hold the three headings: a blank heading, a Saturday heading, and a Sunday heading. The blank heading creates the extra table cell necessary to align the table headings correctly over the data they correspond to. In the second row, one table heading was added as a row title: Temperature. Note, also, the use of the scope attribute, which can take one of two values: row - this value makes it clear that the heading is for a row. col - this value makes it clear that the heading is for a column. HTML code for tables may look a little strange at first, but analyzing it piece by piece helps make the code more understandable.
What is a nav tag?
The <nav> tag defines a set of navigation links. Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links. Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.
<body> <p>Paragraph</p> </body> What is the <p> element considered as?
The <p> element is nested inside the <body> element. The <p> element is considered a child of the <body> element, the parent.
What is nested inside of the parent element?
The child element
When an element is contained inside another element, it is considered what?
The child of that element
Over time, a table can grow to contain a lot of data and become very long. When this happens, the table can be sectioned off so that it is easier to manage. Long tables can be sectioned off using what?
The table body element: <tbody> The <tbody> element should contain the all of the table's data, excluding the table headings (more on this in a later exercise). <table> <tbody> <tr> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <th>Morning</th> <td rowspan="2">Work</td> <td rowspan="3">Relax</td> </tr> <tr> <th>Afternoon</th> </tr> <tr> <th>Evening</th> <td>Dinner</td> </tr> </tbody> </table> In the example above, all of the table data is contained within a table body element. Note, however, that the headings were also kept in the table's body — we'll change this in the next exercise.
What is the <a> elements target attribute?
The target attribute specifies that a link should open in a new window For a link to open in a new window, the target attribute requires a value of _blank
What kind of metadata about the web page can the <head> element contain?
Title
Where is the <head> tag located?
Typically appear as the first item after your first HTML tag: <!DOCTYPE html> <html> <head></head> </html>
How do you help visually impaired users?
Use the alt attribute The value of alt should be a description of the image <img src="#" alt="A field of yellow sunflowers" />
What can be used if the table contains data that spans multiple columns?
Use the colspan attribute <table> <tr> <th>Monday</th> <th>Tuesday</th> <th>Wednesday</th> </tr> <tr> <td colspan="2">Out of Town</td> <td>Back in Town</td> </tr> </table> In the example above, the data Out of Town spans the Monday and Tuesday table headings using the value 2 (two columns). The data Back in Town appear only under the Wednesday heading.
How do you turn nearly any element into a link?
Wrap that element with an anchor element With this technique, it's possible to turn images into links by simply wrapping the <img> element with an <a> element. <a href="https://en.wikipedia.org/wiki/Opuntia" target="_blank"><img src="#" alt="A red prickly pear fruit"/></a>
Only content inside the opening and closing _______ tags can be displayed on the screen
body
The <strong> will generally render as what?
bold emphasis.
Table data can span columns using the _______ attribute.
colspan
You can let web browsers know that you are using HTML by starting your document with a _______ _______ _______.
document type declaration
The <em> tag will generally render as what?
italic emphasis.
HTML documents are organized as a collection of _______-_______ relationships
parent-child
The example above shows three different files — about.html, contact.html, and index.html in one folder. If the browser is currently displaying index.html, it knows that about.html and contact.html are in the same folder as index.html, also referred to as the current folder. Since the browser knows the current folder, other files in the folder can be linked using a _______ _______
relative path
When making multi-page static websites, web developers often store HTML files in the what?
root directory, or a main folder where all the files for the project are stored
Table data can span rows using the _______ attribute.
rowspan
What can be used if data spans multiple rows?
rowspan attribute <table> <tr> <!-- Row 1 --> <th></th> <th>Saturday</th> <th>Sunday</th> </tr> <tr> <!-- Row 2 --> <th>Morning</th> <td rowspan="2">Work</td> <td rowspan="3">Relax</td> </tr> <tr> <!-- Row 3 --> <th>Afternoon</th> </tr> <tr> <!-- Row 4 --> <th>Evening</th> <td>Dinner</td> </tr> </table> In the example above, there are four rows: 1. The first row contains an empty cell and the two column headings. 2. The second row contains the Morning row heading, along with Work, which spans two rows under the Saturday column. The "Relax" entry spans three rows under the Sunday column. 3. The third row only contains the Afternoon row heading. 4. The fourth row only contains the Dinner entry, since "Relax" spans into the cell next to it. If you'd like to see how the browser interprets the code above, feel free to copy and paste it into the code editor to understand it a little better.
Give an example of a CSS table border
table, td { border: 1px solid black; }