INTRODUCCIÓN El lenguaje HTML (HyperText Markup Language), es el formato estándar que se utiliza para crear e interpretar documentos de texto e imágenes, conocidos popularmente como páginas web. Estos documentos, que en realidad son archivos de texto plano, están compuestos básicamente por:
- la información que el usuario ve en la pantalla cuando accede a una página, y - códigos (tags o etiquetas), transparentes para el usuario, que son interpretados por el programa del navegador y que controlan la manera como la información es mostrada en la pantalla.
El siguiente ejemplo sencillo, contiene lo necesario para crear una página que desplegará en el explorador (browser o navegador), la frase “Bienvenido ONCE al curso de HTML”:
<HTML> <HEAD> <TITLE>Primer Página</TITLE> </HEAD> <BODY> Bienvenido al curso de HTML </BODY> </HTML>
Las palabras encerradas entre los símbolos menor y mayor que (< >), son las etiquetas de HTML y las frases dentro de éstas, constituyen la información que realmente verá el usuario.
El cuerpo contiene toda la información de la página que será desplegada por el browser al accederla, mientras que el encabezado cuyo contenido generalmente no es visible, se utiliza principalmente para colocar en él, además del título de la página, scripts y otras etiquetas especiales en las que se consignan datos relacionados con el autor, palabras claves sobre el contenido, descripción, etc.
El explorador, también conocido como navegador o browser, es el software que permite acceder, interpretar y visualizar documentos HTML ubicados en cualquier sitio cuya dirección es conocida. El navegador interpreta las etiquetas y muestra el documento en pantalla.
ETIQUETAS DE TEXTO Las etiquetas de texto como su nombre lo indica, permiten cambiar los atributos y la manera como el texto se verá dentro de la página. Se puede afectar todo un párrafo, una línea, una palabra o caracteres individuales simplemente encerrándolos dentro de las etiquetas apropiadas.
ETIQUETA <HX> </HX> Esta etiqueta, conocida como etiqueta de encabezado (heading), es utilizada con frecuencia para escribir títulos y subtítulos, dado que permite mostrar texto en negrillas con seis tamaños diferentes, dependiendo del valor asignado al atributo X.
<HTML> <HEAD> <TITLE> Encabezados</TITLE> </HEAD> <BODY> <H1>Este texto tiene el tamaño que le da la etiqueta H1</H1> <H2>Este texto tiene el tamaño que le da la etiqueta H2</H2> <H3>Este texto tiene el tamaño que le da la etiqueta H3</H3> <H4>Este texto tiene el tamaño que le da la etiqueta H4</H4> <H5>Este texto tiene el tamaño que le da la etiqueta H5</H5> <H6>Este texto tiene el tamaño que le da la etiqueta H6</H6> </BODY> </HTML>
La etiqueta <HX> tiene otro atributo que permite controlar la alineación del texto. Éste se puede alinear al centro (align="center"), a la derecha (align="right"), a la izquierda, que es la alineación que toma por defecto cuando el atributo align es omitido, o justificado (align="justify").
<H1 align=”center”>Texto </H1> <H1 align=”right”>Texto </H1>
ETIQUETA <FONT> </FONT> Esta etiqueta permite controlar tres atributos del texto que se encuentra encerrado entre ellas: su tamaño (SIZE), su color (COLOR) y el tipo de fuente (FACE). Por ejemplo, las siguientes líneas escritas dentro del cuerpo de un nuevo archivo, mostrarán texto con cuatro tamaños de fuente diferentes:
Texto con fuente tamaño normal <FONT SIZE="+1">Texto con fuente tamaño + 1</FONT> <FONT SIZE="+2">Texto con fuente tamaño + 2</FONT> <FONT SIZE="-1">Texto con fuente tamaño - 1</FONT> <FONT SIZE="-2">Texto con fuente tamaño - 2</FONT>
La sintaxis completa de la etiqueta <FONT> es la siguiente: <FONT SIZE="X" COLOR="color" FACE="Nombre de la fuente">Texto</FONT> Donde X corresponde como ya se vió, al tamaño de la fuente que admite valores positivos y negativos.
El atributo color puede ser un valor hexadecimal o el nombre en inglés de un color específico. Aunque en teoría se pueden mostrar millones de colores, existen 16 de ellos que componen la denominada “Paleta Segura”.
Como ejemplo, se propone escribir las siguientes líneas dentro del cuerpo de una nueva página: <FONT SIZE="+1" COLOR="maroon" FACE="Comic Sans MS">TEXTO</FONT> <FONT SIZE="+2" COLOR="#0000ff" FACE="Tahoma">TEXTO</FONT> <FONT SIZE="+2" COLOR="Purple" FACE="Stencil">TEXTO</FONT> <FONT SIZE="+2" COLOR="#ff00ff" FACE="Arial">TEXTO</FONT>
ETIQUETA <BR> y <P> La etiqueta <BR> permite forzar un salto de línea dentro de un texto. Observe que esta etiqueta no se cierra con </BR>, razón por la que se le conoce como etiqueta abierta. <P> es otra etiqueta que puede utilizarse abierta o cerrada. Si se usa de la primera forma, iniciará un nuevo párrafo dejando una línea en blanco, si por el contrario se cierra con </P> permite alinear el nuevo párrafo a la derecha, en el centro, a la izquierda o justificado, dependiendo del valor asignado al parámetro ALIGN. A continuación se muestran algunos ejemplos:
ETIQUETA <HR > Esta etiqueta “abierta”, dibuja una línea horizontal (Horizontal Rule), con alineación, tamaño y ancho variables. Se utiliza con frecuencia para separar secciones de contenido. Su sintaxis se ilustra en las siguientes líneas:
Línea centrada, de tamaño 10 puntos y ocupando el 30% de la página <HR ALIGN=”center” SIZE= ”10” WIDTH= ”30%”> Línea alineada a la izquierda, de tamaño 5 puntos y ocupando la mitad de la página <HR ALIGN=”left” SIZE= ”5” WIDTH= ”50%”> Línea alineada a la derecha, de tamaño 20 puntos y ocupando la mitad de la página <HR ALIGN=”right” SIZE= ”20” WIDTH= ”50%”> Línea sencilla que ocupará el 90% de la página <HR>
OTRAS ETIQUETAS PARA TEXTO La siguiente tabla muestra otras etiquetas muy útiles a la hora de trabajar con texto y los efectos que se conseguirán:
FONDOS Hasta ahora se ha trabajado con páginas cuyos colores son: blanco para el fondo y negro para el texto escrito en ellas. Estos son los colores que HTML toma por defecto. El siguiente ejemplo desplegará una página con fondo negro (black)
Imagen de fondo Cuando el fondo es una imagen, esta debe estar en la misma carpeta que el archivo html. La sintaxis es <HTML> <HEAD> <TITLE>fondo</TITLE> </HEAD> <BODY background=”nombreimagen.jpg”> Aquí hay una imagen de fondo </BODY> </HTML>
<HTML> <HEAD> <TITLE>Cuerpo</TITLE> </HEAD> <BODY BGCOLOR=”green”> <H3>ESTA PÁGINA TENDRÁ FONDO VERDE</H3> </BODY> </HTML>
LISTAS En ocasiones es necesario presentar información de manera ordenada mediante listas con viñetas o listas numeradas. Con HTML se pueden crear tres de estos tipos de listados: listas ordenadas o numeradas, listas con viñetas o listas de definición, cada una de ellas con sus variaciones.
LISTA ORDENADA <OL> <OL TYPE ="1" START ="4"> <LI>Dirección de Informática <LI>Planeación <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL> I
En la etiqueta <OL>, el atributo TYPE ="1" indica que la lista será Numérica (el número entre comillas puede ser cualquier entero y el resultado será el mismo), mientras que el atributo START ="4" hace que el primer elemento del listado esté precedido por el número 4, el segundo por el número 5 y así sucesivamente. Sí no se incluye ninguno de los dos atributos anteriores, el explorador desplegará la misma lista pero comenzando el listado en 1.
<OL TYPE = "A" START ="1"> <LI>Dirección de Informática <LI>Planeación <LI>Vicepresidencia Financiera <LI>Comunicaciones </OL> Esta etiqueta hace la lista ordenada pero con parte LITERAL, es decir, a, b, c, ….
LISTA CON VIÑETAS <UL> <UL TYPE = "circle"> <LI> Ítem 1 <LI> Ítem 2 <LI> Ítem 3 <LI> Ítem 4 </UL> Las otras dos opciones de TYPE son square y disc.
LISTA DE DEFINICIÓN <DL> Esta etiqueta como su nombre lo indica, permite desplegar listas de palabras con su correspondiente definición. Se utiliza típicamente en la construcción de glosarios. Considere por ejemplo, la siguiente lista de términos que definen las funciones de algunas dependencias de la empresa:
PLANEACIÓN: Encargada de ejecutar y revisar los planes de inversión PLANEACIÓN: Encargada de ejecutar y revisar los planes de inversión. INFORMÁTICA: Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático en la empresa. RECURSOS HUMANOS: Encargada de los asuntos relacionados con el recurso humano.
El listado anterior se comienza y termina con las etiquetas <DL> y </DL>. Cada uno de los términos a definir se precede con la etiqueta <DT>, mientras que a la definición en sí, se le antepone la etiqueta <DD>:
<DL> <DT>PLANEACIÓN: <DD>Encargada de ejecutar y revisar los planes de inversión. <DT>INFORMÁTICA: <DD>Encargada de diseñar, implementar y ejecutar los planes de desarrollo informático en la empresa. <DT>RECURSOS HUMANOS. <DD>Encargada de los asuntos relacionados con el recurso humano. </DL>
TABLAS Una tabla está compuesta por columnas y filas que conforman un conjunto de celdas que permiten mostrar información de manera organizada. En una celda se puede incluir indistintamente texto, imágenes o cualquier otro elemento soportado por HTML.
En la etiqueta <TABLE> se definen las características principales de la tabla, pero no se dice de cuántas filas y columnas estará compuesta ni cuál será su contenido. En realidad existen tres etiquetas adicionales, que colocadas adecuadamente dentro de <TABLE> y </TABLE> permiten controlar el número de filas y columnas, además de otras características:
<TR> Se utiliza para definir una nueva fila. <TD> Permite agregar una celda o columna dentro de una fila <TH> Es similar a <TD>, con la diferencia de que el texto contenido en ella será escrito en negrilla.
Lo anterior significa que una tabla en HTML tendrá tantas filas como etiquetas <TR> contenga y una fila estará compuesta por un número de celdas igual al de etiquetas <TD> o <TH> que la misma tenga.
Las siguientes líneas ilustran el uso de estas etiquetas para crear una tabla sencilla, compuesta por dos filas y dos columnas: <TABLE BORDER=”1”> <TR> <TH>Primera Celda</TH> <TH>Segunda Celda</TH> </TR> <TD>Tercera Celda</TD> <TD>Cuarta Celda</TD> </TABLE>
Las etiquetas <TD> y <TH> tienen entre otros, atributos que permiten controlar: el color del fondo de la celda (BGCOLOR=”color”), la alineación del texto o de la imagen dentro de la celda (ALIGN=”alineación”), y que funcionan de manera idéntica a los utilizados con las etiquetas <H#>, <P> y <FONT>. Otro de los atributos importante de estas dos etiquetas, es el que permite indicar el número de columnas o de filas que ocupará una celda en particular.
Suponga que se debe crear una tabla similar a la siguiente:
Observe que la tabla está compuesta por dos filas y dos columnas, y que la celda del título ocupa dos columnas. Cuando este es el caso, es decir que una celda está distribuida en dos o mas columnas o filas, se utiliza para su definición el atributo COLSPAN=”X” o ROWSPAN=”X” respectivamente. X obviamente corresponde al número de columnas o filas sobre las que se distribuirá la celda. Para crear la tabla que se muestra arriba, se debe escribir:
<TABLE BORDER=”1”> <TR> <TH COLSPAN=”2”>TÍTULO DE LA TABLA</TH> </TR> <TD>Celda 1</TD> <TD>Celda 2</TD> </TABLE>
Y si lo que se desea es crear una tabla como la siguiente:
Se debe escribir: <TABLE BORDER=”1”> <TR> <TH ROWSPAN=”2”>TÍTULO DE LA TABLA</TH> <TD>Celda 1</TD> </TR> <TD>Celda 2</TD> </TABLE>
IMAGENES Las páginas Web además de mostrar texto, son capaces de desplegar imágenes que han de ser creadas en cualquiera de los formatos aceptados: GIF, JPG o PNG. Para insertar imágenes lo único que se necesita conocer es la ruta y el nombre del archivo que la contiene. La etiqueta <IMG> junto con su atributo SRC ="ruta" permiten mostrar una imagen: <IMG SRC ="logo.gif">
La etiqueta <IMG> cuenta además de SRC con otros atributos que controlan la manera como se desplegarán las imágenes: ALT ="Texto alternativo" Permite definir un texto que aparecerá en caso de que la imagen por alguna razón no pueda ser mostrada, o cuando se desplaza elpuntero del ratón sobre la imagen ya desplegada.
HEIGHT = ”XX” y WIDTH = ”XX” Medida en píxeles del alto y ancho de la imagen. Con ellos podemos controlar además el tamaño original de una imagen. BORDER ="X" Dibuja un borde o marco negro de x puntos alrededor de la imagen. Si se omite este atributo, simplemente no se dibujará ningún borde.
ALIGN = ”Alineación de texto” Permite especificar la alineación respecto de la imagen de un texto que se escriba inmediatamente después de la etiqueta <IMG>. El texto en mención, puede alinearse arriba, utilizando TOP como valor; en el centro de la imagen, si utilizamos MIDDLE y en la parte inferior de la misma, si el valor para ALIGN es BOTTOM. Además, el atributo ALIGN puede recibir el valor LEFT, con lo que la imagen se colocará a la izquierda del texto, o RIGHT, caso en el que la imagen aparecerá a la derecha.
EJEMPLO Para comprender mejor el comportamiento de las imágenes, copie en una carpeta denominada Imágenes un archivo que sea una foto o imagen y luego escriba en un archivo HTML las líneas que a continuación se muestran, teniendo en cuenta que XXXXXX representa el nombre de su archivo:
<IMG SRC =“XXXXXXX.gif" ALT ="Logo tamaño 180 x 180 píxeles" WIDTH = 180 ALIGN = “top” BORDER=”5”>Este texto alineado arriba de la imagen, con borde cinco. <P> <IMG SRC ="XXXXXXX.gif" ALT =" Logo tamaño original" ALIGN = “middle” BORDER=”3”>Este Texto alineado en la mitad de la imagen con borde 3 y la muestra en su tamaño original. <IMG SRC ="XXXXXXX.gif" ALT =" Logo tamaño 60 x 60 píxeles" HEIGHT = 80 ALIGN= “Bottom” >Texto alineado abajo de la Imagen sin borde <IMG SRC ="Noexiste.gif" ALT ="No existe la imagen" > Texto
ENLACES Para crear hipervínculos o enlaces se utiliza la etiqueta <A> acompañada del atributo HREF cuyo valor en comillas dobles será el nombre de la pagina web a la cual se accederá al darle click. La sintaxis es la siguiente: <A HREF=“pagina.html”>Click aquí</A>
ENLACES DENTRO DE LA MISMA PAGINA WEB Para crear enlaces dentro de la misma pagina web La sintaxis es la siguiente: <A name=“nombre”>se muestra el orden de los equipos a continuacion</A> este es el lugar al que saltará el navegador cuando demos click al enlace. Y este es el enlace <A Href=“#nombre”>Tabla de posiciones </a>
actividad
1 - Que son las hojas de estilo (CSS)? CSS son las siglas de Cascade Style Sheet que traducido significa hojas de estilo en cascada. Las hojas de estilo es una tecnología que nos permite controlar la apariencia de una página web. En un principio, los sitios web se concentraban más en su contenido que en su presentación.
CSS es un gran avance que complementa el HTML y la Web en general. Con CSS podemos especificar estilos como el tamaño, fuentes, color, espaciado entre textos y recuadros así como el lugar donde disponer texto e imágenes en la página. Veremos que podemos asociar las reglas de estilo a las marcas HTML de tres maneras: directamente a la marca, en el head de la página o agrupar las reglas de estilo en un archivo independiente con extensión *.css
En este periodo veremos las tres metodologías, pero pondremos énfasis en la tercera forma, que es la más adecuada para separar el contenido de la página y la forma como se debe representar la misma por medio de la hoja de estilo. La metodología a trabajar brinda un concepto teórico corto, luego un problema resuelto que invito a ejecutar, modificar y jugar con el mismo. Por último, y lo más importante, un ejercicio propuesto que nos permitirá saber si podemos aplicar el concepto.
ejemplo <!DOCTYPE html> <html> <head> <title>Prueba de hojas de estilo</title> </head> <body> <p style="color:#000000;background-color:yellow;font-family:verdana;font-size:25px;text-align:center">Esto es un ejemplo</p> </body> </html>
2 - Definición de estilos a nivel de elemento HTML. Es la forma más fácil pero menos recomendada para aplicación de un estilo a un elemento HTML. Se define en la propiedad style los estilos a definir para dicho elemento. Es común a veces definir estilos directamente en los elementos HTML cuando estamos probando diseños de elementos particulares de la página y posteriormente trasladar el estilo creado a una hoja de estilos. La sintaxis para definir un estilo a un elemento HTML es la siguiente:
ejemplo <!DOCTYPE html> <html> <head> </head> <body> <h1 style="color:#ff0000;background-color:#ffff00"> Este mensaje es de color rojo sobre fondo amarillo. </h1> </body> </html>
Veremos más adelante que hay muchas propiedades en CSS Veremos más adelante que hay muchas propiedades en CSS. En este primer ejemplo inicializamos las propiedades color (define el color del texto) y background-color (define el color de fondo del texto). Cada vez que inicializamos una propiedad debemos separarla de la siguiente por punto y coma. Cuando definimos estilos directamente en el elemento HTML, tenemos que tener en cuenta que el estilo se aplica únicamente a dicho elemento donde inicializamos la propiedad style, es decir, si tenemos dos secciones h1, deberemos definir la propiedad style para cada elemento:
<h1 style="color:#ff0000;background-color:#ffff00"> Primer título </h1> <h1 style="color:#ff0000;background-color:#ffff00"> Segundo título </h1> Como podemos observar, más allá que los dos estilos son exactamente iguales, estamos obligados a definirlos para cada elemento HTML.