INSTITUTO TECNOLÓGICO
SUPERIOR
CENTRAL TÉCNICO
.jpg)
Tema: Estructuras del texto de HTML
CURSO: 4D1
Docente: Ing. Julio Calvopiña H., MSc
Año lectivo:
Docente: Ing. Julio Calvopiña H., MSc 2015-2016
ESTRUCTURA DEL TEXTO DE HTML
Todo texto escrito se estructura, fundamentalmente, en párrafos. También es común que contenga un título que nos diga el tema que se va a tratar en el texto. En esta lección vamos a aprender a habilitar párrafos y títulos en nuestros documentos html.Ya hemos comentado que todo el texto de la página estará dentro del
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.
<body>, que a su vez estará dentro del <html>.  |
| Añadir leyenda |
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 denominandohipervinculación a esta propiedad. La hipervinculación permite ir de una página a otra simplemente haciendo clic en un vínculo.
El texto dentro del
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.
<body>debe estar dentro de párrafos. En HTML, los párrafos se identifican con la etiqueta <p></p>. Dentro de los párrafos colocaremos texto e imágenes, y algunas etiquetas que nos permitan dar formato al texto, pero no podemos tener otros párrafos anidados.A su vez, disponemos de encabezados que nos permiten organizar el texto. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>, el más pequeño. Por ejemplo, utilizaríamos un <h1> para poner el rótulo principal de la página, <h2> para los títulos de los apartados, <h3> para los apartados de segundo nivel, etc. El texto de cada apartado iría contenido en párrafos <p></p>.Una de las peculiaridades del texto, es que los espacios en blanco consecutivos y saltos de línea no se muestran como en el código fuente. Si hay varios espacios seguidos, sólo se mostrará uno. Por ejemplo, si en el código fuente escribimos Bienvenido a Floramics se verá Bienvenido a Floramics. Si queremos poner varios espacios seguidos, utilizaremos el código html para el espacio, .El navegador también ignora los saltos de línea. Así si dentro de un párrafo colocamos varios saltos de línea pulsando Intro, estos no se verán. Como ya vimos para crear un salto de línea dentro de un párrafo, utilizamos la etiqueta <br />.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
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.
- <HTML>: Limitan el documento e indica que se encuentra escrito en este lenguaje.
- <HEAD>: Especifica el prólogo del resto del archivo esto es, el encabezado. Son pocas las etiquetas que van dentro de ella, destacando la del titulo <TITLE> que será utilizado por los marcadores del navegador e identificará el contenido de la página. Solo puede haber un título por documento, preferiblemente corto aunque significativo, y no caben otras etiquetas dentro de él. En <head> no hay que colocar nada del texto del documento.
- <BODY>: Encierra el resto del documento, el contenido es el que se muestra en un explorador Web.
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>
Bienvenidos a www.ithinkweb.com.mx
<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:
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  .
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
| |
<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).
<html>
<head>
<title>Floramics. Amigos de las flores</title>
</head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la
asociación y nuestra colección de fotografías de
flores.<br />
Tenemos las fotografías organizadas en diferentes categorías</p>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros
visita nuestra página de contacto. Te esperamos.</p>
</body>
</html>
En el código tenemos dos párrafos y un título. Observa que en la cabecera del documento tenemos la etiqueta <title>. Esta contiene el título del documento html; la etiqueta <h1> contiene el título del texto contenido en el documento html. El texto encerrado entre las etiquetas<p></p> es el que se agrupará en un párrafo.
En la figura 6 puedes ver como debe mostrarte la página el navegador:
Puede que te parezca un poco grande el título; es posible poder títulos con letras más pequeñas. Para ello daremos valores más altos a los núneros que forman parte de la etiqueta de título <hx> (donde x es el valor del número hasta 6). Así, la etiqueta <h2> será un título más pequeño que el de <h1>; el de <h3> más pequeño que el de <h2>; y así sucesivamente hasta <h6>.
Además de estructurar el texto en párrafos y títulos, también podemos usarotras etiquetas html para enriquecer la estructura del texto de nuestras páginas web. Por ejemplo, podemos insertar sangrías, líneas de separación o preformatearlo.
Para seguir con la estructura del texto, incluiremos en esta lección unas pocas etiquetas html. En concreto, estas etiquetas son:
<blockquote> para sangrías, <hr /> para líneas de separación y <pre> para preformatear texto.| Enriqueciendo la estructura del texto | |
|---|---|
<blockquote> | Para a?adir sangría al texto. |
<hr /> | Separa bloques de texto mediante una línea. |
<pre> | Respeta la estructura del texto embutido en código html. |
<br /> | Fuerza al texto a un cambio de línea. |
Las etiquetas
<blockquote> y <pre> son etiqueta cerradas, mientras que la etiqueta<hr /> es una etiqueta abierta. Vamos a ver un código en donde se ilustra como se utiliza la etiqueta <pre>.
<pre>
1.- La empresa y el entorno.
1.1.- La empresa como unidad.
1.2.- Influencia del entorno.
1.3.- Localizacion de la empresa.
2.- Legislacion de empresas.
2.1.- Legislacion mercantil.
2.2.- Legislacion fiscal.
</pre>
En el código hemos escrito un esquema, como está dentro de la etiqueta
<pre> todos los espacios y saltos de línea se respetarán al imprimir el código en el navegador. En la figura 12 se muestra la salida de este código, y como se respeta el preformateado.
Figura 12. Con <pre> podemos hacer
esquemas fácilmente.
Ahora vamos a ver otro código en el que vamos a combinar la etiqueta
<hr /> y <blockquote> Recuerda que la primera es para escribir una línea horizontal, mientras que la segunda para darle sangría al texto.
<strong>Elementos de la empresa</strong><br />
<hr />
Los recursos humanos en la empresa son importantes,
desde los trabajadores hasta los propietarios del
capital.
<blockquote>
La organización proporciona a la empresa una
necesaria efectividad para su objetivo.
</blockquote><hr />
Figura 13. Podemos estructurar textos con líneas,
retornos de carro o sangrías.
Como ves, hemos separado bloques de texto mediante líneas horizontales. También podemos utilizar el retorno de carro (saltar a la línea siguiente) para utilizar un texto enfatizado como título. Por último, le hemos dado al segundo bloque un mayor margen a través de un sangrado. Combinando todo esto con párrafos, títulos y listas podemos estructurar nuestros textos de forma muy flexible.
Mas información sobre el tema de estructuras de texto de HTML :
- http://www.aulaclic.es/paginas-web/t_2_3.htm
- http://www.aprende-gratis.com/html/curso.php?lec=estructura-dos
- http://www.aprende-gratis.com/html/curso.php?lec=estructura-texto
Vídeo referente a estructuras de textos de HTML
No hay comentarios:
Publicar un comentario