HTML Foundation Flashcards
Does it matter if you have space between tags?
No, but it’s important to keep code neat so it’s easier to read for the coder.
What is the p tag?
The paragraph tag which is used to denote a paragraph of text.
What information within the head IS displayed on a page tab in a web browser?
Any text within the title tag.
What is coding?
Coding is writing code. Code is any computer language.
What is JavaScript?
JavaScript is a computer language which makes your web pages intelligent on the client side.
Why do we have opening and closing tags in HTML?
Tells the web browser the beginning and the end of a tag.
When you select ‘View Page Source’ .. what are you doing?
You are checking to see the code that created the web page.
What does HTML stand for?
HyperText Markup Language
What is the ‘DOCTYPE’ tag used for?
This tells the web browser which version of HTML code we’re using in the web page.
What does a forward slash / in a tag indicate?
The closing tag.
HTML is made up of small sections of code - what are those code sections called?
Elements.
Which tag closes a paragraph tag?
What is the purpose of the head element?
This element contains metadata (data about data).
What is a web browser?
A web browser is an application used to view web pages.
What is a markup language?
- 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.
What is tag nesting?
Tag nesting is where an element (opening and closing tags) is within another element.
What are the names of the two characters which are at the start and end of a tag?
Angle brackets.
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?
Pointing to where the image is stored.
What is the purpose of the element?
The element tells the web page when the html code begins and ends.
What is the three purposes of the title element?
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
What is a code editor?
A code editor is an application used to write code faster, by suggesting tags.
Which three types of application can be used to create web pages?
- Simple Text Editor 2. Code Editor 3. WYSIWYG
What is a WYSIWYG app?
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.
What does the opening html tag look like? And what does it do?
The html tag tells the web browser that this is a html/web page.
Why should you name your first page ‘index.html’?
Because the index page is the first page the web server loads.
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.
What is CSS?
CSS is a computer language used to improve the look of the website.
What is the easiest way to view a web page’s source code?
Right click on the page and select ‘View Page Source’.
Why does the code editor put numbers beside the lines of code?
To help you find code you might be looking for.
What is a simple text editor?
It is an application used to write text.
What is a computer language?
It is a written language used to give instructions to computers.
What does CSS stand for?
Cascading Style Sheet
What is hypertext?
Hypertext is the text in a web page.
What kind of file is a web page file?
A .html file.
Why should you use the .html extension to name the web page?
The ‘.html’ extension tells computers that the file is a web page.
What are the two major elements on a web page?
The head and body tags.
Can you use a simple text editor to write HTML?
Yes.
What should be the first tag in an html page?
The DOCTYPE tag.
Why should you write tags in lowercase?
Easier to read.
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.
What is the proper order of the major tag sections?
Head Title Body
What is an element in HTML?
An HTML element usually consists of a start tag and end tag, with the content inserted in between.
What are the three main computer languages used to create websites?
- HTML 2. CSS 3. JavaScript
Give a full example of an image tag.
What is HTML?
HTML is a computer language. It is used as the foundation or building block for creating websites.
When was the HTML computer language first invented and by whom?
1991 by Tim Berners Lee
When was HTML 5 created?
2014
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.
What is XHTML?
Created in 2000, it is not HTML, but another computer language called XML.
What does the paragraph
tag do?
Adds a line break before and after the text.
Is whitespace ignored by web browsers?
Yes, spacing is controlled by the tags.
What exactly are websites?
HTML pages that are connected together.
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.
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.
Which HTML tag is used to connect web pages together?
The a tag with angle brackets.
What is a tag attribute?
A tag attribute tells you additional information about the tag.
What is this code: ‘href’?
It is a tag attribute of the hyperlink tag.
What does ‘href’ stand for?
Hypertext Reference
What does ‘paths’ mean in web design?
Paths in web design refer to how we point to files and folders in hyperlinks.
What does this code do: ../
It tells the web browser to go up one directory.
(Image attached)
Go up two directory levels.
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
What is another name for a web browser?
A client app.
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.
What is the type of server app used to serve websites?
A web server.
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.
How do you make an image into a hyperlink?
By wrapping a hyperlink (a) tag around an image (img) tag.
It adds a 5 pixel solid border around the image.
What does ‘http’ mean?
hypertext transfer protocol.
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.
What does the ordered list tag look like?
What does a list item TAG PAIR look like?
What is the sub tag of an ordered or unordered list?
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.
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
What does the ‘type’ attribute do in an ordered list?
It changes the characters displayed beside list items.
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.
What does dl stand for?
Description List
What are the sub tags of dl?
dt and dd
What does
<dt> stand for?
</dt>
Data term
Which list type is the LEAST popular?
Description list.
If CSS is for styling, what is HTML for?
HTML is there to create structure in a web page.
What meaning does the strong tag give to text?
It makes the text bolder.
What is ‘code folding’?
Code folding is what code editor apps do to hide code to make more space on the screen.
What is the div tag short for?
Division
What is the purpose of the div tag?
To create sections or divisions.
What are examples of ‘neutral container elements’?
div or span tags
What TYPE of tags have virtual boxes around them?
block level tags
The p (paragraph) tag is what type of tag?
Block level tag.
What does this CSS code do: a {display: block}
The CSS code changes the tag from being inline, to block level.
What are HTML comment tags for?
HTML comment tags allow coders to leave messages which won’t be visible to site visitors.
What does the opening comment tag look like?
How does a web browser process a web page?
Top to bottom.
What does the closing comment tag look like?
What are domain names?
They are unique addresses on the web.
What is a TLD in respect of domains?
TLD is a domain name extension and is short for ‘Top Level Domain’.
What does the web browser usually do with information entered into a form?
It sends the form information to a server app for processing.
What does an opening and closing form tag look like?
It creates a textbox for USERS to be able to put text into a form.
It hides the text entered.
It creates a submit button.
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.
What is PHP?
PHP stands for PHP: Hypertext Preprocessor.
It’s a programming language used to create apps that can process forms.
This is example of what:
?username=StefanPieEater&password=gofish
- A query string
- A set of name value pairs
- Information that a user entered into a form.
What does the ‘&’ symbol in the query string do?
It acts as a separator between the name value pairs.
What are some of the programming languages that can process HTML forms?
Python, Ruby, PHP and Java
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.
What does the form ‘method’ attribute tell the web browser?
HOW to send the information to the server for processing.
Name two method attribute values.
GET and POST.
What is the default method type HTML forms send data with?
GET
What form method type, adds the data/information to the query string?
GET
What is the form method type which sends the form data behind the scenes?
POST
Do forms have sub tags?
Yes
What does the web browser usually do with information entered into a form?
It sends the form information to a server app for processing.
What does a proper HTML form tag look like?
If you add the attribute ‘checked’, to a checkbox input tag, what does that do?
It automatically checks that checkbox.
What is the form attribute name, that sets WHERE the form sends the information.
action
What is the big difference between checkboxes and radio buttons?
With radio buttons, you can only select one option in the radio group.
How do you set how big (how many characters) a text input tag can display?
Using the ‘size’ attribute.
What does the tr tag do?
It creates a table row.
Which table tag creates the table’s columns?
The td tags. TD stands for table data.
Where is the header of a table column?
It is the 1st item in a table column.
What can we do to add borders to tables?
Use a CSS style tag in the head tag.
What is name for the space created by a td tag?
A table cell.
What is the tag that creates a table header?
The th tag.
By default, how are table headers displayed?
The text is aligned to the center and made bold.
What is the td tag attribute used to extend/span a column/cell across other columns?
colspan
How would you add a colspan of 3 to a td opening tag?
How would you complete this tag?
What is the purpose of the
tag?
To set a tr tag as the footer.
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.
What does the thead tag do?
Creates the table header
The tags thead and th seem very similar, but they are different. Which is true below?
All of the above.
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.
What does the rowspan tag attribute do?
It spans the td tag to span two rows.
Which is true below:
All of the above.
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.
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.
Can the ‘lang’ attribute be added to any tag?
Yes, this is true.
What does ‘meta’ mean?
Information about information.
What does ‘meta charset’ do?
It tells the web browsers and search engines what character set to use in the web page.
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.
What is the style tag used for?
To add CSS code in to.
What is the script tag used for?
To add javascript into the page.
What is ‘scripting’?
Scripting is another word for programming.
With the current version of HTML (HTML5) do you need to use the head tag?
No.
How do you set the colour of the p tags to black using CSS?
How would you center align a h1 tag using CSS?
How many property/value pairs are in this CSS code: h1 {color: red; text-align: center}
2
What is ‘class selector’ short for?
Classification selector
Would a tag selector, for example h1, select all, or just one of the h1 tags in the page?
All.
What KIND OF selector is this: .aClass {color: red}
A class selector.
What kind of selector is this: .majorButton
A class selector.
What KIND OF selector is this: #unique
An ID selector.
Which one of the statements below is true:
- 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.
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.
How many layout types are there in CSS?
4
What are the four layout types in CSS?
- Adaptive
- Static
- Liquid
- Responsive
Which layout style/type, is the most flexible because it changes position of tags and it reflows to a changing screen size?
Responsive layout.
Is this true? Liquid layouts reflow but they have their limits when the screen size gets too small.
True
What is the best way to describe adapative design?
Adaptive design is like a static design, combined with some responsive design techniques.
Which option below is the ID selector?
.myStar
h1
p
#mainDiv
mainDiv
What are the 9 essential HTML tags (according to Stef)?
div, p, ol, ul, li, h, a, br, img
Does the break (br) tag have a closing tag?
No
What does the break tag do?
Creates a line break
What are the three image types we can use in web pages?
gif, jpeg, png
What is the best image type for photos?
jpeg
Which is the most advanced image format?
png
For images with solid colors, what two image formats are best?
png and gif
Which image format is NOT an HD format?
gif
Which image format does NOT have transparency?
jpeg
Which image format supports animations?
gif
Why do we want to use smaller images?
Smaller images equate to faster web page loading.
Is the ROOT of a website the base directory of the website?
Yes
What is the first page the web server sends out, when someone comes to a website?
Index.html
In this code ‘a> href=”index.html”>google
index.html
This code does what? ..<. a target=”_new” href=”http://www.studioweb.com/courses/css-course.html”>CSS Course
- Links to a public website
- Links to a sub directory
- Loads the page in a new tab or window
- All of the above
All of the above.
What is the W3C?
An organization that sets the standards for the Web, headed by the inventor of the Web, Tim Berners-Lee.
What does the
tag do?
The
creates the visible part of a web page.
Why should you align your code?
It makes the code easier to read, which is good for coding.
What is a pixel?
A tiny dot on the screen.
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.
What is VW short for?
Viewport Width
VW = viewport width. How is this best described:
- 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.
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.
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!
When would you use VW (Viewport Width)?
This is primarily used for mobile phones and tablets.
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).
What are examples of block level tags?
What are Inline Elements?
An inline element does not start on a new line and only takes up as much width as necessary.
What are some examples of Inline Elements?
