Entradas
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet. Está compuesto por una seríe 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.
El lenguaje html es un lenguaje basado en etiquetas, las cuales se abren con un "<" y se cierran con ">". Lo que ponemos dentro lo interpreta nuestro navegador y lo muestra en la página. Tenemos etiquetas de comienzo, por ejemplo <B> y de cierre, por ejemplo </B>.
Los archivos HTML
- Los archivos HTML deben tener una extensión “htm” o “html” (ej. misitio.htm o misitio.html).
- Para crear un archivo HTML solo hace falta un editor de texto.
- Un archivo HTML está compuesto por etiquetas.
- Las etiquetas le dicen al navegador (Ej: Internet Explorer, Firefox, Google Chrome, Opera, Safary, etc.) como mostrar la página Web.
DISEÑANDO NUESTRO PRIMER SITIO
Si estás usando Windows, abre el "Block de Notas".
Ejemplo:
Escribe en el mismo, el siguiente texto:
Código
<html>
<head>
<title>
Mi primera página Web
</title>
</head>
<body>
Hola a todos.
</body>
</html>
Resultado : Hola a todos.
1. Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).
2. Selecciona el archivo y clic en menú contextual.
3. Elegir “Abrir con” y designar el tipo de explorador (Internet Explorer, Firefox, Chrome, etc.).
EXPLIQUEMOS EL EJEMPLO
<html> -------> Indica al navegador que abre un archivo HTML.
<head> ------->Apertura de la cabecera del documento. Sección que no se muestra en la pantalla. <title>Mi primera página Web
</title> -------> Título de la página.
</head> ------->Cierre de la cabecera del documento.
<body> -------> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.
Hola a todos. -------> Texto que va a ser mostrado por el navegador.
</body> ------->Cierre del cuerpo del documento.
</html> ------->Cierre del archivo HTML
La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.
Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página (<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento. Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".
CABECERAS Y PÁRRAFOS
Nos encontramos con 6 tipos de cabeceras. La etiqueta es <H1> (header: encabezado) para la más grande y <H6> para la más pequeña. Todas con sus cierres, lógicamente. Tener en cuenta que la <H4> es la del tamaño predeterminado y, por tanto, sólo veremos que está en negrita, como toda cabecera que se precie, y que no nos hace falta poner la <BR> porque ya se produce un salto.
PÁRRAFOS
Los párrafos se definen como bloques de texto a los que podemos aplicar algún atributo. La etiqueta es <P> que, algunos programas usan con la correspondiente etiqueta de cierre y para otros no hace falta ya que se considera bloque desde esa etiqueta hasta la siguiente. De todas formas, ¿qué es un texto sino una sucesión de párrafos?
El atributo más importante del párrafo es ALIGN (alinear) que va a tener como valores posibles: left (izquierda, el predeterminado), center (centrado) , right (derecha) y justify (completa).
Este atributo se puede aplicar, con las nuevas versiones HTML, a muchas etiquetas.
La etiqueta <P> puesta en medio de una parrafada lo que hace es meter un espacio más
grande que el que metía un <BR>, como vemos a continuación:
Pero aún podemos meter más espacios, si los necesitamos. Para ello ponemos varios <BR>
o alternamos las etiquetas como muestro aquí:
Una curiosidad es el atributo DIR="rtl" (direction), que hace que los textos se desplacen a la
derecha si se aplica a una celda de tabla o a un párrafo; y hace que se lean las letras al revés
si va dentro de la etiqueta <BDO> (bi-directional override).
La etiqueta <FIELDSET>, creada para dejar bonitos los formularios, se puede aplicar a texto normal y a más elementos. Lo que hace es crear un cuadrito alrededor con un título. Va acompañada de <LEGEND> que es donde se pone el título y que tiene como atributo ALIGN con los valores right, center, left (predeterminado), top (predeterminado) y bottom (estos dos últimos para que se sitúe arriba o abajo del cuadrito). Mejor lo vemos:
Tener en cuenta que el cuadrito se extenderá a lo largo de la pantalla ya que aún no tiene atributos de longitud. Si queremos acortarlo deberemos meterlo en una tabla, donde sí que podemos controlar la anchura. Se puede cambiar los colores mediante los estilos, que veremos más adelante.
</title> -------> Título de la página.
</head> ------->Cierre de la cabecera del documento.
<body> -------> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.
Hola a todos. -------> Texto que va a ser mostrado por el navegador.
</body> ------->Cierre del cuerpo del documento.
</html> ------->Cierre del archivo HTML
La primera etiqueta del archivo es <html>. Esto le indica al navegador que se trata de un archivo HTML. Para cerrar el archivo usamos </html>. Todo lo que se encuentra entre las dos etiquetas es el código HTML de la página.
Luego vemos la etiqueta <head>. Lo que sigue a continuación hasta su cierre </head>, es la cabecera del documento y no se muestra en la pantalla. Aquí colocamos información tal como el título de la página (<title>Mi primera página Web</title>), palabras claves para los motores de búsqueda, una descripción de la página y otros datos del documento. Entre las etiquetas <body> y </body> se encuentra el cuerpo del documento y el contenido que se coloque en esta sección es el que veremos en pantalla, como por ejemplo, "Hola a todos.".
CABECERAS Y PÁRRAFOS
Nos encontramos con 6 tipos de cabeceras. La etiqueta es <H1> (header: encabezado) para la más grande y <H6> para la más pequeña. Todas con sus cierres, lógicamente. Tener en cuenta que la <H4> es la del tamaño predeterminado y, por tanto, sólo veremos que está en negrita, como toda cabecera que se precie, y que no nos hace falta poner la <BR> porque ya se produce un salto.
PÁRRAFOS
Los párrafos se definen como bloques de texto a los que podemos aplicar algún atributo. La etiqueta es <P> que, algunos programas usan con la correspondiente etiqueta de cierre y para otros no hace falta ya que se considera bloque desde esa etiqueta hasta la siguiente. De todas formas, ¿qué es un texto sino una sucesión de párrafos?
El atributo más importante del párrafo es ALIGN (alinear) que va a tener como valores posibles: left (izquierda, el predeterminado), center (centrado) , right (derecha) y justify (completa).
Este atributo se puede aplicar, con las nuevas versiones HTML, a muchas etiquetas.
La etiqueta <P> puesta en medio de una parrafada lo que hace es meter un espacio más
grande que el que metía un <BR>, como vemos a continuación:
Pero aún podemos meter más espacios, si los necesitamos. Para ello ponemos varios <BR>
o alternamos las etiquetas como muestro aquí:
Una curiosidad es el atributo DIR="rtl" (direction), que hace que los textos se desplacen a la
derecha si se aplica a una celda de tabla o a un párrafo; y hace que se lean las letras al revés
si va dentro de la etiqueta <BDO> (bi-directional override).
La etiqueta <FIELDSET>, creada para dejar bonitos los formularios, se puede aplicar a texto normal y a más elementos. Lo que hace es crear un cuadrito alrededor con un título. Va acompañada de <LEGEND> que es donde se pone el título y que tiene como atributo ALIGN con los valores right, center, left (predeterminado), top (predeterminado) y bottom (estos dos últimos para que se sitúe arriba o abajo del cuadrito). Mejor lo vemos:
Tener en cuenta que el cuadrito se extenderá a lo largo de la pantalla ya que aún no tiene atributos de longitud. Si queremos acortarlo deberemos meterlo en una tabla, donde sí que podemos controlar la anchura. Se puede cambiar los colores mediante los estilos, que veremos más adelante.
No hay comentarios:
Publicar un comentario