Está en la página 1de 3

http://geneura.ugr.es/~jmerelo/tutoriales/html101/ 2.

Lenguaje de marcas hipertexto: HTML El lenguaje que se usa para todas las pginas web se denomina HTML, es decir, Hypertext Markup Language, o lenguaje de marcas hipertexto. Eso implica primero que es un lenguaje de programacin, es decir, una forma de contarle al ordenador como hacer las cosas: en este caso se trata de contarle al ordenador cmo est estructurada una pgina. Al usar una marca o etiqueta HTML se debe pensar ms en el papel de lo que se marca que de cmo va a aparecer en la pantalla; cmo aparecer se decidir ms adelante usando el lenguaje CSS. La segunda parte es la que se denomina lenguaje de marcas o etiquetas. Mientras que muchos lenguajes de programacin habituales son imperativos, aqu lo que se le ponen son una serie de marcas a los elementos de texto para decir qu hacen o cmo deben comportarse. Las marcas estn rodeadas de < y > y cada marca tiene su contra-marca o anti-marca correspondiente, que comienza con </. P.ej., todos los documentos HTML tienen que comenzar con la marca <html> y terminar con </html>. Estas etiquetas llevan a su vez una serie de atributos, que son valores que modifican alguna propiedad de la marca o le aaden informacin. Los atributos se ponen de la forma variable=valor. P.ej., la etiqueta html puede llevar el atributo lang, de esta forma: <html lang=en. Los atributos pueden ir sin comillas si son una sola palabra sin espacios, pero es buena costumbre ponerle siempre comillas; las comillas pueden ser dobles o simples de forma indistinta. Se usan comillas simples si dentro del valor hay comillas dobles, y viceversa. Salvo excepciones, toda marca tiene su contramarca, y tienen que cerrarse en orden inverso a como se han abierto. Como la primera etiqueta que se abre es html, ser la ltima que se cierre. A partir de ah, el resto de las etiquetas se abrir y cerrar de la misma forma. P.ej.: <html> <head> <meta http-equiv=Content-Type content=text/html; charset=iso-8859-15> <title></title> </head> <body> <h1></h1> <hr> <address></address> </body> </html> Este sera el esqueleto mnimo de una pgina web, donde vemos que todas las etiquetas se cierran en orden inverso a como se han abierto: despus de html se abre head, luego hay etiquetas que no tienen correspondiente cierre (meta y hr, sucede en algunos casos), y finalmente se cierra todo con body y html.

Aparte de lo anterior, HTML tiene otro tipo de rdenes, las denominadas entidades. Las entidades van precedidas del smbolo & (ampersand) y terminadas por un; y representan caracteres o smbolos que no se pueden obtener fcilmente con el teclado, tales como el (&yen;) o el (&oslash;); en general, representan smbolos independientemente del alfabeto, e incluye tanto smbolos conocidos como otros ms esotricos como la letra o el smbolo de las picas . No todos tienen nombre; algunos se usan con el smbolo & seguido de la almohadilla y un nmero. Las mismas letras con acento, p. ej., se pueden insertar de esa forma si el teclado que usemos no lo permite. P. ej., la se representa por &aamp;. Hoy en da hay dos versiones en uso: la 4.01, que ya tiene ms 10 aos, y XHTML, que es similar, pero ms estricto: p. ej., no se pueden usar letras maysculas y minsculas en las etiquetas y toda etiqueta debe ir cerrada, incluso las desemparejadas como br o hr. Muchos navegadores obedecen ya a HTML5, la principal novedad de esta versin es la inclusin de la etiqueta CANVAS que permite crear imgenes en movimiento (sustituyendo al Flash) y la posibilidad de hacer dragand-drop de ficheros desde el escritorio. Para visualizar HTML estn los navegadores; un navegador permite visualizar un fichero HTML local igual que los ficheros HTML remotos. Normalmente se pueden abrir desde la carpeta que los contiene o cargndolos desde el navegador, de la misma forma, tratndose de texto se pueden editar con el Notepad, Notepad++, Geany o cualquier otro programa. Conviene siempre usar alguno que tenga coloreado con sintaxis y facilidades similares, para que sea ms fcil distinguir los errores de sintaxis. 3. Nuestra primera pgina web. Si tienes cuenta de Google, puedes ir directamente a Google sites; si no, primero hay que darse de alta yendo p. ej. a Gmail o a cualquier otro sitio de Google (tambin en el mismo Sites). Al pulsar en esta opcin, se crea una identidad dentro de Google, que nos puede servir, adems, como cuenta de correo gratuita y para acceder a todos los servicios de Google (que son muchos). Una vez creada la identidad y accedido al sitio, se puede usar el botn Crear un sitio nuevo para crear una pgina personal, un lbum de fotos o algo por el estilo. La pgina resultante est luego disponible en la direccin http://sites.google.com/identidad_elegida/nombredado, y contendr diferentes pginas, tantas como uno quiera (hasta que se agote el espacio) donde identidad_elegida/nombredado variar en funcin de la identidad que hayamos elegido, y el nombre que le hayamos dado a la pgina creada (tal como pagina1). La mayora de los servicios de almacenamiento en nube como Dropbox permiten tambin publicar pginas directamente por el expeditivo mtodo de colocar un fichero HTML en un directorio y crear un enlace accesible pblicamente, aunque para que sea visible como documento HTML (y no como parte de un sitio web) tienes que colocarlo en un directorio pblico; por defecto, se trata del directorio public que se crea en todas las instalaciones. 4. Anatoma de una direccin de Internet Todo lo que hay en internet tiene una direccin nica, que se suele denominar URL (Universal Resource Locator, localizador universal de recursos), y tiene una pinta como esta:

http://unacosa.otracosa.com/dir1/dir2/fichero.html, pero que en su forma ms general, se puede complicar bastante ms. La forma completa de un URL es:
protocolo://usuario:clave@direccion:puerto/directorios/fichero.html#fragmento?variable=valor&variable2=valor

Protocolo: Le indica al navegador cmo tiene que hacer la peticin. Un protocolo es una forma que usan un ordenador-cliente y un ordenador-servidor para comunicarse. El nombre del protocolo indica tambin que tiene que hacer el programa-cliente para presentar esa informacin, http es el protocolo habitual para las pginas web, aunque las pginas seguras (que usan comunicacin cifrada entre cliente y servidor9 llevan el protocolo https o http seguro. Se usa, p. ej., en los bancos. Otros protocolos son el ftp, de transferencia de ficheros, o el mailto, que le indica al navegador que tiene que lanzar el programa por correo que tenga configurado.

<body bgcolor='darkblue' text='lightyellow' link='darkgreen' vlink='lightgreen' alink='green'> <h1>Ejercicio 4.1, tutorial de HTML</h1> <P>Esto es texto normal.</p> <P>Esto es <i>texto en cursiva</i>, mientras que <em>esto es texto con nfasis</em>.</p> <p>Esto es <b>texto en negrita</b>, y esto es <a href='prueba.html'>texto dentro del enlace</a>.</p> <img src='tuxbaby.png' align='center' alt='[TuxBaby]' >