HTML y Diseño Web 3

Instituto Tcnico Surcolombiano
Ing. Gabriel Guerrero Arellano

29 Agosto de 2015
Las etiquetas de encabezados sirven para dar

una jerarqua a los ttulos que llevemos en
nuestra pagina web.
Existen una serie de encabezados que suelen
utilizarse para establecer ttulos dentro de
una pgina. La diferencia entre los distintos
tipos de encabezado es el tamao de la
letra, el tipo de resaltado, y la separacin
existente entre el texto y los elementos que
tiene encima y debajo de l. Hay que tener
en cuanta que el navegador del usuario es el
que aplicar el estilo del encabezado por lo
que el mismo ttulo se puede visualizar de
forma diferente segn el navegador.
Existen seis etiquetas que representan seis
tipos de cabeceras distintas. Todas estas
etiquetas precisan una etiqueta de cierre.
A continuacin se muestran los distintos
encabezados existentes:
Para
crear una pagina como la siguiente

el cdigo seria el siguiente y la pagina al
guardarla como HTML y abrirla con el
navegador se visualizara de esta forma:
Las marquesinas son lneas de texto que pueden desplazarse de un

lado a otro de la ventana en forma de lnea.
Para insertar una marquesina, es necesario insertar el texto entre las
etiquetas <marquee> y </marquee>.
La marquesina, por defecto, se desplaza de derecha a izquierda

indefinidamente, pero si lo deseas puedes hacer que estas
propiedades varen.
A travs del atributo behavior puede modificarse el tipo de
movimiento. Puede tomar los valores alternate (de lado a lado de la
ventana, 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 a
abajo), 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 del
atributo bgcolor.
Tambin
es posible insertar imgenes,

tablas y otros elementos entre las
etiquetas <marquee> y </marquee>,
no solamente texto.
Un
hiperenlace, hipervnculo, o vnculo,

no es ms que un enlace, que al ser
pulsado lleva de una pgina o archivo.
Aquellos elementos (texto, imgenes,
etc.) sobre los que se desee insertar un
enlace han de encontrarse entre las
etiquetas <a> y </a>.
A travs del atributo href se especifica la
pgina a la que est asociado el enlace,
la pgina que se visualizar cuando el
usuario haga clic en el enlace.
Por ejemplo, para insertar el enlace:
por
ejemplo para crear un hipervnculo a

la pagina:
www.facebook.com
En
la seccin que nosotros elijamos

deberamos escribir el siguiente cdigo:
<a
href=http://www.facebook.com>enlace
a Facebook en HTML</a>
El destino del enlace determina en qu ventana va a ser abierta la

pgina vinculada, se especifica a travs del atributo target al que
se le puede asignar los siguientes valores:
_blank:
Abre el documento vinculado en una ventana nueva del
navegador.
_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:
<a href="http://www.facebook.com" target ="_blank">Visita
www.facebook.com en una ventana nueva</a>
Es interesante utilizar esta opcin cuando la pgina de destino est
fuera de nuestro sitio para que cuando el usuario cierre la ventana
del explorador, se encuentre automticamente en la pgina desde
la que haba salido (que vuelva a nuestro sitio).
Los colores de los vnculos pueden especificarse a

travs de las propiedades de la pgina, en la
etiqueta <body>. Estos colores se asignan a travs de
los atributos link (vnculo),alink (vnculo activo),
y vlink (vnculo visitado).
link permite determinar el color de los enlaces sin
visitar (enlace que no ha sido pulsado ninguna vez).
alink permite determinar el color del enlace activo
(enlace que acaba de ser pulsado).
vlink permite determinar el color de los enlaces
visitados (enlaces que ya han sido pulsados).
Por ejemplo, al insertar el siguiente cdigo:
...
<body link=blue" vlink=gray" alink=red">
...
<a href="http://www.facebook.com" target
="_blank">www.facebook.com</a>
Mientras
no se visite la pgina
www.facebook.com, el enlace ser de
color azul (blue):
www.facebook.com
Mientras la pgina www.facebook.com
sea la ltima visitada, el enlace ser de
color gris (gray):
www.facebook.com
Cuando se haya visitado la pgina
www.facebook.com, el enlace ser de
color rojo (red):
www.facebook.com
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 correo
electrnico, cuyo destinatario ser el especificado en el enlace.
Para ello la referencia del vnculo debe
ser"mailto:direcciondecorreo".
Por ejemplo, para insertar un enlace que permita enviar un correo
electrnico a aulaClic, tal como este:
e-mail para Gabriel Guerrero Arellano
Habra que escribir:
<a href="mailto:gabo_1593@hotmail.com">e-mail para Gabriel
Guerrero Arellano</a>
Despus de hacer clic en el enlace se abrir el Outlook Express (si el
usuario lo tiene instalado) con la pantalla para redactar un nuevo
mensaje y con el campo destinatario rellenado con
la direcciondecorreo. Podemos hacer que est rellenado algn
campo ms como es el asunto. En este caso habra que escribir:
<a href="mailto:gabo_1593@hotmail.com?subject=el asunto del
mensaje">e-mail para Gabriel Guerrero Arellano</a>
Vnculo a ficheros para descarga directa:

El valor del atributo href normalmente ser una pgina
web (con extensin htm, html, asp, php...) pero
tambin puede ser un fichero comprimido, una hoja
de Excel, un documento Word, un documento con
extensin pdf. Cuando el enlace no es a una pgina
Web nos aparecer el cuadro de dilogo que seguro
habrs visto alguna vez en el que el navegador le
pide al usuario permiso para descargar el fichero en su
ordenador.
El navegador reconoce algunas extensiones como

asociadas a un determinado programa (por ejemplo la
extensin .doc est asociada al programa Word, .pdf al
programa Acrobar Reader, .xls al programa Excel...) en este
caso 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 una
referencia relativa al documento.
Por ejemplo, en la carpeta donde se encuentra esta pgina
tenemos el fichero Word carta.doc y queremos que nuestros
visitantes puedan visualizar e incluso descargar el fichero en
su disco duro, en este caso definiremos el enlace:
haz clic para descargar el fichero
De
la siguiente forma:
<a href=archivo.doc" tarjet=_blank >haz
clic para descargar el fichero</a>
En este caso hemos utilizado una
referencia relativa al documento ya que
la carta se encuentra en la misma
carpeta que nuestra pgina.
Etiqueta
Imagen <img>
Todas las pginas web acostumbran a
tener un cierto nmero de imgenes, que
permiten mejorar su apariencia, o dotarla
de una mayor informacin visual.
Para insertar una imagen es necesario
insertar la etiqueta <img>. Dicha etiqueta
no necesita etiqueta de cierre.
El nombre de la imagen ha de
especificarse a travs del atributo src.
Habra
que escribir:
<img src=futbol.gif">
Teniendo en cuenta que la imagen se
llama futbol.gif y que est dentro de la
carpeta en donde esta nuestra pagina
web actual.
Entonces en nuestro navegador web la
pagina se visualizara con nuestra imagen
al comienzo
Para
trabajar de una forma ms sencilla y

ordenada, es recomendable que todos
los documentos HTML se encuentren en
un mismo directorio, y que dentro de este
directorio existan diferentes carpetas
para agrupar otros objetos, como puede
ser una carpeta destinada a almacenar
imagenes, o una carpeta destinada a
almacenar archivos de audio, etc.
En general, al visualizar una pgina en un navegador

las imgenes aparecen sin ningn borde alrededor,
pero es posible establecer uno a travs del
atributo border.
El atributo border puede tomar valores numricos, que
indican el grosor en pxeles del borde.
Si
queremos ingresar a una pagina web

especifica desde darle un clci a una
imagen en nuestra pagina html
Ejemplo: insertar una imagen en html que
al darle clic sobre ella me dirija a la
pagina: www.facebook.com debemos
hacer los siguiente:
Al pulsar sobre la
imagen del icono
de facebook
el hipervnculo nos
llevara a la pagina
de facebook
Cuando insertamos una imagen,

esta se muestra en los
navegadores con su tamao
original, pero por diversos motivos
puede interesarnos modificar
dicho tamao.
A travs de los
atributos width (anchura)
y height (altura) puede
modificarse el tamao de la
imagen. Dicho cambio de
tamao no se aplica
directamente sobre el archivo de
imagen, sino que lo que vara es
la visualizacin de la imagen en
el navegador.
El
valor que pueden tomar los

atributos width y height ha de ser un
nmero, acompaado de % cuando se
desee que sea en porcentaje con
respecto a la pgina.
Por ejemplo, para insertar la siguiente
imagen (cuyo tamao original era de 122
pxeles de anchura y 71 pxeles de altura)
con 200 pxeles de anchura y 80 pxeles
de altura:
Deberamos escribir lo siguiente primero cargamos

la ruta de balon.gif el cual esta En la misma carpeta
donde esta la pagina web y cambiamos su (altura) height=80
y cambiamos Su (anchura) width=200
Nota: Al modificar el tamao de la imagen a

travs de estos atributos es muy probable
que la imagen resultante no sea de buena
calidad, en comparacin de cmo podra
quedar modificndola desde un editor
externo, como photoshop.
Al abrir nuestra pagina

web en nuestro
navegador se cargara
la imagen
Animada con su alto y
ancho cambiado
La
alineacin
de las imgenes
se establece a
travs del
atributo align.
Este atributo
puede tomar los
siguientes
valores
indicados en la
tabla:
Hoy en da, la mayora

de las pginas web se
basan en tablas, ya que
resultan de gran utilidad
al mejorar notablemente
las opciones de diseo.
Todos los objetos se
alinean por defecto a la
izquierda de las pginas
web, pero gracias a las
tablas es posible distribuir
el texto en columnas,
colocar imgenes al
lado de un bloque de
texto, y otra serie de
cosas que sin las tablas
seran imposibles de
realizarse.
Tabla <table>
Las tablas estn formadas
por celdas, que son los
recuadros que se obtienen
como resultado de la
interseccin entre una fila y
una columna.
Es necesario insertar las

etiquetas <tr> y </tr> por cada una de las
filas de la tabla. Estas etiquetas debern
insertarse entre las
etiquetas <table> y </table>.
Por ejemplo, para crear una tabla con cinco
filas escribiramos:
Para crear una tabla no basta con especificar el

nmero de filas, es necesario tambin especificar
el nmero de columnas.
Una celda es el resultado de la interseccin entre
una fila y una columna, por lo que podremos
especificar el nmero de celdas por fila, que
equivale a especificar el nmero de columnas
por fila.
Es necesario insertar las etiquetas <td> y </td> por
cada una de las celdas que compongan cada
una de las filas de la tabla. Por lo tanto, habr
que insertar esas etiquetas entre las
etiquetas <tr> y </tr>.
Entre las etiquetas <td> y </td> se podr
especificar el contenido de cada una de las
celdas.
Por
ejemplo para crear la siguiente tabla:
3 filas
x
2 columnas
=6 celdas
deberamos
escribir en cdigo
HTML

HTML y Diseño Web 3

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML y Diseño Web 3

Diunggah oleh

Hak Cipta:

Format Tersedia

Instituto Tcnico Surcolombiano

Ing. Gabriel Guerrero Arellano

Las etiquetas de encabezados sirven para dar

crear una pagina como la siguiente

Las marquesinas son lneas de texto que pueden desplazarse de un

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

es posible insertar imgenes,

hiperenlace, hipervnculo, o vnculo,

ejemplo para crear un hipervnculo a

la seccin que nosotros elijamos

El destino del enlace determina en qu ventana va a ser abierta la

Los colores de los vnculos pueden especificarse a

Existen otros tipos de enlaces que no conducen a otra pgina web,

Vnculo a ficheros para descarga directa:

El navegador reconoce algunas extensiones como

trabajar de una forma ms sencilla y

En general, al visualizar una pgina en un navegador

queremos ingresar a una pagina web

Cuando insertamos una imagen,

valor que pueden tomar los

Deberamos escribir lo siguiente primero cargamos

Nota: Al modificar el tamao de la imagen a

Al abrir nuestra pagina

Hoy en da, la mayora

Es necesario insertar las

Para crear una tabla no basta con especificar el

ejemplo para crear la siguiente tabla:

Anda mungkin juga menyukai