Código html

Tutoriales

En esta página podemos encontrar una guía de lenguaje html, que es la la manera en que están codificadas las páginas web estáticas.

Introducción

El lenguaje HTML es el lenguaje en el que se escriben los contenidos de las páginas web. Las siglas HTML corresponden a HyperText Markup Language. Cuando accedemos a una página web el navegador (Internet Explorer, Mozilla, Chrome, etc.) los interpreta y los muestra en la pantalla. Los documentos HTML son ficheros de texto plano, escritos en caracteres ASCII, que pueden ser editados con un editor de texto como el "Bloc de notas" de Windows. Los profesionales utilizan editores de páginas web como el Frontpage, Dreamweaver, etc. Los ficheros escritos en lenguaje HTML llevan las extensiones html o htm.

Los diferentes elementos (párrafos, encabezamientos, tablas, listas, ...) de una página web se codifican mediante etiquetas que indican al navegador cómo debe mostrarlo. Las etiquetas siempre aparecen por parejas, una para comenzar y otra para acabar. Estas etiquetas se escriben entre signos menor y mayor. Una etiqueta HTML consiste en un signo menor "<", un nombre de una directiva (Orden o comando para el navegador), seguido de los parámetros o atributos y un signo mayor ">". Para cualquier etiqueta que indica el inicio de un elemento hay otra de cierre que indica que esa directiva ya no debe actuar sobre el texto que sigue. El lenguaje HTML no diferencia entre mayúsculas y minúsculas.

Un ejemplo de esto sería:

<html>

</html>

Estructura de un documento HTML

Todas las páginas web tienen la siguiente estructura:

<html>

<head>

<title>primera página</title>

</head>

<body>

</body>

</html>

En la primera linea encontramos la etiqueta <html>. Esta etiqueta le indica al navegador que comienza un documento HTML. Luego viene <head>, la cabecera, en donde se pone información sobre el documento, que no se ve en la pantalla del navegador. Aquí puede ir el título <title> del documento, que es el texto que se verá en el navegador y en los buscadores.

Después de la cabecera viene <body> el cuerpo, que es en donde se coloca la información que se quiere que muestre el navegador.

Utilizando el "Bloc de notas" de Windows escribiremos este código:

A continuación guardamos el texto como miprueba.html para que el ordenador lo identifique como un documento escrito en este lenguaje y lo abra con un navegador. En el navegador se verá lo siguiente:

Dando formato al texto

Para crear un nuevo párrafo se usan las etiquetas <p> </p>. Tiene como opciones align="center" ,"left" o "right", para centrar o alinear a derecha o izquierda el texto. Cada nuevo párrafo deja antes un espacio de separación.

Para centrar un elemento de la página se utilizan las etiquetas <center> </center>.

Para dejar un margen (Sangrado) utilizaremos las etiquetas <blockquote> </blockquote>.

Para conseguir un salto de linea se utiliza la etiqueta <br>.

Existen etiquetas específicas para el formato de la letra. Las etiquetas <b> </b> ponen la letra en negrita, las etiquetas <i> </i> la transforman en cursiva y las etiquetas <u> </u> subrayan. Por otra parte las etiquetas <sup></sup> permiten el superíndice y las etiquetas <sub> </sub> el subíndice.

Gracias a la etiqueta <font> se puede cambiar el tamaño, el tipo y el color de la letra.

Para asignar color a la letra se utiliza el parámetro "color". Los colores se indican con sus nombres en inglés (Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua).

Con un ejemplo sería:

<font color="red">Estoy escribiendo en color rojo</font>

También se puede determinar el color especificando la intensidad de rojo, verde y azul (Código RGB) del color. Con un ejemplo sería sí:

Los dos primeros dígitos después de la almohadilla corresponden al rojo, los dos siguientes al verde y los últimos al azul. Estos valores se escriben en hexadecimal, por lo que el valor más pequeño es el 00 y el mayor el FF. El blanco corresponde al FFFFFF y el negro al 000000.

el parámetro utilizado para indicar le tamaño de la letra es "size" y puede tener un valor entre 1 y 7. Con un ejemplo sería:

<font size="2">Tamaño de la letra</font>

Se puede especificar el tipo de letra mediante el parámetro "face". Dado que se desconoce el tipo de letra que tendrá instalado el ordenador desde el que se ve el contenido web muchas veces se indica más de un tipo. Con un ejemplo sería:

<font face="Helvetica, Arial, Times">Fuente de la letra</font>

Para insertar una linea horizontal o separador se utiliza la etiqueta <hr>. Esta etiqueta admite las opciones size="12", "%" que determinan el grosor de la barra separador en pixels y la anchura de la misma en tanto por ciento del total de la pantalla.

Guía de referencia de la etiqueta <font>.

Guía de referencia del atributo Style.

Guía de referencia de la propiedad Style.

Incorporando imágenes

Para hacer visible una imagen en una página web se utiliza la etiqueta <img>. Con un ejemplo sería:

El parámetro "src" indica el nombre del fichero de imagen, con su extensión, y la ubicación de la misma (Su dirección URL).

Enlazando otros contenidos

Una de las características fundamentales del lenguaje HTML es la capacidad para enlazar diferentes contenidos, permitiendo una navegación por toda la red. Mediante las etiquetas <a> </a> podemos realizar la conexión de algún texto o imagen de la página web con los siguientes contenidos. En el caso de enlazar un texto, el código sería una cosa así:

<a href="https://sites.google.com/site/almadeherrero/">Alma de herrero</a>

En el caso de que queramos enlazar una imagen en vez de un texto lo indicaremos de esta manera:

Tablas

Las tablas nos permiten representar y ordenar los elementos de una página web en diferentes filas y columnas. El contenido de una tabla se ha de introducir entere las etiquetas <table> y </table>.

Las tablas se definen fila a fila y celda a celda, comenzando desde la celda superior izquierda. Cada fila de la tabla se indica mediante las etiquetas <tr> y </tr>. Las etiquetas <th> y </th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las etiquetas <td> y </td> indican que se trata de celdas comunes.

Un ejemplo de tabla sería la siguiente:

Formularios

El código de un formulario se introduce entre las etiquetas <form> y </form>. Los atributos de estas etiquetas son

action="" Entre comillas se indica el programa que va a tratar la información enviada con el formulario, un guión CGI o la URL mailto.

Method="" Indica el método de transferencia de la información. Post, si se envía a través del STDIO. Get, si se envía a través de la URL.

La etiqueta <input> se utiliza para la introducción de información. Junto a esta etiqueta se utilizan los siguientes atributos:

type="" Indica el tipo de infromación a introducir.

text Indica que el campo a introducir será un texto. Sus atributos son:

maxlenght="" Seguido de un valor que limita el número máximo de carácteres a introducir en ese campo.

size="" Seguido de un valor que limita el numero de carácteres a mostrar en pantalla.

value="" Indica que no hay valor inicial del campo.

Password Indica que el campo a introducir será una contraseña. Mostrará asteriscos en lugar de letras escritas. Sus atributos serán los mismos que para text.

Checkbox El campo se elegirá marcando de entre varias opciones una casilla cuadrada.

value="" Entre comillas se indicará el valor de la casilla.

checked La casilla aparecerá marcada por defecto.

Radio El campo se elegirá marcando de entre varias opciones una casilla circular.

value="" Entre comillas se indicará el valor de la casilla.

Image El campo contendrá el valor en coordenadas del punto de la imagen que haya pinchado.

Atributo obligatorio: src="" Entre comillas escribiremos el nombre del archivo de imagen.

hidden El visitante no puede modificar su valor ya que no está visible.

Se manda siempre junto al atributo value= seguido de su valor entre comillas.

Name="" Indicará el nombre que se asigna a un determinado campo.

Un ejemplo de formulario sería el siguiente:

Marcos

Incorporación de marcos.