Html5&css3

Semana 10
Asignatura Aplicaciones Web de Última Generación
Tema HTML5

HEAD

 New DTD
 Short character encoding

<!doctype html>
<meta charset=utf-8>

 HTML5 is not an XML language, so you don’t need to quote or self
close elements. All of these are equally valid HTML5:

<META CHARSET=UTF-8> <meta charset=utf-8 />
<META CHARSET=UTF-8 /> <meta charset=”utf-8”>
<META CHARSET=”UTF-8”> <meta charset=”utf-8” />
<META CHARSET=”UTF-8” /> <MeTa CHARset=utF-8>
<meta charset=utf-8>

2

Semana 10
Tema HTML5

Common attributes
Attribute Description
accesskey Specifies a shortcut key to activate/focus an element
Specifies one or more classnames for an element (refers to a class in a
class
style sheet)
contenteditableNew Specifies whether the content of an element is editable or not
Specifies a context menu for an element. The context menu appears when
contextmenu New
a user right-clicks on the element
dir Specifies the text direction for the content in an element
draggableNew Specifies whether an element is draggable or not
Specifies whether the dragged data is copied, moved, or linked, when
dropzoneNew
dropped
hiddenNew Specifies that an element is not yet, or is no longer, relevant
id Specifies a unique id for an element
lang Specifies the language of the element's content
Specifies whether the element is to have its spelling and grammar checked
spellcheckNew
or not
style Specifies an inline CSS style for an element
tabindex Specifies the tabbing order of an element
Title Specifies extra information about an element

http://www.w3schools.com/html5/html5_ref_globalattrib 3

Semana 10
Tema HTML5

New structural elements

 http://code.google.com/intl/es-ES/webstats/2005-12/classes.html

4

Semana 10
Tema HTML5

<header>
<h1>My interesting life</h1>
</header>
<nav>
<h2>Menu</h2>
<ul>
<li><a href=”last-week.html”>Last week</a></li>
<li><a href=”archive.html”>Archives</a></li>
</ul>
</nav>
<article>
<h2>Yesterday</h2>
<p>Today I drank coffee for breakfast. 14 hours later, I went to bed.</p>
</article>
<article>
<h2>Tuesday</h2>
<p>Ran out of coffee, so had orange juice for breakfast. It was from concentrate.</p>
</article>
<footer>
<p><small>This is copyright by Bruce Sharp. Contact me to negotiate the movie
rights.</small></p>
</footer>

5

Semana 10
Tema HTML5


 header
The header element represents a group of introductory or
navigational aids ...
Note: A header element is intended to usually contain the section’s
heading (an h1–h6 element or an hgroup element), but this is not
required. The header element can also be used to wrap a section’s
table of contents, a search form, or any relevant logos.
<header>
<hgroup>
<h1>Thai cookery school></h1>
<h2>Learn authentic Thai cookery in your own home</h2>
</hgroup>
<nav>
<ul>
<li>Home</li>
<li><a href=”courses.html”>Cookery courses</a></li>
<li><a href=”contact.html”>Contact</a></li>
</ul>
</nav>
</header> 6

Semana 10
Tema HTML5


 nav
The <nav> element is designed to mark up navigation. Navigation is
defined as being links around a page or within a site.
The contents of a <nav> element will probably be a list of links, marked
up as an unordered list or, in the case of breadcrumb trails, an ordered
list. Note that the <nav> element is a wrapper; it doesn’t replace the
<ol> or <ul> element, but wraps around it.

 aside
can be used for typographical effects like pull quotes or sidebars,
for advertising, for groups of nav elements, and for other
content that is considered separate from the main content of
the page.

7

Semana 10
Tema HTML5


 footer
A footer for its nearest ancestor sectioning content or sectioning root
element. There can be more than one footer on a page, when the
nearest ancestor sectioning content or sectioning root element is the
body element, then it applies to the whole page.

 article
The article element represents a component of a page that consists of
a self-contained composition in a document, page, application, or site
and that is intended to be independently distributable or reusable, e.g.,
in syndication
<article>
<h3>My article</h3>
<p>Blah blah</p>
</article>
8

Semana 10
Tema HTML5

article
<article>
<header>
<h2>Memoirs of a Parisian lion-tamer</h2>
<time datetime=2010-01-24>January 24th,
2010</time>
</header>
<p>Article text</p>
<footer>
Posted in <a href=”/?cat=3” >Books
category</a>.
<a href=”/?p=34#respond”>No Comments</a>
</footer>
</article>

9

Semana 10
Tema HTML5

time

<time> is a new element for unambiguously encoding dates and
times for machines, while still displaying them in a human-readable
way.

 pubdate is a Boolean attribute to indicate that this particular <time> is
the publication date of an <article> or the whole <body> content.

10

Semana 10
Tema HTML5

section

 The section element represents a generic section of a document or
application. A section, in this context, is a thematic grouping of
content, typically with a heading.
 Examples of sections would be chapters or the numbered sections of
a thesis. A Web site's home page could be split into sections for an
introduction, news items, and contact information.

11

Semana 10
Tema HTML5

Forms

 New input values
<input type=“search”>
<input type=“number”>
<input type=“range”>
<input type=“color”>
<input type=“tel”>
<input type=“url”>
<input type=“email”>
<input type=“date”>
<input type=“month”>
<input type=“week”>
<input type=“time”>
<input type=“datetime”>
<input type=“datetime-local”>

13

Semana 10
Tema HTML5

Forms – New attributes
 autofocus
The autofocus Boolean provides a declarative way to focus a form
control during page load. Previously done by JavaScript using focus()
method.

 required
The required attribute can be used on <textarea> and most input
fields (except when the type attribute is hidden, image, or some button
types such as submit). The browser will not allow the user to submit the
form if required fields are empty.

 multiple (webkit)
multiple attribute used in <input type=file>, the user can upload
multiple files. It can also be used with any other input type: for example,
<input type=email multiple> allows the user to enter multiple email
addresses. 14

Semana 10
Tema HTML5


 placeholder
placeholder atribute allows placing text in an input field as a hint for
the user, removing the text when the user focuses on the field, and
restoring the text when focus leaves the field (if empty).

 pattern
pattern attribute allows to specify a custom regular expression that
the input must match. So, if the user must always enter a single digit
plus three uppercase alphabetic characters, the regular expression
would be one number [0–9] and three letters[A–Z]{3}

<input pattern=“ [0-9][A-Z]{3}” name=“part” title=“A
part number is a digit followed by three uppercase
letters.” placeholder=“9AAA”>

15

Semana 10
Tema HTML5


 min, max and step
with <input type=number>, these attributes constrain the range of
values that can be entered in an input; user can’t submit the form with a
number smaller than min or larger than max. It can also be used with
date:
<input type=date min=2010-01-01 max=2010-12-31>

step controls the level of granularity of input. So if you want the user to
enter a percentage between 0 and 100, but only to the nearest 5, you
can specify

<input type=number min=0 max=100 step=5>

16

Semana 10
Tema HTML5


 list
The <datalist> is reminiscent of a select box, but allows users to enter
their own text if they don’t want to choose one of the predefined
options. The list is contained in a new <datalist> element, the id of
which is referenced in the value of the list attribute:

<input id=form-person-title type=text list=mylist>
<datalist id=mylist>
<option label=Mr value=Mr>
<option label=Ms value=Ms>
<option label=Prof value=”Mad Professor”>
</datalist>

<datalist> has no rendering of its own, but instead shows up as values
in a select-like field. 17

Semana 10
Tema HTML5

Example

<form>
<label for=form-name>Name</label>
<input type=text name=form-name id=form-name required>
<label for=form-email>Email</label>
<input name=form-email id=form-email type=email required>
<label for=form-url>URL</label>
<input name=form-url id=form-url type=url>
<label for=form-comment>Comment</label>
<textarea name=form-comment id=form-comment required>
</textarea>
<input type=submit>
</form>

18

Semana 10
Tema HTML5

CSS3– What’s new
 CSS3 is completely backwards compatible, so you will not have to
change existing designs. Browsers support CSS2.

 CSS3 Modules
CSS3 is split up into "modules". The old specification has been split into smaller
pieces, and new ones are also added.
http://www.css3.info/modules/

20

Semana 10
Tema HTML5

Media queries

 CSS2 added support for the media="screen" way of defining which
stylesheet to use for which representation of the data. CSS3 adds a
new feature to this functionality, by adding media queries.
 Basically, this means you can change stylesheets based on for
instance the width and height of the viewport.
by using Media Queries, presentations can be tailored to a specific range of output
devices without changing the content itself.
 @media allows us to specify that a certain set of CSS rules should
only apply to certain types of device. So the definitions within the rule
block @media screen {...} Only would be interpreted by devices
connected to computer monitors and the rule @media projection
{... } Only apply to projectors.

21

Semana 10
Tema HTML5

Media queries

 CSS3 adds significant new capabilities that allow us to define sets of
styles depending on common properties of the devices that access to
our sites. Properties such as the height and width or aspect ratio or
the number of colors available. @media rules can be used to adapt
our sites, not only for common devices, but for all kinds of devices that
our visitors use to access to our website

22

Semana 10
Tema HTML5

Media queries

Main properties:
- Aspect ratio: Look at the relative dimensions of the device expressed as an aspect
ratio: 16:9 for example.
- Width and height: Look at the size of the viewing area. They can also be
expressed in minimum and maximum values.
- Orientation: See if the layout is wide (the width is greater than the height) or
vertical (height is greater than the width). This allows us to adjust the designs for
devices with rotational properties of the screen as the iPhone and other
smartphones and tablets.
- Resolution: Look at the density of the pixels in the output device. This is especially
useful when you want to take advantage of the benefits of the devices with a
higher resolution to 72 dpi.
- Color, monochrome and color-index: find the number of bits per color or color.
This allows us to create specific designs for devices monochromatic.

http://caniuse.com/css-mediaqueries
http://www.w3.org/TR/css3-mediaqueries/#media0
http://www.w3.org/TR/css3-mediaqueries/#media1 23

Semana 10
Tema HTML5

Example

@media (max-width:500px) {
#muestra{
background-color:#06F;
}
}

@media (min-width:510px) {
#muestra{
background-color:#F00;
}
}

24

Semana 10
Tema HTML5

Attribute selectors

 An attribute selector will match elements on the basis of either the
presence of an attribute, or the exact or partial match of an attribute
value.
 Attribute selectors are delimited by square brackets; the simplest form
of an attribute selector consists of an attribute name surrounded by
square brackets:
- [href] { declarations }
- a[href] { declarations }
• This selector matches any a element that has an href attribute
- input[type="submit"] { declarations }
• This selector matches any input element that has a type attribute with a value equal to
"submit".
 Default attributes: Attribute selectors can only match attributes and
values that exist in the document tree, and there’s no guarantee that a
default value specified in a DTD (or similar) can be matched. Do not
rely on default attributes.
25

Semana 10
Tema HTML5

Attribute selectors

 We can use the |= operator to cause an attribute selector to match
elements which have an attribute containing a list of words that begin
with a specific value:
- [class|="en"] { declarations }

 We can use the ~= operator to make an attribute selector match
elements that have an attribute that contains a list of space-separated
words, one of which is the specified value:
- [class~="warning"] { declarations }

26

Semana 10
Tema HTML5

Vendor prefixes

 Prefixes were introduced because the CSS3 specification is still in
development.
 Prefixes provide a way of adding in what are, in essence,
experimental and unfinished properties in a way that
a) won’t harm or affect the rest of your code,
b) can be overridden once the spec is finished and implemented,
c) avoid any confusion over what is unfinished and what isn’t.
Prefix Organisation
-ms- Microsoft
mso- Microsoft Office

-moz- Mozilla Foundation (Gecko-based browsers)

-o- Opera Software

-atsc- Advanced Television Standards Committee

-wap- The WAP Forum
-webkit- Safari (and other WebKit-based browsers)
-khtml- Konqueror browser

http://reference.sitepoint.com/css/vendorspecific
27

Semana 10
Tema HTML5

Borders
 Rounded corners
div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Firefox 3.6 and earlier */
}

 Box-shadow
div
{
box-shadow: 10px 10px 5px #888888;
/* H V Blur Color */
}
http://www.css3.info/preview/box-shadow/
Border-image:
http://www.w3schools.com/css3/tryit.asp?filename=trycss3_border-
image 28

Semana 10
Tema HTML5

Background

Background-size
 The background-size property specifies the size of the background
image.
 You can specify the size in pixels or in percentages. If you specify the
size as a percentage, the size is relative to the width and height of the
parent element.
- background-size:80px 60px;

Background-origin
 The background-origin property specifies the positioning area of the
background images.
 The background image can be placed within the content-box,
padding-box, or border-box area.

- background-origin:content-box;
29

Semana 10
Tema HTML5

Color

RGB/RGBA
 Red (R), Green (G), Blue (B)
 Alpha (A)
- An element with opacity/alpha value of 1.0 is fully visible (opaque) while an
element with opacity value 0.0 is completely invisible.
- background:rgba(153, 134, 117, 0.2);

HSL/HSLA
 Hue (H), Saturation (S), Lightness (L) / Alpha (A)
- Hue is a degree on the color wheel: 0 & 360 – red, around 120 – green, 240 –
blue.
- Saturation is a percentage: 0% – grayscale, 100% – full color.
- Lightness is a percentage: 0% – dark, 50% – the average, 100% – light.
- background:rgba(153, 134, 117, 0.2);

30

Semana 10
Tema HTML5

Text Effects

 The ‘text-shadow’ property:
h1
{
text-shadow: 2px 5px 2px #FF0000;
/* H V Blur Color */
}
 Text overflow control by word wrap:
p {word-wrap:break-word;}

http://www.w3.org/TR/css3-text/#overflow-wrap0
p {overflow-wrap:break-word;}
normal | [ break-word || hyphenate ]

31

Semana 10
Tema HTML5

Web Fonts

 When you have found/bought the font you wish to use, simply include the
font file in the web site, and it will be downloaded automatically to the user
when needed.
 You will have to describe your selected font with the new CSS3 @font-face
rule.

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot') format("opentype"); /* IE */
}

div
{
font-family:myFirstFont;
} 32

Semana 10
Tema HTML5

Columns
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;
}
div{
-moz-column-count: 3;
-moz-column-gap: 1em;
-moz-column-rule: 1px solid black;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;
column-count:3;
column-gap: 1em;
column-rule: 1px solid black;
}

33

Html5&css3

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Html5&css3

Ähnlich wie Html5&css3 (20)

Mehr von ipmindthegap

Mehr von ipmindthegap (12)

Html5&css3