HTML Flashcards
HTML stands for ______.
What is Hypertext?
What is a Markup Language?
Hyper Text Markup Language
Hypertext is text containing a link.
A markup language is a programming language used to make text do more than just sit on a page: it can turn text into images, links, tables, lists, and much more.
Where does <!DOCTYPE html > go?
What does it do?
At the beginning of your document.
Tells the browser what language your page is using (here it’s html).
a. Always put < ___ > on the first line. This tells the browser what language it’s reading (in this case, HTML).
b. Always put < ___ > on the next line. This starts the HTML document.
c. Always put < ___ > on the last line. This ends the HTML document.
a. !DOCTYPE html
b. html
c. /html
Things inside < >s are called ____.
____ nearly always come in pairs: an opening ____ and a closing ____.
Example of opening: <html>
Example of closing: < /html>
tags; tag
In what order should tags be closed in?
The same order they are opened in.
Example:
< first tag >< second tag >Some text!< /second tag >< /first tag >
There are always two parts to an HTML file: the ____ and the body.
The ____ contains information about your HTML file, like its title. The title is what we see in the browser’s title bar or page tab.
head
What is the following code representing?
< head >
< title >My Webpage< /title >
< /head>
The head of an HTML document.
The ____ is where you put your content, such as text, images, and links. The content in the ____ is what will be visible on the actual page.
body
< h1 > and < h6 > are examples of _____.
HTML has how many heading sizes?
heading tags
six
You’ve done an awesome job! Here’s a quick summary of things we’ve learned:
- HTML is used to give websites _____.
- We open HTML files using a browser, and the browser** **_____ (shows us) the file.
- HTML files have a < _____ > and a < _____ > (just like you!)
- In the head, we have the < ____ > tags, and we use these to specify the webpage’s name.
- How to make headings and paragraphs.
- structure
- renders
- head, body
- title
- What element is used to send the user to another part of your website, or another website?
- What is the complete tag for creating one?
- hyperlink
- < a href=”www.codecademy.com”> < /a>
- What tag is used to add images to a webpage?
- What do most HTML elements have that an image element does not?
- < img src=”url” />
- a closing tag; a backslash is included in the initial tag to close it
- What is the following an example of?< a href=”www.codecademy.com” >< img src=”http://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg” />< /a>
- An image as a hyperlink.
What is the basic HTML structure for every webpage in tags?
< !DOCTYPE html>
< html>
< head>< title>Anneri’s Webpage< /title>< /head>
< body>< /body>
< /html>
When you place tags inside of other tags, _____ helps make your code readable.
indentation
- An ______ is a list that is numbered.
- What is the tag to create an ordered list?
- What tag is used for an unordered list?
- ordered list
- < ol>
- < ul>
- To create an item in an ordered list, wrap with the ___ & ___ tags.
- < li> < /li>
________ is CSS that can be used to style HTML without creating a separate document.
inline CSS
Comments start with ___ and end with ___ like this:
<!-- , -->
< !– , –>
< !– This is an example of a comment! –>
<!-- This is an example of a comment! -->
We can give tags more instructions by including _____ in the opening tag.
An _____ is simply a characteristic or some description for the content in the element.
Let’s change the size of the text. How? We use the _____ attribute. We make it equal to font-size, followed by a colon, the size you want, and end it with px(short for “pixels”). For example:
< p style=”font-size: 12px”>
attributes
attribute
style
_______ is used to decide what font type to use.
font-family
a. font-size: 14px
b. color: orange
c. font-family: Bodoni
These are all examples of the _____ attribute.
style
What is the style attribute for setting the color of a background?
< p1 style=”background-color: green;”>
The style attribute to align text
< h1 style=”text-align:center”>
- What does the tag < strong> do?
- What about the tag < em>?
- bolds text
- italicizes, or emphasizes text
- What is the tag for creating a table?
- What does < tr> do?
- How do you create a column?
- What is the tag for a table header?
- < table> < /table>
- Creates a table row.
- < td> < /td>
- < th> < /th>
- What attribute can you pair with < th> to stretch the element across more than one table column?
- What would the tag for a table header that stretches across a three-column table look like?
- colspan
- < th colspan=”3”>
How do you add multiple style attributes to the same element?
separate attributes with a semi-colon
Example:
< th colspan=”2”; style=”color:red”>Famous Monsters by Birth Year< /th>
- What does the < div> tag do?
- What is “div” short for?
- What does using the div tag enable you to do style-wise?
- Divides your page into “containers” or boxes.
- Division
- Using the div tag lets you style individual pieces of your content separately.
While < div> allows you to divide your webpage up into pieces you can style individually, < ____> allows you to control styling for smaller parts of your page, such as text.
span
Example:
< p>This text is black, except for the word < span style=”color:red”>red!< /span>< /p>
