U2. Diseño web con HTML (parte I).pptx

1. Lenguajes de Marcas y Sistemas de
Información
UD2. Diseño web con HTML (parte I)

2. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
Contenido
2
1. Introducción
2. Versiones
3. Etiquetas HTML
1. Formato
2. Atributos
3. Estructura del documento
1. Cabecera (head)
2. El cuerpo (body)
3. El texto
4. Tablas
5. Imágenes
6. Multimedia
7. Enlaces
8. Listas
2

3. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
● El lenguaje de marcas HTML (Hyper Text Markup Language) surgió por la
complejidad de SGML, creándose un lenguaje mucho más simple y adaptado
expresamente a representar contenido para la web.
● El número de etiquetas del que se dotó a HTML era considerablemente reducido, lo
que hacía que se curva de aprendizaje fuera bastante rápida.
● Un documento realizado con el lenguaje HTML consta de dos elementos: los
contenidos del documento y las instrucciones HTML que darán el formato adecuado a
dichos contenidos.
● Estas instrucciones, llamadas etiquetas, constituyen la base del lenguaje HTML.
1. Introducción
3 3

4. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
● 1993 HTML 1.0 Permitía textos e imágenes
● 1995. HTML 2.0. Estructura de código más limpia y se estandariza normativa para los
navegadores. El contenido de las páginas era más importante que el diseño.
● 1997. HTML 3.2. Los navegadores soportan tags y frames. La primera versión
desarrollada y estandarizada exclusivamente por el W3C. Integración de CSS.
● 1999. HTML 4.0. Más estilos y scripts. Mejora de la accesibilidad de las páginas
diseñadas, tablas complejas y mejoras en los formularios.
● 2014. HTML 5.0 Nuevas etiquetas: email, password, audio, vídeo, canvas. En
definitiva un código más simple y universal.
2. Versiones
4 4

5. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
● 2008. HTML 5. Nuevas funcionalidades como arrastrar imágenes,
mejoras en los formularios y facilidades para validar el contenido sin Javascript,
permite generar tablas dinámicas que pueden filtrar, ordenar y ocultar contenido, etc.
2. Versiones
5 5

6. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
● Para que los navegadores sepan que versión de HTML es, el documento que debe
presentar, es necesario incluir una cabecera DOCTYPE que lo identifique.
● A continuación se muestra un ejemplo para HTML 4.01 y su uso en HTML5:
2. Versiones
6

7. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
● HTML5 no es una nueva versión del antiguo lenguaje de etiquetas, ni siquiera una
mejora de esta ya antigua tecnología, sino un nuevo concepto para la construcción de
sitios web y aplicaciones en una era que combina dispositivos móviles, computación
en la nube y trabajos en red.
● Todo comenzó mucho tiempo atrás con una simple versión de HTML propuesta para
crear la estructura básica de páginas web, organizar su contenido y compartir
información.
2. Versiones
7

8. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
2. Versiones
8

9. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
2. Versiones
1990: Primera web publicada en Internet
WorldWideWeb
2000: Buscador Lycos
Lycos
9

10. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
● Una etiqueta o marca está formada por una o varias palabras reservadas, es decir,
palabras que tienen un significado especial en el lenguaje.
● Se diferencian de la información de la información del documento propiamente dicha
porque se encuentran encerradas entre los símbolos “<“ y “>”
● Existen dos tipos básicos de etiquetas:
○ Las de inicio o apertura: declaran las características o formatos
de elemento (por ejemplo, indica que el texto irá en negrita o
cursiva).
○ Las de fin o cierre: indica al navegador que el formato que
afectaba al elemento desde la etiqueta de inicio, se acaba.
● Las etiquetas de apertura y cierre son exactamente iguales salvo por
el símbolo “/”
3. Etiquetas HTML
3.1. Formato
10

11. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
● Ejemplo:
○ Si se inserta la etiqueta de “texto en negrita” (<b>), el navegador formateará en
cursiva todas las palabras que vengan a continuación.
○ El efecto dejará de aplicarse cuando el navegador encuentre la etiqueta de cierre
(</>)
<b> Este texto se mostrará en negrita </b>
3. Etiquetas HTML
3.1. Formato
11

12. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.1. Formato
● No todas las etiquetas de este lenguaje tienen su correspondiente etiqueta de fin, ya
que hay diferentes tipos:
○ Etiquetas de apertura y cierre. La instrucción sólo se aplica al elemento que
encierran
○ Etiquetas de sólo apertura. El efecto se produce en un punto determinado del
documento sin afectar a otros elementos.
<p> Este texto se mostrará en negrita </p>
<br/>
12

13. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.1. Formato
● Las etiquetas con apertura y cierre deben estar “balanceadas”, es decir, si se abren
en un orden determinado, se deben cerrar en el orden inverso para que las primeras
engloben a las siguientes.
13

14. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.1. Formato
● Por otra parte, HTML no diferencia entre mayúsculas y minúsculas a la hora de
escribir e interpretar etiquetas.
● Con el fin de lograr una mayor uniformidad en el código, lo normal es que siempre se
escriban de la misma forma, prefiriendo la mayoría de los desarrolladores ponerlas en
minúsculas siguiendo las recomendaciones del W3C.
14

15. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.2. Atributos
● Los atributos modifican el comportamiento general de la etiqueta, ya sea cambiando
el color, alineación, estilos, etc.
● Generalmente, están formados por el nombre del atributo, que es una palabra
reservada del lenguaje, el signo “=“ seguido de comillas y el valor que toma.
● Una etiqueta genérica con atributos sería:
15

16. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.2. Atributos
16
● El orden en el que se incluyan los atributos es indiferente, aunque hay que tener en
cuenta:
○ Si el valor del atributo contiene dos o más palabras separadas por espacios,
debe ir entre comillas para evitar que el navegador malinterprete el código.
○ Cada atributo sólo puede tener un valor en cada etiqueta.
16

17. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
17
● Un documento realizado en HTML tiene unas partes bien definidas que constituyen su
estructura básica o lo que se conoce como el esqueleto del documento.
● Estas partes están definidas por marcas o etiquetas.
● Para que el navegador intérprete correctamente la página Web en
cuestión, debe saber el lenguaje en el que está escrita.
● Esto se le indica de dos formas:
○ en primer lugar, el documento llevará la extensión html, aunque también admite
htm;
○ en segundo lugar, el documento llevará al principio y al final las
etiquetas <html> y </html>, las cuales indican el lenguaje en el que está escrito el
mismo.
17

18. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
18
18

19. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Un sitio web está compuesto por distintas páginas web.
Los archivos HTML incluirán los contenidos usando los distintos elementos
disponibles:
● Textos
● Enlaces
● Listados
● Tablas
● Multimedia: imágenes, vídeo y audio
● Marcos para mostrar en un recuadro otro sitio web
● Formularios
Los formatos, maquetación y flexibilidad de las páginas se establecerán con
lenguaje CSS
19

20. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
● Una vez establecido el lenguaje que se utiliza, se escribe el esqueleto del documento.
● Éste está constituido por dos partes:
○ Cabecera: está delimitada por las etiquetas <head> </head>.
○ Cuerpo: está delimitado por <body> </body>.
● De esta forma, la estructura genérica en HTML será
<html>
<head>
Elementos de la cabecera
</head>
<body>
Contenido del documento
</body>
</html>
20

21. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
21
La Cabecera
● En la cabecera se incluirán las definiciones generales que afectan a todo el
documento.
● Todas son opcionales y se utilizan en casos muy concretos.
21

22. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
22
La Cabecera
● La etiqueta <meta>
○ Se utiliza para añadir información sobre la página.
○ Esta información puede ser utilizada por los buscadores.
○ El atributo name indica el tipo de información, y el atributo content indica el valor
de dicha información.
name uso
author Indicar quien confeccionó la página
web
description Resumen del contenido de la página
keywords Palabras clave (similar a los # en
RRSS)
classification Palabras que ayudan al buscador a
clasificar el sitio 22

23. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
● La etiqueta <meta>
○ No necesita etiqueta de cierre.
○ Para cada etiqueta <meta> solo es posible indicar un tipo de información y su
valor, pero es posible insertar varias etiquetas <meta> en un mismo documento.
<html>
<head>
...
<meta name=“author” content=“Ana Borobio” />
<meta name=“description” content=“HTML básico” />
<meta name=“keywords” content=“código, HTML, etiqueta, web” />
</head>
23

24. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
● La etiqueta <meta>
○ También se utiliza para indicarle al navegador qué tipo de caracteres va a
encontrarse y así que muestre correctamente un acento o una ñ por ejemplo.
○ El valor para el atributo charset suele ser “UTF-8” o UNICODE
○ Existe una variante para indicar lo mismo
<html>
<head>
<meta charset="UTF-8"/>
</head>
24

25. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
● La etiqueta <meta>
○ También se utiliza para indicarle al navegador alguna información o alguna
acción que debe realizar.
○ En este caso se utiliza el atributo http-equiv, en lugar de name.
○ Por ejemplo, imaginemos que queremos que nuestra página se actualice
automáticamente cada 30 segundos.
<html>
<head>
...
<meta http-equiv=“Refresh” content=“30” />
</head>
25

26. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
● La etiqueta <meta>
○ Ahora imaginemos que hemos cambiado la dirección en la que se encuentra
nuestra página web, y queremos que cuando algún usuario visite la página en la
URL antigua, a los 5 seg. el navegador lo redirija automáticamente a la URL
nueva.
<html>
<head>
...
<meta http-equiv=“Refresh” content=“5; URL=http://nuevaURL.com” />
</head>
26

27. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
● La etiqueta <meta>
○ Meta keywords y meta description para SEO: ¿funcionan todavía?
■ Este artículo describe los resultados de un experimento que intenta
comprobar con hechos si Google tiene en cuenta o no las meta keywords y
la meta description a la hora de posicionar una web en los resultados.
27

28. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
● La etiqueta <meta>
○ HTML5 introdujo un método para que los diseñadores web tienen control sobre el
área de visualización. El visor es zona visible del usuario de una página web.
○ La anchura = dispositivo de ancho de pieza establece el ancho de la página para
seguir la pantalla-anchura del dispositivo (que variará en función del dispositivo).
○ El inicial escala = 1.0 parte establece el nivel de zoom inicial cuando la página se
carga primero por el navegador.
Diseño responsive
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
28

29. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
29
La Cabecera
29

30. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
● La etiqueta <title>
○ Esta etiqueta nos permite establecer el título que tendrá nuestra página, este es
mostrado en la barra de título de nuestro navegador o en la pestaña
correspondiente
<html>
<head>
<title> Mi primer proyecto web</title>
</head>
30

31. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
31
La Cabecera
Puedes insertar un icono en la pestaña de tu web con el siguiente comando:
<html>
<head>
<link rel=”shortcut icon” href=”imagen.png”/>
</head>
31

32. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
La Cabecera
La etiqueta link también nos servirá para hacer una llamada a una hoja de estilos externa
CSS.
<html>
<head>
<link rel=”stylesheet” href=”stilos.css”/>
</head>
32

33. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
El Cuerpo <body>
● El cuerpo del documento viene indicado por el par de etiquetas <body> </body>.
● Es en él donde van dispuestos los distintos elementos que componen el documento y
que le dan sentido: texto, imágenes, sonido, etc.
● La etiqueta <body> admite una serie de atributos que son de carácter global para todo
el documento.
● Es decir, define aspectos generales del documento como la imagen de fondo de la
página o el color de la misma, etc.
33

34. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
El texto en HTML
● Títulos, la etiqueta <h...>
En cualquier documento es necesario diferenciar los diferentes apartados mediante el
uso de encabezados o títulos, HTML nos permite crear títulos mediante la
etiqueta<h1> hasta <h6> definiendo cada una de ellas un tamaño de letra.
Además servirá a los buscadores para conocer el contenido estructurado de la página.
Salida por
navegador
34

35. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
● Etiqueta <abbr>
35

36. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
El texto en HTML
● La etiqueta <hr/>
○ Introduce una línea horizontal en el documento.
○ Por defecto, dicha línea poseerá el ancho de la ventana del navegador,
tendrá forma 3D e introducirá una separación equivalente a un cambio
de párrafo tanto por delante como por detrás de ella.
36

37. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
● Existen otras muchas etiquetas que nos permiten trabajar con texto dentro de HTML
W3C HTML Element Reference
37

38. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
● Si queremos usar caracteres especiales o reservados debemos usar:
Existen diccionarios de referencias UNICODE como en la web del enlace
&referencia;
Salida por
navegador
38

39. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Tablas en HTML
En cualquier documento HTML podemos crear tablas para mostrar información
como un listado de productos, un horario, un listado de tareas, etc.
Para ello, haremos uso de la etiqueta <table></table> que nos indica que
estamos construyendo una tabla y de las etiquetas <td></td> y <tr></tr> que
hacen referencia a las columnas y a las filas respectivamente.
Salida por
navegador
39

40. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Tablas en HTML
Del mismo modo que en el resto del documento usamos las etiquetas <h…> para
definir títulos, se recomienda el uso de la etiqueta <th></th> para definir cuál será
nuestra fila de cabeceras. Para mostrar las líneas hemos incluido el atributo border,
aunque no se debe usar al no ser HTML5. Ya le daremos formato con CSS.
Salida por
navegador
40

41. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Tablas en HTML
En ocasiones, nos resultará útil combinar celdas o filas que contengan un mismo
valor. Para ello, podemos usar los atributos de la etiqueta <td> colspan y rowspan.
Salida por
navegador
41

42. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Imágenes en HTML
● Para incrustar imágenes en nuestro documento web debemos usar la etiqueta
<img>. El atributo alt se mostrará si la imagen no se muestra o para indicar a
buscadores el tema de la imagen.
Salida por
navegador
Font Awesome Icons
Amplio repertorio gratuito de iconos
42

43. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Imágenes en HTML
● Resolución de la imagen: NO tiene sentido utilizar imágenes de más de 2 Mpx (1000
x 2000) ya que ralentizará la carga de la página además de que no mejorará la calidad
de visualización de la misma.
● Para indicar el tamaño de las imágenes en la pantalla lo indicaremos con atributos
CSS. tamaño en horizontal (ancho) width y en vertical (alto) con height.
○ En píxeles: se indica el nº y se pueden añadir las unidades (px) o no
○ En porcentaje: después del porcentaje añadir el carácter %
● Fuente de las imágenes:
○ Las podemos tener alojadas en una carpeta junto a la web (archivo html)
○ Podemos usar la URL de localización de la misma. En búsquedas de Google
botón derecho ratón seleccionando “Copiar dirección de imagen”.
43

44. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Multimedia:
Podemos insertar también un audio (como música de fondo de nuestra web) o un vídeo
para que se muestre directamente en nuestra web.
Vídeo: podemos usar dos sintaxis, la que nos ofrece Youtube por ejemplo:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/GQbytK
kt0tg" frameborder="0" allow="accelerometer;
autoplay; encrypted-media; gyroscope; picture-
in-picture" allowfullscreen>
</iframe> 44

45. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Multimedia:
Vídeo: o usar la sintaxis para insertar un archivo de vídeo
<video width="400" controls>
<source src="DOVER -
seranade.mp4"
type="video/mp4">
</video>
45

46. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Multimedia:
Audio: Podemos insertar un reproductor de un determinado audio
O hacer que este audio funcione como música de fondo (no se mostraría nada por
pantalla) En el código ponerlo al final del todo.
● Para chrome y Edge (*):
<embed src="DOVER - Serenade.mp3" autostart="true" loop="true" width="0" height="0"/>
● Para Firefox y Explorer (desbloqueando el audio):
<audio src="temple of love.mp3" autoplay="autoplay" loop="loop"/>
46

47. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Enlaces en HTML
● Una de las bases de la web son los enlaces o hipervínculos que permiten la
navegación entre documentos, entre secciones de un mismo documento o
direccionar a sitios web.
● Usaremos la etiqueta <a></a> junto a su atributo “href” para definir enlaces sobre
elementos de nuestro documento tales como texto, imágenes o botones (button)
47

48. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Enlaces en HTML
● En el ejemplo anterior hemos visto cómo navegar hacia otro documento html a
través de URL, es posible además navegar hacia otros puntos de nuestro
documento a través de las llamadas anclas.
○ Para ello crearemos un ancla en cualquier parte de nuestro documento
○ Y posteriormente definiremos un enlace hacia la misma
48

49. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Enlaces en HTML
● Uso de una imagen con zonas clicables como enlaces. La sintaxis es como la del
ejemplo:
49

50. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Enlaces en HTML
Las áreas pueden ser:
FORMA COORDENADAS
Rectangular “rect” Posiciona el cuadrado respecto al eje x, luego al eje y,
posteriormente indica hasta qué pixel llega en x e y
Circular “circle” Posiciona el centro del círculo en el eje x e y
respectivamente y posteriormente indica el radio
Poliédrica “poly” o “polygon” Posiciona distintas coordenadas del
perímetro de la zona cliqueable
Consejo: para averiguar las coordenadas puedes usar aplicaciones como Paint o Gimp
50

51. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Listas en HTML
● Uno de los modos más habituales para presentar una enumeración de elementos
es la creación de listas. En HTML encontramos dos tipos de listas
○ Listas desordenadas → Las listas no ordenadas se utilizan para enumerar
elementos sin orden establecido. Los elementos del listado aparecerán con
una viñeta a la izquierda.
51

52. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Listas en HTML
● Listas ordenadas → Similares a las anteriores, sin embargo, en este caso
podemos establecer un orden. Con el atributo start podríamos empezar en otro nº.
52

53. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Listas en HTML
● Listas anidadas → HTML permite combinar y anidar varias listas,
independientemente de su tipo.
53

54. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
3. Etiquetas HTML
3.3. Estructura del documento
Listas en HTML
Listas de descripción de términos → Usadas para listar un glosario o diccionario de
términos con sus respectivos significados.
54

55. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
Dudas y preguntas
55

56. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
Bibliografía
● W3school: https://www.w3schools.com/
● Línea de código: https://lineadecodigo.com/html5/
● Uniwebsidad:https://uniwebsidad.com/libros/xhtml
56

57. Departamento de Informática. Profesor: Ana Borobio
DAW1. LMSG
Prácticas
57
Actividades
Chuleta
Chuleta HTML5