HTML y Diseño Web 3

7/23/2019 HTML y Diseo Web 3

1/27

Instituto Tcnico Surcolombiano

Ing. Gabriel Guerrero Arellano

29 Agosto de 2015


2/27

Las etiquetas de encabezados sirven para daruna jerarqua a los ttulos que llevemos ennuestra pagina web.

Existen una serie de encabezados que suelenutilizarse para establecer ttulos dentro deuna pgina. La diferencia entre los distintostipos de encabezado es el tamao de la

letra, el tipo de resaltado, y la separacinexistente entre el texto y los elementos quetiene encima y debajo de l. Hay que teneren cuanta que el navegador del usuario es elque aplicar el estilo del encabezado por loque el mismo ttulo se puede visualizar deforma diferente segn el navegador.

Existen seis etiquetas que representan seistipos de cabeceras distintas. Todas estasetiquetas precisan una etiqueta de cierre.

A continuacin se muestran los distintosencabezados existentes:


3/27

Para crear una pagina como la siguienteel cdigo seria el siguiente y la pagina alguardarla como HTML y abrirla con elnavegador se visualizara de esta forma:


4/27

Las marquesinas son lneas de texto que pueden desplazarse de unlado a otro de la ventana en forma de lnea.

Para insertar una marquesina, es necesario insertar el texto entre lasetiquetas y .

La marquesina, por defecto, se desplaza de derecha a izquierda

indefinidamente, pero si lo deseas puedes hacer que estaspropiedades varen.

A travs del atributo behavior puede modificarse el tipo demovimiento. Puede tomar los valores alternate (de lado a lado de laventana, 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 aabajo), up (de abajo a arriba), right (de derecha a izquierda)o left (de izquierda a derecha).

Tambin es posible establecer un color de fondo, a travs delatributo bgcolor.


5/27

Tambin es posible insertar imgenes,tablas y otros elementos entre lasetiquetas y ,no solamente texto.


6/27

Un hiperenlace, hipervnculo, o vnculo,no es ms que un enlace, que al serpulsado lleva de una pgina o archivo.

Aquellos elementos (texto, imgenes,etc.) sobre los que se desee insertar unenlace han de encontrarse entre lasetiquetas y .

A travs del atributo href se especifica la

pgina a la que est asociado el enlace,la pgina que se visualizar cuando elusuario haga clic en el enlace.

Por ejemplo, para insertar el enlace:


7/27

por ejemplo para crear un hipervnculo ala pagina:

www.facebook.com

En la seccin que nosotros elijamosdeberamos escribir el siguiente cdigo:

enlacea Facebook en HTML
http://www.facebook.com/http://www.facebook.com/http://www.facebook.com/


8/27

El destino del enlace determina en qu ventana va a ser abierta lapgina vinculada, se especifica a travs del atributo target al quese le puede asignar los siguientes valores:

_blank:

Abre el documento vinculado en una ventana nueva delnavegador.

_self: Es la opcin predeterminada. Abre el documento vinculado en el

mismo marco o ventana que el vnculo.

Para insertar el enlace:

Visita www.facebook.com en una ventana nueva

Habra que escribir:

Visitawww.facebook.com en una ventana nueva

Es interesante utilizar esta opcin cuando la pgina de destino estfuera de nuestro sitio para que cuando el usuario cierre la ventanadel explorador, se encuentre automticamente en la pgina desdela que haba salido (que vuelva a nuestro sitio).
http://www.aulaclic.com/http://www.aulaclic.com/http://www.aulaclic.com/


9/27

Los colores de los vnculos pueden especificarse atravs de las propiedades de la pgina, en laetiqueta . Estos colores se asignan a travs delos atributos link(vnculo),alink(vnculo activo),y vlink(vnculo visitado).

linkpermite determinar el color de los enlaces sinvisitar (enlace que no ha sido pulsado ninguna vez).

alinkpermite determinar el color del enlace activo(enlace que acaba de ser pulsado).

vlinkpermite determinar el color de los enlacesvisitados (enlaces que ya han sido pulsados).

Por ejemplo, al insertar el siguiente cdigo: ...


10/27

Mientras no se visite la pginawww.facebook.com, el enlace ser decolor azul (blue):

www.facebook.com

Mientras la pgina www.facebook.comsea la ltima visitada, el enlace ser decolor gris (gray):

www.facebook.com

Cuando se haya visitado la pginawww.facebook.com, el enlace ser decolor rojo (red):

www.facebook.com


11/27

Existen otros tipos de enlaces que no conducen a otra pgina web,los veremos a continuacin:

Correo electrnico:

Abre la aplicacin Outlook Express para escribir un correoelectrnico, cuyo destinatario ser el especificado en el enlace.Para ello la referencia del vnculo debeser"mailto:direcciondecorreo".

Por ejemplo, para insertar un enlace que permita enviar un correoelectrnico a aulaClic, tal como este:

e-mail para Gabriel Guerrero Arellano

Habra que escribir:

e-mail para GabrielGuerrero Arellano

Despus de hacer clic en el enlace se abrir el Outlook Express (si el

usuario lo tiene instalado) con la pantalla para redactar un nuevomensaje y con el campo destinatario rellenado conla direcciondecorreo. Podemos hacer que est rellenado algncampo ms como es el asunto. En este caso habra que escribir:

e-mail para Gabriel Guerrero Arellano


12/27

Vnculo a ficheros para descarga directa:

El valor del atributo href normalmente ser una pginaweb (con extensin htm, html, asp, php...) perotambin puede ser un fichero comprimido, una hoja

de Excel, un documento Word, un documento conextensin pdf. Cuando el enlace no es a una pginaWeb nos aparecer el cuadro de dilogo que segurohabrs visto alguna vez en el que el navegador lepide al usuario permiso para descargar el fichero en suordenador.


13/27

El navegador reconoce algunas extensiones comoasociadas a un determinado programa (por ejemplo laextensin .doc est asociada al programa Word, .pdf alprograma Acrobar Reader, .xls al programa Excel...) en estecaso en el cuadro de dilogo aparece una nueva opcin,la de abrir el fichero sin descargarlo en el disco duro del

usuario. Para nombrar el fichero podemos utilizar segn el caso, una

referencia externa, una referencia relativa al sitio o unareferencia relativa al documento.

Por ejemplo, en la carpeta donde se encuentra esta pginatenemos el fichero Word carta.doc y queremos que nuestros

visitantes puedan visualizar e incluso descargar el fichero ensu disco duro, en este caso definiremos el enlace:

haz clic para descargar el fichero
http://www.aulaclic.es/html/carta.dochttp://www.aulaclic.es/html/carta.doc


14/27

De la siguiente forma:


15/27

Etiqueta Imagen

Todas las pginas web acostumbran atener un cierto nmero de imgenes, que

permiten mejorar su apariencia, o dotarlade una mayor informacin visual.

Para insertar una imagen es necesarioinsertar la etiqueta . Dicha etiqueta

no necesita etiqueta de cierre. El nombre de la imagen ha de

especificarse a travs del atributo src.


16/27

Habra que escribir:


17/27

Para trabajar de una forma ms sencilla yordenada, es recomendable que todoslos documentos HTML se encuentren enun mismo directorio, y que dentro de estedirectorio existan diferentes carpetaspara agrupar otros objetos, como puedeser una carpeta destinada a almacenarimagenes, o una carpeta destinada aalmacenar archivos de audio, etc.


18/27

En general, al visualizar una pgina en un navegadorlas imgenes aparecen sin ningn borde alrededor,pero es posible establecer uno a travs delatributo border.

El atributo border puede tomar valores numricos, queindican el grosor en pxeles del borde.


19/27

Si queremos ingresar a una pagina web

especifica desde darle un clci a unaimagen en nuestra pagina html

Ejemplo: insertar una imagen en html queal darle clic sobre ella me dirija a la

pagina: www.facebook.com debemoshacer los siguiente:

Al pulsar sobre laimagen del icono

de facebook

el hipervnculo nosllevara a la pagina

de facebook
http://www.facebook.com/http://www.facebook.com/


20/27

Cuando insertamos una imagen,esta se muestra en losnavegadores con su tamaooriginal, pero por diversos motivospuede interesarnos modificar

dicho tamao. A travs de los

atributos width (anchura)y height (altura) puedemodificarse el tamao de laimagen. Dicho cambio de

tamao no se aplicadirectamente sobre el archivo deimagen, sino que lo que vara esla visualizacin de la imagen enel navegador.


21/27

El valor que pueden tomar losatributos width y height ha de ser unnmero, acompaado de % cuando sedesee que sea en porcentaje conrespecto a la pgina.

Por ejemplo, para insertar la siguienteimagen (cuyo tamao original era de 122

pxeles de anchura y 71 pxeles de altura)con 200 pxeles de anchura y 80 pxelesde altura:


22/27

Deberamos escribir lo siguiente primero cargamosla ruta de balon.gif el cual esta En la misma carpeta

donde esta la pagina web y cambiamos su (altura) height=80y cambiamos Su (anchura) width=200

Al abrir nuestra pagina

web en nuestronavegador se cargarala imagenAnimada con su alto yancho cambiado

Nota: Al modificar el tamao de la imagen atravs de estos atributos es muy probableque la imagen resultante no sea de buenacalidad, en comparacin de cmo podraquedar modificndola desde un editorexterno, como photoshop.


23/27

La alineacinde las imgenesse establece atravs delatributo align.

Este atributopuede tomar los

siguientesvaloresindicados en latabla:


24/27

Hoy en da, la mayorade las pginas web sebasan en tablas, ya queresultan de gran utilidadal mejorar notablementelas opciones de diseo.

Todos los objetos sealinean por defecto a laizquierda de las pginasweb, pero gracias a lastablas es posible distribuirel texto en columnas,

colocar imgenes allado de un bloque detexto, y otra serie decosas que sin las tablasseran imposibles derealizarse.

Tabla Las tablas estn formadasporceldas, que son losrecuadros que se obtienencomo resultado de la

interseccin entre una fila yuna columna.


25/27

Es necesario insertar lasetiquetas y por cada una de lasfilas de la tabla. Estas etiquetas deberninsertarse entre las

etiquetas y . Por ejemplo, para crear una tabla con cinco

filas escribiramos:


26/27

Para crear una tabla no basta con especificar elnmero de filas, es necesario tambin especificarel nmero de columnas.

Una celda es el resultado de la interseccin entreuna fila y una columna, por lo que podremos

especificar el nmero de celdas por fila, queequivale a especificar el nmero de columnaspor fila.

Es necesario insertar las etiquetas y porcada una de las celdas que compongan cadauna de las filas de la tabla. Por lo tanto, habr

que insertar esas etiquetas entre lasetiquetas y .

Entre las etiquetas y se podrespecificar el contenido de cada una de lasceldas.


27/27

Por ejemplo para crear la siguiente tabla:

3 filas

x

2 columnas=6 celdas

deberamosescribir en cdigo

HTML

HTML y Diseño Web 3

Documents

Transcript of HTML y Diseño Web 3