presentación html

47
LENGUAJE HTML

Upload: margarita-t

Post on 20-Jun-2015

2.059 views

Category:

Travel


1 download

TRANSCRIPT

Page 1: PresentacióN Html

LENGUAJE HTML

Page 2: PresentacióN Html

Las páginas que nos encontramos en Internet, las páginas web, están construidas en un lenguaje de etiquetas denominado lenguaje html.

El HTML, el cual tiene dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla) el cual permite conectar dos elementos entre si y el SGML (Lenguaje Estándar de Marcación General) el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse.

HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente éste no lo detectará y se visualizara en la forma como éste lo entienda.

Page 3: PresentacióN Html

El código fuente, se escribe en un procesador de texto. Lo vamos a hacer con el Bloc de notas.

Page 4: PresentacióN Html

Las dos etiquetas fundamentales dentro de las cuales tiene que ir nuestro código fuente son <html> como etiqueta de apertura y

</html> como etiqueta de cierre.

Todo lo que será visible al visitar la página con el navegador, debe de estar entre las etiquetas <body> cuerpo, en inglés, como etiqueta de apertura y </body> como etiqueta de cierre.

Page 5: PresentacióN Html

ESCRIBIR MENSAJE Vamos a escribir Bienvenida. Lo escribiremos entre <body> y

</body>. Nuestro código quedará así:

Page 6: PresentacióN Html

Ahora tenemos que guardar el documento con un nombre y una extensión especial.

El nombre va a ser index y su extensión .html

También se podría guardar con la extensión .htm (el resultado es exactamente el mismo).

El sitio puede ser cualquier parte del ordenador. Para tenerlo accesible, lo vamos a guardar en el Escritorio: Le damos a Archivo > Guardar

Page 7: PresentacióN Html

Ya podemos ir al Escritorio para abrir la página.

Observa que el icono de la página en el escritorio tiene el del Explorer:

Si haces doble clic sobre él, se te abrirá la página

Page 8: PresentacióN Html

A partir de este momento, es conveniente tener el navegador minimizado en la barra de tareas para actualizar y visualizar rápidamente con el navegador los cambios efectuados.

Page 9: PresentacióN Html

3.1. Centrar el texto. Si queremos que nuestro saludo:

Bienvenida que aparezca en el centro de la página, escribimos delante del saludo la etiqueta <center> y al final del mismo la etiqueta de cierre </center>

El código quedaría así:

Page 10: PresentacióN Html

Guardamos los cambios: Minimizamos y comprobamos los

resultados con el Explorer (lo recuperamos desde la barra de tareas):

Si observamos que nuestro mensaje no aparece centrado le damos clic al botón actualizar.

Page 11: PresentacióN Html

Podemos aumentar su tamaño empleando las etiquetas de encabezados. Las etiquetas van desde el <h1> (h de head, en inglés, cabeza) para la más grande, al <h6> para la más pequeña.

Vamos a poner el tamaño mayor:

Page 12: PresentacióN Html

Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los navegadores

Page 13: PresentacióN Html

Para poner un color de fondo a toda la página, lo tenemos que hacer dentro de la etiqueta <body> pues afecta a todo el documento. Esto que se escribe dentro de una etiqueta se denomina atributo.

Los colores deben escribirse mediante el denominado código hexadecimal que consiste en 6 cifras/letras agrupadas de dos en dos, que nos indican la cantidad de rojo, verde y azul que contiene ese color, o bien, con la palabra inglesa que corresponde al color.

Vamos a poner el color rojo al fondo de la página. Lo conseguimos escribiendo la etiqueta <body> con su atributo como sigue: <body bgcolor="red"> ( bg de background ).

Page 14: PresentacióN Html

Guardamos los cambios y abrimos el navegador para comprobar los resultados:

Page 15: PresentacióN Html

Para cambiar el color del texto empleamos la etiqueta <font> con su atributo color. Vamos a cambiar el color negro del texto, al color blanco.

Podríamos emplear el nombre en inglés del color, igual que hemos hecho con el fondo. La etiqueta quedaría <font color="white">. Vamos ahora, a colocar el código hexadecimal de este color que es el ffffff. La etiqueta quedaría así: <font color="#ffffff">. La etiqueta se debe cerrar sin su atributo.

Page 16: PresentacióN Html

Guardamos los cambios, minimizamos y abrimos el navegador

Page 17: PresentacióN Html

Vamos a incluir una nueva línea en nuestra página: Por ejemplo vamos a poner:

A mi primera página web

Page 18: PresentacióN Html

Bienvenida A mi primera página web

El salto de línea que hemos hecho en el código no lo reconocen los navegadores. Para que el salto de línea se incorpore hay que hacerlo con la etiqueta <br> del inglés break, romper. Esta etiqueta no tiene cierre.

El código quedaría así:

Page 19: PresentacióN Html

Cuando queremos introducir una línea en blanco, utilizamos la etiqueta <p> de párrafo. Esta etiqueta admite su correspondiente cierre </p>, aunque no es necesario.

Page 20: PresentacióN Html

Bienvenida A mi primera página web

Este es mi primer trabajo. Al principio es muy sencillo pero, poco a poco,

se va a ir complicando.

Page 21: PresentacióN Html

Si queremos separar más no es suficiente repetir la

etiqueta <p>. Hay que unir las dos etiquetas y repetir

Ambas como lo muestra la siguiente pantalla:

Page 22: PresentacióN Html

Bienvenida A mi primera página web

Este es mi primer trabajo.

Al principio es muy sencillo pero, poco a poco, se

va a ir complicando.

Page 23: PresentacióN Html

La cabecera se coloca entre las etiquetas <head> y </head> . Va justo después de la primera etiqueta <html> y antes del <body>. Constituye la parte no visible del documento:

lo que más nos interesa poner dentro de la cabecera del documento es el título de la página.

Observa que en la barra de título, la barra superior aparece:

Page 24: PresentacióN Html

Para poner el título al documento, hay que introducir dos nuevas etiquetas dentro de la cabecera. Son las etiquetas <title> de apertura y </title> de cierre. Y, entre ellas ponemos la frase que defina nuestro documento:

<html><head>

<title> Ejercicio 1 </title>

</head><body>Bienvenido a mi página</body></html>

Page 25: PresentacióN Html

En la barra superior del navegador, barra de título, aparece el título que acabamos de poner al documento:

Se cerrará esta página que después será utilizada.

Abriremos una nueva página para hacer los siguientes

ejercicios.

Page 26: PresentacióN Html

La etiqueta para introducir una imagen es <img src="nombre.gif"> (src de source en inglés fuente u origen de la imagen)

y siendo nombre el nombre que tiene la imagen y .gif su formato.

La etiqueta funcionará bien siempre y cuando la imagen esté en la misma carpeta en la que se encuentra la página web desde la que la llamamos. Es habitual (y recomendable) colocar todas las imágenes en otra carpeta interna, en ese caso, habrá que darle la ruta en la cual se encuentra nuestra imagen.

Supongamos que la imagen nombre.gif se encuentra en una carpeta denominada imag, pues bien, la etiqueta sería

<img src="imag/nombre.gif">

Page 27: PresentacióN Html

En este caso el formato de la imagen es .jpg (junto con el .gif y el .png los formatos de imágenes más habituales en internet). La imagen se denomina riglos2.jpg

<html> <head> <title> Imágenes 1 </title> </head> <body> <center> <img src="imag/riglos2.jpg"> </center> </body> </html

Page 28: PresentacióN Html

Es muy importante introducir las medidas de la imagen dentro de la etiqueta <img>.

De esta manera cuando el navegador va recorriendo la página reserva el espacio justo para la imagen y, el resto de la página se va cargando sin problemas mientra se acaba de cargar la imagen.

Supongamos que la imagen tiene 150 de ancho y 230 de alto. Escribiríamos:

Page 29: PresentacióN Html

<html><head><title>

Imágenes 2</title></head><body>

<center><img src="imag/riglos2.jpg” width="150" height="230">

</center></body></html>

Page 30: PresentacióN Html

Simplemente tenemos que colocar dentro de la etiqueta <body> el atributo background con el nombre y/o dirección de la imagen que queremos colocar. Supongamos que quiero colocar una imagen denominada claro1.gif que está dentro de la carpeta imag. El código será el siguiente:

<html><head><title>

Imagen como fondo de página</title></head>

<body background="imag/claro1.gif"><center>

<h2>Esta página tiene una imagen de fondo.

</h2></center></body></html>

Page 31: PresentacióN Html

Es una de las herramientas más interesantes de los documentos html. La sintaxis para establecer un enlace es:

<a href="destino">texto</a> Donde destino es el documento con el que se enlaza y texto es

la palabra o palabras que, al pulsar, nos llevan a ese destino (también puede ser una imagen).

6.1. Vínculos a otro documento del mismo sitio.

Nuestro sitio estará formado por varios archivos generadores de varios documentos. Los documentos tendrán la extensión .html (o .htm). Para establecer el vínculo escribiremos sencillamente el nombre del documento en el destino y, entre las etiquetas de apertura y cierre la palabra o palabras que activarán el vínculo.

Como ejemplo vamos a establecer un enlace a la primera página de este sitio (primer documento) cuyo archivo tiene como nombre index.htm

Page 32: PresentacióN Html

<html><head><title>

Vínculos 1</title></head><body>

<center><a href="index.htm“>

Ir a la página inicial</a>

</center></body></html>

Page 33: PresentacióN Html

En este caso en destino deberemos escribir toda la dirección URL del sitio.

Vamos a establecer un enlace a la página del buscador Google cuya dirección URL es http://www.google.es

<html><head><title>

Vínculos 2</title></head><body>

<center><a href="http://www.google.es">

Ir a Google</a>

</center></body></html>

Page 34: PresentacióN Html

En este caso en destino deberemos escribir toda la dirección URL del sitio.

Vamos a establecer un enlace a la página del buscador Google cuya dirección URL es http://www.google.es

<html><head><title>

Vínculos 2</title></head><body>

<center><a href="http://www.google.es">

Ir a Google</a>

</center></body></html>

Page 35: PresentacióN Html

A veces cuando el documento es muy extenso conviene establecer formas rápidas para subir o bajar a una parte determinada del documento.

Para realizar esto, primero hay que establecer un ancla o marca en la/s parte/s del documento a los que queremos acceder de forma rápida.

La sintaxis de la marca es <a name="ancla1"></a> poniéndolo en el punto de destino. No hace fata que

haya nada entre la etiqueta de apertura y cierre. En el punto activador escribiremos <a href ="#ancla1"> Ir a la parte tal </a>. Como ejemplo vamos a movernos por las partes

anteriores a esta línea del punto en el que estamos.

Page 36: PresentacióN Html

Como ejemplo vamos a movernos por las partes anteriores a esta línea del punto en el que estamos.

En primer lugar hemos nombrado las anclas con el mismo nombre que tienen los diferentes apartados (cambiando el punto por un guión bajo) a los que vamos a desplazarnos:

Page 37: PresentacióN Html

Vamos a ver los enlaces a una dirección de correo electrónico. Cuando el navegante pinche sobre el activador del vínculo, se abrirá el programa de correo con la dirección del destinatario ya escrita en el mensaje.

La sintaxis es <a href="mailto:[email protected]"> Mándame un mensaje </a>

<html><head><title>

Vínculos 5</title></head><body>

<center><a href="mailto:[email protected]">

Dime lo que piensas de este curso</a>

</center></body></html>

Page 38: PresentacióN Html

En lugar de texto podemos utilizar una imagen como vínculo. En primer lugar deberemos escribir la etiqueta de apertura del

vínculo y luego la etiqueta de inclusión de la imagen cerrando, posteriormente, la etiqueta del vínculo.

Para este tipo de vínculos se suelen emplear pequeñas imágenes, aunque, a veces, también se utilizan imágenes de gran formato (sobre todo en los portales de los sitios).

Page 39: PresentacióN Html

<html><head><title>

Vínculos 6</title></head><body>

<center>Visita la página de TERRA:<P><a href="http://www.terra.es"><img src="imag/logo_terra.gif">

</a></center></body></html>

Page 40: PresentacióN Html

A menudo hay que hacer listas de objetos, de conceptos, de definiciones...

Las listas pueden ser no numeradas (el orden no importa) y numeradas:

7.1. Listas no numeradas Comienza el listado con la etiqueta <ul> (unordered list) y su final con

la etiqueta de cierre </ul>. Cada objeto que forma la lista va precedido de la etiqueta <li> (list item) sin etiqueta de cierre.

<html> <head> <title> Listas no numeradas </title> </head> <body> Mis aficiones: <ul> <li> El cine. <li> La montaña. <li> La música. </ul> </body> </html>

Page 41: PresentacióN Html

Mis aficiones: El cine. La montaña. La música.

Page 42: PresentacióN Html

Comienza el listado con la etiqueta <ol> (ordered list) y su final con la etiqueta </ol>. Cada objeto que forma la lista va precedido, igual que en las anteriores de la etiqueta <li> sin cierre.

<html> <head> <title> Listas numeradas </title> </head> <body> Mis preferencias: <ol> <li> Viajar. <li> Salir con mis amigos. <li> Dormir. </ol> </body> </html>

Page 43: PresentacióN Html

Mis preferencias: 1.Viajar. 2.Salir con mis amigos. 3.Dormir.

Page 44: PresentacióN Html

Se pueden combinar unas listas dentro de otras: No numeradas y/o numeradas. Hay que tener, simplemente, cuidado en la colocación de las etiquetas de apertura y cierre.

<html> <head> <title> Listas anidadas </title> </head> <body> <h3>Animales:<h3> <ul> <li> VERTEBRADOS. <ul> <li>Anfibios <li>Peces <li>Reptiles <li>Aves <li>Mamíferos </ul> <li> INVERTEBRADOS. <ul> <li>Insectos <li>Arácnidos <li>Crustáceos <li>Miriápodos </ul> </ul> </body> </html>

Page 45: PresentacióN Html

Animales: VERTEBRADOS.

Anfibios Peces Reptiles Aves Mamíferos

INVERTEBRADOS. Insectos Arácnidos Crustáceos Miriápodos

Hemos incorporado la etiqueta de encabezado de tercer orden <h3> para resaltar el concepto que se va a clasificar. (Recuerda que los encabezados van del <h1> el mayor al <h6> el menor).

Page 46: PresentacióN Html

Son apropiadas, como su nombre indica, para establecer listados de términos con sus definiciones. Las etiquetas de apertura y cierre son <dl> y </dl> (definition list). Los conceptos a definir van con la etiqueta <dt> (definition term) y las definiciones con la etiqueta <dd> (definition definition).

<html> <head> <title> Listas de definiciones </title> </head> <body> <dl> <dt>Concepto 1 <dd>Definición del Concepto 1 <dt>Concepto 2 <dd>Definición del concepto 2 </dl> </body> </html>

Page 47: PresentacióN Html

Concepto 1 Definición del Concepto 1 Concepto 2 Definición del concepto 2