Editado por: Delfina Vives Estudiante de la Carrera Comunicaci贸n Social
Siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Es usado para describir la estructura y el contenido en forma de texto, así como para complementar el texto con objetos tales como imágenes. HTML se escribe en forma de "etiquetas", rodeadas por corchetes angulares (< > ) HTML también puede describir, hasta un cierto punto, la apariencia de un documento, y puede incluir un script (por ejemplo Javascript), el cual puede afectar el comportamiento de navegadores web y otros procesadores HTML. Lenguajede HTML básico
<!DOCTYPE> Es la primera parte de una página web, aún antes que la etiqueta <html>. Le indica al navegador que especificación de HTML se está utilizando HTML 4.01: los tipos de documento que define son: strict, transitional y frameset. Strict Se usa cuando se utilizan <!DOCTYPE HTML PUBLIC "-//W3C//DTD 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
CSS. HTML
Transitional Presenta elementos en proceso de transición de acuerdo a los estándares del W3C. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frames Debe usarse en documentos que incluyen frames <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html></html> Abre y cierra un documento HTML <head></head> Encabezado de la página - aquí se coloca titulo, metatags, e información para buscadores entre otras cosas. Está información no es visible. <body></body> Dentro de esta etiqueta va toda la parte visible de la página web.
Etiquetas del Encabezado <title></title> El tĂtulo de la pĂĄgina web.
Atributos de la etiqueta Body <body bgcolor=?>
Configura el color de fondo de la página, usando el valor del código de color hexadecimal. <body text=?> Configura el color por defecto del texto, usando el valor del código de color hexadecimal. <body link=?> Configura el color de las ligas, usando el valor del código de color hexadecimal. <body vlink=?> Configura el color de las ligas visitadas, usando el valor del código de color hexadecimal <body alink=?> Configura el color de las ligas al darle clic, usando el valor del código hexadecimal. Etiquetas HTML de Texto <pre></pre> Texto pre-formateado <hl></hl>
Título más grande <h6></h6> Título más pequeño <b></b> Negritas <u></u> Subrayado <i></i> Cursivas <tt></tt> Tipo máquina de escribir <cite></cite> Cita, en cursiva <em></em>
LA IMPORTANCIA DE PONER UN BUEN TITLE Una etiqueta a la que a veces no se le presta mucha atención es la que define el título de una página web individual <title></title>
La etiqueta title va en la zona del head, como vemos aquí:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES"> <head> <title>Direcciones de internet</title> </head>
El navegador lee el title (título) de cada página y lo muestra en la parte superior, en el borde de la pantalla, junto con el icono del programa (Firefox, Explorer, etc. Esto es importante de cara al usuario.
Pero de cara a los buscadores, por ejemplo Google, es muy importante, puesto que es el título que asigna en los resultados de la búsqueda, si defininos un buen "title", este será el que aparezca en el resultado del buscador y la persona que está viendo los resultados quizás acceda a nuestra página por tener un buen título. Por ejemplo, esta página tiene como title: Etiqueta title en HTML, que creo que define bien el contenido de la misma, pues es de lo que estoy hablando. El title debe ser corto, no más de 60 caracteres y descriptivo en la medida de lo posible, lo ideal es que cada página de nuestro sitio web tenga un title distinto.
Etiqueta <body> </body> Definici贸n La etiqueta <body> define el cuerpo de un documento. Dentro del cuerpo del documento se incluye todo el contenido del mismo, por ej. textos, enlaces, im谩genes, tablas, etc.
Ejemplo C贸digo <html> <head> <title>T铆tulo del documento</title> </head>
<body> Todo el contenido del documento... </body> </html>
Resultado Todo el contenido del documento...
BGCOLOR El atributo BGCOLOR imposta un fondo de un solo color. La sintaxis correcta es:
<BODYBGCOLOR="red"> Es posible sustituir el nombre en inglés con valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta manera:
<BODYBGCOLOR="#ff0000"> La utilidad de los colores hexadecimales es mayor cuando no se desea un color estándar sino tonalidades diversas o difuminadas. Los editores HTML de mayor difusión prevén paletas para la definición de los colores hexadecimales, mientras que Paint Shop Pro proporciona también, además del color, el correspondiente valor hexadecimal que copiar/pegar.
Para un ejemplo práctico, haz clic aquí
BACKGROUND BACKGROUND tiene una función similar a BGCOLOR, pero mientras el segundo muestra un tono único del color, el primero visualiza en el fondo una imagen en formato gráfico .gif o .jpg.
Imaginemos, por ejemplo, que queremos construir un fondo con la siguiente imagen:
La imagen se llama sfondo.gif y se encuentra depositada en el mismo directorio que el documento. La sintaxis correcta para impostar la imagen como fondo es: <BODYBACKGROUND="sfondo.gif"> El navegador visualiza la imagen sfondo.gif y la repite en todos los puntos disponibles de la pantalla. En otras palabras, no se limita a visualizar la imagen una sola vez, en el centro de la página por ejemplo, sino que llena todo espacio a disposición. Por esta razón, es absolutamente necesario crear un fondo que, si viene repetido, no presente interrupciones sino un aspecto lo más uniforme posible. Es conveniente elegir una imagen de fondo que no dificulte la lectura y que se ajuste lo más posible al color del texto. Por ejemplo, un texto naranja sobre fondo rojo no podría leerse. Es siempre mejor usar el color negro para el texto y tonos pastel para el fondo.
Para un ejemplo práctico, haz clic aquí
TEXT Si no viene establecido diversamente, el color del texto del documento es el negro ya que los navegadores asignan este color por defecto. Gracias al atributo TEXT es posible asignar al texto un color distinto del negro. La sintaxis correcta es: <BODY
BACKGROUND="sfondo.gif"
EXT="red">
También en este caso los colores pueden expresarse con nombres o con valores hexadecimales. En el interior del documento podemos marcar parte del texto con colores diferentes del que hemos impostado en TEXT.
Para un ejemplo práctico, haz clic aquí LINK Si no viene establecido diversamente, el color de los enlaces (que todavía no se han visitado) es el azul. Gracias al atributo LINK podemos definir colores diferentes: <BODY
BACKGROUND="sfondo.gif"
LINK="red">
Todos los enlaces de la página no serán ya azules sino rojos (red). Este color puede expresarse en valores hexadecimales.
Para un ejemplo práctico, haz clic aquí
ALINK Cuando hacemos clic en un enlace, éste se vuelve de un color distinto al impostado en LINK (o al azul de la opción por defecto). Gracias a ALINK (la A significa Active), es posible modificar este color: <BODY BACKGROUND="sfondo.gif" ALINK="yellow"> VLINK Cuando se visita un URL asociado a un enlace, este último se vuelve de un color distinto al de LINK (o al azul de la opción por defecto). Gracias a VLINK (la V significa Visited), es posible modificar este color: <BODY BACKGROUND="sfondo.gif" VLINK="green"> Para un ejemplo práctico, haz clic aquí
Títulos Se puede dar mayor o menor importancia a los textos cambiando el tamaño y aplicando "negrita". Esto se puede hacer manteniendo un criterio si utilizamos la etiqueta<hN></hN>, en donde N es un valor entero comprendido entre 1 y 6 (el 1 formatearía títulos de mayor importancia, y el 6 los de menor importancia). Estos títulos son párrafos, y producen saltos de línea. Veamos un ejemplo: <html> <head> <title>Encabezados o Títulos</title> </head> <body> <h1>Ejemplo de Encabezado 1 - etiqueta <h1></h1> <h2>Ejemplo de Encabezado 2 - etiqueta <h2></h2> <h3>Ejemplo de Encabezado 3 - etiqueta <h3></h3> <h4>Ejemplo de Encabezado 4 - etiqueta <h4></h4> <h5>Ejemplo de Encabezado 5 - etiqueta <h5></h5> <h6>Ejemplo de Encabezado 6 - etiqueta <h6></h6> </body> </html>
Ver como queda el ejemplo hasta ahora. Como se puede observar esta etiqueta tiene un principio <hn> y un cierre <hn> Elementos de estructuraci贸n de Texto "<em></em>" En este y los siguientes post, veremos diferentes elementos, que nos ayudar谩n a estructurar el texto. c贸digo : <em></em> resultado: enfatizado C贸digo de ejemplo: <html> <head> <title>Estructuracion de Texto</title> </head> <body> Texto normal <em>texto enfatizado</em> </body> </html>
FONT> La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo utilizado, así como su tamaño y color. Aquí tienes la sintaxis correcta de la marca: <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT> El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales).
Para un ejemplo práctico, haz clic aquí
<IMG> Antes de describir en detalle la marca principal de inserción de imágenes en los hipertextos, es conveniente precisar algunos conceptos de HTML. A diferencia de muchos procesadores de texto (Ms Word, por ejemplo), los hipertextos no se "funden" con las imágenes que les sirven de acompañamiento gráfico, sino que se limitan a invocarlas desde un recorrido específico in situ o en el web. Dicho de otro modo, existe una división muy clara entre archivo .htm e imágenes (y también sonidos, apliques, etc.). Los documentos HTML se limitan a prever dentro de ellos un espacio en el que se insertan las imágenes solicitadas. La marca <IMG> no necesita cierre y su sintaxis correcta es:
<IMG SRC="immagine.gif"> donce SRC corresponde al inglés Search y es el recorrido del que el navegador saca la imagen (en este caso "immagine.gif"). Como hemos señalado, esta marca es única en el sentido de que NO lleva como cierre el correspondiente </IMG>. Para un ejemplo práctico, haz clic aquí
Cambiar la posición relativa e sentido vertical respecto a las líneas de texto Con el atributo ALIGN del elemento IMG podemos controlar la posición de la imagen respecto de las líneas de texto. Los valores que puede asignar a dicho atributo son: ALIGN = middle para colocar el centro de la imagen a la altura del borde inferior del texto que viene a continuación de la marca <IMG SRC=“imagen” ALIGN=midde.
ALIGN = top para que el texto que viene después de la marca <IMG SRC=“imagen” ALIGN=top aparezca colocado a continuación del borde superior de la imagen. ALIGN = bottom para que el texto que viene después de la marca <IMG SRC=“imagen” ALIGN=bottom aparezca a continuación del borde inferior de la imagen.
Con objeto de realizar una práctica con los valores del atributo ALIGN crearemos el siguiente documento en el Bloc de notas:
Se ha supuesto que la imagen “antorcha.gif” se encuentra grabada en la misma carpeta que el documento HTML.El documento una vez visualizado en el navegador tendrá este aspecto:
Video