1. HTML & CSS
Jan Janoušek

2. Sources HTML: CSS: http://htmldog.com/reference/htmltags/ …
CSS:

3. Structural tags
html
head
body
div
span

4. Meta Information
DOCTYPE
title
link
meta
style

5. 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 …

6. 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

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

8. 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 …

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

10. 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" />

11. CSS
In-line
Internal
External

12. 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

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

14. 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)

15. Developer tools – „F12 tools“

16. Task of the day go throught tutorial: