HTML 5 Flashcards
What is a text editor?
A text editor is a program that allows us to write code.
What does HTML stand for?
Hypertext Markup Language
What are the rules that every html file must follow (tags)?
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
What is the shortcut (in sublime) for quickly creating the default tags for html page?
Type html and hit the tab key.
<!DOCTYPE html>
All HTML documents must start with a <!DOCTYPE> declaration.The declaration is not an HTML tag. It is an “information” to the browser about what document type to expect.
What is the difference between a tag and an element?
HTML element is the collection of start tag, its attributes, an end tag and everything in between (content). An HTML tag (either opening or closing) is used to mark the start or end of an element
<b></b>
<b> tag is used to highlight in bold that part of the text, which we want to make more obvious for the user.</b>
<p>
</p>
This element creates a paragraph in html file.
<h1>
</h1>
This element creates a header in html file.
<strong></strong>
The strong element will bold a text. The <b> element was used in the past.</b>
<em></em>
The emphasis element will italicize text.
<ol>
</ol>
The <ol> tag defines an ordered list. An ordered list can be numerical or alphabetical.
Ex:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ul>
</ul>
The <ul> tag defines an unordered (bulleted) list.
Ex:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<li>
</li>
The <li> HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list ( <ol> ), an unordered list ( <ul> ), or a menu ( <menu> ).
What are nested list?
Nested list are list inside of list.
Ex:
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</ul>
What are self closing tags?
A self-closing tag in HTML is a kind of HTML tag that does not need to be closed manually by its closing tag, which means it does not have a separate closing tag as </tag>. An example of this is an <img></img> tag that allows you to add an image to a web page.
<br></br>
The <br></br> tag inserts a single line break. (There is no closing tag)
<hr></hr>
The <hr> HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
The <hr> element is most often displayed as a horizontal rule that is used to separate content (or define a change) in an HTML page.
<img></img>
The <img></img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web pages. The <img></img> tag creates a holding space for the referenced image and it has a required attribute called src, which has to be the URL of the image.
What are the two required attributes for an <img></img> tag?
- src - Specifies the path to the image and must be set to the image’s source, or the location of the image. The value of src must be the uniform resource locator (URL) of the image leading to its local or web address.
- alt - Specifies an alternate text for the image, if the image for some reason cannot be displayed
What do attributes require?
Attributes require a name and a value.
Ex: <p lang= "en-us">Paragraph in English</p>
What are attributes?
An attribute in HTML provides additional information about an HTML element. It comes in a name and value pair with the structure name=”value”. For example, you can specify the width of an HTML element with the attribute width=”500”.
<a></a>
The anchor tag, used to specify the text that is the “anchor” for a link.
Ex:
<a>Learn to code!</a>
<button></button>
This is a button tag.
- or
- element?
On the 4th of September you will learn about E = MC2.
The amount of CO2 in the atmosphere grew by 2ppm in 2009.
td stands for table data. Each cell of a table is represented using a element.
|
57
|
The element is used just like the | element but its purpose is to represent the heading for either a column or a row. (th stands for table heading).
|
58
How can we use the scope attribute in a table?
The scope attribute can be used on the
element to indicate whether it is a heading for a column or row.
Ex:
| Saturday |
Tickets sold: |
59
colspan attribute
Table data can span columns using the colspan attribute.
60
rowspan attribute
Table data can span rows using the rowspan attribute.
61
What three sections can a table be split into?
a head, a body, and a footer.
62
A table’s head is created with the element.
63
A table’s body is created with the element.
64
A table’s footer is created with the element.
65
What are tags also called?
Markup
66
What is structural markup?
The elements that you can use to describe both headings and paragraphs.
67
The
68
The
69
What should you do with a page that has several articles (or even summaries of articles)?
If a page contains several articles, then each individual article would live inside its own article element.
70
What are some examples of nested articles?
A blog post might live inside one
71
(inside an article)
When the
72
(outside an article)
When the
73
Contains all types of media (images, videos, graphs, diagrams, code samples, text that supports the main body of an article). The figure element should also contain a
74
The
75
The
76
What is an empty element?
An element with no closing tag
77
The
78
The HTML element is used to create interactive controls for web-based forms in order to accept data from the user. Input is a self closing tag.
79
How do I create a input form that allows users to enter a text?
We create a form element and within our form element we add an input element and set the type to text.
Ex:
80
How do you create a form for a user's email?
We create a form element and within that element we add the input element. We set the type to email and include the value required to make adding an email required to continue.
Ex:
81
How do you create a form for a user's birthday?
We create a form element and within that element we add the input element. We set the type to date.
Ex:
82
How do we create a reset button?
We create a form element and within that element we add the input element and set the type to reset.
Ex:
83
How do we create radio buttons?
We create a form element and within that element we add the input element and set the type to radio. If we have multiple buttons, we need to use the name attribute. (each button should have the same name)
Ex:
84
How do we create checkboxes?
We create a form element and within that element we add the input element and set the type to checkbox.
Ex:
85
How do you create a dropdown field?
Create a select element and within that element add an option element. Set the value attribute to the option available in the dropdown field. Make sure to close the option tag.
Ex:
Cars:
86
What is a markup language?
A markup language is a computer language that defines the structure and presentation of raw text.
87
How does HTML work?
In HTML, the computer can interpret raw text that is wrapped in HTML elements.
88
What is HyperText?
HyperText is text displayed on a computer or device that provides access to other text through links, also known as hyperlinks. You probably clicked on a couple of hyperlinks on your way to this Codecademy course.
89
What is an HTML element?
HTML element (or simply, element) — a unit of content in an HTML document formed by HTML tags and the text or media it contains.
90
What is a HTML tag?
HTML Tag — the element name, surrounded by an opening (<) and closing (>) angle bracket.
91
What is HTML open tag?
Opening Tag — the first HTML tag used to start an HTML element. The tag type is surrounded by opening and closing angle brackets.
92
What is HTML closing tag?
Closing tag — the second HTML tag used to end an HTML element. Closing tags have a forward slash (/) inside of them, directly after the left angle bracket.
93
What is HTML content?
Content — The information (text or other elements) contained between the opening and closing tags of an HTML element.
94
What can attributes do for HTML elements?
Usually attributes either change an element’s behavior, provide metadata about the element, or provide labeling information about the element.
95
How can we validate our HTML code?
The best strategy is to start by running your HTML page through the Markup Validation Service — created and maintained by the W3C, the organization that looks after the specifications that define HTML, CSS, and other web technologies. This webpage takes an HTML document as an input, goes through it, and gives you a report to tell you what is wrong with your HTML.
96
Why should we validate our HTML code?
We should do so because of the browser permissive nature - the badly-formed code will still be published but the browser will try to interpret it and this will result in unpredictable results and errors.
97
How do we add a tooltip to a clickable element?
To add tooltips to a clickable element like a link, add it as the title attribute.
Codecademy is the best place to learn to code!
98
What is a tooltip?
The tooltip, also known as infotip or hint, is a common graphical user interface (GUI) element in which, when hovering over a screen element or component, a text box displays information about that element, such as a description of a button's function, what an abbreviation stands for, or the exact absolute time stamp over a relative time ("… ago").
99
What is the main issue with tooltips created with the title attribute?
The title attribute is HTML’s built-in way of creating tooltips, but is known to cause a variety of accessibility issues. Developers have come up with a number of ways to create tooltips that are more accessible, but this generally requires using CSS and JavaScript, which fall out of the scope of this deck. When creating tooltips in the wild, you should research ways to make them accessible for everyone.
|