HTML Flashcards
1
Q
HTML stands for
A
Hyper Text Markup Language
2
Q
Declaration that defines that this is an HTML5 document.
A
“!DOCTYPE html”
3
Q
The entire document is surrounded by what?
A
html tags
4
Q
What is the HTML links tag? And what do you use to give the link’s destination?
A
<a>Words here</a>
5
Q
What tags is the visual part of the HTML document between?
A
Body tags
6
Q
What do you use to make HTML headers and what range do they go through?
A
<h1>...<h6>
| Head tags</h6></h1>
7
Q
What is the HTML paragraphs tag
A
<p></p>
8
Q
What is the HTML links tag? And what do you use to give the link’s destination?
A
<a>Words here</a>
9
Q
What is the HTML images tag? And what are common attributes to go with it?
A
“img” tags. The source file is defined by src. The alternative text is defined by alt. And you can choose the width and height with simply width and height.
10
Q
What is an HTML element defined as?
A
An HTML element is defined by a start tag, some content, and an end tag
11
Q
True or False: HTML elements can be nested
A
True
12
Q
What is an Empty HTML element and give me an example
A
HTML elements with no content are called empty elements, they don’t use closing tags. <br></br> is an example of an empty HTML.
13
Q
What do HTML attributes do?
A
HTML attributes provide additional information about HTML elements
14
Q
What HTML elements can have attributes?
A
All HTML elements
15
Q
Where are attributes specified?
A
Attributes are always specified in the start tag
16
Q
What attribute does an “a” tag use to get the url of the page link?
A
href
17
Q
The src attibute is commonly used for what tag?
A
The img tag
18
Q
What is an Absolute URL/Path?
A
An absolute URL/Path links to an external image/page that is hosted on another website
19
Q
What is a Relative URL/Path?
A
A relative URL/Path links to an image/page that is hosted within the website. You can use no slash to reach content relative to the current page, or you can use a slash for content relative to the whole domain.
20
Q
How do you specify the height and width of an image?
A
Inside the img tag you use the width and height attributes (in pixels).
21
Q
What is the alt attribute used for?
A
The alt attribute is a required attribute for the img tag that specifies an alternate text for an image, if the image cannot be displayed or the if they user uses a screen reader.
22
Q
What attribute would you use to add things suck as color, font, size and more to your element?
A
The style attribute
23
Q
What is the lang attribute and where does it go?
A
The lang attribute should always be inside the html tag, to declare the language of the Web page.
24
Q
Can you add more than just the basics to the lang attribute?
A
Yes. You can not only include the language code, but also the country codes (i.e. “en-US”).
25
How would you make a tooltip?
By using the title attribute, which defines some extra information about an element, you create a tooltip for when the element is moused over.
26
What is the hr tag?
The hr tag defines a break in an HTML page, and is most often displayed as a horizontal rule.
27
What tag defines a line break? Similar to an hr tag but can be used within paragraphs as well
The br tag.
28
What does the pre tag do?
The pre element defines preformatted text. This means the text inside a pre element is displayed in a fixed-width font, and it preserves both spaces and line breaks.
29
What tag(s) could be used for bold-like text?
"b" or "strong" tags
30
What tag(s) could be used for italic-like text?
"i" or "em" tags
31
What tag(s) could be used for highlighted text?
"mark" tags
32
What tag(s) could be used for small sized text?
"small" tags
33
What tag(s) could be used for text that is crossed out?
"del" tags
34
What tag(s) could be used for underlined text (to be inserted)?
"ins" tags
35
What tag(s) could be used for subscript and superscript text?
"sub" tags for subscript.
| "sup" tags for superscript.
36
What is another name for a tag in html?
An element
37
What is the "blockquote" element for?
The "blockquote" element defines a section that is quoted from another source. (Browsers usually indent this element.)
38
What tag do you use to define a short quotation?
"q" tag
39
What tag would you use with the title attribute to show the full name of an acronym or abbreviation?
The "abbr" tag
40
What does the "address" tag do?
The "address" tag defines the contact information for the author/owner of a document or an article. (The text in the "address" element usually renders in italic, and browsers will always add a line break before and after the address element.)
41
What happens when you use the "cite" tag?
The tag will usually render in italic, defining the title of a creative work.
42
In an odd situation where you would want text to be written from right to left, how would you do that?
By using the "bdo" (Bi-Directional Override) tag, that is built for this.
43
How do you add comments for HTML?
The comment tags for html are as follows:
44
HTML colors are specified with what?
Predefined color names, RGB, HEX, HSL, RGBA, or HSLA values
45
What does RGB stand for?
Red, Green, and Blue light sources
46
What does HSL stand for?
Hue, Saturation, and Lightness
47
What is HEX for colors?
Hexadecimal color is specified with: #RRGGBB (R = red) (G = green) (B = blue)
48
What does the A stand for in RGBA and HSLA?
For both the A stands for Alpha channel, which controls the opacity.
49
What 3 basic html attributes deal with colors and what are they used for?
Background Color is created with the "background-color" attribute. Text Color is created with the "color" attribute. Lastly, you can control the Border Color with the "border" attribute.
50
What tag and attributes do you use to connect with a CSS file?
"link" is the tag. "rel = 'stylesheet'" is what is used to note that you are linking to a Cascading Style Sheet. "href" is where you put the file path to get to your css file.
51
Where will a linked page display by default?
The current browser window.
52
What attribute is used to specify where to open a link?
"target" attribute
53
What options does the "target" attribute have?
"_self" (default) opens in the same window and tab.
"_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.
54
What can you use to send an email with the "href" attribute?
By putting "mailto:" inside the "href" attribute, followed by the email address you wish to send it to.
55
What are the 4 different stages a HTML link can be displayed at?
Visited, unvisited, hover, or active. (a:visited, a:link, a:hover, a:active)
56
How do HTML Bookmarks work?
By using an id and href attribute you link to the id whether it's on the current page or not.
Example: (for current page)
id="C4"
href="#C4"
57
What attributes are required for the "img" tag?
src and alt
58
True of False: The "img" tag is an empty tag.
True.
59
True or False: HTML "img" tags do not work with animated GIFs.
False, HTML allows animated GIFs.
60
What are some common image formats?
APNG - Animated Portable Network Graphics - .apng
GIF - Graphics Interchange Format - .gif
ICO - Microsoft Icon - .ico, .cur
JPEG - Joint Photographic Expert Group image - .jpg, .jpeg, .jfif, .pjpeg, .pjp
PNG - Portable Network Graphics - .png
SVG - Scalable Vector Graphics - .svg
61
What does the "map" tag define?
"map" defines an image map
62
What does the "area" tag define?
"area" defines a clickable area inside an image map
63
What does the "picture" tag define?
"picture" defines a container for multiple image resources
64
What is an image map?
An image map is an image with clickable areas. The areas are defined with one or more "area" tags.
65
How do you connect an "img" element with a "map" element?
The "img" tag uses the "usemap=#" attribute followed with the name of the map. Put "name=" in the tag of the "map" element to name the image map.
66
What are the shape types of an "area" element?
rect, circle, poly, default
67
Shape="rect" breakdown of coordinates...
start-x-axis, start-y-axis, end-x-axis, end-y-axis
68
Shape="circle" breakdown of coordinates...
center-x, center-y, radius
69
Shape="poly" breakdown of coordinates...
x1, y1, x2, y2, x3, y3,...
70
How do you insert a background image to your html element?
"background-image" style with "url('image_location")
71
How do you stop an image from repeating itself in its element?
"background-repeat: no-repeat"
72
What 2 styles do you use to make an image cover the entire element it is within?
"background-attachment: fixed"
| "background-size: cover"
73
What does "background-size: 100% 100%;" do?
It stretches the background image to fit the entire element.
74
What always needs to be the last child element of the "picture" element? And what elements would be above it?
"img" element. With any number of "source" elements above it.
75
What tag defines an HTML table and what other tags go inside it?
"table" tag; with the "tr" (table row), "th" (table header), and "td" (table data/cell) tags inside.
76
What attribute would you use to span multiple rows or columns?
"rowspan" and "colspan" attributes respectively
77
What types of HTML lists are there and what are there tags?
Unordered (ul)
Ordered (ol)
Description (dl)
78
What tags go inside list tags?
List Item tags (li)
| For "dl" you have term names ("dt") followed by their descriptions ("dd")
79
What options do you have for unordered list's item marker? (list-style-type)
disc (default) - it looks like a bullet
circle
square
none - items will not be marked
80
How to choose how an ordered list is counted?
The "type" attribute.
type="1" - means numbered with numbers
type="A" - means numbered with uppercase letters
type="a" - means numbered with lowercase letters
type="I" - means numbered with uppercase roman numerals
type="i" - means numbered with lowercase roman numerals
81
How would you start an ordered list at 25?
By adding the attribute "start". Such as start="25".
82
How do block-level elements work?
Block-level elements always start on a new line and take up the full width available.
83
How do inline-level elements work?
Inline-level elements do no start on a new line and it only takes up as much width as necessary.
84
What is a good element to use for a container?
The "div" tag/element
85
What is the "span" element commonly used for?
The "span" element is an inline container used to mark up a part of a text, or part of a document.
86
True or False: Multiple HTML elements can share the same class.
TRUE
87
Can different element types share the same class?
Yes
88
How would you give an HTML element 2 classes?
By adding a space between them, like so, "city main".
| This gives the element the "city" and "main" class.
89
True or False: Multiple HTML elements can share the same id.
FALSE; you cannot have more than one element with the same id in an HTML document.
90
How can you use ids to create an HTML bookmark?
By giving your element an id and using that id in an href of another element they will be sent to where your id is at on the page.
91
What is an HTML iframe?
An HTML iframe is used to display a web page within a web page.
92
What attributes should be used within the iframe element?
"src" to get the url of what will be in the iframe.
| "title" to give a description for screen readers.
93
True or False: Iframes do not have a border around it by default.
False; by default, an iframe has a border around it.
94
If you are to go to an iframe from a link what attributes do you use?
The "target" attribute of the link must refer to the "name" attribute of the iframe.
95
Is Javascript a server-side or client-side script?
Client-side
96
What tag should be used to display a description if for some reason a browser will not support scripts?
The "noscript" tag
97
Where is this picture file located?
| img src="../picture.jpg"
The picture file is located in the folder one level up from the current folder
98
Where is this picture file located?
| img src="/images/picture.jpg"
The picture file is located in the images folder at the root of the current web
99
Where is this picture file located?
| img src="images/picture.jpg"
The picture file is located in the images folder in the current folder
100
Where is this picture file located?
| img src="picture.jpg"
The picture file is located in the same folder as the current page
101
What 6 elements are held within the "head" element container?
"title", "style", "meta", "link", "script", "base"
102
True or False: the "title" element required.
TRUE
103
What text-only element is shown in the browser's bar, provides a name for the page when it is added to favorites, and displays a name for the page in search engine-results?
The "title" element.
104
What does the "style" tag in the "head" container do?
The "style" element is used to define style information (CSS) for a single HTML page
105
What does the "link" tag in the "head" container do?
The "link" element defines the relationship between the current document and an external resource.
It is most commonly used to link to external style sheets.
106
This is the user's visible area of a web page, what is it?
The viewport
107
What sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
meta name="viewport" content"width=device-width"
108
What sets the inital zoom level when the page is first loaded by the browser?
meta name="viewport" content="initial-scale=1.0"
109
What does the "script" element do?
The "script" element is used to define client-side JavaScripts
110
What does the "base" element do?
The "base" element specifies the base URL and/or target for all relative URLs in a page.
There can only be one single "base" element in a document.
111
What must the "base" tag have as attributes?
The "base" tag must have either an href or a target attribute present, or both.
112
The "meta" element is typically used to specify these...
The "meta" element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings.
113
"meta" tags, define the character set used:
meta charset="UTF-8"
114
"meta" tags, define keywords for search engines:
meta name="keywords" content="HTML, CSS, JavaScript"
115
"meta" tags, define a description of your web page:
meta name="description" content="a description here"
116
"meta" tags, define the author of a page:
meta name="author" content="Author's Name"
117
"meta" tags, refresh document every X seconds:
meta http-equiv="refresh" content="X"
118
"meta" tags, setting the viewport to make your website look good on all devices:
meta name="viewport" content="width=device-width, initial-scale=1.0"
119
HTML has several semantic elements that define the different parts of a web page layout, what are the 13 different elements?
article, aside, details, figcaption, figure, footer, header, main, mark, nav, section, summary, time
120
What are the four different techniques to create a multicolumn html layout?
CSS framework, CSS float property, CSS flexbox, CSS grid
121
Give an example of a CSS framework.
W3.CSS, Bootstrap
122
What is Responsive Web Design?
Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices.
123
What tag do you add to the header to create a responsive website?
Add the 'meta name="viewport" content="width=device-width, initial-scale=1.0' tag
124
What would need to be added to an image styling to have the image scale with the size of the screen?
width:100%
125
What would need to be added to an image styling to have the image scale with the size of the screen, but not exceed the images original size?
max-wdith:100%;
| height:auto;
126
What unit can you use to have the text size follow the size of the broswer?
The text size can use the "vw" unit (viewport width) to follow the size of the browser window
127
What do you use to change the styling for the different screen sizes?
Media Queries
128
What does the "article" element do?
The "article" element defines independent, self-contained content
129
What does the "aside" element do?
The "aside" element defines content aside from the page content
130
What does the "details" element do?
The "details" element defines additional details that the user can view or hide
131
What does the "figcaption" element do?
The "figcaption" element defines a caption for a "figure" element
132
What does the "figure" element do?
The "figure" element specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
133
What does the "footer" element do?
The "footer" element defines a footer for a document or section
134
What does the "header" element do?
The "header" element specifies a header for a document or section
135
What does the "main" element do?
The "main" element specifies the main content of a document
136
What does the "nav" element do?
The "nav" element defines the navigation links
137
What does the "section" element do?
The "section" element defines a section in a document
138
What does the "summary" element do?
The "summary" element defines a visible heading for a "details" element
139
What dos the "time" element do?
The "time" element defines a date/time
140
What are the different tags HTML can show user input and computer code?
By using the "kbd", "samp", "code" and "var" elements
141
Should you close empty elements?
Yes, because XML and XHTML require it and it is good practice.
142
What do you replace reserved characters in HTML with?
With character entities (like for a non-breaking space)
143
What character set is the standard for HTML5?
UTF-8
144
What is XHTML?
XHTML is HTML defined as an XML application. XHTML is stricter version of HTML. XHTML stands for EXtensible HyperText Markup Language.
