El lenguaje HTML HTML 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. 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.
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) DreamWeaver, Composer, FrontPage.
Sintaxis de código HTML <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: Nombres de etiquetas y atributos en minúsculas. Etiquetas de cierre para elementos no vacíos. Los valores de los atributos deben estar incluidos entre comillas dobles.
Estructura de un documento HTML Todas las páginas web tienen la siguiente estructura: <html> <head> <title>primera página</title> </head> <body> </body> </html>
Comandos básicos de formateo de texto (1) <p>...</p> Indica un comienzo de párrafo. Tiene como opciones align="center","left" o "right", para centrar o alinear a derecha o izquierda el texto. Cada comienzo de párrafo deja un espacio separador. <h1>...</h1> Se usan para dividir correctamente en secciones nuestra página, tal y como se hace en un documento de texto normal. El mas importante (grande) es <h1>, luego <h2> y así hasta <h7>. <center>...</center> Permite centrar. <pre>...</pre> Representa el texto encerrado en ella con un tipo de letra de paso fijo. <blockquote>...</blockquote> Para dejar márgenes tanto a izquierda como a derecha (sangrar).
Comandos básicos de formateo de texto (2) <br> Cuando escribimos un documento HTML los retornos de carro no tienen ningún efecto (salvo si están contenidos bajo la directiva <pre>). Agrupaciones de más de un carácter en blanco se traducen en un solo carácter blanco. <hr> Inserta una linea horizontal o separador. De ellos pueden modificarse varios atributos: size="num", "%" grosor de la barra horizontal, en pixels o el porcentaje del ancho de página. width="num" anchura de la barra horizontal en pixels. align="..." alineamiento de la barra, puede valer left, right o center. noshade elimina el aspecto tridimensional.
Cambiando el estilo de letra Todas estas etiquetas nos permiten cambiar el aspecto del tipo de letra que estemos utilizando: <b>...</b> Pone el texto en negrita. <i>...</i> Representa el texto en cursiva. <u>...</u> Para subrayar algo. <s>...</s> Para tachar. <tt>...</tt> Permite representar el texto en un tipo de letra de paso fijo. <sup>...</sup> Letra superíndice. <sub>...</sub> Letra subíndice.
Caracteres especiales 1º 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"> 2º Utilizar los nombres simbólicos definidos en HTML á, Á, é, É... á, Á, é, É, í, Í, ó, Ó, ú y Ú ñ y Ñ ñ y Ñ Espacio en blanco que no puede ser usado para saltar de línea. Cuando escribimos un documento HTML las agrupaciones de más de un carácter en blanco se traducen en un solo carácter blanco (salvo si están contenidos bajo la directiva <pre>). º º ª ª
Enlaces El 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. 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: El texto aparecerá subrayado y de un color distinto al habitual, y las imágenes estarán rodeadas por un borde del mismo color que el del texto del enlace. Al pulsar sobre el enlace, se abrirá en el navegador el documento al que apuntaba el enlace.
Para especificar una dirección en un enlace: <a href="dirección">púlsame</a> La dirección estará en formato URL (Uniform Resource Locator). servicio://máquina/ruta/fichero Donde el servicio podrá ser uno de los siguientes: http Es el servicio invocado para transmitir páginas web y el que usaremos normalmente en los enlaces. https Es una innovación sobre el anterior, que nos permite acceder a servidores (generalmente comerciales) que nos ofrecen el uso de técnicas de encriptación para proteger los datos que intercambiemos con él de terceras personas. ftp Permite trasmitir ficheros desde servidores de ftp anónimo. Si no le pedimos un fichero sino un directorio, en general el navegador se encargará de mostrarnos el contenido del mismo para que podamos escogerlo cómodamente. Utilizando la @ podremos acceder a servidores privados. mailto Para poder mandar un mensaje. news Para poder acceder a grupos de noticias. Se indica el servidor y el grupo. Por ejemplo
Ejemplo de una página sencilla <html> <head> <title>mi primera página WEB </title> </head> <body> Hola a todos, como han deducido por el titulo esta es la primera pagina web que hago, espero que les guste. Fdo. Jorge </body> </html>
<html> <head> <title> La chistera - Humor y magia </title> </head> <body> <center> <h1> <img src="imagenes/chistera.gif"> LA CHISTERA - Humor y magia </h1> </center> <h2> Quienes somos </h2> <p>la chistera es un grupo de artistas dedicados al mundo de la magia, la comedia y el espectáculo. Entre nosotros podrás encontrar humoristas, magos, showmen, etc.</p> <p>si usted o su empresa necesita crear un espectáculo y no quiere quedar decepcionado no dude en escribirnos AHORA MISMO. Nuestra dirección es:</p> <center> chistera@chistera.es </center> <h2> Un ejemplo de nuestro repertorio </h2> <p>cada día le mostramos ejemplos distintos de nuestro amplísimo y novedoso repertorio de chistes: <blockquote> Era un tío tan gafe, tan gafe, que se sentó en un pajar y se clavó la aguja. </blockquote> <blockquote> Doctor, Doctor, cuanto tiempo me queda de vida? <br> 5... 4... 3... 2... </blockquote> </p> <h2> Enlaces a páginas relacionadas </h2> <p> <a href="http://www.ciudadfutura.com/areirse "> A Reírse Toca, Ja, ja, ja! </a> </body> </html>