TEMA 3: Formato básico del documento

OBJETIVOPor medio de los conceptos que aprenderás durante este tema, serás capaz de crear una página sencilla de HTML, dando formato a los elementos básicos que la componen a través de un editor de HTML

INTRODUCCIÓN
Durante el tema anterior aprendiste cuál es la estructura básica de un documento en HTML y qué es un sitio en la web. Aprendiste conceptos como etiquetas y atributos, meta-información, cabecera y cuerpo del documento, entre otros.
En este tema entraremos de lleno a la programación técnica y diseño de las páginas. Aprenderás a dar formato al texto, a incluir caracteres especiales, títulos, a darle formato a párrafos y podrás hacer listas de elementos; pero no te preocupes, para facilitar tu aprendizaje y la creación de tu sitio, también aprenderás a usar un editor de HTML.

Un editor de HTML es un programa que te facilita la creación de páginas ayudándote a colocar las etiquetas disponibles en el código, e incluso, te permite ver el diseño de la página y manejar los archivos de los que dispone el sitio. Para este curso estaremos aprendiendo a usar el editor Sothink HTML Editor 2.5, que es un editor de uso libre y gratuito.

Algunas recomendaciones:
 Estas notas han sido creadas con mucho detalle para que sean lo más claras posibles. Aún así, habrá veces en que no puedas lograr algo o te quedes atorado sin saber que hacer; en estos casos tenemos dos recomendaciones: sé paciente contigo mismo y repasa las notas con cuidado, probablemente encuentres un detalle que no tomaste en cuenta la primera vez. En el peor de los casos, empieza de nuevo para asegurar que tu código es correcto y que al mismo tiempo te servirá de repaso.
 Recuerda tener a la mano las notas que hiciste durante la Actividad 1, etiquetas del HTML.

Subtemas:3.1 Introducción al Editor3.2 Definir un sitio3.3 Ajuste de las propiedades de la página3.4 Color y fondo del documento3.5 Trabajar con texto3.6 Alineación3.7 Formato de texto3.8 Títulos (Encabezados)3.9 Listas de elementos3.10 Caracteres especiales
ACTIVIDAD 3: Mi página (10% calificación final)

3.1 Introducción al Editor
El Editor de HTML Sothink (antes llamado CutePage) es un programa muy funcional y completo. Ofrece soporte en el uso de etiquetas, además de un fácil acceso y administración del sitio.

Tiene varias cualidades que son muy útiles: consejos para el uso de las etiquetas, inserta código automáticamente, colorea las etiquetas para identificarlas, enumera las líneas de trabajo, puedes incluir referencias, y la más poderosa de sus ventajas es que mientras programas el código, puedes ver los resultados del mismo sin tener que ir al explorador o navegador para revisarlo.



Este editor incluye un programa complementario, el administrador de sitios y se instala a la vez con el editor. Es altamente recomendable el uso de administrador porque facilitará mucho la creación y administración del sitio, como su implementación en la Internet cuando esté finalizado. Ahondaremos más en el administrador, en próximos temas. 

La pequeña desventaja del programa es que está en idioma inglés, pero si prestas mucha atención a las notas, podrás aprender sin problema y en caso de tener dudas, puedes consultar el glosario de términos.

3.2 Definir un sitio: ¿CÓMO EMPEZAR?
Las notas que te presentaremos a continuación son una serie de instrucciones que te llevarán paso a paso a la creación de tu página y a aprender el uso del editor. Te recomendamos usar una computadora con Windows 98, con un explorador o navegador Internet Explorer 5.0 y una pantalla con monitor de 800 x 600, ya que todas las imágenes e instrucciones que se incluyen en el curso están preparadas en una computadora con características como esas.
Crear una página para Internet significa realmente, que estás creando un sitio. Recordemos que un sitio es una serie de páginas ligadas entre sí. Por lo tanto, el primer paso para hacer tu página es crear un sitio, para lo cual deberás hacer una carpeta nueva en tu computadora que puedas localizar fácilmente, puesto que estarás guardando mucha información en ella.

DEFINE UN SITIO NUEVO 
Antes de empezar con la creación de las páginas web para el sitio, debes crear una carpeta en tu computadora que será la carpeta raíz del sitio:
A) Debes crear una carpeta nueva en la computadora que se llame "misitio", en ella guardarás todos los archivos referentes al sitio web, es importante que nada ajeno esté en esa carpeta.
B) Dentro de carpeta \misitio crea otra carpeta que se llame \images, en ella deberás colocar todas las imágenes que uses en tu página, así podrás localizarlas rápidamente.NOTA: Es importante utilizar nombres cortos (máximo 8 letras) y sin espacios ni caracteres especiales en los nombres de tus carpetas y archivos. Lo anterior con el fin de asegurarte de que todos los exploradores o navegadores pueden leerlos sin problema.
C) El siguiente paso es crear el sitio desde el programa Site Manager(administrador del sitio), que forma parte del editor. Sigue las instrucciones que encontrarás a continuación.

Para crear un sitio desde el Site Manager:

1. Abre el programa Site Manager. 2. En el Site Manager, elige el menú Site, la opción New Site, para abrir una ventana de diálogo. 3. En el campo Site Name, escribe MiSitio para nombrar al sitio en el que estarás trabajando. 4. En el campo de Local Root Folder, escribe la dirección completa en donde está localizada la carpeta que creaste. Ejemplo: "C:\Mis Documentos\misitio" 5. Da un clic en OK. 6. Una ventana aparecerá, preguntándote si deseas crear una carpeta nueva llamada "misitio". Da un clic en OK. 7. La carpeta "misitio" aparecerá en el área de Local site.

TIPS

Siempre usa los mismos directorios (carpetas) que tienes en tu computadora como en el Website, ya que todos los archivos y enlaces que hagas dentro de tus archivos serán referencias para ti como para los visitantes de la página. Lo anterior significa que si la página está guardada en tu computadora en "C:\Mis Documentos\misitio" y quieres incluir una carpeta para imágenes "\images", deberá de estar tanto en tu máquina como en tu sitio en el mismo lugar. 3.3 Ajuste de las propiedades de la página Ahora si ya estás listo para empezar a trabajar en el editor. Conozcamos el entorno del programa: Abre el editor de HTML y verás que aparece una pestaña debajo de los menús que dice "Untitled1", éste es un documento nuevo en el que podrás empezar a programar. Es recomendable que guardes el archivo bajo el nombre de index.html en el directorio que creaste anteriormente antes de empezar a trabajar, ya que así protegerás tu trabajo. Y recuerda, guarda tu trabajo continuamente. Lo primero que te recomendamos hacer es que determines las características generales de tu página, cómo el color de la letra y los enlaces, el color del fondo, los márgenes, etc. y que justamente aprenderás en las siguientes secciones. 3.3 Ajuste de las propiedades de la página Ya que has creado tu sitio, empezarás a crear las páginas que irán dentro de él. Primero deberás crear un documento en el editor. Abre el editor y obtendrás automaticamente un documento nuevo al que llamarás "index.html", que guardarás dentro de la carpeta de "\misitio" que has creado. Con ese documento aprenderás a ajustar las propiedades generales imagen de fondo, colores, letras, etc. Para editar los atributos del documento desde el editor: En la pestaña de Design 1. Da un clic en la pestaña de Design que se encuentra en la parte inferior de la ventana del documento; de esta forma podrá editar la página y ver los cambios al mismo tiempo. Si aparece una ventana de advertencia, da un clic en el espacio "Don't show this dialog again" y OK para que no lo vuelvas a ver. 2. Con tu mouse posicionado en la barra de herramientas, da un clic con el botón derecho y selecciona Properties Panel, dentro del menú contextual que aparece. Si el Properties Panel (Panel de Propiedades) ya aparece en la parte derecha de la venta del documento, omite este paso. El Panel de Propiedades puede ser arrastrado y colocado en cualquier punto de la pantalla a tu conveniencia. 3. Los atributos de la etiqueta del cuerpo <BODY> aparecerán en el Panel de Propiedades. Desde ahí puedes aplicar y configurar las propiedades que se aplicarán a todo el documento. Para ajustar las propiedades de la página desde el navegador, toma en cuenta las siguiente notas:  alink Da un clic en el campo de ALINK, del menú que aparece selecciona el color que aparecerá cuando los enlaces ya han sido visitados.  bgcolor Da un clic en este campo para que aparezca el menú de colores y puedas seleccionar el color del fondo que quieras que tenga tu página.  link Selecciona el campo de LINK, para escoger el color que deseas que tengan los enlaces en estado normal.  vlink Da un clic en el campo de VLINK, para elegir del menú, el color que deseas que aparezca cuando se da un clic sobre los enlaces.  text Da un clic en el campo de TEXT, para elegir el color que deseas que tenga todo el texto del documento. Recuerda que el color negro está predeterminado para todo el texto. 3.4 Color y fondo del documento Una página tiene una serie de atributos relacionados con el diseño visual. Por ejemplo, el fondo (background). En el fondo de la página se pueden utilizar imágenes o colores sólidos.  Para establecer una imagen como fondo simplemente se agrega el atributo de background a la etiqueta de BODY. Veamos el ejemplo: <BODY background="images/fondoA.gif">...</BODY>  Para establecer un color sólido como fondo simplemente se agrega el atributo de bgcolor a la etiqueta de BODY. Veamos el ejemplo: <BODY background="#003399">...</BODY> En el ejemplo anterior, el fondo aparecerá de color azul marino debido a que 003399 es el código de color hexadecimal para ese tono. Para todos los colores que utilizarás tanto en el fondo como en los demás elementos de las páginas existen dos códigos principales de color. Uno de ellos son los 16 colores sólidos con nombre (aqua, gray, navy, silver, black, green, olive, real, blue, lime, purple, white, fucsia, maroon, red y yellow) y el otro código son los colores hexadecimales.  Los colores hexadecimales están basados en la codificación numérica entre las combinaciones del rojo, verde y azul. Para cada uno de estos colores se asigna un par de dígitos.Ejemplo: #CC0000 = rojo Para ver más ejemplos con guías de colores hexadecimales visita la sección de ligas de interés o visita la siguiente página: http://www.december.com/html/spec/color.html Repasemos lo aprendido con unos ejemplos: IMAGEN DE FONDO index.html <BODY background="images/fondoA.gif">  Este es el cuerpo de mi página con una imagen de fondo </BODY> Ver código completo  Así se vería la página  COLOR DE FONDO index.html <BODY bgcolor="#FFFF00">  Este es el cuerpo de mi página con un fondo amarillo </BODY> 3.5 Trabajar con texto El texto puede insertarse libremente dentro de la etiqueta del cuerpo (BODY), sin embargo existen algunas opciones para darle formato de manera sencilla y cómoda. Una de las opciones más usadas son los párrafos. Los párrafos dentro del código sirven para designar líneas de texto que guardan la misma alineación y propiedades. Para definir un párrafo usamos la etiqueta <P>…</P>; la P significa Párrafo o Paragraph en inglés. Esta etiqueta puede ser abierta, aunque es preferible incluir las etiquetas de principio y fin de acción para evitar errores al momento de desplegar las páginas en los diferentes exploradores. Las propiedades que se pueden controlar a través de la etiqueta de <P>…</P> son la alineación, tipo de letra, color y tamaño. Es importante hacer notar que los saltos de línea dentro de un texto no se definen dando Enter. En realidad el código del HTML define automáticamente que las líneas continúen en el siguiente renglón, a esta propiedad se le llama en inglés Word wrap. Lo anterior representa una gran ventaja ya que provee de un ajuste automático dependiendo del explorador o navegador en el que se esté desplegando la página, porque no todos leen de la misma forma el código. Para indicar un salto de línea se utiliza la etiqueta abierta <BR> (Break, que significa rompimiento en inglés). Si al usar el salto de línea pierdes el formato del párrafo, vuelve a indicar una etiqueta de párrafo <P>…</P> y copia sus atributos o define unos nuevos para el siguiente párrafo.  TIPS  Si el texto que utilizarás en tu página proviene de algún editor de texto como el Word, probablemente al copiar y pegar, verás en el código saltos de línea. Sin embargo esto no se desplegará en el navegador. Si realmente deseas incluir un salto de línea utiliza la etiqueta de <BR> 3.6 Alineación Dentro del cuerpo de tu página, define un párrafo con las etiquetas <P>…</P>, dentro de ellas escribe un texto corto. Puedes copiar y pegar el texto del ejemplo, o escribir uno propio.Ejemplo: Mi comunidad está llena de gente alegre y trabajadora. Somos como una gran familia que trabaja en equipo por el bien de todos. Nos gusta que nuestros niños crezcan sanos y fuertes, por eso todos nos esforzamos por dar lo mejor de nosotros mismos. Lo mejor que tenemos es la cálidez de nuestra gente. Guarda tu documento y ubica en el editor la pestaña de "Preview" para que veas cómo aparece el texto. ¿El texto aparece alineado a la izquierda? Esto se debe a que el HTML define por defecto una alineación izquierda ya que los navegadores asumen que es así como quieres que aparezca el texto. Para cambiar la alineación del texto incluye el atributo align (alinear) a la etiqueta de iniciar acción del párrafo <P>. El atributo de align acepta tres diferentes elementos: left (izquierda), center (centrado) o right (derecha). Veamos cómo se escribe la etiqueta: <P align="center">Mi comunidad está llena de gente alegre y trabajadora</P> Esta es la posición que determina cada elemento: left Mi comunidad está llena de gente alegre y trabajadora. center Mi comunidad está llena de gente alegre y trabajadora. right Mi comunidad está llena de gente alegre y trabajadora. Para alinear textos desde el editor, sigue estos pasos: En la pestaña de HTML  1. Selecciona el texto2. Da un clic en los iconos de alineación  o selecciona la opción del menú de formato Format/Left, Format/Right o Format/Center. En la pestaña de Design  Se pueden emplear los pasos descritos para la pestaña de HTML o seguir estos:1. Selecciona el texto. El atributo de alineación de texto ser mostrará en el Panel de Propiedades.2. Da un clic en el campo de ALIGNy selecciona la opción que deseas del menú que aparece.  TIPS  Es preciso considerar que el atributo de alineación (align) no necesita cerrarse, ya que es parte de la etiqueta de párrafo que se cierra con </P>. Este mismo atributo de alineación puede utilizarse de muchas formas, incluyendo la alineación de imágenes. 3.7 Formato de texto El texto es el elemento principal de un documento en HTML, y puede ser formateado o editado por medio de algunas etiquetas básicas:  NEGRITAS (BOLD) Existen dos etiquetas para asignar un texto en negritas <B>...</B> Ó <STRONG>...</STRONG>  ITÁLICAS (ITALIC) Existen dos etiquetas para asignar un texto en negritas <I>...</I> Ó <EM>...</EM>  TAMAÑO DE LA FUENTE (FONT SIZE) Se indica con el atributo size=* dentro de la etiqueta de FONT. Veamos un ejemplo: <FONT size=2>...</FONT>  COLOR DE LA FUENTE (FONT COLOR) Se indica con el atributo color="#******" dentro de la etiqueta font. Ejemplo: <FONTcolor="#CO0000">...</FONT>  SALTO DE LÍNEA (LINE BREAK) Se indica utilizando la etiqueta abierta de <BR>  COMENTARIOS (COMMENTS) Para escribir un comentario en el código sin que aparezca desplegado en el navegador indícalo con <!-- *** -->. Ejemplo: <!-- Este es mi comentario -->  TIP: Desde el editor puedes dar formato al texto desde los botones que aparecen en las descripciones. En cuanto al color del texto, los navegadores asignan por defecto el color negro para el texto, azul para los enlaces y morado para los enlaces visitados. Gracias a los atributos de la etiqueta BODY es posible asignar colores distintos a los predeterminados. Repasemos lo aprendido con este ejemplo: FORMATO DE TEXTO index.html <BODY bgcolor="#FFFFFF" text="#333333" link="#FF6600" vlink="#FF9900" alink="#FF6600"><!-Inicio de los ejemplos--> <B>Este es un texto en negritas</B><BR><STRONG>Este es un texto en grueso</STRONG><BR><I>Este es un texto en itálicas</I><BR><EM>Este también es un texto en itálicas</EM><BR><B><I>Este es un texto en negritas e itálicas</I></B><BR><FONT SIZE="4">Este es un texto en tamaño 4</FONT><BR><FONT COLOR="#339900">Este es un texto verde</FONT> <!-Fin de los ejemplos--> </BODY> Ver código completo  Así se vería la pagina  Cómo podrás notar, utilizamos en varios casos la etiqueta de <FONT>…</FONT> para definir aspectos relacionadas con el formato del texto. Se pueden definir el tipo de letra, el tamaño y color de la letra. Las propiedades relacionadas con el texto pueden utilizarse de forma independiente o conjunto dentro de la misma etiqueta de <FONT>. 3.7 Formato de texto: Aprendamos a usar cada atributo  El tipo de letra se define utilizando el atributo de face y se escribe así: <FONT face="verdana"> <P align="center">Mi comunidad está llena de gente alegre y trabajadora.</P> </FONT>  Para definir el tamaño del texto se utiliza el atributo de size y se escribe así: <FONT face="verdana" size="4"> <P align="center">Mi comunidad está llena de gente alegre y trabajadora.</P> </FONT>  En caso de que quieras colorear un texto utiliza el atributo de color. Recuerda que dentro de las propiedades del documento puedes definir un color por defecto para todo el texto, pero si deseas cambiar solamente una frase o una palabra, puedes usar este atributo que debe de escribirse así: <FONT face="verdana" size="4" color="#336699"> <P align="center">Mi comunidad está llena de gente alegre y trabajadora.</P> </FONT> Para determinar el formato del texto por medio del editor, sigue estos pasos: En la pestaña de HTML  Existen dos formas de editar el texto, la primera es: 1. Posiciona el cursor en donde quieres insertar el texto.2. Da un clic en el icono  que se encuentra en la barra de herramientas, o seleccionar del menú Format/Font para abrir una ventana de diálogo.3. En los menús que están dentro de la ventana, seleccionar fuente (font), tamaño (size) y color.4. Da un clic en OK para cerrar la ventana de diálogo y ver los cambios en tu documento. La otra forma es cuando ya tienes el texto insertado en su posición y deseas editarlo, para lo cual sigue estos pasos:1. Coloca el cursor en la etiqueta <font color="x"> o <font size="x "> o<font face="x">2. Selecciona el color, el tamaño y la fuente de los menús que aparecen al colocar el cursor en cada campo en el Panel de Propiedades. Nota: A) Si el código de las propiedades del texto es <font color="#cccccc" size="3" face="Arial">, puedes colocar el cursor en cualquier parte dentro de la etiqueta y modificar la misma dentro del Panel de Propiedades.B) Si el código aparece como <font color="#cccccc"> <font size="3"> <font face="Arial">; deberás colocar el cursor en cada una de las etiquetas en las que quieras cambiar las propiedades. Por ejemplo, deseas cambiar el color del texto, así que colocas el cursor dentro de la etiqueta <font color="#cccccc"> y aparecerá solo esta opción activada en el Panel de Propiedades. Si deseas modificar el tamaño, deberás seleccionar dentro del código la etiqueta de size. En la pestaña de Design  Puedes seguir la primer opción del punto anterior, o puedes hacerlo de esta otra forma:1. Escribe el texto que quieras en el lugar donde quieres que esté. 2. Selecciona ese texto y da un clic con el botón derecho de tu mouse, aparecerá un menú contextual del cual seleccionarás la opción de Font.3. En el ventana de diálogo que aparece, selecciona los valores que deseas y da un clic en OK.  TIPS  Para aprender a usar con más soltura los atributos del texto, practica con el párrafo de ejemplo. Define la alineación, color, tamaño de texto y tipo de letra. En el editor que estamos usando, da un clic sobre cada atributo de etiqueta en el panel de propiedades, ahí se desplegarán las distintas opciones que puedes aplicar.  Toma nota, cuando creamos un sitio nuevo o una página en HTML, hay que tener en mente que no todas las computadoras tienen los mismos tipos de letras o fuentes, por lo tanto se deben utilizar las fuentes más comunes o al menos aquellas que están instaladas por defecto en la mayoría de las computadoras. He aquí las fuentes principales: Arial, Arial Black, Arial Narrow, ArialRounded MT Bold, MS Sans Serif, MS Sans Serif, Times New Roman, Verdana. 3.8 Títulos (Encabezados) Puedes definir títulos y subtítulos dentro de tu documento con una etiqueta muy sencilla: <H*>…</H*> (La H es por Headline, "Encabezado" en inglés).<H1> define el tamaño más grande para los títulos, <H6> el más pequeño. La forma de usar las etiquetas de título es: TÍTULOS index.html <BODY bgcolor="#FFFFCC"> <FONT FACE="Arial" COLOR="#336699"> <H2>Mi comunidad está llena de gente alegre y trabajadora.</H2><BR> <P ALIGN="left">Somos como una gran familia que trabaja en equipo por el bien de todos. Nos gusta que nuestros niños crezcan sanos y fuertes por eso todos nos esforzamos por dar lo mejor de nosotros mismos. Lo mejor que tenemos es la cálidez de nuestra gente.</P> </FONT> </BODY> Ver código completo  Así se vería la página  FALTAN INSTRUCCIONES BOTÓN H En la pestaña de HTML  1. Posiciona el cursor en el título.2. Da un clic en el icono  que se encuentra en la barra de herramientas, o seleccionar del menú Format/Font para abrir una ventana de diálogo.3. Selecciona el valor del título (de H1 a H6)4. Da un clic en OK para cerrar la ventana de diálogo y ver los cambios en tu documento. 3.9 Listas de elementos Existen dos tipos de listas de elementos: listas ordenadas ("numbered lists" o listas numeradas) y listas no ordenadas ("bulleted lists" o listas con viñetas). Las listas ordenadas se definen a través de la etiqueta <OL>…</OL> y las listas no ordenadas se definen con <UL>…</UL>. Cada elemento dentro de una lista tiene que estar identificado con la etiqueta <LI>…</LI> ("list item" o elemento de la lista). Veamos un ejemplo: TÍTULOS index.html <H4>Esta es una lista ordenada</H4> <!-Esta es una lista ordenada--> <OL> <LI>Lunes</LI> <LI>Martes</LI> <LI>Miércoles</LI> </OL> <BR> <H4>Esta es una lista no ordenada</H4> <!-Esta es una lista no ordenada--> <UL> <LI>Lunes</LI> <LI>Martes</LI> <LI>Miércoles</LI> </UL> Ver código completo  Así se vería la página  Para establecer una lista desde el editor sigue estos pasos: En la pestaña de HTML  1. Oprime el botón para asignar listados 2. Aparecerá un ventana de diálogo en donde encontrarás 3 espacios principales en los cuales determinarás el tipo de viñeta o número y la cantidad de elementos. 3. En el ventana de diálogo que aparece, selecciona los valores que deseas y da un clic en OK. En la pestaña de Design  Simplemente sigue los pasos descritos en la pestaña de HTML. 3.10 Caracteres especiales Dentro del lenguaje HTML, existe una clasificación particular para letras o símbolos que deben de ser codificadas de manera especial. Entre estas letras están las letras acentuadas, letras con paréntesis, eñes, símbolos como el copyright, etc. Estos caracteres son de dos tipos: un tipo de caracteres que tienen un significado especial dentro del código del HTML, como el símbolo de mayor que ">"; y el otro tipo de caracteres, incluye a los que no pueden ser escritos directamente desde el teclado, como el símbolo de los derechos reservados ©. Es importante hacer notar que los exploradores (navegadores) y los editores de HTML son generalmente en inglés, por lo que no pueden leer directamente los caracteres propios de nuestro idioma (acentos, eñes y diéresis), lo que los convierte en caracteres especiales. A continuación podrás ver una lista de los códigos que deben de escribirse, para ver desplegados en el navegador los caracteres especiales más comunes: Caracter Especial Etiqueta Caracter Especial Etiqueta á &aacute; ä &auml; Á &Aacute; Ä &Auml; é &eacute; ë &euml; É &Eacute; Ë &euml; í &iacute; ï &iuml; Í &Iacute; Ï &Iuml; ó &oacute; ö &ouml; Ó &Oacute; Ö &Ouml; ú &uacute; ü &uuml; Ú &Uacute; Ü &Uuml; ñ &ntilde; ÷ &divide; Ñ &Ntilde; ø &oslash; < &lt; “ &#147; > &gt; ” &#148; © &copy; € &euro; ® &reg;« ¡ &iexcl; ™ &#153; ˜ &#152; « &laquo; ˆ &#136; » &raquo; • &#149; Para usar los caracteres especiales se sustituye la letra o símbolo con la etiqueta. Veamos un ejemplo: El código se escribe: Ma&iacute;a Se despliega: María Existen también unos caracteres que hacen funciones de "espaciado" dentro del código, el más común es espacio sin salto de línea (non-breaking space en inglés) que se utiliza, por ejemplo, cuando existen celdas vacías en las tablas. Su etiqueta se inserta al igual que las de caracteres especiales y en este caso es: &nbsp En el editor de HTML que estamos usando se facilita el uso de caracteres especiales siguiendo estos pasos: En la pestaña de HTML  1. Inserta el código directamente, escribiendo la clave para el caracter que desees desplegar. 2. Como otra posibilidad, sigue los pasos descritos para la pestaña de Design. En la pestaña de Design  1. Posiciona el cursor en donde quiere insertar el caracter especial. 2. Da un clic en el icono de caracter  que está en la barra de herramientas, o seleccione el menú Insert/Special Characters para que se despliegue una ventana. 3. Selecciona el caracter especial dando doble clic sobre éste. La etiqueta aparecerá en el campo Tags to Insert into HTML. 4. Da un clic en OK y la etiqueta correspondiente se agregará al código. CONCLUSIÓN ¡Felicidades, acabas de terminar una sección muy importante del curso! Hasta el momento te has familiarizado con los elementos básicos que dan formato a una página de HTML y con ellos estás listo para armar tu primer documento para la Internet. Has aprendido a definir un sitio, a ajustar las propiedades de las páginas, a usar colores de fondo y a formatear un texto. Puedes incluir encabezados y listas e incluso caracteres especiales. Además has estado experimentado el uso de un editor de HTML, que es una aplicación de ayuda para la programación y resulta mucho más amigable. Aunque debes de considerar que saber utilizar el código directamente te permitirá construir mejores páginas con códigos limpios. RECUERDA QUE...  No debes de mezclar demasiados colores dentro de una página, tantos que se vuelvan agresivos a la vista. Una buena página debe ser siempre legible.  Cuando creamos un sitio nuevo o una página en HTML, hay que tener en mente que no todas las computadoras tienen los mismos tipos de letras o fuentes, por lo tanto se deben utilizar las fuentes más comunes o al menos aquellas que están instaladas por defecto en la mayoría de las computadoras. He aquí las fuentes principales: Arial, Arial Black, Arial Narrow, ArialRounded MT Bold, MS Sans Serif, MS Sans Serif, Times New Roman, Verdana.