Sesion 2 HTML
- Tiempo: 2h (50 + 50min)
- Fecha: Martes, 07-Febrero-2023
-
Objetivos de la sesión:
- Etiquetas básicas de HTML
- Imágenes
- Enlaces
- Bloques
- Tener unas nociones básicas de HTML para empezar a practicar
- HTML: Estructurando documentos
- Etiquetas básicas
- Etiquetas básicas con atributos
- Elementos bloque y en línea
- Creando secciones genéricas
- Agrupando e identificando elementos
- Comentarios
- Nuevo en HTML5
- Autor
- Licencia
- Enlaces
Ya sabemos cómo hacer el "hola mundo" en HTML. Lo más importante es tener en la cabeza que HTML nos permite estructurar la información.
Esto significa que el contenido se puede colocar en las hojas de un árbol:
El tener el documento representando en una estructura de datos en memoria nos permite:
- Crear programas (en javascript) para recorrer este árbol, encontrando la información que necesitemos, o procesando los datos
- Añadir contenido dinámico al árbol
- Asociar un estilo a las diferentes partes del árbol
Veremos algunas de las etiquetas más importantes de HTML
Los encabezados se representan mediantes las etiquetas h1, h2, ..., h6. Hay por tanto 6 niveles de encabezamiento. La etiqueta h1 representa un encabezado más general: Capítulo, Tema... Mientras que h6 es el encabezado más profundo
- Ejemplo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-1: Encabezados</title>
</head>
<body>
<h1>Encabezado H1</h1>
<h2>Encabezado H2</h2>
<h3>Encabezado H3</h3>
<h4>Encabezado H4</h4>
<h5>Encabezado H5</h5>
<h6>Encabezado H6</h6>
</body>
</html>Esta es su previsualización en VSCode:
Así es cómo se ve la página en un teléfono móvil:
El árbol que representa la estructura tendría esta pinta:
Se utilizan mucho. Típicamente hay varios párrafos dentro del cuerpo. Aunque en el HTML lo separemos en diferentes líneas, todo el texto que esté dentro del mismo párrafo se coloca en la misma línea. También si hay varios espacios se eliminan y sólo se muestra uno
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-2: Parrafos</title>
</head>
<body>
<p>Esto es un párrafo. Puede ser todo lo extenso que se quiera.
Aunque en el HTML lo coloquemos en varias
líneas,
en el renderizado se coloca en la misma línea
y se ajusta al ancho de la pantalla
del navegador
</p>
<p>Esto es otro párrafo.
Se coloca separado del anterior
</p>
<p>Este párrafo tiene 3 líneas,
pero el navegador las coloca juntas
Otra línea... y los espacios también
se eliminan
</p>
</body>
</html>Se renderizaría de la siguiente manera:
Y la estructura del documento sería así (sólo se muestra desde el cuerpo hacia abajo)
Las listas nos permiten colocar texto en líneas separadas. Pueden ser listas ordenadas o no ordenadas. Para las primeras usamos las etiquetas:
<ol></ol>mientras que para las segundas:
<ul></ul>Los elementos colocados dentro de la lista, ordenadas o sin ordenar, se sitúan con la etiqueta:
<li>Elemento de la lista</li>Esta etiqueta debe estar siempre dentro de alguna de las anteriores
Ejemplo de uso de listas ordenadas y no ordenadas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-3: Listas</title>
</head>
<body>
<h2>Lista ordenada Pasos:</h2>
<ol>
<li>Conectarse al servidor</li>
<li>Solicitar documento</li>
<li>Esperar respuesta</li>
</ol>
<h2>Lista no ordenada. Comprar:</h2>
<ul>
<li>Leche</li>
<li>Café</li>
<li>Pan</li>
</ul>
</body>
</html>Queda renderizado de la siguiente manera:
Y la estructura del documento tiene la siguiente pinta
Las tablas se construyen usando 4 etiquetas:
-
<table>/</table>: Delimitar la tabla -
<tr>/</tr>: Fila -
<td>/</td>: Dato (elemento de la celda) -
<th>/</th>: Encabezado -
Ejemplo: Tabla de 4 filas y 3 columnas, con los nombres de personajes famosos
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table>
<tr>
<th>Nombre</th>
<th>Apellidos</th>
<th>Descripción</th>
</tr>
<tr>
<td>Chuck</td>
<td>Norris</td>
<td>Creó a Dios</td>
</tr>
<tr>
<td>Trollface</td>
<td>....</td>
<td>Eres un troll</td>
</tr>
<tr>
<td>Ecce</td>
<td>Homo</td>
<td>Genialidad artística</td>
</tr>
</table>
</body>
</html>Esta es la previsualización
Y esta es la estructura del documento
Los botones se definen con la etiqueta button. Los usaremos junto a javascript para generar eventos al ser apretados, y esos evento a su vez ejecutarán un cierto código para realizar una acción
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-4: Botones</title>
</head>
<body>
<h2>Botones</h2>
<button>Botón 1</button>
<button>Botón 2</button>
</body>
</html>Este es el renderizado de los botones:
Y el árbol de la estructura:
Dentro las etiquetas se pueden introducir atributos, que nos permiten cambiar sus propiedades. En algunas etiquetas hay que usar atributos obligatoriamente, como en el caso de las imágenes y los enlaces
Los enlaces se establecen con la etiqueta a y el atributo href, que indica la URL del enlace
Se colocan en los mismos sitios donde se iría cualquier texto. Por defecto se renderizan unos a continuación de otros. Para que estén en líneas diferentes se deben poner en párrafos diferentes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-5: Enlaces</title>
</head>
<body>
<h2>Apuntes de CSAAI</h2>
<p>
<a href="https://github.com/jesusgpa/2020-2021-CSAAI/wiki">Página principal</a>
: en Github
</p>
<h3>Temas que estamos viendo</h3>
<p>
<a href="https://github.com/jesusgpa/2020-2021-CSAAI/wiki/Sesion-1-Introduccion-a-las-tecnologias-web">[Tema 1]</a>
<a href="https://github.com/jesusgpa/2020-2021-CSAAI/wiki/Sesion-2-HTML">[Tema 2]</a>
</p>
</body>
</html>El renderizado quedaría así:
Y esta es la estructura:
Las imágenes se añaden con la etiqueta img. Mediante el atributo src indicamos el fichero a mostrar. Puede ser una URL. Cuando es un fichero, que tiene que estar en el mismo directorio que el fichero html
Mediante el atributo alt especificamos un texto a colocar en caso de que la imagen no se pueda renderizar por el motivo que sea
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-6: Imagen</title>
</head>
<body>
<h2>Universidad Rey Juan Carlos</h2>
<img src="Logo-urjc.png" alt="Imagen: Logo-urjc">
<p>Ejemplo de colocar una imagen</p>
</body>
</html>Este es el renderizado:
Y esta es la estructura
Todas las etiquetas HTML definen elementos que se pueden clasificar en dos tipos:
-
Elementos bloque: Empiezan en una línea nueva y tienden a ocupar todo el ancho que puedan
- Encabezados: h1, h2...h6
- Listas: ol, ul, li
- Párrafos: p
-
Elementos en línea (inline): Se colocan a continuación del elemento anterior y tienden a ocupar la mínima anchura
- Botones: button
- Imágenes: img
- Enlaces: a
Para estructurar mejor nuestros documentos HTML, podemos definir secciones genéricas. Disponemos de dos elementos para ello:
- Div: Definición de una sección genérica de tipo bloque. Es un contenedor: dentro de él podemos usar otros elementos de tipo bloque
- span: Definición de una sección genérica de tipo inline
En este ejemplo se definen 3 secciones tipo bloque, una de ellas dentro de otra, y dos secciones de tipo inline dentro del bloque 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-7: Secciones genéricas</title>
</head>
<body>
<div>
Bloque 1
<div>
Bloque 1.1
</div>
</div>
<div>
Bloque 2
<span>(Inline 1)</span>
<span>(Inline 2)</span>
</div>
</body>
</html>En el renderizado podemos ver el resultado. Todos los texto se ven con el mismo estilo, porque no se ha definido ninguno particular para cada elemento. Los tres bloques div están en tres líneas separadas. Mientras que los dos bloques span se sitúan a continuación del bloque 2, en la misma línea
Este es el árbol son su estructura:
Para referenciar un elmento HTML usamos el atributo id. Este identificador debe ser único: no puede haber dos elementos con el mismo identificador. Lo usaremos por ejemplo para identificar a cada botón, o a cada elemento de la interfaz gráfica. También para dar un estilo único a un elemento
<div id="seccion2">...</div)El atributo class nos permite agrupar dos o más elementos, de forma que los podemos referenciar a todos a la vez usando un único nombre. Esto es muy útil si por ejemplo queremos dar el mismo estilo a dos o más secciones
<div class="grupo1">...</div>
...
<div class="grupo1">...</div>En este ejemplo se crean 4 secciones. Tres tienen un identificador, y dos están agrupadas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ej-8: Grupos</title>
</head>
<body>
<h2 class="Grupo1" id="E1">Encabezado</h2>
<div class="Grupo1" id="S1">
Sección 1
</div>
<div id="S2">
Sección 2
</div>
<p>Párrafo</p>
</body>
</html>El elemento h2 y la sección 1 están agrupadas en la clase Grupo1. Esto nos permitiría, por ejemplo, ponerles a las dos el mismo estilo de letra. La sección 2 se identifica como S2
Así quedaría el renderizado
Y esta es la estructura
Como en cualquier lenguaje de programación, se pueden colocar comentarios (¡y se deben!) para dar explicaciones y hacer más legible el código. Los cometarios son ignorados por el navegador
<!-- Este es un comentario en una línea -->
<!-- Este es un comentario en
Varias líneas. Dentro puede haber código html que queremos
desactivar, como por ejemplo el siguiente encabezado
<h1>Encabezado 1</h1>
-->Nuevo en HTML5
- Multimedia: Audio + video (Antes flash de Adobe)
- SVG, Canvas, WebGL
- Geolocalización (API)
- CSS3
- Webworkers: scripts en JS que corren en segundo plano
- Almacenamiento temporal
- Appcache
- Interfaz Drag and Drop
Jesús Parrado Alameda (jesusgpa)
- Creado a partir del contenido generado por el profesor Jose María Cañas
- Creado a partir del contenido generado por el profesor Juan Gonzalez-Gomez
