HTML Flashcards
1.HTML=
hyper text markup language
- give 2 examples of programming languages
- Java Srript 2. python
- elements=
as being boxes of content on our web page
- three examples of elements=
- three examples of elements=
- four exmaples of elements=
- division elements (divs) 2. headers 3.paragraphs 4. spans
- what three critical elements does CodePen allows us to leave out?
- HTML 2.head 3.body elements
- to create HTML elements we need to use______?
tags
- H1 is considered to be a______?
tags
- The ___ _____ are built into the language and must be written exactly as expected in order for our HTML to render correctly.
tag names
10.For example, ______ is not a valid tag name in HTML, but ______ is
paragraph———P
- You can use ______ ________ to verify which tag names exist and what elements they are used for.
online documentation
- If we wanted to tag the sentence above as an important header (the biggest text by default), we’d use the _____and _____ beginning and end tags
<h1> and </h1>
- what does an opening paragraph tag look like? what does a closing paragraph tag look like
<p> and </p>
- The p (“paragraph”) element used for?
This element is meant for holding text. By default, it will render text to the screen on a new line.
This element is meant for holding text. By default, it will render text to the screen on a new line.
div element
16.<div> is a block-level element, meaning it will take up its own, full line.</div>
<div></div>
17.The ______ _______ is a generic text container. It does not create a new line like the p element does. This element is invisible by default but can be used for styling words or phrases within a larger body of text.
span element <span></span>
- Unlike <div>, ________ operates inline and therefore doesn’t take up its own line</div>
<span></span>
19.Avoid using ____ ____ to resize text. ______ use size to indicate their relative importance, but _____ is preferred for general-purpose resizing.
a. heading tags b.headings c. CSS
- You should only use one _______ per page. Using more than one will not result in an error, but using only one is seen as a best practice.
<h1></h1>
- to create a button, all we have to do is use the semantic ______ _____
semantic
1.What are HTML elements?
Elements are what we use to tell the browser how we want the supplied data to be displayed.
“2.What is a ‘tag’?
“
An element consists of an opening and closing tag. The data supplied between the tags will be displayed per the instructions of the element.
“3.How does the browser use HTML to create what I see?
“
The browser reads and interprets the HTML file to understand how the developer intended the data to appear on the screen.
“4.What are the basic HTML elements?
“
“The elements we learned about yesterday were ‘html’, ‘head’, ‘body’, ‘p’, ‘span’, ‘div’, and ‘h1’- ‘h6’
“
5.This is known as being ‘semantically correct
It is important to note that your HTML elements should match the exact information you are attempting to display.
6.When we need to include information that we don’t want to render on the page (like the link to an image) we use special flags inside of our tags called _______?
attributes
- <a>=</a>
anchor element
8.The ‘a’ (“anchor”) element, allows us to create links to other web pages (or even to other areas within our own web page). You will always see the ‘a’ element used with the ___ attribute to tell the browser what address you want the link to point to.
heref
9.An ____ element will display an image on the screen. It will always have an _____ attribute which points to the address of the image to be displayed. NOTE: img tags can be self-closing, as in they do not need two tags. Simply put the / before the closing bracket in the first tag:
<img></img> image—-src
- <ul>=</ul>
This element represents an “unordered list”. This is the parent element and will contain list items.
- <ol>=</ol>
There is also an ordered, or numbered, list <ol></ol>
12.Generally speaking, ______would be used for a grocery list
<ul></ul>
13.and _______ for a recipe where direction need to be followed in a specific order
<ol></ol>
14.This stands for ______ and is the companion to <ul> and </ul><ol>. These elements represent the items to appear in the list. Any other elements can appear in an li.</ol>
<li>......list item</li>
- Nested elements are referred to as ______ and the top level elements as _______
children…..parents
What does HTML allow us to do?
It allows us to display data on the screen, and give the browser information about the data.
____ uses different ‘elements’ to relay different information to the browser.
HTML
What are 4 examples of HTML elements?
- header (header)
- paragraph (P)
- Image (img)
- Link (a)
What is the anatomy or make-up of an HTML element
Data
What does a standard HTML page look like?
…everything in here will appear on the screen
An _____is the name of the item or instruction we are giving the browser
Element
We put elements inside of what we know as ____?
Tags
What element is just a generic holder or text container?
<span></span>
What does <div> stand for?</div>
divider
_____ is used for styling or grouping elements together that are related to each other
<div></div>
What is a great web site to go to for HTML and CSS?
www.csstricks.com
Attributes…attr
A little bit of extra data that we can supply to our element in order to give it some behavior
Sometimes we need to supply more data to the element
what does an attribute look like?
Data
the ____ actually goes in the opening tag?
attribute
an ____ ______ actually lets us create a link on the page
anchor tag
what is an <a> and what does it let us do?</a>
<a></a> anchor tag….and it let’s us create a link on the page
what attribute does the anchor tag need to create a link?
href……<a></a>
how is the attribute href set up on a web page?
<a>click here to go to google</a>
what is the attribute of an image tag?
<img></img>
<a>=</a>
anchor tag
how does an image tag look?
<img></img>
what is that attribute of the image tag <img></img>?
src…..<img></img>
<ul>=</ul>
unordered list….a list with bullet points and no numbers
<ol></ol>
a list with numbers 1 and 2 etc
a <ul> is just like a _____ or a wrapper</ul>
div
when using the <ul> as a wrapper…what goes in the inside?</ul>
<li>
</li>
what does the layout look like when using <ol></ol>
<ol>
<li>
</li><li>
</li></ol>
with htlm we indent with what is called a ____ ____ relationship?
parent, child
what 2 ways does the layout look like when we include our css in our html?
….css goes here
the _____ ______ which tells html what type of file it is
rel attribute
the ____ attribute which tells the html file sheet where our css file sheet lives
src
what is the anatomy or syntax of CSS styling rules? what does this look like?
.slector {
Property: value:
{
what are class and id’s thought to be?
attributes
the ____ and __ attributes that we can give our elements that allow us to name our elements individually or by there class
class & id attributes
the ____ goes inside of the opening tag
class attribute
show an example of the class set up
<div>....inside the quotations you can call it whatever name you choose.</div>
what does a wild card selector look like when using html?
- {
wildcard selector
}
*=
the wildcard selector or the everything selector
give an example of 4 selectors:
- the wildcard everything selector
- the…p….element selector
- the .class or class selector
- the #id or id selector
while using css…give an example on how we would make the whole back ground color red?
- {
background-color:red;
}
while using css give an example on how we would change the font size on all paragraphs tp 36 pixels?
p{
font-size: 36px;
}
say we had an item in html that was called the following…<div class="divClass">….while using css how would we change the back ground color to dodger blue?</div>
.divClass {
background-color: dodgerblue;
{
lets say we had the following in html….< p class=”pclass”>a paragraph her …..how would we change the text color to red?
.pClass {
color: red;
}
lets say we had some html like the following….<p>a paragraph here</p>how would we change the font size to 28 pixels?
#paragraphID (
font-size: 28 px;
}lets say in html we had the following: <div class="box">….ans while using css we wanted to change the back ground color to dodger blue….how would we do this?</div>
.box {
background-color: dodgerblue;
{
lets say in html we had the following: <div class="box">…how would we change the width to 200 pixels and the height to 100 pixels?</div>
.box (
width: 200px;
height: 100px;
{
what is the invisible margin called just outside the content in html?
padding
lets say in html we had the following: <div class="box">….how would we change the padding to 40 pixels and the border to 5 pixels of solid red?</div>
.box {
padding: 40px;
border: 5px sold red:
}
