HTML Foundation Flashcards
(191 cards)
1
Q
Does it matter if you have space between tags?
A
No, but it’s important to keep code neat so it’s easier to read for the coder.
2
Q
What is the p tag?
A
The paragraph tag which is used to denote a paragraph of text.
3
Q
What information within the head IS displayed on a page tab in a web browser?
A
Any text within the title tag.
4
Q
What is coding?
A
Coding is writing code. Code is any computer language.
5
Q
What is JavaScript?
A
JavaScript is a computer language which makes your web pages intelligent on the client side.
6
Q
Why do we have opening and closing tags in HTML?
A
Tells the web browser the beginning and the end of a tag.
7
Q
When you select ‘View Page Source’ .. what are you doing?
A
You are checking to see the code that created the web page.
8
Q
What does HTML stand for?
A
HyperText Markup Language
9
Q
What is the ‘DOCTYPE’ tag used for?
A
This tells the web browser which version of HTML code we’re using in the web page.
10
Q
What does a forward slash / in a tag indicate?
A
The closing tag.
11
Q
HTML is made up of small sections of code - what are those code sections called?
A
Elements.
12
Q
Which tag closes a paragraph tag?
A
13
Q
What is the purpose of the head element?
A
This element contains metadata (data about data).
14
Q
What is a web browser?
A
A web browser is an application used to view web pages.
15
Q
What is a markup language?
A
- A markup language specifies code for the presentation (formatting) of text i.e. the layout and style.
- The code used to specify the formatting are called tags.
- HTML is one example of a markup language.
16
Q
What is tag nesting?
A
Tag nesting is where an element (opening and closing tags) is within another element.
17
Q
What are the names of the two characters which are at the start and end of a tag?
A
Angle brackets.
18
Q
When you use the image tag to add an image to the web page, is it embedding the image into the html file or pointing to where the image is stored?
A
Pointing to where the image is stored.
19
Q
What is the purpose of the element?
A
The element tells the web page when the html code begins and ends.
20
Q
What is the three purposes of the title element?
A
The title element:
- Defines a title in the browser tab
- Provides a title for the page when it is added to favorites
- Displays a title for the page in search engine results
21
Q
What is a code editor?
A
A code editor is an application used to write code faster, by suggesting tags.
22
Q
Which three types of application can be used to create web pages?
A
- Simple Text Editor 2. Code Editor 3. WYSIWYG
23
Q
What is a WYSIWYG app?
A
WYSIWYG stands for What You See Is What You Get. It is a ‘point and click’ application which allows you to build websites without having to write code.
24
Q
What does the opening html tag look like? And what does it do?
A
The html tag tells the web browser that this is a html/web page.
25
Why should you name your first page 'index.html'?
Because the index page is the first page the web server loads.
26
What is the purpose of the following tag?
The DOCTYPE tag tells the web browser which version of HTML is being used on the web page.
27
What is CSS?
CSS is a computer language used to improve the look of the website.
28
What is the easiest way to view a web page's source code?
Right click on the page and select 'View Page Source'.
29
Why does the code editor put numbers beside the lines of code?
To help you find code you might be looking for.
30
What is a simple text editor?
It is an application used to write text.
31
What is a computer language?
It is a written language used to give instructions to computers.
32
What does CSS stand for?
Cascading Style Sheet
33
What is hypertext?
Hypertext is the text in a web page.
34
What kind of file is a web page file?
A .html file.
35
Why should you use the .html extension to name the web page?
The '.html' extension tells computers that the file is a web page.
36
What are the two major elements on a web page?
The head and body tags.
37
Can you use a simple text editor to write HTML?
Yes.
38
What should be the first tag in an html page?
The DOCTYPE tag.
39
Why should you write tags in lowercase?
Easier to read.
40
What will happen if you move an image, after using the image tag to add it to a web page?
The broken image icon will appear in your page, since the web browser will not be able to find the image.
41
What is the proper order of the major tag sections?
Head Title Body
42
What is an element in HTML?
An HTML element usually consists of a start tag and end tag, with the content inserted in between.
43
What are the three main computer languages used to create websites?
1. HTML 2. CSS 3. JavaScript
44
Give a full example of an image tag.
![]()
45
What is HTML?
HTML is a computer language. It is used as the foundation or building block for creating websites.
46
When was the HTML computer language first invented and by whom?
1991 by Tim Berners Lee
47
When was HTML 5 created?
2014
48
What is a HTML element?
It is a section which encompasses at least one starting tag, usually a pair for example the head, title or body tags.
49
What is XHTML?
Created in 2000, it is not HTML, but another computer language called XML.
50
What does the paragraph
tag do?
Adds a line break before and after the text.
51
Is whitespace ignored by web browsers?
Yes, spacing is controlled by the tags.
52
What exactly are websites?
HTML pages that are connected together.
53
Why did we create an index.html page in our website folder?
Web servers automatically (by default) send out the index.html page when you visit a website, so it's good to have it.
54
Why does it make sense to have self describing HTML page names?
Self describing page names (and file names) are great because they tell you something about the page or file.
55
Which HTML tag is used to connect web pages together?
The a tag with angle brackets.
56
What is a tag attribute?
A tag attribute tells you additional information about the tag.
57
What is this code: 'href'?
It is a tag attribute of the hyperlink tag.
58
What does 'href' stand for?
Hypertext Reference
59
What does 'paths' mean in web design?
Paths in web design refer to how we point to files and folders in hyperlinks.
60
What does this code do: ../
It tells the web browser to go up one directory.
61
(Image attached)
Go up two directory levels.
62
For hyperlinks, if we want the web browser to search for a file/web page down a directory, into a sub-folder, what would we put before the .html document?
sub\_folder\_name/htmldocument.html
63
What is another name for a web browser?
A client app.
64
What is the three differences between a client computer and a server computer?
Client computers request information.
Server computers serve up information.
Server computers have server apps installed on them.
65
What is the type of server app used to serve websites?
A web server.
66
When a web browser request a web page from a server, and the server sends a page back, this process is called what?
The request / response cycle.
67
How do you make an image into a hyperlink?
By wrapping a hyperlink (a) tag around an image (img) tag.
68
It adds a 5 pixel solid border around the image.
69
What does 'http' mean?
hypertext transfer protocol.
70
What does the http command tell the web browser?
It tells the web browser to use the hypertext transfer protocol.
It tells the browser HOW to send the information.
71
What does the ordered list tag look like?
72
What does a list item TAG PAIR look like?
73
What is the sub tag of an ordered or unordered list?
74
How do you set the number BESIDE the item in an ordered list?
The number beside the item is determined by its' position in the list.
75
The ol tag tells the web browser to put numbers beside the list items. What happens to list items inside a ul tag?
Bullets are inserted
76
What does the 'type' attribute do in an ordered list?
It changes the characters displayed beside list items.
77
If you add this code to the ol tag: type="a"
What happens?
It changes the list items to display lowercase letters beside each item, starting with the letter 'a' then 'b' and so on.
78
What does dl stand for?
Description List
79
What are the sub tags of dl?
dt and dd
80
What does
## Footnote
stand for?
Data term
81
Which list type is the LEAST popular?
Description list.
82
If CSS is for styling, what is HTML for?
HTML is there to create structure in a web page.
83
What meaning does the strong tag give to text?
It makes the text bolder.
84
What is 'code folding'?
Code folding is what code editor apps do to hide code to make more space on the screen.
85
What is the div tag short for?
Division
86
What is the purpose of the div tag?
To create sections or divisions.
87
What are examples of 'neutral container elements'?
div or span tags
88
What TYPE of tags have virtual boxes around them?
block level tags
89
The p (paragraph) tag is what type of tag?
Block level tag.
90
What does this CSS code do: a {display: block}
The CSS code changes the tag from being inline, to block level.
91
What are HTML comment tags for?
HTML comment tags allow coders to leave messages which won't be visible to site visitors.
92
What does the opening comment tag look like?
93
How does a web browser process a web page?
Top to bottom.
94
What does the closing comment tag look like?
95
What are domain names?
They are unique addresses on the web.
96
What is a TLD in respect of domains?
TLD is a domain name extension and is short for 'Top Level Domain'.
97
What does the web browser usually do with information entered into a form?
It sends the form information to a server app for processing.
98
What does an opening and closing form tag look like?
99
It creates a textbox for USERS to be able to put text into a form.
100
It hides the text entered.
101
It creates a submit button.
102
How do you tell the web browser WHERE to send the form information?
You add the 'action' attribute (with a location value) to the form tag.
103
What is PHP?
PHP stands for PHP: Hypertext Preprocessor.
It's a programming language used to create apps that can process forms.
104
This is example of what:
?username=StefanPieEater&password=gofish
1. A query string
2. A set of name value pairs
3. Information that a user entered into a form.
105
What does the '&' symbol in the query string do?
It acts as a separator between the name value pairs.
106
What are some of the programming languages that can process HTML forms?
Python, Ruby, PHP and Java
107
What is a server-side web app?
- An app that runs on servers.
- An app that can process HTML forms.
- An app created in languages like PHP, Python and others.
108
What does the form 'method' attribute tell the web browser?
HOW to send the information to the server for processing.
109
Name two method attribute values.
GET and POST.
110
What is the default method type HTML forms send data with?
GET
111
What form method type, adds the data/information to the query string?
GET
112
What is the form method type which sends the form data behind the scenes?
POST
113
Do forms have sub tags?
Yes
114
What does the web browser usually do with information entered into a form?
It sends the form information to a server app for processing.
115
What does a proper HTML form tag look like?
116
If you add the attribute 'checked', to a checkbox input tag, what does that do?
It automatically checks that checkbox.
117
What is the form attribute name, that sets WHERE the form sends the information.
action
118
What is the big difference between checkboxes and radio buttons?
With radio buttons, you can only select one option in the radio group.
119
How do you set how big (how many characters) a text input tag can display?
Using the 'size' attribute.
120
What does the tr tag do?
It creates a table row.
121
Which table tag creates the table's columns?
The td tags. TD stands for table data.
122
Where is the header of a table column?
It is the 1st item in a table column.
123
What can we do to add borders to tables?
Use a CSS style tag in the head tag.
124
What is name for the space created by a td tag?
A table cell.
125
What is the tag that creates a table header?
The th tag.
126
By default, how are table headers displayed?
The text is aligned to the center and made bold.
127
What is the td tag attribute used to extend/span a column/cell across other columns?
colspan
128
How would you add a colspan of 3 to a td opening tag?
129
How would you complete this tag?
130
What is the purpose of the
## Footnote
tag?
To set a tr tag as the footer.
131
What happens to a tr at the top of a table, when you put the tfoot tags around it?
It tells the web browser that the tr is a footer.
It pushes the tr down, so it is displayed at the bottom of the table.
132
What does the thead tag do?
Creates the table header
133
The tags thead and th seem very similar, but they are different. Which is true below?
All of the above.
134
What happens to a tr tag pair, when you put it inside a thead element?
It pushes the tr tag pair to the top of the table.
135
What does the rowspan tag attribute do?
It spans the td tag to span two rows.
136
Which is true below:
All of the above.
137
What are the two purposes of HTML?
To tell the browser what is in the page and the meaning of what is in the page.
138
What does the 'lang' attribute do?
It tells the web browser (and search engines) what human language we are using in the page. Ex: English USA.
139
Can the 'lang' attribute be added to any tag?
Yes, this is true.
140
What does 'meta' mean?
Information about information.
141
What does 'meta charset' do?
It tells the web browsers and search engines what character set to use in the web page.
142
What is the point of the head element of the page?
Aside from the the title element, the head element contains information which is not displayed to the user.
143
What is the style tag used for?
To add CSS code in to.
144
What is the script tag used for?
To add javascript into the page.
145
What is 'scripting'?
Scripting is another word for programming.
146
With the current version of HTML (HTML5) do you need to use the head tag?
No.
147
How do you set the colour of the p tags to black using CSS?
148
How would you center align a h1 tag using CSS?
149
How many property/value pairs are in this CSS code: h1 {color: red; text-align: center}
2
150
What is 'class selector' short for?
Classification selector
151
Would a tag selector, for example h1, select all, or just one of the h1 tags in the page?
All.
152
What KIND OF selector is this: .aClass {color: red}
A class selector.
153
What kind of selector is this: .majorButton
A class selector.
154
What KIND OF selector is this: #unique
An ID selector.
155
Which one of the statements below is true:
## Footnote
- An ID selector should only be applied once in a page.
- Class selectors are designed to be applied many times in a page.
- ID selectors start with this symbol: #
- Class selectors start with a period - for example: .myclass
All are true.
156
Why is it usually better to use CSS classes, instead of applying CSS with the tag's style attribute?
- Using CSS classes allows you to not repeat code.
- Using CSS classes makes it easier to update code.
- Using CSS classes will mean less code in your pages.
157
How many layout types are there in CSS?
4
158
What are the four layout types in CSS?
1. Adaptive
2. Static
3. Liquid
4. Responsive
159
Which layout style/type, is the most flexible because it changes position of tags and it reflows to a changing screen size?
Responsive layout.
160
Is this true? Liquid layouts reflow but they have their limits when the screen size gets too small.
True
161
What is the best way to describe adapative design?
Adaptive design is like a static design, combined with some responsive design techniques.
162
Which option below is the ID selector?
.myStar
h1
p
#mainDiv
#mainDiv
163
What are the 9 essential HTML tags (according to Stef)?
div, p, ol, ul, li, h, a, br, img
164
Does the break (br) tag have a closing tag?
No
165
What does the break tag do?
Creates a line break
166
What are the three image types we can use in web pages?
gif, jpeg, png
167
What is the best image type for photos?
jpeg
168
Which is the most advanced image format?
png
169
For images with solid colors, what two image formats are best?
png and gif
170
Which image format is NOT an HD format?
gif
171
Which image format does NOT have transparency?
jpeg
172
Which image format supports animations?
gif
173
Why do we want to use smaller images?
Smaller images equate to faster web page loading.
174
Is the ROOT of a website the base directory of the website?
Yes
175
What is the first page the web server sends out, when someone comes to a website?
Index.html
176
In this code 'a\> href="index.html"\>google
index.html
177
This code does what? ..\<. a target="\_new" href="http://www.studioweb.com/courses/css-course.html"\>CSS Course
1. Links to a public website
2. Links to a sub directory
3. Loads the page in a new tab or window
4. All of the above
All of the above.
178
What is the W3C?
An organization that sets the standards for the Web, headed by the inventor of the Web, Tim Berners-Lee.
179
What does the
## Footnote
tag do?
The
## Footnote
creates the visible part of a web page.
180
Why should you align your code?
It makes the code easier to read, which is good for coding.
181
What is a pixel?
A tiny dot on the screen.
182
True or false, when you set the font size to pixels, the font size is not fixed and changed with the size of the window.
False. The font size is fixed and does not change depending on the size of the window.
183
What is VW short for?
Viewport Width
184
VW = viewport width. How is this best described:
## Footnote
- viewport width is a fixed sized unit of measure.
- viewport width is used to set the size of the viewport.
- viewport width is a relative unit of measure - it flexes.
Viewport width is a relative unit of measure - it flexes.
185
If I set my font size to 5vw, what will happen to the font when I EXPAND the browser window?
The font size will get bigger.
186
VW (viewport width) is a slice of the WIDTH of your browser window, so what is 4 vw?
- 4/100th of the width of your screen.
- 4% of the width of your screen.
- 4vw is equal to 4 slices out of 100 of your screen's width
- All of the above are true!
All of the above are true!
187
When would you use VW (Viewport Width)?
This is primarily used for mobile phones and tablets.
188
What is a block-level tag?
A block-level element/tag always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
189
What are examples of block level tags?
190
What are Inline Elements?
An inline element does not start on a new line and only takes up as much width as necessary.
191
What are some examples of Inline Elements?
