Estructura básica de HTML, introducción de textos y creación de marquesinas

HTML


HTML es un acrónimo de Hypertext Markup Language y es una tecnología que nos permite escribir páginas Web. HTML es un lenguaje de computación que entienden los exploradores Web.

HTML permite implementar el mecanismo apropiado para vincular diferentes páginas denominando hipervinculación a esta propiedad. La hipervinculación permite ir de una página a otra simplemente haciendo clic en un vínculo.


Conocer HTML

Con tantas herramientas de desarrollo Web existentes, es muy fácil crear páginas Web sin tener ninguna necesidad de saber HTML. Pero no es el caso crear páginas sin saber con certeza lo que se está haciendo. Cuando algo no funciona como lo estábamos esperando o deseamos algo específico, es cuando se requiere saber donde es necesario realizar correcciones o adecuaciones, y para hacerlo, requerimos introducir o modificar HTML. Si no conocemos HTML estaremos siempre sujetos a la solución que nos pueda brindar la herramienta. Conocer HTML garntiza el control total de nuestras páginas Web.

Estructura básica de un documento HTML

Lo primero que debemos considerar dentro de la organización básica de HTML es el uso de los corchetes angulares < y >. En HTML estos corchetes contienen en su interior código especial llamado ETIQUETA que indican la estructura y el formato del CONTENIDO de la página. HTML está formado por muchas etiquetas que pueden realizar infinidad de tareas para dar formato a nuestras páginas Web.

Tres son las etiquetas (tags) que describen la estructura general de un documento y dan una información sencilla sobre él. Estas etiquetas no afectan a la apariencia del documento y solo interpretan y filtran los archivos HTML.

Las etiquetas tienen propiedades, las cuales son descritas por medio de los Atributos. Un atributo es una opción que permite proporcionar detalles acerca de cómo una etiqueta afectará el contenido. Es importante mencionar que HTML no distingue entre mayúsculas o minúsculas, o una combinación de ambas.

El primer paso para crear una página es crear un documento de texto mediante el editor de texto que desee. Puede utilizar el editor Microsoft Windows que es el Block de notas o cualquier otro editor.

Un editor de texto es un programa que permite crear y modificar archivos digitales compuestos únicamente por texto sin formato, conocidos comúnmente como archivos de texto ó texto plano y son incluidos en el sistema operativo o en algún Paquete de software.

Lo primero que debemos considerar es la estructura general de la página por lo que debemos escribir en ella su contenido.

ETIQUETA
FUNCIÓN

<HTML>

Empieza un documento HTML

<HEAD>

Zona de cabecera

<TITLE>

Zona de título

</TITLE>

Termina zona de título

</HEAD>

Termina zona de cabecera

<BODY>

Zona de cuerpo del documento

</BODY>

Termina zona de cuerpo del documento

</HTML>

Termina documento HTML

Es importante que ninguna de nuestras páginas carezca de título ya que el explorador buscará el título para identificar su página.

TEXTO

Para incluir texto en una página basta teclear éste entre las etiquetas<BODY> y </BODY>; sin embargo, podemos hacer uso de etiquetas para mejorar la apariencia de la información. Las etiquetas que se utilizan con mayor frecuencia para dar formato al texto son:

ETIQUETA
FUNCIÓN

<B> </B>

Texto en negrilla

<I> </I>

Texto en itálica

<U></U>

Texto subrayado

<P>

Etiqueta de párrafo

<BR>

Etiqueta para introducir saltos de línea

<BLOCKQUOTE></BLOCKQUOTE>

Etiqueta para introducir sangría

<FONT> </FONT>

Fuente

A continuación tenemos un ejemplo en el que tenemos la etiqueta <font..> anidada dentro de la etiqueta <p..>.:
<p><center><font color="#993300" size="4" face="Verdana, Arial, Helvetica, MS Sans Serif">Bienvenidos a www.ithinkweb.com.mx</font></center></p>

Este código daría como resultado el siguiente texto:

Bienvenidos a www.ithinkweb.com.mx

Mi primera página

Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes hacerlo con el menú Inicio > Todos los Programas > Accesorios, opción Bloc de notas.

Escribe, en el documento en blanco, el texto siguiente:

<html>
<head>
<title>MI PRIMERA PAGINA</title> </head>
<body bgcolor="#FFFF99">
<font color="#000066" size="5">Estoy realizando mi primera página Web.</font>
</body>
</html> 

Guarda el documento con la extensión html (o si prefieres htm) con el nombre prueba.html

Menú Archivo > Guardar selecciona la carpeta deseada y asígnale un nombre, por ejemplo prueba.html.

Si das doble clic sobre el nombre del archivo prueba.html, éste se abrirá automáticamente en el navegador que tengas instalado en tu computadora.

 

El navegador deberá mostrar una página como la de la izquierda.

 

 

Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos sólamente se mostrará uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por &nbsp.

HTML cuenta con las etiquetas de encabezado, que identifiquen encabezados de secciones en un documento. Estas seis etiquetas de encabezado describen encabezados de diversos tamaños, en orden decreciente de importancia:

<H1>, <H2>, <H3>, <H4>, <H5>, <H6>.

 

En la figura de la izquierda podemos ver los encabezados tal como se verían en una página.

 

 

Estilos de texto

Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse según vayan asociados al tipo de letra o a la información que represente el texto. Todas estas etiquetas necesitan una etiqueta de cierre, y también pueden aplicarse varias etiquetas al mismo texto.

A continuación se muestran algunas etiquetas con ejemplos, asociadas al tipo de letra:

Etiqueta

Significado

Ejemplo

<b>

negrita

HTML de ithinkweb

<i>

cursiva

HTML de ithinkweb

<u>

subrayado

HTML de ithinkweb

<s>

tachado

HTML de ithinkweb

<big>

Aumenta el tamaño de la fuente

HTML de ithinkweb

<small>

Disminuye el tamaño de la fuente

HTML de ithinkweb

<br>

Etiqueta para introducir saltos de línea

 HTML de ithinkweb
ithinkweb

<blockquote>

Etiqueta para introducir sangría
HTML de ithinkweb

<font>

Fuente
HTML de ithinkweb

Párrafos <p>

El texto de una página puede agruparse en párrafos. Para ello, el texto de cada uno de los párrafos debe insertarse entre las etiquetas <p> y </p>. Las etiquetas <p> y </p> hacen que se cambie de línea automáticamente. También es posible cambiar la alineación del texto de cada párrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado).

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Esta es una página dedicada a estudiantes de Bachillerato.

                Habría que escribir:

<p>Bienvenidos a mi p&aacutegina.<p>

<p>Esta es una p&aacutegina dedicada a estudiantes de Bachillerato.</p>

Otra forma de cambiar la alineación del texto es mediante las etiquetas <div> y </div>, para las que también existe el atributo align. La etiqueta <div>, al igual que la etiqueta <p>, se utiliza para agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor.

También es posible insertar el texto entre las etiquetas <center> y </center> para que aparezca centrado.

Por ejemplo, para insertar el texto:

Bienvenidos a mi página.

Habría que escribir:

<p><center>Bienvenidos a mi p&aacutegina.</center></p>

Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de línea (como en el caso de <p> y <div>), son las etiquetas <span> y </span> y que se utlizan comunmente en las hojas de estilo. 

Marquesinas <marquee>

Las marquesinas son líneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de línea y se utilizan las etiquetas <marquee> y </marquee>.

La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero se pueden modificar estas propiedades..
Con el atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez).
Con el atributo direction puede modificarse la dirección en la que se moverá el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha).
También es posible establecer un color de fondo, a través del atributo bgcolor.

Para obtener la siguiente marquesina debemos usar el código que aparece enseguida:

ithinkweb.com.mx

<marquee bgcolor="#000033" behavior="alternate" direction="right">
<b><font color="#FFFFCC" size="5">ithinkweb.com.mx </font></b> </marquee>

Ir a Inicio