Este lenguaje que nos permite hacer las páginas web tiene su origen en el trabajo desarrollado por Tim Berners Lee, y su significado es: HyperText Markup Language y no es otra cosa que un lenguaje que trabaja fundamentalmente con etiquetas que nos permite introducir las diferentes comandos para que sean interpretados por el navegador (Internet Explorer, Mozilla Firefox, Google Chrome, Opera, o Safari entre los más populares). Para escribir estas etiquetas podemos usar cualquier procesador de palabras, eso si guardando el archivo como html. Ahora empecemos a conocer un poco mas acerca de este lenguaje y aunque me podrías decir que muchos editores hacen todo este trabajo de etiquetas por ti, verás que si no conocemos un poco más de este lenguaje, más adelante podrías tener algunas dificultades al no conocer el corazón de este lenguaje. Así que empecemos.
link original de la imagen: http://www.deviantart.com/download/171035515/I_Know_HTML_by_Audiofeeline.jpg
Documentos HTML
Los comandos del lenguaje HTML están basados en etiquetas (en inglés tags) , para introducir estas ordenes deberás hacerlo con los signos menor que(<) y mayor que (>) Un comando se abre o se cierra. Para que puedas entender esto imagínate cuando pichas el interruptor de energía, si quieres tener luz deberás tocar el interruptor y cuando ya no lo necesitas debes apagarlo, por ejemplo cuando quieras tener el comando negrita simplemente debes anteponer a la palabra o frase la etiqueta <b> y cuando ya termines debes colocar </b> En otras palabras para desactivar una orden debes usar el carácter / (barra inclinada seguida del comando.
Es conveniente además que todas las etiquetas las escribas en minúsculas. Los archivos HTML son sencillos archivos de texto que deben guardarse con la extensión htm o html.
Estructura de un documento HTML [1]
Todas las páginas web tienen la siguiente estructura:
<html>
<head>
<title>Primera página</title>
</head>
<body>
</body>
</html>
En la primer linea encontramos la etiqueta <html>. Esta le indica al cliente que comienza un documento HTML.
Luego viene <head>, la cabecera, 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, es lo que veremos como título de la ventana en los navegadores que lo permitan y como se conocerá nuestra página en algunos buscadores y en la lista de favoritos de los usuarios (es importante pensar bien el título del documento).
Tras la cabezera viene <body>, el cuerpo, que es donde se coloca la información que queremos mostrar en la pantalla principal del navegador.
Comandos básicos de formateo de texto
- <p>...</p>
- Indica un comienzo de párrafo. Tiene como opciones align="center" ,"left" o "right", para centrar o alinear a derecha o izquierda el texto. Cada comienzo de párrafo deja un espacio separador.
- <h1>...</h1>
- Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal. El mas importante (grande) es <h1>, luego <h2> y así hasta <h7>.
- <center>...</center>
- Permite centrar.
- <pre>...</pre>
- Representa el texto encerrado en ella con un tipo de letra de paso fijo.
- <blockquote>...</blockquote>
- Para dejar márgenes tanto a izquierda como a derecha (sangrar).
- <br>
- Cuando escribimos un documento HTML los retornos de carro no tienen ningún efecto (salvo si están contenidos bajo la directiva <pre>). Agrupaciones de más de un carácter en blanco se traducen en un solo carácter blanco.
- <hr>
- Inserta una linea horizontal o separador. De ellos pueden modificarse varios atributos:
- size="num", "%"
- grosor de la barra horizontal, en pixels o el porcentaje del ancho de página.
- width="num"
- anchura de la barra horizontal en pixels.
- align="..."
- alineamiento de la barra, puede valer left, right o center .
- noshade
- elimina el aspecto tridimensional .
Cambiando el estilo de letra
Todas estas etiquetas nos permiten cambiar el aspecto del tipo de letra que estemos utilizando.
- <b>...</b>
- Pone el texto en negrita.
- <i>...</i>
- Representa el texto en cursiva.
- <u>...</u>
- Para subrayar algo.
- <s>...</s>
- Para tachar.
- <tt>...</tt>
- Permite representar el texto en un tipo de letra de paso fijo.
- <sup>...</sup>
- Letra superíndice.
- <sub>...</sub>
- Letra subíndice. [1]
Enlaces
El HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que tienen en común es que todos poseen enlaces.
Un enlace es una zona de texto o gráfico que al ser seleccionado nos traslada a otra posición dentro del documento actual o a otro documento, que puede encontrarse en el mismo ordenador o en otro de cualquier parte del planeta. Son los enlaces lo que hacen de la World Wide Web o telaraña lo que es.
Para incorporar un enlace hay que utilizar esta etiqueta <a>. Todo lo que encerremos entre <a> y </a>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones:
- El texto aparecerá subrayado y de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace.
- Al pulsar sobre el enlace, se abrirá en el navegador el documento al que apuntaba el enlace.
<a href="dirección">Púlsame</a>
La dirección estará en formato URL (Uniform Resource Locator).
servicio://máquina/ruta/fichero
Donde el servicio podrá ser uno de los siguientes:
- http
- Es el servicio invocado para transmitir páginas web y el que usaremos normalmente en los enlaces.
- https
- Es una innovación sobre el anterior, que nos permite acceder a servidores (generalmente comerciales) que nos ofrecen el uso de técnicas de encriptación para proteger los datos que intercambiemos con él de terceras personas.
- ftp
- Permite trasmitir ficheros desde servidores de ftp anónimo. Si no le pedimos un fichero sino un directorio, en general el navegador se encargará de mostrarnos el contenido del mismo para que podamos escogerlo cómodamente. Utilizando la @ podremos acceder a servidores privados.
- mailto
- Para poder mandar un mensaje. Por ejemplo, la URL
mailto:iesgaviota@averroes.cec.junta-andalucia.es
mandaría un mensaje a nuestro Instituto. - news
- Para poder acceder a grupos de noticias. Se indica el servidor y el grupo. Por ejemplo
news://news.cica.es/es.comp.demos
nos conectaría con el grup es.comp.demos en el servidor del CICA.
La dirección de la máquina puede ser su IP o la DNS.
La ruta es una serie de directorios separados por el símbolo /, que es el utilizado en UNIX (el sistema operativo más extendido en los servidores de Internet).
Cuando queremos acceder a un fichero situado en la misma máquina que la página web que estamos creando, no es necesario ni recomendable, escribir toda la ruta hasta el fichero, bastará relativizar todos los enlaces al directorio actual. Esto quiere decir que no tendremos que escribir:
<a href="http://averroes.cec.junta-andalucia.es
/ies_gaviota/pagina2.html">
Si el fichero al que queremos acceder está en el mismo directorio, bastará con escribir:
<a href="pagina2.html">
Y si esrá en otro directorio, lo nombraré de forma relativa al directorio actual de esta forma:
<a href="otro_directorio/pagina2.html">
o bien de esta otra:
<a href="../../otro_directorio/pagina2.html">
donde los dos puntos (..) se utilizan para acceder al directorio padre.
Anclas
Como dijimos, es posible acceder a una posición del documento HTML. Para hacerlo, primero debemos especificar el lugar del documento al que queremos acceder:
<a name="ancla">
Para poder acceder a ese lugar incluimos el enlace de esta manera:
<a href="#ancla">Vamos a ancla</a>
También podemos acceder a anclas situadas en documentos remotos. Para ello añadiremos el nombre del ancla al URL así:
<a href="enlaces.html#ancla">Vamos a ancla en los enlaces</a>
Listas
Existen varios tipos de listas en HTML, todas ellas se pueden meter unas dentro de otras formando árboles, y siguen el siguiente formato:
<tipo_lista><li>Primer elemento
<li>Segundo elemento
</tipo_lista>
<tipo_lista> puede ser :
- <ul>
- Nos permite presentar listas de elementos sin orden alguno. Cada elemento de la lista irá normalmente precedido por un círculo.
La etiqueta <ul> admite estos parámetros:
- compact
- Indica al navegador que debe representar la lista de la manera más compacta posible.
- type="disc", "circle", "square"
- Indica al navegador el dibujo que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <li>.
- <ol>
- Nos permite presentar listas de elementos ordenados de menor a mayor. Normalmente cada elemento de la lista irá precedido por su número o letra en el orden.
La etiqueta <ol> admite estos parámetros:
- compact
- Indica al navegador que debe representar la lista de la manera más compacta posible.
- type="1", "a", "A", "i" o "I"
- Indica al navegador el tipo de numeración que precederá a cada elemento de la lista. Para mayor flexibilidad se admite también como parámetro de <li>.
- start="num"
- Indica al navegador el número por el que se empezará a contar los elementos de la lista.
La etiqueta <li> admite el atributo value="num", que actúa como start pero a partir de ese elemento.
- <dl>
- Este tipo de lista que no utiliza la etiqueta <li>. Tiene como objetivo presentar una lista de definiciones, de modo que tiene que representar de manera distinta el objeto definido y la definición. Emplearemos la etiqueta <dt> para el objeto definido y <dd> para la definición.
La etiqueta <dl> sólo admite como parámetro el ya conocido compact, que tiene el mismo comportamiento que con los otros dos tipos de lista anteriores.
Incluyendo imágenes
Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <img> de esta manera:
<img src="fichero_grafico" alt="descripcion">
El parámetro src especifica el nombre del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF y el JPG. La últimas versiones de Netscape y Explorer aceptan también el formato PNG.
El parámetro alt especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) o en el supuesto de que el usuario los haya desactivado. Es por todo eso que conviene ponerlo siempre. Además algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen.
Existen dos atributos que, aunque opcionales, también conviene indicar siempre: width="num" y height="num", la anchura y la altura del gráfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto. Estos atributos también nos pueden valer para ampliar o reducir el tamaño original de las imágenes, poniendo el valor en pixel o el % del ancho y alto con que queremos ver la imagen en el navegador.
Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro align, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:
- align="top"
- Coloca el punto más alto de la imagen coincidiendo con más alto de la línea de texto actual.
- align="middle"
- Alinea el punto medio (en altura) de la imagen con la base del texto.
- align="bottom"
- Por defecto Alinea el punto más bajo de la imagen con la base del texto.
- align="left"
- Coloca la imagen a la izquierda del texto.
- align="right"
- Coloca la imagen a la derecha del texto.
El atributo hspace="num" indica el espacio en blanco, en pixel, que se insertará a derecha e izquierda de la imagen y vspace="num" el espacio por encima y debajo de la imagen.
Imágenes y enlaces
Suele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por medio del parámetro border podremos alterar el grosor de ese borde o incluso eliminarlo poniéndolo a cero.
<a href="ruta/fichero"><img src="imagen" border="0"></a>
JPG o GIF
Una buena regla general es usar JPG cuando la imagen sea una foto y cuando sea un logotipo, letras, o un dibujo utilizar GIF. Lo principal es que la imagen ocupe lo mínimo posible (una imagen de más de 50k es muy grande para Internet) y que tenga una calidad aceptable. Un GIF de 256 colores generalmente es un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar reducida a menos de la mitad.
Si hubiese que poner una imagen grande no la pondremos directamente en la página, pondremos un versión reducida de unos 150 x 100 pixels con un enlace a la grande, e indicaremos cuánto ocupa la grande.
Tablas
Las tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros align.
- La tabla está contenida entre las etiquetas <table> y </table>.
- Cada fila de la tabla está delimitada por <tr> y </tr>
- Cada celda está determinada por las etiquetas <td> y </td>.
- Las etiquetas <th> y </th> sirven para indicar que el texto contenido es la cabecera de la columna. Las cabeceras de la tabla no son obligatorias.
- La etiquetas <caption> y </caption> delimitan el título de la tabla.
Una tabla con 2 filas y 3 columnas se declarará así:
<table><tr> <td>1,a</td> <td>1,b</td> <td>1,c</td> </tr>
<tr> <td>2,a</td> <td>2,b</td> <td>2,c</td> </tr>
</table>
Los atributos de <table> son:
- border="num"
- Especifica el grosor del borde que se dibujará alrededor de las celdas. Por defecto es cero, lo que significa que no dibujará borde alguno.
- cellspacing="num"
- Define el número de pixels que separarán las celdas.
- cellpadding="num"
- Especifica el número de pixels que habrá entre el borde de una celda y su contenido.
- width="num", "%"
- Especifica la anchura de la tabla. Puede estar tanto en pixels como en porcentaje de la anchura total disponible para ella (pondremos "100%" si queremos que ocupe todo el ancho de la ventana del navegador).
- align="..."
- Alinea la tabla a izquierda ("left"), derecha ("right") o centro ("center").
- bgcolor="#xxxxxx"
- Colorea todo el área de la tabla con el color indicado. Ver colores en Letras y colores.
Definir las filas
Ahora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos:
- align="..."
- Alinea el contenido de las celdas de la fila horizontalmente a izquierda("left"), derecha ("right") o centro ("center")
- valign="..."
- Alinea el contenido de las celdas de la fila verticalmente arriba ("top"), abajo ("bottom") o centro ("middle").
Definir las celdas
Por último, nos queda definir cada celda gracias a la etiquetas <td> y <th>. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:
- align="..."
- Alinea el contenido de las celdas de la fila horizontalmente a izquierda("left"), derecha ("right") o centro ("center")
- valign="..."
- Alinea el contenido de las celdas de la fila verticalmente arriba ("top"), abajo ("bottom") o centro ("middle").
- width="num", "%"
- Especifica la anchura de la celda . También se puede especificar tanto en pixels como en porcentaje, teniendo en cuenta que, en este último caso, será un porcentaje respecto al ancho total de la tabla (no de la ventana del navegador).
- nowrap
- Impide que, en el interior de la celda, se rompa la línea en un espacio.
- colspan="num"
- Especifica el número de celdas de la fila situadas a la derecha de la actual que se unen a ésta (incluyendo la celda en que se declara este parámetro). Es por defecto uno. Si se pone igual a cero, se unirán todas las celdas que queden a la derecha.
- rowspan="num"
- Especifica el número de celdas de la columna situadas debajo de la actual que se unen a ésta.
- bgcolor="#xxxxxx"
- Colorea todo el área de la celda con el color indicado. Ver colores en Letras y colores.
Título de la tabla
Por medio de la etiqueta <caption> se indica el título de una tabla. Esta etiqueta admite sólo un parámetro: align, que es por defecto top. Si lo definimos como bottom el título se colocará al final de la tabla en lugar del comienzo.
Tipos de letra, tamaño y colores
Gracias a la etiqueta <font> vamos a poder cambiar el tamaño, el tipo y el color de las letras en nuestras páginas.
Cambio de color
Para hacerlo se utiliza el parámetro color. La manera de especificarle el color es común a todas las etiquetas HTML: bien indicando el nombre, si es un color normal (Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua),
<font color="red">Estoy en rojo</font>
o bien especificando la intensidad de rojo, verde y azul (código RGB) del mismo.
<font color="#xxxxxx">color</font>
Donde cada x es un dígito hexadecimal, del 0 a la F. Las dos primeras x corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Por ejemplo: para el blanco pondremos todos los valores al máximo, #FFFFFF; y para el rojo, #FF0000.
<font color="#FF0000">Estoy en rojo</font>
Tamaño de la letra
El parámetro utilizado para indicar el tamaño es size. Puede tomar valores desde 1 a 7, siendo el tamaño por defecto 3.
<font size="2">Tamaño 2</font>
También se puede utilizar los modificadores + y - para indicar un incremento (o decremento) relativo del tamaño del tipo de letra. Así, por ejemplo, si indicamos que queremos un tamaño de "-2" estaremos pidiendo al navegador que nos muestre el tipo de letra dos veces más pequeño.
<font size="+3">Tamaño 6</font>
Tipo de letra
Por último, podemos especificar el nombre del tipo de letra que queremos utilizar gracias al parámetro face. Como en principio no tenemos manera de saber que tipo de letra tiene instalado el ordenador del usuario que está viendo nuestras páginas, podemos indicar más de uno separado por comas. Si el navegador no encuentra ninguno seguirá utilizando el que tiene por defecto:
<font face="Helvetica,Arial,Times">No sé como voy
a salir exactamente</font>
La cabecera
Además del título de la página, uno de los elementos que se pueden incluir aquí son los meta. Entre otras cosas, sirven para indicar propiedades de la página como pueda ser el nombre de su autor. Por ejemplo,
<meta name="autor" content="José Fernando">
Estas son las propiedades más comunes:
- author
- Autor de la página.
- generator
- Herramienta utilizada para hacer la página.
- classification
- Palabras que permite clasificar la página dentro de un buscador jerárquico.
- keywords
- Palabras clave por las que se encontrará la página en los buscadores.
- description
- Descripción del contenido de la página.
El cuerpo [1]
La etiqueta <body> admite los siguientes parámetros :
- bgcolor="#xxxxxx"
- Permite definir el color de fondo de la página.
- background="imagen.gif"
- Permite poner un gráfico de fondo para la página. No se debe poner una imagen muy "pesada" de fondo, no mas de 15k. Ni olvidar verificar que no dificulte la lectura del texto.
- bgproperties="fixed"
- El gráfico definido como fondo de la página permanecerá inmóvil aunque utilicemos las barras de desplazamiento.
- text="#xxxxxx"
- Cambia el color del texto.
- link="#xxxxxx"
- Cambia el color de un enlace no visitado (por defecto azul).
- vlink="#xxxxxx"
- Cambia el color de un enlace ya visitado (por defecto púrpura).
- alink="#xxxxxx"
- Cambia el color que toma un enlace mientras lo estamos pulsando (por defecto rojo).
- leftmargin="num", topmargin="num"
- Especifican el número de pixels que dejará de margen entre el borde de la ventana y el contenido de la página. Se suelen utilizar para dejarlos a cero.
- marginwidth="num", marginheight="num"
- Más o menos equivalentes a los anteriores, pero éstos funcionan en Netscape.
No resulta recomendable cambiar los colores del texto y enlaces a no ser que exista alguna dificultad al leerlos por haber cambiado el fondo, ya que en muchas ocasiones el usuario ha podido cambiarlos en las opciones de su navegador y estarán ya a su gusto.
Link original de la imagen: http://aprendiendoprogramacion.files.wordpress.com/2010/10/html-cheat-sheet.png
Evolución de HTML
En la actualidad tenemos varias versiones de este lenguaje,r ecientemente ha aparecido el HTML 5, que aunque no todos los navegadores lo soportan nos muestra nuevas posibilidades de desarrollo de esta magnifica herramienta. He aquí un esbozo de sus posibilidades:
Link original de la imagen: http://hardsoftgeek.com.ar/wordpress/wp-content/uploads/2009/07/preview.gif
Actividades
1. Ahora que ya conoces un poco mas de este lenguaje básico para escribir páginas en la web, realiza el siguiente taller, para eso debes abir el blog de notas de Windows, y tu navegador preferido, carga el archivo paso a paso a medida que vas creando las diferentes etiqeutas para que vayas viendo la forma en que interactuan estas ordenes con tu navegador.
<HTML
<HEAD>
<Title>Bienvenidos a mi primera página web</title>
</head>
<body>
<h1>Tutorial para trabajar HTML en nuestra clase</h1>
Vamos a empezar con este curso de HTML, en él estaremos viendo paso a paso como se diseña una página web, lo que nos permitirá estar de mejor forma para hacer nuestros propios blogs.
<p> Empezamos haciendo un reconocimiento general de este lenguaje creado por el señor Tim Berners Lee y que se ha convertido en el estándar en Internet.</p>
<p> Primero que todo toda orden que se establezca empieza con el carácter < y se cierra con >, las etiquetas se escriben en minúscula.</p>
<p> Para que puedas visualizar bien las líneas que vas introduciendo aquí en el bloc de notas, deberás ajustar esas líneas con la orden: menú formato y allí buscas ajustar líneas. de lo contrario todo el texto que introduzcas sobrepasara
tu campo visual y no tendrás mayor dominio sobre él.</p>
<p> Como has empezado a ver cada párrafo se empieza con la etiqueta, <> y dentro de ellas la letra p es decir si das un enter para bajar los espacios simplemente cuando visualices tu página en el navegador no tendrán ningún efecto. No
olvides que cada vez que quieres terminar un comando, en este caso el párrafo debes cerrarlo anteponiéndole el carácter / (barra inclinada) </p>
<h2> Sugerencias básicas</h2>
<p> 1. Cuando cargues el archivo en el navegador, cada vez que actualices el archivo simplemente oprima la tecla f5 para que veas de inmediato los cambios</p>
2. Para crear titulos como el principal la etiqueta es <h1> </p>
3. Si quieres sacar un subtitulo debes hacerlo con la etiqueta <h2> no olvides que una vez termines el subtitulo deberás "apagar" la etiqueta con la orden </h2>
4. si quieres colocar negrita a una palabra o una oración deberás usar la orden <b> negrita</b>
5. para que actives la letra cursiva simplemente con la etiqueta <i> cursiva</i>
<p>6. También podras combinar las etiquetas por ejemplo <b><i> letra negrita y cursiva </b></i> </p>
<h2> Alineación de párrafos</h2>
<p> Como ya has visto hasta ahora la letra <b>p</b> nos ha servido para hacer los diferentes párrafos, procede de la palabra "Paragraph", se usa su inicial en este caso, pero si queremos alinear ese párrafo, es decir centrarlo, que se
margine a la derecha o la izquierda deberás usar el atributo <b>Align</b> </p>
<p> ASi para alinear un párrafo a la derecha se introduce la siguiente instrucción: <p align="right">. También puedes usar los valores <b> Center, justify y left</b> sin embargo por omisión y sin necesidad de que tengas que dar la orden
los párrafos vienen ordenados a la izquierda y desordenados a la derecha.. Recuerda también que algunos navegadores no interpretan bien la orden <b>justify </b> Ejemplo: </p>
<p align="right"> Este párrafo está centrado. </p>
</body>
</html>08:22 p.m. 11/02/2012
2. TE invito a que veas el siguiente video, para que explores más posibilidades:
Fuentes
[1] http://www.juntadeandalucia.es/averroes/iesgaviota/informatica/html.html
