Lenguaje de Marcado

Programacin Web
Unidad 2. Lenguaje de marcado
2.1 Introduccin
What is HTML5?
Defines a parsing algorithm for generating a consistent DOM (Document
Object Model) tree, even from ambiguous or poor-quality markup.
Adds new elements to support multimedia and web applications.
Redefines the rules and semantics of existing HTML elements.
With HTML5, we can now embed audio and video natively within
HTML documents.
We can use inline SVG (Scalable Vector Graphics) markup.
We can build more robust form experiences, complete with native
error checking.
We can create games, charts, and animations using the canvas
element.
Documents can communicate with each other using

cross-document messaging.
In other words, HTML5 is much more of an application
platform, not just a markup language.
Features of HTML5
Media API: This embeds, plays, and pauses multimedia content.
Text Track API: This reads properties of the text tracks of multimedia
content.
Drag and drop API: This natively makes elements draggable by setting
an attribute.
Offline Application Cache: This saves data locally for offline use
5
History API: This asserts more control of the back button.

Canvas API: This literally draws all over the web in 2D and 3D.
Cross Document Messaging: This overcomes cross-site scripting
limitations.
Microdata: This adds more semantic content for search engines to find.
MIME Type and Protocol Handler Registration: This extends

applications with handlers for additional protocols.
Web Workers: This spawns threads independent of user interaction.
Web Storage: This stores data on the client
Web Sockets: This sends two-way messages between server and client
With modern browsers' increasing support for HTML5, reliance on pluginbased technologies is starting to give way to browser-based
implementations.
With the APIs that allow for better control of the experience, the client is
finally beginning to catch up to its promise. Mobile web browsers have
especially become a catalyst for this. Since Adobe Flash is not supported on
devices such as the iPhone and iPad, and since implementation of HTML5
features on Safari have grown, HTML5 is quickly becoming a standard for
mobile web application development.
It's all about semantics
HTML5 makes an attempt to codify information on the

web in a more cohesive way than before.
The div tag is often used, but what does a div tag really
mean?
To get around this, application developers have broken up
their content using id attributes based on standards and
best practices of web presentation.
9
For example, application developers use tags such as the following:

<div id="header">
<div id="footer">
The obvious problem is that what gets used for the id attribute
need not follow a standard. One application developer could use
id="header" while another uses id="head" .
10
In order to standardize structure based on semantics, HTML5

introduces a set of new tags that takes the vagaries out of
the process.
HTML5 introduces a set of new top-level tags, which can be
broken down into the following categories: content,
language, layout, and format.
11
The Anatomy of HTML5

Every HTML document is made from elements, and elements are represented
by tags.
Tags are a sequence of characters that mark where different parts of an
element
start and/or stops.
All tags begin with a left-facing angle bracket (<) and end with a right-facing
angle
bracket (>).
The element name may be followed by an attribute (or series of attributes) that
describes how that instance of an element is supposed to behave.
You can set an explicit value for an attribute with an = sign.
Some attributes,
the value is true.
however,
are
empty.
If
an
empty
attribute
is
present,
<!DOCTYPE html> is required. This is how the browser knows that

we re sending HTML5. Without it, there s a risk of browsers parsing our document
incorrectly.
If it s served as text/html, the following rules apply:

Start tags are not required for every element.
End tags are not required for every element.
Only void elements such as br, img, and link may be "self-closed"
with />.
Tags and attributes are case-insensitive.
Attributes do not need to be quoted.

Some attributes may be empty (such as checked and
disabled).
Special characters, or entities, do not have to be escaped.
The document must include an HTML5 DOCTYPE.
Content tags
The content tags introduced in HTML5 define how new types of content can
be embedded into a web page.
audio: This tag is used for embedding sound content. Before HTML5, either
some browsers implemented support for audio inconsistently or a special
player typically developed using Adobe Flash would have been required to
play sound.
16
video: This tag is used for embedding video content. Like with
audio,
there was inconsistent support or a special player was required to
play video content. Web browsers that support the video tag have a
built-in video player.
canvas: This tag allows for basic 2D to be drawn via JavaScript. 3D
graphics are not consistently supported, however, and are optional.
17
Language tags
With internationalization taking on more and more precedence,

localization has been a special challenge for web developers.
HTML5 introduces a set of new tags to help make content more
accessible to larger audiences.
bdi: This tag defines the directionality of text. This is typically used
to
support languages that are read right-to-left.
18
ruby: The ruby tag in conjunction with the rt and rp

tags defies the Ruby annotation for East Asian
typography.
19
Layout tags
HTML5 comes with a set of fist-class tags that not only help with
laying out the page, but also allows for the page to be broken up
altogether.
With HTML5, web developers have the ability to share sections of
content in a more standard way:
20
header: This tag defies the header of the page or of a section or article.
footer: This tag defies the footer of the page or of a section or article.
nav: This tag defines the menu structure of the website. These are the
navigational links used to semantically break up the website.
section: This tag defies sections of a page. The article and aside tags
are
in a way specialized section tags.
aside: This tag defines the sidebar content for a page. Often, a web page
is broken up with ancillary content pushed to the side.
article: This tag defines the main content for a page. While tags such as
section, aside, header, and footer define ancillary content to the page, the
article tag identifies the portion of content that is considered to be the
focal point.
Format tags
HTML5 introduces a new set of special tags, which define how areas of content can
be identified and formatted appropriately.
figure: This tag identifies non-contiguous content that is layered into a body of
text. For example, it can be used to wrap diagrams, charts, and graphs that are
referenced by a body of text.
details: This tag defies content that can be toggled as visible or hidden. It is
geared towards showing and hiding content based on a user action such as helprelated content. Web developers have built a variety of solutions to do this and,
with HTML5, the web browser takes care of it.
hgroup: This tag wraps the well-known h1-h6 tags into

a cohesive structure. When headings are related,
hgroup shows that they are related. For example, for an
article with a title and subtitle, the title would be
wrapped in an h1 tag while the subtitle would be
wrapped in an h2 tag.
wbr: This tag defies a word break opportunity. Typically,

lines of text are broken up by spaces. The wbr tag
allows for the web developer to specify where in a set of
contiguous non-space characters line breaks can be
introduced when there is no room to display it all on one
line.
progress: This tag indicates the progress of a task and can be used in
conjunction with JavaScript to display a progress bar to the user.
time: This tag is a microformat tag that allows one to specify
semantically that something is a date or time.
meter: This tag is a format tag to define a scalar measurement with a
known range.
mark: This tag indicates text that is relevant to the user. Typically, this
would be used for highlighting specific words within a passage.
Forms get an upgrade
Forms in HTML5 get a whole new set of functionality to allow for better
validation of content and ease of use.
datalist: This tag works similarly to a select tag with the added feature
of being able to type ahead to select items in the list.
keygen: This tag generates a key pair for use in forms. This is typically
used
for client authentication.
output: This tag indicates the result of a calculation. It is

associated with a form tag to display simple calculations to the
user especially when used in conjunction with the new form input
types.
The following input types are new with HTML5:
color: This type displays a color picker, which submits a hex code
for that color.
date: This type displays a date picker, which submits a date

datetime: This type displays a date and time picker, which submits a
date and time including time zone.
datetime-local: This type displays a date and time picker, which
submits a date and time without time zone.
email: This type displays a field for entering e-mail addresses.
month: This type

month and year
number: This
numeric values.
displays
type
displays
month-year
field
picker,
which
constrained
for
submits
entering
range: This type constrains the user to select numbers within a range.
Typically, this will display as a slider.
search: This type displays a search field.
tel: This type displays a field that constrains the user to typing in a
valid telephone number.
time: This type displays a time picker.
url: This type displays a field that constrains the user to typing in
a valid URL.
week: This type displays a control for picking a week within a year.
Breakdown
The line below is called an HTML element.

<h1>This is a heading </h1>
An HTML element generally consists of HTML tags

(<h1> and </h1>) that surround content (This is a
heading).
An HTML tag is a word or character enclosed within the
greater than and lesser than signs < >
HTML tags usually come in pairs; an opening tag

<h1>
and a closing tag
</h1>
However, there are so-called singleton tags that
standalone, like the tag for a horizontal rule
<hr />
Singleton tags should have a closing slash (for esoteric

reasons, even though they generally work just fine
without them).
HTML elements only require an opening and closing tag
when there is something in between them.
2.4. Estructura global de un documento

<!DOCTYPE html>
<head>
<title>
</head>
<body>
</body>
</html>
</title>
<html> indicates that this document is in fact an HTML

web page.
<head> is our webpage header. This is where we will

place information about our webpage such as the title,
keywords, and description.
None of the information place within the <head> will
appear on the webpage itself.
<title> pertains to the title of the web page. The text

you enter here may not necessarily match the title or
logo that appears on the web page itself.
<body>
pertains to the body of our webpage, in other

words the content and layout of the webpage itself.
HTML Span
Much like a divider, the span tag is used in conjunction with
CSS to further stylize and format text (and other content)
within an HTML element.
.thin {font-weight:normal; font-family:georgia;}

<h1> This is a header with a <span class="thin"> span
</span> </h1>
HTML Line Break

The br HTML tag is used for line breaks. A line break be
used for text or any other content.
Example
<p>This is an example of <br> a line break</p>
HTML Paragraphs
Its not enough to simply separate text using the return
key.
Even though it may appear obvious to human beings,
we need to tell the web browser where paragraphs
begin and end. And we can do this quite simply by using
the paragraph tag:
<p>
Example
<p>This is an example of a paragraph.</p>
HTML Blockquotes
A blockquote is a block of text (typically an excerpt or
long quotation) that is formatted differently (indented,
italicized, etc.) from the main body text while meant to
be read as part of the narrative
Example
<blockquote>
This is an example of a blockquote.
</blockquote>
HTML Tables
<table> Table
<tr>Table Row
<td>
Tabular Data
<th>
Table Heading
<caption>
Caption
You can not create table columns using HTML. Instead,

you can only create rows <tr> which contain cells
<td>. The cells in your first row define the number of
columns in your table.
In order to create a table you need to establish the
<table> element.
<table> </table>
Then you need to create a table row.

<tr> </tr>
And within each table row you need to add cells (tabular
data) <td>
<td> </td>
When you put it all together, you get something like

this..
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
The table above doesnt really look like a table because

its scrunched up and contains no borders. So lets add
some borders.
<table border="1">
<tr>
<td border="1">cell 1</td>
</tr>
</table>
Lets add spacing between our table cells using

cellspacing
<table border="1" cellspacing=20">
<tr>
</tr>
</table>
And we can add cell padding using cellpadding

<table border="1" cellspacing="10" cellpadding="10">
<tbody>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</tbody>
</table>
If a table cell is meant to contain a heading rather than data, use the
table heading tag <th> instead of the tabular data tag <td>.
<table border="1" cellspacing="10" cellpadding="10">

<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</tbody>
</table>
We can control the width of our columns and even the table itself. *The
value can be a percentage % or pixels px.
<table border="1" width="100%" cellspacing="10" cellpadding="10">

<tbody>
<tr>
<th width="70%">Heading 1</th>
<th>Heading 2</th>
</tr>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</tbody>
</table>
We can also have a single cell span multiple rows using rowspan
<table width="100%" border="1" cellspacing="10" cellpadding="10">

<tbody>
<tr>
<th>A</th>
<th>B</th>
</tr>
<tr>
<td>blah</td>
<td>blah</td>
</tr>
<tr>
<td rowspan="2">blah</td>
<td>blah</td>
</tr>
<tr>
<td>blah</td>
</tr>
</tbody>
</table>
Structuring Documents
HTML5 adds several elements that provide a way to break a
single document into multiple chunks of content content that
may be either related or independent.
These elements add semantic richness to our markup, and make
it easier to repurpose our documents across media and devices.
Example
<div id="header">
<h1> HTML5 <i> Noticias </i> </h1>
<h2> Cada noticia est clasificada </h2>
<ul id="nav">
<li><a href="#">Mundo</a></li>
<li><a href="#">Nacionales</a></li>
<li><a href="#">Locales</a></li>
<li><a href="#">Deportes </a></li>
<li><a href="#">Entretenimiento</a></li>
</ul>
</div>

Lenguaje de Marcado

Hochgeladen von

Dokumentinformationen

Originalbeschreibung:

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Lenguaje de Marcado

Hochgeladen von

Copyright:

Verfügbare Formate

Programacin Web

Unidad 2. Lenguaje de marcado

Documents can communicate with each other using

History API: This asserts more control of the back button.

MIME Type and Protocol Handler Registration: This extends

It's all about semantics

HTML5 makes an attempt to codify information on the

For example, application developers use tags such as the following:

In order to standardize structure based on semantics, HTML5

The Anatomy of HTML5

<!DOCTYPE html> is required. This is how the browser knows that

If it s served as text/html, the following rules apply:

Attributes do not need to be quoted.

With internationalization taking on more and more precedence,

ruby: The ruby tag in conjunction with the rt and rp

hgroup: This tag wraps the well-known h1-h6 tags into

wbr: This tag defies a word break opportunity. Typically,

Forms get an upgrade

output: This tag indicates the result of a calculation. It is

date: This type displays a date picker, which submits a date

month: This type

search: This type displays a search field.

The line below is called an HTML element.

An HTML element generally consists of HTML tags

HTML tags usually come in pairs; an opening tag

Singleton tags should have a closing slash (for esoteric

2.4. Estructura global de un documento

<html> indicates that this document is in fact an HTML

<head> is our webpage header. This is where we will

<title> pertains to the title of the web page. The text

pertains to the body of our webpage, in other

.thin {font-weight:normal; font-family:georgia;}

HTML Line Break

You can not create table columns using HTML. Instead,

Then you need to create a table row.

When you put it all together, you get something like

The table above doesnt really look like a table because

Lets add spacing between our table cells using

And we can add cell padding using cellpadding

<table border="1" cellspacing="10" cellpadding="10">

<table border="1" width="100%" cellspacing="10" cellpadding="10">

<table width="100%" border="1" cellspacing="10" cellpadding="10">

Das könnte Ihnen auch gefallen