Documentos HTMLHTML significa HyperText Markup Language. Es el lenguaje en que se escriben los millones de documentos que hoy existen en el World Wide Web. Cuando accedemos a uno de estos documentos, el cliente (Netscape, IE, Mosaic, Lynx, Mozilla) los interpreta y los muestra.Los documentos HTML son ficheros de texto plano (también conocidos como ASCII) que pueden ser editados con cualquier editor de texto (como Vim o el "Bloc de notas" de Windows). También podríamos utilizar cualquier programa procesador de textos (como StarWriter o Word), salvando el documento como "solo texto". El nombre de los ficheros escritos en lenguaje HTML suelen tener la extensión html o htm. El lenguaje HTML se basa en la sintaxis SGML (Standard Generalized Markup Language). Esto quiere decir que los diferentes elementos (párrafos, encabezamientos, tablas, listas, ...) de un documento para la WWW se señalan intercalando etiquetas que indican al navegador cómo debe mostrarlo. Una etiqueta HTML consiste en un signo menor "<", un nombre de una directiva (orden o comando para el navegador), seguido de los parámetros o atributos y un signo mayor ">". Para cualquier etiqueta que indica un el inicio de un elemento hay otra de cierre que indica que esa directiva ya no debe actuar sobre el texto que sigue (en algunas ocasiones no es necesario poner, o no existe, la etiqueta de cierre correspondiente). <directiva parámetro="xxxx"> ... </directiva>HTML no es sensible a mayúsculas y minúsculas. Para HTML es equivalente <HTML> y <html>, con algunas excepciones. Aunque es recomendable es escribir los nombres de las etiquetas en minúsculas ya que las nuevas generaciones del HTML están basadas en SGML que requiere de documentos bien formados. Así que, si nuestra intención es continuar trabajando con este tipo de documentos en el futuro, nos puede venir bien seguir el modo de escribir de los documentos bien formados:
| |
Estructura de un documento HTMLTodas las páginas web tienen la siguiente estructura:<html>En la primer linea encontramos la etiqueta <html>. Esta le indica al cliente que comienza un documento HTML. Luego viene <head>, la cabecera, donde se pone información sobre el documento, que no se ve en la pantalla del navegador. Aquí puede ir el título <title> del documento, es lo que veremos como título de la ventana en los navegadores que lo permitan y como se conocerá nuestra página en algunos buscadores y en la lista de favoritos de los usuarios (es importante pensar bien el título del documento). Tras la cabezera viene <body>, el cuerpo, que es donde se coloca la información que queremos mostrar en la pantalla principal del navegador. | |
Comandos básicos de formateo de texto
| |
Cambiando el estilo de letraTodas estas etiquetas nos permiten cambiar el aspecto del tipo de letra que estemos utilizando.
| |
Caracteres especialesCuando editamos una página HTML con un editor de texto, podemos poner las tildes y los caracteres propios del español (á, A, é, É, ..., ü, ñ, Ñ, ¿, ¡). Y nuestro navegador los representa de manera adecuada en la pantalla, ya que suponen por defecto que la página está escrita en caracteres de un idioma europeo occidental. Pero no todo el mundo tiene configurado su navegador igual (en Rusia ven la páginas con caracteres cirílicos y en Japón en caracteres japoneses) Para indicar a otro navegador que estamos utilizando los caracteres de un idioma europeo occidental, la primera línea de la cabecera debe ser<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">Otra posibilidad es utilizar los nombres simbólicos definidos en HTML
Caracteres de controlEn el HTML existen cuatro caracteres de control, que se usan para formar etiquetas, establecer parámetros, etc.. Para poder emplearlos sin riesgo deberemos escribir los siguiente códigos:
| |
EnlacesEl HTML es un lenguaje para hipertexto. Existen múltiples formatos de hipertexto (por ejemplo, los ficheros de ayuda de Windows) y lo que tienen en común es que todos poseen enlaces.Un enlace es una zona de texto o gráfico que al ser seleccionado nos traslada a otra posición dentro del documento actual o a otro documento, que puede encontrarse en el mismo ordenador o en otro de cualquier parte del planeta. Son los enlaces lo que hacen de la World Wide Web o telaraña lo que es. Para incorporar un enlace hay que utilizar esta etiqueta <a>. Todo lo que encerremos entre <a> y </a>, ya sea texto o imágenes, será considerado como enlace y sufrirá dos modificaciones:
<a href="dirección">Púlsame</a>La dirección estará en formato URL (Uniform Resource Locator). servicio://máquina/ruta/ficheroDonde el servicio podrá ser uno de los siguientes:
La dirección de la máquina puede ser su IP o la DNS. La ruta es una serie de directorios separados por el símbolo /, que es el utilizado en UNIX (el sistema operativo más extendido en los servidores de Internet). Cuando queremos acceder a un fichero situado en la misma máquina que la página web que estamos creando, no es necesario ni recomendable, escribir toda la ruta hasta el fichero, bastará relativizar todos los enlaces al directorio actual. Esto quiere decir que no tendremos que escribir: <a href="http://averroes.cec.junta-andalucia.esSi el fichero al que queremos acceder está en el mismo directorio, bastará con escribir: <a href="pagina2.html">Y si esrá en otro directorio, lo nombraré de forma relativa al directorio actual de esta forma: <a href="otro_directorio/pagina2.html">o bien de esta otra: <a href="../../otro_directorio/pagina2.html">donde los dos puntos (..) se utilizan para acceder al directorio padre. AnclasComo dijimos, es posible acceder a una posición del documento HTML. Para hacerlo, primero debemos especificar el lugar del documento al que queremos acceder:<a name="ancla">Para poder acceder a ese lugar incluimos el enlace de esta manera: <a href="#ancla">Vamos a ancla</a>También podemos acceder a anclas situadas en documentos remotos. Para ello añadiremos el nombre del ancla al URL así: <a href="enlaces.html#ancla">Vamos a ancla en los enlaces</a> | |
ListasExisten varios tipos de listas en HTML, todas ellas se pueden meter unas dentro de otras formando árboles, y siguen el siguiente formato:<tipo_lista> <li>Primer elemento<tipo_lista> puede ser :
| |
Incluyendo imágenesPara incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta <img> de esta manera:<img src="fichero_grafico" alt="descripcion">El parámetro src especifica el nombre del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF y el JPG. La últimas versiones de Netscape y Explorer aceptan también el formato PNG. El parámetro alt especifica el texto que se mostrará en lugar del gráfico en aquellos navegadores que no sean capaces de mostrarlos (como el Lynx) o en el supuesto de que el usuario los haya desactivado. Es por todo eso que conviene ponerlo siempre. Además algunos navegadores lo muestran cuando pasamos el ratón por encima de la imagen. Existen dos atributos que, aunque opcionales, también conviene indicar siempre: width="num" y height="num", la anchura y la altura del gráfico en pixels. De este modo, el navegador puede mostrar un recuadro del tamaño de la imagen mientras la va leyendo de la red y así poder mostrar el resto de la página correctamente mientras tanto. Estos atributos también nos pueden valer para ampliar o reducir el tamaño original de las imágenes, poniendo el valor en pixel o el % del ancho y alto con que queremos ver la imagen en el navegador. Para poder maquetar conjuntamente texto y gráficos, el HTML proporciona, por medio del parámetro align, las siguientes maneras de alinear una imagen respecto del texto que la acompaña:
Imágenes y enlacesSuele ser común incluir enlaces dentro de un gráfico. En ese caso, por defecto, los navegadores le pondrán un borde al gráfico para indicar que efectivamente es un enlace. Práctico, pero la mayoría de las veces bastante poco estético. Por medio del parámetro border podremos alterar el grosor de ese borde o incluso eliminarlo poniéndolo a cero.<a href="ruta/fichero"><img src="imagen" border="0"></a> JPG o GIFUna buena regla general es usar JPG cuando la imagen sea una foto y cuando sea un logotipo, letras, o un dibujo utilizar GIF. Lo principal es que la imagen ocupe lo mínimo posible (una imagen de más de 50k es muy grande para Internet) y que tenga una calidad aceptable. Un GIF de 256 colores generalmente es un desperdicio, con 64 colores casi no hay diferencia y puede ocupar bastante menos. Una foto en GIF de 256 colores, en JPG puede quedar reducida a menos de la mitad.Si hubiese que poner una imagen grande no la pondremos directamente en la página, pondremos un versión reducida de unos 150 x 100 pixels con un enlace a la grande, e indicaremos cuánto ocupa la grande. | |
TablasLas tablas son posiblemente la manera más clara de organizar la información. También es el modo más adecuado de maquetar texto y gráficos de una manera algo más controlada que con los parámetros align.
<table> <tr> <td>1,a</td> <td>1,b</td> <td>1,c</td> </tr>Los atributos de <table> son:
Definir las filasAhora que hemos definido la tabla nos toca hacer lo mismo con las filas. Cada fila se define con una etiqueta TR, que tiene los siguientes atributos:
Definir las celdasPor último, nos queda definir cada celda gracias a la etiquetas <td> y <th>. Estas etiquetas son equivalentes, pero la última se utiliza para encabezados, de modo que su interior se escribirá por defecto en negrita y centrado. Estos son los atributos de ambas:
Título de la tablaPor medio de la etiqueta <caption> se indica el título de una tabla. Esta etiqueta admite sólo un parámetro: align, que es por defecto top. Si lo definimos como bottom el título se colocará al final de la tabla en lugar del comienzo. | |
Tipos de letra, tamaño y coloresGracias a la etiqueta <font> vamos a poder cambiar el tamaño, el tipo y el color de las letras en nuestras páginas.Cambio de colorPara hacerlo se utiliza el parámetro color. La manera de especificarle el color es común a todas las etiquetas HTML: bien indicando el nombre, si es un color normal (Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua),<font color="red">Estoy en rojo</font>o bien especificando la intensidad de rojo, verde y azul (código RGB) del mismo. <font color="#xxxxxx">color</font>Donde cada x es un dígito hexadecimal, del 0 a la F. Las dos primeras x corresponden al rojo, las 2 siguientes al verde y las restantes al azul. Por ejemplo: para el blanco pondremos todos los valores al máximo, #FFFFFF; y para el rojo, #FF0000. <font color="#FF0000">Estoy en rojo</font> |
Tecnologia
Suscribirse a:
Entradas (Atom)
No hay comentarios:
Publicar un comentario
Comenta sabiamente