HTML : CONCEPTOS
BASICOS
Elementos que vamos a utilizar para trabajar: bloc de notas.
Lo primero que hay que tener en cuenta es que el codigo en html se compone basicamente de "tags" o "etiquetas". Las mismas son palabras claves que cumplen una funcion determinada, y tales palabras van encerradas entre < > (Ej; <html>, <body>, <head>, etc.). De aqui en mas las llamaremos solamente etiquetas.
Veamos el primer ejemplo de codigo:
Ahora analicemos los elementos que hay en el ejemplo de arriba:
1) el texto entre <html> y </html> describe el contenido de la página.
2) el texto entre <body> y </body> describe el contenido visible de la página.
3) el texto entre <h1> y </h1> es el título o encabezado de la página (mas adelante veremos el uso de <h1> en profundidad)
4) el texto entre <p> y </p> es el contenido de un párrafo.
**IMPORTANTE: todas las etiquetas deben abrir con <> y cerrar con </> con solo algunas excepciones.
Ahora escriban el codigo del primer ejemplo en el bloc de notas. Hagan clic en "archivo", "guardar como" y coloquenle el nombre "index.html" (sin las comillas) y en "tipo" seleccionen "todos los archivos". Guarden el archivo.
Al abrirlo, veran en el navegador el resultado que hemos obtenido hasta el momento.
Elementos que vamos a utilizar para trabajar: bloc de notas.
Lo primero que hay que tener en cuenta es que el codigo en html se compone basicamente de "tags" o "etiquetas". Las mismas son palabras claves que cumplen una funcion determinada, y tales palabras van encerradas entre < > (Ej; <html>, <body>, <head>, etc.). De aqui en mas las llamaremos solamente etiquetas.
Veamos el primer ejemplo de codigo:
<html><body><h1>Titulo de la pagina</h1><p>Primer parrafo de la pagina</p></body></html>Ahora analicemos los elementos que hay en el ejemplo de arriba:
1) el texto entre <html> y </html> describe el contenido de la página.
2) el texto entre <body> y </body> describe el contenido visible de la página.
3) el texto entre <h1> y </h1> es el título o encabezado de la página (mas adelante veremos el uso de <h1> en profundidad)
4) el texto entre <p> y </p> es el contenido de un párrafo.
**IMPORTANTE: todas las etiquetas deben abrir con <> y cerrar con </> con solo algunas excepciones.
Ahora escriban el codigo del primer ejemplo en el bloc de notas. Hagan clic en "archivo", "guardar como" y coloquenle el nombre "index.html" (sin las comillas) y en "tipo" seleccionen "todos los archivos". Guarden el archivo.
Al abrirlo, veran en el navegador el resultado que hemos obtenido hasta el momento.
Párrafos
El texto de una página puede
agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe
insertarse entre las etiquetas <p> y </p>.
No es necesario insertar la
etiqueta <br> para que un nuevo párrafo aparezca debajo del anterior, ya
que las etiquetas <p> y </p> hacen que se cambie de línea
automáticamente.
Alineaciones
También es posible cambiar
la alineación del texto de cada párrafo. Para ello se modifica el valor del
atributo align, cuyos valores pueden
ser left (izquierda), right (derecha), center (centrado) o justify
(justificado).
Ejemplo
< center>Bienvenidos a mi página.</center>
Marquesinas
Las marquesinas son líneas de texto que
pueden desplazarse de un lado a otro de la ventana en forma de línea.
Para insertar una marquesina, es necesario
insertar el texto entre las etiquetas <marquee> y </marquee>.
Encabezados
Existen una serie de encabezados que suelen
utilizarse para establecer títulos dentro de una página. La diferencia entre
los distintos tipos de encabezado es el tamaño de la letra, el tipo de
resaltado, y la separación existente entre el texto y los elementos que tiene
encima y debajo de él. Hay que tener en cuanta que el navegador del usuario es
el que aplicará el estilo del encabezado por lo que el mismo título se puede
visualizar de forma diferente según el navegador.
Existen seis etiquetas que representan seis
tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de
cierre.
A continuación se muestran los distintos
encabezados existentes:
|
Etiqueta
|
Ejemplo
|
|
<H1>
|
Título 1: HTML
|
|
<H2>
|
Título 2: HTML
|
|
<H3>
|
Título 3: HTML
|
|
<H4>
|
Título 4: HTML
|
|
<H5>
|
Título 5: HTML
|
|
<H6>
|
Título 6: HTML
|
Epemplo
<h3>BIENVENIDOS
A COMPUMAYS</h3>
Hiperenlace
Un hiperenlace, hipervínculo, o vínculo, no es
más que un enlace, que al ser pulsado lleva de una página o archivo.
Aquellos elementos (texto, imágenes, etc.)
sobre los que se desee insertar un enlace han de encontrarse entre las
etiquetas <a> y </a>.
A través del atributo href se especifica la página a la que está asociado el enlace, la
página que se visualizará cuando el usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace a:
www.google.com
Habría que escribir:
<a> href="http://www.aulaclic.com">Visita
www.aulaclic.com</a>
Atributo size (tamaño)
Define el tamaño de la letra. Este tamaño puede ser absoluto o
relativo.
Si hablamos en términos absolutos, existen 7 niveles de tamaño
distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor
size="1" para la letra más pequeña o size="7" para la más
grande.
Ejemplo:
<font size=7>
BIENVENIDOS A COMPUMAYS </font
size=7>
Atributo color
El color del texto puede ser definido
mediante el atributo color. Cada color es a su vez definido por un número
hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas
partes representa la contribución del rojo, verde y azul al color en cuestión.
Por otra parte, es posible definir de una
manera inmediata algunos de los colores más frecuentemente usados para los que
se ha creado un nombre más memotécnico:
Nombre del Color
Aqua
Black
Blue
Fuchsia
Gray
Green
Lime
Maroon
Navy
Olive
Purple
Red
Silver
Teal
White
Yellow
Ejemplo:
<font color="red">Este texto
está en rojo</font color="red">
BEHAVIOR
Este atributo (que quiere decir en inglés
comportamiento) sirve para definir de qué manera se va a efectuar el
desplazamiento del texto. Si es igual a SCROLL (el valor por defecto), el texto
aparece por un lado, se desplaza hasta el otro hasta desaparecer por él, y
vuelve a empezar (como los casos que hemos visto anteriormente). Si es igual a
SLIDE, aparece por un lado y se desplaza hasta llegar al otro extremo, y se
para ahí. Si es igual a ALTERNATE se desplaza alternativamente hacia un lado y
otro, siempre dentro de los límites de la marquesina. Ejemplo:
<MARQUEE BEHAVIOR=ALTERNATE>Este texto
se mueve a un lado y otro, sin desaparecer</MARQUEE>
BGCOLOR
El atributo BGCOLOR imposta un fondo de un
solo color. La sintaxis correcta es:
<BODY BGCOLOR="red">
Es posible sustituir el nombre en inglés con
valores hexadecimales. Por ejemplo, el color rojo (red) se sustituye de esta
manera:
<BODY BGCOLOR="#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.
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:
<BODY
BACKGROUND="sfondo.gif">
