Cabecera y Cuerpo Del Documento HTML

Colegio Nacional Jorge S.
Miranda Horqueta - Paraguay
SOFTWARE
Profesor:
Braulio Bazn
Por:
Royeni Casanova Alison Fabiola Faria Ana Snchez Emilce Macarena
Hugo Arce
Ao 2013
Introduccin
En este material hablaremos sobre como hacer la cabecera y el cuerpo de un documento HTML. Es bueno destacar que un documento HTML es un simple archivo que contiene texto en un lenguaje de marcas especfico. sta informacin, an estando escrita en forma estructurada lo cual la hace encajar en el estndar del lenguaje, es una simple secuencia de caracteres que pueden ser encontrados en un teclado normal.. HTML es un lenguaje de etiquetas (tambin llamado lenguaje de marcado) y las pginas web habituales estn formadas por cientos o miles de pares de etiquetas. De hecho, las letras "ML" de la sigla HTML significan "markup language", que es como se denominan en ingls a los lenguajes de marcado. Adems de HTML, existen muchos otros lenguajes de etiquetas como XML, SGML, DocBook y MathML. La principal ventaja de los lenguajes de etiquetas es que son muy sencillos de leer y escribir por parte de las personas y de los sistemas electrnicos. La principal desventaja es que pueden aumentar mucho el tamao del documento, por lo que en general se utilizan etiquetas con nombres muy cortos. Dentro del material se vern diversos aspectos a tener en cuenta a la hora de poner el encabezado y estructurar el cuerpo de este tipo de documentos.
Cabecera y cuerpo del documento HTML

Cabecera
Cabecera del documento HTML <HEAD> ...... </HEAD> En la cabecera de un documento HTML incluiremos las definiciones generales que afecten a todo el documento, como por ejemplo el ttulo de la pgina que aparecer en la parte superior de la ventana del navegador. Las etiquetas <HEAD> y </HEAD> son las que van a delimitar la cabecera de nuestro documento. Todas las etiquetas de la cabecera son opcionales, aunque se recomienda incluir en todos nuestros documentos la etiqueta <TITLE> correspondiente al ttulo del documento. A continuacin vamos a tratar cada uno de los posibles componentes de la cabecera por separado.
Ttulo del documento

<TITLE>..............</TITLE> El ttulo de nuestro documento viene especificado por las etiquetas: <TITLE> y </TITLE> y, como ya hemos mencionado, este ttulo es el que aparecer en la ventana de nuestro programa navegador. Lo normal y recomendable es que el ttulo guarde relacin con el contenido de nuestro documento, ya que por ejemplo es utilizado por algunos servidores de bsqueda para poder intuir el contenido de nuestro documento. Veamos un ejemplo en el Cdigo fuente 2.
<TITLE>Mi primera pgina Web</TITLE> Cdigo fuente 2
Indicador de refresco del documento

<META http-equiv="refresh" content="nmero_segundos;url=URL de refresco"> Esta etiqueta sirve para indicar un documento que deber sustituir al actual transcurrido un nmero determinado de segundos. Una posible utilidad de esta etiqueta podra ser para
visualizar documentos de forma secuencial, de forma que se empieza por un documento y se pasa al siguiente transcurrido un perodo de tiempo sin necesidad de que la persona que lee el documento realice ninguna accin. Veamos un ejemplo en el Cdigo fuente 3.
<META http-equiv="refresh" content="5;url=http://www.eidos.es"> Cdigo fuente 3
Si insertamos esta instruccin en la cabecera de nuestro pgina HTML, transcurridos 5 segundos sta se refrescar con la pgina Web de portada de: "Villa Eidos".
Indicador de la URL base del documento

<BASE href="URL"> Con esta etiqueta indicamos la localizacin de los ficheros a los que se hace referencia en nuestra pgina Web. Si no incluimos esta etiqueta el navegador entender que dichos ficheros se encuentran en el mismo lugar donde reside nuestra pgina Web. Vemos un ejemplo en el Cdigo fuente 4.
<BASE href="http://www.eidos.es/vulcan/"> Cdigo fuente 4
Si especificamos como URL base de nuestro documento HTML la indicada en este ejemplo y posteriormente hacemos referencia en nuestra pgina a un fichero llamado "aula.htm", se entender que la localizacin del fichero es "http://www.eidos.es/vulcan/aula.htm" .
Cuerpo
Cuerpo del documento HTML: <BODY> ...... </BODY> En el cuerpo de un documento HTML es donde incluiremos las distintas instrucciones del lenguaje junto con el contenido en s de nuestra pgina Web: textos, imgenes, enlaces a otras pginas, etc.. Las etiquetas <BODY> y </BODY> son las que van a delimitar el cuerpo de nuestro documento. Esta posee una serie de argumentos que nos van a permitir variar las caractersticas del documento en su conjunto, como por ejemplo el color del texto o del color de fondo de nuestra pgina web. Antes de analizar los componentes y atributos de BODY vamos a ver como se especifican los colores en un documento HTML. Estos se pueden especificar por su nombre (name) o por su cdigo de color, que es un nmero compuesto de tres pares de cifras hexadecimales que nos indican la proporcin de los colores primarios (rojo, verde y azul) que forman el color deseado (#rrggbb): Nombre Black Teal Cdigo de color #000000 #008080 Color mostrado Negro Teal
Blue Navy Lime White Blanco Purple Yellow Olive Red Maroon Gray Fuchsia Green Silver Aqua
#0000FF #000080 #00FF00 #FFFFFF #800080 #FFFF00 #808000 #FF0000 #800000 #808080 #FF00FF #008000 #C0C0C0 #00FFFF
Tabla 2
Azul Azul marino Lima Prpura Amarillo Oliva Rojo Marrn Gris Fucsia Verde Plata Agua
La etiqueta <BODY> presenta una serie de atributos que van a afectar a todo el documento en su conjunto. Estos atributos nos van a permitir definir los colores del texto, del fondo, y de los hiperenlaces del documento. Incluso nos permitirn insertar una imagen de fondo en nuestra pgina. <BODY background="URL" bgcolor="#rrggbb link="name" vlink="name" > name" text="name"
background="URL". Nos va a permitir mostrar una imagen como fondo de nuestro documento HTML. El camino a esta imagen vendr especificado por la URL que definamos. Si la imagen no rellena todo el fondo del documento, sta ser reproducida tantas veces como sea necesario hasta completar todo el fondo. Si insertas el Cdigo fuente 5 en el documento HTML que creamos como ejemplo en el captulo anterior: Pagina1.htm, este presentar como fondo la imagen "fondo.gif"
<BODY background="fondo.gif"> Cdigo fuente 5
bgcolor=#rrggbb name {bgcolor: Background Color}. Nos va a permitir definir un color para el fondo de nuestro documento. Este atributo ser ignorado si previamente hemos utilizado el atributo background. Inserte el Cdigo fuente 6 en Pagina1.htm y compruebe el resultado.
<BODY bgcolor="blue"> Cdigo fuente 6
text=#rrggbb name. Nos permitir definir un color para el texto de nuestro documento. Por defecto es negro. Inserte el Cdigo fuente 7 en Pagina1.html y compruebe el resultado
<BODY text="red"> Cdigo fuente 7
Y ahora, inserte el Cdigo fuente 8 en el documento y comprueba el resultado.

<BODY bgcolor="yellow" text="navy"> Cdigo fuente 8
link=#rrggbb name. Indica el color que tendrn los hiperenlaces que no han sidoaccedidos. Por defecto es azul. Como todava no sabemos insertar hiperenlaces en nuestro documento vamos a dejar el ejemplo correspondiente para ms adelante. vlink=#rrggbb name {vlink: Visited Links}. Indica el color de los hiperenlaces que ya han sido accedidos. Por defecto es prpura.
Caracteres especiales
Hasta ahora hemos escrito algunos ejemplos de cdigo HTML, pero hemos pasado por alto algunas limitaciones de HTML respecto al uso de caracteres especiales. Una de estas limitaciones es, por ejemplo, el uso de los caracteres < y >, que como ya sabemos indican el inicio y fin de una etiqueta HTML. Pues bien, si quisiramos escribir estos caracteres como parte normal de un texto, el navegador no sabra si se trata de texto normal o del comienzo y final de una etiqueta, o sea, que se hara un lo. Como todo tiene solucin, existen unos cdigos para poder escribir estos caracteres y otros relacionados con las etiquetas los vemos en la Tabla 3. Smbolo < (menor que) > (mayor que) & (ampersand) " (comillas)
Tabla 3
Cdigo < > & "
Para las letras especficas del idioma castellano: las vocales acentuadas, la , la y los signos y , existen los cdigos que muestra la Tabla 4. Letra Cdigo á é í ó ú Letra Cdigo Á É Í Ó Ú Letra
Tabla4
Cdigo ñ Ñ ü Ü ¿ ¡
Para los navegadores actuales, podemos escribir nuestro cdigo HTML de manera directa sin tener en cuenta estos cdigos, pero nunca podemos asegurar que las personas que accedan a nuestras pginas con otros navegadores puedan leerlas correctamente. As que lo ms adecuado es el empleo de los mismos. Otros smbolos especiales aparecen en la Tabla 5. Smbolo Cdigo

Tabla 5
ç Ç © ®
Veamos un ejemplo en el Cdigo fuente 9.

"La inspiración existe, pero tiene que encontrarse trabajando". © Pablo Ruíz Picasso. Cdigo fuente 9
Esta instruccin HTML, debera producir el siguiente resultado: "La inspiracin trabajando". Pablo Ruz Picasso. Para la inclusin de comentarios en nuestra pgina HTML, podemos usar la etiqueta:  Cdigo fuente 10
existe,
pero
tiene
que
encontrarse
Espaciado y saltos de lnea

En HTML slo se admite un nico espacio en blanco separando cualquier elemento o texto, el resto de espacios sern ignorados por el navegador, al igual que las tabulaciones, retornos de carro, etc. Veamos un ejemplo en la Tabla 6. Ejemplo Esta frase no se ver as en el visor
Tabla 6
Resultado Esta frase no se ver as en el visor.
No obstante, s podremos dar el formato que deseemos a nuestras pginas con el empleo de los siguientes elementos del lenguaje HTML:
Inclusin de espacios en blanco:

Nos permitir la inclusin de ms de un espacio en blanco entre dos textos consecutivos, de forma que estos espacios se muestren de forma efectiva en el navegador. Tendremos que incluir tantas expresiones como espacios en blanco se deseen incluir.
Ejemplo Resultado Ejemplo Texto1 Texto2

Tabla 7
Resultado Texto1 Texto2
Salto de lnea: {BR: Break}

Nos permite dar un salto a la lnea siguiente en el punto donde la etiqueta sea insertada.
Ejemplo Esta frase tiene aqu un salto de lnea

Tabla 8
Resultado Esta frase tiene aqu un salto de lnea
Cambio de prrafo: {P: Paragraph}

Permite definir un prrafo, introduciendo normalmente un espacio de separacin de dos lneas con el texto siguiente al punto donde hayamos insertado la etiqueta .
Ejemplo Esta frase tiene aqu un cambio de prrafo
Tabla 9
Resultado Esta frase tiene aqu un cambio de prrafo
La etiqueta de fin prrafo es opcional, no siendo necesario incluirla. Aunque siempre es recomendable delimitar claramente el inicio y final de un prrafo. Adems, cuando usemos esta etiqueta como cerrada ..... , tenemos la posibilidad de incluirle el atributo align el cual indica al navegador la forma de justificar el texto incluido en el prrafo. El formato sera el siguiente: Texto contenido en el prrafo Veamos algunos ejemplos en la Tabla 10. Ejemplo Resultado
Este es un Este es un ejemplo de prrafo ejemplo de prrafo alineado a alineado a la derecha la derecha Este es un Este es un ejemplo de prrafo ejemplo de prrafo centrado centrado
Tabla 10
Lnea Horizontal: <HR> {HR: Horizontal Rule}
Nos permite insertar una lnea horizontal, cuyo tamao podremos determinar a travs de sus atributos. Si no especificamos ningn atributo dibujar una lnea que ocupe el ancho de la pantalla del navegador. Su utilidad es la de permitirnos dividir nuestra pgina en distintas secciones. No ser necesaria la etiqueta de fin </HR>. El formato de la etiqueta con sus posibles atributos es: <HR align= left / right / center noshade size=n width=n > align= left / right / center. Permite establecer la alineacin de la lnea a la izquierda, a la derecha o centrarla. noshade. No muestra la sombra de la lnea, evitando el efecto de tres dimensiones. size=n. Indica el grosor de la lnea en pixels. width=n n%. Especificar el ancho de la lnea, este se podr especificar en pixels (n) o en tanto por ciento del ancho de la ventana (n%). Vamos a ver algunos ejemplos en la Tabla 11.
Tabla 11
Texto preformateado: <PRE> {PRE: Preformatted}

Nos permitir visualizar el texto tal y como se ha escrito, respetando los saltos de lnea, las tabulaciones, y espacios en blanco de todo el texto incluido entre las etiquetas <PRE> y </PRE>. El texto se mostrar con una fuente de espaciado fijo ms pequea que el texto normal. No es recomendable su uso ya que presenta muchas limitaciones y no se obtiene una buena presentacin. Ejemplo <PRE>Este texto est preformateado.</PRE>
Tabla 12
Resultado Este texto est preformateado
Conclusin
En este material hemos conocido algo ms sobre cmo hacer la cabecera y el cuerpo de un documento HTML. Un archivo que contiene un documento HTML puede tener diferentes extensiones. De echo, puede tener cualquier extensin que tu quieras, pero si lo colocas en un archivo con una extensin como "bmp" (usualmente asociada con los archivos de bitmap) puede no ser interpretada en la forma que queremos (como un documento HTML). Entonces listaremos solamente las extensiones que sern normalmente "ledas" por los agentes de usuario como documentos HTML. Hemos visto que laas pginas HTML se dividen en dos partes: la cabecera y el cuerpo. La cabecera incluye informacin sobre la propia pgina, como por ejemplo su ttulo y su idioma. El cuerpo de la pgina incluye todos sus contenidos, como prrafos de texto e imgenes. El cuerpo (llamado body en ingls) contiene todo lo que el usuario ve en su pantalla y la cabecera (llamada head en ingls) contiene todo lo que no se ve (con la nica excepcin del ttulo de la pgina, que los navegadores muestran como ttulo de sus ventanas).
De ah la importancia de este material, que nos ayud a conocer todos los aspectos a tener en cuenta a la hora de poner el encabezado y estructurar el cuerpo de este tipo de documentos.

Cabecera y Cuerpo Del Documento HTML

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Cabecera y Cuerpo Del Documento HTML

Transféré par

Droits d'auteur :

Formats disponibles

Colegio Nacional Jorge S.

Miranda Horqueta - Paraguay

Cabecera y cuerpo del documento HTML

Ttulo del documento

Indicador de refresco del documento

Indicador de la URL base del documento

Y ahora, inserte el Cdigo fuente 8 en el documento y comprueba el resultado.

Cdigo &lt; &gt; &amp; &quot;

Cdigo &ntilde; &Ntilde; &uuml; &Uuml; &#191; &#161;

&ccedil; &Ccedil; &copy; &reg;

Veamos un ejemplo en el Cdigo fuente 9.

Espaciado y saltos de lnea

Resultado Esta frase no se ver as en el visor.

Inclusin de espacios en blanco: &nbsp;

Ejemplo Resultado Ejemplo Texto1&nbsp;&nbsp;&nbsp;&nbsp;Texto2

Resultado Texto1 Texto2

Salto de lnea: <BR> {BR: Break}

Ejemplo Esta frase tiene aqu<BR> un salto de lnea

Resultado Esta frase tiene aqu un salto de lnea

Cambio de prrafo: <P> {P: Paragraph}

Resultado Esta frase tiene aqu un cambio de prrafo

Lnea Horizontal: <HR> {HR: Horizontal Rule}

Texto preformateado: <PRE> {PRE: Preformatted}

Resultado Este texto est preformateado

Vous aimerez peut-être aussi

Cdigo < > & "

Cdigo ñ Ñ ü Ü ¿ ¡

ç Ç © ®

Inclusin de espacios en blanco:

Ejemplo Resultado Ejemplo Texto1 Texto2