INTRODUCCIÓN A HTML. Son las iniciales de Hiper Text Markup Language, lo que traducido al castellano sería lenguaje de etiquetas de hipertexto.

Transcripción

1 1.LA PRIMERA PÁGINA WEB. Qué es HTML?. INTRODUCCIÓN A HTML. Son las iniciales de Hiper Text Markup Language, lo que traducido al castellano sería lenguaje de etiquetas de hipertexto. Es un lenguaje usado para crear páginas web a partir de etiquetas que se van intercalando entre el texto de forma que los navegadores sepan qué es lo que deben mostrar cuando accedemos a una página y cómo deben mostrarlo en pantalla. Algunas razones para usar HTML Los llamados editores HTML pueden ser de gran ayuda y tienen sus ventajas e inconvenientes, pero la experiencia demuestra que conocer el lenguaje HTML ofrece bastantes ventajas: Seremos capaces de aprovechar todas las características de este lenguaje, incluso las más nuevas. Aunque se use inicialmente un editor WYSIWYG (lo que ves es lo que tienes) tendremos los conocimientos suficientes para modificar posteriormente el código que éste ha creado. Así se pueden corregir errores o incluir etiquetas no soportadas por el editor. No dependeremos de la disponibilidad de una herramienta concreta para poder crear páginas web. Con un simple editor de textos será suficiente. Las bases de HTML Las órdenes de este lenguaje estarán formadas por unos comandos llamados etiquetas que pueden tener o bien la siguiente estructura: <NOMBRE_ETIQUETA> O bien esta otra: <NOMBRE_ETIQUETA> TEXTO </NOMBRE ETIQUETA> Como vemos, la primera estructura está formada por una única instrucción y la segunda por dos: una que marca el inicio de la etiqueta y otra que marca el final, con texto entre ambas. Por ejemplo, para indicarle al navegador que queremos que pinte una línea horizontal debemos escribir: <hr> Así de sencillo. Como vemos, el nombre de la etiqueta va delimitado por los símbolos menor que (<) y mayor que (>), todas las instrucciones de HTML deben ir encerradas entre estos dos símbolos.

2 Pero las etiquetas no se limitan a indicar ordenes tan sencillas, estas órdenes tienen en ocasiones parámetros que se introducen en una etiqueta de la siguiente manera: <etiqueta atributo="valor"> Es decir, en primer lugar ponemos el nombre de la etiqueta, después el nombre del atributo seguido por un signo igual y posteriormente el valor que queramos darle a ese atributo encerrado entre comillas.una etiqueta puede tener tantos atributos como se deseen. Ejemplo: <hr size=3> Combiene tener en cuenta dos consideraciones sobre el código HTML: -Los nombres usados en las etiquetas pueden escribirse en mayúsculas o en minúsculas de forma indistinta, no obstante se recomienda usas mayúsculas para distinguirlas del texto. -Tampoco influye en el funcionamiento el sangrado (alineación de los párrafos) para los diferentes elementos, sin embargo facilita la lectura del código. Estructura de una página. En primer lugar deberemos especificar que el archivo de texto que estamos escribiendo es un documento HTML,para ello usamos las instrucciones de inicio y fin de la etiqueta html al principio y al final de la página respectivamente: Código de la página El código de la página esta formado a su vez por dos grandes bloques, la cabecera y el cuerpo.la cabecera de la página está delimitada por las instrucciones de inicio y fin de la etiqueta head. Estas instrucciones deben estar dentro de la etiqueta HTML de la siguiente manera: <head> Elementos de la cabecera </head>... Resto de código de la página... En la cabecera de la página se introduce toda aquella información que afectará a toda la página. Por ejemplo el título, que se indicará con la etiqueta title de este modo: <head> <title>mi primera página WEB</title> </head> El cuerpo es el siguiente gran bloque de nuestro documento HTML, éste quedará delimitado por la etiqueta body.en su interior introduciremos todos aquellos elementos de

3 los que queremos que conste nuestra página como pueden ser texto, imágenes, tablas, etc. Conociendo la etiqueta body podemos ampliar el ejemplo anterior para que incluya texto. <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. </body> Una vez que ya sabemos insertar contenido en una página pasaremos a estudiar las diferentes etiquetas que sirven para darle formato a ese contenido. Los encabezados. Usualmente un documento tiene, además de texto llano, una serie de encabezados o titulares. Para ello el lenguaje HTML posee una serie de etiquetas que permiten disponer de titulares de hasta 6 niveles de importancia. Estas etiquetas son: <h1>, <h2>, <h3>, <h4>, <h5> y <H6>. La letra "h" al principio del nombre de estas etiquetas provien de la abreviatura de la palabra inglesa heading que significa encabezado. Siguiendo a la hache hay un número del uno al seis que indica la importancia del titular siendo el más importante el uno y el menos importante el seis. Ejemplo: <h1>encabezado 1</h1> <h2>encabezado 2</h2> NOTA: Los encabezados empiezan siempre en una línea nueva y el texto que les sigue comenzará en la línea siguiente. Además el navegador podrá mostrar un espacio vertical adicional entre el encabezado y el texto anterior y posterior. Párrafos en HTML Ha llegado el momento de aprender a introducir un texto en una página web, pero antes es necesario comprender cómo será interpretado este texto. Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio. Esta característica suele sorprender (e incluso molestar) al principio. La mejor manera de habituarse es probar, para ello proponemos los siguientes ejemplos de código que serán mostrados de la misma forma por el navegador aunque algunos contengan saltos de línea, otros tabulados entre las palabras, etc. <h1>el conductor del coche le pregunto si se encontraba mal</h1> <h1> El conductor del coche le preguntó si se encontraba mal </h1> <h1> El conductor del coche

4 le pregunto si se encontraba mal </h1> Saltos de línea En ocasiones puede ser conveniente introducir un punto y aparte cuando estamos escribiendo un texto. En HTML para hacer esto puede usarse la etiqueta <br>. Cuando el navegador se encuentra con esta etiqueta provoca un salto de línea y sigue mostrando el contenido de la página. Veamos un ejemplo: Estaba internándose en lo desconocido. <br> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo... En este texto podemos observar cómo tras el primer punto era necesario un cambio de línea, por lo que hemos usado <br>. Cómo se insertan párrafos. Un párrafo es un conjunto de frases sobre un mismo asunto. En HTML para demarcar un párrafo se usa la etiqueta p, situándose la instrucción de inicio <p> al comienzo del párrafo y la instrucción de fin tras la última frase. Entre ellas pueden insertarse tantos saltos de línea como se deseen así como muchos otros elementos HTML. A continuación se muestra un ejemplo: <p> Estaba internándose en lo desconocido. <p> Durante todo el trayecto hasta Woodfield no dejó de pensar en los aspectos económicos, con el temor de estar cometiendo... El atributo align (alineación) en la etiqueta <p> permite especificar la alineación del párrafo. Puede tener tres valores, "center", "left" y "right", para obtener un párrafo centrado, alineado a la izquierda o alineado a la derecha respectivamente.un ejemplo: <p align= center > Estaba internándose en lo desconocido. Líneas horizontales para separar párrafos. Si lo que se necesita es separar dos secciones diferentes de una página, ya sea texto o no, puede emplearse una nueva etiqueta: <hr>. Su nombre proviene del inglés Horizontal Rule (línea horizontal). Esta etiqueta está formada por una única instrucción y provoca que el navegador inserte una línea horizontal. Existen cuatro atributos que permiten modificar su apariencia. Estos son: align : Permite cambiar la alineación de la línea. Puede tomar tres valores:"left", "center" y "right" para conseguir alineación a la izquierda, centro y derecha respectivamente. noshade : noshade, que en inglés significa sin sombra, existe porque algunos

5 navegadores gráficos muestran las líneas horizontales con un efecto tridimensional con sombra. Al incluir este atributo se elimina este efecto de manera que el navegador sólo mostrará una línea horizontal negra. size : Con este atributo se puede controlar el grosor de la línea. Como valor de este atributo se debe especificar el valor deseado en pixeles (puntos de pantalla). width : Este atributo permite especificar el ancho de la línea. El valor puede ser dado deuna manera absoluta, especificando el ancho en pixeles (por ejemplo width=100) o de manera relativa respecto al ancho de la ventana del navegador usando porcentajes (por ejemplo width="90%"). Es más que recomendable usar este último sistema de manera que obtengamos un resultado apropiado independientemente del tamaño que cada usuario quiera dar a la ventana de su navegador. La etiqueta center. Acabamos de ver una serie de etiquetas que permiten cambiar de línea, crear distintos tipos de párrafos o insertar líneas que les separen. También hemos visto que alguna de las etiquetas utilizadas tienen el atributo align que permite indicar el alineamiento. En ocasiones puede ser muy útil indicar que algún texto, imagen o algún otro elemento de la página deba ser centrado. Sin embargo no todas las etiquetas tienen el atributo align. La solución es emplear una nueva etiqueta: center. Ésta está compuesta por una instrucción de inicio y una de fin de manera que todo lo que quedaba entre ellas, fuese lo que fuese, estuviese centrado. Por ejemplo: <p>mi poema favorito es aquel de Federico García Lorca que reza: <center> Mi corazón, como una sierpe <br> se ha desprendido de su piel,<br> y aquí la miro entre mis dedos<br> llena de heridas y de miel <br> </center> Cómo insertar imágenes en una página. La etiqueta usada para insertar imágenes es: <img >. Esta etiqueta está compuesta por una única instrucción y por tanto </img> no existe y su uso está prohibido. Podemos insertar una imagen en medio de una frase como si fuese una palabra más de ella y será mostrada por el navegador a continuación del texto (o cualquier otro elemento anterior). Una vez tenemos la imagen en un archivo aparte es hora de escribir el código HTML que nos permitirá insertarla en la página. Como hemos comentado usamos la etiqueta <img> y para indicar el nombre del archivo usamos el atributo src. Ej: <img src="flecha1.gif"> Cómo crear enlaces hipertexto. Estos enlaces hipertexto (en inglés links) no son más que unas zonas (habitualmente palabras o frases) especiales de nuestro texto que ofrecen la posibilidad de pulsar sobre ellas para ir a otras páginas.

6 Los enlaces pueden clasificarse en dos tipos, los internos o locales y los externos: 1. Los enlaces internos son aquellos que enlazan las páginas que componen un mismo sitio web (web site). Todas estas páginas estarán (generalmente) en el mismo servidor, y por tanto estarán también en el mismo ordenador. Por esta razón sólo será necesario indicar en nuestro código el nombre del archivo donde está la página que queremos enlazar y el directorio en el que se encuentra. Un ejemplo dirección de un enlace interno es:/hobbies/index.html 2. Los enlaces externos permiten saltar desde una página hasta otra puede estar en cualquier otro lugar del mundo en otro servidor web. Al crear estos enlaces es necesario especificar la dirección completa de Internet (la URL) de la página que queremos enlazar. Por ejemplo: Por último, cabe resaltar que aunque la mayoría de las veces los links se usan para enlazar una páginas con otras también pueden usarse con imágenes, sonido, vídeo y prácticamente cualquier tipo de fichero. La etiqueta <a>... </a>. Esta etiqueta, de nombre sencillo, es la que va a permitir incluir en las páginas enlaces hipertexto. Su atributo href permite indicar cual es la página a la que debe saltar el usuario al pulsar sobre el texto adecuado. El texto del enlace será aquel que se introduzca entre la instrucción de inicio y la instrucción de final de la etiqueta y debe ser resaltado por el navegador para que el usuario sepa que puede pulsar en él. La estructura de un link es: <a href="dirección_url">texto que hará de enlace (hipertexto)</a> Un ejemplo: <a href="hobbies.html">hobbies</a> Si la página a la que queremos crear el enlace no se encuentra en el mismo directorio que la actual es necesario indicar el directorio (o ruta de directorios) donde está. Si en el ejemplo anterior la página hobbies.html estuviese en el directorio varios el ejemplo anterior debería sustituirse por: <a href="varios/hobbies.html">hobbies</a> Un ejemplo de enlace a una página externa sería: <a href=" DMOZ</a> Anclas Las anclas nos permitirán crear enlaces especificando a que lugar concreto de una página queremos saltar.un ancla es una marca que se sitúa en un punto determinado de una página. Posteriormente se podrá crear un enlace a ese ancla de manera que al pulsar sobre el texto apropiado en vez de saltar a otra página se salta al lugar donde esté el ancla, es decir, ya no se va al comienzo de la página como con los enlaces vistos hasta ahora.

7 Dicho de otra forma usando anclas es posible que un enlace apunte al lugar concreto de una página que se desee. Para crear anclas usamos, al igual que para crear enlaces, la etiqueta <a>, sin embargo no debe confundirse el lector porque aunque ambos elementos estén relacionados y se use la misma etiqueta para crearlos,las funciones de cada uno son radicalmente diferentes. Las anclas sólo son marcas y son invisibles cuando visualizamos la página con el navegador. Por esta razón las anclas no definen ningún texto activo. Al crear anclas no se emplea el atributo href sino otro denominado name,con este atributo se da un nombre al ancla que luego nos servirá para referirse a ella.ej: <a name="nombreancla">comienzo</a> Y para crear el enlace que apunte al ancla: <a href="#nombeancla"> S </a> Para enlazar a un ancla de una página distinta, pero de nuestra web: <a href="paginas/segunda.html#s">letra S</a> También es posible crear un enlace a un ancla de otra página externa.ej: <a href=" S</a> El atributo title. Con este atributo puede escribirse un título o una descripción breve del link. Los navegadores pueden mostrar esta información al usuario de varias maneras: En un margen de la pantalla o mediante una caja de texto (en ocasiones llamadas bocadillos) que aparezca cuando se sitúen el ratón encima de la zona activa del link.ej: <a href=" title="yo me reí mucho"> A Reírse Toca, Ja,ja, ja! </a> EJERCICIOS: Repasa todas las etiquetas vistas en el capítulo, y realiza los ejemplos para comprobar su funcionamiento.guarda en un archivo distinto cada ejemplo y envíalos en una carpeta comprimida al correo del profesor. PRÁCTICA 1: Crea tu primera página web sobre un tema de tu elección (aficiones, deportes, alguna noticia...) en la que utilices todas las herramientas vistas hasta ahora: Título de la página, encabezados, salto de línea, párrafos, líneas horizontales, centrado de texto, introduce alguna imagen que busques en Internet, incluye un enlace a una página exterior y un enlace con ancla dentro de la misma página. Cuando termines envíala al correo de tu profesor.