HTML & CSS Jan Janoušek

Sources HTML: CSS: http://htmldog.com/reference/htmltags/ http://www.w3schools.com/tags/ http://www.w3.org/TR/html5/ https://developer.mozilla.org/en-US/docs/Web/HTML/Element … CSS: http://www.w3schools.com/css/default.asp http://www.w3schools.com/cssref/ https://developer.mozilla.org/en-US/docs/Web/CSS/Reference http://tympanus.net/codrops/css_reference/

Structural tags html head body div span

Meta Information DOCTYPE title link meta style

Text formating p - paragraph h1, h2, h3, h4, h5, and h6 - heading strong / b – strong / bold em / i – emphasis/italic blockquote cite code pre – preformatted text br - line break hr - horizontal rule sub, sup – subscript/superscript …

Links and images a img - image href – hrypertext reference target (_blank, _self, _top, _parent) rel (nofollow, noreferrer, help, alternate, etc.) … img - image src - source alt – alternative text width height

Lists ul – unondered list ol – ordered list li – list item dl – description list dt – defines term dd – defines description

Tables table tr – table row td – table data cell rospan, colspan th – table header cell tbody – table body thead – table head tfoot – table footer caption …

Forms Form input textarea select option optgroup button label fieldset action, method, enctype input type, name textarea select option optgroup button label for fieldset …

Scripts & Styles script style link src type <script type="text/javascript" src="somescript.js"></script> <script type="text/javascript">…</script> style <style type="text/css">…</style> link href rel – relationship <link rel="stylesheet" type="text/css" href="default.css" />

CSS In-line Internal External

Selectors Patterns used to select the element(s) you want to style Element type – div, p, span, …. HTML attributes – ID (#_ _ _), class (._ _ _) Attribute selectors – [attr], [attr=value], [attr^=value], … Universal selectors - * Pseudo classes - :hover, :link, :focus, … Combinators div p - descendant div > p - child input + p - adjacent sibling input ~ span - general sibling More in CSS3

Properties color background-color border font-size float position width / height padding margin …. many others

Values Size Color px % em ex pt vh, vw pc, cm, mm, in. #ff0000 #f00 red rgb(255,0,0) rgb(100%,0%,0%) rgba(255, 255, 255, 0.5)

Developer tools – „F12 tools“

Task of the day go throught tutorial: https://www.codecademy.com/en/tracks/web