OBJETIVOAl terminar este tema, serás capaz de conocer la estructura básica de una página web programada con HTML e identificarás los elementos principales que dan formato al documento.
INTRODUCCIÓN
Una vez aprendidos en el tema anterior los conceptos básicos que dieron origen al HTML, entraremos en materia para aprender cómo se escriben las instrucciones para programar un sitio de Web.
 Un sitio web es un conjunto de páginas ligadas entre si. En lo que respecta a este tema, nos enfocaremos en el estudio de la estructura básica de una página: cabecera y cuerpo. Es muy importante tener claros estos dos conceptos ya que en los temas consecutivos aprenderás a incluir elementos que le dan forma a la página y forman parte de esas secciones.
Para la creación de una buena página debemos tener en cuenta dos aspectos importantes: el primero es el conocimiento técnico para crear el código HTML, y el segundo aspecto es el buen diseño para la presentación de la información.
Por el momento, profundizarás tu conocimiento sobre la parte técnica de la creación de páginas Web.
Subtemas:2.1 ¿Cómo escribir en HTML?2.2 La estructura básica de una página en HTML2.3 Cabecera del documento (head)2.4 Cuerpo del documento (body)
2.1 ¿Cómo escribir en HTML?
Una página en HTML es un archivo de texto simple, que puede ser programado desde en el Notepad de Windows o hasta en un editor de texto avanzado, y que conitiene una serie de instrucciones identificadas con etiquetas para que el explorador pueda leer su contenido.
Los archivos de HTML tienen comúnmente las extensiones .html o .htm
Es importante que sea cual sea el medio por el cual se programa la página, se mantengan ciertas consideraciones de orden y limpieza del documento.
 A continuación, algunas recomendaciones: |
| 1. Escribir todas las etiquetas en MAYÚSCULAS. |
| 2. Una etiqueta puede contener atributos o propiedades que afectan la forma en que se muestra la información. Los atributos se escriben en minúsculas y deben sus valores de estar enmarcados por doble comillas (" "). |
3. Para que una página esté bien programada, las etiquetas deben de estar propiamente acomodadas; se deben de ordenar la primera y última etiqueta en la secuencia correcta. Esencialmente las etiquetas se colocan de afuera hacia dentro.Veamos el ejemplo:
Incorrecto:
<P>Esta es una frase con<B>negritas</P></B>
Correcto:
<P>Esta es una frase con<B>negritas</B></P> |
2.2 La estructura básica de una página en HTML es:
| index.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. |
|
|
|
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.
Dentro de estas dos etiquetas identificadoras se distinguen dos secciones principales:
 La cabecera (<HEAD>...</HEAD>)
El cuerpo (<BODY>...</BODY>)
2.3 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 información contenida en la etiqueta 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:
| <BASE> | Define la liga de origen de todas las ligas situadas a lo largo del sitio completo. |
| <LINK> | Define una referencia a otro documento. |
| <META> | Describe las características generales de la programación que el autor desee incluir. Ejemplo: Si deseas incluir el estándar en que esta programada aparecerá algo como: |
| <TITLE> | Es el título de la página y se despliega en la parte superior del navegador. Ejemplo: |
| <STYLE> | Define características de formato sobre los elementos de la página. Ejemplo: El tipo de letra que será utilizado. |
| <SCRIPT> | Ejecutar comandos o programación que complementan el HTML. Ejemplo: Incluir una línea de programación en Javascript para desplegar una cintilla de noticias. |
|
| Para editar la cabecera de las páginas, sigue estos pasos: |
En la pestaña de HTML 
 1. Para editar la cabecera desde el editor, da un clic en el icono  y aparecerá un ventana de diálogo.2. Por lo general solo se llena la información de los primeros dos campos: título de la página y el tipo de escritura. Nota: Siempre define el tipo de escritura como US/Western European, para que tus documentos se desplieguen correctamente en los navegadores..3. Da un clic OK. |
En la pestaña de Design  Se pueden emplear los pasos descritos para la pestaña de HTML. |
| TIPS |
Dentro de la etiqueta de <HEAD>...</HEAD> no incluyasinformación que sea destinada a desplegarse dentro el documento.
2.4 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.
Un ejemplo de lo anterior seria:
| index.html |
<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:
| bgcolor | Determina el color del fondo de la página. |
| background | Especifica una imagen determinada para ser usada como fondo de la página. |
| text | Color del texto de la página. |
| link | Color de las ligas o enlaces que contiene la página. |
| vlink | Color de las ligas o enlaces visitadas dentro de la página. |
| alink | Color que aparece al darle clic sobre una liga o enlace. |
| topmargin | Es la distancia en píxeles que existe entre la orilla superior del navegador y el contenido. |
| leftmargin | Es la distancia en píxeles que existe entre la orilla izquierda del navegador y el contenido. |
| marginheight | Tamaño del margen superior e inferior. |
| marginwidth | Tamaño de l margen izquierdo y derecho. |
|
| Para editar la etiqueta de BODY dese el editor: |
En la pestaña de HTML
 1. Posiciona el cursor sobre la etiqueta de <BODY>.2. Aparecerá en el Panel de Propiedades, la listas de ajustes que se pueden hacer para esa etiqueta.3. Selecciona o introduce los valores que consideres apropiados para tu página, dando un clic en cada campo. |
| En la pestaña de Design Sigue las indicaciones descritas en la pestaña de HTML. |
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.
| TIPS |
Dentro de la etiqueta de <BODY>...</BODY> se incluye toda la información que es destinada a desplegarse dentro el documento.
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.
| RECUERDA QUE... |
 La estructura básica de una página en HTML está compuesta por dos secciones: cabecera (HEAD) y cuerpo (BODY).
<HEAD> y <BODY> son etiquetas cerradas: <HEAD>...</HEAD> y <BODY>...</BODY>
Todas las etiquetas se ordenan de afuera hacia dentro |
El objetivo de esta actividad es que seas capaz de programar tu primer página en HTML, utilizando las etiquetas y atributos estudiados hasta este momento.
La actividad consiste en programar, utilizando el Notepad de Windowscomo editor, una página de HTML que contenga las características a continuación descritas:
| PASOS: |
| 1. Abrir un documento nuevo en Notepad. |
 El Notepad de Windows podrás encontrarlo en el menú principal: Inicio > Programas > Accesorios.
|
| 2. Para empezar el documento incluye las etiquetas que definen el HTML (<HTML>..</HTML>) |
| 3. Agrega la etiqueta de la cabecera (<HEAD>..</HEAD>), incluyendo etiquetas de Meta-información. Por ejemplo el título de la página. |
| 4. Enseguida agrega la etiqueta del cuerpo (<BODY>..</BODY>) incluyendo al menos 2 atributos de la etiqueta, tales como color de fondo, color de texto, etc. Para seleccionar los colores que deseas incluir en tu página puedes consultar este sitio. |
| 5. Entre las etiquetas del <BODY>..</BODY> escribe una oración sencilla. |
| 6. Graba el documento creado con el nombre de index.html |
| 7. Para poder ver si es correcta la programación, abre el documento desde un navegador (Internet Explorer) de la siguiente forma: |
Abre una ventana del navegador dando doble clic sobre el icono correspondiente.
Desde el menú de Archivo, ir a la opción de ABRIR, la cual desplegará una ventana desde donde localizarás el archivo que creaste, utilizando el botón de examinar. El documento sera mostrado en el navegador en base a la programación que tu hayas creado.
|
| 8. El documento index.html lo debes enviar a tu tutor por medio de un mensaje antes de la fecha límite de esta actividad para que lo califique. Recuerda que esta actividad vale el 10% de tu calificación final. |
|
|
|
|
|
|
No hay comentarios:
Publicar un comentario