Scribd
Cargar
80 vistas90 páginas

Tema 02 - Introducción A HTML5

Este documento introduce HTML 5 y describe sus principales etiquetas y estructura. Explica que HTML 5 es la versión más utilizada actualmente y es ideal tanto para desarrollo web de escritorio como móvil. Luego describe las etiquetas básicas como <html>, <head>, <body>, y nuevos elementos de organización como <header>, <nav>, <section>, <article>, <aside> y <footer>. Finalmente, cubre otros elementos como <p>, <br>, <pre>, <ol>, <ul> y comentarios.

Cargado por

Fabio RM
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
80 vistas90 páginas

Tema 02 - Introducción A HTML5

Este documento introduce HTML 5 y describe sus principales etiquetas y estructura. Explica que HTML 5 es la versión más utilizada actualmente y es ideal tanto para desarrollo web de escritorio como móvil. Luego describe las etiquetas básicas como <html>, <head>, <body>, y nuevos elementos de organización como <header>, <nav>, <section>, <article>, <aside> y <footer>. Finalmente, cubre otros elementos como <p>, <br>, <pre>, <ol>, <ul> y comentarios.

Cargado por

Fabio RM
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 90

Tema 02: Introducción a HTML 5

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

Aunque HTML 5 no es aún un estándar W3C, es muy


utilizado, ofreciéndonos gran cantidad de recursos y mejoras
nuevas respecto a las versiones anteriores de HTML.
HTML 5 es la versión idónea, tanto para el desarrollo de
webs de escritorio como para dispositivos móviles.
Todas las compañías importantes involucradas en el
desarrollo de HTML se han decantado por potenciar HTML 5,
de ahí que nosotros lo usemos como lenguaje de base para
nuestra asignatura.

2
2.- Etiquetas HTML

A continuación podemos ver la estructura general de una


etiqueta HTML.

En ocasiones las etiquetas contienen atributos importantes,


que se colocan en la etiqueta de apertura, antes de cerrar
con >.
3
3.- Sintaxis de las etiquetas HTML

Las etiquetas HMTL y sus atributos se escriben en


minúsculas.
Apertura y cierre de etiquetas en el orden en el que
aparecen:

De forma incorrecta:

4
4.- Estructura general de un documento HTML 5.

5
5.- DOCTYPE HTML 5

El DOCTYPE sirve para indicarle al navegador qué tipo de


documento está abriendo, preparándolo para que las
etiquetas HTML 5 sean interpretadas correctamente.
El DOCTYPE debe colocarse en la primera línea del archivo
HTML.
La declaración del DOCTYPE no es sensible a mayúsculas,
por lo que la podemos escribir usando minúsculas o
mayúsculas.

6
5.- DOCTYPE HTML 5

En las versiones anteriores a HTML 5, la definición del


DOCTYPE era mucho más complicada y estaba basada en un
DTD (Definición de Tipo de Documento), que se encontraba
definido en un fichero externo.

7
6.- Etiqueta <html>

La etiqueta html es la que engloba al documento en sí. Todo


el contenido de nuestra página web debe encontrarse
incluido entre la etiqueta de apertura <html> y la de cierre
</html>.
El atributo lang que se incluye en la etiqueta html sirve para
especificar el idioma humano del contenido del documento
que estamos creando. Esto ayuda al navegador a mostrar la
web de acuerdo a los estilos y normas que se utilizan en
cada lengua.
Esto no implica que el navegador sepa representar los
caracteres típicos de un idioma.
8
7.- Cabecera <head>

Los documentos HTML incluyen más información de la que


los usuarios ven en sus pantallas. Estos datos adicionales
siempre están relacionados con la propia página, por lo que
se denominan metadatos.
Los metadatos siempre se incluyen en la sección cabecera,
es decir, dentro de la etiqueta <head>, mediante el uso de
etiquetas especiales.
Estas etiquetas (<meta>, <title>, etc.) son opcionales y sirven
para para darle al navegador y a los motores de búsqueda
información adicional sobre nuestra web.

9
7.- Cabecera <head>

10
7.- Cuerpo <body>

El cuerpo es la zona más importante del documento, ya que


en él se encuentran todos los elementos que serán visibles
en la página.
Los párrafos, enlaces, imágenes, formularios y demás
elementos se colocarán en el body, por lo que es la zona en
la que tenemos que poner más atención.
HTML5 ha añadido elementos nuevos que nos servirán para
organizar el contenido de la web. Aunque no son
obligatorios, estos nuevos elementos ayudan al navegador a
identificar lo que queremos conseguir comunicar con
nuestro trabajo.
11
8.- Organización de los elementos

En las primeras versiones de la web, no existían elementos


contenedores para disponer los diferentes elementos en la
página.
Posteriormente, aparecieron los frames y las tablas,
suponiendo una revolución para los diseñadores.
Antes de la llegada de HTML5, las tablas y frames quedaron
relegadas por los elementos <div>, que nos permitían
colocar dentro de ellos otros elementos a nuestro antojo.
Estos div se podían colocar a lo largo de la página con
relativa facilidad.

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.

El fichero se llamará ejercicio02.html.

21
10.- Párrafos <p>

22
10.- Párrafos <p>

23
11.- Lorem Ipsum

24
12.- Encabezados

Establecen tamaños diferentes a los títulos del


documento.

25
Ejercicio 03. Encabezados y Párrafos.

Crea una página web que contenga un título de gran tamaño.

Además, debemos incluir las definiciones de los términos Hardware,


Software, Sistema Operativo y Lenguaje de Programación,
compuestos de un encabezado de tamaño 2 y un párrafo con el texto
para cada uno.

Guarda el ejercicio con el nombre ejercicio03.html.

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 &nbsp;

29
16.- Texto preformateado <pre>

En ocasiones necesitamos especificar texto cuyo formato queremos


que aparezca tal y como lo hemos escrito en el código HTML.

30
17.- Codificación de caracteres.

31
17.- Codificación de caracteres.

32
18.- Comentarios

A menudo, cuando desarrollamos código HTML,


necesitamos incluir comentarios en el código que nos
ayuden a comprender el mismo o a especificar cualquier
detalle de la página.

Los comentarios sólo se ven en el código, por lo que no se


muestran al usuario en el navegador.

<!-- Esto es un comentario -->

33
19.- Listas

Las listas son elementos que nos permiten realizar


enumeraciones, ordenadas o no, de elementos relacionados
entre sí. Son muy utilizadas en cualquier programa de edición
de textos y para crear menús en Html.
En HTML existen tres tipos de listas:

• Ordenadas: realizamos enumeraciones de elementos


precedidos de un número, letra, etc.
• No ordenadas: relación de elementos precedidos por una
viñeta.
• De definición: en las que se relacionan un término con su
definición, a modo de diccionario.
34
19.- Listas. Ordenadas

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento n</li>
</ol>

Para cambiar el tipo de identificador usamos CSS.

35
19.- Listas. Ordenadas

36
19.- Listas. No Ordenadas

<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
...
<li>Elemento n</li>
</ul>

Para cambiar el tipo de viñeta usamos CSS.

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

Crea una página web que contendrá


dos listas.
La primera lista será no ordenada y
mostrará los nombres de las ocho
provincias andaluzas.
La segunda lista será ordenada y
mostrará los datos de tres marcas de
automóviles. Para cada marca
tendremos una sublista no ordenada
con tres modelos de dicha marca.

El fichero se llamará ejercicio04.html.


40
Ejercicio 04. Listas . Solución

41
20.- Enlaces

El enlace o hipervínculo es el elemento más importante


de una página web. De hecho, el lenguaje HTML toma su
nombre de esa característica (Lenguaje de Marcas de
Hipertexto).
Los hipervínculos permiten crear documentos interactivos
que proporcionan información adicional cuando se
solicita.
Los enlaces permiten crear relaciones con otras páginas
web pero también se pueden relacionar con imágenes,
documentos, archivos, etc.

42
21.- URL

Una URL (Uniform Resource Locator, Localizador de


Recursos Uniforme) hace referencia al localizador único de
un recurso en Internet.
Así, la URL es la ’matrícula’ de un página web, la identifica
por completo, por lo que la podemos diferenciar de las
demás.

Esta cadena de texto es la URL completa de la página de


Google. La distingue de las demás y nos permite crear
enlaces que tendrán como destino esa URL.
43
22.- Las partes de la 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

Dependiendo de la especificación de la ruta:


– Enlaces Absolutos: especificamos la ruta completa del elemento
a enlazar, incluido el protocolo y la dirección completa del
documento en el servidor.
– Enlaces Relativos: muestran una ruta relativa al documento
donde aparece el enlace. Se utilizan para enlazar documentos
pertenecientes al mismo sitio Web.

Dependiendo de la ubicación de la página de destino:


– Enlaces Externos: nos dirigen a una página fuera del sitio web.
– Enlaces Internos: apuntan a una página perteneciente al mismo
sitio web.

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

Por regla general, cuando pinchamos en un vínculo, el


navegador carga la página de destino, sustituyendo a la que
estaba cargada y dándole el control a la nueva.
Sin embargo, podemos controlar dónde se abre la página
gracias al atributo target de la etiqueta a.

62
27.- Título del enlace

Podemos especificar un título para un enlace que aparecerá al


pasar el ratón sobre el mismo:

63
28.- Ejercicio. Hipervínculos

• Realiza un sitio web que simule la estructura de una empresa en la


que existe una página de bienvenida (index.html) y otras tres para
departamentos (clientes, empleados y almacén).
• Cada departamento debe tener su propia página alojada en una
subcarpeta de la carpeta principal de la empresa.
• Desde cualquier página debemos poder acceder a la página de
cualquier departamento o a la principal.
• Recuerda las restricciones respecto a los nombres de archivo.
• En todo momento se usarán enlaces relativos para movernos a
través de la web de nuestra empresa.

Guarda el ejercicio en una carpeta con el nombre Enlaces.

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.

Para crear Anclas:

Para llamar al Ancla:

65
29.- Anclas

66
30.- Ejercicio Anclas

Crea una página web con un índice de cuatro elementos


al comienzo. Cada uno de los elementos de este índice
será un hipervínculo que nos permita avanzar a lo largo
de la web y llegar hasta un punto determinado.

Utiliza anclas para los desplazamientos.

El fichero se llamará anclas.html.

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:

Tamaño(bits) = Resolución2 * Ancho * Alto * Profundidad color

La resolución se mide en puntos por pulgada (ppp)


El ancho y el alto están expresados en pulgadas (1 pulgada=2,54 cm)
La profundidad de color se expresa en bits.

Debemos tener en cuenta que el formato jpg comprime el tamaño de


la imagen.
69
32.- Tamaño de las imágenes (cms)

Ejemplo. Tenemos una imagen de 10x15 cms con una resolución de


96ppp y 32 bits para el color. Cuál será su tamaño en kb?

Tamaño(bits) = Resolución2 * Ancho * Alto * Profundidad color


Tamaño = 96 * 96 * (10/2,54) * (15/2,54) * 32
Tamaño = 9216 * 3,94 * 5,91 * 32 = 6.867.143 bits
Tamaño = 6.867.143 bits = 858.392 bytes = 838 Kb

Esa imagen ocupará en disco 838 Kb.

http://www.hugorodriguez.com/cursos/curso-idigital_02.htm

70
32.- Tamaño de las imágenes (pixels)

Si la imagen que tenemos tiene un tamaño expresado en pixeles, el


tamaño de la imagen vendrá dado por:

Tamaño(bits) = Ancho (px) * Alto (px) * Profundidad color


Tamaño = 964 * 270 * 24
Tamaño = 6.246.720 bits
Tamaño = 762 Kb

Esa imagen ocupará en disco 762 Kb.

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.

Para insertar un hipervínculo en una imagen:

Ver ejemplo

75
36.- Ejercicio. Imágenes y Vínculos

Diseña una web que contenga cuatro imágenes. Estas


imágenes serán los logos de cuatro periódicos digitales de
tu elección.
Las imágenes deben guardarse en una carpeta llamada
imagenes.
Cada imagen contendrá un enlace hasta la web de la
página del periódico.
Dos de los enlaces se abrirán en la misma ventana del
navegador mientras que los otros los harán en una
ventana nueva.
El ejercicio se guardará en una carpeta llamada Imágenes. 76
37.- Animación y Formatos de Video

- 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.

Diseña una página web que contendrá:


1. Un vídeo de YouTube incrustado.
2. Un vídeo local incrustado.
3. Un documento pdf incrustado.

82
43.- Tablas

Son elementos muy utilizados en la web. Sirven tanto para


mostrar datos tabulados como contenedores de objetos,
ayudándonos a mantener la web “ordenada”.

83
44.- Tablas

84
45.- Ejercicio. Tabla de pedidos (pedidos.html)

85
86
87
88
89
46.- Ejercicio. horario.html

90

También podría gustarte