the undefined

46
The Undefined

Upload: cally-rosales

Post on 01-Jan-2016

39 views

Category:

Documents


0 download

DESCRIPTION

The Undefined. What is HyperText Markup Language?. Some history. Divide et impera . - PowerPoint PPT Presentation

TRANSCRIPT

Page 1: The Undefined

The Undefined

Page 2: The Undefined

What is HyperText Markup Language?

Page 3: The Undefined

Some history

Page 4: The Undefined

<body bgcolor=“Gray"> <div border=“2" bordercolor=“yellow"> <p>

<font face="verdana" color=“white">Divide et impera</font> </p> </div> </body>

Page 5: The Undefined

<body style="background-color:Gray"> <div style="border:2px yellow"> <p style="font-family:verdana; color:white">Divide et impera</p> </div></body>

Page 6: The Undefined

<head> <style type="text/css">

body { background-color:Gray; } div { border:2px yellow; } p { font-family:verdana; color:white; }

</style> </head> <body> <div> <p>Divide et impera</p> </div></body>

Page 7: The Undefined

<head> <link type="text/css“ media="screen" rel="stylesheet" href="styles.css" /></head><body> <div> <p>Divide et impera</p> </div> </body>

body { background-color:Gray; } div { border:2px yellow; } p { font-family:verdana; color:white; }

styles.css

index.html

<link href="styles.css" type="text/css" rel="stylesheet" media="screen" />

Page 8: The Undefined

Media Type Description

all Used for all media type devices

aural Used for speech and sound synthesizers

braille Used for braille tactile feedback devices

embossed Used for paged braille printers

handheld Used for small or handheld devices

print Used for printers

projection Used for projected presentations, like slides

screen Used for computer screens

tty Used for media using a fixed-pitch character grid, like teletypes and terminals

tv Used for television-type devices

CSS Media Types

media=“screen and (max-device-width: 480px)"media=“screen and (orientation:portrait)"

Page 9: The Undefined

HTML

screen.css

handheld.css

print.css

Page 10: The Undefined

Wikipedia

Page 11: The Undefined

Wikipedia – print view

Page 12: The Undefined
Page 13: The Undefined
Page 14: The Undefined
Page 15: The Undefined

http://csszengarden.com/

Page 16: The Undefined
Page 17: The Undefined
Page 18: The Undefined
Page 19: The Undefined
Page 20: The Undefined
Page 21: The Undefined
Page 22: The Undefined
Page 23: The Undefined
Page 24: The Undefined
Page 25: The Undefined

http://www.csszengarden.com/

Page 26: The Undefined

Real world

Page 27: The Undefined

Red

Page 29: The Undefined
Page 30: The Undefined

Use proper class names

<h2 class=“red">Main article</h2><p class="green">Article summary</p>

<h2 class="title">Main article</h2><p class="summary">Article summary</p>

Page 31: The Undefined

Language

Page 32: The Undefined
Page 33: The Undefined

Semantic markup

Page 34: The Undefined

Rich snippets

Microformats

RDFa (Resource Description Framework in attributes)

Microdata

Page 35: The Undefined

Microformats

Кафе Ромашка г. Солнечный, просп. Романтиков, д. 21 Телефон: +7 (890) 123-45-67 Мы работаем ежедневно с 11:00 до 24:00

Text

HTML

Page 36: The Undefined

MicroformatsYandex

Yandex Maps

Page 37: The Undefined
Page 38: The Undefined

Microdata

Page 39: The Undefined

• http://schema.org/

Page 40: The Undefined
Page 41: The Undefined

Screen

Page 42: The Undefined
Page 43: The Undefined
Page 44: The Undefined
Page 45: The Undefined
Page 46: The Undefined