APUNTES

HTML
INTRODUCCIÓN................................................................................................................................................................. 2
DOCUMENTO HTML 5 ................................................................................................................................................... 2
ESTRUCTURA DEL ARCHIVO. ............................................................................................................................................. 3
ETIQUETAS PARA LA CABECERA .................................................................................................................................... 3
ETIQUETAS PARA EL CUERPO ........................................................................................................................................ 5
Divisiones .................................................................................................................................................................. 5
Formato ..................................................................................................................................................................... 5
Listas.......................................................................................................................................................................... 6
Tabla .......................................................................................................................................................................... 7
Imágenes ................................................................................................................................................................... 8
Enlaces ...................................................................................................................................................................... 9
OTRAS ETIQUETAS, HTML5 ........................................................................................................................................... 9
Audio ......................................................................................................................................................................... 9
Video ....................................................................................................................................................................... 10
Embed ..................................................................................................................................................................... 11
Iframe ...................................................................................................................................................................... 11
Canvas ..................................................................................................................................................................... 12
Otras etiquetas........................................................................................................................................................ 13
VERSIÓN PARA MÓVIL ............................................................................................................................................ 13

1
 INTRODUCCIÓN
En estos apuntes vamos a ver un resumen del uso de HTML 5 y CSS3 para diseñar páginas web. Vamos quedarnos en
la parte del diseño, sin llegar a la publicación del sitio web creado.

HTML5 ha incorporado etiquetas que permiten hacer las páginas más interactivas, permitiendo incluir video, sonido,
documentos, dibujos animaciones…. También ha flexibilizado la manera de usar las etiquetas o los atributos. Ya no es
necesario cerrar las etiquetas no contenedoras, o escribir los nombres de los atributos entre comillas, tampoco es
imprescindible usar las etiquetas hmtl, head o body. Aunque estas simplificaciones no las vamos a incluir en los
apuntes, se tendrán en cuenta a la hora de entender los errores que nos aparezcan al diseñar nuestras páginas.

Aunque existen multitud de aplicaciones para poder programar en HTML y CSS, vamos a usar una de las aplicaciones
más sencillas pero que sin embargo contiene ayudas como el cambio de color o las sugerencias al ir escribiendo.
Notepad++.

Pasemos ya a los consejos sobre los apuntes y como empezar a diseñar una página web con notepad ++.

Para facilitar la búsqueda, las etiquetas aparecerán en azul, los atributos en rojo y los posibles valores en morado.

 Crear carpeta para guardar todos los archivos de la página web. PaginaWeb_nombre
 Primer paso: crear un nuevo documento en notepad++ (o bloc de notas) y guardarlo como [Link],
eligiendo como tipo hyper text markup language(o “todos los archivos” en bloc de notas) para que lo guarde
como una página web y no como texto.
El programa notepad++ usa código de colores para identificar los distintos componentes de un documento
html. Azul para las etiquetas, rojo para atributos, morado para los valores de los atributos, negro para el
texto y verde para los comentarios. Las sangrías serán muy útiles para entender el documento y que está
contenido en que etiqueta de una forma rápida y visual pero no afecta al código.

 Todos los archivos tienen que estar guardados en la misma carpeta, si se crean carpetas dentro para ordenar,
por ejemplo fotos, se debe especificar en las rutas.
 El documento .html creado se abrirá para ver el navegador haciendo doble clic o con el botón derecho abrir
como para elegir un navegador no predeterminado. Para poder editar el código html, con el botón derecho se
elegirá la poción editar con notepad++.

¡¡OJO!! Guardad todos los archivos y actualizad pestaña del navegador para ver los cambios.
 Los documentos que creemos deben estar documentados, tanto para que los comprendan terceras personas,
como para ayudarnos a nosotros mismos a organizar el documento. Para incluir comentarios en HTML
tenemos que usar la etiqueta <!-- --> dentro de la cuál escribiremos el texto.

DOCUMENTO HTML 5
Para declarar que el documento está creado bajo HTML5, para ellos se usa la etiqueta <! DOCTYPE html>, en la primera
línea del documento.
Para que se reconozcan la mayoría de los caracteres usado, y no aparezcan símbolos raros en tildes o en la letra ñ,
usaremos la etiqueta. <meta charset="UTF-8">. La codificación UTF-8 también es la que mejor reconocen los
teléfonos, esta etiqueta la incluiremos dentro de la cabecera del documento HTML, en <HEAD>.

2
 ESTRUCTURA DEL ARCHIVO.

HTML es un lenguaje que se basa en etiquetas, las etiquetas se identifican por los símbolos de <> donde se abre la
etiqueta y por </> donde se cierra. Normalmente entre las etiquetas de apertura y cierra se incluye el contenido. Las
etiquetas pueden, y en muchos casos es imprescindible, contener atributos. Los atributos sirven para especificar
propiedades o valores de la etiqueta.
Vamos a empezar viendo las etiquetas principales para estructuras la página web.
<HTML> (Etiqueta que indica que estamos creando una página web)
<HEAD>(Etiqueta de apertura de la cabecera).
En esta parte se incluye información sobre el documento como título, autor, enlaces, estilo… lo único visible
en la página es el título, que aparecerá en la pestaña del navegador.
</HEAD>(Etiqueta de cierre de la cabecera)
<BODY>(Etiqueta de apertura del cuerpo)
Aquí va el contenido de la página que será lo que se vea en el navegador.
</BODY>(Etiqueta de cierre del cuerpo)
</HTML>(Etiqueta de cierre del documento)
Para facilitar que el navegador comprenda las partes de la página web podemos usar, dentro de<body>, etiquetas
para diferenciar encabezado, parte principal y pie de página. Estás etiquetas no afectan a la apariencia de la página,
pero facilitan la labor de las herramientas de accesibilidad, como el dictado. Además de estas etiquetas, html5 ha
incorporado el uso del atributo rol. El valor de este atributo (search, banner, button) permite identificar la función de
la etiqueta.
<header> </header> suele contener logo, título, descripción o información sobre el sitio y los botones de navegación.
El menú de navegación, se puede delimitar por la etiqueta <nav></nav> que indicará al navegador que es una
secuencia de enlaces
<main></main> incluye el contenido principal
<footer></footer> En esta parte suele ir la información sobre protección de datos, contacto, diseño de la web…

ETIQUETAS PARA LA CABECERA

La cabecera contiene información sobre el documento HTML y su configuración, como título, enlaces, script o
metadatos. La mayoría de la información escrita en este apartado no se muestra en la página web, una excepción en
el título.
<title> Aquí se escribe el título de la página que aparecerá en la pestaña del navegador </title>
Este título también será el nombre que aparecerá por defecto al incluir una página web en marcadores del navegador.
Resultado:

3
<link> Enlaza con archivos externos como el archivo .css con el estilo de la página, o imágenes como el icono que se
muestra en la pestaña o en los marcadores. Href (archivo), rel (relación), type (tipo/subtipo). Href y rel son esenciales.
<link href= "[Link]" rel="stylesheet" type="text/css"> es la etiqueta que enlaza el documento [Link] con
el HTML para poder cambiar formatos de texto, fondo, imágenes… (tamaño, fuente, color…)

<link rel= "icon" href= "[Link]" /> es el icono que se muestra en la pestaña junto al título, y en el marcador
si lo marcamos como favorito. El valor del atributo rel antiguo era shotcut icon, se ha sustituido por icon, pero
funcionan ambos. Los navegadores actualizados también reconocen jpg, png, svg… pero .ico es el formato que
consideran más optimizado.

En el encabezado podemos incluir la etiqueta <script>, un fragmento o enlace a un archivo de código fuente, el
lenguaje más usado es Java, pero también podemos usar Processing.

El atributo esencial de esta etiqueta es src, la ruta del archivo. (Aunque se podría incluir el código directamente dentro
de la etiqueta, es preferible usar un archivo externo).
En las versiones anteriores a Html 5, también era necesario incluir el atributo Type, donde se indicaba el lenguaje del
script. (text/javascript, application/javascript …)

<meta> Esta etiqueta permite indicar información sobre los metadatos de la página como la codificación de caracteres
usada, el autor o la descripción.
<meta charset="UTF-8"/>. Como se ha indicado antes, esta etiqueta sirve para que se reconozcan la mayoría
de los caracteres usados, y que no aparezcan símbolos raros en tildes o en la letra ñ, usaremos la etiqueta.
Como se ha indicado en la introducción, UTF-8 es la codificación de caracteres adecuada para páginas en
castellano.
<meta name= "author" content= "Mara Arpa Recio" /> Indica el nombre el autor de la página.
<meta name= "description" content= "Página de ejemplo para aprender HTML" /> La descripción ayuda a
posicionar la página web en las primeras posiciones de las búsquedas de los navegadores, para ello se deben
incluir palabras clave relacionadas con el contenido de la página.

4
ETIQUETAS PARA EL CUERPO

Divisiones
Para poder dividir la página en partes podemos usar la etiqueta <div></div> esta etiqueta debe llevar el atributo id,
de esta forma podremos identificar las distintas zonas de nuestra página. Para lograr un diseño atractivo, jugaremos
con las cajas en CSS (posicionamiento, tamaño, márgenes, fondo y demás de cada división).

Las etiquetas <Header>, <main> y <footer> funcionan también como divisores.

Formato
El formato de una página web se puede hacer de tres formas distintas: dentro de cada etiqueta, usando código CSS en
la etiqueta Style dentro de la cabecera, o con un archivo CSS independiente enlazado al archivo de html. La opción
más práctica, y la que vamos a usar, es la tercera. Por ello no vamos a ver todas las etiquetas y atributos que nos
permiten dar formato en Html, tan solo vamos a ver algunos de ellos.
El texto que se escriba o se copie en un documento html no tendrá formato, aparecerá como un arial 11 de color
negro, sin saltos de línea.
 Saltos de línea
<br/> hacer un salto de línea.
<p>Limita un párrafo, con un doble salto de línea después</p>

 Alineación

<center>centra en la pantalla el texto, tabla o imagen incluido</center>

 Formato del texto:
<b> pone en negrita el texto que está dentro de estas etiquetas</b>
<i> pone en cursiva </i>
<u> subraya</u>
<mark> resalta el texto </mark>

5
Listas
En html podemos incluir listas en las que los elementos pueden aparecer desordenados, precedidos por un símbolo,
u ordenadas, precedidos por número o letras.
Listas desordenadas (con puntos, cuadrados o guiones)
La etiqueta es <ul></ul>, y dentro de ella usaremos <li></li> para cada elemento. Podemos usar el atributo type para
definir el símbolo o modificarlo en CSS.
<ul>Empieza listado
<li type="circle">texto de cada punto de la lista, el símbolo es un círculo.</li>
<li type="square">texto de cada punto de la lista, el símbolo es un cuadrado.</li>
<li type="disc">texto de cada punto de la lista, el símbolo es un punto, si no se pone estilo es el que aparece
por defecto.</li>
</ul>Termina el listado
Para que todos los elementos de la lista tengan el mismo símbolo, incluimos type dentro de la etiqueta <ul>

Listas ordenadas
Para las listas ordenadas usamos la etiqueta <ol></ol> e igual que en las no ordenadas, <li> para cada elemento.
<ol> empieza el listado
<li> etiquetas para cada elemento de la lista </li>
</ol> termina el listado
Puedo elegir el tipo de ordenación entre numeración decimal, que es la lista ordenada por defecto, alfabética o romana
usando el atributo type.
También puedo forzar a un elemento para que tenga un determinado valor, en ese caso, los siguientes elementos
seguirán la numeración desde el valor forzado, con el atributo value.

6
Tabla
Para crear tablas usamos la etiqueta <table>, dentro de la tabla primero hay que crear filas, y dentro de estas
columnas. La etiqueta para las filas es <tr>y para las columnas<td>.
Podemos darle título a la tabla usando la etiqueta <caption></caption>

Para que se vean las líneas que delimitan las celdas podemos usar el atributo border, con el grosor de la línea, en la
etiqueta table o darle formato a las celdas con CSS.
Dentro de las columnas, <td>, creadas podemos usar los atributos rowspan para combinar filas, y colspan para
combinar columnas indicando como valor el número de celdas a combinar.

7
Imágenes
Para incluir imágenes en un documento HTML, usamos la etiqueta <img /> dentro de la cuál necesitaremos como
atributo esencial la ruta de la imagen a mostrar, src. Además, podemos incluir otros atributos como los siguientes,
aunque es recomendable dar el formato usando con CSS.
<img src="[Link]" alt="texto" border="1” align=“top” width="400"
height="341">
 Src: ruta y nombre de la imagen. Si la imagen está en la misma carpeta que el
documento html, no hace falta incluir la ruta, si está en otra carpeta, o en una
sitio web, tendremos que incluir la ruta completa.
 alt: texto si no se ve la imagen,
 width: anchura en pixeles (también puede poderse por porcentaje)
 height: altura
 border: pone borde a la imagen.
 align: utilizando los atributos “left” para alinearla a la izquierda, “right” para
alinearla a la derecha, “top” para alinearla arriba, “bottom” para alinearla
abajo y “middle” para alinearla al centro.

8
Enlaces
Para crear enlaces tanto internos (en el propio documento) como externos, la etiqueta a usar es <a>, el atributo
esencial de esta etiqueta es href, que indica a que estamos referenciando con el enlace. Entre la etiqueta de apertura
y cierra tenemos que escribir el texto que servirá de enlace al pinchar sobre él, o incluir la imagen que actúe como un
botón, haciendo que vayamos a otra página, documento, o lugar de la misma página al pinchar sobre ella.
Igual que con las imágenes, debemos incluir la ruta completa, en el caso de enlazar a documentos, si están guardados
en la misma carpeta que el archivo html, tan solo necesitaremos el nombre.
Podemos crear enlaces externos, a otra página o documento, e internos, a un apartado de la propia página.
<a href="[Link] ">texto sobre el que pinchar</a> es un texto que sirve de enlace a google.
<a href=”[Link] target="_blank">texto sobre el que pinchar</a> es un texto que sirve de enlace a
google y que se abre en una pestaña nueva.
<a href="[Link] ">texto sobre el que pinchar</a> es un texto que sirve para descargar un documento de word.
<a href="[Link]">texto sobre el que pinchar</a> es un texto que sirve para otro archivo de la página web.
<a href= "#punto2">ver punto 2</a> el texto sirve de enlace para que se muestre el párrafo donde está el punto 2. En
ese párrafo necesitamos poner la identificación llamada con #
<p id="punto2">El punto 2 del tema es</p>

OTRAS ETIQUETAS, HTML5

En este apartado vamos a incluir otras etiquetas más avanzadas, incluidas las propias de Html 5.

Audio
<audio></audio> Esta etiqueta permite incluir un archivo de audio en la página web para que se reproduzca. El
atributo esencial es src, pero podemos incluir otros atributos que nos permiten configurar la reproducción.
 src Ruta del audio
 controls Muestra los controles de reproducción.

9
Hay que tener en cuenta los formatos de audio, la calidad que tienen, si son recomendables para reproducir en
navegadores y los códec que necesitan.
Formato Codec utilizado Características
MP3 MPEG Layer-3 Buena calidad. Buen soporte
OGG Ogg Vorbis Buena calidad. Alternativa libre a MP3. Soporte medio
AAC Advanced Audio Coding Mejora el MP3. Usado como audio en MP4. Soporte medio
Opus Opus Buena calidad. Alternativa libre a MP3. Soporte malo
FLAC FLAC Audio Lossless Compresión sin pérdidas. Alto tamaño
WAV Wave sound Formato de Microsoft. Está soportado. Muy pesado
Para conseguir mayor compatibilidad con el navegador, o incluir opciones adicionales, como los subtítulos, podemos
usar etiquetas como <source> o <track> dentro ella,
La etiqueta <source> para incluir varios formatos de un mismo audio, el navegador reproducirá el primero que sea
compatible. Tiene como atributos src con la ruta del audio y type que especificará los códec que usa.
<track> permite incorporar subtítulos. Sus atributos son:

 src, (contiene la ruta)

 srclang (código idioma)
 label (descripción del idioma)
 kind (tipos de subtítulo, puede tener los valores: subtitles: subtítulo sobre el reproductor, metadata son
datos técnicos, no se ven, chapters: título de los capítulos, captions: transcripción de audio, incluye
música, efectos.. descriptions: Descripción textual del contenido del vídeo)

Video
<video> </video> Esta etiqueta permite incrustar un video, el atributo esencial es la ruta src, pero para que se pueda
interactuar con el video deberemos incluir otros atributos como Controls. Funciona como la etiqueta audio, aunque
a mayores se puede configurar el tamaño del video, width ancho del video y height alto del video.

También podemos usar la etiqueta video, para que contenga las etiquetas source y track, igual que en el audio.

10
Embed
La etiqueta <embed></embed> permite integrar contenido externo, como aplicaciones o archivos. Los atributos que
admite son:

 src: la ruta del archivo.

o Dentro de la ruta del archivo podemos incluir parámetros después de #(para usar varios se usa &
entre ellos) como: page=número (muestra la página del documento indicada) o zoom= número (100
representará un zoom del 100%) entre otros.
 Type: el tipo de dato que se va a incrustar. Un archivo PDF tendría un tipo application y un subtipo pdf.
 Width: anchura que va a ocupar.
 Height: altura que va a ocupar.

Iframe
Para poder incrustar contenido de otro sitio web, podemos usar la etiqueta <iframe> como atributos esenciales
tenemos
 src,
 width
 height.
Además, podemos incluir otros atributos como:

 importance con valores auto, high y low, que le indican al navegador la prioridad que tiene el contenido del
iframe dentro de la página para poder gestionar los recursos.
 allowfullscreen con el valor true, si se quiere permitir que se ponga a pantalla completa.
Para incluir contenido de algunas páginas como google maps, o youtube, debemos usar la opción insertar dentro de
compartir, de esta forma nos mostrará la etiqueta iframe con la ruta necesaria y una serie de atributos por defecto
que se podrán modificar una vez lo hayamos copiado al archivo html.

11
Canvas
La etiqueta <canvas> permite incluir gráficos animados, como pueden ser los banners de publicidad, las simulaciones
o imágenes interactivas, mediante scripts (como javascript o processing). Está etiqueta es la que va a permitir que se
pueda seguir usando juegos online cuando flash termine de desaparecer.
Para poder asociar processing con la etiqueta canvas, primero se debe usar la etiqueta script en la cabecera.
Debemos usar una primera etiqueta para enlazar el archivo [Link], que debe estar en la carpeta del archivo
html, que permitirá que se ejecute el código en el navegador. (se puede descargar de la página download | [Link]
([Link]))
Después crearemos otro script para el canva que queremos mostrar, en este usaremos el atributo data-processing-
target, identificador de la etiqueta Canva, para indicar quien va a contenerlo.

Dentro del segundo script copiaremos el código Processing.

En el cuerpo del documento HTML, incluiremos la etiqueta <canvas> con el identificador

que hemos indicado como objetivo en el script.

12
Otras etiquetas
<article> Define contenido autónomo que podría existir independientemente del resto del contenido.
<aside> Define algunos contenidos vagamente relacionados con el resto del contenido de la página. Si se quita
el resto de contenido sigue teniendo sentido.
<bdi> Representa un texto que debe ser aislado de sus alrededores para el formateado bidireccional del
texto. Permite incrustar un fragmento de texto con una direccionalidad diferente o desconocida.
<command> Representa un comando que un usuario puede invocar.
<details> Representa un widget desde el que un usuario puede obtener información o controles adicionales.
<figure> Representa una figura ilustrada como parte del documento.
<figcaption> Representa la leyenda de una figura.
<form> Crear un formulario para enviar información a través de la página. Llevará elementos <input> de
distintos tipos: áreas de texto, selectores, desplegable, textos de tipo búsqueda, url, teléfono, correo,
fecha, color… necesitan ir acompañados de programación (php, java..) para enviar la información.
<math> Define una fórmula matemática.
<menu> Representa una lista de comandos
<meter> Representa la medida escalar (o el valor fraccionario) dentro de un rango conocido. (visualmente es
igual que progress, aunque su finalidad es ser un valor fijo, mientras que progress está pensado para
ir cambiando al usar un script.
<output> Representa el resultado de un cálculo.
<progress> Representa el progreso de finalización de una tarea.

<section> Define una sección en un documento.

<summary> Representa un resumen, título o leyenda para un elemento <details> dado.
<svg> Define una imagen vectorial embebida.
<wbr> Representa una oportunidad de salto de línea, es decir, un punto sugerido de envoltura donde el texto
de múltiples líneas puede ser dividido para mejorar su legibilidad.

VERSIÓN PARA MÓVIL

Al diseñar una web en HTML 5 optimizada para móviles debemos tener en cuenta distintas cuestiones como:
 Usar metadatos específicos para que los contenidos puedan mostrarse, tanto en relación con los caracteres
como las escalas, adecuadamente en los teléfonos.
Por ejemplo:
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=yes"> Esta etiqueta fue creada para
dispositivos de Apple pero ahora se ha convertido casi en un estándar.
 No usar tablas. Las tablas son componentes fijos que no se adaptan a tamaños de pantalla distintos, lo más
fácil es que se deformen y no se entienda el contenido.
 Usar divisores con formato CSS flexible. Los divisores <div> permiten usar formatos flexibles mediante CSS
para que su tamaño, principalmente anchura, se adapte a las distintas pantallas.
 Crear dos versiones de cada página, una para móviles y otra para PC, enlazadas entre sí. Una opción bastante
extendida es crear dos versiones de una página y un botón (normalmente en el encabezado) para que el
usuario cambie de una a otra.

13