Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Introducción a XTML 5

No description
by

Xavi Muñoz

on 3 October 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Introducción a XTML 5

Capitulo 1

Introdución
Introducción a
XHTML
Javier Muñoz Bueno
.-¿Qué es HTML?
.-Breve historia de HTML

.-HTML y XHTML
HTML y CSS

Capítulo 2

Características básicas
.-Lenguajes de etiquetas
.-El primer documento HTML
.-Etiquetas y atributos
.-Elementos HTML
.-Sintaxis de las etiquetas XHTML
Introducción
1.1. ¿Qué es HTML?
"HTML es lo que se utiliza para crear todas las páginas web de Internet". Más concretamente, HTML es el lenguaje con el que se "escriben" la mayoría de páginas web

Ej: Un diseñador utilizara el idioma HTML para crear paginas web
Aunque los diseñadores y los ordenadores lo utilicen es muy fácil a prender-lo.

Su siglas significan:

H
yper
T
ext
M
arkup
L
anguage
Hay una organización llamada W3C
"World Wide Web"

El lenguaje HTML antigua mente era solo para crear documentos electrónicos
1.2 Breve historia de HTML
El "hipertexto" permitía que los usuarios accedieran a la información relacionada con los documentos electrónicos que estaban visualizando.

Tras finalizar el desarrollo de su sistema de "hipertexto", Tim Berners-Lee lo presentó a una convocatoria organizada para desarrollar un sistema de "hipertexto" para Internet.

Después de unir sus fuerzas con el ingeniero de sistemas Robert Cailliau, presentaron la propuesta ganadora llamada WorldWide- Web (W3).
El primer documento formal con la descripción de HTML se publicó en 1991 bajo el nombre HTML Tags
(http://www.w3.org/History/19921103-hypertext/hypertext/WWW/MarkUp/Tags.html)
(Etiquetas HTML) y todavía hoy puede ser consultado online a modo de reliquia informática.
En 1995, el organismo IETF organiza un grupo de trabajo de HTML y consigue publicar, el 22 de sep- tiembre de ese mismo año, el estándar HTML 2.0. A pesar de su nombre, HTML 2.0 es el primer están- dar oficial de HTML.


HTML 2.0
HTML 4.0 se publicó el 24 de Abril de 1998 (siendo una versión corregida de la publicación original del
18 de Diciembre de 1997) y supone un gran salto desde las versiones anteriores.

Entre sus novedades se encuentran las hojas de estilos CSS, la posibilidad de incluir pequeños programas o scripts en las páginas web, mejora de la accesibilidad de las páginas diseñadas, tablas complejas y mejoras en los formularios.

HTML 4.0
A partir de 1996, los estándares de HTML los publica otro organismo de estandarización llamado W3C .

La versión HTML 3.2 se publicó el 14 de Enero de 1997 y es la primera recomendación de HTML publicada por el W3C. Esta revisión incorpora los últi- mos avances de las páginas web desarrolladas hasta 1996, como applets de Java y texto que fluye alrededor de las imágenes.


HTML 3.2
La actividad actual del WHATWG se centra en el futuro estándar HTML 5, cuyo primer borrador oficial (http://www.w3.org/TR/html5/) se publicó el 22 de enero de 2008.

Debido a la fuerza de las empresas que forman el grupo WHATWG y a la publicación de los borradores de HTML 5.0, en marzo de 2007 el W3C decidió retomar la actividad estandarizadora de HTML
(http://www.w3.org/2007/03/html- pressrelease) .
HTML 5.0
.-Especificación oficial
1.3. Especificación oficial
El organismo W3C elabora las normas que deben seguir los diseñadores de páginas web para crear las páginas HTML.

Las normas oficiales están escritas en inglés y se pueden consultar de forma gratuita en las siguientes direcciones:




El estándar XHTML 1.0 incluye el 95% del estándar HTML 4.01, ya que sólo añade pequeñas mejoras y modificaciones menores.

Las normas oficiales están escritas con un lenguaje bastante formal y algunas secciones son difíciles de comprender.



1.4. HTML y XHTML
El lenguaje XHTML es muy similar al lenguaje HTML.

De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML

(que a su vez, también es descendiente de SGML).

Las discusiones sobre si HTML es mejor que XHTML o viceversa son recurrentes en el ámbito de la creación de contenidos web, aunque no existe una conclusión ampliamente aceptada.

Actualmente, entre HTML 4.01 y XHTML 1.0, la mayoría de diseñadores escogen XHTML. En un futuro cercano, si los diseñadores deben elegir entre HTML 5 y XHTML 1.1 o XHTML 2.0, quizás la elección sea diferente.

1.5. HTML y CSS
Con el desarrollo del estándar HTML, las páginas empezaron a incluir también información sobre el aspecto de sus contenidos:
-tipos de letra, colores y márgenes.

La posterior aparición de tecnologías como JavaScript, provocaron que las páginas HTML también incluyeran el código de las aplicaciones (llamadas scripts) creacion de las páginas web dinámicas.

Incluir en una misma página HTML los contenidos, el diseño y la programación complica en exceso su mantenimiento.

-CSS es el mecanismo que permite separar los contenidos definidos mediante XHTML y el aspecto que deben presentar esos contenidos:


Una ventaja:
-separación de los contenidos y su presentación es que los documentos XHTML creados son más flexibles

Se adapta mejor a las:
- pantallas de ordenador,
-pantallas de dispositivos móviles, impresoras y dispositivos utilizados por personas discapacitadas.

De esta forma, utilizando exclusivamente XHTML se crean páginas web "feas" pero correctas.

Aplicando CSS, se pueden crear páginas "bonitas" a partir de las páginas XHTML correctas.

Características básicas
2.1. Lenguajes de etiquetas

Especificación oficial de HTML 4.01 (http://www.w3.org/TR/html401/)


Especificación oficial de XHTML 1.0 (http://www.w3.org/TR/xhtml1/)
Reto: cómo almacenar la información en los archivos digitales.

Como los primeros archivos sólo contenían texto sin formato, la solución utilizada era muy sencilla:

- se codificaban las letras del alfabeto y se transformaban en números.
Para almacenar un contenido de texto en un archivo electrónico, se utiliza una tabla de conversión que transforma cada carácter en un número.

Una vez almacenada la secuencia de números, el contenido del archivo se puede recuperar realizando el proceso inverso.
Codificación de caracteres : Proceso de transformació de caracteres.

Páginas de código: Son las tablas que realiza la transformación .

La primera codificacion ASCII

Solucion para guarda la información con formato es:

-el archivo electrónico almacena tanto los contenidos como la información sobre el formato de esos contenidos.

Ej:
<parrafo>
Contenido de texto con <importante>algunas palabras</importante> resaltadas de forma especial.
</parrafo>

El principio de un párrafo se indica mediante la palabra <parrafo> y el final de un párrafo se indica mediante la palabra </parrafo>.

De la misma manera, para asignar más importancia a ciertas palabras del texto, se encierran entre <importante> y </importante>.

Se denomina etiquetas cuando indicamos el inicio y el final.


Exepciones en la etiquetas:


Etiqueta de apertura:
carácter <, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >


Etiqueta de cierre:
carácter <, seguido del carácter /, seguido del nombre de la etiqueta (sin espacios en blanco) y terminado con el carácter >

Así, la estructura típica de las etiquetas HTML es:

<nombre_etiqueta> ... </nombre_etiqueta>

HTML/Etiquetas = Lenguaje de marcas

Diferente lenguajes de HTML: XML, SGML, DocBook y MathML.

Ventaja:
que es fácil de leer y de escribir

Desventaja:
puede augmentar un monton el tamaño del documento (Se utiliza etiquetas cortas.




2.2. El primer documento HTML

Las páginas HTML se dividen en dos partes: la cabecera y el cuerpo.

-La cabecera incluye información sobre la propia página, como por ejemplo su título y su idioma.

- El cuerpo de la página incluye todos sus contenidos, como párrafos de texto e imágenes.
-El cuerpo (llamado body en inglés) contiene todo lo que el usuario ve en su pantalla

-La cabecera (llamada head en inglés) contiene todo lo que no se ve (con la única excepción del título de la página, que los navegadores muestran como título de sus ventanas).
Ej :
<html>
<head>
<title>El primer documento HTML</title>
</head>
<body>
<p>El lenguaje HTML es <strong>tan sencillo</strong> que prácticamente se entiende sin estudiar el significado
de sus etiquetas principales.</p>
</body>
</html>

Las tres etiquetas principales de un documento HTML (<html>, <head>, <body>):


<html>:
indica el comienzo y el final de un documento HTML. En el interior de la etiqueta <html> se definen la cabecera y el cuerpo del documento HTML y todo lo que se coloque fuera de la etiqueta <html> se ignora.


<head>:
delimita la parte de la cabecera del documento. La cabecera contiene información sobre el propio documento HTML, como por ejemplo su título y el idioma de la página.


<body>:
delimita el cuerpo del documento HTML. El cuerpo encierra todos los contenidos que se muestran al usuario (párrafos de texto, imágenes, tablas). En general, el <body> de un documento contiene cientos de etiquetas HTML, mientras que el <head> no contiene más que unas pocas.





2.3. Etiquetas y atributos

El html tiene 91 etiquetas definidas las cuales son estas:

a, abbr, acronym, address, applet, area, b, base, basefont, bdo, big, blockquote, body, br, button, caption, center, cite, code, col, colgroup, dd, del, dfn, dir, div, dl, dt, em, fieldset, font, form, frame, frameset, h1, h2, h3, h4, h5, h6, head, hr, html, i, iframe, img, input, ins, isindex, kbd, label, legend, li, link, map, menu, meta, noframes, noscript, object, ol, optgroup, option, p, param, pre, q, s, samp, script, select, small, span, strike, strong, style, sub, sup, table, tbody, td, textarea, tfoot, th, thead, title, tr, tt, u, ul, var


De todas las menciona las que ya están obsoletas son:
applet, basefont, center, dir, font, isindex, menu, s, strike, u.
Aunque hayan muchas etiquetas no es suficiente para poder crear pàginas completas, ya que muchas cosas como imagenes necessitan información adicional

La etiqueta <a> es para incluir los enlances aunque no es suficiente y se utiliza los atributos.
Ej: <html>
<head>
<title>Ejemplo de atributos en las etiquetas</title>
</head>
<body>
<p>
Los enlaces son muy fáciles de indicar:
<a>Soy un enlace incompleto, porque no tengo dirección de destino</a>.
<a href="http://www.google.com">Este otro enlace apunta a la página de Google</a>.
</p>
</body>

</html>

No todos los atributos se pueden utilizar en todas las etiquetas. Por ello, cada etiqueta define su pro- pia lista de atributos disponibles. Además, cada atributo también indica el tipo de valor que se le pue- de asignar. Si el valor de un atributo no es válido, el navegador ignora ese atributo.
Los atributos comunes se dividen en cuatro grupos según su funcionalidad:
• Atributos básicos:
se pueden utilizar prácticamente en todas las etiquetas HTML.

• Atributos para internacionalización:
los utilizan las páginas que muestran sus contenidos en varios idiomas.

• Atributos de eventos:
sólo se utilizan en las páginas web dinámicas creadas con JavaScript.

• Atributos de foco:
relacionados principalmente con la accesibilidad de los sitios web.

2.3.4. Atributos de foco
Diferentes Atributos:
Cuando el usuario selecciona un elemento de aplicación
"el elemento tiene el foco del programa"
, cuando seleccionas otra cosa ese elemento se deja de focar.
2.3.2. Atributos para internacionalización
Util para las web's que tienen varios idiomas:
2.3.3. Atributos de eventos
Para los que utilizan codigo JAVASRIPT:
2.3.1. Atributos básicos
Se puede aplicar a todas la Etiquetas HTML:
Diferentes Atributos:
2.4. Elementos HTML
Elementos es para referirse a partes, aunque el elemento es mas que un etiqueta formado por:

• Una etiqueta de apertura.

• Cero o más atributos.

• Texto encerrado por la etiqueta.

• Una etiqueta de cierre.

Ej: Etiqueta <p>
El lenguaje HTML clasifica a todos los elementos en dos grupos:

En línea (inline elements en inglés) y elementos de bloque (block elements en inglés)
Diferencia entre los dos elementos es la forma en la que ocupan el espacio disponible en la página.

Los elementos de bloque siempre empiezan en una nueva línea y ocupan todo el espacio disponible hasta el final de la línea, aunque sus contenidos no lleguen hasta el final de la línea.

Por su parte, los elementos en línea sólo ocupan el espacio necesario para mostrar sus contenidos.
Hay diferentes elementos:

Los elementos en línea definidos por HTML son:
a, abbr, acronym, b, basefont, bdo, big, br, cite, code, dfn, em, font, i, img, input, kbd, label, q, s, samp, select, small, span, strike, strong, sub, sup, textarea, tt, u, var.

Los elementos de bloque definidos por HTML son:
address, blockquote, center, dir, div, dl, fieldset,
form, h1, h2, h3, h4, h5, h6, hr, isindex, menu, noframes, nos-cript, ol, p, pre, table, ul
.

Los siguientes elementos también se considera que son de bloque:
dd, dt, frame-set, li, tbody, td,
tfoot, th, thead, tr.

Los siguientes elementos pueden ser en línea y de bloque según las circunstancias:
button, del,
iframe, ins, map, object, script.


2.5. Sintaxis de las etiquetas XHTML
Restricciones Básicas hay 5:

1) Las etiquetas se tienen que cerrar de acuerdo a como se abren: Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a>un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<p>Este es un párrafo con <a>un enlace</p></a>

2) Los nombres de las etiquetas y atributos siempre se escriben en minúsculas:
Ejemplo correcto en XHTML:

<p>Este es un párrafo con <a href="http://www.google.com">unenlace</a></p>


Ejemplo incorrecto en XHTML (pero correcto en HTML):

<P>Este es un párrafo con <A HREF="http://www.google.com">un enlace</A></P>
3) El valor de los atributos siempre se encierra con comillas: Ejemplo correcto en XHTML:
<p>Este es un párrafo con <a href="http://www.google.com">un enlace</a></p>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<p>Este es un párrafo con <a href=http://www.google.com>un enlace</a></p>

4) Los atributos no se pueden comprimir: Ejemplo correcto en XHTML:
<dl compact="compact">...</dl>

Ejemplo incorrecto en XHTML (pero correcto en HTML):

<dl compact>...</dl>

Este tipo de atributos en los que el nombre coincide con su valor no son muy habituales.
5) Todas las etiquetas deben cerrarse siempre:

Etiquetas especiales llamadas "etiquetas vacías" no necesitan en- cerrar ningún texto.

La etiqueta
<br>
por ejemplo, se utiliza para indicar el comienzo de una nueva línea, tal y como se verá más adelante.
Por sus características, la etiqueta
<br>
nunca encierra ningún contenido de texto.



En lugar de abrir y cerrar de forma consecutiva la etiqueta
(<br></br>)
se puede utilizar la sintaxis

<br/>
para indicar que es una etiqueta vacía que se abre y se cierra en ese mismo punto. En la forma compacta es habitual equivocarse con la posición del carácter /.

Ejemplo correcto en XHTML:
<br/>
Ejemplo incorrecto en XHTML (pero correcto en HTML):

<br>


Full transcript