HTML
HTML, Hyper Text
Markup Language (Lenguaje de marcación de Hipertexto). Es el lenguaje que se emplea para el desarrollo de páginas de
internet. Está compuesto por una serie de etiquetas que el navegador interpreta
y da forma en la pantalla. HTML dispone de etiquetas para imágenes,
hipervínculos que nos permiten dirigirnos a otras páginas, saltos de línea,
listas, tablas, etc.
¿Para qué puedo usar HTML?
Si quieres
crear sitios web, no hay otra solución que aprender HTML. Incluso si usas un
programa como Dreamweaver, por ejemplo, para la creación de sitios web, poseer
unos conocimientos básicos de HTML hace la vida mucho más fácil y tus sitios
web mucho mejores. La buena noticia es que HTML es fácil de aprender y de usar.
Creación de páginas web con lenguaje HTML
Para crear una página web se pueden utilizar varios programas especializados en esto, como por ejemplo, el
Microsoft Front Page o el Macromedi Dreamweaver 3. Otra forma de diseñar un archivo HTML, es copiar todo en el Bloc de Notas del Windows,
ya que este sencillo programa cumple con un requisito mínimo que es la posibilidad
de trabajar con las etiquetas con las que trabaja este lenguaje. A continuación
les mostraremos las etiquetas más comunes que deben aprenderse para hacer una
página Web.
Estructura de los documentos de HTML
Si se tiene en cuenta el contenido del documento, todos los documentos de HTML bien escritos comparten una estructura en común. Un documento de HTML empieza con la etiqueta <HTML>, que es la que encerrará el documento actual. Contiene dos secciones primordiales: la cabecera y el cuerpo encerrados respectivamente por los elementos <HEAD> cabeza y <BODY> cuerpo.
La cabecera
puede contener información y siempre contiene el título del documento encerrado
por el elemento <TITLE>.
En el cuerpo
se encuentra todo el contenido del documento, ya sea, texto, imagenes, sonidos, hipervínculos, etc.
Un documento
escrito en HTML contiene las siguientes etiquetas en el siguiente orden:
Ejemplo:
<HTML>
<HEAD>
<TITLE> Título de mi página de Internet </TITLE>
</HEAD>
<BODY>
<H1> <CENTER> Primera página </CENTER> </H1>
<BODY>
<H1> <CENTER> Primera página </CENTER> </H1>
<HR>Esta
es mi primera página, aunque todavía es muy sencilla.
</BODY>
</HTML>
</HTML>
Elementos y etiquetas
Los elementos proporcionan la
estructura al documento HTML e indican al navegador cómo quieres que se
presente tu sitio web. Por lo general, los elementos están formados por una
etiqueta de inicio, el contenido, y una etiqueta de cierre.
Las etiquetas:
Las etiquetas son marcas que se usan
para señalar el inicio y el fin de un elemento, por lo tanto todas las
etiquetas comparten el mismo formato: empiezan con el signo menor que
"<" y terminan con el signo mayor que ">".
Por lo general, hay dos tipos de
etiquetas: la etiquetas de inicio, por ejemplo, <html>, y las etiquetas
de cierre, por ejemplo, </html>. La única diferencia entre la etiqueta de
inicio y la de cierre es la barra oblicua "/". El contenido queda
etiquetado al colocarlo entre una etiqueta de inicio y una etiqueta de cierre.
Etiqueta <HTML>
La etiqueta <HTML> define un
documento de HTML. Dentro de esta etiqueta se encuentran las etiquetas
<HEAD> y <BODY> con las respectivas etiquetas que se encuentran en
ellas.
Etiqueta de cierre: </HTML>
Sintaxis:
<HTML>
Otras etiquetas
</HTML>
Etiquetas <HEAD>
y <TITLE>
En la etiqueta <HEAD> se
encuentra toda aquella información no visible sobre la página; cabe aclarar que
el título de la hoja se encuentra dentro esta etiqueta y es visible en la barra
de título del navegador.
Etiqueta de cierre: </HEAD>
Sintaxis:
<HTML>
<HEAD>
<TITLE>Titulo de mi página </TITLE>
Información no visible y título de la página
</HEAD>
</HTML>
El título de la página se especifica con la etiqueta
<TITLE>
Etiqueta de cierre: </TITLE>
Etiqueta <BODY>
En la etiqueta <BODY> se
encuentra toda aquella información visible en la pantalla del navegador. Se
encuentran dentro de esta etiqueta las imágenes, texto, sonidos, vínculos etc.
Etiqueta de cierre: </BODY>
Sintaxis:
<HTML>
<HEAD>
Información no visible y título de la página
</HEAD>
<BODY>
Información visible en pantalla
</BODY>
</HTML>
Atributos:
BACKGROUND:
Es una
forma abreviada de todas las propiedades de fondo listadas a lo largo de esta
lección.
BGCOLOR: Muestra un
color de fondo para la página. La sintaxis es de la siguiente manera:
<BODY BGCOLOR="#RRVVAA">
BGPROPERTIES:
TEXT: Especifica
el color del texto en todo el documento. Su sintaxis es:
<BODY TEXT="RRVVAA">
LINK: Especifica
el color de los vínculos no visitados en todo el documento. Su sintaxis es:
<BODY LINK="RRVVAA">
VLINK: Especifica
el color de los vínculos visitados en todo el documento. Su sintaxis es:
<BODY VLINK="RRVVAA">
ALINK: Especifica
el color de los vínculos cuando se hace click sobre ellos. Su sintaxis es:
<BODY ALINK="RRVVAA">
Se especificó un valor de atributo
de la forma RRVVAA, lo cual se explica en la siguiente sección.
Colores
En muchas etiquetas es necesario
utilizar códigos hexagesimales para definir los colores a utilizar.
Un color se define como la cantidad
de rojo, verde y azul. La forma de escribir el código de un color dentro de una
etiqueta es la siguiente: #RRVVAA
En donde RR representa al color
rojo en código hexagesimal, VV representa al color verde en código hexagesimal
y AA representa al color azul en código hexagesimal.
Por ejemplo, cierto color naranja
tiene como código hexagesimal FF6600. FF representa la saturación de rojo que
en decimales es 255 (máximo posible), 66 representa la saturación de verde que
en decimales es 102 y 00 representa la saturación de azul que en decimales es
0.Este es el color naranja del ejemplo.
Mostramos a continuación algunos de
los colores más utilizados junto con su código hexagesimal.
De cualquier manera es útil tener
una calculadora para hacer las conversiones de colores.
Color Código Ejemplo
Rojo FF0000
Azul 0000FF
Verde 00FF00
Blanco FFFFFF
Negro 000000
Amarillo FFFF00
Gris C0C0C0
Violeta 4F2F4F
Etiqueta
<P>
La etiqueta <P> crea un
párrafo con el texto contenido dentro de ella.
Etiqueta de cierre: </P>,
aunque puede omitirse.
Sintaxis:
<P>Párrafo</P>
Atributos:
ALIGN: Permite indicar la
alineación del párrafo. Los posibles valores pueden ser LEFT (izquierda),
CENTER (centro), RIGHT (derecha).
<P
ALIGN="CENTER">Este es un ejemplo de texto en el centro</P>
Encabezados
Los encabezados que podremos
utilizar están definidos en 6 niveles de encabezamiento; La etiqueta <Hn>
representa un encabezado de nivel n, donde n puede ser un valor entre 1 y 6,
siendo 1 el nivel más alto de encabezamiento y 6 el nivel más bajo de
encabezamiento.
<H1>Encabezamiento de nivel 1</H1>
Encabezamiento de nivel 1
<H2>Encabezamiento de nivel 2</H2>
Encabezamiento de nivel 2
<H3>Encabezamiento de nivel 3</H3>
Encabezamiento de nivel 3
<H4>Encabezamiento de nivel 4</H4>
Encabezamiento de nivel 4
<H5>Encabezamiento de nivel 5</H5>
Encabezamiento de nivel 5
<H6>Encabezamiento de nivel 6</H6>
Encabezamiento de nivel 6
Realmente sencillo, ¿no? Cabe hacer
notar que los encabezados presentan al texto con una fuente predeterminada.
Alineación del
texto
Ya antes habíamos hablado de la
etiqueta <P> y de su atributo ALIGN que permite alinear el texto de la
página. Los valores para este atributo son LEFT, RIGHT y CENTER. Como podemos
darnos cuenta, no es posible justificar el texto bueno no será posible hasta
que entremos a CSS.
Fuentes
La etiqueta <FONT> permitirá
asignar la fuente, color y tamaño del texto contenido en ella.
<P><FONT FACE="ARIAL", COURIER, HELVETICA"
COLOR="#FF00CC" SIZE="3">Hola Mundo</FONT></P>
Hola Mundo
FACE
El Atributo FACE permite establecer
la fuente a utilizar.
Es posible utilizar hasta tres
nombres de fuentes separadas por comas. La necesidad de hacer esto es debido a
que, en el momento de cargar el documento en el navegador, este busca la
primera fuente dentro del sistema; si no la encuentra continua con la segunda,
etc. Debemos de tener cuidado de solo utilizar fuentes "estándar",
que puedan ser encontradas en cualquier sistema. Las más comunes son:
• Arial
• Courier
• Helvetica
• Sans-Serif
• Times New Roman
• Times
• Verdana
Y claro no debemos utilizar las siguientes
• Ricolino Machine
• Super Fancy Font
•
Star Wars
Etiqueta <B>
Esta etiqueta provoca que el texto contenido en ella
aparezca en negritas.
Etiqueta de cierre: </B>
Etiqueta
<I>
Esta etiqueta provoca que el texto contenido aparezca
en cursivas.
Etiqueta de cierre: </I>
Etiqueta
<S>
Esta etiqueta tacha el texto contenido en ella.
Etiqueta de cierre: </S>
Etiqueta
<U>
Esta etiqueta provoca que el texto
contenido en ella aparezca subrayado.
Etiqueta de cierre: </U>
Etiqueta <BLINK>
La etiqueta <BLINK> ocasiona un
efecto de parpadeo en el texto comprendido en ella:
¿Realmente molesto no?
Nota: Solo Netscape lo incorpora.
Si usamos un navegador diferente, veremos el texto estático.
Etiqueta de cierre: </BLINK>
Etiqueta <MARQUEE>
La etiqueta <MARQUEE> provoca que el texto
dentro de ella se desplace:
Etiqueta de cierre: </MARQUEE>
Listas
Para definir una lista básica
utilizaremos dos etiquetas. La etiqueta <UL> y la etiqueta <LI>.
Etiqueta <UL>
Esta etiqueta indicara al navegador
de que debe crear una lista básica.
Etiqueta de cierre: </UL>
Etiqueta
<LI>
Dentro de la etiqueta <UL>
debemos de utilizar la etiqueta <LI> para definir los elementos de una lista.
Etiqueta de cierre: </LI>
<UL>
<LI>Elemento 1 de la
lista</LI>
<LI>Elemento 2 de la
lista</LI>
<LI>Elemento 3 de la
lista</LI>
</UL>
• Elemento 1 de la lista
• Elemento 2 de la lista
• Elemento 3 de la lista
Tipos de viñetas en una lista básica
Para cambiar la forma de las
viñetas en una lista básica debemos utilizar el atributo TYPE de la etiqueta
<UL>. Usando el atributo en esta etiqueta ocasionará que todos los
elementos en ella presenten la viñeta que definamos.
<UL TYPE="CIRCLE">
muestra una viñeta con forma de circulo.
<UL TYPE="DISC">
muestra una viñeta con forma de disco.
<UL TYPE="SQUARE">
muestra una viñeta con forma de cuadrado o viñeta circular
• Viñeta de disco
Viñeta cuadrada
Etiqueta <OL>
Esta etiqueta indicará al navegador
de que debe crear una lista numerada.
Etiqueta de cierre: </OL>
El Atributo START de la etiqueta
<OL> es utilizado para indicar el número en el que debe de empezar la
lista.
Etiqueta
<LI>
Dentro de la etiqueta <OL>
debemos utilizar la etiqueta <LI> para definir los elementos de una lista.
Etiqueta de cierre: </LI>
<OL>
<LI>Elemento 1 de la lista</LI>
<LI>Elemento 2 de la
lista</LI>
<LI>Elemento 3 de la
lista</LI>
</OL>
1. Elemento 1 de la lista
2. Elemento 2 de la lista
3. Elemento 3 de la lista
Tipos de numeración en una lista
numerada
Para cambiar la forma en que
aparecerá la numeración en una lista numerada debemos utilizar el atributo TYPE
de la etiqueta <OL>.
<OL TYPE="1"> Para
números enteros (1, 2, 3,4,...).
<OL TYPE="A"> Para
letras mayúsculas.
<OL TYPE="a"> Para
letras minúsculas.
<OL TYPE="I"> Para
números romanos en mayúsculas.
<OL TYPE="i"> Para
números romanos en minúsculas.
Saltos
de línea
La etiqueta <BR> es utilizada
para insertar un salto de línea, esto es, sin espacios entre dos líneas de texto.
Sintaxis:
Línea de texto<BR>
Línea de texto<BR>
Línea de texto
No existe etiqueta de cierre.
Etiqueta <META>
<META> permite al autor de un
documento HTML especificar información fuera del contenido.
Esta información recibe el nombre
de meta data o meta datos. Los atributos de <META> son
NAME: Nombre de la propiedad
CONTENT: Valor de la propiedad
HTTP-EQUIV: Encabezados HTTP
A diferencia de las etiquetas
vistas hasta ahora en donde los atributos tenían propiedades específicas, los
atributos de <META> reciben propiedades especificadas por el autor.
El atributo NAME declara la
propiedad y el atributo CONTENT especifica el valor del atributo. Por ejemplo
<META NAME="Autor"
CONTENT="Jorge L. Rivas">
Como insertar una imagen
A la hora de crear una página Web
podemos introducir gráficos de forma muy
sencilla, sólo hay que tener en cuenta que las imágenes deben tener formato Gif
o JPEG.
La etiqueta utilizada para agregar
imágenes a una página Web es <IMG> y va acompañada de un atributo
fundamental "SCR", que indica la ruta donde se encuentra el archivo
que contiene la imagen a insertar. Es decir:
<IMG SRC="lugar donde guardo
la imagen">
Supongamos que tenemos la imagen
dragonball.gif, que está presente en el mismo directorio en donde está la
página y que la queremos insertar.
Para poner la imagen en la izquierda
escribir:
<IMG ALIGN=LEFT SRC=" dragonball.gif ">
A la derecha: <IMG ALIGN=RIGHT
SRC=" dragonball.gif">
Y si se quiere poner la imagen en el
centro:
<P ALIGN=CENTER> <IMG SRC=" dragonball.gif">
</P>
Hiperenlaces, Hyperlinks, Anclas o Links
Para definir un enlace es necesario
marcar con la etiqueta <a> el objeto del cual va a partir dicho enlace.
Dicha directiva debe incluir el parámetro href="URL" para especificar
el destino del enlace. Es decir, que antes del objeto elegido debemos abrir con
<a href="URL">, y después cerrar con </a>. Por ejemplo,
si queremos que el texto "pulse aquí para visitar la NASA" nos
conduzca a la "home page" de la NASA, debemos escribir en nuestro
texto HTML:
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
<a href="http://www.nasa.gov/">Pulse aquí para visitar a la NASA</a>
Si queremos que el texto
"Foto" nos lleve a una imagen tenemos que escribir:
<a
href="imagen.gif">Foto</a> entonces al hacer clic en el
texto Foto nos abrirá la imagen.gif.
También se puede ir a otro enlace por
medio de una imagen. Lo único que se debe hacer es cambiar el texto por una
imagen:
<a
href="http://www.altavista.com"><img
src="Logo.jpg"></a>
Con esto tendremos por resultado que
cuando se pase el puntero del mouse por arriba
del Logo.jpg (que podría ser el logo del Altavista) y se convierta en una
"manito", al hacer clic nos envíe al buscador Altavista.
Si se quiere hacer un link para que
nos manden un E-Mail se debe hacer de la siguiente manera:
<a href="mailto:pfravioli
[arroba] fibertel.com.ar">Mandame un Email</a>
Entonces cuando se haga clic sobre
esta palabra Mandame un Email se abrirá (por defecto) el Microsoft Outlook
Express con la dirección del
destinatario ya escrita.
Diferencias entre HTML y CSS
HTML es
utilizado para estructurar los contenidos, es el cuerpo que contiene la
información. CSS es usado para formatear contenidos estructurados.
Hace algún
tiempo un señor llamado Tim Berners Lee decidió hacer la inventiva de la World
Wide Web (WWW), y el lenguaje HTML servía para estructurar los textos. La
importancia de los textos era definida utilizando etiquetas como <h1>,
<h2>, y <h3> que se conocen como “headings” (encabezados).
Con la
popularidad de la Web, los diseñadores comenzaron a sentir la necesidad de
construir documentos con un formato más personalizado. Para atender a esta
necesidad, los fabricantes de navegadores inventaron nuevas etiquetas como
<span> que pasó a ser empleado como modo de definir un texto.
CSS se
inventó para remediar esta situación, proporcionando a los diseñadores web con
sofisticadas oportunidades de presentación soportadas por todos los
navegadores. Al mismo tiempo, la separación de la presentación de los
documentos del contenido de los mismos, hace que el mantenimiento del sitio sea
mucho más fácil.
Muchas de
estas etiquetas eran soportadas solamente por algunos navegadores. Como
solución se puso a disposición el CSS.
Bibliografía
No hay comentarios:
Publicar un comentario