El lenguaje HTML
HTML es el lenguaje con el que se definen las páginas web. Básicamente se trata de un conjunto de etiquetas que sirven para definir el texto y otros elementos que compondrán una página web.
El HTML se creó en un principio con objetivos divulgativos de información con texto y algunas imágenes. No se pensó que llegara a ser utilizado para crear área de ocio y consulta con carácter multimedia (lo que es actualmente la web), de modo que, el HTML se creó sin dar respuesta a todos los posibles usos que se le iba a dar y a todos los colectivos de gente que lo utilizarían en un futuro. Sin embargo, pese a esta deficiente planificación, si que se han ido incorporando modificaciones con el tiempo, estos son los estándares del HTML. Numerosos estándares se han presentado ya.
El HTML es un lenguaje de marcación de elementos para la creación de documentos hipertexto, muy fácil de aprender.
¿Qué representan las siglas H-T-M-L?
HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", y esto ya es más de lo que necesitas saber a estas alturas. En todo caso, para mantener un buen orden, vamos a explicar qué significa con mayor detalle.
Documento HTML
<HTML> <HEAD> <TITLE> <BODY>
Estructura básica de un documento HTML: Cabecera y cuerpo del documento
Tags que describen la estructura general :
1.- <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
2.- <HEAD>: Especifica el prólogo del resto del archivo. Son pocas las tags que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras tags dentro de él. En head no hay que colocar nada del texto del documento.
3.-<BODY>: Encierra el resto del documento, el contenido.
<HTML>
<HEAD>
<TITLE>Ejemplo 1</TITLE>
</HEAD>
<BODY>
MATEMATICAS
</BODY>
</HTML>
Esto quedaria asi: MATEMATICAS
Primeros pasos
<H1> <P> <BR>
1.- <H1>, <H2>, <H3>...:TITULARES: Sirven para dividir el texto en secciones.
Se pueden definir seis niveles de titulares, el texto que deseamos que sea un titular se pone entre las tags <H1> Titular </H1>. Se definen mediante las tags <H1>.....</H1> hasta <H6>.....</H6>
2.-<P>: Párrafos. En principio, sin entrar en detalles de alineación u otras características, digamos que se definen por las tags <P>.....<P>. Esta tag, en un principio, se diseñó para saltar de párrafo por lo que puede ir sola "<P>" al final de un texto indicando que a continuación se quiere una línea en blanco aunque le recomendamos que se acostumbre a utilizarla abriéndola y cerrándola.
3.-<BR>: Saltos de línea. Esta tag sirve para realizar un salto de linea, puede poner tantas como desee y realizará un salto de línea por cada una de ellas.
Con el mismo ejemplo pero agregamos los primeros pasos:
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
<H1> Mis tutoriales</H1>
<!-- Aqui va un comentario -->
<P> MATEMATICAS, esta es un página con titular,
que tiene también un párrafo y unos cuantos
saltos de línea.</P>
Uno<br>
Dos<br>
Tres<br>
</BODY>
</HTML>
Mis tutoriales
MATEMATICAS, esta es un página con titular, que tiene también un párrafo y unos cuantos saltos de línea.
Uno
Dos
Tres
Creación de enlaces
<A>
Lo característico del lenguaje HTML es el poder generar vínculos de hipertexto para enlazar con ellos todos sus documentos en web.
Para generar un enlace a otro documento necesitamos el nombre de un archivo (o su dirección URL) y el texto que servirá de punto de activación del otro documento.
Los enlaces se generan mediante la tag <A>.....</A> y, a diferencia de los vistos anteriormente, llevará siempre dentro de la tag un atributo ya sea <A HREF=""> o <A NAME="">.
1.-<A HREF="URL">.....</A>: Es el más habitual de los atributos y sirve para saltar entre diferentes URLs.
Podremos ver:
-
- Saltar en una presentación del archivo 1 al archivo 2: En el archivo 1 incluiremos la directiva <A HREF="archivo2.html">Siguiente página</a>
- Saltar de nuestra presentación a otra presentación web llamada www.bienvenidos.es: <A HREF="http://www.ies la nucia.com ">Visita esta página</A>
2.-<A NAME="parte1">Primera parte</A>: Utilizamos el atributo name para dar nombre a una sección de nuestro documento. Y cuando en nuestro documento queramos incluir un vínculo a dicha sección escribiremos: <A HREF="#parte1">Ir a la primera parte</A>
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<A NAME="arriba"><H1>Página de enlaces</H1></A>
<A HREF="#abajo">Ir abajo</A><br>
<A HREF="ej4.html">Ir a ejemplo 4</A><br><br>
<A HREF="http://www.ies la nuacia.com/">Ir a WebEstilo</A><br>
<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br>.<br>.<br>.<br>.<br>.<br>
<A NAME="abajo"><br></A>
<A HREF="#arriba">Ir arriba</A>
</BODY>
</HTML>
Página de enlaces
Ir abajo
Ir a ejemplo 4
Ir a WebEstilo
Tablas
<TABLE> <TR> <TD>
Las tablas surgieron con la versión HTML 3.0. Las tablas nos permiten representar y ordenar cualquier elemento de nuestra presentación en diferentes filas y columnas de modo que podamos resumir grandes cantidades de información de una manera que puede representarse rápida y fácilmente.
Su contenido de una tabla es <table>.....</table>.
Las tablas se definen fila a fila, celda a celda, comenzando desde la celda superior izquierda. Las columnas se calcularán automáticamente según las celdas que hay en cada fila.
Cada fila de la tabla se indica mediante las tags <tr>.....</tr>. Las tags <th> y <td> con sus correspondientes tags de cierre, indican para indicar las filas individuales dentro de cada fila. Las tags <th>.....</th> indican que se trata de celdas que sirven como encabezado de tabla y suelen visualizarse en negrita. Las tags <td>.....</td> indican que se trata de celdas comunes.
<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
<H1>Tablas básicas</H1>
<TABLE BORDER="1">
<TR>
<TH> MATEMATICAS 1</TH>
<TH> MATEMATICAS 2</TH>
<TH> MATEMATICAS 3</TH>
</TR>
<TR>
<TD>Dato 1</TD>
<TD>Dato 2</TD>
<TD>Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 5</TD>
<TD>Dato 6</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tablas básicas
|
MATEMATICAS 1 |
MATEMATICAS 2 |
MATEMATICAS 3 |
|
Dato 1 |
Dato 2 |
Dato 3 |
|
Dato 4 |
Dato 5 |
Dato 6 |
Espaciado
Podemos modificar el aspecto de la tabla cambiando el ancho de los bordes, el espaciado entre celdas y el ancho de las mismas.
1.-width= Acompaña a <table> y especifica el ancho de la tabla, tanto en número de pixeles como en porcentaje respecto al ancho de la pantalla. También puede acompañar a las tags <th> o <td> para especificar el ancho de las columnas.
2.-Border= Anteriormente, ya hemos hablado de este atributo. Ahora le diremos que puede darle un valor que indicará el ancho del borde en pixeles. Border="0" indicaría la ausencia de borde.
3.-Cellspacing= Suele acompañar a la tag <table>. Indica el número de pixeles que separan cada celda. El valor predeterminado suele ser 2.
4.-Cellpadding= También acompaña a la tag <table>. Indica el espacio en pixeles entre el borde de la celda y su contenido. El valor predeterminado suele ser 1.
<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>
<H1>Tablas avanzadas</H1>
<TABLE WIDTH="50%" BORDER="1" CELLSPACING="3" CELLPADDING="2">
<TR>
<TD COLSPAN="2" ALIGN="right">Dato 1</TD>
<TD>Un texto cualquiera</TD>
<TD ROWSPAN="2">Dato 3</TD>
</TR>
<TR>
<TD>Dato 4</TD>
<TD>Dato 4</TD>
<TD ALIGN="center">Dato 5</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Tablas avanzadas
|
Dato 1 |
Un texto cualquiera |
Dato 3 |
|
|
Dato 4 |
Dato 4 |
Dato 5 |
|
Accesorios
Título
Cuando queramos titular una tabla, podemos escribirlo como texto normal o usando las tags <caption>.....</caption>. Las tags de título van dentro de las tags de la tabla y son opcionales, el título no es obligatorio. La tag de apertura puede llevar consigo el atributo align que indicará si el título va encima o debajo de la tabla. align="top" indicaría encima de la tabla y align="bottom" indicaría en la parte de abajo.
Alineación de celdas
Una vez colocadas las celdas, hay que alinear los datos dentro de cada celda. Así, dentro de cada tag de celda podemos encontrar:
1.-El atributo align= define horizontalmente los datos al margen izquierdo (left), al derecho (right) o centrado (center).
2.-El atributo valign= define verticalmente los datos en la parte superior (top), en la parte inferior (bottom) o centrado (middle).
Celdas extendidas
Para crear una celda que abarque varias filas o columnas, debemos colocar en las tags <th> o <td> los atributos:
1.-rowspan= más un valor para indicar el número de filas que se quiere abarcar.
2.-colspan= más un valor para indicar el número de columnas que se quiere abarcar.
Si opta por poner celdas extendidas en su presentación web, la cosa se complica bastante. Nuestra recomendación: Coja lápiz y papel y dibuje la tabla con todas las filas y columnas que se quieren formar porque así tendrá mucho más claro los valores que debe asignar a los atributos rowspan y colspan y las tags a las que hay que asignarlos.
Listas
<UL> <OL> <LI>
Junto con encabezados y párrafos, son otro de los elementos HTML más comunes. Pueden darse cinco tipos diferentes de listas, cada uno con tags distintas aunque con alguna en común:
1.-Listas numeradas u ordenadas: Se engloban por las tags <ol>.....</ol> y cada elemento de la lista estará encabezado por la tag <li> que puede o no llevar la tag de cierre </li>. Es conveniente que cada elemento de la lista esté en una línea nueva aunque todo seguido consiga en la presentación el mismo efecto. Cuando el navegador interpreta una lista ordenada, numera y sangra cada elemento en forma secuencial, aunque se introduzcan modificaciones.
2.-Listas con viñetas o sin orden: Se engloban por las tags <ul>.....</ul> y cada elemento de la lista, también estará encabezado por la tag <li>. El resultado es que el navegador inserta viñetas (marcadores) delante de cada elemento.
3.-Listas de menú y de directorio: Están en desuso puesto que su resultado suele ser, prácticamente, idéntico al de las listas con viñetas.
-
- Menú: Englobadas por las tags <menu>.....</menu> y cada elemento encabezado por la tag <li>.
- Directorio: Englobadas por las tags <dir>.....</dir> y cada elemento encabezado por la tag <li>.
4.-Listas de glosario: Cada elemento de la lista está compuesto por un término y una definición y cada una de estas partes tiene su propia tag. Estas listas se engloban con las tags <dl>.....</dl>. Para el término se usa la tag <dt> y para la definición la tag <dd>. Generalmente el navegador colocará término y definición en dos líneas diferentes pero esto se puede evitar añadiendo a la tag de apertura el atributo compact: <dl compact>.
5.-Listas anidadas: Consiste en poner una lista dentro de otra, de manera que la lista secundaria sangre respecto a la principal. Puede jugar con los diferentes tipos de lista pero recuerde estructurar bien las tags: Las tags de la lista principal englobarán todo el conjunto de las listas y las tags de las listas secundarías se cerraran antes de volver a la lista principal. Ahora quizá le empiece a convenir sangrar el propio código conforme lo va escribiendo en HTML.
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<H1>Listas</H1>
Una lista ordenada
<ol>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ol>
<br><br>
Una lista sin ordenar
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
<br><br>
Una lista de glosario
<dl>
<dt>Témino 1</dt>
<dd>Definición 1</dd>
<dt>Témino 2</dt>
<dd>Definición 2</dd>
</dl>
<br><br>
Listas anidadas
<ul>
<li>Uno
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</li>
<li>Dos</li>
<li>Tres</li>
</ul>
</BODY>
</HTML>
Este es el resultado:
Listas
Una lista ordenada
- Uno
- Dos
- Tres
Una lista sin ordenar
- Uno
- Dos
- Tres
Una lista de glosario
Témino 1
Definición 1
Témino 2
Definición 2
Estilos de caracter
<B> <U> <I>
Estos estilo son tags que afectan a palabras o carácteres dentro de otras entidades de HTML modificando el aspecto de ese texto para que sea diferente del texto que lo rodea. Existen dos tipos de estilos:
1.-Estilos lógicos: Indican como se va a emplear el texto que realzamos, no el como se va a formatear.
-
- <em>.....</em>: Indica que los carácteres estarán enfatizados de alguna manera, generalmente en cursiva aunque dependerá del navegador.
- <strong>.....</strong>: Los carácteres tendrán mayor énfasis, generalmente en negrita.
- <code>.....</code>: Muestra como una fuente monoespaciada, generalmente Courier.
- <samp>.....</samp>: Muy similar a code.
- <kdb>.....</kdb>: Texto que el usuario debe escribir.
- <var>.....</var>:Nombre de una variable que deba ser reemplazada por su valor real. Generalmente en cursiva o subrayada.
- <dfn>.....</dfn>:Se usa para resaltar una palabra que se va a definir.
- <cite>.....</cite>: Se usa para citas cortas.
2.-Estilos físicos: Modifican la presentación real del texto.
-
- <b>.....</b>: Pone el texto en negrita.
- <i>.....</i>: Pone el texto en cursiva.
- <tt>.....</tt>: Pone el texto en fuente monoespaciada.
- <u>.....</u>: Subraya el texto afectado.
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>
<H1>Estilos de caracter</H1>
Un ejemplo de texto de <EM>realzado</EM>.<br>
Un ejemplo de texto de <STRONG>realzado</STRONG>.<br>
Un ejemplo de texto de <CODE>realzado</CODE>.<br>
Un ejemplo de texto de <SAMP>realzado</SAMP>.<br>
Un ejemplo de texto de <KDB>realzado</KDB>.<br>
Un ejemplo de texto de <VAR>realzado</VAR>.<br>
Un ejemplo de texto de <DFN>realzado</DFN>.<br>
Un ejemplo de texto de <CITE>realzado</CITE>.<br>
<br>
Un ejemplo de texto de <B>realzado</B>.<br>
Un ejemplo de texto de <I>realzado</I>.<br>
Un ejemplo de texto de <U>realzado</U>.<br>
Un ejemplo de texto de <TT>realzado</TT>.<br>
</BODY>
</HTML>
Estilos de caracter
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado.
Un ejemplo de texto de realzado
