INSTITUTO TECNOLÓGICO
SUPERIOR
CENTRAL TÉCNICO
.jpg)
Tema: Estructuras básicas de la pagina de
HTML
CURSO: 4D1
Docente: Ing. Julio Calvopiña H., MSc
Año lectivo:
2015-2016
HTML
Estructura básica de la pagina HTML
La primera parte de una página HTML es el identificador del lenguaje de programación. En esta sección se le indica a los exploradores (Internet Explorer, Netscape Navigator, etc.) qué tipo de información van a leer.
Para el caso del HTML, el identificador es la etiqueta <HTML>…</HTML>. Éstas deben ser la primera y última etiquetas respectivamente, que aparecen en el documento.
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código
| <html> <head> <title>Esto es el título de la página.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html> |
<HTML> Indica el inicio del documento.
<HEAD> Define el inicio de la cabecera.
<TITLE> Inicia el título del documento.
</TITLE> Fin del título del documento.
</HEAD> Define el fin de la cabecera.
<BODY> Inicio del cuerpo del documento.
</BODY> Fin del cuerpo del documento.
</HMTL> Indica el fin del documento.
Dentro de estas dos etiquetas identificadoras se distinguen dos
secciones principales:
La cabecera (<HEAD>...</HEAD>)
El cuerpo (<BODY>...</BODY>)
secciones principales:
La cabecera (<HEAD>...</HEAD>) El cuerpo (<BODY>...</BODY>)
Una estructura HTML se empieza con la etiqueta <html> y acaba con </html>. Todo lo que esté en medio será la página web. Dentro de <html></html> se encuentran 2 partes diferenciadas.
La primera <head></head> es la cabecera de la página. Aquí irán cierta información que no es directamente el contenido de la página. Aquí se pone el título de la página, los metadatos, estilos, código javascript (todo esto se estudiará en capítulos venideros). La primera que se suele estudiar es <title></title>, que indica el título de la página (lo que el navegador pone en la parte superior izquierda).
La segunda parte es <body></body>. Aquí va propiamente el contenido de la página: fotos, párrafos, formularios, etc. Por ejemplo, siguiendo con el ejemplo de la página anterior, el siguiente código
<html>
<head> <title>Esto es el título de la página.</title> </head> <body> Hola mundo!<br> <b>Esto es negrita.</b><br> <i>Y esto itálica.</i><br> </body> </html> |
Ver ejemplo
Observad el título en la parte superior izquierda de la página. Además, dentro de <body></body> distinguimos varias etiquetas:
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
<br> => Indica salto de línea. En HTML un salto de línea normal (púlsando la tecla Enter) no produce un salto de línea en el resultado. Es necesario escribir <br> (u otra etiqueta similar).
<b></b> => Indica comienzo y fin de negrita.
<i></b> => Itálica.
También observamos el código &iaacute; => Esto indica que queremos poner una "i" con acento, es decir, "í". Esto se explicará en un capítulo posterior.
Es importante mencionar que las etiquetas se pueden escribir indistintamente en mayúsculas o minúsculas, es decir <b>Esto es negrita.</b> y <B>Esto es negrita.</B> produce el mismo resultado. Por otro lado, toda etiqueta que se abre (es decir, se pone la etiqueta sin la barra /) debe cerrarse (es decir, poner su equivalente con el símbolo /), si no, el navegador podría dar resultados inesperados. Excepciones a esto son algunas etiquetas que no lo necesitan, como <br> o <hr>.
Cabecera del documento (head)
La cabecera está definida por las etiquetas <HEAD>...</HEAD>.
Dentro de éstas se definen las características generales que
afectarán a todo el documento.
En ella aparecen por ejemplo: el título de la página, la versión del
HTML en que fue escrita, algunos comentarios del autor o incluso
puede contener programación avanzada en algún otro lenguaje para Internet. Al conjunto de estos
datos se le llama Meta-información ("información acerca de").
La cabecera está definida por las etiquetas <HEAD>...</HEAD>.
Dentro de éstas se definen las características generales que
afectarán a todo el documento.
En ella aparecen por ejemplo: el título de la página, la versión del
HTML en que fue escrita, algunos comentarios del autor o incluso
puede contener programación avanzada en algún otro lenguaje para Internet. Al conjunto de estos
datos se le llama Meta-información ("información acerca de").
La información contenida en la etiqu
eta de <HEAD>...</HEAD> no se despliega directamente en el navegador, si no que afecta a las propiedades generales de la página, por esta razón no debe de escribirse ninguna instrucción o comentario ajeno a las etiquetas estandarizadas propias de esta parte del documento.
De acuerdo al estándar HTML, las etiquetas válidas a utilizar dentro de la cabecera son las siguientes:
|
Cuerpo del documento (body)
El cuerpo es la segunda sección de la estructura del HTML y está definida por las etiquetas <BODY>...</BODY>.
Dentro de las etiquetas del cuerpo se localiza toda la información que será desplegada en los exploradores. Por ejemplo, podemos encontrar elementos tales como: encabezados, textos, tablas, imágenes, animaciones, etcétera, que contienen sus propios atributos y que repasaremos una a una en los siguientes temas.
A su vez, la etiqueta del cuerpo <BODY>...</BODY>, contienen atributos que controlan la parte visible del documento. Estos atributos o propiedades son popularmente usados para agregar color y diseño a la página.
<BODY bgcolor="white” text="blue" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
.....Este es el cuerpo de mi página
</BODY>
Los atributos comúnmente utilizados dentro de la etiqueta <BODY> son los que a continuación se listan:
Una vez asignados los atributos de la etiqueta <BODY>. ..</BODY>, se puede continuar programando el contenido principal del documento, que estudiará punto por punto en el tema siguiente. CONCLUSIÓN Aprendimos a largo de este tema que las secciones principales de un documento en HTML son HEAD y BODY. El HEAD contiene las características que darán formato al documento y el BODY contiene los elementos que son desplegados en el explorador. Ambas secciones contienen etiquetas y atributos propios que influyen en la forma en que se mostrará la información.
Mas información relacionado con la estructura básica de la pagina html :
vídeo sobre la estructura básica de la pagina HTML
|
La estructura básica de una página en HTML está compuesta por dos secciones: cabecera (HEAD) y cuerpo (BODY).
No hay comentarios:
Publicar un comentario