IS 201 final quiz
text-decoration
"underline", "overline", and "line-through"
html
- ! and enter - html tag tells the browser that everything in between the two tags is html - Hypertext Markup Language
comments
< ! -- type here -- >
link to different file for positioning
<link rel = "stylesheet" href = ". . /styles/link.css">
Applying styling directly to a line or block of code (not using a separate stylesheet)
<style> tag??
What is CSS
Cascading Style Sheets attribute has a colon, close each line off (each value) with a semi colon CSS is another coding standard that is separate from but congruent with HTML. CSS allows you to specify a style once—either in the HTML page or in a separate file—and then reference that style in each HTML tag where you want to use it. attribute: value;
text-align
Horizontally aligns the contents of an element. Ex: <p style="text-align: center"> In the center. </p> center, left, right, justify
background
background-color: ; background-image: ; background-position: ; css
copyright
bar symbol, ©
font-weight
bold,
font-family
changes the type of font on your website end with ;
types of selectors (elements, class, id)
class: .name in the css style sheet don't use the dot in the actual html code can have multiple and then separate them with different styles in the stylesheet id: use to link to other parts of the page id ="name" at the spot you want it, then a href="#name" to access it elements:
connect CSS stylesheet to an html page
click the file in which you want to create a new folder click new folder name it "styles" or something along those lines click on new file for that folder name it something.css <link rel="stylesheet" type="text/css" href="../css/scratchstyle.css"> use . . / only if not sibling
color
color of font
a href=""
creates the ability to use a link, stands for anchor href goes within the first tag ex: <a href="link.com">Click this Link</a>
float
ex: float: right; will go all the way to the right, but stay within it's div span tag allowing you to apply custom code to your link, and then within that tag
top
for elements that aren't the header, need to add up the amount of pixels in the other elements and position accordingly
what is bootstrap?
framework used to create websites that can automatically adjust to various screen sizes (responsive design). Bootstrap is just a standard set of custom CSS styles that look nice on both mobile devices and computers.
title
goes in the head tag, it's what the title says on the tab you have opened to the website - key for google search
ul
goes inside the li tag then additional li tags are added to the ul for unordered list (bullet points)
left, right, bottom, top
how far from each side should it be positioned bottom: don't need for header because the height takes care of that one left menu - doesn't need right bc the width will cover it, and vice versa for right menu - when figuring out the math for this, don't forget the size of the pixel border
height
how tall you want a certain positioning element (for example, the header) to be
br
html ignores white space, so you must us <br> to creat it on the actual website no end tag
position: absolute
ignores all other html
position: fixed
keeps it in the same spot
h1
largest heading option adds bold font weight and increases the size <h1> </h1>
stylesheet
link to the style sheet you want to reference last right before header, that one will trump the other ones - class ="" in the tag will trump everything <link rel = "stylesheet" href = "../link.html" type ="text/css">
img src="" alt=""
no end tag src="put the image link here" (can do image address or link to one in your folder) must also have alt="what you want it to say if it can't display your photo
possible errors
not tabbing correctly in stylesheet or html
box model properties (padding, border, margin)
padding: adds space to the of the border (apply only to top? padding-top: ; right, left, etc border: width (like height but horizontal) and style margin: space between border and other elements
p
paragraph tag establishes that a piece of text is on its own line
divs
stands for divided section page elements created with div tags that are used to position and style content - is a block element - will put a line of empty space after itself
li
stands for list item child tag of ol the only tag that should be directly inside the ol tag
head
stores all the data about a webpage, but does not contain any of the web page actual content
font-style
style italic, etc
on-page anchors
takes you to a different part of the page --> especially for really long pages add an <a href="">name</a> tag and add a name then add a link inside the tag of where you want to anchor to be tied to by doing id ="name" put #name in the a href ""
body
the elements that you actually see on the webpage
ol
to start an ordered list must have at least one child <li> tag
navigating file structure
watch video
title attribute
when you hover over the link it will come up with a title telling you more info according to what you put in
