Tema 02 - Introducción A HTML5
Tema 02 - Introducción A HTML5
Lenguajes de Marcas y
Sistemas de Gestión de la Información
Administración de Sistemas Informáticos en Red
IES Los Manantiales
1
1.- HTML 5
2
2.- Etiquetas HTML
De forma incorrecta:
4
4.- Estructura general de un documento HTML 5.
5
5.- DOCTYPE HTML 5
6
5.- DOCTYPE HTML 5
7
6.- Etiqueta <html>
9
7.- Cabecera <head>
10
7.- Cuerpo <body>
12
8.- Organización de los elementos
La siguiente imagen
muestra un diseño
común en la mayoría
de los sitios web
actuales.
Coincidiendo con este
tipo de diseño, HTML5
nos ofrece elementos
contenedores para
plasmar este tipo de
diseños.
13
8.- Organización de los elementos
La siguiente imagen
muestra un diseño
común en la mayoría
de los sitios web
actuales.
Coincidiendo con este
tipo de diseño, HTML5
nos ofrece elementos
contenedores para
plasmar este tipo de
diseños.
14
8.- Organización de los elementos
<header>
Utilizada como cabecera de la página. Normalmente, esta
sección incluirá el logo, título de la página u otra información
de importancia que se puede repetir a lo largo de todo el sitio
web.
No debe confundirse con el <head>.
<nav>
Esta nueva sección alberga la barra de navegación y ofrece las
opciones a las que podemos navegar desde nuestra página.
15
8.- Organización de los elementos
<section>
Contiene la información más relevante de nuestro sitio, por lo
que es la que se encuentra en el centro y ocupa más espacio.
Al ser una zona grande, suele albergar varias secciones
<article>, a modo de artículos dentro de la página de un
periódico.
<aside>
Sirve para definir una barra lateral en la que podremos
colocar otros elementos importantes, como por ejemplo los
últimos post de un blog, publicidad, etc.
16
8.- Organización de los elementos
<footer>
Para terminar, nos encontramos con el pie, en el que solemos
incluir información de interés de la empresa, contacto,
webmaster, estándares incluidos, etc.
Suele ser muy parecido, si no igual, en todas las páginas que
forman parte del sitio web.
Marca claramente el final de nuestro documento.
17
8.- Organización de los elementos
18
8.- Organización de los elementos
19
9.- Validar nuestra Web
20
Ejercicio 02. Metadatos
Crea una página web con una cabecera que tenga como título
Lenguajes de Marcas.
Debe redirigir al usuario hacia la Web de la Universidad de Málaga a
los ocho segundos.
Añade las etiquetas necesarias en la cabecera para incluir la
información sobre el autor y la información para los motores de
búsqueda.
En el cuerpo puedes colocar el texto que te parezca.
21
10.- Párrafos <p>
22
10.- Párrafos <p>
23
11.- Lorem Ipsum
24
12.- Encabezados
25
Ejercicio 03. Encabezados y Párrafos.
26
13.- Marcado básico del texto. <em> y <strong>
Utilizadas para dar énfasis a ciertas palabras del texto, definiendo así
su importancia.
27
14.- Saltos de línea <br>
28
15.- Espacios en blanco
29
16.- Texto preformateado <pre>
30
17.- Codificación de caracteres.
31
17.- Codificación de caracteres.
32
18.- Comentarios
33
19.- Listas
<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento n</li>
</ol>
35
19.- Listas. Ordenadas
36
19.- Listas. No Ordenadas
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento n</li>
</ul>
37
19.- Listas. No Ordenadas
38
19.- Listas de definición
<dl>
<dt>Término 1</dt>
<dd>Definición para el términio 1</dd>
<dt>Término 2</dt>
<dd>Definición para el términio 2</dd>
<dt>Término n</dt>
<dd>Definición para el términio n</dd>
</dl>
39
Ejercicio 04. Listas
41
20.- Enlaces
42
21.- URL
44
22.- URL. Otro ejemplo más completo
45
22.- URL. Caracteres problemáticos
46
22.- URL. Caracteres problemáticos
47
22.- URL. Caracteres problemáticos
48
23.- Definición de Enlaces.
49
23.- Definición de Enlaces.
50
24.- Tipos de Enlaces
51
24.- Tipos de Enlaces. Relativos.
52
24.- Tipos de Enlaces. Relativos.
53
24.- Tipos de Enlaces. Relativos.
54
24.- Tipos de Enlaces. Relativos.
55
24.- Tipos de Enlaces. Relativos.
56
24.- Tipos de Enlaces. Relativos.
57
24.- Tipos de Enlaces. Relativos.
58
25.- Ejemplo enlaces relativos
raíz
index.html
productos
productos.html
hardware software
hard.html soft.html
59
25.- Ejemplo enlaces relativos
60
25.- Ejemplo enlaces relativos
61
26.- Destino del enlace
62
27.- Título del enlace
63
28.- Ejercicio. Hipervínculos
64
29.- Anclas
Las anclas sirven para realizar enlaces a una zona determinada del
documento. Así, podemos crear un índice con hipervínculos al
inicio del documento que nos sirva para movernos a las distintas
secciones del mismo.
65
29.- Anclas
66
30.- Ejercicio Anclas
67
31.- Imágenes.
Tras el texto, las imágenes son los elementos más usados en las
páginas Web.
Cuando insertemos imágenes en nuestra Web, debemos tener en
cuenta el tamaño y formato de la misma.
El tamaño de la imagen viene dado por el número de píxeles que la
componen así como por la profundidad de color de la misma.
Debemos distinguir entre imágenes de contenido e imágenes de
adorno. Las primeras se insertan directamente en el código HTML,
mientras que las de adorno se introducen mediante hojas de estilo.
68
32.- Tamaño de las imágenes.
El tamaño de las imágenes que componen nuestra web debe ser tenido
muy en cuenta si no queremos tener tiempos de carga excesivos. Para
calcular el tamaño de una imagen usaremos la fórmula:
http://www.hugorodriguez.com/cursos/curso-idigital_02.htm
70
32.- Tamaño de las imágenes (pixels)
71
33.- Formatos de Imágenes.
• GIF (Graphics Image File Format).
256 colores (8 bits)
Permite transparencia
Compresión sin mucha pérdida
• JPEG (Joint Photographic Experts Group).
16 millones de colores (24 bits)
Sin transparencia
Compresión mediante eliminación de info. Imperceptible
• PNG (Portable Network Graphics).
Hasta 48 bits de color (Truecolor)
Permite transparencia
Poca pérdida con mucha calidad
72
34.- Insertar Imágenes.
73
34.- Insertar Imágenes.
Ver ejemplos
74
35.- Hipervínculos en Imágenes.
Ver ejemplo
75
36.- Ejercicio. Imágenes y Vínculos
- Diferentes formatos:
- avi, mp4, ogg.
- video de Youtube
- Plug-ins instalados
- mozilla about:plugins
- iexplorer Herramientas – Administrar complementos
- chrome about:plugins
77
38.- Video
78
39.- Video de Youtube
79
40.- Audio
80
41.- Insertar Documento PDF
81
42.- Ejercicio. Vídeos y PDF.
82
43.- Tablas
83
44.- Tablas
84
45.- Ejercicio. Tabla de pedidos (pedidos.html)
85
86
87
88
89
46.- Ejercicio. horario.html
90