1º CFGS ASIR.
Lenguajes de Marcas y Sistemas Gestores de la Información HTML
Lenguajes de Marcas y Sistemas Gestores de la Información
HTML
1 Introducción
HTML es el lenguaje de marcas estándar para la creación de páginas
web.
HTML son las siglas de HyperText Markup Language o Lenguaje de
Marcas de Hipertexto.
HTML describe la estructura de una página web utilizando etiquetas. Los
elementos son los bloques básicos de construcción de esa estructura.
Estos elementos se representan mediante etiquetas:
<elemento>Contenido afectado por el elemento</elemento>
Los elementos son anidables, es decir, un elemento puede contener
otros elementos.
Existen elementos vacíos, que no contienen nada, estos se cierran en la
propia etiqueta, de la siguiente forma: <elemento />
El código html no se ejecuta, como otros lenguajes, sino que se
interpreta.
Los archivos html se crean como documentos de texto, se guardan
especificando la extensión .html y se interpretan en un navegador web.
2 Estructura básica
<!-- Comentari os no interpretables por el navegador -->
<!DOCTYPE html> <!--Decl araci ón del ti po de documento -->
<html> <!--Todo documento html debe empezar así -->
<head> <!-- Cabecera del documento -->
<title> Título de la página </title>
</head>
<body> <!-- Cuerpo del documento, l os conteni dos deben i r en esta parte -->
Contenidos de la página
</body>
</html>
Toda la información que muestre la página web debe ser contenida
entre las etiquetas de apertura y cierre de <body>
La etiqueta <head> se utiliza para contener los metadatos, es decir,
información relativa a la página cuyo destinatario no es el usuario final sino el
navegador en el que se muestra, el servidor en el que se aloja o los buscadores
que pueden indexar (añadir a su índice) la página.
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
3 Atributos
Todos los elementos HTML pueden tener atributos.
Los atributos permiten aportar información extra a los elementos.
Siempre se especifican en la etiqueta de apertura y tienen, invariablemente la
misma sintaxis: <elemento nombre_atributo=”valor”>
Los atributos que se pueden usar en cada caso dependen del elemento
al que le estemos añadiendo atributos. Los entornos de desarrollo como
Dreamweaver o Brackets facilitan el uso de los atributos específicos de cada
elemento.
4 Texto
La etiqueta <p> permite definir un párrafo.
La etiqueta <hr /> es un elemento vacío que inserta una línea horizontal
en la página.
La etiqueta <br /> añade un salto de línea.
Las etiquetas <h1>, <h2>, <h3>, <h4>, <h5>, <h6> permiten dar a un texto
un formato predefinido para hacer encabezados:
<h1> Navegador web </h1>
<p> Es el software para acceder… </p>
<p> Por ejemplo Chrome, Firefox,… </p>
<hr />
<h1>Servidor web </h1>
<p> Es el software que ofrece… </p>
<p> Por ejemplo Apache2, IIS,… </p>
<hr />
Las propiedades de formato del texto (color, tamaño, tipo,…) se
pueden especificar usando atributos HTML en la etiqueta <Font>, pero
conviene hacerlo mediante el lenguaje específico CSS, que veremos más
adelante.
Etiquetas de formato:
<b> o <strong> - Texto en negrita
<i> o <em> - Texto en cursiva
<small> - Texto en pequeño
<del> - Texto tachado
<u> o <ins> - Texto subrayado
<sub> - Subíndice
<sup> - Superíndice
<mark> - Resaltar texto
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
5 Enlaces
Los enlaces o hipervínculos nos permiten acceder a nuevo contenido
haciendo clic en ellos.
Se definen con la siguiente sintaxis: <a href=”destino”> Enlace </a>
Tenemos tres tipos de enlaces:
A páginas de Internet:
<a href=”http://www.w3schools.com”> Ir a W3schools</a>
A otras páginas de mi sitio web:
<a href=”productos.html”> Ver productos</a>
A otras partes dentro de la misma página web:
<a name=”encabezado”> Productos: </a>
…
<a href=”#encabezado”> Ir arriba </a>
Los enlaces tienen un estilo propio: Un enlace no visitado aparece
subrayado y azul, Un enlace visitado aparece subrayado y púrpura y un
enlace activo (está siendo pulsado) aparece subrayado y rojo. Estas opciones
se pueden modificar mediante atributos o estilos (atributo style o en css).
Por defecto, al pulsar en un enlace, el destino se abrirá en la misma
pestaña/ventana, podemos modificar esto usando el atributo target=”_blank”
para que se abra en una nueva ventana, de esta manera, en los enlaces
externos no “saldremos” de nuestro sitio web.
Cuando el destino de un enlace es un archivo, la forma de abrirlo
dependerá del tipo de archivo, así, un archivo html se abrirá con el
navegador, un archivo de imagen abrirá dicha imagen en su tamaño original
en el navegador y para un archivo de otro tipo, el navegador preguntará si se
desea abrir el archivo con algún programa o descargarlo.
6 Imágenes
Podemos incluir imágenes en una página web usando la etiqueta vacía
img de la siguiente manera:
<img src=”ruta/imagen.ext” />
El atributo src nos permite especificar la ruta y nombre completo de la
imagen que queremos mostrar. Otros atributos útiles son:
Width: Para especificar la anchura con que se muestra la imagen.
Height: Para especificar la altura con que se muestra la imagen.
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
Alt: Para mostrar un texto alternativo en caso de que la imagen no se
pueda mostrar.
Podemos redimensionar una imagen utilizando los atributos width y height
teniendo en cuenta que si utilizamos sólo uno de ellos, el otro se adecuará
para mantener la proporción de la imagen original. Además conviene tener
en cuenta que redimensionar una imagen mediante los atributos html no
cambia los parámetros originales del archivo de imagen, es decir, ésta seguirá
pesando lo mismo, por lo que, si no se va a utilizar dicha imagen en su formato
original, convendrá reducirla de tamaño antes de utilizarla.
6.1 Mapas de imagen
Una imagen o parte de ella pueden ser enlaces. Para que una imagen sea
un enlace basta con poner la etiqueta de imagen entre las etiquetas de
apertura y cierre del enlace. Para que parte de una imagen sea un enlace se
debe mapear.
Para mapear una imagen se debe definir un mapa de la imagen con la
etiqueta <map> y utilizar el atributo usemap en la etiqueta de la imagen, de la
siguiente forma:
<img src="imagen.gif" alt="imagen" usemap="#mapa" / >
<map name="mapa">
<area shape="rect" coords="0,0,82,126" alt="Pagina1" href="pag1.htm">
<area shape="circle" coords="90,58,3" alt="Pagina2" href="pag2.htm">
</map>
7 Listas
Permiten dar formato a listas ordenadas o no ordenadas de elementos.
Listas no ordenadas: Se delimitan con la etiquetas <ul> … </ul> y cada
elemento de la lista debe ir delimitado por las etiquetas <li> … </li>. El símbolo
usado para marcar el ítem puede modificarse mediante las propiedades de
estilo o mediante el atributo type tomando los valores circle, disc o square, si
bien el uso de este atributo no está estandarizado.
<ul>
<li>Patatas</li>
<li>Pimientos
<ul>
<li>Rojos</li>
<li>Verdes</li>
</ul>
</li>
<li>Cebollas</li>
</ul>
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
Listas ordenadas: Se delimitan con las etiquetas <ol> … </ol> y cada
elemento de la lista debe ir delimitado por las etiquetas <li> … </li>. El símbolo
usado para marcar el ítem puede modificarse mediante las propiedades de
estilo o mediante el atributo type tomando los valores 1, a, A, i o I, para usar
números, minúsculas, mayúsculas o números romanos respectivamente.
También puede usarse el atributo start=”valor” para arrancar a partir de
una posición concreta.
<ol type=”A”>
<li>Patatas</li>
<li>Pimientos
<ul type=”a” start=”3”>
<li>Rojos</li>
<li>Verdes</li>
</ul>
</li>
<li>Cebollas</li>
</ol>
8 Tablas
Las tablas permiten estructurar el contenido definiendo espacios en
forma de tabla. Se delimitan con las etiquetas <table> … </table>.
Cada fila de la tabla se delimita con las etiquetas <tr> … </tr> y dentro
de cada fila, cada celda se delimita con las etiquetas <td> … </td>, aunque
pueden usarse las etiquetas <th> … </th> para definir una celda de cabecera,
con la particularidad de que el contenido de estas celdas aparecerá
centrado y en negrita por defecto.
Podemos usar la etiqueta <caption>… </caption> para poner un título a
la tabla. Debe usarse justo después de la etiqueta <table>.
<table width=”95%">
<caption>Título de la tabla</caption>
<tr>
<th>Mes</th>
<th>Gastos</th>
</tr>
<tr>
<td>Enero</td>
<td>100 €</td>
</tr>
<tr>
<td>Febrero</td>
<td>50 €</td>
</tr>
</table>
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
Las celdas pueden expandirse para ocupar el espacio de otras celdas
adyacentes, para ello es necesario usar los atributos colspan (si queremos
expandir una celda hacia la derecha) o rowspan (si queremos expandir la
celda hacia abajo). El valor que toman estos atributos es el número de celdas
que queremos que ocupe la celda a la que le estamos poniendo el atributo,
así:
<table>
<tr>
<td>Celda uno</td>
<td>Celda dos</td>
</tr>
<tr>
<td colspan=”2”>Esta celda ocupa el espacio de dos celdas a lo ancho</td>
</tr>
</table>
<table>
<tr>
<td>Celda uno</td>
<td rowspan=”2”> Esta celda ocupa el espacio de dos celdas a lo alto </td>
</tr>
<tr>
<td>Celda dos </td>
</tr>
</table>
9 Elementos de bloque y elementos en línea
Todos los elementos html tienen un valor de “display” (la forma en que
se muestra) por defecto. Este suele ser de dos formas:
Bloque: estos elementos siempre se muestran en una nueva línea
y ocupan todo el ancho disponible. Los elementos <div>, <h1> -
<h6>, <p> o <form>, entre otros, son de este tipo.
El elemento <div> es comúnmente utilizado para agrupar
contenidos en un bloque de manera que se le pueda aplicar
estilo como una unidad.
Línea: estos elementos se muestran en la misma línea donde son
utilizados y sólo ocupan el ancho necesario para que quepa su
contenido. Los elementos <span>, <a> o <img>, entre otros, son
de este tipo.
El elemento <span> es comúnmente utilizado para aplicar estilo a
una parte del contenido de una línea.
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
10 Formularios
Los formularios se utilizan para poder recabar información que aporta el
usuario. Lo delimitamos con la etiqueta <form> … </form>
La etiqueta <form> tiene dos atributos principales:
El atributo action define dónde se mandará la información
recabada en el formulario, opciones habituales son pasarla a
otro archivo capaz de procesar esa información
(action=”guardar.php”) o enviarla por correo electrónico
(action=”mailto:
[email protected]”).
El atributo method que especifica de qué manera se mandarán
los datos a su destino. Tenemos dos opciones, method=”get”
enviará la información mostrándola en la barra de direcciones,
por lo que no es segura. Method=”post” no muestra la
información en la barra de direcciones y además permite enviar
mayor cantidad de información, por lo que es mucho más
recomendable.
Un formulario contiene elementos propios del formulario que permiten
introducir información. Entre ellos:
<input /> es el elemento básico de introducción de datos. El atributo
type permite definir qué información y cómo se introduce, el atributo name
permite identificar con un nombre cada campo al que el usuario asignará un
valor, es imprescindible para que se envíe la información. El atributo value nos
permitirá definir, en algunos casos, un valor seleccionable por el usuario.
<form>
Nombre: <input type="text" name="nombre" /><br /> <!-- Campo de texto -->
Contraseña: <input type="password" name="lastname" /> <!-- Campo de
contraseña -->
<input type="radio" name="genero" value="hombre" checked /> Hombre<br />
<input type="radio" name="genero" value="mujer" /> Mujer
<!-- Campo de sel ecci ón excl usi va de opci ones, el atri buto val ue i ndi ca el
valor asi gnado al campo género que ha seleccionado el usuari o. El atri buto
checked i ndi ca si al guna de l as opci ones aparece sel ecci onada por defecto -->
<input type="submit" value="Submit" />
<!-- Botón que acti va la acci ón programada para l os datos recabados en el
formulari o. Esta acci ón se determi na en el atributo acti on de la etiqueta form -->
<input type="reset" /> <!-- Es te botón resetea el formul ari o a sus valores por
defecto -->
<input type="checkbox" name="vehículo1" value="Bici" /> Tengo una bici<br>
<input type="checkbox" name="vehículo2" value="Coche" />Tengo un coche
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
<!-- Campo de sel ecci ón no excl usi va de opci ones (el usuari o puede
sel ecci onar más de una), el atri buto val ue i ndi ca el valor asi gnado al campo
asoci ado al atri buto name que ha selecci onado el usuari o. El atri buto checked
i ndi ca si al guna de l as opci ones aparece selecci onada por defecto -->
<input type="button" onclick="alert('Hola mundo!')" value="Púlsame!" />
<!-- Botón que acti va la acci ón programada en atributo al ert, el atri buto
values especi fi ca el texto que aparecerá en el botón -->
Cantidad (entre 1 y 5):
<input type="number" name="cantidad" min="1" max="5" />
<!-- Pi de un número al usuari o permi tiendo establ ecer unos lími tes con los atributos
mi n y max o incl uso un salto de un val or admi ti do a otro con el atri buto step -->
Fecha de nacimiento: <input type="date" name="cumple" max="1979-12-31" />
<!-- Pi de una fecha. El i nterfaz para el egi rla depende del navegador. Admi te
restri cci ones -->
Color: <input type="color" name="colorfav" />
<!-- Pi de un col or. El interfaz para elegi rl o depende del navegador -->
<input type="range" name="puntos" min="0" max="10" /> <!-- Es tabl ece un rango -->
<!-- Exi sten otros ti pos de input, se pueden consul tar todos en w 3school s. -->
</form>
<input> no es la única etiqueta con la que podemos solicitar
información al usuario, otras son:
<form>
<select name="coches">
<option value="volvo" selected>Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<!-- M uestra un despl egable del que podemos selecci onar una opci ón con
l os val ores indi cados en los atri butos val ue de cada uno de los el ementos option
conteni dos en el el emento sel ect. El atri buto selected i ndi ca qué opción queda
sel ecci onada por defecto -->
<textarea name="mensaje" rows="10" cols="30">
El texto incluido aquí aparecerá por defecto en el campo de texto.
</textarea>
<!—Defi ne un campo de texto mul tilinea con las dimensi ones especi fi cadas
en l os atri butos row s y col s -->
<!-- Exi sten otros el ementos de formulari o, se pueden consul tar en
w 3school s. -->
</form>
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
La etiqueta <fieldset> … </fieldset> permite agrupar campos del
formulario en un bloque delimitado por una línea. Se le puede poner un título
al grupo utilizando el elemento <legend> título </legend> justo después del
<fieldset>.
<form action="action_page.php">
<fieldset>
<legend>Datos personales:</legend>
Nombre:<br /> <input type="text" name="nombre" /> <br />
Apellido:<br /> <input type="text" name="apellido" /> <br /><br />
<input type="submit" />
</fieldset>
</form>
11 Multimedia
Multimedia en la web implica audio, video y animaciones. Los
elementos multimedia se almacenan en archivos con un formato concreto:
Video: Ogg, Webm o MP4.
Audio: Ogg, Wav o MP3.
Video: Se puede usar la etiqueta <video> para incorporar video desde
un archivo, de la siguiente forma:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
El navegador no soporta video.
</video>
El atributo controls se usa para que el navegador muestre los controles
en la ventana de vídeo, mientras que width y height permiten dimensionar la
ventana que muestra el video. Puede usarse el atributo autoplay (sin valores)
para que el video comience a reproducirse en cuanto cargue la página, sin
esperar a que el usuario pulse el botón de reproducir.
El elemento <source> permite especificar distintos orígenes para el
video, el navegador reproducirá el primero que pueda.
El texto incluido entre las etiquetas <video> y </video> sólo se mostrará si
el navegador no soporta la etiqueta <video>.
Se pueden incorporar vídeos desde Youtube utilizando el código que la
propia plataforma pone a disposición del usuario en cada vídeo:
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
Audio: Se puede usar la etiqueta <audio> para incorporar audio desde
un archivo, de manera similar a la etiqueta <video>:
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
El navegador no soporta el elemento audio.
</audio>
Otros: Se pueden mostrar otros elementos (PDF, SWF,…) en el navegador
si este tiene instalados los plug-in adecuados. Para ello usamos la etiqueta
<object> de la siguiente forma:
<object width="400" height="50" data="bookmark.swf"> </object>
12 El elemento <head>
El elemento <head> es un contenedor para metadatos, es decir,
información sobre la página web que no es la información contenida en la
página web. Esta información no se mostrará en la página (salvo el título,
contenido en la etiqueta <title>).
Etiquetas útiles dentro de <head> son:
<style>, permite definir información de estilo, mediante CSS, para
la página:
<style>
body {background-color: blue;}
h1 {color: red;}
p {color: blue;}
</style>
IES Aldebarán. Fuensalida
1º CFGS ASIR. Lenguajes de Marcas y Sistemas Gestores de la Información HTML
<link>, permite enlazar a hojas de estilo externas:
<link rel="stylesheet" href="mystyle.css">
<meta>, permite especificar metadatos tales como el juego de
caracteres a usar, descripción de la página, palabras clave,
autor u otros. Estos datos son usados por los navegadores,
motores de búsqueda y otros servicios web:
<meta charset="UTF-8"> <!-- Defi ne el conjunto de caracteres a usar -->
<meta name="description" content="Fábrica de calzados"> <!-- Defi ne l a
descri pci ón de l a pági na w eb -->
<meta name="keywords" content="calzado, venta, zapatos, zapatillas">
<!-- Defi ne palabras cl ave para que los motores de búsqueda i ndexen la
pági na -->
<meta name="author" content="Alfonso Patiño"> <!-- Defi ne el autor de
la página w eb -->
<script>, permite definir scripts usados en la página.
<script>
function miFuncion {
document.getElementById("ejemplo").innerHTML = "¡Hola JavaScript!";
}
</script>
… <!-- en body -->
<p id="ejemplo">un párrafo</p>
<button type="button" onclick="miFuncion()">prueba</button>
IES Aldebarán. Fuensalida
