7/23/2019 HTML y Diseo Web 3
1/27
Instituto Tcnico Surcolombiano
Ing. Gabriel Guerrero Arellano
29 Agosto de 2015
7/23/2019 HTML y Diseo Web 3
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:
7/23/2019 HTML y Diseo Web 3
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:
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
5/27
Tambin es posible insertar imgenes,tablas y otros elementos entre lasetiquetas y ,no solamente texto.
7/23/2019 HTML y Diseo Web 3
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/23/2019 HTML y Diseo Web 3
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/7/23/2019 HTML y Diseo Web 3
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/7/23/2019 HTML y Diseo Web 3
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: ...
7/23/2019 HTML y Diseo Web 3
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
7/23/2019 HTML y Diseo Web 3
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
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
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.doc7/23/2019 HTML y Diseo Web 3
14/27
De la siguiente forma:
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
16/27
Habra que escribir:
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
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/7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
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:
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
23/27
La alineacinde las imgenesse establece atravs delatributo align.
Este atributopuede tomar los
siguientesvaloresindicados en latabla:
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
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:
7/23/2019 HTML y Diseo Web 3
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.
7/23/2019 HTML y Diseo Web 3
27/27
Por ejemplo para crear la siguiente tabla:
3 filas
x
2 columnas=6 celdas
deberamosescribir en cdigo
HTML