em emphasis
strong bold text
h1-6 headers
p paragraph
ol ordered list numbered
ul unordered list bulleted
li list
div division; a section of the page; colors and shit;organize layout a little more
style literally just a container yeah thats pretty much it
img !<--void element--> image (src) (alt)
a anchor; link to another website (href)=new page
>>(target)=tell where to open linked document; "_blank" = new tab or window
<a href="link"><img src></a>
section = section
figure self-contained content; image caption
fig caption add caption to image in <figure>
form get information from a user >>(action) = where send
input several ways to collect data; void element
(type) types of input
(text) user give info
(name) set value to same for all unselect other button;
need to access the information from (action);
<input...name=personality> makes it easier for a server to process your
web form, especially multiple checkbox
(placeholder) give hint of what info desired
(required) prevent user submit if missing info; no value
(id) identify specific HTML elements; each value must be unique from all others
on the entire page
(value) id but helpful when multiple buttons
<input id="..." type="checkbox" name ="thisandthat"> label for="thisandthat">
ThisThat</label>
(checked) default
body Title/link to website?
button clickable button; needs text; inline elment
(type="submit") avoid confusion
label help ASSOCIATE the text for an input element with the input element itself
<!--<label><input>-->
fieldset group related inputs and labels together in a web form
label acts as caption for fieldset
(for) match with (input) id
<!DOCTYPE html> ....All pages should begin with this; declaration; ensures the
browser tries to meet industry wide specs; tells browsers that the document is an
html5 doc.
html ....root element of .html page; (lang) specify the language
head ....contain metadata about the doc such as the title, links to stylesheets,
and scripts; Metadeta is info about the page that isnt shown directly.
meta ....set browser behaviour; void element
(charset ="utf-8")
title ....determines what browsers show in the title bar or tab
body ....all page content elements should go inside the body element
main ....main section
section ....
fieldset ..../fieldset
figure ..../figure
/section
/main
footer/footer
/body
/html
((.html))
<article> contain multiple elements that have related information
<hr> border
<hr></hr> border
((.CSS))
element {
property: value;
}
style.css (file); put all the seperate styles in a folder and link to it
....<style></style> (.html)
1st = rewrite the styles you created from .html to .css, 2nd remove
<style>....</style>, 3rd link them: <link rel="stylesheet" href="styles.css">
Look similar on mobile and desktop <meta name="viewport" content="width=device-
width, initial-scale=1.0" />
<div> design layout purposes; TO NOT TAKE ENTIRE WIDTH OF PAGE: ((.CSS))=
#id {
width: ###px/%
}
element (type selector) {
background-color: ....;
text-align: ....;
width: 80%;
margin-left: auto;
margin-right: auto;
}
.html = id="this"
.css=
#this(id selector) {
value: 250px;
}
/* comment */
.class-name (class selector)
.html= <div>//.css= div
.html= <div id="this">//.css= #this
.html= <div class="this">.css= .this
body {
background-image: url()
}
GET <p> elements on SAME LINE=
<article class="item">
...
.item p {
display: inline-block;
width: % (pull them apart)
}
...
remove space between paragraph elements in .html to even out the space.
then set widths to 50%.
padding(-left/-right/-top/-bottom) adds space between words and sides
max-width prevent div from growing too wide
font-family change font (serif/ sans-serif/ monospace/ cursive/ fantasy/ impact/
font-style change font STYLE (italic/ bold/ underlined/
element {
property: value, value (<<<fallback)
}
<hr> display a divider between sections
hr {
height: ...px;
background-color: ...;
border-color: ...;
border-width: ...px;
}
((.item p)) ???
margin-top lessen the space
margin-bottom around these paragraphs and such
a {
color: black;
}((link color remain same))
a:visited {<<<<<<<<((pseudo-selector))
propertyName: propertyValue;
}((Change properties of a link when the link has been visited))
propertyName = color
propertyValue= gray
a:hover {
propertyName: propertyValue;
}
a:active ...
to make <img> behave like heading elements (block-level):::
img {
display: block;
}
///Styles
///Formatting
///Quotations
///Colors
///Links
///Images
///Tables
///Lists
///
///
///
///
///
