Part 2 - HTML, JS, and Ajax Flashcards
Most of this should just be programming, but I will make some flash cards just in case. 2nd Quarter of the course.
How do you tell the world that your file is a modern html file?
<!DOCTYPE html>
<html>
...
</html>
What is the head tag in html?
What is its purpose?
The head tag is where we put info about the web page. Title is included here.
Its basically where we put all of the meta data.
What are meta tags?
Meta tags contain meta information for browsers and other tools to help interpret.
All tags except which tags should be closed for ease of reading and parsing?
Void tags. All other tags should be closed for the ease of reading and parsing.
Void tag < > or < />(XHTML)
regular tag <></> (closed)
What does the body tag hold?
Visibly content
Consider that you should not directly specify layout information here but that you should mark up blocks with a class allowing you to apply layouts later. You can abstract layout
What is XHTML?
HTML written using XML syntax
XML is stricter and requires well-formed syntax.
You must close all tags and use lowercase tag names.
What are the limitations for XHTML?
XML is “unforgiving” — minor errors stop the document from parsing.
It broke methods like Document.write() and specific HTML features like <template>.</template>
What is the MIME type for XHTML documents?
Content-Type: application/xhtml+xml
What is the <p></p> tag?
It is the paragraph tag
Use CSS to style these blocks
Whitespace in the <p> block doesn’t matter
How do we make line breaks in html?
We can make line-breaks explicit with <br></br>
What is <img></img>
The image tag
We want to show images, we cannot embed them in HTML easily so we use hyperlinks (URIs) to reference them and include them.
Remember to include alt tags so they are machine and human-readable.
What is the Text Layout Philosophy?
Let the user agent (browser) and CSS decide how to display the text, you do not have to control everything.
Provide semantics first with html, if you want something to show in particular way, use HTML element that most well resembles the meaning of the text.
Then use a CSS class to style it.
What are <div> and <span> tags?</span>
Non-semantic HTML elements. They have no meaning for the text inside them, purely for styling purposes.
<div> will cause a line break before it is displayed
<span> will be inlined
</span></div>
What are HTML attributes?
HTML attributes provide additional information about an HTML element. Attributes are always included in the opening tag of an element and are composed of a name-value pair:
<tag>
</tag>
What are style attributes
The style attributes are Cascading Style Sheet (CSS) properties.
What is Cascading?
Cascading refers to accumulation of CSS properties (like color, font-weight, etc.).
CSS can be applied on a per tag level, but can also be applied globally.
What are the CSS properties most important to know?
color – color of the text or object
color:green
font-family – the font
font-family:”Times New Roman”
font-size – the font size
font-size:10px;
font-size:10pt;
font-size:large;
font-size:200%;
font-style – normal, italic, oblique
How do you write a CSS class?
.classname{
bakground-color: red;
}
in html
<p> Example
</p>
^ would be red paragraph background
In this code:
<style>
.highlight {background-color: yellow; } p.highlight { background-colour: orange; }</style>
What would <p class="highlight">ALERT</p>
be?
Orange, in this example, the orange background color is only applied to the “p” tags of class “highlight”. However, as we can see with the div element of class highlight, the yellow background color is applied to all tags with class “highlight”. This is because the “p” tag selector is more specific than the class selector.
What are Id selectors?
id
ID selectors are like class selectors except they aim at the one tag with the id=”idtag” as an attribute.
background-color:yellow;
}
What are element selectors?
element
element selectors let you style entire HTML elements (tags).
Important because you might want to theme all divs or imgs or links
p {
background-color:yellow;
}
What are context selectors?
:context
Selectors that behave depending on the context
Can be chained with other selectors
:hover - when the mouse is over
:active - active link
:first-letter - operate on the first letter
:nth-child(2) - second child
How do you do CSS positioning?
position: (use left, right, top, bottom)
fixed – stays on one spot in the browser
relative – position relative to where it normally goes.
absolute – absolute positioning relative to the first parent that was positioned (often the page itself).
z-index can be used to order overlapping elements!
How do you do CSS text alignment?
One big problem with CSS is how to center something!
Margins can be used
text-align: center can be used
A paragraph