html aulaclic

Upload: sergio-jurado

Post on 14-Jul-2015

510 views

Category:

Documents


1 download

TRANSCRIPT

EtiquetasLas etiquetas o marcas delimitan cada uno de los elementos que componen un documento HTML. Existen dos tipos de etiquetas, la de comienzo de elemento y la de fin o cierre de elemento. La etiqueta de comienzo est delimitada por los caracteres < y >. Est compuesta por el identificador o nombre de la etiqueta, y puede contener una serie de atributos opcionales que permiten aadir ciertas propiedades. Su sintaxis es: Los atributos de la etiqueta de comienzo siguen una sintaxis predefinida y pueden tomar cualquier valor propio del usuario, o valores HTML predefinidos. La etiqueta de final est delimitada por los caracteres . Est compuesta por el identificador o nombre de la etiqueta, y no contiene atributos. Su sintaxis es: Cada uno de los elementos de la pgina se encontrar entre una etiqueta de comienzo y su correspondiente etiqueta de cierre, a excepcin de algunos elementos que no necesitan etiqueta de cierre. Tambin es posible anidar etiquetas, es decir, insertar etiquetas entre otras etiquetas de comienzo y de cierre. A continuacin tenemos un ejemplo en el que tenemos la etiqueta anidada dentro de la etiqueta .:

Bienvenidos a este curso

Sans

MS,

Arial,

MS

Sans

Este cdigo dara como resultado el siguiente texto:

Bienvenidos a este cursoEs importante anidar bien las etiquetas, las etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado por la etiqueta , antes de cerrar esta etiqueta hemos puesto la por lo que antes de cerrar la etiqueta debemos cerrar la etiqueta etiqueta .

Para que te vayas haciendo una idea de cmo crear una pgina html a travs del Bloc de notas, vamos a crear una pgina web sencilla, con una lnea de texto.

Mi primera pgina

Curso HTML

1

Lo primero que tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de notas. Seguidamente introduce, en el documento en blanco, el texto siguiente: MI PRIMERA PAGINA Hola, estoy haciendo pruebas.

Guarda el documento con la extensin htm, con el nombre miprimpag.htm. Puedes guardarlo a travs del men Archivo, opcin Guardar. Pulsando dos veces sobre el icono del archivo miprimpag.htm, ste debera abrirse automticamente en el navegador que tengas instalado en tu ordenador. El navegador deber mostrar una pgina como la de la derecha. Como puedes ver, la pgina resultante es una pgina que solamente tiene una lnea de texto.

Si observas la barra de ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA PAGINA. Este ttulo ha sido establecido por la lnea MI PRIMERA PAGINA. El color de fondo de la pgina ha sido establecido por la lnea . El texto Hola, estoy haciendo pruebas. se ha insertado lnea Hola, estoy haciendo pruebas.. a travs de

Estructura de una pginaA lo largo de este tema vamos a aprender a crear una pgina bsica. La estructura bsica de una pgina es:

...

Curso HTML

2

... Ahora veamos cmo funcionan estas etiquetas.

Identificador del tipo de documento Todas las pginas web escritas en HTML tienen que tener la extensin html o htm. Al mismo tiempo, tienen que tener las etiquetas y . Entre las etiquetas y estar comprendido el resto del cdigo HTML de la pgina. Por ejemplo:

...

Cabecera de la pgina La cabecera de la pgina se utiliza para agrupar informacin sobre ella, como puede ser el ttulo. Est formada por las etiquetas y . La etiqueta va justo debajo de la etiqueta . Por ejemplo:

... ... Entre las etiquetas y , las etiquetas que podemos encontrar y ms se utilizan son: , , (estas etiquetas las veremos ms adelante), y la etiqueta que te explicamos a continuacin.

Ttulo de la pgina El ttulo de la pgina es el que aparecer en la parte superior de la ventana del navegador, cuando la pgina est cargada en l. Para asignar un ttulo a una pgina es necesario escribir el texto deseado entre las etiquetas y .

Curso HTML

3

Estas etiquetas han de estar dentro de la cabecera, es decir, entre las etiquetas y . Por ejemplo:

Curso de HTML ...

La etiqueta se utiliza para aadir informacin sobre la pgina. Esta informacin puede ser utilizada por los buscadores. Los buscadores consultan la informacin de la etiqueta de las pginas, buscando coincidencias con lo que el usuario pretende encontrar. A travs de esta etiqueta pueden especificarse los atributos name y content. El atributo name indica el tipo de informacin, y el atributo content indica el valor de dicha informacin. Para indicar el tipo de informacin podemos utilizar cualquier palabra que deseemos, como puede ser "Autor", "Palabras clave", "Descripcin", etc. Pero debido a que la mayora de buscadores estn en ingls, es preferible que el tipo de informacin se especifique en ingls. Los tipos de informacin ms utilizados son los siguientes: Tipo

author classification description generator keywords

Significado Autor de la pgina Palabras para clasificar la pgina en los buscadores Descripcin del contenido de la pgina Programa utilizado para crear la pgina Palabras clave

La etiqueta no necesita etiqueta de cierre. Para cada etiqueta solo es posible indicar un tipo de informacin y su valor, pero es posible insertar varias etiquetas en un mismo documento. La etiqueta ha de estar entre las etiquetas y . Por ejemplo, el siguiente cdigo indica que el autor de la pgina es cursos, que la pgina trata sobre un curso de HTML gratuito, y especifica algunas palabras clave a ser consultadas por los buscadores:

... ...

Curso HTML

4

La etiqueta tambin se utiliza para indicarle al navegador alguna informacin o alguna accin que debe realizar. En este caso se utiliza el atributo http-equiv, en lugar del atributo name. Por ejemplo, imaginemos que por algn motivo queremos que nuestra pgina se actualice automticamente cada 30 segundos. En ese caso, deberamos utilizar la accinRefresh (actualizar). Podramos utilizar el siguiente cdigo:

... ...Ahora imaginemos que hemos cambiado la direccin en la que se encuentra nuestra pgina web, y queremos que cuando algn usuario visite la pgina en la direccin antigua, a los 5 segundos el navegador lo redirija automticamente a la direccin nueva. En ese caso podramos insertar el siguiente cdigo en la pgina que se encuentra en la direccin antigua:

... ...

Cuerpo del documento El cuerpo del documento contiene la informacin propia del documento, es decir lo que pqueremos que se visualice, el texto de la pgina, las imgenes, los formularios, etc. Todos estos elementos tienen que encontrarse entre las etiquetas y , que van justo debajo de la cabecera. Por ejemplo:

Curso de HTML ...

A travs de la etiqueta es posible establecer el color o la imagen de fondo de la pgina. El color de fondo puede establecerse a travs del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido.

Curso HTML

5

Por ejemplo, para hacer que el color de fondo de una pgina sea de color azul, tendremos que escribir:

... ... Sera equivalente a poner:

... ... La imagen de fondo puede establecerse a travs del atributo background, indicando la ruta en la que se encuentra la imagen. Por ejemplo, para hacer que la imagen de fondo de una pgina sea la imagen fondo.gif, que se encuentra en el mismo directorio en el que se encuentra guardada la pgina, tendremos que escribir:

... ...

En el caso de que la imagen no se encuentre en el mismo directorio que la pgina, y se encuentre dentro de la carpeta imagenes, que s se encuentra en el mismo directorio que la pgina, tendremos que escribir:

... ...

A travs de la etiqueta tambin es posible establecer el color del texto de la pgina a travs del atributo text. Por ejemplo, para hacer que el color del texto de una pgina sea de color rojo, tendremos que escribir:

... ...

Entre el borde de la ventana y el contenido de la pgina existe un margen, cuyo tamao en pxeles puede modificarse mediante los atributos leftmargin (margen izquierdo) ytopmargin (margen superior). Estos atributos no funcionan para el navegador Netscape, pero s los atributos marginwidth (anchura del margen)

Curso HTML

6

y marginheight (altura del margen). Estos atributos suelen utilizarse para eliminar el margen, para lo cual deben valer cero. Por ejemplo, para hacer que una pgina no tenga margen superior, y tenga un margen izquierdo de 20 pxeles, tendremos que escribir:

... ...

A lo largo del curso vamos a crear tres sitios web, cada sitio lo guardaremos en una carpeta dentro de ejercicios_html. En esa carpeta tenemos: La carpeta animales, donde guardaremos los archivos de un sitio web de una asociacin ficticia de veterinarios que iremos creando a lo largo de los ejercicios paso a paso. La carpeta deportes, donde guardaremos los archivos de un sitio web de una cadena de centros deportivos que iremos creando a lo largo de los ejercicios propuestos. La carpeta flores, donde guardaremos los archivos de un sitio web de una floristera que iremos creando a lo largo de los ejercicios propuestos. Cada carpeta contiene a su vez una carpeta imagenes y una carpeta varios donde iremos guardando las imgenes y ficheros varios respectivamente. Una vez tenemos nuestros sitios organizados, podemos empezar a practicar. 1 Si no tienes abierto el Bloc de notas, brelo para realizar el primer ejercicio. 2 Escribe el cdigo que aparece a continuacin:

Inicio Con este cdigo estars creando un documento con el ttulo "Inicio", y con el color de fondo verde (#99CC99). 3 Haz clic sobre el men Archivo. 4 Haz clic sobre la opcin Guardar como. Se abrir el cuadro de dilogo Guardar como. 5 En el recuadro Tipo: elige Todos los archivos. 6 Guarda el documento con el nombre inicio.htm, documentos/ejercicios_html/animales de tu disco duro. 7 Abre el documento que acabas de crear en un navegador. dentro de la carpeta Mis

Fjate en el color de fondo de la pgina y en 7

Curso HTML

la barra de ttulo.

Curso HTML

8

El textoA lo largo de este tema vamos a aprender a cambiar las propiedades del texto, as como a insertar caracteres especiales o separadores.

Caracteres especiales y espacios en blancoLos caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. Si se desea insertar estos caracteres como texto hay que escribir el nombre que los representa:

< Se representa con < > Se representa con >Existen otra serie de caracteres que no se visualizan correctamente en algunos navegadores, como es el caso de la y las letras acentuadas, por lo que al igual que ocurre con los caracteres especiales < y >, para insertarlos como texto habra que escribir el nombre que los representa.

A continuacin se muestra una lista con algunos caracteres y el nombre con el que han de ser representados: Carcter < > Representacin < > Carcter & " Representacin & "

Curso HTML

9

Siempre que se inserta texto en HTML hay que tener en cuenta que si se escriben varios espacios en blanco seguidos slamente se mostrar uno en el navegador. Para conseguir que se muestren varios espacios en blanco seguidos puede sustituirse cada uno de ellos por . Por ejemplo, para insertar el texto:

Bienvenidos, esta es mi 1 pgina!Habra que escribir:

Bienvenidos, esta es mi1pgina!

ComentariosEn ocasiones podemos desear aadir comentarios aclaratorios dentro del cdigo, de manera que no sean visualizados en el navegador, pero s a la hora de editar el documento. Para insertar comentarios dentro del cdigo, basta con insertar el texto entre . Todo el cdigo que se inserte entre estos smbolos no ser visualizado en los navegadores. Por ejemplo, para insertar el texto siguiente con un comentario:

Bienvenidos, esta es mi 1 pgina!Habra que escribir:

Bienvenidos, esta es mi 1 pgina!

Saltos de lnea
En general, cuando trabajamos con un editor de texto se produce un salto de lnea al pulsar la tecla INTRO. Si pulsamos INTRO en un documento HTML, el salto de lnea se producir en el cdigo, pero no se mostrar en el navegador. Para que se produzca el salto de lnea en el navegador, en lugar de pulsar la tecla INTRO hay que insertar la etiqueta
donde se desee que se produzca el salto. La etiqueta
no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta despus de ella, ya que dicha etiqueta no existe. Por ejemplo, para insertar el texto:

Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.Habra que escribir:

Queridos usuarios,
tengo el placer de comunicaros que hay una nueva secci&oacuten.

Texto preformateado Curso HTML 10

Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del cdigo, es utilizando las etiquetas y . Utilizando estas etiquetas podemos tener la seguridad de que en el navegador se mostrarn todos los espacios en blanco que se inserten en el texto, as como todos los saltos de lnea resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar la etiqueta
. Por ejemplo, para insertar el texto:

Hola, esta

BIENVENIDOS ES MI PGINA WEB y esto un texto preformateado

Habra que escribir:

Hola, BIENVENIDOS esta ES MI PGINA WEB y esto un texto preformateadoEl inconveniente de esta etiqueta es que entre las etiquetas y no se pueden incluir las etiquetas (para incluir imgenes), (para incluir objetos como animaciones), , , ni (las veremos en este tema).

Separadores El elemento que suele utilizarse para separar secciones dentro de una misma pgina es la regla horizontal. Para insertar una regla horizontal hay que insertar la etiqueta. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal: Atributo Significado alineacin de la regla dentro de la pgina ancho de la regla alto de la regla eliminar el sombreado de la regla Posibles valores left (izquierda) right (derecha) center (centro) un nmero, acompaado de % cuando se desee que sea en porcentaje un nmero no puede tomar valores

align width size noshade

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Inicio Bienvenidos a mi pgina.Habra que escribir:

InicioBienvenidos a mi pgina.

Sangrado de texto Curso HTML 11

La sangra es una especie de margen que se establece a ambos lados del texto. Para que un texto aparezca sangrado, se inserta entre las etiquetas y. Esta etiqueta en un principio se defini para delimitar citas pero que como la mayora de los navegadores resuelven la cita incluyendo un sangrado del texto, su uso para sangrar texto se ha generalizado. El uso de la etiqueta obliga a que el texto aparezca en una nueva lnea. Insertando el texto entre varias etiquetas y se consigue que los mrgenes sean mayores. Por ejemplo, para insertar el texto:

Queridos usuarios, tengo el placer de comunicaros que hay una nueva seccin.Habra que escribir:

Queridos usuarios, tengo el placer de comunicaros que hay una nueva secci&oacuten.

Formatear el texto ...Las propiedades del texto pueden modificarse a travs de la etiqueta . Para ello, podemos insertar el texto entre las etiquetas y , especificando algunos de los atributos de la etiqueta: Atributo

face color size

Significado fuente color del texto tamao del texto

Posibles valores nombre de la fuente, o fuentes nmero hexadecimal o texto predefinido valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamao por defecto, aadiendo + o - delante del valor

Por ejemplo, para insertar el texto:

Bienvenidos al cursoHabra que escribir:

Bienvenidos al curso

Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta despus de la etiqueta . La etiqueta no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta . Por ejemplo:

Curso HTML

12

...Este cdigo hara que la fuente del documento fuera por defecto de color azul, de tamao 4 y Arial. Si despus de indicar la etiqueta o , el navegador encuentra otra etiqueta , la que prevalece es siempre la ltima que se encuentra.

Resaltado del texto ...Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuacin se muestran algunas etiquetas asociadas al tipo de letra:Etiqueta Significado negrita cursiva subrayado tachado teletipo (mquina de escribir) aumenta el tamao de la fuente disminuye el tamao de la fuenteEjemplo curso HTML curso HTML curso HTML curso HTMLcurso HTMLcurso HTMLcurso HTMLA continuacin se muestran algunas etiquetas asociadas al tipo de informacin:Etiqueta Significado cita ejemplo de cdigo definicin eliminado nfasis insertado teclado muestra destacado subndice superndice variableEjemplo curso HTMLcurso HTMLcurso HTML curso HTML curso HTMLcurso HTMLcurso HTML curso HTML curso HTML curso HTML curso HTMLCurso HTML13Las etiquetas ms utilizadas son las asociadas al tipo de letra, ya que son ms fciles de recordar, y en muchos casos los resultados son los mismos que los de aplicar una etiqueta diferente. Por ejemplo, el resultado de aplicar las etiquetas y es el mismo. Incluso a veces algunos estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador. Por ejemplo, para insertar el texto:Bienvenidos acursoHabra que escribir:Bienvenidos al cursoPrrafos ...El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetas y . No es necesario insertar la etiqueta
para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetas y hacen que se cambie de lnea automticamente. Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributo align, cuyos valores pueden ser left (izquierda), right (derecha),center (centrado) o justify (justificado). Por ejemplo, para insertar el texto:Bienvenidos a mi pgina. Aqu encontraris cursos de formacin muy interesantes.Habra que escribir:Bienvenidos a mi p&aacutegina. Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.Otra forma de cambiar la alineacin del texto es mediante las etiquetas y , para las que tambin existe el atributo align. La etiqueta , al igual que la etiqueta , se utiliza para agrupar bloques de texto, pero con la diferencia de que la separacin entre ellos es menor. Por ejemplo, para insertar el texto:Bienvenidos a mi pgina. Aqu encontraris cursos de formacin muy interesantes.Habra que escribir:Bienvenidos a mi p&aacutegina. Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.Tambin es posible insertar el texto entre las etiquetas y para que aparezca centrado. Por ejemplo, para insertar el texto:Bienvenidos a mi pgina.Curso HTML14Habra que escribir:Bienvenidos a mi p&aacutegina.Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso de y ), son las etiquetas y volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.Encabezados ...Curso HTML15Existen una serie de encabezados que suelen utilizarse para establecer ttulos dentro de una pgina. La diferencia entre los distintos tipos de encabezado es el tamao de la letra, el tipo de resaltado, y la separacin existente entre el texto y los elementos que tiene encima y debajo de l. Hay que tener en cuanta que el navegador del usuario es el que aplicar el estilo del encabezado por lo que el mismo ttulo se puede visualizar de forma diferente segn el navegador. Existen seis etiquetas que representan seis tipos de cabeceras distintas. Todas estas etiquetas precisan una etiqueta de cierre. A continuacin se muestran los distintos encabezados existentes:Etiqueta EjemploTtulo 1: HTMLTtulo 2: HTMLTtulo 3: HTMLTtulo 4: HTMLTtulo 5: HTMLTtulo 6: HTMLPara todas estas etiquetas es posible especificar el valor del atributo align. Por ejemplo, para insertar el texto:El lenguaje HTMLApartado 1: Las etiquetasHabra que escribir:El lenguaje HTMLApartado 1: Las etiquetasMarquesinas Curso HTML16Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas y . La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen. A travs del atributo behavior puede modificarse el tipo de movimiento. Puede tomar los valores alternate (de lado a lado de la ventana, como si rebotara en los extremos), scroll (de un lado a otro, continuamente) o slide (de un lado a otro, pero una sola vez). A travs del atributo direction puede modificarse la direccin en la que se mover el texto. Puede tomar los valores down (de arriba a abajo), up (de abajo a arriba), left (de derecha a izquierda) o left (de izquierda a derecha). Tambin es posible establecer un color de fondo, a travs del atributo bgcolor. Por ejemplo, para insertar una marquesina: Habra que escribir: Esto es una marquesina Tambin es posible insertar imgenes, tablas y otros elementos entre las etiquetas y , no solamente texto.Las listas ...Elemento de lista Cada uno de los elementos de una lista ha de insertarse entre las etiquetas y . Por ejemplo, para insertar en una lista los siguientes elementos: Perro Gato PeriquitoHabra que escribir:... Perro Gato Periquito ...Todos los elementos de la lista debern encontrarse entre las etiquetas que indiquen si la lista es desordenada (con vietas) u ordenada (numerada) como veremos a continuacin.Lista desordenada

Curso HTML17Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas y . A travs del atributo type es posible elegir el tipo de vieta, que puede ser circle (crculo), disc (disco) o square (cuadrado). Por ejemplo, para insertar la siquiente lista: o o oPerro Gato PeriquitoHabra que escribir:PerroGatoPeriquito Lista ordenada Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas y . A travs del atributo type es posible elegir el tipo de numeracin, que puede ser 1 (nmeros), a (letras minsculas), A (letras maysculas), i (numeros romanos en minsculas) o I (nmeros romanos en maysculas). Por ejemplo, para insertar la siquiente lista:i. Perro ii. Gato iii. PeriquitoHabra que escribir: Perro Gato Periquito Anidar listasEs posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas. Por ejemplo, para insertar la siquiente lista:1. Lunes Ingles FrancesCurso HTML182. Martes1 1Ingles A. Correccion de ejercicios B. Proponer ejerciciosHabra que escribir: Empezamos por la lista ordenada elementos Lunesy Martes. (la ms externa) , esta lista tiene dosEl elemento Lunes contiene una lista desordenada con tipo cuadrado que tiene dos elementos Ingles y Frances. El elemento Martes contiene una lista ordenada de un slo elemento Ingles elemento que contiene a su vez una lista desordenada de tipo letras maysculas con los dos elementos Correccion de ejercicios y Proponer ejercicios Lunes InglesFrances Martes Ingles Correccion de ejercicios Proponer ejercicios Ejercicio 1.1 Si no tienes abierto el Bloc de notas, brelo para realizar el ejercicio. 2 Abre el archivo inicio.htm, carpeta ejercicios_html/animales. que creaste en el tema anterior y que se encuentra en la3 Inserta una lnea en blanco debajo de la etiqueta , y escribe el siguiente cdigo en ella:Con este cdigo estars estableciendo el color rojo (#FF0000) y tamao 1 para el texto del documento. Si guardas ahora los cambios y visualizas la pgina, no vers ningn cambio ya que la pgina no tiene texto. 4 Detrs de la etiqueta inserta una lnea en blanco, y escribe el siguiente texto: Inicio 5 Guarda el archivo y visualzalo en tu navegador, el texto debe aparecer en rojo y pequeo.Curso HTML19Dejaremos la pgina un poco ms discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamao de las letras. 6 Rectifica la etiqueta