Sesión 2: HTML
-
Tiempo: 50min + 50min
-
NOTA: En vez del continuar con el TEMA 2, Vamos a pasar directamente al TEMA 3 (HTML) para poder hacer las prácticas lo antes posible. Volveremos al TEMA 2 (protocolo HTTP) al terminar el bloque de HTML, CSS y Javascript
- 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
- El rincón friki
- Descargas
- Autor
- Créditos
- Licencia
- Enlaces
Retomamos la clase desde donde lo dejamos: habíamos visto 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 2: 02-basic-headings.html
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>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>Al visualizarlo en un navegador, obtenemos lo siguiente:
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
<!DOCTYPE html>
<html lang="s" dir="ltr">
<head>
<meta charset="utf-8">
<title>Párrafos</title>
</head>
<body>
<p>Es 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 según el tamaño
de la pantalla del navegador</p>
<p>Este 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íneas
Y otra</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="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>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>
<li>Leche</li>
<li>Café</li>
<li>Pan</li>
</body>
</html>Queda renderizado de la siguiente manera:
Y la estructura del documento tiene la siguiente pinta
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
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Botones</title>
</head>
<body>
<p>Botones</p>
<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="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Enlaces</title>
</head>
<body>
<h2>Apuntes de CSAAI</h2>
<p> <a href="https://github.com/myTeachingURJC/2018-19-CSAAI/wiki">Página principal</a>: En github</p>
<h3>Temas que estamos viendo:</h3>
<p> <a href="https://github.com/myTeachingURJC/2018-19-CSAAI/wiki/Introducci%C3%B3n-a-las-tecnolog%C3%ADas-web">[Tema 1]</a>
<a href="https://github.com/myTeachingURJC/2018-19-CSAAI/wiki/Sesión-2:-HTML">[Tema 3]</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="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Imágenes</title>
</head>
<body>
<h2>Universidad Rey Juan Carlos</h2>
<img src="urjc-logo.png" alt="Imagen: Logo URJC">
</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 tienen 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="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>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="es" dir="ltr">
<head>
<meta charset="utf-8">
<title>Id y class</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>
-->- 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
(TODO)
- Dispositivas de apoyo. Profesor Jose María Cañas
- Juan González-Gómez (Obijuan)
- Creado a partir del contenido generado por el profesor Jose María Cañas
