tpd 02
TRANSCRIPT
TALLER DE PROGRAMACIÓN DISTRIBUIDA
Instituto Superior de Educación Publico “LA SALLE”
Docente: Ing. Alex Fernando HuillcaDocente: Ing. Alex Fernando Huillca
SEGUNDA ACTIVIDAD DE SEGUNDA ACTIVIDAD DE
APRENDIZAJEAPRENDIZAJE CREANDO PÁGINAS WEB CON EL LENGUAJE HTML
HTML
El HTML 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.
HYPER=VIDEO, AUDIO, FLASH,ETC.HTML no es propiamente un
lenguaje de programación
1. Empezando a utilizar html El código fuente, se escribe en un procesador
de texto. Lo vamos a hacer con el Bloc de notas.
etiquetas 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í:
GUARDAR DOCUMENTO
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
2. Mi primera página
Ya podemos ir al Escritorio para abrir la página.
Observa que el icono de la página en el escritorio tiene a los navegadores:
Si haces doble clic sobre él, se te abrirá la página
VISTA DE 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. Mejorando la página3.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.
3.2. Aumentar el tamaño del texto
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
3.3. Poner un color de fondo 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 ).
VER COLOR DE FONDO
Guardamos los cambios y abrimos el navegador para comprobar los resultados:
3.4. Cambiar el color del texto 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.
Ver color de la letra
Guardamos los cambios, minimizamos y abrimos el navegador
3.5. Saltos de línea Vamos a incluir una nueva línea en nuestra
página: Por ejemplo vamos a poner:
A mi primera página web
Ver saltos de linea 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í:
3.6 Párrafos 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.
Ver parrafosBienvenida
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.
4. La cabecera 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:
Agregar titulo 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>
Agregar titulo 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.
5. Imágenes• 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">
Ver imagen• 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
5.1. Atributos de la imagen width y height
• 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:
Ancho y largo de la imagen <html>
<head>
<title>
Imágenes 2
</title>
</head>
<body>
<center>
<img src="imag/riglos2.jpg” width="150" height="230">
</center>
</body>
</html>
5.2. Colocar una imagen como fondo de la página
• 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>
6. Vínculos• 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
Ver vinculos<html>
<head>
<title>
Vínculos 1
</title>
</head>
<body>
<center>
<a href="index.htm“>
Ir a la página inicial
</a>
</center>
</body>
</html>
6.2. Vínculos a otro documento externo al sitio
• 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>
6.3. Vínculos a otro documento externo al sitio
• 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>
6.4.- Vínculos a otra parte del mismo documento.
• 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:
6.5.- Vínculos de correo electrónico
• 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>
6.6. Imagen como vínculo a otro documento
• 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).
Vinculo imagen otro documento<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>
7. ListasA 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>
Resultado de listas no numeradas
Mis aficiones:
El cine.
La montaña.
La música.
7.2. Listas numeradas 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>
Resultado listas no numeradas
Mis preferencias:
1.Viajar.
2.Salir con mis amigos.
3.Dormir.
7.3. Listas anidadas• 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>
Resultado listas anidadasAnimales: 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).
5.4 Listas de definiciones 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>
Resultado listas de definicionesConcepto 1
Definición del Concepto 1
Concepto 2
Definición del concepto 2