HTML & CSS

by Artsiom Aliakseyenka

What is HTML5

HTML5 is a family of technologies:
- HTML - creates structure of the page
- CSS - presentation
- Javascript - scripting language, gives behaviour to pages
HTML5 status:
- Can I Use
- Mobile HTML5

W3C - World wide web consorcium Tim Berns li

HTML 4.01[3] — 24 декабря 1999 года;
ISO 2000
HTML 5[5] — в разработке. Конец разработки запланирован на 2014 год.

Сообществом WHATWG (англ. Web Hypertext Application Technology Working Group), начиная с 2004 года, разрабатывается спецификация Web Applications 1.0, часто неофициально называемая «HTML 5», которая расширяет HTML

HTML

HyperText Markup Language

language of the Web

Show how to create html page - empty .html

Html язык разметки гипертекста The purpose of a web browser is to read HTML documents and compose them into visual or audible webpages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page. HTML elements form the building blocks of all websites

HTML syntax

Here is tag content

Heading level 2

bolded text tags list

Attributes

<div name="value">tag content</div>

allow to modify tag properties
have form name-value pair
types
- standard: id, class, style
- tag-related
- custom data attributes data-*
- event-related: onclick, onmove

то что придает action html каждый тэг имеет свои дефалтовые настройки, которые мы можем менять с помощшью атрибутов

standard attributes

tabindex - может применяться не совсеми tag в HTMl4

tag-related attributes

Data attributes

Element relationships

Parent
Child
Descendants
Siblings

Relationship example

<div id="container">  <div class="child">    <span class="descedant"></span>  </div></div><div class="sibling"></div>

DOM tree

Special characters

Non-breaking space: &nbsp;Less than: < - &lt;More than > - &gt;Ampersand: &Copyright: ©

HTML document structure

<!DOCTYPE html><html>  <head>    <title>Title of the document</title>  </head>  <body>The content of the document......</body></html>

html example

<!DOCTYPE>

Mandatory element
Goes first in the document
Tells browser about the version in which page is written in

<!DOCTYPE root-element [PUBLIC|SYSTEM] "FPI" ["URI"][internal declarations]>

Valid DOCTYPE

Strict

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd">

Transitional

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">

Frameset

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">

html5
```
<!DOCTYPE html>
```

tell about MAC - creating doctype

QUIRKS MODE

When a browser renders a document in quirks mode, it interprets the CSS and HTML like older versions of the browser allowing for nonstandard code and workarounds. The most affected is the CSS of the HTML document which gets interpreted differently in this mode.

<html>

root of HTML document
defines the HTML document
contains all the content, except DOCTYPE

глобальный контейнер сообщает о том что документ представляет собой html doc нет ничего особенного просто контейнер можно стилизовать

HTML manifest

<html manifest="cache.appcache"><html>

Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server

Cache manifest

<head>

Util container
Elements are not rendered on the page
Contains html elements, which helps browser and are used by search engines to receive useful information about the page

здесь происходит больше экшена содержит все мета данные сайта - это ресурсы которые используте сайт описание отношений

Head elements

title
base
link
meta
style
script
noscript

base - абсолютный путь для документа в котором ресурсы имеют относительный путь и определяет как будут открывать ссылки через target Sets the base URL for relative links. At most 1 per document. If not set, URL of the current document. href: the base URL --> target: how to open links (_blank, _parent, _self, _top, frameName)

<link>

<link rel="relationship" media="max-width: 960px" type="mime" href="url">

empty element - contains only attributes
set up relationship between document and external source

Attributes

rel - required. Specifies relationship.
href - source location
type - MIME-TYPE
media - when the style should be applied

rel - может описывать ресурс CSS или для RSS редеров

<meta>

Describes information about document
Used by browsers and search engines
No end tag

Attributes

name
http-equiv
content
charset - HTML 5
sheme - deprecated in HTML5

<meta name="author" content="Artsiom">

<meta name="viewport" content="width=device-width">

http-equiv - определяет кодировку и параметры кэширования: на сколько кэшировать сontent - определяет значение

<script>

defines client-side script

by inline statement

<script type="text/javascript">alert();<script>

by specifying external source
```
<script src="url"></script>
```

<script src="url" defer type="type" charset="charset" async><script>

async Specifies that the script is executed asynchronously

charset charset Specifies the character encoding used in an external script file

defer Specifies that the script is executed when the page has finished parsing

src URL Specifies the URL of an external script file

type MIME-type Specifies the MIME type of the script

defer: executed after the rest of elements are loaded. Equal to moving script to the end of the document.

<noscript>

<noscript><meta http-equiv="refresh" content="5; http://test.com/noscripts"></meta></noscript>

<body>

contains actual content of the page
represents usual container, which can be styled

task

create simple page

create html document with named tags

Elements types

layout elements
typography elements
multimedia elements
structure elements
user input elements
form
etc

сущности с помощью которых можно строить веб страницы

Layout

<div></div><span></span><header></header><nav></nav><section></section><p></p>

example

Typography

<h1>-</h6><hgroup></hgroup>

headings

Typography

<b></b><strong></strong><em></em><pre></pre>

emphasized

Multimedia

<img><object></object><video></video><audio></audio>

<object type="application/x-shockwave-flash" data="images/mouse.swf" width="400" height="300">  <param name="quality" value="high">  <param name="wmode" value="opaque"></object>

images

Structure Elements

<ul>  <li></li></ul>

<ol>  <li></li></ol>

<table></table>

Form

<form></form>

Other

<a></a><br><blockquote></blockquote><small></small><center></center>

Note: Use the <br> tag to enter line breaks, not to separate paragraphs.

User input Elements

<input><button></button><select></select><textarea></textarea>

<Input>

type
required
placeholder
readonly
maxlength
autofocus

Input types

text
password
checkbox
radio
hidden
reset
submit
file

examples

User input Elements

<input> type attribute:

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Type Samples

type - search

Type Samples

type - email

Lists

List definition tags

<ul> - unordered HTML list
- <li></li> - list item tag
<ol> - ordered HTML list
- <li></li> - list item tag
<dl> - description list, with terms and descriptions
- <dt></dt> - termin tag
- <dd></dd> - termin discription tag

li attributes

type - specifies type of the bullet. Deprecated in html5
1, A, a, I, i ,disc, square, circle
value - number, specifies the value of a list item

lists example

Lists usage

horizontal menu

Anchor

defines a hyperlink, which is used to link from one page to another

<a href="url" target="value" title="value">

href - the URL of the page the link goes to
title - tooltip for element
target - specifies where to open linked document
- _self - default
- _blank - new tab/window
- _parent - the parent frame
- _top - the full body of the window
- framename

Ссылкой может быть все что угодно например обернуть в ссылку картинку

Link States

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

anchor

Anchor special tools

mailto

<a href="mailto:test@test.com?subject:Test">test@test.com</a>

test@test.com

tel - works for mobile

<a href="tel:+375-296-562-814">+375-296-562-814</a>

+375-296-562-814

callto works with skype - asks permission for run in skype

Forms

capture information
process requests
to define a form on the page form element should be used
wraps all the elements included in it

Tell about form elements names required disabled placeholder

Forms

<form action="url" method="methodType"></form>

method - specifies the way how form-data is send to the source specified in action attribute
- GET - data appended to the url
- POST - data appended to HTTP request body
action - defines source, which handles forms data request

Orginizing forms

<label for="">
<fieldset>
<legend>

label for : Matching up the for and id values ties the two elements together, allowing users to click on the label to get focused within the proper form element.

Iframe

<iframe src="url"></iframe>

example

HTML Reference

HTML Book

Task

What's wrong with web

HTML produces human-readable docs
hard to search for queries

as a result

many results for specific query
few contain exact matchers
time is lost

Semantic markup?!

Markup content according to its meaning

Semantics aim

help machins handle html documents

Document semantics benefits

'll be more accessible to people without CSS
'll be more accessible to people with disabilities
better search engine ranking
better maintaince
semantic code is shorter and so downloads faster.

What to do

use semantic tags

Examples of non-semantic tags

<div>, <span>, <small>, <center>

Semantic elements

<table><form><img><header><article>

HTML5 semantic markup

<header></header>

structural element that outlines a heading on a page
may include a heading, introduction text, or navigation

<nav></nav>

used to denote a section of major navigational links on a page
not all links should be wrapped within a nav element

<article></article>

include independent, self-contained content
often fall within blogs and other publishing websites as a block of published content
content within the article alone must make sense, and be able to be distrbuted elsewhere, such as within an RSS feed

<section></section>

generic document or application section
is not to be used as a convenience for styling or scripting purposes
Reserve the section element for large parts of a page worthy of the element

Deciding When to Use a section or div

if the block of content could exist as a record within a database and isn’t explicitly needed as a CSS styling hook then the section element is most applicable
sections should be used to break a page up, providing a natural hierarchy, and most commonly will have a proper heading
div may be used to specifically tie styles to a block of content

<aside></aside>

defines side content related to the document, links and news

<footer></footer>

identical to that of the header however for the bottom of a page, article, section, or other segment of a page

html5 tags & IE

HTML5shiv

<!--[if lt IE 9]>--><script src="dist/html5shiv.js"></script><![endif]-->

CSS

Cascade stylesheets

style sheet language, which is used for describing the presentation of a document, written in a markup language

Tell about css alternative and its popularity

CSS Syntax

/* сss block */.error {  font-size: 12px; /* semi-colon separates declarations*/  color: red;  /* last declaration not require semi-colon*/}

/* сss group */.error, .success { font-size: 12px; /* semi-colon separates declarations*/}

CSS Usage

inline styles
```
<div style="color:red;"><div>
```

internal

<style>body {  font-size: 14px;}</style>

external source

<link href="styles.css" rel="stylesheet">

как выглядит css создать файл.css

Selectors

tag selector
```
p { }
```
class selector
```
.success { }
```
id selector
```
#login-form
```

Selectors

universal selector
```
* { }
```
descendant selector
```
#login-form  input{ }
```
child selector
```
ul > li
```
sibling selector
```
.address + city { }
```
attribute selector
```
span[class="address"] { }
```

Categories of CSS Properties

color and background
typographical
layout
animation

Color & background

color: #000;/*#000000; #fefefe;*/color: rgb(0,0,0);color: rgba(0,0,0,0.3);background-color: #ffaaaa; background-image: url(../images/bg_image.png);

background

background: [background-attachment || background-color || background-image|| background-position || background-repeat] | inherit

backgrouds background this is good, repeat, texture, but css3 gradient is better

Background sprites

background-position

sprite Sprite Cow

Task

tell about prod and dev version concating of images to one single sprite

TASK

replace img tag on simple page on background

typographical

font-style
font-variant
font-weight
font-size
line-height
font-family
text-decoration
text-shadow
text-transform
white-space

example

White-space показываеть как есть расскажи про manger mirror

Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является тег

, помещенный в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Т

Font-family

font-family:  arial, verdana, sans-serif;

Font

font: [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit;

Font example

layout

margin
padding
border
- border-top
- border-bottom
- border-color
- border-radius

Task example Task1

Animation

animation frames

@keyframes myfirst {  from {background: red;}  to {background: yellow; }}animation: myfirst 5s;

transitions
```
 ] ||  ||  || 
```

examples

Transformatinos

transform: transform-functions

rotate3d(x,y,z,angle)
rotateX(angle)
scale3d(x,y,z)

Pseudo-elements

Pseudo-element creates abstract element, appear after last selector
- :before, :after
- :first-line
- :first-letter
- :selection
```
p:before {}
```

Pseudo-classes

Pseudo-class classifies elements on charactetistics other that name,attribute or content; appears anywhere
- :first-child:last-child
- :hover
```
a:active {}
```

Pseudo-classes

active
checked
enabled
first-child
last-child
focus
hover
visited

example show checkbox popup

CSS Units

absolute
- in: inches
- cm: centimers
- mm: millimetrs
- pt: points
- pc: picas
- px: pixels, relative to the viewing device
relative
- em: the font-size of relevan font
- ex: the x-height of relevant font
- %: percentage, relative to another value

use relative than absolute units

CSS Units Usage

em: scalable unit. An em is equal to the current font-size, for ex, font-size = 12pt, then 1em=12pt
px: fixed-size unit
percent: scalable unit

Inheritance

properties applied to parent elements can be inherited by child elements
if property has valued inherit, then its parent value will be applied to element
list of css properties has already default value inherit
avoid universal selector * with inherited properties

<style>.parent{  color: red;  border: 1px solid #000;}</style><div class="parent">   <span>red text here</span></div>

overflow

overflow: auto | hidden | scroll | visible | inherit

block size overflow row overflow

Task

CSS Vendors Prefix

Chrome: -webkit-
Safari: -webkit-
Firefox: -moz-
IE: -ms-
Opera: -webkit-

CSS Vendors Prefix

background: -moz-linear-gradient(...);background: -webkit-linear-gradient(...);background: -o-linear-gradient(...);background: linear-gradient(top, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);

Gradients

Can i use

not all properties are cross browser

can i use

Debugging

Chrome dev tools
Firefox firebug
IE dev tools

Testing IE version: IETester

Online resources creating screenshots of website for different platforms

Box model

every element is a rectangular box
element can have sizes, margins, padding and borders
all these properties together form box model

Models

traditional. IE 6
- sizes height & widht include content, paddings and margins
W3C model
- sizes height & width include content only

Box model examples

Manage Box Model

box-sizing

default value - content-box. W3C model
border-box - IE 6
verndors
- -moz-box-sizing
- webkit-box-sizing
well supported: caniuse

* is broken with usage min-width, min-height in IE8 and FF <17v

Block elements

starts on new line
if no width, expands to parent width
if no height, expands to fit childs

<p>,<div>,<header>,<nav>,<ul>,<li>

Inline elements

fall into the normal flow of the document
flows as text
ignores top/bottom margins
ignores width and hegith properties
if floated become block-level element

<a>,<span>,<code>,<b>,<em>,<i>

Handle block & inline element

CSS property display - defines how element is displayed in document

none
block
inline
inline-block

inline & inline-block example visibility hidden

Display values

list-item
table
inline-table
table-caption
table-cell
table-column
table-row

Margin collapsing

if vertical margin of two elements are touching

the margin of the el with the largets margin will be honored, while the smallest margin will be collapsed to zero
one margin is negative, the margin values are added together
bot are negative, greater negative is used

Example

Document flow

Block level elements begin on new line occupy available width
Inline level elements fall into the normal flow of the document

Normal document flow - its how page is rendered, when you do nothing with its styling
Browser renders page elements in the order they are encountered: top first

Modify flow

document flow can be modified by css properties:
- position
- float

Position

position: static | relative | absolute | fixed

static
- default value
- keeps element within it normal flow
relative
- allows to use box offset: top, left, right, bottom
- offset shift the element from it default position
- if both left & right declared, the priority given to the direction, default for the language page is written
absolute and fixed breaks the flow

Static Relative

Absolute

accept box offset properties
element is positioned in relation to its containing parent, which is relatively or absolutely positioned
in case no such parent exists, element positioned relatively body
if no offsets are set, element moved to the top left of the parent
if el has no widht or height, by defining pairs left & right, top & bottom you can make element stretch

Usage

example

Fixed

works almost the same as absolute
positioned relatively browser viewport
doesn't scroll with the page

Fixed

Task

Positioning

Float

float: left | right | none | inherit

breaks the normal flow
is displayed as block
width = content width
element moved to left or right
all elements after it bypass through this element

floats

What you should know about floats

vertical margins of a floated box are not collapsed with the margins of boxes either above or below it
elements after floated element will bypass it. To avoid this apply clear property to them
parent element doesn't stretch vertically, when contains floated elements
set width to floated element

Floats

The first thing we need to remember is that a floating element is shifted either to the left or to the right. It is not possible to make an element float in the centre

Clearing floats

<div class="parent">  <div class="left"></div>  <div class="right"></div></div>

add element clear: both; solution

using overflowsolution

.clear { clear: both;}<div class="parent">..<div class="clear"></div></div>

parent floatsolution
```
.parent { overflow: hidden;}
```
clearfixsolution
```
.parent { float: left;}
```

Task

Task1

Task2

Homework

Float task

Float usage

two column layout
- fixed width
- fluid width
three columns layout
fixing footer

Homework

try create two column layout. just do it

Z-Index

elements are positioned upon the z-index as the flow in DOM
top elemente positioned behind the bottom elements
affects only if element has relative, absolute or fixed position

example в целом без z index элементы идут как появляются в документе и будут друг друга из-за этого перекрывать Elements with non-static positioning will always appear on top of elements with default static positioning.

Stacking context

The stacking context's root element
Positioned elements with negative z-index values
Non-positioned elements
Positioned elements with a z-index value of auto
Positioned elements (and their children) with positive z-index values

example <div> <span class="red"></span> </div> <div <span class="green"><span> </div> <div> <span class="blue"></span> </div>

Style types

Browser styles
User styles
Author styles

Browser styles

each browser defines its own default styles for HTML elements
single page can be rendered in different browsers in different ways due to browser styles

CSS Reset

2004 Andre Krespanis - universal selector

*{ margin: 0; padding: 0; }p { margin: 5px 0 10px 0;}

Eric Meyer - named CSS Reset
css reset
- margins, paddings
- display
- line-height
- etc
Yahoo! - YUI CSS Reset

Reset Usage

choose CSS Reset or write custom
CSS Reset is the first thing browser should see
put reset in separate file
avoid redundant css. modify CSS Reset if needed

CSS Specifity

simple selectors are applied as they are mentioned in document:
- below declarations override above written rules
BUT when talking about complex selectors things become complicated
- each css selector has its own weight
- when stylesheets are loaded, all declarations are given a weight
- depend on this weight browser applies css styles to elements

CSS Specifity

specificity determines, which CSS rule is applied by the browser
if two selectors apply to the same element, the one with higher specificity wins
the latest rule wins for selectors with an equal specificity

Specifity example покажи на доске на пальцах

SPECIFICITY HIERARCHY

inline styles
id selectors
class, attributes and pseudo-classes
Elements and pseudo-elements

don't use !important

MEASURE SPECIFICITY

h2 #address .data img:hover

start at 0, add 1000 for inline styles, 100 for Id, 10 for class(attributes) and 1 for elements

!important

color: red !important;

aimed to use in user styles

example

SPECIFICITY HIERARCHY

Measure SPECIFICITY

*{}
ul ol li.error{}
style=""
li:first-child
#address ul
div #phone
body ul.phones

Practices

Common

omit protocol
```
<script src="www.test.com"></script>
```

use indent

<ul>  <li></li><ul>

.error {;  color: red;}

naming

<IMG HEIGHT="">

<a class='link_navi' id="link_id">

CSS

REMEMBER

browser reads selector from right to left
browser evaluates selector, starting from the rightmost selector - key selector - and moving through each until it finds a match or discards the rule
short rules are evaluated better

CSS Best Practices

descendant selector

body .navigation ul li a { }.navigation-link { }

universal selector
```
body ul li * {}
```
child & adjacent selector
```
ul > li > a { }ul + div { }
```
redundant selector
```
div#feedback {}#feedback {}
```

Best Practices

avoid universal selector
make rules specific
keep short and clean selector
don't use tags with id or class
favor class selector to descendant selector
avoid inline styles
styles should be in <head> section
provide image dimensions
use shorthands

Best Practices

omit unit when value is zero
```
margin:0;
```
omit leading zero in values
```
line-height: .8em;
```
color shorthand
```
color: #ebc; /* #eebbcc; */
```
don't forget semi-colon after last rule
use spaces between colon and value
use single ' quatation

Back to html + CSS

Tables

<table>  <tr>    <td></td>    <td></td>  </tr></table>

Table attributes

cellpadding
cellspacing
border
align
width

Manage tables

colspan & rowspan
caption
theader
tfoot

tables

Homework

:nth-of-type(n)

n can be a number, a keyword, or a formula

odd||even
number
3n+1

Page Layout

iframe
table
block layout
flexbox

Table Layout

website often presented in columns form
it seems that tables are fit to build page layout as they have column, rows and etc

Its pure evil

hard to maintain - need to add column -> break the page
code readability
tables slower - much extra elements
table usually prevent incremental rendering
tables are semantically incorrect markup

Block layout

block layout consist of constructive usage of block level elements and stylesheets
principles:
- separation of content adn presentation
- divs are the foundation
- tables are used for data prensentation

Flexbox

display: flex;

provides efficient way for managing items in container
- lay out items
- aligning
- "flex" children to fill all the items
- ordering
very powerful

Flex example

CSS Layouts

Fixed
Fluid
Adaptive
- Responsive

Fixed width layouts

width of the page use unit of measurement that does not depend on factors such as font size, browser windows sizes

<div class="wrapper">  <div class="sidebar"></div>  <div class="main"></div></div><style> .wrapper{   width: 960px;   margin: 0 auto;}</style>

FIXED LAYOUT

pros
- easy to maintain
- width are the same for every browser
- no need for min-width and -height, which are not supported by every browser
- even is website developed to be compatible with the smallest screen resolution, site will be legible for larger resulution
cons
- can look badly on small monitors
- on large monitors many unused space, look narrow
- low usability

Fluid Layout

layout is created without specifying absolute sizes
as a rule percentage unit is used
no scroll bar - page occupy all available space

pros
- adapt to almost any viewport
- as more as possible content is visible
cons
- too much content can confuse the user
- hard to maintain

Devices

desktop browser
phones with different resolutions
tablets

HOW BUILD WEBSITE FOR ALL OF THEM?

Adaptive

server logic
target driven development
predetermined set of screen and device sizes

Adaptive

Responsive

the same markup
flexible grid
- adaptation to all screen resolution
- preserving proportions
- relative units
- easily testing by resizing the window
flexible media
media queries

Responsive

THINGS TO CONSIDER

connection speed
- minimize HTTP requests
  - CSS sprites
  - CSS3 instead of images
devices
- make touchable content bigger
- grow content when user use it

RESPONSIVE & ADAPTIVE

adaptive requires supporting for several versions of website for different resolutions
different markup in adaptive allows optimizations for various devies
responsive based on html5 and css3, so requires relatively modern web browser
single markup
CSS driven

HTML & CSS – HTML – HyperText Markup Language

aalekseenko

HTML & CSS – HTML – HyperText Markup Language

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

htmlcourse

HTML & CSS

What is HTML5

HTML

HyperText Markup Language

language of the Web

Show how to create html page - empty .html

HTML syntax

Heading level 2

Attributes

standard attributes

tag-related attributes

Data attributes

Element relationships

Relationship example

Special characters

HTML document structure

<!DOCTYPE>

Valid DOCTYPE

QUIRKS MODE

<html>

HTML manifest

<head>

Head elements

<link>

Attributes

<meta>

Attributes

<script>

<noscript>

<body>

task

create simple page

Elements types

Layout

Typography

Typography

Multimedia

Structure Elements

Form

Other

User input Elements

<Input>

Input types

User input Elements

Type Samples

Type Samples

Lists

li attributes

Lists usage

Anchor

defines a hyperlink, which is used to link from one page to another

Link States

Anchor special tools

Forms

Forms

Orginizing forms

Iframe

HTML Reference

What's wrong with web

as a result

Semantic markup?!

Markup content according to its meaning

Semantics aim

help machins handle html documents

Document semantics benefits

What to do

use semantic tags

Examples of non-semantic tags

Semantic elements

HTML5 semantic markup

<header></header>

<nav></nav>

<article></article>

<section></section>

Deciding When to Use a section or div

0 0