HTML-CSS.pptx computer architect design v

HTML-CSS.pptx computer architect design v

• 1.
  HTML & CSS JanJanoušek
• 2.
  Sources • HTML: • 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/ • …
• 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 • 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 • action,method, enctype • input • type, name • textarea • select • option • optgroup • button • label • for • fieldset • …
• 10.
  Scripts & Styles •script • src • type • <script type="text/javascript" src="somescript.js"></script> • <script type="text/javascript">…</script> • style • type • <style type="text/css">…</style> • link • href • rel – relationship • type • <link rel="stylesheet" type="text/css" href="default.css" />
• 11.
  CSS • In-line • Internal •External
• 12.
  Selectors • Patterns usedto 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 • px •% • em • ex • pt • vh, vw • pc, cm, mm, in. • Color • #ff0000 • #f00 • red • rgb(255,0,0) • rgb(100%,0%,0%) • rgba(255, 255, 255, 0.5)
• 15.
  Developer tools –„F12 tools“
• 16.
  https://www.codecademy.com/en/tracks/web Task of theday go throught tutorial: