HTML Flashcards
HTML is made up of?
HTML tags
HTML is made up of?
HTML tags
What is the benefit of syntax highlighting?
Improves the readability and context of my text
What is it called when there are red highlights in my code?
Syntax Error
What is Syntax Highlighting?
A feature that displays text, especially source code, in different colors and fonts according to the category of terms.
HTML is the _____ _____ of the web and it’s the only thing that you have to know in order to make a website.
building block
HTML describes what?
What each part of a website is
What is the html tag for a paragraph?
<p></p>
What is the HTML tag for an image?
HTML tags literally _____ (or mark up) all of your text, images, and content so that your computer knows what each piece of content is and understands how to show it to you in the _____.
Tag
Browser
What is the HTML tag for a headline?
<h1> </h1>
What is the first step in being “tech-fluent?”
Learning HTML
What is HTML’s primary purpose?
To tell my computer what each part of a website is (headline, image, paragraphs, text, etc)
What do I have to do each time I add a piece of content to a website?
Tell my computer what type of content I am adding is.
Is HTML responsible for how content on a web page looks?
No! It just describes what it IS not what it LOOKS like
What symbols are used in an HTML opening tag?
Less Than <
Greater Than >
What extra symbol does a HTML closing tag use?
Forward Slash /
Is it possible to look at ANY online website’s HTML?
YES
Is it possible to look at ANY online website’s HTML?
YES
What is the benefit of syntax highlighting?
Improves the readability and context of my text
What is the ONLY thing I NEED to have in order to make a website?
HTML
What is Syntax Highlighting?
A feature that displays text, especially source code, in different colors and fonts according to the category of terms.
HTML is the _____ _____ of the web and it’s the only thing that you have to know in order to make a website.
building block
How many HTML tags will I use most of the time in all of the 100 that there are?
25 -
for paragraphs, images, links, forms, sections, articles, and footers.
What is the html tag for a paragraph?
<p></p>
What is the HTML tag for an image?
HTML tags literally _____ (or mark up) all of your text, images, and content so that your computer knows what each piece of content is and understands how to show it to you in the _____.
Tag
Browser
What is the HTML tag for a headline?
<h1> </h1>
The <em> tag is used to denote text that should be _____.</em>
emphasized
What is HTML’s primary purpose?
To tell my computer what each part of a website is (headline, image, paragraphs, text, etc)
What is the tag I would use to add a line break in the text without needed to start a new paragraph?
<br></br>
Is HTML responsible for how content on a web page looks?
No! It just describes what it IS not what it LOOKS like
What symbols are used in an HTML opening tag?
Less Than <
Greater Than >
What extra symbol does a HTML closing tag use?
Forward Slash /
HTML tags almost always come in _____.
Pairs
Is it possible to look at ANY online website’s HTML?
YES
How can one look at a website’s HTML?
View the site’s page source
HTML is the _____ _____ of the web.
Building Block
What is the ONLY thing I NEED to have in order to make a website?
HTML
What is the most frequent mistake made by beginning HTML writers?
Forgetting to close the HTML tag.
How many tags are there to learn in HTML?
100
How many HTML tags will I use most of the time in all of the 100 that there are?
25
How many header tags are there?
6
What HTML header number would the MOST important header be designated as?
<h1></h1>
The <strong> tag is meant to denote text that is _____.</strong>
IMPORTANT
Is the text within the <strong> tag always BOLD?</strong>
No
The <em> tag is used to denote text that should be _____.</em>
emphasized
Is the text within the <em> tag always Italicized?</em>
No
What is the tag I would use to add a line break in the text without needed to start a new paragraph?
<br></br>
<b> and <i> HTML tags are _____, while <em> and strong are _____.</em></i></b>
presentational
semantic
What is the HTML character for “em dashes?”
—
What does HTML stand for
Hypertext Markup Language
Who is widely considered the creator of the web?
Tim Berners-Lee
What is the tag I should add to create bolded text?
<strong></strong>
What are the 2 types of lists in HTML?
Ordered
Unordered
What is the HTML tag for an Ordered List?
<ol></ol>
What list (ordered or unordered) would I add when the order of the list MATTERS?
Ordered <ol></ol>
What list type would I use when listing my favorite programming languages in order of how much I love them?
Ordered <ol></ol>
What list type is great for “to do” lists?
Unordered <ul></ul>
What is nested WITHIN a ordered <ol> or unordered </ol><ul> list?</ul>
The line items <li> I want to add
<ul>
<li>My list item</li>
</ul>
<ol>
<li>List Item</li>
<li>List Item</li>
</ol>
</li>
List Item tags go _____ the ordered or unordered lists?
Inside
Use what type of list when the order of the list items do NOT matter?
Unordered List <ul></ul>
The image tag is what’s known as a _____-_____ tag
self-closing
What is a self-closing tag?
Instead of a having a closing HTML tag, they have a forward slash in front of the greater-than symbol or />.
What do Attribute tags provide us with?
more information about the specific HTML tag
What is a Source Attribute or scr=
gives more information about the link to where an image file is stored.
When you want to show an image on your website what must you do first?
Put that image somewhere on the Internet so it can be accessed
What is the EASIST way to show an image on a website?
First, place the image that you want to show in a folder on your web server.
When an image is successfully on the web what must I locate to setup my code correctly?
The image’s location URL
How can I find out a location of an image on the web?
Right click on the image and select “open image in a new tab.”
What attribute describes what an image is?
alt or alternative attribute
Will the web viewer see alt or alternative attributes displayed?
No
What are 3 main benefits of using alt attributes in my code?
- If the image doesn’t load it will still be described on the page.
- If a person visiting my site is blind, they can still find out what your image is about even if they can’t see it.
- Search Engine Optimization
What is SEO stand for?
Search Engine Optimization
4 Parts of an Image Tag?
- <img></img>
Closing Image Tag
What are the 3 main supported image file types for the web?
- jpg
- png
- gif
What file size should I keep my images under when using on the web?
Under 1MB
The larger the file size, the longer it’ll take your page to _____.
load
The “a” in this <a></a>
Anchor Link
Like image tags, anchor links require _____ to work.
Attributes
What is the Attribute for a anchor link?
href=
What does href stand for?
Hypertext Reference
Where in my code do I put a URL that I want to link?
Within the Hypertext Reference or <a></a>
What Attribute would I use to open up a web link in a new tab?
A Blank Target Attribute
or
target=”_blank”
Where would I place the Target Attribute?
Add to your URL opening “a” tag just after the href attribute.
What are the parts of a Link tag?
- Opening “a” tag <a></a>
Describe this tag <a>.</a>
ANCHOR LINK with an HREF ATTRIBUTE, which specifies the URL the link goes to.
Any text in between the opening and closing <a> tag is known as the _____ _____ .</a>
link text
What is the TARGET ATTRIBUTE, which opens the URL in a new tab.
TARGET=”_BLANK”
What is the proper code for a link?
<a>Skillcrush!</a>
What is the correct code for adding an image to a website?
<img></img>
If you want your link to open in a new window, what should you add to your tag?
target=” _blank “
Image tags, link tags, list tags, text tags – all of these tags have to do with the _____ of your site.
CONTENT
Structural HTML helps define …….
a website’s many different parts
The most important structural element that you need to learn is the _____ tag.
<div></div>
<div> tags define?</div>
a division, or section, of your site.
<div> tags as little \_\_\_\_\_ that you use to \_\_\_\_\_ related content together</div>
WRAPPERS
BUNDLE
How do I code subdivisions of a section?
put <div> tags inside of other <div> tags!</div></div>
What are NESTED ELEMENTS?
Nested elements are just HTML tags inside of other HTML tags, kind of like Russian nesting dolls.
What are the 12 categories of HTML tags?
- Content HTML Tags
- Structural HTML Tags
- Forms/Input HTML Tags
- Frame HTML Tags
- Image HTML Tags
- Audio/Video HTML Tags
- Link HTML Tags
- List HTML Tags
- Table HTML Tags
- Styles and Semantic HTML Tags
- Meta HTML Tags
- Programming HTML Tags
Most HTML tags are _____ elements
BLOCK
BLOCK elements _____ to fit the _____ _____ of their container.
Expand
Full Width
If a block element sat down in a movie theater, it would take over a _____ _____ of seats.
Whole Row
The tag serves as a _____.
Container
BLOCK elements _____ on top of each other.
Stack
3 examples of INLINE elements?
- <b>, <big>, <i>, <small>, <tt></tt></small></i></big></b>
- <abbr>, <acronym>, <cite>, <code>, <dfn>, <em>, <kbd>, <strong>, <samp>, <var></var></samp></strong></kbd></em></dfn></code></cite></acronym></abbr>
- <a>, , <br></br>, <img></img>, , , , , <span>, , </span></a>
- <button>, <input></input>, <label>, <select>, <textarea></a></var></samp></strong></kbd></em></dfn></code></cite></acronym></abbr></tt></small></i></big></b></textarea></select></label></button>
INLINE elements stay _____ _____ with each other.
In Line
INLINE elements ALWAYS go _____ of block elements.
INSIDE
List of BLOCK elements.
- <p>
</p> - </p><h1>
- <ol>, </ol><ul>
</ul> - </ul><pre>
- <address>
</address> - <blockquote>
</blockquote> - <dl>
</dl> - <div>
</div> - <hr></hr>
- </div></dl></blockquote></address></pre></h1>
<div> tags tell your computer how to divide up the content on your website, but they don’t really \_\_\_\_\_ what those sections are.</div>
Describe
What can I use to describe what the divided content of my web site is?
HTML5 tags
What are the main 5 structural HTML5 tags?
tags tags tags tags tags tags
HTML5 tags are _____ and literally _____ the sections they’re rendering, and they provide a common language and logic for coders to write and for computers to read.
SEMANTIC
DESCRIBE
The Semantic Web is a movement to _____ _____ in a way that everyone: computers AND people can easily understand.
Store Data
What 3 elements does the tag usually contain?
- Page Title
- Logo
- Navigation
This tag defines the _____ area, which contains your site’s navigation _____.
NAVIGATION
LINKS
Example of tag?
<a>About</a>
<a>News</a>
<a>Contact</a>
The tag defines a site’s _____ area.
MAIN
There should only be _____ element on a page.
ONE
Example of tag?
<h1>About</h1>
<p>This section is all about me!</p>
Example of tag?
<h1>About</h1>
<p>This section is all about me!</p>
The tag defines some content (usually a sidebar) set _____ from the content it’s placed within.
ASIDE
Example of tag?
<p>I completed many HTML client projects this year.</p>
<h4>HTML Projects</h4>
<p>These web projects included basic websites, blogs, and landing pages.</p>
The tag defines an _____, which contains _____ content that should make sense on its own (such as a blog post).
ARTICLE
INDEPENDENT
Example of tag?
<h1>How To Get Hired In Tech</h1>
<p>Here are some tips to make the transition to a new career less intimidating.</p>
The tag typically contains information about the site at the _____ of the page, such the sitemap, contacts, and copyright information.
BOTTOM
Example of tag?
<p>(c) 2016 Skillcrush, Inc.</p>
<p>Follow @skillcrush</p>
When you add a DIV tag to your HTML, will you be able to see it?
No, because you don’t have any CSS styles yet
What is the difference between inline and block elements?
Block elements take up the full width of the screen while inline elements will sidle up next to one another
What do you call HTML elements inside of other HTML elements?
Nested elements
An iframe is a special HTML tag that allows you to do what?
Embed ANOTHER HTML page inside your HTML page
What types of media would I use iframe to embed?
Photos Videos YouTube Videos Instragram Feeds Vine Feeds Twitter Feeds Google Maps
4 Elements of iFrame?
- the iFrame element
Use an _____ _____ to embed maps or videos onto your webpage.
iFrame Tag
iFrame Tag Example
How do you change the size of an iframe?
Change the width and height attributes in the HTML
Which of following would you NOT use an iframe for?
A paragraph
Where do I normally find a video or map’s iframe information?
Using the Share feature
Content HTML tags, for _____ up your content
CODING
Structural HTML tags, for _____ your content
ORGANIZING
Meta tags tell your computer what?
Important info about the webpage itself.
What does the META tag tell my computer?
It tells the computer what kind of document it’s looking at, which in this case is an HTML document.
What does the META tag tell my computer?
It tells the computer what kind of document it’s looking at, which in this case is an HTML document.
What are 4 MANDATORY META tags in order for my site to work?
- 4.
The is where you link to things like _____ and _____. It’s also where you’ll add other _____ tags that describe your website.
stylesheets
scripts
meta
Nothing you put in the area of your site will be visible to a user reading your website, except the _____.
TITLE
If a user interacts with it, it goes in the _____
The is where you put all the content that you’ll _____ on the page, like your _____ and _____.
SEE
IMAGES
TEXT
The tag is the most _____ of the meta tags, and it has quite a few different attributes.
META
What is character encoding?
It is a META tag known as and is used to recognize characters like letters, numbers, and symbols.
_____ is the most recent set of characters that computers use.
UTF-8
The tag provides what to my website?
Provides a name for my website
What is the only part of the area that users can see?
The
The _____ _____ is technically NOT a meta tag, but because of its placement, it gets grouped in with , , and the rest.
tag
What tag is used in search engine queries?
tag
What is a boilerplate?
An HTML document with all the required stuff I need to write CODE already in there.
What is ?
A tag that tells the computer the kind of document it’s looking at (in this case, it’s an HTML document).
example?
What is ?
A tag that contains all of the HTML elements on your site and is necessary for your page to work.
Example?
Here’s my website content.
What is ?
The tag defines the head area, which is where you link to stylesheets, scripts, and other meta information your visitor won’t see (except for the title, of course!).
Example?
My Website Title
What is ?
A tag which defines the body area, which is where you put all of your site’s visible content.
Example?
Here’s all the content of my website.
What is ?
A tag that contains your site’s hidden meta information, like the charset, page description, and keywords.
Example?
What is ?
specifies the title of your site (which is displayed on the browser tab).
Example?
My Website Title
What tag would I use to comment on my code?
What are the essential tags needed for any HTML page?
, , and
What was the big update with HTML5?
A bunch more semantic tags were added to HTML, like < header > and < main >
The alt attribute belongs to which HTML tag?
<img></img> tag
What does the target=” _BLANK “ attribute do?
It opens a link in a new tab
correct code for adding an image to your site
<img></img>
The alt attribute:
Describes your image and IS important for accessibility
DIV tags:
Are wrappers that bundle content together