OBJETIVOEn este tema, aprenderás a darle una mejor apariencia a tu página con la ayuda de elementos de organización, principalmente las tablas y separadores; elementos visuales, como las imágenes; y elementos de enlace, como las hiperligas.
Al finalizar, podrás programar una página completa de html en base a los conocimientos técnicos y diseño que has aprendido a lo largo del curso.
INTRODUCCIÓN
Hasta el momento has aprendido cómo editar las propiedades de los documentos y los elementos principales que los componen, como color y textos.
 Lograr un sitio interesante para los usuarios, no sólo depende de una buena programación técnica, es también importante saber organizar la información para que ésta sea clara y atractiva. El diseño visual o gráfico también forma parte de la programación de la página para lo cual debemos aprender ciertos conceptos básicos de la estructura de la información.
La sección superior de una página es la primera que un usuario ve, por lo que resulta recomendable incluir el logo o el título de la página, e incluso en algunas ocasiones el menú.
La sección del lado izquierdo es importante porque en nuestro idioma, leemos de izquierda a derecha, por lo que los usuarios verán inevitablemente esa parte. Es recomendable ubicar los elementos fijos de un sitio dentro de esta área, por ejemplo el menú.
En la sección central, que suele ser la más amplia de las páginas, se incluye el contenido del sitio. Dentro de esa área puedes organizar la información de la forma que creas más conveniente.
Toma como ejemplo práctico, el diseño de la página del curso que estás viendo en este momento. ¿Identificas todas las secciones?
Con este tema damos por terminado el aprendizaje de conceptos básicos para la creación de tu sitio Web. Al finalizar este tema, estarás listo para crear tu proyecto final.
Subtemas:4.1 Hiperligas4.2 Imágenes4.3 Separadores4.4 Trabajar con Tablas4.5 Las celdas
4.1 Hiperligas
 Una Hiperliga es un enlace entre documentos (páginas) o sitios; puede ser una liga en textos (hipertexto) o una liga en imágenes o animaciones (hipergráfico).
Precisamente el HTML está nombrado a partir de esta característica: Hyper TextMarkup Language - Lenguaje de Marcas de HiperTexto.
.
.
¿Y qué es una liga? Una liga es activar un enlace entre dos puntos, el cuál se navega por medio de un clic del cursor del ratón sobre la palabra subrayada o imagen sensible. El efecto es ir a un punto determinado del mismo documento, cambiar de página o activar algún elemento como video o sonido. Los enlaces, vínculos o ligas, son la parte más importante de la esencia del HTML.
La etiqueta general para definir las ligas es: <A>...</A>
Cuando se trata de ligas hacia alguna página se usa el parámetro href (referencia a):
<A href="URL o dirección o ruta de acceso al documento">...</A>
El elemento que se localice entre esas dos etiquetas será sensible, es decir que al tocar sobre ese elemento y dar un clic con el ratón, se creará un hiperenlace entre éste y la dirección hacia a donde se apunta. Ejemplo:<A href="http://www.google.com.mx">Da clic aquí para hacer una búsqueda en la página de Google </A>
 Este ejemplo se vería así:Da clic aquí para hacer una búsqueda en la página de Google
Si damos clic sobre la frase, el navegador nos llevará a la página web indicada en el parámetro href, el cuál indica la ruta o referencia hacia el punto a enlazar.
4.1 Tipos de Hiperligas
Existen diferentes tipos hiperligas:
Vínculo externo
Todos los sitios en la Internet tiene una dirección o URL (UniversalRessource Locator o en español, Localizador Universal de Recursos).
Los vínculos externos son enlaces entre sitios distintos y se indican colocando el URL de la página a dónde queremos enviar al usuario.
Los URL, generalmente son expresados de esta manera:
href="http://www.google.com.mx”
Vínculo local
Un sitio es básicamente un conjunto de páginas ligadas entre si. Sin embargo los sitios también contienen otros archivos, sonidos, imágenes, etc.
Los enlaces hechos entre estos elementos y páginas, se les conoce como locales, por ubicarse dentro de la misma agrupación.
Los vínculos locales se indican señalando directamente al archivo dentro de la organización del sitio.href=“archivo.html”
| Para agregar ligas a un texto: |
En la pestaña de HTML 
 Como paso previo, crea dos documentos en html, te sugerimos que los llames "uno.html" y"dos.html". Dentro del documento uno, escribe "Ir a página dos". Dentro del documento dos, escribe "Regresar a página uno"
1. Selecciona el texto "Ir a página dos" o cualquier otro que desees agregar como liga.2. Da clic en el icono de ligas (Link)  que se encuentra en la barra de herramientas, para abrir la caja de diálogo. 3. Escribe "dos.html" en el campo de URL y da clic en OK.** Si deseas agregar otras ligas de texto en tu página, repite los pasos 1 a 4. Puedes completar tu práctica colocando la liga para regresar el documento uno desde la página dos.4. Da un clic en la pestaña Preview que se encuentra en la parte inferior de la ventana del documento, para saber cómo se verá la página en el navegador.5. Da clic a los textos que pusiste como liga para que veas que te dirigirán a la página que los enlazaste.6. Si no colocaste una liga para regresar, puedes ir la página anterior dando un clic con el botón de regresar o back del navegador o utilizando el botón derecho del mouse para seleccionar la opción back del menú que se muestra. |
En la pestaña de Design  Sigue las indicaciones descritas en la pestaña de HTML. |
Aprendamos a distinguir los tipos de vínculos practicando con el siguiente ejemplo:
| VÍNCULOS | uno.html y dos.html |
<!-Este es el ejemplo de Vínculo local-->
<A href="dos.html">
<B>Ir a página dos ></B>
</A>
<!-Aqui podemos ver un Vínculo externo-->
<A href="http://www.cca.org.mx/" target="_blank">
Visitemos el Portal de los CCA<br>
a través de este vínculo externo
</A>
4.1 Tipos de Hiperligas
Anclas o Marcadores
Hemos visto los vínculos o ligas hacia otros documentos, de forma local o externa, sin embargo también existen ligas que apuntan hacia lugares precisos dentro del mismo documento que los contiene u otro. A esto se le conoce comúnmente como anclas (anchor), marcadores o apuntadores.
Las anclas se utilizan comúnmente cuando deseas hacer referencias rápidas hacia tu misma página y siempre constan de dos partes: el punto de anclaje o ancla y la liga que busca a esa ancla.
Por ejemplo, cuando tienes un texto muy largo y deseas volver al inicio sin tener que utilizar los botones de desplazamiento, puedes colocar un ancla en la parte superior de la página, y una liga en la parte final del documento que apunte al ancla.
Cabe mencionar que las anclas son elementos invisibles dentro de la forma visual del documento, ya que permanecen ocultas a simple vista pero están presentes dentro del código.
Primero que nada para definir un vínculo de tipo ancla, debes establecer el punto de anclaje, es decir, el lugar a donde va a llegar la liga. Generalmente el ancla se coloca cerca del lugar a dónde quieres que se dirija la liga.
La etiqueta que se utiliza en estos casos es: <A name="**"></A>, donde ** es el nombre de el ancla. Recuerda que el ancla es invisible en el documento, sólo podrás verlo dentro del código.Ejemplo:
<A name="marcador01"></A>
Como segundo paso, deberás crear una liga o enlace que apunte hacia el ancla, lo cual puedes hacer siguiendo los pasos de "Agregar ligas a un texto o una imagen" descritos anteriormente.
El formato del parámetro href, aparecerá de la siguiente manera:
<A href="#marcador01">...</A>
Repasemos la forma para crear un ancla, con este ejemplo:
| ANCLAS | anclas.html |
<BODY bgcolor="#FFFFFF" text="#333333" link="#CC3300" vlink="#FF6600" alink="#CC3300">
<!--Este es el punto de anclaje o ancla-->
<A name="arriba"></A>
.... Texto y contenido de la página... Antes de finalizar aparece:
<!-Esta es la liga que va al punto de anclaje-->
<A href="#arriba">Regresar al título</A>
</BODY> |
|
|
|
 TIPS |
Evita separar tus documentos html en distintas carpetas o fólders, porque puedes crear errores al ligar las páginas entre sí. Opta por colocar todas las páginas dentro del mismo directorio.
Si vas a usar la liga para hacer referencia a un archivo local, es necesario que selecciones "other" en el tipo de la liga. Si vas a hacer una referencia a un vínculo externo, es decir, hacia otro sitio dentro de la Internet entonces tendrás que seleccionar la opción "http://" en el tipo de liga
4.2 Imágenes
Para entender el proceso de insertar imágenes dentro del código de HTML, primero debemos de hablar de los formatos de imagen.
Formatos de imagen
Los formatos de imagen que se usan regularmente en los documentos en HTML, son el GIF, JPEG Y BITMAP. Al seleccionar el formato, hay que considerar particularmente el peso (kilobytes) y la calidad de una imagen (cantidad de colores).
GIF, es el formato más usado para la Internet por dos razones esenciales: su peso es relativamente el menor de todos los formatos y permite usar cualidades que ningún otro formato ofrece como áreas "transparentes" e incluso movimiento.
El GIF contiene imágenes con colores planos (como logos, títulos, fondos, etc.) y está basado en un código que solo puede leer 256 colores. En otros temas de este curso te has familiarizado con la aplicación de color para la Internet y has visto ejemplos de los colores estandarizados; precisamente son esos colores los que encapsula este formato. |
| Observa los ejemplos: |
| GIF |
 |
| GIF CON ZONAS TRANSPARENTES |
 |
| GIF ANIMADO |
 |
| JPEG |
 |
|
| JPEG, es el formato de imagen idóneo para las fotografías, imágenes con sombras o mucho detalle, porque en él se encapsulan millones de colores lo que provee de gran calidad. Los jpeg a diferencia de los gif, NO pueden tener zonas transparentes ni movimiento, suelen ser imágenes más pesadas que los gif por la cantidad de colores y por lo mismo hay que tener precaución en su uso.Observa el siguiente ejemplo y compáralo con las imágenes de tipo gif, ¿notas la diferencia en la calidad de la imagen? |
BITMAP, se usa en presentaciones electrónicas donde es muy importante el grado de detalle de la imagen y la calidad, sin embargo el peso (cantidad de bytes) es demasiado grande. Suele pasar que este formato sea incorrectamente empleado por usuarios que desconocen como utilizar su escáner y guardar una imagen, o simplemente las diferencias entre los formatos de imagen. Esta es una razón por la que debe utilizar imágenes gif y/o jpeg en los documentos HTML.
4.2 Imágenes
Después de esta explicación seguramente te estarás preguntando ¿de dónde sacar imágenes para tu sitio o cómo hacerlas?, bueno existen muchísimos programas para editar imágenes (como el Corel Paint, Paint shop Pro, Coffeecup, etc.) y muchos otros sitios más en la Internet, para obtener imágenes gratuitamente.
En este caso y como te estás iniciando en el mundo del Internet, te recomendamos optar por el uso de imágenes de archivo o de colección (conocidos como clipart en inglés). Usando algún buscador podrás localizar cientos de páginas con archivos de este tipo. La sección de Sitios de Interés de este curso cuenta con algunas recomendaciones sobre colecciones de clipart dentro del Internet.
Otras opciones pueden ser las cámaras digitales o los escáners, si dispones con alguno de estos recursos, podrás generar tus propias imágenes, sólo ten precaución de mantener las imágenes con bajo peso (menos de 6kb u 8kb para gifs y menos de 20 kb para los jpeg, es lo ideal).
| Para insertar imágenes dentro del código, debes de: |
En la pestaña de HTML
 1. Coloca el cursor en la posición donde quieres que aparezca la imagen.2. Da un clic en el icono de imagen  que se encuentra en la barra de herramientas.3. Se desplegará una caja de diálogo en la cuál aparece un espacio para localizar la ruta de la imagen oprimiendo el botón Browse. (falta imagen del editor)
4. Selecciona la imagen y configura su ancho (width), altura (heigth), alineación (align).5. Da clic en OK.6. La imagen será insertada en el código y a través del Panel de Propiedades, podrás ajustar sus atributos. |
| En la pestaña de Design Sigue las indicaciones descritas en la pestaña de HTML. |
Veamos cómo quedaría el código cuando insertamos una imagen:
| IMÁGENES | imagen.html |
<BODY bgcolor="#FFFFFF" text="#993300" link="#9933FF" vlink="#CC99FF" alink="#9933FF">
<!-Inicio de los ejemplos-->
<h3 align="center">
<font face="Arial, Helvetica, sans-serif">Esta es la tiendita de mi comunidad</font><br>
</h3>
<img src="../images/clipart/ft_tiendita.jpg" width="300" height="225" border="4" align="right" hspace="5">
....
</BODY> |
|
|
|
| TIPS |
Visita la página cómo usar una colección de clipart, para que tengas una idea de dónde y cómo empezar.
El promedio máximo de una imagen es de unos 6kb u 8kb para gifs y de menos de 30 kb para los jpeg, estos pesos evitarán que tarde su descarga.
4.2 Imágenes
Las etiquetas para las imágenes
Las imágenes son elementos externos a los documentos de html; al escribir el código se hace referencia a la ubicación de esos archivos, el navegador busca la imagen en la dirección indicada.
Para insertar la referencia de una imagen dentro del código, debe de usarse la etiqueta: <IMG src="nombre y dirección de la imagen">Como podrás notar, la etiqueta de imagen es abierta porque solamente tiene una palabra clave en el principio de la acción.
Los atributos que acompañan la etiqueta de imagen son:
| alt="***" | Texto alternativo de la imagen para navegadores que no tienen la Opción de Imagen Activada y/o también para que el visitante lea mientras se descarga la página. |
| width="*" | Indica la anchura de la imagen en píxeles. |
| height="*" | Indica el alto de la imagen, también en píxeles. |
| border="*" | Indica el grosor del borde en píxeles. Especialmente cuando la imagen incluye un hiperenlace. |
| align="top" | Alinear arriba, muy útiles cuando interactúan imágenes con texto o tablas, los atributos de alineación nos permiten jugar con el acomodo de los elementos de nuestra página. |
| align="middle" | Alinear en medio. |
| align="absmiddle" | Alinear perfectamente en medio. |
| align="bottom" | Alinear abajo. |
| align="left" | Alinear hacia la izquierda. |
| align="right" | Alinear hacia la derecha. |
|
Veamos como se comporta el atributo de alineación de imagen con respecto al texto:
| TIPS |
Usa siempre las propiedades o atributos de imagen de altura y anchura (width an height). Estas dos opciones puedes encontrarlas en el Panel de Propiedades; sirven para cambiar el tamaño de una imagen, aunque su propósito real es indicar al navegador qué tanto espacio necesita reservar para desplegarla. Lo que hace el navegador es iniciar con la descarga del texto y posteriormente la descarga de imágenes, así el visitante tendrá algo que leer mientras espera a que todo aparezca en su lugar.
4.2 Imágenes
Recordemos que una imagen también puede llevar un hipervínculo o liga, mira este ejemplo:
Para agregar una liga en las imágenes deberás usar la etiqueta:
<A href="nombrearchivo.htm"><IMG src="nombreimagen.gif/jpeg"></A>
| Para definir una imágen como liga, debes de: |
En la pestaña de HTML
1. Selecciona la imagen que desees crear como liga, dando un clic sobre ella.2. Da un clic en el icono de ligas que se encuentra en la barra de herramientas, con ésto abrirás una ventana de diálogo.3. En el campo de Descriptionaparecerá la etiqueta de tu imagen.
4. En el campo de URL escribe o selecciona la dirección hacia donde apuntarás el enlace de la imagen al dar clic sobre ésta. 5. Da un clic en OK.6. Cuando una imagen se convierte en una liga, el navegador automáticamente convierte el cursos en una manita al pasar sobre la imagen y crea un borde alrededor de la imagen. Para eliminar ese borde debes seleccionar la imagen, ir al Panel de Propiedades y escribir un "0" (cero) en el campo de Border.7. Da un clic en la pestaña Preview que se encuentra en la parte inferior de la ventana del documento, para saber cómo se verá la página en el navegador.8. Da un clic a la imagen para acceder a la liga. |
| En la pestaña de Design Sigue las indicaciones descritas en la pestaña de HTML. |
Repasemos cómo insertar imágenes o gráficos con el siguiente ejemplo:
| IMÁGENES CON LIGAS | imgliga.html |
<BODY bgcolor="#FFFFFF" text="#333333" link="#FF6600" vlink="#FF9900" alink="#FF6600">
<!-Inicio del ejemplo-->
<A href="http://www.cca.org.mx/mexico/oferta/homedoc.htm" target="_blank"><IMG src="../images/clipart/img_ejimglink.jpg" width="265" height="101" border="1"></A>
<!-Fin del ejemplo-->
</BODY>
4.3 Separadores
Los separadores o líneas horizontales, son un elemento de organización y ayudan a que el texto y gráficos aparezcan mejor ordenados. No toda la gente usa esta opción ya que prefieren organizar sus contenidos con tablas por ejemplo, pero siempre es útil saber de su existencia.
Para definir un separador, deberás usar la etiqueta abierta <HR> (Horizontal Rule)
El elemento que aparecerá tiene una configuración predeterminada de grosor (2 píxeles), alineación centrada y anchura del 100% de la ventana; sin embargo puede ser configurado a tu gusto o necesidad.
Para ajustar los separadores utiliza los siguientes atributos:
| size="*" | Determina el grosor del separador, se define en píxeles. |
| width="*" | Define la anchura del separador, se puede definir numéricamente en píxeles o en porcentaje. |
| align="left" | Alinear hacia la izquierda. |
| align="right" | Alinear hacia la derecha. |
| align="center" | Alinear hacia al centro. |
|
Veamos un ejemplo del uso de separadores:
| IMÁGENES CON LIGAS | imgliga.html |
<BODY bgcolor="#FFFFFF" text="#000000">
<!-Inicio de los ejemplos-->
<HR width="350" size="5" align="center">
<!-Fin de los ejemplos-->
</BODY> |
|
|
|
| Define un separador siguiendo estos pasos: |
En la pestaña de HTML
 1. Coloca el cursor donde quieres que aparezca el separadror.2. Selecciona  y se desplegará la caja de diálogo donde configurarás el separador.3. Configura el ancho (width), la altura (height) y el estilo (style).4. Da clic en OK y aparecerá el separador en tu página. |
En la pestaña de Design Sigue las indicaciones descritas en la pestaña de HTML.
4.4 Trabajar con Tablas
Las tablas son elementos de organización y sirven para estructurar el documento, situar otros elementos y mejorar el diseño.
Están conformadas por filas (horizontales) y columnas (verticales) cuya unidad básica es la celda, de la cual hablaremos ampliamente en el siguiente tema.
Crear tablas puede parecer muy difícil en un comienzo, pero es cuestión de reflexionar previamente lo que necesitamos para luego construir el elemento.
Las etiquetas básicas para construir una tabla son:
<TABLE>
</TABLE> | Con esta etiqueta se define una tabla, definiendo dónde inicia y termina. |
| <TR></TR> | Con estas etiquetas definimos las filas. |
| <TD></TD> | Y finalmente con esta etiqueta definimos las celdas. |
|
Repasemos teóricamente los pasos para construir una tabla:
a) Primero que nada, necesitamos definir la tabla, para ello usaremos las etiquetas <TABLE>…</TABLE>, que van al principio y final respectivamente.
b) Dentro de esas etiquetas colocaremos filas (rows en inglés) con las etiquetas <TR>…</TR>. Utiliza una etiqueta por cada fila que desees agregar y no olvides colocarlas dentro de la definición de la tabla.
c) Finalmente, para crear las columnas, deberás incluir dentro de las etiquetas de filas las etiquetas de las celdas <TD>…</TD>. Por ejemplo si deseas definir tres columnas, colocarás tres etiquetas de celdas dentro de una misma etiqueta de fila. Veamos gráficamente este ejemplo:
| <TABLE> | | | |
| | <TR> |
<TD>
Celda 1
</TD> | <TD>
Celda 3
</TD> | <TD>
Celda 3
</TD> |
| </TR> |
| </TABLE> | | | |
Como podrás notar, realmente lo que ves como resultado de tu programación son el acomodo que hagas de las celdas dentro de la estructura de la tabla.
.4 Trabajar con Tablas
Las tablas pueden configurarse como cualquier otro elemento dentro del HTML, a continuación encontrarás los atributos de la etiqueta TABLE:
| border="*" | Con este atributo podrás controlar el grosor en píxeles del borde de la tabla. |
| cellpadding="*" | Define el espacio entre el borde de la celda y el contenido de la misma, se mide en píxeles. |
| cellspacing="*" | Define el espacio entre celdas y está definido también en píxeles. |
| width="*" | Determina la anchura de la tabla en píxeles o en porcentaje en relación al ancho del documento. |
| align="***" | Especifica la alineación de la tabla, izquierda, centrada o derecha. (left, center, right) |
|
| Las instrucciones para crear una tabla son: |
En la pestaña de HTML
 1. Coloca el cursor en el espacio donde deseas colocar la tabla.2. Da un clic en el icono  para abrir la caja de diálogo donde crearás tu tabla.3. En la caja de diálogo introducirás los valores que desees para tu tabla. Lo primero a configurar es el tamaño de la tabla (Table Size) tanto en filas (rows) como columnas (columns), posteriormente específica el ancho (width).4. Determina los valores de los atributos de formato, borde (border), espacio interior (cell padding) y espacio entre celdas (cell spacing).5. Da un clic en OK y verás como aparece la tabla en tu página, en la pestaña de Preview. |
| En la pestaña de Design Sigue las indicaciones descritas en la pestaña de HTML. |
Practiquemos la creación de tablas con estos ejemplos:
| TABLA 1 | tabla1.html |
Tabla de 2 filas por 3 columnas, espacio entre líneas de 2 píx., borde 1
|
| |
|
| TABLA 2 | tabla2.html |
Tabla de 4 filas por 2 columnas, ancho de tabla 300 píxeles con borde 0 y fondo de celda gris y celdas al 50% de ancho.
|
| |
|
| TIPS |
Si colocas el borde de la tabla con valor "0" (cero), verás que se hace invisible en la visualización en el navegador, esta opción es muy práctica para organizar todos los elementos de la página. Si realmente deseas que aparezca el borde, dale un valor de 1 o mayor.
El uso de tablas es muy recomendable para mejorar el aspecto visual de tu página, piensa cómo ordenarías el texto y la fotos dentro de una tabla: |
|
| 4.5 Las celdas
La celda es la unidad mínima y principal de una tabla. En ellas podemos colocar cualquier otro elemento que hayamos visto, títulos, textos, ligas, imágenes e incluso otras tablas.
Podemos decir que las celdas son elementos con vida propia, ya que son configurables totalmente: su borde, altura y anchura, color de fondo e incluso alineación de los elementos que en ella se contienen.
Algunas de las etiquetas que se usan para la configuración de las celdas son:
| width="*" | Determina el ancho de celda, y se especifica en píxeles o porcentaje. |
| rowspan="*" | Permite unir dos o más celdas en sentido horizontal (filas), su medida es la cantidad de filas a unir. |
| colspan="*" | Permite unir dos o más celdas en sentido vertical (columnas), su valor es la cantidad de columnas a unir. |
| bgcolor="#*" | Determina el color del fondo de la celda. |
| align="***" | Especifica la alineación horizontal del contenido de la celda en posiciones: izquierda, centrada o derecha. (left, center, right) |
| valign="***" | Especifica la alineación vertical del contenido de la celda en posiciones: arriba, centrada, abajo. (top, middle, bottom). |
|
Para crear tus tablas, sigue las instrucciones descritas en el tópico anterior y practiquemos los atributos de celdas con los siguientes ejemplos:
| CELDAS A) | celdaA.html |
Crea una tabla que contenga 2 filas y 2 columnas, con 90% de ancho y borde de 0 píxel.
| celda 1 | celda 2 |
| celda 3 | celda 4 |
|
| |
|
| CELDAS B) | celdaB.html |
Ahora haremos que la primera fila se expanda al ancho de las tres columnas, utilizaremos el atributo rowspan.
|
| |
|
| CELDAS C) | celdaC.html |
Utilizaremos la primera fila con su celda expandida, como contenedora de un título, el que tú quieras. En la celda 3 colocaremos una imagen y en la celda 4 un texto. Puedes probar configurando las celdas de diferente forma hasta que logres el resultado que mejor te parezca.
Aprendamos a programar tablas
|
| Programar tablas y configurar celdas con este pequeño tutorial es muy fácil, todo es cuestión de practicar.
Una tabla es un elemento de organización y diseño. Es divertido y práctico. |
|
| |
|
¡Listo! Ya tienes un diseño de página. Sigue intentado otras combinaciones de atributos, tanto de tabla como de celda y consigue el resultado que desees.
| TIPS |
| Puedes utilizar tablas para crear menús, ya sea con ligas de texto o de imágenes. Si quisieras hacer un menú vertical puedes intentarlo colocando una sola columna y la cantidad de filas como secciones tenga. En el caso de ser un menú horizontal puedes colocar una fila y tantas columnas como secciones. ¡Deja volar tu creatividad! |
|
 | Texto de prueba, texto. Texto de prueba, texto. |
|
CONCLUSIÓN¡Enhorabuena ya estas listo para poner manos a la obra y crear tu propia página de web!
Con este tema, hemos finalizado la enseñanza de técnicas básicas de programación en HTML ahora tienes todas las herramientas que podrán ayudarte a crear tu página para la Internet.
En este momento ya sabes establecer enlaces entre dos puntos, colocar imágenes y qué tipo usar, podrás usar separadores para mejora el aspecto y lectura del documento, y también eres capaz de crear tablas con bordes y colores de fondo.
| RECUERDA QUE... |
 Debes utilizar colores que faciliten la lectura de tu información, tanto para el fondo como para los textos que uses.
Cuando de sitios en la Internet se trata, el enemigo más cruel para que las páginas se descarguen lentamente son las imágenes; cuanto más grande es la imagen (tamaño y peso) más largo es el tiempo de espera… ¡No ahuyentes a los visitantes, evita usar imágenes pesadas!
Intentar diseñar primero tu página sobre papel haciendo bocetos, eso te ayudará a analizar tu trabajo de programación así podrás preveer incovenientes.
El éxito en toda labor es la práctica. No temas equivocarte, haz todos los intentos que quieras antes de llegar a tu versión final. |
|
|
| Texto de prueba, texto. Texto de prueba, texto. |
|
|
|
|
|
|
|
|
|
|
Esta imagen tiene una alineación hacia la izquierda (left)
No hay comentarios:
Publicar un comentario