Curso Basico de HTML 2da Entrega

**Diabolic_Boy** · 24/12/07 04:45:23

1. Dando formato al texto del documento

2. Listas
* Lista numerada
* Lista con viñetas
* Lista de definición

3. Vínculos de hypertexto
* Vínculos externos hacia páginas lejanas
* Vínculos externos hacia páginas cercanas
* Vínculos internos : anclas
* Vínculos de correo electrónico
* Vínculos hacia otros recursos del Web

DANDO FORMATO AL TEXTO DEL DOCUMENTO
Como ya habíamos mencionado, el HTML no distingue masa de un espacio entre caracteres, saltos de línea, negrilla, cursiva, tamaño y tipo de fuente, viñetas, entre otras. Para lograr tales características en el texto del documento HTML (recordemos que el texto va dentro del cuerpo del documento entre las etiquetas <BODY> </BODY>) se debe hacer uso de las etiquetas que explicaremos a continuación.

Etiquetas de formato: Negrita <B> Texto en negrita</B> Cursiva <I> Texto en cursiva</I> Subrayado <U> Texto subrayado</U> Monoespaciado <TT> Texto como si estuviera escrito en máquina da escribir </TT> Preformateado <PRE> Texto que conserva todos sus espacios y tabuladores, y aparece en formato monoespaciado</PRE>

Etiquetas para párrafos:
Nuevo párrafo (dos espacios) <P> Línea horizontal <HR> Salto de línea (un espacio) <BR> Tamaño de la fuente <Hx> </Hx>. Donde x es un número entre 1 y 6, siendo 1 el tamaño mas grande y 6 el más pequeño

LISTAS
Las listas sirven para desplegar la información que debe ser enumerada o tabulada de una manera organizada. En el lenguaje HTML se pueden construir varios tipos de listas :

Lista numerada: Numera los párrafos u objetos que se encuentran dentro de la siguiente estructura : <OL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</OL>
Útiles para crear tablas de posiciones y enumerar procedimientos.

Lista con viñetas: Inserta un punto negro a los párrafos u objetos que se encuentran dentro de la siguiente estructura : <UL>
<LI> Primer párrafo u objeto.
<LI> Segundo párrafo u objeto.
Etc...
</UL>
Son útiles para enumerar por puntos los comentarios de su página.

Lista de definición: Son útiles para las entradas de tipo diccionario o para las secciones de documentos donde un término es el encabezado de la sección y la definición es el texto de aquella. La estructura es la siguiente : <DL>
<DT> Primer término.
<DD> Primera definición.
<DT> Segundo término.
<DD> Segunda definición.
Etc...
</DL>
A cada una de estas listas se les puede crear una lista dentro de ellas, simplemente agregando la estructura deseada dentro de la etiqueta correspondiente.

VÍNCULOS DE HYPERTEXTO
El hipertexto son vínculos dentro del texto del documento HTML que permiten al usuario navegar con facilidad a través de la black, tanto a nivel interno como externo, es decir , pueden crearse vínculos que lleven hacia una misma parte del documento (interno) o hacia otra parte del mundo Web (externo). También existen otro tipo de vínculos que llevan al surfeador a otra partes como correo, gopher, ftp, entre otras.
Las etiquetas HTML que se encargan de generar los vínculos son <A> y </A>. A esta etiqueta se le debe agregar el "URL" con el que se desea vincular. Esto se realiza de la siguiente manera :

<A HREF="URL">Texto del vínculo</A> Vínculos externos hacia páginas lejanas Este vínculo envía al lector fuera de la página hacia otro site Web. Generalmente son usados para relacionar al usuario con otros sitios interesantes en el mundo Web.
El URL será entonces la dirección completa de la página a la que se desea crear el vínculo. Ejemplo : http ://www.insomnia-group.com

Vínculos externos hacia páginas cercanas
Generalmente las personas que diseñan sus páginas no encuentran cómodo desplegar toda la información en una sola, sino que crean varias páginas vinculadas entre sí. Por ejemplo, es común ver una página principal (Home Page) con una tabla de contenido a la cual se le han creado vínculos hacia cada uno de sus temas. Estos vínculos son hacia archivos HTML que, generalmente, se encuentran en el mismo directorio de la página principal.
El URL será entonces la ruta completa (incluyendo el nombre del archivo) que lleva al visualizador a cargar el documento que se desea desplegar.
Por ejemplo en mi cuenta he creado una página para que las personas que visiten al Home Page registren su visita. Si el nombre de documento es firmas.html y se encuentra en el mismo directorio de la Home Page, el URL sería firmas.html.

Vínculos internos : anclas
Cuando un página tiene un gran contenido, es posible hacer que el usuario navegue a través de la página. Para ello se debe marcar tanto el inicio como el fin del ancla.
Para marcar el inicio del ancla se utiliza la etiqueta <A HREF="#sección"> Texto que relaciona al ancla </A> . Nótese que lo que sería en los otros casos el URL se ha cambiado por el nombre que se le da al ancla, precedido del signo #.
Para marcar el fin del ancla (a donde debemos llegar) se hace uso de la etiqueta <A NAME="sección"> Texto del ancla </A>. Donde "sección" debe coincidir con el nombre designado en el inicio del ancla.

Vínculos de correo electrónico
Por lo general las personas que diseñan sus paginas proporcionan la opción de tener una retroalimentación por parte del visitante. La manera mas sencilla de lograr esto es través de un vínculo que lleve al surfeador a un cuadro de correo electrónico con la dirección pblacketerminada.

La estructura es la siguiente:

<A HREF=mailto :"dirección de correo electrónico" Texto del vínculo </A> Ejemplo: <A HREF=mailto :"edpq148cronos.eafit.edu.co" Sugerencias y comentarios</A> Vínculos hacia otros recursos del Web En la black, a parte del World Wide Web, existen otros cuatro recursos, que son el gopher, el FTP, el Usenet y el Telnet.
Para generar un vínculo hacia cualquiera de estos recursos, basta con designar adecuadamente el URL requerido dentro de la estructura normal de etiquetas de vínculo.

RECURSO URL FTP (directorio) ftp ://quién/dónde FTP (archivo) ftp ://quién/dónde/que Gopher gobher ://quién UseNet news ://nombre del grupo de noticias Telnet telnet ://quién

Continuara...

**RoDrOx** · 25/12/07 21:12:21

si algosavia espero la 3

**Diabolic_Boy** · 03/02/08 16:05:43

AGREGANDO IMÁGENES A SU P�GINA

Las paginas en el Web no deben estar llenas de texto por todos lados pues esto hace que los surfeadores se aburran de verlas y como resultado obtendran una pagina que nunca es visitada. Una herramienta muy util para hacer de las paginas un documento llamativo y amigable es hacer uso de im�genes relacionadas con el texto al que se esta haciendo referencia. �Se imaginan una valla publicitaria sin ningun tipo de imagen ?
Tambien es muy importante una excelente combinacion de colores de fondo y de texto, con el fin de hacer que la pagina sea lo mas legible posible. Es en este punto donde entra a jugar la creatividad del dise�ador.
Para colocar una imagen en una pagina basta con llamarla desde el documento HTML ( es similar los vinculos hacia paginas cercanas). Lo primero es dise�ar el gr�fico deseado en cualquier programa de dibujo como el Corel Draw o el Adobe Photoshop, luego se debe convertir a cualquiera de los formatos aceptados por el lenguaje HTML (GIF y JPEG).
La estructura es la siguiente :
<IMG SRC= "Nombre del archivo" >
Donde "Nombre del archivo" es el nombre del archivo de grafico que desea desplegar.

GENERE TABLAS

En general las tablas pueden ser sin borde o con borde. La tabla sin borde es quizas la herramienta mas util en la codificacion HTML, pues a traves de ellas podemos organizar nuestro documento como lo deseemos, teniendo en cuenta que el HTML no entiende mas de un espacio, tabulador o salto de linea?
Pero porque no hacerlo usando la etiqueta preformateado para arreglar la distribucion de mi documento?
Sencillo: como todos sabemos esta etiqueta despliega el texto en el tipo de letra monoespaciado y no permite cambios ni de forma ni de tamaño. Conclusion; el documento se ver�a horrible.
La tabla con borde es itil para desplegar tablas de contenido, res�menes, cuadros de atencion, entre otras.
Pero qu� es una tabla?: es un conjunto rectangular de filas y columnas que aparecen en su pantalla.

ESTRUCTURA B�SICA DE LAS TABLAS
<TABLE BORDER="Numero entre 0 y 7">
<CAPTION ALIGN=TOP � BOTTOM>;Aqui va el texto del titulo</CAPTION>
<TR>
<TD>Primera fila, primera columna</TD>
<TD>Primera fila, segunda columna</TD>
<TD>Primera fila, tercera columna</TD>
..........
</TR>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
<TD>Segunda fila, primera columna</TD>
..........
</TR>
etc...
</TABLE>

Notas: El numero que se designa en la etiqueta <TABLE BORDER="Numero entre 0 y 7"> determina el ancho del borde de la tabla. Este numero puede estar entre 0 y 7.
Se preguntar que significa la etiqueta <CAPTION ALIGN=TOP � BOTTOM>; Aqu� va el texto del titulo</CAPTION>. Simplemente da la posibilidad de colocarle un titulo a la tabla, bien sea en la parte superior (TOP) o en la parte inferior (BOTTOM).

REGLAS BÁSICAS EN EL DISEÑO

Tener algo interesante que decir en su Home Page:
Su pagina debe ser informativa para mantener vivo el interes.

No ser otra lista de listas:
Todo el mundo ya conoce las herramientas de busqueda. Haga que sus enlaces sean pertinentes al tema que esta tratando.

Recordar que no en todos los Browser aparece igual:
No haga que su pagina dependa demasiado de ciertos comandos HTML que pueden no apatrecer en todos los Browsers . Algunos Browsers pueden no aceptar sus graficas, asi que proporcione textos alternativos.

No todos los que ven pagina,lo hacen a 28.8 o mas rapido:
Mantenga su pagina con un maximo de 15K en imagenes o fraccionela si esta es muy grande.

No usar graficas de otros autores si no esta autorizado:
Hay muchasa fuentes de graficas gratis. Tambien existen graficadoes sencilos con los que usted puede crear sus propias graficas.

Reconocer el trabajo de los demas:
Si algun "Web Site" le ayuda de alguna manera a construir su pagina, entonces brindele un enlace

Colocar fecha de la ultima revision:
Indique cuando se realiza la ultima revision. Esto hará que las personas se motiven a leer su pagina.

Verifique sus enlaces periodicamente:
No deje que expiren sus enlaces durante largos periodos de tiempo. Revise su validez.

Sea abierto a comentarios o sugerencias:
Especifique vinculos de correo electronico o, si es podible, formularios de realimentacion.

Practique su HTML:
Use los editores solo cuando conozca los principios basicos del HTML. Esta es la combinacion ideal.

RECUERDE QUE ESTAS SON SOLO GUIAS - ALGUNAS SON DE BUENOS MODALES EN LA black - PERO NUNCA DEJE QUE LE QUITEN SU ESTILO - LA EXPRESION PERSONAL ES MUY IMPORTANTE -.

**RoDrOx** · 16/03/08 00:23:36

Esto es nuevo Gracias

Tema: Curso Basico de HTML 2da Entrega

LinkBack

Herramientas

Curso Basico de HTML 2da Entrega

Curso Basico de Html 3Era Entrega

Temas Similares

Tutorial Basico de Firmas.

demora en la entrega

entrega para el Fullshop

Curso Basico de Html 3era Entrega

Curso Basico HTML 1Era Entrega

Normas de Publicación