3html5 Basics

Diseño Web
— HTML5 básico —
Dr. César García Osorio

cgosorio@ubu.es
Universidad de Burgos
Contenidos
1 Introducción
2 Conceptos fundamentales
3 Un documento sencillo
4 Imágenes e hiperenlaces
5 Audio y vídeo
6 Formularios
7 Recursos en línea
El material de esta presentación procede principalmente del curso «HTML5 Basics»
de la lista de reproducción de youtube:
http://www.youtube.com/playlist?list=PLzmyR17f55-J7oZew4QxQ7cfw7d3__ZZs.
cgosorio@ubu.es Diseño Web . HTML5 básico 2/30

Introducción
cgosorio@ubu.es Diseño Web . HTML5 básico . Introducción 3/30

Introducción
q HTML es un lenguaje de marcado para escribir páginas web.

q HTML5 es la quinta versión del lenguaje.
q Versiones anteriores: HTML4.1 y XHTML1.
q Para dar soporte a elementos multimedia, HTML5 tiene nuevas
etiquetas para audio y vídeo.
Part 1 of 4 — Getting Started

cgosorio@ubu.es Diseño Web . HTML5 básico . Introducción 4/30
Conceptos fundamentales
cgosorio@ubu.es Diseño Web . HTML5 básico . Conceptos fundamentales 5/30

Conceptos fundamentales
Etiquetas El marcado utilizado para delimitar elementos.
Elementos Los componentes de una página web, los elementos
tienen una etiqueta de apertura y una etiqueta de
cierre (<etiqueta>contenido</etiqueta>), por ejemplo
<title>Este es el título de un documento</title>. Algunos
elementos sólo tienen la etiqueta de apertura, por
ejemplo <br>, que se utiliza para «romper» una línea
(line break).
Attributos Añaden información adicional a los elementos. Si
están presentes, aparecen en la etiqueta de apertura
justo despúes del nombre de la etiqueta. El valor del
atributo está delimitado por comillas, por ejemplo <h1
id="ref">Sección de referencias</h1> (en HTML5 hay
variantes en las que el atributo no tiene ningún valor).

Marcado semántico
q El marcado HTML es semántico y estructural, no para indicar
aspectos de presentación.
q Es muy importante elegir las etiquetas de acuerdo a la
semántica de los elementos a los que etiqueta de forma que
describan lo más precisamente posible el significado del
contenido que etiquetan.
q Un documento marcado semánticamente:
5 asegura la disponibilidad y accesibilidad del documento.
5 permite el correcto procesado automático de un documento
infiriendo la importancia relativa de los elementos (esto es bueno
para SEO).
El marcado se puede elegir atendiendo a que tiene más sentido

para el contenido, además da estructura al documento que es la
base de las hojas de stilo (stylesheets) y de comportamiento
dinámico (JavaScript).
Ejemplos de distintos anidamientos de
elementos
+---------------------------------------------+ +---------------------------------------------+ +---------------------------------------------+
| <header>
<header> | | <header>
<header> | | <header> … </header>
<header> ... </header> |
| +---------------------------------+ | | +---------------------------------+ | +---------------------------------------------+
| | <nav>
<nav> …
...</nav>
</nav> | | | | <nav> … </nav>
<nav> ... </nav> | | <nav> … </nav>
+---------------------------------------------+
| +---------------------------------+ | | +---------------------------------+ | | <nav> ... </nav> |
| </header>
</header> | | </header>
</header> | <article>
+---------------------------------------------+
+---------------------------------------------+ +---------------------------------------------+ +---------------------------------------------+
| <section>
<section> | | <section>
<section> | | <header> … </header>
<article> |
| | | | | +---------------------------------------+ |
| +---------------------------------------+ | | +---------------------------------------+ | | | <header> ... </header> | |
| | | | | | | | | +---------------------------------------+ |
| | <article> … </article>
<article> ... </article> | | | | <article> … </article>
<article> ... </article> | | <section> … </section>
| +---------------------------------------+ |
| | | | | | | | | | | |
| +---------------------------------------+ | | +---------------------------------------+ | | | <section> ... </section> | |
| | | | | | | |
| +---------------------------------------+ | | +---------------------------------------+ | <section>
| +---------------------------------------+ |
| | | | | | <article> | | | +---------------------------------------+ |
<article> … </article> <article>
| | <article> ... </article> | | | | +------------------------------+ | | | | <article> | |
| | | | | | | <section> ... </section> | | | | | <section> ... </section> | |
| +---------------------------------------+ | | | <section> … </section>
+------------------------------+ | | | | | |
| | | | | | <section> … </section>
| +---------------------------------------+ |
| </section>
</section> | | | +------------------------------+
<section> … </section> | | | | | |
+---------------------------------------------+ | | | <section> ... </section> | | | | | </article>
+------------------------------+ | |
| <footer>
<footer> | | | +------------------------------+ | | | | | <section> ... </section> | | |
| +---------------------------------+ | | | </article> | | | | </section>
+------------------------------+ | |
| | <nav>
<nav> …
...</nav>
</nav> | | | | </article> | | | | | |
| +---------------------------------+ | | +---------------------------------------+ | | | </article> | |
| </footer>
</footer> | | | <footer> … </footer>
| +---------------------------------------+ |
+---------------------------------------------+ | </section>
</section> | | +---------------------------------------+ |
+---------------------------------------------+ | | <footer> ... </footer> | |
| <footer>
<footer> | </article>
| +---------------------------------------+ |
| +---------------------------------+ | | |
| | <nav> ...
<nav> </nav>
… </nav> | | | <footer> … </footer>
</article> |
| +---------------------------------+ | +---------------------------------------------+
| </footer> | +---------------------------------------------+
</footer>
+---------------------------------------------+ | <footer> ... </footer> |
+---------------------------------------------+

Modelos de contenido I
q Bloques (block elements ), aquellos que comienzan una
nueva línea
5 Están en cajas rectangulares que se «apilan» en la página.
5 Por defecto, se añade espacio en la parte inferior y superior.
5 Inicialmente, los encabezados y párrafos pertenecen a esta
categoría.
5 Pueden contener elementos en línea y otros bloques.
5 Se corresponden con la categoría flow content de HTML5.
q Elementos en línea (Inline elements ), aquellos que no
comienzan una nueva línea.
5 Generalmente, sólo contienen texto u otros elementos en línea.
5 Se corresponden con la categoría phrasing content de HTML5.
Categorías HTML5
Metadata content , flow content , sectioning content , heading
content , phrasing content , embedded content , interactive
content , form-associated content .
Modelos de contenido II

Un documento sencillo
cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 12/30

Un documento sencillo Estructura general
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Documento de ejemplo</title>
6 </head>
7 <body><p>Algo de texto.</p></body>
8 </html>
q Un documento HTML5 comienza con la declaración de tipo de

documento.
q Después del DOCTYPE estará el elemento html: con su
etiqueta de apertura, su etiqueta de cierre, y su contenido.
q El elemento html tiene el atributo lang para declarar el idioma.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

documento.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

documento.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

documento.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

documento.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

documento.

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

documento.

Algunas declaración de tipo de documento previas a HTML5 son:
q Si no se usa marcado de presentación (ésta se hace con CSS).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
q Para usar algunos elementos y atributos antiguos en desuso.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
q Para poder utilizar marcado de marcos.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
q Con XHMTL1.1 hay una única DTD

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>
q El elemento html tiene dos partes: la cabeza (head) (que contiene

información sobre el documento), y el cuerpo (body) (que contiene el
contenido principal del documento).
q El elemento meta tiene sólo la etiqueta de apertura, se puede usar
para especificar varios tipos de información. En el ejemplo, la
codificación de carácteres.
q El elemento title se usa para especificar el título del documento (que
se mostrará en la pestaña del navegador).
q El elemento p se usa para representar un párrafo.
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
6 </head>
8 </html>

Un documento sencillo Formato de texto
1 <!DOCTYPE html>
2 <html lang="en">
3 <head><meta charset="UTF-8">
4 <title>Example document</title></head>
5 <body>
6 <h1>Examples</h1>
7 <h2>First Paragraph</h2>
8 <p>This is some sample text <br> inside of
9 the p element.</p>
10
11 <h3>Second Paragraph</h3>
12 <p style="text-align:center; color:red">
13 This is some sample text
14 inside of the p element.</p>
15 </body>
16 </html>
Part 2 of 4 — Text
1 <!DOCTYPE html>
2 <html lang="en">
5 <body>
6 <h1>Examples</h1>
10
15 </body>
16 </html>
1 <!DOCTYPE html>
2 <html lang="en">
5 <body>
6 <h1>Examples</h1>
10
15 </body>
16 </html>
1 <!DOCTYPE html>
2 <html lang="en">
5 <body>
6 <h1>Examples</h1>
10
15 </body>
16 </html>
1 <!DOCTYPE html>
2 <html lang="en">
5 <body>
6 <h1>Examples</h1>
10
15 </body>
16 </html>
1 <!DOCTYPE html>
2 <html lang="en">
5 <body>
6 <h1>Examples</h1>
10
15 </body>
16 </html>
Un documento sencillo Como se formatea el texto
q Los espacios se ignoran.

q Los saltos de línea se ignoran.
q Para forzar un salto de línea se usa el elemento br (line break).
q El elemento br no tiene etiqueta de cierre (en XHTML <br />).
q Los elementos de encabezado van del h1 al h6.
q El atributo style se puede usar para especificar el aspecto visual
de los elementos html (aunque esta no es la forma más habitual
de aplicar los estilos CSS).

Un documento sencillo Como se formatea el texto
q Los espacios se ignoran.

q Los saltos de línea se ignoran.
q Para forzar un salto de línea se usa el elemento br (line break).
q El elemento br no tiene etiqueta de cierre (en XHTML <br />).
q Los elementos de encabezado van del h1 al h6.
q El atributo style se puede usar para especificar el aspecto visual
de los elementos html (aunque esta no es la forma más habitual
de aplicar los estilos CSS).

Imágenes e hiperenlaces
cgosorio@ubu.es Diseño Web . HTML5 básico . Imágenes e hiperenlaces 18/30

1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
5 <title>Example document</title>
6 </head>
7 <body>
8 <h1>This is an image</h1>
9 <img src="ball.png" alt="red ball"
10 height="168" width="100">
11 <p>Go to <a href="www.ubu.es">ubu</a> </p>
12 </body>
13 </html>
Part 3 of 4 — Images and Hyperlinks

q El elemento img se usa para incluir imágenes.
5 No tiene etiqueta de cierre.
5 El atributo src se usa para especificar el URL de la imagen (su
ubicación en internet).
5 El URL puede ser una dirección relativa o absoluta.
5 El atributo alt se usa para especificar texto alternativo, que es útil
para lectores de pantalla (para invidentes).
5 Los atributos height y width se usan para especificar el tamaño de
la imagen (por defecto, en píxeles). Aunque son opcionales, es una
buenta práctica usarlos, de este modo el navegador puede reservar
el espacio para la imagen mientras renderiza el resto del contenido
dando la impresión de una carga de página más rápida.
q El elemento a se usa para los hiperenlaces (anchor elements).
5 El atributo href especifica el URL de la página enlazada.
5 El contenido del elemento se muestra subrayado para indicar que
es un enlace (visualización por defecto).
5 El contenido de un elemento a puede ser una imagen.
Audio y vídeo
cgosorio@ubu.es Diseño Web . HTML5 básico . Audio y vídeo 21/30

Audio y vídeo
q Como los elementos de audio y vídeo son nuevos en html5, los

navegadores más antiguos no los soportan.
q Sí que están soportados por las últimas versiones de los
principales navegadores: Chrome, Firefox, Safary, Opera y IE.
q Hay dos formas de especificar el URL del archivo de audio:
¶ Usar el atributo src
1 <audio src="bell_audio.mp3" controls>

2 Tu navegador no soporta el elemento audio.
3 </audio>
Part 4 of 4 — Audio and Video

Audio y vídeo
· Usar el elemento source (dado que hay navegadores que no

soportan todos los formatos de audio).
1 <audio controls>
2 <source src="bell_audio.mp3"
3 type="audio/mpeg">
4 <source src="bell_audio.ogg"
5 type="audio/ogg">
7 </audio>
Con este método, si el navegador no soporta el formato del primer

archivo de audio, pueden intentar utilizar los otros. (OGG es
soportado por: Chrome, Firefox y Opera; MP3 es soportado por: IE,
Chrome y Safari) ← Check this!

Audio y vídeo
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8"></meta>
6 </head>
7 <body>
8 <audio controls>
9 <source src="bell_audio.mp3"
10 type="audio/mpeg">
11 <source src="bell_audio.ogg"
12 type="audio/ogg">
14 </audio>
15 </body>
16 </html>

Audio y vídeo
q Si aparece el atributo controls se muestran los botones de

control.
q El atributo controls es un atributo sin valor.
q Otros atributos que se pueden usar son:
5 autoplay para que el audio comience a reproducirse
automáticamente.
5 loop para que el audio se repita en bucle.
q La inclusión de vídeo se hace con el elemento video, con
atributos similares a los del elemento audio.

Formularios
cgosorio@ubu.es Diseño Web . HTML5 básico . Formularios 26/30

Formularios
q Permiten el envío de datos (por nombre) para ser procesados

q El elemento form contiene los elementos estructurales del
formulario (los campos del formulario).
5 El atributo action indica donde enviar los datos.
5 El atributo method especifica como enviar los datos:
É Como variables en una URL (con method="get") o como una
transacción post HTTP (con method="post").
q input se usa para los diferentes tipos de campos de entrada.
5 text, password (no muestra lo que se teclea), checkbox, radio, submit
(muestra un botón para hacer el envío de datos), . . .
q El elemento textarea define un campo de entrada multi-línea.
q El elemento select se usa para crear una lista desplegable.
q El elemento option define una opción de una lista de selección.

Formularios
1 <!DOCTYPE html>
2 <html lang="es">
3 <head>
4 <title>Ejemplo de formulario</title>
5 <meta charset="UTF-8"></meta>
6 </head>
7 <body>
8 <form action="contactus.php"
9 method="post">
10 <p>Nombre:</p>
11 <p><input type="text" name="name"
12 value="tu nombre"></p>
13 <p>Comentarios: </p>
14 <p><textarea name="comments"
15 rows="5" cols="20">
16 Comentarios
17 </textarea>
18 </p>
19 <p>Selección:</p>
20 <p><input type="radio" name="opinion"
21 value="pos">
22 Positivo
23 </p>
24 <p><input type="radio" name="opinion"
25 value="neg">
26 Negativo
27 </p>
28 <p><input type="submit"></p>
29 </form>
30 </body></html>

Recursos en línea
cgosorio@ubu.es Diseño Web . HTML5 básico . Recursos en línea 29/30

Recursos en línea
q http://www.whatwg.org/ (sitio web del WHATWG).

q http://www.w3.org/ (sitio web del W3C).
q http://www.w3.org/TR/html5/ (el estándar W3C para el
HTML5).
q http://developers.whatwg.org/ (el estándar WHATWG para el
HTML5).
q http://diveintohtml5.info/ (libro en línea de Mark Pilgrim).
cgosorio@ubu.es Diseño Web . HTML5 básico . Recursos en línea 30/30

3html5 Basics

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

3html5 Basics

Cargado por

Copyright:

Formatos disponibles

Diseño Web

Dr. César García Osorio

cgosorio@ubu.es Diseño Web . HTML5 básico 2/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Introducción 3/30

q HTML es un lenguaje de marcado para escribir páginas web.

Part 1 of 4 — Getting Started

cgosorio@ubu.es Diseño Web . HTML5 básico . Conceptos fundamentales 5/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Conceptos fundamentales 6/30

El marcado se puede elegir atendiendo a que tiene más sentido

cgosorio@ubu.es Diseño Web . HTML5 básico . Conceptos fundamentales 9/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Conceptos fundamentales 11/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 12/30

q Un documento HTML5 comienza con la declaración de tipo de

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 13/30

q Un documento HTML5 comienza con la declaración de tipo de

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 13/30

q Un documento HTML5 comienza con la declaración de tipo de

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 13/30

q Un documento HTML5 comienza con la declaración de tipo de

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 13/30

q Un documento HTML5 comienza con la declaración de tipo de

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 13/30

q Un documento HTML5 comienza con la declaración de tipo de

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 13/30

q Un documento HTML5 comienza con la declaración de tipo de

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 13/30

q Para usar algunos elementos y atributos antiguos en desuso.

q Para poder utilizar marcado de marcos.

q Con XHMTL1.1 hay una única DTD

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 14/30

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q El elemento html tiene dos partes: la cabeza (head) (que contiene

q Los espacios se ignoran.

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 17/30

q Los espacios se ignoran.

cgosorio@ubu.es Diseño Web . HTML5 básico . Un documento sencillo 17/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Imágenes e hiperenlaces 18/30

Part 3 of 4 — Images and Hyperlinks

cgosorio@ubu.es Diseño Web . HTML5 básico . Audio y vídeo 21/30

q Como los elementos de audio y vídeo son nuevos en html5, los

1 <audio src="bell_audio.mp3" controls>

Part 4 of 4 — Audio and Video

· Usar el elemento source (dado que hay navegadores que no

Con este método, si el navegador no soporta el formato del primer

cgosorio@ubu.es Diseño Web . HTML5 básico . Audio y vídeo 23/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Audio y vídeo 24/30

q Si aparece el atributo controls se muestran los botones de

cgosorio@ubu.es Diseño Web . HTML5 básico . Audio y vídeo 25/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Formularios 26/30

q Permiten el envío de datos (por nombre) para ser procesados

cgosorio@ubu.es Diseño Web . HTML5 básico . Formularios 27/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Formularios 28/30

cgosorio@ubu.es Diseño Web . HTML5 básico . Recursos en línea 29/30

q http://www.whatwg.org/ (sitio web del WHATWG).

cgosorio@ubu.es Diseño Web . HTML5 básico . Recursos en línea 30/30

También podría gustarte