[HTML (HYPERTEX T MARKUP LANGUAJE)]

Transcripción

1 HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web. Para toda persona interesada en crear páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas las páginas web, desarrollar sitios con más flexibilidad y mejor construidos. [HTML (HYPERTEX T MARKUP LANGUAJE)] Nociones básicas

2 HTML (Hypertext Markup Languaje) HTML se basa en principalmente en etiquetas, que son como instrucciones para dar formato a las diferentes partes de una página web. Para toda persona interesada en crear páginas web es importante conocer al menos nociones básicas de este lenguaje, de esta forma podemos comprender como están hechas las páginas web, desarrollar sitios con más flexibilidad y mejor construidos. Por ejemplo, mediante el uso de las etiquetas HTML puedes subrayar textos, ponerlos en negrita, establecer encabezados, estructurar el texto en guiones, en párrafos, añadir imágenes y vínculos a otras páginas, etc. De ahí que el conocimiento de estas etiquetas sea importante para hacer páginas web, mejor dicho imprescindible. El HTML es más una codificación que un lenguaje de programación. Su estructura básica es tan simple que cualquier persona sin principios en programación puede aprenderlo con gran facilidad. Lo sorprendente de este lenguaje es que proporciona al usuario la información en una manera interactiva, haciendo uso del hipertexto, o texto con enlaces hacia otros lugares del Web, o hacia inserciones de multimedia (videos, sonidos, gráficos, etc.). Además es universal y no depende del sistema operativo que se esté utilizando. Los documentos HTML se escriben en modo ASCII (texto plano), haciendo uso de cualquier procesador de palabras y en cualquier sistema operativo. ESTRUCTURA BÁSICA 1 Para comenzar debemos saber que el HTML utiliza una codificación genérica, la cual hace uso de TAGS o etiquetas. Mediante estas etiquetas es posible separar el contenido del documento de su formato. Los TAGS son comandos que se especifican en el cuerpo del programa, con el fin de darle las características deseadas a la información. Toda página Web debe contener la siguiente estructura: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> Esta es mi primera página Web</BODY> </HTML> La etiqueta <HTML> le indica al visualizador que va a comenzar a leer un documento HTML y se debe colocar siempre al comienzo y al fin del texto. La etiqueta <HEAD> indica un encabezado, dentro del cual se coloca información como el título, el cual debe estar contenido entre la etiqueta <TITLE>

3 Entre la etiqueta <BODY> va el cuerpo del documento, el cual es lo que realmente vemos en el Web. Para comenzar a escribir un documento, es importante tener en cuenta que el lenguaje HTML no distingue más de un espacio entre caracteres y se olvida de cualquier formato que se le de al texto (negrilla, cursiva, tipo de letra, entre otras). Recordemos que para esto es que se creó el HTML, toda presentación final debe ser proporcionada mediante las etiquetas. Cada etiqueta, con excepción de unas cuantas, le debe indicar al visualizador cuando finaliza, para lo cual se utiliza </TAG>, donde TAG es puede ser cualquier etiqueta. De esta manera indicamos cuando comienza y termina el encabezado, el título, el cuerpo y el documento HTML. EDITAR - GUARDAR Y VISUALIZAR Para editar o crear un documento HTML se puede hacer uso de cualquier procesador de palabras. Para ello se debe modificar o digitar la estructura completa del documento y guardarlo como texto simple con extensión HTML. Ahora para visualizar nuestros cambios o ver cómo va quedando nuestra página, antes de cargarla en nuestro servidor, se puede abrir el archivo en cualquier visualizador, y este lo desplegará tal como se vería la página en el navegador. 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. 2 Negrita Cursiva Subrayado Monoespaciado Preformateado Etiquetas de formato: <B> Texto en negrita</b> <I> Texto en cursiva</i> <U> Texto subrayado</u> <TT> Texto como si estuviera escrito en máquina da escribir </TT> <PRE> Texto que conserva todos sus espacios y tabuladores, y aparece en formato monoespaciado</pre> Etiquetas para párrafos: Nuevo párrafo (dos espacios) Línea horizontal Salto de línea (un espacio) Tamaño de la fuente <P> <HR> <BR> <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

4 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. 3 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 red, 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 otras partes como correo, gopher, ftp, entre otras.

5 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: 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. 4 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 páginas proporcionan la opción de tener una retroalimentación por parte del visitante. La manera más 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 predeterminada. La estructura es la siguiente:

6 <A HREF=mailto:"dirección de correo electrónico" Texto del vínculo </A> Ejemplo: <A Sugerencias y comentarios</a> Vínculos hacia otros recursos del Web En la Red, 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 AGREGANDO IMÁGENES A SU PÁGINA Las páginas 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 obtendrán una página que nunca es visitada. Una herramienta muy útil para hacer de las páginas un documento llamativo y amigable es hacer uso de imágenes relacionadas con el texto al que se está haciendo referencia. Se imaginan una valla publicitaria sin ningún tipo de imagen? 5 También es muy importante una excelente combinación de colores de fondo y de texto, con el fin de hacer que la página sea lo más leíble posible. Es en este punto donde entra a jugar la creatividad del diseñador. Para colocar una imagen en una página basta con llamarla desde el documento HTML ( es similar los vínculos hacia páginas 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 gráfico que desea desplegar. GENERE TABLAS En general las tablas pueden ser sin borde o con borde.

7 La tabla sin borde es quizás la herramienta mas útil en la codificación HTML, pues a través de ellas podemos organizar nuestro documento como lo deseemos, teniendo en cuenta que el HTML no entiende más de un espacio, tabulador o salto de línea? Pero por qué no hacerlo usando la etiqueta preformateado para arreglar la distribución 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. Conclusión; el documento se vería horrible. La tabla con borde es útil para desplegar tablas de contenido, resúmenes, cuadros de atención, 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="Número entre 0 y 7"> <CAPTION ALIGN=TOP ó BOTTOM>;Aquí va el texto del título</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> 6 Notas: El número que se designa en la etiqueta <TABLE BORDER="Número entre 0 y 7"> determina el ancho del borde de la tabla. Este número puede estar entre 0 y 7. Se preguntarán que significa la etiqueta <CAPTION ALIGN=TOP ó BOTTOM>; Aquí va el texto del título</caption>. Simplemente da la posibilidad de colocarle un título a la tabla, bien sea en la parte superior (TOP) o en la parte inferior (BOTTOM). Resumen de los tags mas utilizados

8 Tags Básicos <html></html> <head></head> <body></body> Header Tags <title></title> Atributos del Body <body bgcolor=?> <body text=?> <body link=?> <body vlink=?> <body alink=?> Tags de texto <pre></pre> <hl></hl> <h6></h6> <b></b> <i></i> <tt></tt> <cite></cite> <em></em> <strong></strong> Crea un documento HTML Setea el título y otra información que no se visualizará en la página web Setea la parte visible de la página Pone el nombre del documento en la barra del título Setea el color de fondo, usando nombres o valores hex Setea el color del texto, usando nombres o valores hex Setea el color de los enlaces, usando nombres o valores hex Setea el color de los enlaces visitados, usando nombres o valores hex Setea el color de los enlaces al ser presionados, usando nombres o valores hex Crea texto preformateado Crea un título grande Crea un título pequeño Crea texto en negritas Crea texto en itálicas Crea texto teletipo Crea una cita, usando itálicas Enfatiza una palabra Enfatiza una palabra (con itálicas or negritas) 7

9 <font size=?></font> <font color=?></font> Enlaces <a href="url"></a> < a href="mailto: "></a> <a name="name"></a> <a href="#name"></a> Formatting <p></p> <p align=?> <br> <blockquote> </blockquote> <dl></dl> <dt> <dd> <ol></ol> <li></li> <ul></ul> <div align=?> Elementos Gráficos <img src="name"> <img src="name" align=?> <img src="name" border=?> <hr> Setea el cuerpo de la fuente de 1 a 7 Setea el color de la fuente, usando nombres o valores hex Crea un hipervínculo Crea un enlace de Crea un enlace dentro del documento Vincula a ese target dentro del documento Crea un párrafo nuevo Alinea un párrafa (izquierda, centro, derecha) Inserta un salto de línea Justifica el texto a ambos lados Crea un lista de definición Precede cada término de definición Precede cada definición Crea un lista numerada Precede cada ítem de una lista y le agrega un número Crea una lista con puntos Un tag genérico utilizado para formatear grandes bloques de HTML, también usado para stylesheets Agrega una imagen Alinea una imagen an image Setea el grosor del borde de la imagen Inserta una linea horizontal 8

10 <hr size=?> <hr width=?> <hr noshade> Tablas <table></table> <tr></tr> <td></td> <th></th> Atributos de las Tablas <table border=#> <table cellspacing=#> <table cellpadding=#> <table width=# or %> <tr align=?> or <td align=?> <tr valign=?> or <td valign=?> <td colspan=#> <td rowspan=#> <td nowrap> Frames <frameset></frameset> <frameset rows="value,value"> Setea la altura de una linea Setea el ancho de la linea, en porcentaje o números absolutos Inserta una linea horizontal sin sombra Crea una tabla Setea cada row de la tabla Setea cada celda de la tabla Setea el header de la tabla (una celda normal, con texto centrado y resaltado) Setea el grosor del borde de la tabla Setea la cantidad de espacio entre las celdas Setea la cantidad de espacio entre el borde de las celdas y su contenido Setea el ancho de la tabla - en pixel o en porcentaje de acuerdo al ancho del documento Setea la alineación delas celdas (izquierda, centro, derecha) Setea la alineación vertical de las celdas (arriba, nedio, abajo) Setea la cantidad de columnas dentro de una celda Setea la cantidad de rows que una celda despliega (por defecto=1) Previene que se rompa una linea dentro de la celda tag dentro de un documento de frames Define las filas de un frame, usando números o porcentaje para definir el largo 9

11 <frameset cols="value,value"> <frame> <noframes></noframes> Atributos de los Frames <frame src="url"> <frame name="name"> <frame marginwidth=#> <frame marginheight=#> <frame scrolling=value> <frame noresize> Formularios <form></form> <select multiple name="name" size=?></select> <option> <select name="name"></select> <textarea name="name" cols=40 rows=8></textarea> <input type="checkbox" name="name"> <input type="radio" name="name" value="x"> <input type=text name="foo" size=20> Define las columnas de un frame, usando números o porcentaje para definir el largo Define un solo frame - o región - dentro de frameset Define lo que aparecerá en navegadores que no soporten frames Especifica que documento html será desplegado Nombra al frame or región, para que pueda ser llamado desde otro frame Define los márgenes derecho e izquierdo del frame; debe ser igual o mayor a 1 Define los márgenes de arriba y abajo del frame; debe ser igual o mayor a 1 Setea si el frame tendrá barra de desplazamiento o no; el valor debe ser "yes," "no," o "auto. " El default es "auto". Previeve al usuario de cambiar el tamaño del frame Para forms funcionales, deberá correr un script de CGI. El HTML sólo crea la apariencia del formulario. Crea el formulario Crea un menú de desplazamiento. Size setea el número de ítems visibles antes de tener que desplazarse. Setea cada ítem del menú Crea un menú desplegable Crea una área de texto. Crea una checkbox. Crea un radio button. Crea un área de texto de una sola línea. Size setea el largo en caracteres. 10

12 <input type="submit" value="name"> <input type="image" border=0 name="name" src="name.gif"> Crea un botón de envío. Crea un botón de envío utilizando una imagen. REGLAS BÁSICAS EN EL DISEÑO 1. Tener algo interesante que decir en su Home Page: Su página deberá ser informativa para mantener vivo el interés. 2. No será otra lista de listas: Todo el mundo ya conoce las herramientas de búsqueda. Haga que sus enlaces sean pertinentes al tema que está tratando. 3. Recordar que no en todos los NAVEGADORES aparece igual: No haga que su página dependa demasiado de ciertos comandos HTML que pueden no aparecer en todos los Browsers. Algunos Browsers pueden no aceptar sus gráficas, así que proporcione textos alternativos. 4. No todos los que ven página, lo hacen a 28.8 o más rápido: Mantenga su página con un máximo de 15K en imágenes o fracciónela si ésta es muy grande. 5. No usar gráficas de otros autores si no está autorizado: Hay muchas fuentes de gráficas gratis. También existen graficados sencillos con los que puede crear sus propias gráficas Reconocer el trabajo de los demás: Si algún "Web Site" le ayudó de alguna manera a construir su página, entonces bríndele un enlace 7. Colocar fecha de la última revisión: Indique cuándo se realizó la última revisión. Esto hará que las personas se motiven a leer su página. 8. Verifique sus enlaces periódicamente: No deje que expiren sus enlaces durante largos períodos de tiempo. Revise su validez. 9. Sea abierto a comentarios o sugerencias: Especifique vínculos de correo electrónico o, si es posible, formularios de realimentación. 10. Practique su HTML: Use los editores solo cuando conozca los principios básicos del HTML. Esta es la combinación ideal. 11. RECUERDE QUE ÉSTAS SON SÓLO GUÍAS - ALGUNAS SON DE BUENOS MODALES EN LA WWW - PERO NUNCA DEJE QUE LE QUITEN SU ESTILO - LA EXPRESIÓN PERSONAL ES MUY IMPORTANTE