Soft-Party: Comandos Básicos de HTML - Programación páginas WEB en HTML

Unidad # II
Comandos básicos de HTML

Definición.- El documento HTML, no es más que el texto definido entre las marcas o etiquetas:

<HTML>
......................
</HTML>

Un documento HTML siempre se compone de las siguientes 2 partes:

<HTML>

<HEAD>Cabecera del documento
</HEAD>

<BODY>Contenido del documento
</BODY>

</HTML>

Características principales del documento HTML.

Cabecera: Se inicia mediante el comando <HEAD> y se termina con </HEAD>. Dentro de la cabecera hay información del documento, que no se ve en la pantalla principal, y que precisa las características del documento, principalmente el título del documento.
El título del documento se declara entre las etiquetas <TITLE>y</TITLE>. El título debe ser breve y descriptivo de su contenido, pues será lo que vean los demás cuando añadan nuestra página a su bookmark (o libro de direcciones favoritas).
Cuerpo: Se inicia mediante el comando <BODY> y se termina con el comando </BODY>. Este comando aepta numerosos modificadores. Dentro del cuerpo del documento se incluye cualquier carácter imprimible.

En la práctica algunos visualizadores no necesitas las etiquetas de comienzo y cierre de <HTML>, <HEAD> y <BODY> para interpretar un documento HTML. Sin embargo, cuando diseñemos una página Web debemos tener en cuenta la mayoría de usuarios posibles, por lo que es muy recomendable incluir estas marcas.

Tomando en cuenta con estos detalles, a continuación describiremos las etiquetas básicas de HTML que se pueden incluir en el cuerpo de un documento HTML.

ETIQUETAS SIMPLES:

- <P>: Sirve para separar párrafos en HTML, Además de introducir un retorno de carro (Salto de línea), fuerza un segundo retorno de carro para dejar una línea en blanco entre un párrafo y el siguiente. De esta manera los párrafos quedan más espaciados y el texto se vuelve más legible, en esta etiqueta el fin es opcional </P>.

Por defecto, el párrafo de un documento HTML está justificado a la izquierda, Pero podemos modificar la alineación horizontal de un párrafo mediante el atributo ALIGN de la etiqueta <P>, que puede tomar los valores siguientes.

LEFT: El párrafo es justificado a la izquierda. Valor por defecto.
CENTER: El párrafo es centrado.
RIGHT: El párrafo es justificado a la derecha.

- <BR>: Introduce un retorno de carro (o salto de línea) en el punto del documento en el que es colocada. Es equivalente al punto y aparte de un texto normal.

Esta etiqueta es vacía de manera que no necesita de la etiqueta de fin de marca.

- <HR>: Permite trazar una línea horizontal que separa distintas secciones de una página HTML, por defecto, las líneas horizontales van de la parte izquierda de la ventana del visualizador a la derecha... Por otro lado tienen la parte superior oscura y la inferior clara, por lo que dan una sensación de relieve.

Esta etiqueta sólo requiere la etiqueta de comienzo.

Esta etiqueta tiene varios modificadores que permite cambiar el aspecto de la línea horizontal (ancho, longitud,...).

- <CENTER>: Para centrar una parte del documento, se delimita lo que se desea centrar mediante el comando <CENTER>...</CENTER>.

ETIQUETAS DE ENCABEZAMIENTO:

HTML dispone de seis cabeceras, o tipos de letra predefinidos de distinto tamaño, que se utilizan para marca los títulos o resaltes en las páginas. Se activan con el comando <Hn> y se desactivan con </Hn>, donde n es un número de 1 a 6. Siendo el número indicativo del tamaño. El tamaño mayor es correspondiente al número 1.

<H1>Nivel de encabezado 1</H1>

<H2>Nivel de encabezado 2</H2>

<H3>Nivel de encabezado 3</H3>

<H4>Nivel de encabezado 4</H4>

<H5>Nivel de encabezado 5</H5>

<H6>Nivel de encabezado 6</H6>

Puede experimentar en el ejemplo anterior, cambiando el número para comprobar el efecto que se logra.

Los títulos de encabezamiento requieren la marca de fin, y siempre provocan un salto de línea, aunque no se les indique.

DANDO ESTILO AL TEXTO:

Las marcas de estilo de texto especifican el tipo de letra (negrita, cursiva,...), tamaño, color que se desea que aparezca el texto.

TIPOS DE LETRAS:

Algunas de las etiquetas que permiten especificar la tipografía de los caracteres son las siguientes:

<B>Negrita (Bold)</B>

<I>Cursiva (Italic)</I>

<BLINK>Parpadeante (Blink)</BLINK>

<TT>Tamaño fijo (TypeWriter)</TT>

<EM>Énfasis (Emphasis)</EM>
<STRONG>Gran énfasis (Strong)</STRONG>
<U>Subrayado (Underline)</U>

Todas estas marcas requieren etiquetas de comienzo y fin, y se pueden anidar.

TAMAÑO DEL TEXTO.

Para modificar el tamaño se utiliza el atributo SIZE de la marca <FONT>, de la siguiente manera:

<FONT SIZE="tamaño">Texto</FONT>

El comando <FONT> requiere la etiqueta de cierre.

HTML define siete tamaños de letra distintos, siendo el tamaño 3 el que se adopta por defecto. Sin embargo, la mayoría de los navegadores permiten establecer cuál es la correspondencia real del tamaño 3. Así, se `puede hacer que el tamaño 3 corresponda a una fuente Arial de 16, o una Times de 8.

Existen dos formas de establecer el tamaño de un trozo de texto.

Tamaño de texto absoluto.

<FONT SIZE="argumento"></FONT>
donde argumento es un número entre 1 y 7.
Tamaño de letra relativos.

<FONT SIZE="argumento">Texto</FONT>
donde argumento es una cadena de caracteres que nos indica, son un signo + ó -, el número de veces que esa fuente va ser mayor o menor que el tamaño de la fuente por defecto.

COLORES DEL TEXTO.

Para dar color a un texto se utiliza el comando siguiente:

<FONT COLOR="color">Texto</FONT>

LISTAS

Las listas en HTML proporcionan una forma de clasificar la información, y hacer que éstas sea más inteligible por parte del visitante de las páginas.

Listas ordenadas: OL.

También llamadas listas numeradas son aquellas en las que cada elemento tiene delante un número que indica el orden del elemento dentro del conjunto de las listas.

para crear una lista ordenada es obligatorio tener un comienzo y un fin, cada elemento de la lista orenada se identifica escribiendolo dentro de la etiqueta <LI>.....</LI>. La etiqueta de fin puede ser omitida.

<OL>
<LI>Elemento 1</LI>
<LI>Elemento 2</LI>
<LI>Elemento 3</LI>
</OL>

Es posible especificar el tipo de numeración que se dará (números arábigos, números romanos, letras, etc.), por defecto se sigue la numeración árabe.

Las listas numeradas pueden ser numeradas dentro de otra.

LISTAS DESORDENADAS: UL.

También llamadas listas no numeradas son listas en las que no es necesario numerar de alguna manera los elementos que la componen, sino que cada elemento tiene delante un símbolo ( un punto, un cuadrado, etc...).

La forma de implementar las listas desordenadas es con la marca <UL> de la siguiente forma:

<UL>
<LI>Elemento 1</LI>
<LI>Elemento 2</LI>
<LI>Elemento 3</LI>
</UL>

LISTAS DE DEFINICIÓN: DL.

A diferencia de los dos tipos anteriores de listas, las listas de definición, se utilizan para presentar la información sin marcas, ni números, sino que utiliza los sangrados de los párrafos.

Las listas de definición están constituidas por términos y su subsiguiente definición.

La forma de implementar las listas de definición es con la marca <DL> de la siguiente forma:

<DL>
<DT> Nombre del término
<DD> definición del término
</DL>

Cada término de la lista de definición se indica con la marca <DT> y no sangrará, mientras que la descripción del término se indica con la marca <DD> y sangrará hacia la derecha para resaltar del término. Antes y despues de la descripción de cada clave, las listas de definición incorporan un retorno carro, las listas de definición también pueden anidarse.

TEXTO PREFORMATEADO: PRE.

La etiqueta <PRE> respeta tanto los retornos de carro como los espacios en blanco del archivo original. Esta marca permite mostrar el texto preformateado tal cual se definió.

Esta marca requiere de las etiquetas de comienzo y fin (<PRE>........</PRE>).

COMENTARIOS NO VISIBLES EN LA PANTALLA

A veces es muy útil escribir comentarios en el documento HTML sobre el código que escribimos, que nos pueden servir para recordar posteriormente sobre lo que hicimos, y que no queremos que se vean en pantalla.

Esto se consigue encerrando dichos comentarios entre estos dos símbolos: 

Ejemplo:



Bueno queridos amigos, es momento de mejorar un poco mas si experiencia en el desarrollo de su página Web nos vamos al ejemplo dos.

Ejemplo práctico nº2

En el editor de textos (Block de notas) copiamos:

<HTML>
<HEAD>
<TITLE>Ejemplo 2 - Comandos básicos</TITLE>
</HEAD>

<BODY>
<CENTER><H1>Comandos básicos</H1></CENTER>

<H2>Párrafos</H2>
<P>Este es mi primer párrafo del ejemplo 2</P>
<P>Este es mi segundo párrafo. Aqui hay una ruptura de línea <BR>de texto</P>
<HR>
<H2>Listas</H2>
<H3>Ordenadas</H3>
<P>La <FONT SIZE="+1"><I>Música</I></FONT> que mas me gusta es <I> (en orden de preferencia): </I></P>
<OL>
<LI>El rock</LI>
<LI>El jazz</LI>
<LI>La música clásica
</OL>
<H3>Desordenadas</H3>
<P>Sin un orden particular, mis <FONT COLOR="green"><B> aficciones</B></FONT> son las siguientes</P>
<UL>
<LI>El cine
<LI>El deporte
<LI>Natación
<LI>Baloncesto
</UL>
<H2>De definición</H2>
<DL>
<DT>Descripción</DT>
<DD>Es nombrar la propiedad de algo
<DT>Lista descriptiva</DT>
<DD>Es nombrar la propiedad de varios objetos
</DL>

<HR>

<CENTER>También sabemos centrar el texto</CENTER>

<PRE> y escribir preformateado</PRE>

<BLINK> y a escribir texto parpadeante</BLINK>

<HR>

</BODY>
</HTML>

Recuerden, guardamos el fichero de texto con el nombre ejemplo2.html y lo abrimos en el navegador, al realizar el paso nos deberá aparecer la siguiente pantalla:

Comandos básicos

Párrafos

Este es mi primer párrafo del ejemplo 2

Este es mi segundo párrafo. Aquí hay una ruptura de línea
de texto

_________________________________________________________

Listas

Ordenadas

La música que mas me gusta es (en orden de preferencia):

El rock
El jazz
La música clásica

Desordenadas

Sin un orden particular, mis aficiones son las siguientes:

El cine
El deporte
Natación
Baloncesto

De definición

Descripción
Es nombrar las propiedades de algo
Lista descriptiva
Es nombrar las propiedades de varios objetos

_________________________________________________________

También sabemos centrar el texto

y escribir preformateado

y a escribir texto parpadeante

_________________________________________________________

Estamos mejorado un poco mas nuestros conocimientos.

Soft-Party

sábado, 29 de septiembre de 2012

Comandos Básicos de HTML - Programación páginas WEB en HTML

Unidad # II
Comandos básicos de HTML

Características principales del documento HTML.