y . La primera es de apertura y la segunda de cierre. El texto que se encuentra entre dos etiquetas es el contenido del elemento. Las etiquetas no son sensibles a las mayúsculas y minúsculas, o sea es lo mismo que .
Unidad 2. Estructura de una página La estructura básica de una página es: ... ... Identificador del tipo de documento Todas las páginas web escritas en HTML tienen que tener la extensión html o htm. Al mismo tiempo, tienen que tener las etiquetas y . Entre las etiquetas y estará comprendido el resto del código HTML de la página. Por ejemplo: ... 2
Prof. Andrea Delogu – Prof. Fabiana Lorenzo
6to 12- 6to 11
Cabecera de la página La cabecera de la página se utiliza para agrupar información sobre ella, como puede ser el título. Está formada por las etiquetas y . La etiqueta va justo debajo de la etiqueta . Por ejemplo: ... ... Entre las etiquetas y , las etiquetas que podemos encontrar y más se utilizan son: , , <script> (estas etiquetas las veremos más adelante), <meta> y la etiqueta que te explicamos a continuación.
Título de la página El título de la página es el que aparecerá en la parte superior de la ventana del navegador (en la barra de título), cuando la página esté cargada en él. Para asignar un título a una página es necesario escribir el texto deseado entre las etiquetas y . Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas y . Por ejemplo: Curso de HTML ... Cuerpo del documento El cuerpo del documento contiene la información propia del documento, es decir lo que queremos que se visualice, el texto de la página, las imágenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas y , que van justo debajo de la cabecera. Por ejemplo: Curso de HTML ... 3
Prof. Andrea Delogu – Prof. Fabiana Lorenzo
6to 12- 6to 11
Ejemplo - ¡Vamos a hacer una pequeña prueba! Abrimos el "Block de Notas". Escribe en el mismo, el siguiente texto: Mi primera página Web Hola a todos. Guardá el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML). Abre un navegador de Internet (Internet Explorer, Firefox, Opera, etc.). Selecciona "File" y luego "Open". Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar "pagina1.html"- elígelo y presiona "Open". Ahora tú ves la dirección, por ejemplo "C:\Mis Documentos\pagina1.html". Presiona "OK" y el navegador mostrará la página. Otra forma: Hacer doble clic sobre el archivo creado y se abrirá automáticamente el navegador. Veamos otro ejemplo. Una página Web Hola a todos. Este texto es en negrita Esta es una etiqueta HTML:
Este texto es en negrita.
El elemento HTML comienza con la etiqueta de apertura (etiqueta que nos muestra el texto en negrita). El contenido de dicho elemento es: Este texto es en negrita. El fin del elemento HTML es con la etiqueta de cierre .
¿Qué son los atributos de las etiquetas? Muchas etiquetas llevan atributos. Los mismos proveen de mayor información a los elementos HTML. Los atributos siempre van con la estructura: nombre ="valor". Los atributos siempre van en la etiqueta de apertura. Los valores siempre hay que ponerlos entre comillas. 4
Prof. Andrea Delogu – Prof. Fabiana Lorenzo
6to 12- 6to 11
Un ejemplo de los atributos sería: Hola a todos. Este texto es en negrita Resultado Hola a todos. Este texto es en negrita
En la etiqueta podemos observar el atributo bgcolor = (color de fondo) y el valor "#FFFF00"(representa el color amarillo en hexadecimal). Esto quiere decir que el color de fondo de la página será amarillo. Sería equivalente a poner: ... ... La imagen de fondo puede establecerse a través del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una página sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la página, tendremos que escribir: ... ... En el caso de que la imagen no se encuentre en el mismo directorio que la página, y se encuentre dentro de la carpeta imágenes, que sí se encuentra en el mismo directorio que la página, tendremos que escribir: ... ... A través de la etiqueta también es posible establecer el color del texto de la página a través del atributo text. Por ejemplo, para hacer que el color del texto de una página sea de color rojo, tendremos que escribir: ... ...
5
Prof. Andrea Delogu – Prof. Fabiana Lorenzo
6to 12- 6to 11
Entre el borde de la ventana y el contenido de la página existe un margen, cuyo tamaño en píxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) y topmargin (margen superior). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una página no tenga margen superior, y tenga un margen izquierdo de 20 píxeles, tendremos que escribir: ... ...
Un consejo con respecto al uso de minúsculas. Si bien HTML acepta tanto etiquetas en mayúscula como en minúscula , el World Wide Web Consortium (W3C) recomienda el uso de minúsculas. Además XHTML (la siguiente versión de HTML) acepta solo minúsculas. Es por eso que recomendamos acostumbrarse a usar minúsculas cuando escribas tus códigos HTML.
Etiquetas básicas de HTML (Las etiquetas más simples y de uso más común en HTML.) Headings Nos definen el tamaño de un título o cabecera.
. Código: Párrafos
Este es el primer párrafo.
Y este es el segundo párrafo.
párrafo centrado.
párrafo alineado a la izquierda.
párrafo alineado a la derecha.
Comentarios La etiqueta se utiliza para insertar un comentario dentro del código que estamos escribiendo. El mismo es ignorado por el navegador al momento de leerlo. Los comentarios nos sirven para explicar mejor el código y son de gran ayuda en el momento que necesitemos editarlo. * Nota que el signo de exclamación se coloca solo al principio del código.
Salto de línea El salto de línea está definido con la etiqueta
. Es utilizado cuando queremos terminar una línea sin necesidad de terminar con el párrafo. La etiqueta
obliga a saltar de línea dondequiera que la ubiquemos. Código: Esto es
un salto de lí
nea. Resultado Esto es un salto de lí nea.
7
Prof. Andrea Delogu – Prof. Fabiana Lorenzo
6to 12- 6to 11
Trazar una línea La etiqueta
...
Este texto es un párrafo.Este texto es un párrafo.Este texto es un párrafo.Este texto es un párrafo.Este texto es un párrafo.Este texto es un párrafo.Este texto es un párrafo.Este texto es un párrafo.
Los comentarios no se visualizan
Las líneas horizontales son muy útiles para separar secciones.
Sección 1La sangría es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetasy. Esta etiqueta en un principio se definió para delimitar citas pero que como la mayoría de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiquetaobliga a que el texto aparezca en una nueva línea. Insertando el texto entre varias etiquetasyse consigue que los márgenes sean mayores. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicarles que hay una nueva sección. Habría que escribir: Queridos usuarios,tengo el placer de comunicarles que hay una nueva sección.
Caracteres especiales Muchas veces necesitamos incluir en nuestros textos, signos que tienen un significado especial en HTML (por ej. "