e structure. HTML stands for HyperText Markup Language. Format : <!DOCTYPE html> <html> <head> <title></title> <body> </body> </head> </html> *Additional comments for browser type/meta support* <!-- --> for a comment Types : <GO THROUGH ENTIRE LIST OF ELEMENTS> <strong></strong> (bold) <em></em> (italics) <p></p> <h1></h1> (h1 to h6) <img src="url" /> Image to link - <a href="URL"> tag before <img> tag and a </a> tag after <a></a> to hyperlink <ol></ol> and <li></li> <ul></ul> and <li></li> Nested lists <ol><li><ul><li><li></li></li></ul></li></ol> <table></table> <tr></tr> to add rows <td></td> to add data <thead></thead> and <tbody></tbody> <tr></tr> to add rows <th></th> to add data <table border = "Xpx"> <th colspan="3">3 columns across!</th> <div></div> - Divide the page into sections <span></span> - Control smaller pieces of elements <br></br> <div id="header"> <div id="navbar"> (as a list) <div id="left"> <div id="right"> <div id="footer"> <div id="button"> <button></button> <form><input type="" name="" value=""/></form> Style Properties in HTML : <GO THROUGH ENTIRE LIST OF SPAN ATTRIBUTES> <p style="color: green; font-size: Xpx; font-family: Garamond; background-color: brown; text-align:center"></p> <div style="width: Xpx; height: Xpx; background-color: red"></div> <a href="URL"><div></div></a> Exercises : - Basic Webpage - About Me - Clickable Photo Page (Using tables) CSS stands for Cascading Style Sheets, a language used to describe the appearanc e and formatting of your HTML. /*I'm a comment!*/ Commenting in CSS <head> <link type="text/css" rel="stylesheet" href*="stylesheet.css"/> <title></title> </head> Syntax : selector { property: value; } Hexadecimal color codes <GO THROUGH ENTIRE LIST OF ELEMENTS AND ATTRIBUTES> All HTML elements can be CSS selectors. Types :
color, font-family (use a line of preffered fonts; default: serif, sans-serif, c ursive), font-size (px and em (relative measure to different devices)), font-wei ght, text-align, margins and padding, height, width, text-decoration border, border-radius elements, list elements, image Selection : (Based on specificity) 1. Nested ( div div p {} ) 2. * {} Universal Selector (for all HTML elements) 3. div > p (Grabs direct children of parent element) Classes/Ids : 1. Classes for a bunch of elements for same styling. <div class=""></div> and ." " {} 2. IDs for a single element with a certain styling. <div id=""></div> and #"" {} 3. PseudoSelectors selector:pseudo-class_selector { property: value; } (link/visited/hover) p:first-child {} p:nth-child(n) {} <div></div> - height width background-color border elements (Button) HTML Box Model (M-B-P-C) Positioning : - display (block : takes up full width) (inline-block : allows other elements side by side) (inline : allows element on same line without block formatting) (for h eaders/p) (none) - margin (from) - Pushes element away from each other (top pushes element down X px, from top) margin-top/right/bottom/left/auto(equal margins on sides of element)/0 auto margin : Xpx Xpx Xpx Xpx; - padding - stretches element out toward other elements (top stretches element t op Xpx, towards top) padding-top/right/bottom/left padding : Xpx Xpx Xpx Xpx; - float - avoids overlap and places elements accordingly float : right, left clear : right, left, both (move any floating elements away) - position absolute - positioned in relation to the first parent element that doesnt have p osition : static; else, it is positioned relative to <html> relative - moves in relation to the static positioning fixed - stays glued in position top, left, bottom, right (moves from selected to opposite) Exercises : - Button for Website - Sorting friends* - Resume