presentación html
Post on 20-Jun-2015
2.059 Views
Preview:
TRANSCRIPT
LENGUAJE 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.
El código fuente, se escribe en un procesador de texto. Lo vamos a hacer con el Bloc de notas.
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.
ESCRIBIR MENSAJE Vamos a escribir Bienvenida. Lo escribiremos entre <body> y
</body>. Nuestro código quedará así:
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
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
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.
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í:
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.
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:
Le damos a Archivo > Guardar , minimizamos y comprobamos los cambios con cada uno de los navegadores
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 ).
Guardamos los cambios y abrimos el navegador para comprobar los resultados:
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.
Guardamos los cambios, minimizamos y abrimos el navegador
Vamos a incluir una nueva línea en nuestra página: Por ejemplo vamos a poner:
A mi primera página web
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í:
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.
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.
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:
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.
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:
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>
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.
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">
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
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:
<html><head><title>
Imágenes 2</title></head><body>
<center><img src="imag/riglos2.jpg” width="150" height="230">
</center></body></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>
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
<html><head><title>
Vínculos 1</title></head><body>
<center><a href="index.htm“>
Ir a la página inicial</a>
</center></body></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>
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>
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.
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:
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:login@servidor.es"> Mándame un mensaje </a>
<html><head><title>
Vínculos 5</title></head><body>
<center><a href="mailto:mmalvarez@sena.edu.co">
Dime lo que piensas de este curso</a>
</center></body></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).
<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>
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>
Mis aficiones: El cine. La montaña. La música.
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>
Mis preferencias: 1.Viajar. 2.Salir con mis amigos. 3.Dormir.
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>
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).
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>
Concepto 1 Definición del Concepto 1 Concepto 2 Definición del concepto 2
top related