Scribd
Upload
7 views

Notes

Uploaded by

imlearningrussian
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
7 views

Notes

Uploaded by

imlearningrussian
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 4

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
///
///
///
///
///

You might also like