El código HTML
Elena Sánchez Guitart
Documentación Grupo G
Facultad de Traducción e Interpretación
Universidad de Granada
Índice:
1. Código HTML
1.1. ¿Qué es el código HTML y para qué se utiliza?
1.2. Historia
2. Funcionamiento del código HTML
2.1. Etiquetas
2.2. Tipos de etiquetas
3. Medios para crear páginas web con el código HTML
3.1. Bloc de notas y Microsoft Office Word 2007
3.2. Blogger
1. Código HTML
1.1. ¿Qué es el código HTML y para qué se utiliza?
HTML es la sigla para “hypertext markup language”, que en español quiere decir “lenguaje de marcado de hipertexto” y es el lenguaje de marcado más usado en el mundo.
El código HTML es un lenguaje que se utiliza para la creación y diseño de las páginas web. Se trata de un lenguaje sencillo basado en las etiquetas cuya función es indicarle al navegador la forma en la que mostrará la información (texto, enlace, audio, tablas…). El lenguaje HTML define la estructura de la página que estamos diseñando.
1.2. Historia del código HTML
Nacimiento del códgio HTML:
Todo comenzó a principios de los años 90, cuando Tim Berners-Lee, un trabajador del CERN (European Organization for Nuclear Research), revolucionó el mundo tecnológico con la invención de la World Wide Web, el código HTML, el protocolo HTTP, que permite la transferencia de la información de las páginas web, y el direccionamiento URL.
La World Wide Web surgió de la necesidad de enlazar la información en el CERN, donde era fundamental estar al día de los avances y nuevos descubrimientos. Berners-Lee se dio cuenta de esta necesidad y propuso la creación de un sistema de hipertexto donde se podían enlazar varios documentos relacionados. Su principal objetivo era facilitar el trabajo de investigación en el CERN, crear un espacio de trabajo coordinado y unificar la información dentro de la organización científica de Ginebra.
En 1989 publicó Information Management: A proposal, donde presentó por primera vez la idea del hipertexto. Berners-Lee proponía en este informe un sistema donde cualquier persona pudiera acceder a cualquier tipo de información, estando esta enlazada mediante hipervínculos (links).
Esta propuesta fue descrita como “vaga pero excitante…”, pero esta “vaguedad” fue hecha realidad gracias a los esfuerzos de Tim Berners-Lee y Robert Cailliau, su colaborador. Crearon la World Wide Web, aunque la primera página web estaba lejos de parecerse a las que conocemos hoy en día (http://info.cern.ch/hypertext/WWW/TheProject.html).
Evolución:
El lenguaje HTML, como he explicado anteriormente, se desarrolló para dar forma a la información de las páginas web que vemos en la pantalla de nuestros dispositivos; es el principal lenguaje de las páginas web. Podríamos considerarlo un manual de instrucciones que el ordenador interpreta a la hora de mostrarnos la web en cuestión.
El código HTML que utilizamos en la actualidad no es, evidentemente, el mismo que creó Berners-Lee en 1991. Este lenguaje web ha ido evolucionando a lo largo de los treinta años que han pasado desde que viera la luz en los años noventa.
HTML Tags (1991) es el primer documento donde se describen las etiquetas del código creado por Berner-Lee. En él se recoge un total de dieciocho etiquetas.
La IETF (Internet Engineering Task Force) se ocupó de estandarizar el código HTML en 1993, aunque no llegó a ser un estándar oficial. En los años siguientes se fueron corrigiendo y añadiendo nuevas etiquetas al código HTML, llegando hasta la versión HTML 4 en 1998.
Después del HTML 4 se optó por el XHTML, una versión más rigurosa del código HTML. Contra las predicciones del W3C, esta variante del HTML no salió adelante y siguieron desarrollando el HTML. La última versión es el HTML 5, que utilizamos actualmente.
El HTML 5 trajo consigo una serie de cambios como:
Mejora en cuanto a los archivos multimedia tales videos, audios, animaciones o incluso videojuegos.
Se introdujeron nuevos elementos que explicaré posteriormente.
El HTML 5, al contrario que todas las versiones de HTML anteriores, no sigue las normas establecidas por SGML (estándar que normaliza los lenguajes de marcado)
Antecedentes:
No hay duda de que Berners-Lee revolucionó todo el mundo de la informática, pero no le vino la inspiración divina, sino que se basó en dos ideas anteriores que en su momento no tuvieron mucho éxito: Memex, de Vannevar Bush y el proyecto Xanadú de Ted Nelson.
Memex:
Memex es una idea que Vannevar Bush explicó en su artículo “As we may think” (The Atlantic Monthly, 1945). Se trataba nada más y nada menos que de un ordenador (bastante primitivo sí, pero un ordenador al fin y al cabo). En este documento, Bush habla de una mesa con un teclado, palancas y una pantalla donde se proyectaría la información.
Vannevar
Bush quería crear un dispositivo donde almacenar documentos, un
dispositivo que a la vez serviría para acceder a esos mismos
archivos de manera “extremadamente rápida” (“exceedingly
speed”).
También, decía Bush, se podía añadir comentarios y notas a los
documentos.
Esta idea está directamente relacionada con la creación de Berners-Lee porque, tanto Bush como Berners-Lee, buscaban una forma de almacenar información y poder recuperarla posteriormente. La máquina Memex de Bush no salió adelante, aunque marcó el camino para el desarrollo del hipertexto y los ordenadores.
Proyecto Xanadú:
Este proyecto fue desarrollado por Ted Nelson en la década de los años 60 como mejora y evolución de la máquina Memex de Bush. Aunque su idea, igual que la de Vannevar Bush, tampoco llegó a ningún lado, era pionera en cuanto al concepto de hipertexto.
El proyecto Xanadú consistía, grosso modo, en un conjunto de ordenadores conectados a una central. Estos dispositivos tendrían acceso a una cantidad ingente de documentos los cuales estarían a su vez conectados entre sí mediante enlaces e hipervínculos.
Como a la tercera la vencida, fue Tim Berners-Lee el que pudo desarrollar ambas ideas hasta dar forma a la World Wide Web y, a su vez, al código HTML con el que se crean la mayoría de las páginas web.
2.- Funcionamiento del Código HTML
Los principales elementos de este lenguaje de marcado son las etiquetas y los atributos.
Las etiquetas sirven para crear elementos HTML, que están formados por:
Etiqueta de inicio: estas etiquetas se escriben entre los símbolos <> (antilambdas dobles). Por ejemplo: <head>1.
Atributo: aportan información adicional (sobre textos, imágenes, enlaces…) y van en la etiqueta de inicio
El contenido es el texto que hay, por ejemplo: <p> Me llamo Elena</p>. En este caso, el contenido es “Me llamo Elena”.
Etiqueta de cierre: es igual que la de inicio, pero lleva una barra (/).
2.1. Etiquetas
A continuación voy a explicar cuáles son las etiquetas más importantes, su funcionamiento y para qué sirven.
<html> y </html>: la primera da inicio al documento indicando que es un archivo HTML. La segunda pone fin a dicho documento.
<head>: Se utiliza para añadir el título.
<body>: Esta etiqueta marca el cuerpo del texto.
<p>: Se usa al inicio de cada párrafo.
<h1>,<h2>,<h3>,<h4>,<h5>,<h6>: Señalan los encabezamientos, siendo <h1> el más importante y <h6> el menos importante.
<br>: marca un salto de línea.
<!--...-→: esta etiqueta sirve para agregar comentarios. Estos no se pueden visualizar en la página web que estas creando, pero puedes ver los comentarios en el código fuente de la página web2.
<a>: se utiliza para los enlaces y suele ir seguido por el atributo href. El valor del atributo indica el destino del enlace. (<a href=””>)
Para la imágenes se utiliza <img> pero debemos indicar la dirección de la imagen en cuestión (src=””) y podemos variar su tamaño con (width=”” y heigth=”” [anchura y altura]). También le podemos añadir bordes con border=”” (hay que indicar un número de grosor del borde).
La altura y anchura de una imagen también se puede modificar con un “style”. El código correcto sería: style=”width:””px;heigth:””px”.
Si incluimos la etiqueta <img> para las imágenes dentro de la etiqueta <a> propia de los hipervínculos, la imagen pasará a ser un enlace hacia otra página.
La etiqueta <hr> crea un línea divisoria en el documento y no necesita etiqueta de cierre.
Para editar el texto escrito (subrayar, tachar, resaltar, etc.) hay una gran variedad de etiquetas (de apertura y de cierre):
- <b> pone el texto en negrita (bold).
- <u> subraya el texto.
- <em>pone la letra en cursiva.
- <sub> y <sup> crean subíndices y superíndices respectivamente.
- <mark> marca el texto con algún color.
Para citar textos cortos utilizamos <q>, cuando son más largos se utiliza <blockquote>. Cuando estamos nombrando una obra, la etiqueta utilizada es <cite>.
Para facilitar las cosas, podemos usar la etiqueta <abbr title=””> para explicar un acrónimo o abreviatura.
Crear una tabla en HTML puede parecer complicado a priori, pero realmente no tiene mucho misterio.
- La etiqueta <table> define la table y si utilizamos el atributo “border”, añadimos un borde a la tabla y podemos seleccionar su grosor.
- <tr> es la etiqueta que se utiliza para indicar las filas de la tabla. IMPORTANTE: hay que cerrar la etiqueta para no escribir todo en la misma fila.
- Cada celda de la tabla se divide con la etiqueta <td> y también ha de llevar etiqueta de cierre.
- Para que una celda ocupe más de una columna se utiliza el atributo colspan (<td colspan=””>) y para que ocupe más de una fila se utiliza del mismo modo el atributo rowspan.
- Para añadir un título a la tabla, antes de la primera fila utilizamos la etiqueta <caption>.
Las listas se pueden crear de dos formas:
- Las listas no ordenadas se crean a partir de la etiqueta <ul>.
- Las listas ordenadas utilizan la etiqueta <ol>
En ambos casos, cada elemento de la lista se marca con <li> y con el atributo type podemos seleccionar cómo queremos enumerar esa lista (1,a,I,i…).
<div> afecta a un bloque, es decir, los elementos que se encunetran en esta etiqueta forman un bloque. Suele ir acompañado de CSS (los explicaré más tarde).
La etiqueta <span> es parecido a la anterior, pero define un texto breve en vez de un bloque entero.
2.2. Los atributos
Los atributos añaden información al los elementos que componen el código HTML. Se agregan siempre en en la etiqueta de inicio y siguen la misma estructura → Nombre=”valor” (ej.: rowspan=”2”).
Lang: define la lengua de la página web. Se añade en la etiqueta inicial (HTML) y el idioma se indica con dos letras (es para español, en para inglés…). Si se trata de un dialecto se especifica con otras dos letras (es-ES significa español de España por ejemplo).
Title: se incluye en la etiqueta de párrafo (<p>) y podemos ver el título de dicho párrafo cuando colocamos el cursor sobre el texto en cuestión.
Href: este atributo lo he explicado anteriormente, junto a la etiqueta <a>. El atributo href indica la dirección a la que nos va a llevar el hipervínculo.
Width: es el atributo que nos indica la anchura que queremos que tenga la imagen en nuestra página web. Se incluye en la etiqueta <img>.
Heigth: es el atributo que nos indica la
altura
que queremos que tenga la imagen en
nuestra página web. Al
igual que el atributo “width”, esta se incluye en la etiqueta
<img>.Hay dos formas de escribir estos atributos:
A) <img src="" width="50" heigth="50">
B) <img src="" style="width:450px;heigth:450px">
Si hay algún tipo de problema a la hora de visualizar una imagen, podemos incluir el atributo Alt dentro de la etiqueta <img>. Este atributo añade un pequeño texto a la imagen que no se puede ver.
2.3. CSS
Significa Cascading Style Sheets (su traducción literal es “hojas de estilo en cascada”) y se utiliza para diseñar y estructurar los elementos de la página web.
Cada CSS está formado por un selector que nos indica qué elemento del código HTML queremos modificar y la declaración (fuentes, color, tamaño, etc.).
CSS colores:
Hay tres formas de definir los colores en HTML:
Escribir el nombre del color (en inglés). En Internet puedes encontrar una lista de nombres de colores aceptados en este lenguaje. |
style=”color:red” |
Seguir la fórmula RGB (red,green, blue). Mediante números podemos modificar los niveles de cada color. |
style=”color:rgb (0, 250, 38)” |
Usando los valores hexadecimales de la fórmula RGB: #RRGGBB → #FF0000 sería rojo |
style=”color:#ff5500” |
Si lo que queremos es modificar el color del fondo, seguimos el mismo esquema pero debemos añadir “background-” antes de “color”. Ejemplo: style=”background-color:red”.
He hecho una demostración de cómo utilizar estos estilos:
Este sería el código que he empleado.
Y este sería el resultado obtenido.
Muchos de los CSS se añaden al principio, con la etiqueta <style> dentro de la etiqueta <head>. Primero se especifica qué elemento quieres modificar (selector), por ejemplo, al h1, y luego, entre corchetes {}, la declaración en cuestión.
Márgenes:
En el caso de los márgenes tenemos dos opciones:
Poner la declaración “margin: ...px, ...px, ...px, ...px,”. Los márgenes se suelen expresar en píxeles (px) y el primer número corresponde al margen superior y los demás siguen el sentido de las agujas del reloj (derecha, inferior e izquierda).
La siguiente opción es ir, margen por margen, es decir “margin-top: 25px”; “margin-right: 50px” y así sucesivamente.
→
→
→
Alineación:
Esta declaración funciona igual que la de margin: va dentro de la etiqueta style y hay que indicar un selector. La declaración recibe el nombre de “text-align” y podemos elegir entre centro, derecha o izquierda (center, right o left).
*Text-indent es la declaración que marca la sangría del texto y también se expresa en píxeles. Ejemplo: h1 {text-indent: 39px}.
El tipo de fuente del texto se expresa mediante “font-family” y su tamaño con “font-size” (expresado en píxeles o porcentajes)3.
3. Medios para crear páginas web con el código HTML
Lo mejor del código HTML y, seguramente, la clave de su éxito, es lo sencillo que es de utilizar (al menos la parte básica que acabo de explicar). Así que aquí os voy a explicar los medios más sencillos con los que crear una página web en HTML.
3.1. Bloc de notas
El primer método y el más sencillo que conozco es redactar el código HTML de tu página web en el bloc de notas del ordenador.
→
→
→
En Internet hay cientos de páginas y tutoriales que te explican las etiquetas, los atributos y las CSS, así que todos tenemos (gracias a Tim Berners-Lee) una amplia cantidad de información que nos podrá ayudar a redactar correctamente el código que dará lugar a nuestra página web.
Si seguimos las instrucciones de cada etiqueta y prestamos atención a su correcta sintáxis, no debemos tener ningún problema.
Es tan sencillo como guardar ese documento en vez de como documento de texto, como archivo HTML. Hay que darle, al guardar, a “todos los archivos” y al nombre del archivo le añades la extensión HTML.
Finalmente, para abrir este archivo como página web, le damos a abrir en Internet en lugar de la aplicación del bloc de notas.
Lo bueno de este método es que no es necesario instalarse ningún programa porque todos tenemos un bloc de notas en el ordenador y tampoco requiere un alto nivel en cuanto a lo que se refiere a la informática porque, como he dicho, el lenguaje HTML es simple y fácil de utilizar.
Otra de las ventajas es que, al igual que lo puedes abrir en Internet y ver tu página web, si lo abres con el bloc de notas puedes modificar el código de tu página fácilmente.
3.2. Blogger
Blogger (https://www.blogger.com) es una plataforma en la que tú puedes crear tu propia página web. Basándome en mi propia experiencia, su manejo no es tan sencillo como el del bloc de notas, pero sus posibilidades son infinitas.
Uno de los aspectos positivos de Blogger es que tú puedes redactar una de las entradas de tu página web con el lenguaje natural, como el que puedo estar utilizando yo ahora mismo.
1No importa si se escriben en mayúsculas (<HEAD>), en minúsculas (<head>) o intercalando unas y otras (<hEaD>), aunque es aconsejable usar únicamente las minúsculas.
2Para ver el código fuente de una página solamente debemos hacer clic con el botón derecho y darle a “Ver código fuente”.
3Esta es una explicación de los elementos básicos del código HTML. Las posibilidades con este lenguaje son bastantes más amplias, pero con la información recogida en este apartado se puede hacer una pagina web sencilla, pero fucnional.
