manual html final
TRANSCRIPT
www.aulaclic.com
Fuente: www.aulaclic.com
n d i c e d e t a l l a d o Unidad 1. Introduccin a HTMLQu es HTMLVersiones de HTML Los navegadores. Compatibilidad Editores Introduccin al Bloc de notasCompaginar dos sesionesEtiquetasMi primera pgina
Unidad 2. Estructura de una pginaIdentificador del tipo de
documento Cabecera de la pgina Ttulo de la pgina La etiqueta Cuerpo
del documento Colores en hexadecimal Unidad 3. El textoCaracteres
especiales y espacios en blancoComentarios Saltos de lnea
Texto preformateado Separadores Sangrado de texto Formatear el
texto Resaltado del texto ...Prrafos ...Encabezados
...Marquesinas Las listas ... Unidad 4. HiperenlacesHiperenlace
Tipos de referenciasDestino del enlaceFormato de los enlacesPuntos
de fijacin. AnclasOtros tipos de enlaces Unidad 5. ImgenesImagen
Formatos de imagenTexto alternativo Borde de una imagenTamao de una
imagenAlineacin de una imagen Unidad 6. TablasTabla Fila Columna o
celda Formato de la tablaFormato de las celdasEncabezado de columna
Titulo de tabla Combinar celdas Unidad 7. MarcosConjunto de marcos
Marco Sin marcos Destino del enlace Unidad 8. FormulariosFormulario
reas de texto Elementos de entrada Campos de seleccin ... Unidad 9.
MultimediaSonido de fondo Vdeo y audio Pelculas Flash Unidad 10.
CapasCapa ... Unidad 11. JavaScriptLenguajes de scriptJava Script
Unidad 12. Hojas de estiloIntroduccinVincular una hoja de
estiloSintaxis de las hojas de estiloLas propiedades Unidad 13.
Pginas web dinmicasHTML dinmicoProgramacin webXMLEjercicios paso a
pasoCrear una pgina bsicaInsertar texto con diferentes
propiedadesInsertar un hiperenlaceInsertar una imagenTrabajar con
tablasCrear conjunto de marcosInsertar elementos de
formularioInsertar sonido de fondoModificar las propiedades de una
capaLlamadas a javascriptCrear hoja de estilosEjercicios
propuestosModificar las propiedades del documentoModificar las
propiedades del textoInsertar hiperenlacesInsertar imgenesTrabajar
con tablasConfigurar marcosInsertar elementos de formularioInsertar
elementos multimediaModificar las propiedades de una capaLlamadas a
java scriptAplicar estilosPruebas evaluativasIntroduccin a
HTMLEstructura de una pginaEl
textoHiperenlacesImgenesTablasMarcosFormulariosMultimediaCapasJava
ScriptHojas de estiloPginas web dinmicasUnidad 1.Introduccin a HTML
(I)A lo largo de este tema vamos a conocer los conceptos bsicos
sobre HTML, y cmo se utiliza para crear pginas web.Qu es HTMLEl
HTML (Hyper Text Markup Language) es el lenguaje con el que se
escriben las pginas web. Es un lenguaje de hipertexto, es decir, un
lenguaje que permite escribir texto de forma estructurada, y que
est compuesto por etiquetas, que marcan el inicio y el fin de cada
elemento del documento.Un documento hipertexto no slo se compone de
texto, puede contener imgenes, sonido, vdeos, etc., por lo que el
resultado puede considerarse como un documento multimedia.Los
documentos HTML deben tener la extensin html o htm, para que puedan
ser visualizados en los navegadores (programas que permiten
visualizar las pginas web).Los navegadores se encargan de
interpretar el cdigo HTML de los documentos, y de mostrar a los
usuarios las pginas web resultantes del cdigo
interpretado.Versiones de HTMLEn noviembre de 1995 se aprob el
estndar HTML 2.0. para la creacin de pginas web. Se cre con
objetivos divulgativos, orientado a la actividad acadmica, en el
que el contenido de las pginas era ms importante que el diseo.Pero
esta versin del HTML careca de muchas herramientas que permitieran
controlar el diseo de las pginas y aadir contenido multimedia, por
lo que Netscape (cuyos navegadores eran los ms utilizados por
aquellos aos) comenz a incluir nuevas etiquetas que no existan en
el estndar.El comit encargado de establecer los estndares dentro de
Internet, comenz a trabajar en el borrador de una nueva versin de
HTML, el borrador de HTML 3.0.Pero este borrador result demasiado
extenso, al intentar incluir numerosos nuevos atributos para
etiquetas ya existentes, y la creacin de otras muchas etiquetas
nuevas. Por ello, no fue bien aceptado por el mercado y varias
compaas se unieron para formar un nuevo comit encargado de
establecer los estndares del HTML. Este comit pas a llamarse W3C.
En enero de 1997 se aprob el estndar HTML 3.2. Este nuevo estndar
inclua las mejoras proporcionadas por los navegadores Internet
Explorer y Netscape Navigator, que ya haban realizado extensiones
sobre el estndar HTML 2.0.En diciembre de 1997 se aprob el estndar
HTML 4.0, creado para estandarizar los marcos (frames), las hojas
de estilo y los scripts.En septiembre de 2001 se aprob el estndar
HTML 4.01.Unidad 1.Introduccin a HTML (II)Los navegadores.
CompatibilidadComo hemos dicho, el navegador instalado en el
ordenador del usuario es el que interpreta el cdigo HTML de la
pgina que visita por lo que a veces puede ocurrir que dos usuarios
visualicen la misma pgina de forma distinta porque tienen
instalados navegadores distintos o incluso versiones distintas del
mismo navegador. Los navegadores de hoy en da pretenden ser
compatibles con la ltima versin de HTML. Es necesario realizar
extensiones de los navegadores para que puedan ser compatibles con
esta ltima versin.Dos de los navegadores que continuamente estn
realizando extensiones son Internet Explorer y Netscape Navigator,
que realizan extensiones incluso antes de que se establezcan los
estndares, intentando incluir las nuevas funciones incluidas en los
borradores.Los navegadores tienen que ser compatibles con la ltima
versin HTML para poder interpretar el mayor nmero posible de
etiquetas. Si un navegador no reconoce una etiqueta, la ignora y el
efecto que pretenda la etiqueta no queda reflejado en la pgina.Para
realizar las extensiones de estos navegadores se aaden nuevos
atributos a las etiquetas ya existentes, o se aaden nuevas
etiquetas.Como resultado a estas extensiones, habr pginas cuyo
cdigo podr ser interpretado completamente por todos los
navegadores, mientras que otras, al incluir nuevos atributos o
etiquetas del borrador de la ltima versin de HTML, solo podrn ser
interpretadas en su totalidad en los navegadores ms actualizados.En
este ltimo caso tambin puede ocurrir que alguna etiqueta de la
pgina solamente pueda ser interpretada por un navegador concreto, y
otra etiqueta por un navegador diferente al anterior, por lo que
nunca sera visualizada en su totalidad por ningn navegador.Uno de
los retos de los diseadores de pginas web es hacer las pginas ms
atractivas utilizando toda la potencia del lenguaje HTML pero
teniendo en cuentas estos problemas de compatibilidades para que el
mayor nmero de internautas vean sus pginas tal como las ha
diseado.EditoresUn editor es un programa que nos permiten redactar
documentos. Hoy en da existen un gran nmero de editores que
permiten crear pginas web sin la necesidad de escribir ni una sola
lnea de cdigo HTML. Estos editores disponen de un entorno visual, y
generan automticamente el cdigo de las pginas. Al poder ver en todo
momento cmo quedar la pgina en el navegador, se facilita la creacin
de las pginas, y el uso de mens permite ganar rapidez.Estos
editores visuales pueden generar en ocasiones cdigo basura, es
decir, cdigo que no sirve para nada, en otras ocasiones puede ser
ms efectivo corregir directamente el cdigo por lo que resulta
necesario saber HTML para poder depurar el cdigo de nuestra
pginas.Algunos de los editores visuales con los que podrs crear tus
pginas web son Macromedia Dreamweaver, Microsoft Frontpage, Adobe
Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional,
Netscape Composer y Arachnophilia, de los cuales algunos tienen la
ventaja de ser gratuitos.En aulaClic puedes encontrar los cursos de
Macromedia Dreamweaver y Microsoft Frontpage, dos de los editores
ms usados hoy en da. Es aconsejable comenzar utilizando una
herramienta lo ms sencilla posible, para tener que insertar
nosotros mismos el cdigo HTML. Esto permite familiarizarse con el
lenguaje, para poder utilizar algn editor visual posteriormente, y
depurar el cdigo cuando fuera necesario.Para crear pginas web
escribiendo directamente el cdigo HTML puedes utilizar la
herramienta Wordpad o el Bloc de notas que proporciona Windows.A lo
largo de este curso vamos a trabajar con el Bloc de notas para
crear nuestras pginas, ya que se trata de un editor de textos muy
sencillo de manejar, que nos permitir crear pginas a travs del
cdigo HTML.Si no sabes cmo trabajar con el Bloc de notas, te lo
explicamos aqu. Cuando realices los ejercicios puedes compaginar
dos sesiones de la forma que te explicamos aqu. EtiquetasLas
etiquetas o marcas delimitan cada uno de los elementos que componen
un documento HTML. Existen dos tipos de etiquetas, la de comienzo
de elemento y la de fin o cierre de elemento.La etiqueta de
comienzo est delimitada por los caracteres < y >. Est
compuesta por el identificador o nombre de la etiqueta, y puede
contener una serie de atributos opcionales que permiten aadir
ciertas propiedades. Su sintaxis es: Los atributos de la etiqueta
de comienzo siguen una sintaxis predefinida y pueden tomar
cualquier valor propio del usuario, o valores HTML predefinidos.La
etiqueta de final est delimitada por los caracteres . Est compuesta
por el identificador o nombre de la etiqueta, y no contiene
atributos. Su sintaxis es: < /identificador > Cada uno de los
elementos de la pgina se encontrar entre una etiqueta de comienzo y
su correspondiente etiqueta de cierre, a excepcin de algunos
elementos que no necesitan etiqueta de cierre. Tambin es posible
anidar etiquetas, es decir, insertar etiquetas entre otras
etiquetas de comienzo y de cierre.A continuacin tenemos un ejemplo
en el que tenemos la etiqueta < Font > anidada dentro de la
etiqueta < p >.: Bienvenidos a www.aulaclic.com Este cdigo
dara como resultado el siguiente texto:Bienvenidos a
www.aulaclic.comEs importante anidar bien las etiquetas, las
etiquetas no se pueden 'cruzar', en nuestro ejemplo hemos empezado
por la etiqueta , antes de cerrar esta etiqueta hemos puesto la Por
lo que antes de cerrar la etiqueta debemos cerrar la etiqueta
.Introduccin al Bloc de notasArrancar y cerrar el Bloc de
notasVeamos las dos formas bsicas de arrancar el Bloc de
notas.Desde el botn Inicio situado, normalmente, en la esquina
inferior izquierda de la pantalla. Colocar el cursor y hacer clic
sobre el botn Inicio, se despliega un men; al colocar el cursor
sobre Programas aparece otra lista con los programas que hay
instalados en tu ordenador, buscar Accesorios, seguidamente Bloc de
notas, hacer clic sobre l, y se arrancar el programa.Desde el icono
del Bloc de notas del escritorio .Para cerrar el Bloc de notas,
puedes utilizar cualquiera de las siguientes operaciones: Hacer
clic en el botn cerrar Pulsar la combinacin de teclas ALT+F4. Hacer
clic sobre el men Archivo y elegir la opcin Salir. Si el documento
ha sido modificado y no ha sido guardado antes de cerrar, se te
pedir confirmacin para guardarlo antes de cerrar el
programa.Escribir en el Bloc de notasSiempre que se abre el bloc de
notas aparece un documento en blanco. A la hora de escribir en l,
funciona como cualquier otro editor de texto, basta con situar el
cursor en el documento y escribir.Es recomendable insertar una
nueva lnea para cada nueva etiqueta HTML, ya que resulta ms fcil
trabajar de este modo. Si escribiramos todo el cdigo seguido nos
resultara difcil interpretarlo, por ello es preferible programar
insertando las etiquetas por separado, en diferentes lneas. A travs
del men Formato, opcin Fuente, puedes cambiar la fuente de todo el
documento. Si lo deseas, puedes hacer la letra algo ms grande o
pequea.Abrir y guardar documentosPara abrir un documento, puedes
utilizar cualquiera de las siguientes operaciones una vez abierto
el Bloc de notas. Pulsar la combinacin de teclas Ctrl+A. Hacer clic
sobre el men Archivo y elegir la opcin Abrir.Nota: Como el Bloc de
notas sirve originalmente para escribir documentos de texto, cuando
le decimos Abrir, por defecto nos muestra los documentos con
extensin .txt, nuestras pginas tienen la extensin .htm o html, por
lo que debemos cambiar en el cuadro de dilogo abrir el tipo de
archivo para visualizarlos todos y poder ver as nuestras
pginas.Para abrir un documento nuevo, puedes utilizar cualquiera de
las siguientes operaciones.Pulsar la combinacin de teclas Ctrl+N.
Hacer clic sobre el men Archivo y elegir la opcin Nuevo.Para
guardar un documento, puedes utilizar cualquiera de las siguientes
operaciones. Pulsar la combinacin de teclas Ctrl+G. Hacer clic
sobre el men Archivo y elegir la opcin Guardar.A la hora de guardar
un documento no debes olvidar guardarlo con la extensin htm o html.
Por ejemplo, puedes guardar un documento con el nombre
mipagina.htm.Compaginar dos sesiones Aqu te explicaremos cmo
conseguir tener la pantalla dividida en dos partes, una con el
curso y otra con el Bloc de notas. 1 Se supone que la sesin con el
curso est abierta. 2 Abrir la sesin del Bloc de notas. 3 Pulsar con
el botn derecho sobre cualquier parte vaca de la barra de tareas,
en la parte inferior de la pantalla. Es la barra en la que se
encuentra el botn Inicio.4 Elegir la opcin Mosaico vertical.
Observa como la pantalla ha quedado dividida en dos partes, como en
la figura: 5 Una vez tenemos las dos sesiones con el tamao
adecuado, basta hacer clic con el ratn para pasar de la una a la
otra. Para volver a dejar las ventanas con su tamao normal, hacer
clic en el botn Maximizar . Esto va bien con monitores grandes (de
17" o ms), con monitores pequeos quizs prefieras dejar las ventanas
con su tamao normal e ir pasando de una a otra presionando las
teclas Alt + tabulador (manteniendo pulsada Alt, presionar la tecla
tabulador) o pulsando el botn correspondiente a la sesin en la
barra de tareas en la ltima lnea de la pantalla.Compaginar dos
sesiones puede resultarte muy til al realizar los ejercicios.
Puedes cargar un documento en el Bloc de notas y en un navegador al
mismo tiempo. Cada vez que realices algn cambio en el cdigo del
Bloc de notas y guardes los cambios, puedes actualizar la pgina
cargada en el navegador para ver los cambios que ha sufrido por las
modificaciones en el cdigo.Para actualizar una pgina en Internet
Explorer puedes pulsar sobre el botn .Unidad 1.Introduccin a HTML
(III)Para que te vayas haciendo una idea de cmo crear una pgina
html a travs del Bloc de notas, vamos a crear una pgina web
sencilla, con una lnea de texto.Mi primera pginaLo primero que
tienes que hacer es abrir el Bloc de notas. Para abrirlo, puedes
dirigirte al men Inicio, Programas, Accesorios, opcin Bloc de
notas.Seguidamente introduce, en el documento en blanco, el texto
siguiente:html>MI PRIMERA PAGINAHola, estoy haciendo
pruebas.Guarda el documento con la extensin htm, con el nombre
miprimpag.htm. Puedes guardarlo a travs del men Archivo, opcin
Guardar.Pulsando dos veces sobre el icono del archivo
miprimpag.htm, ste debera abrirse automticamente en el navegador
que tengas instalado en tu ordenador.El navegador deber mostrar una
pgina como la de abajo.Como puedes ver, la pgina resultante es una
pgina que solamente tiene una lnea de texto.Si observas la barra de
ttulo del navegador, vers que el ttulo de la pgina es MI PRIMERA
PAGINA. Este ttulo ha sido establecido por la lnea MI PRIMERA
PAGINA .El color de fondo de la pgina ha sido establecido por la
lnea .El texto Hola, estoy haciendo pruebas. Se ha insertado a
travs de lnea Hola, estoy haciendo pruebas.. Prueba evaluativa del
Tema 1.Prueba evaluativa de la unidad 1. Introduccin a HTMLSolo una
respuesta es vlida por pregunta.Haz clic en la respuesta que
consideres correcta. Contesta todas las preguntas y haz clic en el
botn Resultados para ver la solucin.1. Un documento de hipertexto
solo se compone de texto. a) Verdaderob) Falso2. Los navegadores se
encargan de interpretar el cdigo HTML de los documentos.a)
Verdaderoa) Falso3. El nuevo comit encargado de establecer los
estndares del HTML es el W3C. a) Verdaderoa) Falso4. Los
navegadores tienen que ser compatibles con la ltima versin HTML
para poder insertar imgenes.a) Verdaderoa) Falso5. Siempre que
escribimos una etiqueta debemos escribir su correspondiente
etiqueta de cierre.a) Verdaderoa) Falso6. Si un navegador no
reconoce una etiqueta.a) la cambia por otrab) la ignorac) muestra
una imagen en su lugar7. Para realizar las extensiones de los
navegadores ...a) se aaden nuevos atributos y etiquetasb) se crean
nuevos editores visualesc) se utilizan editores de texto8. Existen
dos tipos de etiquetas:a) La de comienzo de elemento y la de fin de
pginab) La de comienzo de elemento y la de atributoc) La de
comienzo de elemento y la de fin o cierre de elemento9. El cdigo de
todas las pginas:a) Puede ser interpretado completamente por todos
los navegadores.b) No puede ser interpretado completamente por
todos los navegadores.c) Cualquiera de las dos primeras opciones.d)
Ninguna de las opciones anteriores.10. Los editores visualesa)
Pueden generar cdigo basura.b) Permiten crear pginas web sin la
necesidad de escribir ni una sola lnea de cdigo HTML.c) Cualquiera
de las dos primeras opciones.d) Ninguna de las opciones
anteriores.RESULTADOSUnidad 2.Estructura de una pgina (I)A lo largo
de este tema vamos a aprender a crear una pgina bsica.La estructura
bsica de una pgina es:...................Ahora veamos cmo funcionan
estas etiquetas. Identificador del tipo de documento Todas las
pginas web escritas en HTML tienen que tener la extensin html o
htm. Al mismo tiempo, tienen que tener las etiquetas y . Entre las
etiquetas y estar comprendido el resto del cdigo HTML de la
pgina.Por ejemplo:...........Cabecera de la pgina La cabecera de la
pgina se utiliza para agrupar informacin sobre ella, como puede ser
el ttulo. Est formada por las etiquetas y . La etiqueta va justo
debajo de la etiqueta .Por ejemplo:......Entre las etiquetas y ,
las etiquetas que podemos encontrar y ms se utilizan son: , ,
(estas etiquetas las veremos ms adelante), (si deseas saber para qu
sirve y cmo utilizar esta etiqueta, consltalo aqu ) y la etiqueta
que te explicamos a continuacin.Ttulo de la pgina El ttulo de la
pgina es el que aparecer en la parte superior de la ventana del
navegador, cuando la pgina est cargada en l.Para asignar un ttulo a
una pgina es necesario escribir el texto deseado entre las
etiquetas y .Estas etiquetas han de estar dentro de la cabecera, es
decir, entre las etiquetas y .Por ejemplo:Curso de HTML...La
etiqueta La etiqueta se utiliza para aadir informacin sobre la
pgina. Esta informacin puede ser utilizada por los buscadores.Los
buscadores consultan la informacin de la etiqueta de las pginas,
buscando coincidencias con lo que el usuario pretende encontrar.A
travs de esta etiqueta pueden especificarse los atributos name y
content. El atributo name indica el tipo de informacin, y el
atributo content indica el valor de dicha informacin.Para indicar
el tipo de informacin podemos utilizar cualquier palabra que
deseemos, como puede ser "Autor", "Palabras clave", "Descripcin",
etc. Pero debido a que la mayora de buscadores estn en ingls, es
preferible que el tipo de informacin se especifique en ingls.Los
tipos de informacin ms utilizados son los
siguientes:TipoSignificadoauthorAutor de la
pginaclassificationPalabras para clasificar la pgina en los
buscadoresdescriptionDescripcin del contenido de la
pginageneratorPrograma utilizado para crear la
pginakeywordsPalabras claveLa etiqueta no necesita etiqueta de
cierre. Para cada etiqueta solo es posible indicar un tipo de
informacin y su valor, pero es posible insertar varias etiquetas en
un mismo documento.La etiqueta ha de estar entre las etiquetas y
.Por ejemplo, el siguiente cdigo indica que el autor de la pgina es
aulaclic, que la pgina trata sobre un curso de HTML gratuito, y
especifica algunas palabras clave a ser consultadas por los
buscadores:......La etiqueta tambin se utiliza para indicarle al
navegador alguna informacin o alguna accin que debe realizar. En
este caso se utiliza el atributo http-equiv, en lugar del atributo
name.Por ejemplo, imaginemos que por algn motivo queremos que
nuestra pgina se actualice automticamente cada 30 segundos. En ese
caso, deberamos utilizar la accin Refresh (actualizar). Podramos
utilizar el siguiente cdigo:......Ahora imaginemos que hemos
cambiado la direccin en la que se encuentra nuestra pgina web, y
queremos que cuando algn usuario visite la pgina en la direccin
antigua, a los 5 segundos el navegador lo redirija automticamente a
la direccin nueva. En ese caso podramos insertar el siguiente cdigo
en la pgina que se encuentra en la direccin antigua:......De este
modo, el navegador realizara la funcin de actualizar la pgina, pero
cargando la que se encontrara en la nueva direccin
(URL=http://www.aulaclic.com/index.htm).Unidad 2.Estructura de una
pgina (II)Cuerpo del documento El cuerpo del documento contiene la
informacin propia del documento, es decir lo que queremos que se
visualice, el texto de la pgina, las imgenes, los formularios,
etc.Todos estos elementos tienen que encontrarse entre las
etiquetas y , que van justo debajo de la cabecera.Por ejemplo:Curso
de HTML...A travs de la etiqueta es posible establecer el color o
la imagen de fondo de la pgina.El color de fondo puede establecerse
a travs del atributo bgcolor, al que es posible asignarle un color
representado en hexadecimal o por un nombre predefinido.Si no sabes
cmo representar los colores en hexadecimal, o a qu nmero o nombre
se corresponde cada uno de ellos, puedes consultarlo aqu. Por
ejemplo, para hacer que el color de fondo de una pgina sea de color
azul, tendremos que escribir:......Sera equivalente a
poner:......La imagen de fondo puede establecerse a travs del
atributo background, indicando la ruta en la que se encuentra la
imagen.Por ejemplo, para hacer que la imagen de fondo de una pgina
sea la imagen fondo.gif, que se encuentra en el mismo directorio en
el que se encuentra guardada la pgina, tendremos que
escribir:......En el caso de que la imagen no se encuentre en el
mismo directorio que la pgina, y se encuentre dentro de la carpeta
imgenes, que s se encuentra en el mismo directorio que la pgina,
tendremos que escribir:......A travs de la etiqueta tambin es
posible establecer el color del texto de la pgina a travs del
atributo text.Por ejemplo, para hacer que el color del texto de una
pgina sea de color rojo, tendremos que escribir:......Entre el
borde de la ventana y el contenido de la pgina existe un margen,
cuyo tamao en pxeles puede modificarse mediante los atributos
leftmargin (margen izquierdo) y topmargin (margen superior). Estos
atributos no funcionan para el navegador Netscape, pero s los
atributos marginwidth (anchura del margen) y marginheight (altura
del margen). Estos atributos suelen utilizarse para eliminar el
margen, para lo cual deben valer cero.Por ejemplo, para hacer que
una pgina no tenga margen superior, y tenga un margen izquierdo de
20 pxeles, tendremos que escribir:......Para practicar los
distintos aspectos explicados en el tema puedes realizar el
Ejercicio paso a paso Crear una pgina bsica. Ejercicio paso a paso.
Crear una pgina bsicaPracticar las operaciones que hay que realizar
para crear una pgina bsica.Si es la primera vez que realizas el
ejercicio, haz clic aqu para descargarte la carpeta de ejercicios,
debers extraer los archivos en la carpeta Mis documentos de tu
disco duro, ah se crear una carpeta ejercicios_html.A lo largo del
curso vamos a crear tres sitios web, cada sitio lo guardaremos en
una carpeta dentro de ejercicios_html.En esa carpeta tenemos:La
carpeta animales, donde guardaremos los archivos de un sitio web de
una asociacin ficticia de veterinarios que iremos creando a lo
largo de los ejercicios paso a paso.La carpeta deportes, donde
guardaremos los archivos de un sitio web de una cadena de centros
deportivos que iremos creando a lo largo de los ejercicios
propuestos.La carpeta flores, donde guardaremos los archivos de un
sitio web de una floristera que iremos creando a lo largo de los
ejercicios propuestos.Cada carpeta contiene a su vez una carpeta
imgenes y una carpeta varios donde iremos guardando las imgenes y
ficheros varios respectivamente.Una vez tenemos nuestros sitios
organizados, podemos empezar a practicar.1 Si no tienes abierto el
Bloc de notas, brelo para realizar el primer ejercicio. 2 Escribe
el cdigo que aparece a continuacin:InicioCon este cdigo estars
creando un documento con el ttulo "Inicio", y con el color de fondo
verde (#99CC99).3 Haz clic sobre el men Archivo.4 Haz clic sobre la
opcin Guardar como. Se abrir el cuadro de dilogo Guardar como.5 En
el recuadro Tipo: elige Todos los archivos.6 Guarda el documento
con el nombre inicio.htm, dentro de la carpeta Mis
documentos/ejercicios_html/animales de tu disco duro. 7 Abre el
documento que acabas de crear en un navegador, y comprueba que
obtienes una pgina como la que aqu. Fjate en el color de fondo de
la pgina y en la barra de ttulo. Ejercicios del Tema 2. Prueba
evaluativa del Tema 2.Ejercicios Unidad 2. Estructura de una
pginaSi no tienes abierto el Bloc de notas, brelo para realizar los
ejercicios planteados a continuacin.Ejercicio 1: Deportes. 1 Abrir
el documento quienes.htm, de la carpeta originales/deportes del
curso.2 Guardar la pgina con el mismo nombre en tu directorio de
ejercicios Mis documentos/ejercicios_html/deportes. 3 Establecer
#0099CC como color de fondo y 40 como tamao de los mrgenes.4
Guardar los cambios y comprobar el funcionamiento con tu navegador,
no te preocupes por el formato del texto, lo arreglars en el tema
siguiente.Ejercicio 2: Flores. 1 Copiar la imagen fondo.gif que
encontrars en la carpeta originales/flores/imagenes a tu carpeta
Mis documentos/ejercicios_html/flores/imagenes2 Copiar el documento
inicio.htm, de la carpeta originales/flores a tu carpeta Mis
documentos/ejercicios_html/flores. 3 Abrir el documento Mis
documentos/ejercicios_html/flores/inicio.htm con el Bloc de notas.4
Establecer como imagen de fondo la imagen fondo.gif de la carpeta
ejercicios_html/flores/imagenes.5 Guardar los cambios y comprobar
el funcionamiento en tu navegador.Prueba evaluativa de la unidad
2.Estructura de una pginaSolo una respuesta es vlida por
pregunta.Haz clic en la respuesta que consideres correcta. Contesta
todas las preguntas y haz clic en el botn Resultados para ver la
solucin.1. Las pginas web escritas en HTML tienen que tener la
extensin html o htm.a) Verdaderob) Falso2. El cdigo de las pginas
estar comprendido entre las etiquetas y .a) Verdaderob) Falso3. El
ttulo de una pgina se establece dentro de la cabecera.a)
Verdaderob) Falso 4. El margen que hay entre el borde de la ventana
y el contenido de la pgina no puede modificarse.a) Verdaderob)
Falso 5. Puede establecerse una imagen de fondo a travs del
atributo background.a) Verdaderob) Falso6. Las etiquetas y van.a)
Justo encima de la cabecera.b) Dentro de la cabecera.c) Justo
debajo de la cabecera.7. Es posible definir el color de la fuente
del documento mediante.a) la etiqueta .b) el atributo bgcolor.c) el
atributo text.8. Los atributos leftmargin y topmargin.a) no
funcionan en Internet Explorer.b) no funcionan en Netscape.c)
funcionan en todos los navegadores.9. El color de fondo de una
pgina.a) se especifica en la etiqueta . b) puede establecerse a
travs del atributo bgcolor.c) las dos afirmaciones anteriores son
verdaderas.d) las tres afirmaciones anteriores son falsas.10. Los
colores se representan en.a) binario.b) decimal. c) las dos
afirmaciones anteriores son verdaderas.d) las tres afirmaciones
anteriores son falsas.RESULTADOSAyuda Ejercicios Unidad 2. Crear
sitio local y modificar las propiedades de la pginaEjercicio 1:
Deportes Apartado 1 Hacer clic sobre el men Archivo, y elegir la
opcin Abrir.En la nueva ventana, elegir Todos los archivos en
Tipo:.Seleccionar el documento quienes.htm, de la carpeta
deportes.Pulsar sobre el botn Abrir.Apartado 2 Hacer clic sobre el
men Archivo, y elegir la opcin Guardar como.En la nueva ventana,
elegir la carpeta ejercicios_html/deportes.Dejar el mismo nombre de
documento quienes.htm.Pulsar sobre el botn Guardar.Apartado 3
Buscar la etiqueta .Sustituirla por .Apartado 4 Hacer clic sobre la
opcin Guardar, del men Archivo.Abrir el documento quienes.htm en un
navegador y comprobar que el fondo de la pgina es de color
azul.Ejercicio 2: Flores Apartado 3 Hacer clic sobre el men
Archivo, y elegir la opcin Abrir.En la nueva ventana, elegir Todos
los archivos en Tipo:Seleccionar el documento inicio.htm, de la
carpeta ejercicios_html/flores.Pulsar sobre el botn Abrir.Apartado
4 Buscar la lnea en la que aparezca de cierre de la etiqueta
body.Apartado 5 Hacer clic sobre la opcin Guardar, del men
Archivo.Abrir el documento inicio.htm en un navegador, y comprobar
el fondo de la pgina es de color rosa, con flores.Colores en
hexadecimalLos colores en HTML se representan mediante un nmero
hexadecimal.Un nmero hexadecimal se diferencia de un nmero decimal
en que no slo puede tomar valores del 0 al 9, sino que puede tomar
hasta diecisis valores distintos, que van del 0 al 9, y de la A a
la F.Cada color estar representado por un grupo de seis dgitos en
hexadecimal, precedidos por una almohadilla, como por ejemplo
#FFFFFF. Existen 216 colores seguros para web. stos son los colores
que se muestran de la misma forma en Microsoft Internet Explorer y
en Netscape Navigator, tanto en Windows como en Macintosh.Tambin
podemos personalizar nuestros propios colores, modificando los
valores de cada uno de los dgitos que forman parte del nmero
hexadecimal.A continuacin se muestran los 216 colores seguros para
web, para que puedas consultarlos cuando lo
necesites.#000000#000033#000066#000099#0000CC#0000FF#003300#003333#003366#003399#0033CC#0033FF#006600#006633#006666#006699#0066CC#0066FF#009900#009933#009966#009999#0099CC#0099FF#00CC00#00CC33#00CC66#00CC99#00CCCC#00CCFF#00FF00#00FF33#00FF66#00FF99#00FFCC#00FFFF#330000#330033#330066#330099#3300CC#3300FF#333300#333333#333366#333399#3333CC#3333FF#336600#336633#336666#336699#3366CC#3366FF#339900#339933#339966#339999#3399CC#3399FF#33CC00#33CC33#33CC66#33CC99#33CCCC#33CCFF#33FF00#33FF33#33FF66#33FF99#33FFCC#33FFFF#660000#660033#660066#660099#6600CC#6600FF#660033#663333#663366#663399#6633CC#6633FF#666600#666633#666666#666699#6666CC#6666FF#669900#669933#669966#669999#6699CC#6699FF#66CC00#66CC33#66CC66#66CC99#66CCCC#66CCFF#66FF00#66FF33#66FF66#66FF99#66FFCC#66FFFF#990000#990033#990066#990099#9900CC#9900FF#993300#993333#993366#993399#9933CC#9933FF#996600#996633#996666#996699#9966CC#9966FF#999900#999933#999966#999999#9999CC#9999FF#99CC00#99CC33#99CC66#99CC99#99CCCC#99CCFF#99FF00#99FF33#99FF66#99FF99#99FFCC#99FFFF#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF#CC3300#CC3333#CC3366#CC3399#CC33CC#CC33FF#CC6600#CC6633#CC6666#CC6699#CC66CC#CC66FF#CC9900#CC9933#CC9966#CC9999#CC99CC#CC99FF#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF#FF3300#FF3333#FF3366#FF3399#FF33CC#FF33FF#FF6600#FF6633#FF6666#FF6699#FF66CC#FF66FF#FF9900#FF9933#FF9966#FF9999#FF99CC#FF99FF#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFFExiste
otra forma de representar algunos colores, sin la necesidad de
utilizar nmeros en hexadecimal. Estos colores pueden representarse
por su nombre, y son los
siguientes:ColorHexadecimalNombre#FFFFFFwhite#000000black#000080navy#0000FFblue#008000green#008080teal#00FF00lime#00FFFFaqua#800000maroon#800080purple#808000olive#808080gray#C0C0C0silver#FF0000red#FF00FFfuchsia#FFFF00yellowUnidad
3.El texto (I)A lo largo de este tema vamos a aprender a cambiar
las propiedades del texto, as como a insertar caracteres especiales
o separadores.Caracteres especiales y espacios en blancoLos
caracteres < y > son dos caracteres especiales que indican
inicio y fin de etiqueta. Si se desea insertar estos caracteres
como texto hay que escribir el nombre que los representa:< Se
representa con Se representa con >Existen otra serie de
caracteres que no se visualizan correctamente en algunos
navegadores, como es el caso de la y las letras acentuadas, por lo
que al igual que ocurre con los caracteres especiales < y >,
para insertarlos como texto habra que escribir el nombre que los
representa.A continuacin se muestra una lista con algunos
caracteres y el nombre con el que han de ser
representados:CarcterRepresentacin>CarcterRepresentacin&&""Siempre
que se inserta texto en HTML hay que tener en cuenta que si se
escriben varios espacios en blanco seguidos solamente se mostrar
uno en el navegador. Para conseguir que se muestren varios espacios
en blanco seguidos puede sustituirse cada uno de ellos por .Por
ejemplo, para insertar el texto:Bienvenidos, esta es mi1pgina!Habra
que escribir:Bienvenidos, esta es mi1pgina!ComentariosEn ocasiones
podemos desear aadir comentarios aclaratorios dentro del cdigo, de
manera que no sean visualizados en el navegador, pero s a la hora
de editar el documento.Para insertar comentarios dentro del cdigo,
basta con insertar el texto entre .Todo el cdigo que se inserte
entre estos smbolos no ser visualizado en los navegadores.Por
ejemplo, para insertar el texto siguiente con un
comentario:Bienvenidos, esta es mi 1 pgina!Habra que
escribir:Bienvenidos, esta es mi 1 pgina!Saltos de lnea
En general, cuando trabajamos con un editor de texto se produce un
salto de lnea al pulsar la tecla INTRO.Si pulsamos INTRO en un
documento HTML, el salto de lnea se producir en el cdigo, pero no
se mostrar en el navegador. Para que se produzca el salto de lnea
en el navegador, en lugar de pulsar la tecla INTRO hay que insertar
la etiqueta
donde se desee que se produzca el salto.La etiqueta
no precisa ninguna etiqueta de cierre. No hay que insertar la
etiqueta despus de ella, ya que dicha etiqueta no existe.Por
ejemplo, para insertar el texto:Queridos usuarios, tengo el placer
de comunicaros que hay una nueva seccin.Habra que escribir:Queridos
usuarios,
tengo el placer de comunicaros que hay una nueva
sección.Unidad 3.El texto (II)Texto preformateado Una
forma de asegurarnos de que el texto aparezca en el navegador tal
cual ha sido insertado dentro del cdigo, es utilizando las
etiquetas y .Utilizando estas etiquetas podemos tener la seguridad
de que en el navegador se mostrarn todos los espacios en blanco que
se inserten en el texto, as como todos los saltos de lnea
resultantes de pulsar la tecla INTRO, sin la necesidad de utilizar
la etiqueta
.Por ejemplo, para insertar el texto:Hola, BIENVENIDOSesta ES MI
PGINA WEB y esto un texto preformateadoHabra que escribir:
Hola,BIENVENIDOSestaES MI PGINA WEBy esto un texto preformateado El
inconveniente de esta etiqueta es que entre las etiquetas y no se
pueden incluir las etiquetas (para incluir imgenes), (para incluir
objetos como animaciones), , , ni (las veremos en este tema).
Separadores El elemento que suele utilizarse para separar secciones
dentro de una misma pgina es la regla horizontal. Para insertar una
regla horizontal hay que insertar la etiqueta . Dicha etiqueta no
precisa ninguna etiqueta de cierre.Es posible especificar algunos
atributos de la regla horizontal:AtributoSignificadoPosibles
valoresalignalineacin de la regla dentro de la pginaleft
(izquierda)right (derecha)center (centro)widthancho de la reglaun
nmero, acompaado de % cuando se desee que sea en porcentajesizealto
de la reglaun nmeronoshadeeliminar el sombreado de la reglano puede
tomar valoresPor ejemplo, para insertar el texto y la regla
horizontal siguientes:Inicio Bienvenidos a mi pgina.Habra que
escribir:InicioBienvenidos a mi pgina.Sangrado de texto La sangra
es una especie de margen que se establece a ambos lados del texto.
Para que un texto aparezca sangrado, se inserta entre las etiquetas
y .Esta etiqueta en un principio se defini para delimitar citas
pero que como la mayora de los navegadores resuelven la cita
incluyendo un sangrado del texto, su uso para sangrar texto se ha
generalizado.El uso de la etiqueta obliga a que el texto aparezca
en una nueva lnea.Insertando el texto entre varias etiquetas y se
consigue que los mrgenes sean mayores.Por ejemplo, para insertar el
texto:Queridos usuarios, tengo el placer de comunicaros que hay una
nueva seccin.Habra que escribir:Queridos usuariotengo el placer de
comunicaros que hay una nueva sección.Unidad 3.El texto
(III)Formatear el texto ...Las propiedades del texto pueden
modificarse a travs de la etiqueta . Para ello, podemos insertar el
texto entre las etiquetas y , especificando algunos de los
atributos de la etiqueta:AtributoSignificadoPosibles
valoresfacefuentenombre de la fuente, o fuentescolorcolor del
textonmero hexadecimal o texto predefinidosizetamao del
textovalores del 1 al 7, siendo por defecto el 3,o desplazamiento
respecto al tamao por defecto,aadiendo + o - delante del valorPor
ejemplo, para insertar el texto:Bienvenidos a www.aulaclic.comHabra
que escribir:Bienvenidos a www.aulaclic.com Tambin es posible
definir una fuente para todo el documento. Para ello, hay que
insertar la etiqueta despus de la etiqueta .La etiqueta no necesita
una etiqueta de cierre, y permite modificar los mismos atributos
del texto que la etiqueta .Por ejemplo:...Este cdigo hara que la
fuente del documento fuera por defecto de color azul, de tamao 4 y
Arial. Si despus de indicar la etiqueta o , el navegador encuentra
otra etiqueta , la que prevalece es siempre la ltima que se
encuentra.Resaltado del texto ...Este cdigo hara que la fuente del
documento fuera por defecto de color azul, de tamao 4 y Arial. Si
despus de indicar la etiqueta o , el navegador encuentra otra
etiqueta , la que prevalece es siempre la ltima que se encuentra.A
continuacin se muestran algunas etiquetas asociadas al tipo de
letra:EtiquetaSignificadoEjemplonegritacurso HTML
aulacliccursivacurso HTML aulaclicsubrayadocurso HTML
aulaclictachadocurso HTML aulaclicteletipo (mquina de
escribir)curso HTML aulaclicaumenta el tamao de la fuentecurso HTML
aulaclicdisminuye el tamao de la fuentecurso HTML aulaclicA
continuacin se muestran algunas etiquetas asociadas al tipo de
informacin:EtiquetaSignificadoEjemplocitacurso HTML aulaclicejemplo
de cdigocurso HTML aulaclicdefinicincurso HTML
aulacliceliminadocurso HTML aulaclicnfasiscurso HTML
aulaclicinsertadocurso HTML aulaclictecladocurso HTML
aulaclicmuestracurso HTML aulaclicdestacadocurso HTML
aulaclicsubndicecurso HTML aulaclicsuperndicecurso HTML
aulaclicvariablecurso HTML aulaclicLas etiquetas ms utilizadas son
las asociadas al tipo de letra, ya que son ms fciles de recordar, y
en muchos casos los resultados son los mismos que los de aplicar
una etiqueta diferente. Por ejemplo, el resultado de aplicar las
etiquetas y es el mismo. Incluso a veces algunos estilos
asociados al tipo de informacin pueden representarse de forma
distinta segn el navegador.Por ejemplo, para insertar el
texto:Bienvenidos a www.aulaclic.comHabra que escribir:Bienvenidos
a www.aulaclic.comUnidad 3.El texto (IV)Prrafos ...El texto de una
pgina puede agruparse en prrafos. Para ello, el texto de cada uno
de los prrafos debe insertarse entre las etiquetas y .No es
necesario insertar la etiqueta
para que un nuevo prrafo aparezca debajo del anterior, ya que las
etiquetas y hacen que se cambie de lnea automticamente.Tambin es
posible cambiar la alineacin del texto de cada prrafo. Para ello se
modifica el valor del atributo align, cuyos valores pueden ser left
(izquierda), right (derecha), center (centrado) o justify
(justificado).Por ejemplo, para insertar el texto:Bienvenidos a mi
pgina.Aqu encontraris cursos de formacin muy interesantes.Habra que
escribir:Bienvenidos a mi página.Aquí
encontraréis cursos de formación muy
interesantes.Otra forma de cambiar la alineacin del texto es
mediante las etiquetas y , para las que tambin existe el atributo
align. La etiqueta , al igual que la etiqueta , se utiliza para
agrupar bloques de texto, pero con la diferencia de que la
separacin entre ellos es menor.Por ejemplo, para insertar el
texto:Bienvenidos a mi pgina.Aqu encontraris cursos de formacin muy
interesantes.Habra que escribir:Bienvenidos a mi
página.Aquí encontraréis cursos de
formación muy interesantes.Tambin es posible insertar el
texto entre las etiquetas y para que aparezca centrado.Por ejemplo,
para insertar el texto:Bienvenidos a mi pgina.Habra que
escribir:Bienvenidos a mi página.Otro par de etiquetas
que permiten agrupar bloques de texto, pero que no implican el
cambio de lnea (como en el caso de y ), son las etiquetas y
volveremos a hablar de estas etiquetas cuando veamos las hojas de
estilo.Encabezados ...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 cuenta 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:EtiquetaEjemploTtulo 1:
HTMLTtulo 2: HTMLTtulo 3: HTMLTtulo 4: HTMLTtulo 5: HTMLTtulo 6:
HTMLPara todas estas etiquetas es posible especificar el valor del
atributo align.Por ejemplo, para insertar el texto:El lenguaje
HTMLApartado 1: Las etiquetasHabra que escribir:El lenguaje
HTMLApartado 1: Las etiquetasMarquesinas 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 y .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), left (de derecha a izquierda) o left (de izquierda
a derecha).Tambin es posible establecer un color de fondo, a travs
del atributo bgcolor.Por ejemplo, para insertar la siguiente
marquesina:Habra que escribir:Esto es una marquesina Tambin es
posible insertar imgenes, tablas y otros elementos entre las
etiquetas y , no solamente texto.Si quieres saber cmo crear listas,
consltalo aqu . Las listas ...Elemento de lista Cada uno de los
elementos de una lista ha de insertarse entre las etiquetas y .Por
ejemplo, para insertar en una lista los siguientes elementos: Perro
Gato Periquito Habra que escribir: ...PerroGatoPeriquito...Todos
los elementos de la lista debern encontrarse entre las etiquetas
que indiquen si la lista es desordenada (con vietas) u ordenada
(numerada) como veremos a continuacin.Lista desordenada
Para que una lista sea desordenada, sus elementos debern
encontrarse entre las etiquetas y .A travs del
atributo type es posible elegir el tipo de vieta, que puede ser
circle (crculo), disc (disco) o square (cuadrado).Por ejemplo, para
insertar la siguiente lista: Perro Gato Periquito Habra que
escribir:GatoPeriquitoLista
ordenada Para que una lista sea ordenada, sus
elementos debern encontrarse entre las etiquetas
y .A travs del atributo type es posible elegir el tipo de
numeracin, que puede ser 1 (nmeros), a (letras minsculas), A
(letras maysculas), i (nmeros romanos en minsculas) o I (nmeros
romanos en maysculas).Por ejemplo, para insertar la siguiente
lista:i. Perro ii. Gato iii. Periquitoiv. Habra que
escribir:PerroGatoPeriquitoAnidar listasEs
posible anidar listas dentro de otras. Estas listas pueden ser
tanto desordenadas como ordenadas.Por ejemplo, para insertar la
siguiente lista:1. Lunes Ingles Francs 2. Martes 3. Ingles A.
Correccin de ejercicios B. Proponer ejerciciosHabra que
escribir:LunesInglesFrancesMartesInglesCorreccion
de ejerciciosProponer ejercicios Empezamos por la lista
ordenada (la ms externa) , esta lista tiene dos elementos
Lunes y Martes.El elemento Lunes contiene una lista desordenada con
tipo cuadrado que tiene dos elementos Ingles y Frances.El
elemento Martes contiene una lista ordenada de un slo elemento
Ingles elemento que contiene a su vez una lista desordenada de tipo
letras maysculas con los dos elementos Correccion de
ejercicios y Proponer ejercicios Para practicar los distintos
aspectos explicados en el tema puedes realizar el Ejercicio paso a
paso Insertar texto con diferentes propiedades. Ejercicio pas a
paso. Insertar texto con diferentes propiedadesObjetivo. Practicar
las operaciones que hay que realizar para insertar texto
especificando sus propiedades. Ejercicio 1. 1 Si no tienes abierto
el Bloc de notas, brelo para realizar el ejercicio.2 Abre el
archivo inicio.htm, que creaste en el tema anterior y que se
encuentra en la carpeta ejercicios_html/animales.3 Inserta una lnea
en blanco debajo de la etiqueta , y escribe el siguiente cdigo en
ella:Con este cdigo estars estableciendo el color rojo (#FF0000) y
tamao 1 para el texto del documento.Si guardas ahora los cambios y
visualizas la pgina, no vers ningn cambio ya que la pgina no tiene
texto.4 Detrs de la etiqueta inserta una lnea en blanco, y escribe
el siguiente texto: Inicio5 Guarda el archivo y visualzalo en tu
navegador, el texto debe aparecer en rojo y pequeo.Dejaremos la
pgina un poco ms discreta y cambiaremos el color del texto a verde
oscuro (#003333) y subiremos el tamao de las letras.6 Rectifica la
etiqueta para que quede as:Con este cdigo estars estableciendo el
color verde oscuro (#003333) y tamao 4 para el texto del
documento.7 Guarda el archivo y visualzalo en tu navegador, observa
los cambios.8 Encierra el texto Inicio entre etiquetas de la
siguiente forma:InicioCon este cdigo estars convirtiendo el texto
en un encabezado de primer nivel.9 Guarda el archivo y visualzalo
en tu navegador, observa los cambios, el texto aparece destacado y
ms grande.10 Inserta una lnea en blanco debajo del cdigo anterior,
y escribe la etiqueta .Con esta etiqueta estars insertando una
regla horizontal.11 Guarda el archivo y visualzalo en tu navegador,
observa la regla12 Inserta una lnea en blanco debajo de la etiqueta
anterior, y escribe el siguiente cdigo en ella: Somos una asociacin
de veterinarios, estudiantes de veterinaria, o simplemente amantes
de los animales.
Desde esta pgina web intentaremos resolver tus dudas acerca de cmo
cuidar a tus mascotas.Con este cdigo estars insertando un prrafo ()
dividido en dos lneas (
).Este prrafo estar alineado a la izquierda (align="left"),
aparecer en cursiva () y tendr doble sangrado ().13 Guarda el
archivo y visualzalo en tu navegador, comprueba que obtienes una
pgina como la que aparece si aqu. Para apreciar mejor el efecto del
prrafo ves cambiando el tamao de la ventana de tu navegador y vers
cmo el texto se va escribiendo en ms lneas pero siempre alineado a
la izquierda y saltando de lnea despus de la primera
frase.Ejercicio 2. 1 Abre el documento gatos.htm, de la carpeta
originales/animales del curso.2 Guarda la pgina con el mismo nombre
en tu directorio de ejercicios Mis
documentos/ejercicios_html/animalesVamos a modificar la pgina para
que tenga el siguiente aspecto:1 Empezamos por darle a la palabra
Gatos un estilo de encabezado 1: GatosSi quieres puedes ir
observando los cambios segn los vayas introduciendo, guardando sin
cerrar el bloc de notas y visualizando la pgina cada vez (la
primera vez abres el explorador con la pgina gatos.htm y despus de
ver el efecto, en vez de cerrar la ventana del explorador la dejas
abierta, as cuando hayas hecho el siguiente cambio en la pgina
podrs volver a la sesin del explorador con la pgina gatos.htm y
despus de hacer clic en el botn Actualizar de tu navegador vers
mejor el efecto producido por el cambio que has incorporado a la
pgina).2 Detrs aadimos una regla con la etiqueta .3 Aadimos una
lnea en blanco con
4 La pregunta queda sangrada con respecto al resto del texto, la
colocamos dentro de una etiqueta y adems le asignamos un estilo de
encabezado 3:COMO PREVENIR LOS PROBLEMAS DENTALES?5 Slo nos queda
definir la lista intercalando las siguientes etiquetas:
Alimentar al gato con comida seca de buena calidad o darle algo
duro para que lo mastique Preferiblemente que coma pienso
Cepillarle los dientes una vez a la semana Que el veterinario
examine la boca del gato por lo menos cada seis meses 6 Guarda el
archivo y visualzalo en tu navegador.Ejercicios del Tema 3. Prueba
evaluativa del Tema 3.Ejercicios Unidad 3. Modificar las
propiedades del textoSi no tienes abierto el Bloc de notas, brelo
para realizar los ejercicios planteados a continuacin.Ejercicio 1:
Deportes. 1 Abrir el documento quienes, de tu carpeta
ejercicios_html/deportes.2 Aadir el cdigo necesario para que la
pgina quede de la siguiente forma:3 Guardar los cambios y comprobar
el funcionamiento en un navegador.Ejercicio 2: Deportes. 1 Abrir el
documento donde.htm, de la carpeta originales/deportes del curso.2
Guardar la pgina con el mismo nombre en tu directorio de ejercicios
Mis documentos/ejercicios_html/deportes3 Convertir la ltima frase
en una marquesina.4 Guardar los cambios y comprobar el
funcionamiento en un navegador.Ejercicio 3: Deportes. 1 Abrir el
documento intalaciones.htm, de la carpeta originales/deportes del
curso.2 Guardar la pgina con el mismo nombre en tu directorio de
ejercicios Mis documentos/ejercicios_html/deportes3 Convertir la
lista de actividades que aparece antes de la frase Puedes
apuntarte... en una lista con vietas.4 Guardar los cambios y
comprobar el funcionamiento en un navegador.Ejercicio 4: Flores. 1
Abrir el documento inicio.htm, de la carpeta
ejercicio_html/flores.2 Aadir el cdigo necesario para que la pgina
quede de la siguiente forma:Establecer #990033 como color del texto
del documento, y 4 como el tamao normal.3 Guardar los cambios y
comprobar el funcionamiento en un navegador.Si no tienes muy claro
las operaciones a realizar en los ejercicios anteriores, En las
siguientes hojas te lo explicamos.Ayuda Ejercicios Unidad 3.
Modificar las propiedades del textoEjercicio 1: Deportes Apartado 2
Rectificar el cdigo dejndolo de la siguiente manera: QUIENES
SOMOS?
Somos una cadena de centros deportivos dispuestos a ofrecerte
nuestras instalaciones a buen precio, con la posibilidad de
reservarlas con antelacin a travs de esta web.
Este ms, podrs hacerte socio de forma totalmente gratuita.
Acrcate a uno de nuestros centros y no pierdas esta oportunidad.La
primera lnea aparece subrayada ( ), como un encabezado ().Luego
tenemos dos prrafos ya que tiene una alineacin diferente, el
primero est justificado ( son dos caracteres especiales que indican
inicio y fin de etiqueta.a) Verdaderob) Falso 3. Los comentarios se
insertan entre . a) Verdaderob) Falso 4. Si se escriben varios
espacios en blanco seguidos solamente se mostrar uno en el
navegador. a) Verdaderob) Falso 5. La etiqueta hace que el texto se
muestre en cursiva.a) Verdadero.b) Falso. 6. El texto equivale a un
espacio en blanco. a) Verdaderob) Falso 7. Los encabezados...a)
Sirven para establecer el color de fondo del texto.b) Se utilizan
para establecer ttulos dentro de la pgina.c) No existen en HTML.8.
Las etiquetas y ... a) permiten cambiar el tamao del texto.b)
permiten insertar un texto como ttulo.c) permiten centrar el
texto.9. Para agrupar bloques de texto...A) Podemos utilizar las
etiquetas y .B) Podemos utilizar la etiqueta .C) Cualquiera de las
dos primeras opciones.D) Ninguna de las opciones anteriores. 10.
Las marquesinas...A) Pueden contener texto.B) Pueden contener
imgenes.C) Cualquiera de las dos primeras opciones.D) Ninguna de
las opciones anteriores.RESULTADOSUnidad 4.Hiperenlaces (I)Vamos a
ver qu son los hiperenlaces, para qu sirven y cmo crearlos, ya que
son un elemento esencial para cualquier pgina web.Hiperenlace 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 y .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:Visita www.aulaclic.comHabra que
escribir:Visita www.aulaclic.comTipos de referenciasExisten
diferentes formas de expresar una referencia a una pgina a travs
del atributo href.Referencia absoluta: Conduce a una ubicacin
externa al sitio en el que se encuentra el documento. La ubicacin
es en Internet, en este caso hay que empezar la referencia por
http:// , el nombre del dominio y algunas veces el nombre de la
pgina. Si no se escribe el nombre de la pgina se cargar la pgina de
inicio asociada al dominio.Por ejemplo, "http://www.aulaclic.com"
tendr el mismo efecto que "http://www.aulaclic.com/index.htm"Para
insertar el enlace:Visita www.aulaclic.comHabra que escribir:Visita
www.aulaclic.comReferencia relativa al sitio:Conduce a un documento
situado dentro del mismo sitio que el documento actual. Un sitio
web es un conjunto de archivos y carpetas, relacionados entre s,
con un diseo similar o un objetivo comn, estando todos ellos dentro
de una misma carpeta, conocida como carpeta raz del sitio.Por
ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra
directamente dentro de la carpeta raz del sitio, para insertar el
enlace:Enlace a Tema 4: HiperenlacesHabra que escribir:Enlace a
Tema 4: HiperenlacesObserva como aparece el smbolo "/" delante del
nombre del documento. Esta barra inclinada indica la carpeta raz
del sitio. Si el documento t_4_1.htm se encontrara, por ejemplo,
dentro de una carpeta llamada tema4, y esta estuviera dentro de la
carpeta raz del sitio, habra que escribir:Enlace a Tema 4:
HiperenlacesReferencia relativa al documento:Conduce a un documento
situado dentro del mismo sitio que el documento actual, pero
partiendo del directorio en el que se encuentra el actual.Por
ejemplo, teniendo en cuenta que el documento t_4_1.htm se encuentra
dentro de la misma carpeta que el documento actual, para insertar
el enlace:Enlace a Tema 4: HiperenlacesHabra que escribir:Enlace a
Tema 4: HiperenlacesObserva que en este caso no aparece el smbolo
"/" delante del nombre del documento. Si el documento t_4_1.htm se
encontrara, por ejemplo, dentro de una carpeta llamada tema4, y
esta estuviera dentro de la misma carpeta que el documento actual,
habra que escribir:Enlace a Tema 4: HiperenlacesPunto de
fijacin:Conduce a un punto dentro de un documento, ya sea dentro
del actual o de otro diferente. Para ello el vnculo debe ser
"nombre_de_documento#nombre_de_punto".Por ejemplo, para insertar el
enlace:Punto de fijacion Tipos de enlacesHabra que escribir:Punto
de fijacion Tipos de enlacesTeniendo en cuenta que el documento se
llama t_4_1.htm y el punto de fijacin se llama tipos.Al final de
este tema vers cmo definir el punto de fijacin.Unidad
4.Hiperenlaces (II)Destino del enlaceEl 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._parent:Abre el documento vinculado en
la ventana del marco que contiene el vnculo o en el conjunto de
marcos padre._self:Es la opcin predeterminada. Abre el documento
vinculado en el mismo marco o ventana que el vnculo._top:Abre el
documento vinculado en la ventana completa del navegador.No te
preocupes si no te queda del todo claro para qu sirve cada una de
estas opciones de destino, ya que se volvern a ver en el tema de
Marcos. De momento slo te interesa retener la opcin _blank y
_self.Para insertar el enlace:Visita www.aulaclic.com en una
ventana nuevaHabra que escribir:Visita www.aulaclic.com en una
ventana nuevaEs 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).Formato
de los enlacesEn general, un texto que tiene un vnculo asociado
suele aparecer subrayado.Cuando el vnculo est definido sobre una
imagen, en el borde aparecen una serie de puntitos al pulsar sobre
ella. Cuando el vnculo est definido sobre una zona de una imagen
(un mapa), aparece el contorno de esa zona.Aqui tienes dos vnculos
similares de ejemplo:Como puedes ver, la segunda imagen que hace de
vnculo contiene un recuadro alrededor. Esto ocurre debido a que se
ha establecido un borde para la imagen, como veremos ms
adelante.Tanto si el vnculo se asigna a un texto como a una imagen,
el cursor cambia de forma al situarse encima del vnculo. Suele
adquirir la apariencia de una mano sealando.Normalmente los vnculos
de texto cambian de color cuando el enlace ha sido ya pulsado o
cuando el puntero del ratn se posiciona sobre l, estos cambios estn
predefinidos en cada navegador, pero nosotros podemos cambiar esos
colores.Los colores de los vnculos pueden especificarse a travs de
las propiedades de la pgina, en la etiqueta . 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:......www.aulaclic.com...Mientras no
se visite la pgina www.aulaclic.com, el enlace ser de color rojo
(#FF0000):www.aulaclic.comMientras la pgina www.aulaclic.com sea la
ltima visitada, el enlace ser de color fucsia
(#FF0099):www.aulaclic.comCuando se haya visitado la pgina
www.aulaclic.com, el enlace ser de color naranja
(#FF9900):www.aulaclic.comUnidad 4.Hiperenlaces (III)Puntos de
fijacin. AnclasCuando se tienen documentos extensos, divididos en
varios apartados, es preferible poder ir directamente al apartado
deseado, en lugar de ir al comienzo del documento.Para ello se
utilizan las anclas, o puntos de fijacin, muy tiles a la hora de
crear ndices.Un ancla necesita que se inserten las y , con el
atributo name, que puede tomar cualquier valor inventado por el
usuario, se recomienda no utilizar caracteres especiales.Por
ejemplo, para insertar un punto de fijacin delante del siguiente
texto:Texto con anclaHabra que escribir:Texto con anclaComo puedes
ver, no es necesario insertar nada entre las etiquetas y , y que
sin mirar el cdigo no hay nada que indique que delante del texto
haya un ancla.Teniendo en cuenta que el documento actual se llama
t_4_3.htm, y que el ancla anterior se llama miancla, podramos crear
un enlace que nos llevara directamente a la lnea de texto en la que
se encuentra el ancla. Por ejemplo:Enlace al anclaHabra que
escribir:Enlace al anclaSi pulsas sobre el enlace vers cmo se
vuelve a cargar el documento actual, pero en lugar de cargarse
desde el principio, la primera lnea de texto ser la lnea en la que
hemos insertado el ancla.Cuando el ancla se encuentra en el mismo
documento que el enlace, como ocurre en este caso, podemos
prescindir de poner el nombre de la pgina en el atributo href.En el
ejemplo anterior podramos haber escrito:Enlace al anclaOtros tipos
de enlacesExisten 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 aulaclicHabra que
escribir:e-mail para aulaclicDespus 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 direccin de correo. Podemos hacer que est
rellenado algn campo ms como es el asunto. En este caso habra que
escribir:e-mail para aulaclicVnculo a ficheros para descarga: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 Acrobat 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 aqu para descargarte el ficheroDe la
siguiente forma:haz clic aqu para descargarte el fichero En este
caso hemos utilizado una referencia relativa al documento ya que la
carta se encuentra en la misma carpeta que nuestra pgina.Vnculo
vaco:Al pulsar sobre un enlace vaco no se abre ninguna pgina ni
archivo, pero el formato es el mismo que el de cualquier otro
enlace. El vnculo debe ser el smbolo almohadilla "#".Por ejemplo,
para insertar el enlace vaco:vinculo vacio Habra que
escribir:vinculo vacio Este tipo de enlace resulta til para
trabajar con comportamientos javascript.Para practicar los
distintos aspectos explicados en el tema puedes realizar el
Ejercicio paso a paso Insertar un hiperenlace. Ejercicio paso a
paso. Insertar un hiperenlaceObjetivo. Practicar las operaciones
que hay que realizar para insertar un hiperenlace. 1 Si no tienes
abierto el Bloc de notas, brelo para realizar el ejercicio.2 Abre
el archivo inicio.htm, que debes tener en la carpeta
ejercicios_html/animales.Vamos a aadir un enlace a la pgina en
Internet de aulaClic.1 Escribe el siguiente cdigo delante de la
etiqueta :visita aulaClicCon este cdigo estars insertando un
hiperenlace a www.aulaclic.com, que ser abierto en una nueva
ventana (target="_blank"). En este caso hemos utilizado una
referencia absoluta.2 Haz clic sobre el men Archivo.3 Haz clic
sobre la opcin Guardar.4 Abre con tu navegador el documento
inicio.htm que acabas de guardar, y comprueba que si te posicionas
sobre el texto visita aulaClic el puntero del ratn se convierte en
una mano y si haces clic (y ests conectado a Internet) se abrir una
nueva ventana con la pgina de aulaClic.Vamos a cambiar ahora el
color de los enlaces.1 Si cerraste el archivo inicio.htm, abrelo
para seguir con el ejericio:2 Rectifica la etiqueta para que quede
as:Con este cdigo estars indicando que la pgina tiene el color de
fondo verde (#99CC99), y el color de los enlaces rojo (#CC0000).3
Haz clic sobre el men Archivo.4 Haz clic sobre la opcin Guardar.5
Abre con tu navegador el documento inicio.htm que acabas de
guardar, y comprueba que obtienes una pgina como la que aparece si
pulsas aqu. Fjate que ahora el texto del enlace aparece en rojo.
Ejercicios del Tema 4. Prueba evaluativa del Tema 4.Ejercicios
Unidad 4. Insertar hiperenlacesSi no tienes abierto el Bloc de
notas, brelo para realizar los ejercicios planteados a
continuacin.Ejercicio 1: Deportes.1 Abrir el documento menu.htm, de
la carpeta originales/deportes del curso.2 Guardar la pgina con el
mismo nombre en tu directorio de ejercicios Mis
documentos/ejercicios_html/deportes3 Rectificar la pgina para que
la palabra E-MAIL sea un enlace de correo electrnico a tu direccin
de correo.4 Guardar los cambios y comprobar el funcionamiento en un
navegador.Ejercicio 2: Deportes.1 Abrir el documento
instalaciones.htm, de la carpeta ejercicios_html/deportes.2 Aadir
al texto de cada actividad un enlace al prrafo correspondiente a
esa actividad para que el navegante pueda ver directamente la
descripcin de la actividad sin tener que moverse por toda la
pgina.3 Guardar los cambios y comprobar el funcionamiento en un
navegador.Ejercicio 3: Flores. 1 Abrir el documento menu.htm, de la
carpeta originales/flores del curso.2 Guardar la pgina con el mismo
nombre en tu directorio de ejercicios Mis
documentos/ejercicios_html/flores3 Asociar a la palabra Inicio un
enlace a la pgina inicio.htm, a la palabra Productos un enlace a la
pgina productos.htm y a la palabra Pedidos un enlace a la pgina
pedidos.htm, las pginas inicio.htm, productos.htm y pedidos.htm se
encontrarn en el mismo directorio que la pgina menu.htm. Las pginas
se abrirn en la misma ventana.4 Guardar los cambios y comprobar el
funcionamiento del enlace a la pgina Inicio.htm en un navegador
(las pginas productos.htm y pedidos.htm se incorporarn ms adelante)
.Si no tienes muy claro las operaciones a realizar en los
ejercicios anteriores, Aqu te lo explicamos.Ayuda Ejercicios Unidad
4. Insertar hiperenlacesEjercicio 1: Deportes Apartado 1 Hacer clic
sobre el men Archivo, y elegir la opcin Abrir.En la nueva ventana,
elegir Todos los archivos en Tipo:Seleccionar el documento
menu.htm, de la carpeta originales/deportes.Pulsar sobre el botn
Abrir.Apartado 2 Hacer clic sobre el men Archivo, y elegir la opcin
Guardar como.Buscar y abrir la carpeta Mis
documentos/ejercicios_html/deportes.Pulsar sobre el botn
Guardar.Apartado 3 Aadir delante de la palabra E-MAIL la etiqueta:
.Sustituye [email protected] por tu direccin de correo.
Escribe detrs de la palabra E-MAIL la etiqueta de cierre Apartado 4
Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el
documento menu.htm en un navegador, pulsar sobre la palabra E-MAIL,
y comprobar que se abre algn programa de envio de correo
electrnico, como puede ser Outlook Express con tu direccin como
destinatario del mensaje.Ejercicio 2: Deportes Apartado 2 Para que
el enlace vaya directamente a un lugar concreto de la pgina debemos
definir anclas delante de la descripcin de cada actividad, y aadir
el enlace a esa ancla en cada actividad de la lista. El cdigo
quedar de la siguiente forma:Pista ftbol sala y baloncestoSala
aerbicPistas de tenisSala de musculacinSaunaDuchas...Pista de ftbol
sala y baloncestoDisponemos de una pista de ftbol sala y una de
baloncesto, estas sedeben reservar con una semana con mnimo de
antelacin. Tambinofrecemos el servicio de alquiler de pelotas.Sala
aerbicLas sesiones de aerbic se realizan con monitores titulados
para msinformacin pregunta en recepcin por los horarios
disponibles.Pistas de tenis....Salas de musculacin.......Apartado 3
Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el
documento instalaciones.htm en un navegador, pulsar sobre la
palabra aerobic de la lista de actividades y la pgina se desplazar
automticamente al prrafo con la descripcin de la
actividad.Ejercicio 3: Flores Apartado 3 Encerrar la palabra Inicio
entre las etiquetas y de la siguiente forma: Inicio repetir lo
mismo con las palabras Productos y Pedidos:Productos Pedidos .En
este caso hemos empleado una direccin relativa al documento el
navegador buscar la pgina inicio.htm en el directorio donde se
encuentra menu.htm.No hemos empleado el atributo Tarjet ya que
queremos que se visualicen las pginas en la misma ventana (valor
por defecto).Apartado 4 Hacer clic sobre la opcin Guardar, del men
Archivo.Abrir el documento menu.htm en un navegador, pulsar sobre
la palabra Inicio y comprueba que ahora aparece la pgina Inicio.htm
en la misma ventana, para volver al men haz clic en el botn Atrs de
tu navegador.Prueba evaluativa de la unidad 4. HiperenlacesSolo una
respuesta es vlida por pregunta.Haz clic en la respuesta que
consideres correcta. Contesta todas las preguntas y haz clic en el
botn Resultados para ver la solucin.1. Un hiperenlace es lo mismo
que un hipervnculo, un vnculo, o un enlace. a) Verdaderob) Falso 2.
Los vnculos vacos no existen.a) Verdaderob) Falso 3. Es posible
abrir el documento vinculado en una ventana nueva del navegador. a)
Verdaderob) Falso 4. Un enlace a un punto de fijacin conduce a un
punto dentro de un documento. a) Verdaderob) Falso 5. La ruta de
acceso se especifica a travs del atributo href.a) Verdadero.b)
Falso. 6. El cursor cambia de forma al situarse encima del vnculo
en el navegador. a) Verdaderob) Falso 7. Cuando el vnculo est
definido sobre una imagena) Siempre aparece el borde azul alrededor
de ellab) sta adquiere un tono azuladoc) Aparecen una serie de
puntitos en el borde al pulsar sobre ella8. El destino del enlace
se especifica mediante el atributo... a) target.b) href.c) link.9.
El tipo enlace puede ser...A) A una pgina externaB) A una direccin
de correo electrnicoC) Cualquiera de las dos primeras opcionesD)
Ninguna de las opciones anteriores10. Es posible especificar el
color de...A) Los vnculosB) Los vnculos activosC) Los vnculos
visitadosD) Cualquiera de las opciones anterioresRESULTADOSUnidad
5.Imgenes (I)Vamos a ver cmo insertar imgenes, y cmo modificar
algunas de sus propiedades.Imagen 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 . Dicha etiqueta no
necesita etiqueta de cierre.El nombre de la imagen ha de
especificarse a travs del atributo src.Por ejemplo, para insertar
la siguiente imagen:Habra que escribir:Teniendo en cuenta que la
imagen se llama logo_animales.gif y que est dentro de la carpeta
imagenes, que se encuentra en el mismo directorio que el documento
actual (referencia relativa al documento).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 imgenes,
o una carpeta destinada a almacenar archivos de audio, etc.Existen
una serie de formatos de imagen ms recomendables que otros para ser
introducidos en una pgina web. Esta informacin puedes consultarla
aqu .Texto alternativo Cuando una imagen no puede ser visualizada
en el navegador, cosa que puede ocurrir al especificar mal el valor
del atributo src, aparece un recuadro blanco con una X roja en su
lugar, junto con el nombre de la imagen.Podemos hacer que en lugar
de mostrarse el nombre de la imagen aparezca el texto que nosotros
deseemos, gracias al atributo alt.Por ejemplo, imagina que deseamos
mostrar una imagen llamada gatito.gif, con el texto alternativo
Imagen gato, para ello insertamos el siguiente cdigo:Pero hemos
cometido un error, ya que dicha imagen no se encuentra en el mismo
directorio que el documento actual, sino que se encuentra dentro de
la carpeta imgenes. En lugar de la imagen se mostrar lo
siguiente:Si en lugar del cdigo anterior hubiramos insertado el
siguiente cdigo:La imagen habra mostrado correctamente:El texto
alternativo se muestra tambin al situar el puntero sobre la imagen.
Si sitas el puntero sobre la imagen durante unos segundos, vers
como aparece el texto Imagen gato.El texto alternativo es muy til a
la hora de disear pginas ms asequibles a los invidentes ya que los
programas lectores son capaces de leer el texto alternativo.
Formatos de imagenLas imgenes pueden ser de muchos formatos
diferentes: bmp, gif, jpg, etc. Pero no todos estos formatos son
adecuados para una web, debido a que pueden ocupar mucha memoria o
a que no son compatibles con algunos navegadores.Los formatos ms
utilizados son el GIF y el JPG, que a pesar de ser imgenes de menor
calidad que las imgenes BMP, son ms recomendables debido a que
ocupan menos memoria. Vamos a ver un poco ms sobre estos
formatos:Formato GIF:Utilizan un mximo de 256 colores, y son
recomendables para imgenes con grandes reas de un mismo color o de
tonos no continuos. Suelen utilizarse con gran frecuencia, ya que
permiten definir transparencias y animacin.Formato JPG:Las imgenes
son de mayor calidad que las GIF, al poder contener millones de
colores, pero el tamao de la imagen es mayor y tarda ms en
descargarse se utilizan ms para fotos.Puedes incluir imgenes en
otros formatos, que podrn ser visualizadas en algunos navegadores.
Este es el caso de las imgenes BMP y PNG.Puedes cambiar el formato
de las imgenes mediante la utilizacin de algn programa de
tratamiento de imgenes, como pueden ser Fireworks, Photoshop, Corel
Draw, etc. Por ejemplo el Fireworks de Macromedia tiene una opcin,
exportar a tipo gif que reduce considerablemente la ocupacin de la
imagen sin perder en calidad (siempre que la imagen se adecue al
formato).Dependiendo del programa utilizado existir una mayor o
menor cantidad de opciones a la hora de modificar las imgenes. Para
realizar modificaciones sencillas, como la de recortar las imgenes
y cambiar los colores, puedes utilizar incluso el programa Paint de
Windows.Unidad 5.Imgenes (II)Borde de una imagenEn 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.Por ejemplo, para
insertar la siguiente imagen con borde:Habra que escribir:Hay que
tener en cuenta que el borde de la imagen siempre ser de color
negro, a no ser que la imagen contenga un enlace, en cuyo caso el
color del borde ser el color establecido para los vnculos.Por
ejemplo, para insertar la siguiente imagen con borde y con un
enlace:Habra que escribir:Si se desea establecer un vnculo sobre
una imagen y no se desea que se muestre el borde (que por su color
indica que existe dicho vnculo), es necesario establecer
border="0".Tamao de una imagenCuando 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:Habra que escribir: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 Fireworks. Unidad
5.Imgenes (III)Alineacin de una imagenLa alineacin de las imgenes
se establece a travs del atributo align. Este atributo indica la
alineacin de las imgenes con respecto a la lnea de texto en la que
se encuentran.Los valores del atributo align pueden ser los
siguientes:ValorSignificadoEjemploabsbottominferior absolutaImagen
con textoabsmiddlemedio absolutaImagen con textobaselinelnea de
baseImagen con textobottominferiorImagen con
textoleftizquierdaImagen con textomiddlemedioImagen con
textorightderechaImagen con textotexttoptexto superiorImagen con
textotopsuperiorImagen con textoEl resultado de aplicar uno u otro
valor puede tener el mismo resultado, como ocurre con los valores
baseline y bottom, o con los valores texttop y top.Para insertar el
texto y la imagen siguientes:PerrosGatos Una web de animalesHabra
que escribir:PerrosGatosUna web de animalesEste tipo de alineacin
la recomendamos cuando es una imagen pequea que queremos fundir con
la lnea de texto sin que por ello cree una separacin demasiado
grande entre la lnea donde se encuentra la imagen y las lneas
superior y inferior. Por ejemplo para la imagen de un icono de
cualquier programa, de un botn, etc...Si la imagen es muy grande,
conviene dejarla aislada del texto (no ajustarla a la derecha ni a
la izquierda sino colocarla en un bloque aparte).Para practicar los
distintos aspectos explicados en el tema puedes realizar el
Ejercicio paso a paso Insertar una imagen. Ejercicio pas a paso.
Insertar una imagenObjetivo. Practicar las operaciones que hay que
realizar para insertar una imagen. Si no tienes abierto el Bloc de
notas, brelo para realizar el ejercicio. Ejercicio 1. 1 Abre el
archivo inicio.htm, que se encuentra en la carpeta
ejercicios_html/animales.2 Sustituye la lnea visita aulaclic
Que est incluida dentro de un hiperenlace, por la lneaCon este
cdigo estars asociando el enlace con la imagen aulaclic.jpg que se
encuentra en la directorio imgenes dentro de la carpeta animales
(la carpeta donde se encuentra el archivo inicio.htm.La imagen
medir 90 pxeles de ancho, y 32 pxeles de alto (atributos width y
height).Tendr un borde de 4 pxeles (atributo border), que aparecer
de color rojo, al ser este color el definido para los enlaces de
esta pgina.En el caso de que la imagen no pueda ser visualizada, o
se situe el puntero sobre ella, se mostrar el texto visita aulaclic
(atributo alt).3 Haz clic sobre la opcin Guardar del men Archivo.4
Abre el documento inicio.htm, que acabas de guardar, en un
navegador, y comprueba que obtienes una pgina como la que aparece
aqu abajo.Ejercicio 2. 1 Abre el documento menu.htm, de la carpeta
originales/animales del curso.2 Guarda la pgina con el mismo nombre
en tu directorio de ejercicios Mis
documentos/ejercicios_html/animales2 Aade delante de la primera
etiqueta ... la siguiente lnea: El prrafo se aade para centrar la
imagen.3 Haz clic sobre la opcin Guardar del men Archivo.4 Abre el
documento menu.htm, que acabas de guardar, en un navegador, y
comprueba que obtienes una pgina como la que aparece si
aqu.Ejercicio 3. 1 Abre el archivo gatos.htm, que se encuentra en
la carpeta animales.2 Aade detrs de la etiqueta la lnea:3 Haz clic
sobre la opcin Guardar del men Archivo.4 Abre el documento
menu.htm, que acabas de guardar, en un navegador, y comprueba que
obtienes una pgina como la que aparece si aqu.No te preocupes por
la disposicin de la imagen, en el tema de tablas lo arreglaremos.
Ejercicios del Tema 5. Prueba evaluativa del Tema 5.Ejercicios
Unidad 5. Insertar imgenesSi no tienes abierto el Bloc de notas,
brelo para realizar los ejercicios planteados a
continuacin.Ejercicio 1: Deportes. 1 Abrir el documento menu.htm,
de la carpeta ejercicios_html/deportes.2 Sustituir la palabra
DEPORTES por la imagen logodeportes.gif que se encuentra en la
carpeta imagenes de la carpeta ejercicios_html/deportes, la imagen
deber tener deportes como texto alternativo.3 Sustituir la palabra
E-MAIL por la imagen email.gif, sin texto alternativo.4 Guardar los
cambios y comprobar el funcionamiento en un navegador.Ejercicio 2:
Deportes. 1 Abrir el documento instalaciones.htm, de la carpeta
ejercicios_html/deportes.2 Sustituir la palabra DEPORTES que
aparece al final de la pgina por la misma imagen logodeportes.gif
que en el ejercicio anterior, la imagen deber tener deportes como
texto alternativo.3 Guardar los cambios y comprobar el
funcionamiento en un navegador.Ejercicio 3: Flores. 1 Abrir el
documento menu.htm, de la carpeta flores.2 Sustituir la palabra
FLORES por la imagen logo_flores.gif que se encuentra en la carpeta
imagenes de la carpeta flores, la imagen deber tener flores como
texto alternativo y el texto que hay a su derecha debe quedar a
media altura de la imagen.3 Guardar los cambios y comprobar el
funcionamiento en un navegador.Si no tienes muy claro las
operaciones a realizar en los ejercicios anteriores, Aqu te lo
explicamos. Ayuda Ejercicios Unidad 5. Insertar imgenesEjercicio 1:
Deportes Apartado 2 Sustituir la palabra DEPORTES por la referencia
a la imagen:.Con el atributo src indicamos qu imagen se tiene que
visualizar y dnde se encuentra (en el directorio imgenes), con el
atributo alt indicamos el texto alternativo.Apartado 3 Sustituir la
palabra E-MAIL por la referencia a la imagen:.Con el atributo
border indicamos que la imagen no tiene borde para que no salga el
borde ya que la imagen est dentro de un hiperenlace.Apartado 4
Hacer clic sobre la opcin Guardar, del men Archivo.Abrir el
documento menu.htm en un navegador, y situar el cursor sobre la
imagen con el logotipo para ver si aparece el texto alternativo
deportes, situar el cursor sobre la imagen E-MAil y comprobar que
no aparece texto alternativo.Ejercicio 2: Deportes Apartado 2
Sustituir la palabra DEPORTES por la referencia a la imagen:.Con el
atributo src indicamos qu imagen se tiene que visualizar y dnde se
encuentra (en el directorio imagenes), con el atributo alt
indicamos el texto alternativo.Apartado 3 Hacer clic sobre la opcin
Guardar, del men Archivo.Abrir el documento instalaciones.htm en un
navegador, y situar el cursor sobre la imagen con el logotipo para
ver si aparece el texto alternativo deportes, situar el cursor
sobre la imagen E-MAil y comprobar que no aparece texto
alternativo.Ejercicio 3: Flores Apartado 2 Sustituir la palabra
FLORES por la referencia a la imagen:.Con el atributo alt indicamos
el texto alternativo y con el atributo align y el valor absmiddle
indicamos que la imagen tendr la alineacin media absoluta por lo
que el texto que se encuentra a su derecha quedar a media altura de
la imagenApartado 3 Hacer clic sobre la opcin Guardar, del men
Archivo.Abrir el documento menu.htm en un navegador, y situar el
cursor sobre la imagen con el logotipo para ver si aparece el texto
flores.Prueba evaluativa de la unidad 5. ImgenesSolo una respuesta
es vlida por pregunta.Haz clic en la respuesta que consideres
correcta. Contesta todas las preguntas y haz clic en el botn
Resultados para ver la solucin.1. Para insertar una imagen es
necesario insertar la etiqueta .a) Verdaderob) Falso 2. Existen una
serie de formatos de imagen ms recomendables que otros para ser
introducidos en una pgina web.a) Verdaderob) Falso 3. Cuando una
imagen no puede ser visualizada en el navegador aparece un recuadro
blanco con una X roja en su lugar. a) Verdaderob) Falso 4. El texto
alternativo no aparece al situar el puntero sobre la imagen. a)
Verdaderob) Falso 5. Es preferible modificar el tamao de las
imgenes desde un editor de imgenes.a) Verdadero.b) Falso. 6. La
alineacin de las imgenes se establece a travs del atributo align.
a) Verdaderob) Falso 7. El atributo width...a) Va fuera de la
etiqueta b) Sirve para especificar la altura de la imagenc) Sirve
para especificar la anchura de la imagen8. Si escribiramos
align="middle"... a) La imagen aparecera centrada en la ventanab)
El medio de la imagen aparecera a la misma altura que la lnea de
texto que la acompaarac) La imagen sera ms pequea9. Las
imgenes...A) Pueden redimensionarse a travs de los atributos width
y heightB) Siempre tienen un borde alrededorC) Cualquiera de las
dos primeras opcionesD) Ninguna de las opciones anteriores10. El
borde de la imagen ...A) Suele ser de color negroB) Adquiere el
color de los vnculos cuando contiene algunoC) Puede desaparecer si
escribimos border="0"D) Cualquiera de las opciones
anterioresRESULTADOSUnidad 6.Tablas (I)En este tema vamos a ver cmo
trabajar con tablas. Podremos insertar tablas, filas y columnas, y
modificar sus propiedades.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 Las tablas estn formadas por
celdas, que son los recuadros que se obtienen como resultado de la
interseccin entre una fila y una columna.imagen y textoCOLUMNATexto
dentro de una celdaFILACELDAPara crear una tabla hay que insertar
las etiquetas y . Entre dichas etiquetas habr que especificar las
filas y columnas que formarn la tabla.Fila Es necesario insertar
las etiquetas y por cada una de las filas de la tabla. Estas
etiquetas debern insertarse entre las etiqetas y .Por ejemplo, para
crear una tabla con cinco filas escribiramos:...............Columna
o celda 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 y 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 y .Entre las etiquetas
y se podr especificar el contenido de cada una de las celdas. Por
ejemplo, para insertar la siguiente tabla: SabadoDomingoCurso
HTMLCurso DreamweaverCurso FrontpageCurso FlashHabra que
escribir:SabadoDomingoCurso HTMLCurso DreamweaverCurso
FrontpageCurso FlashUnidad 6.Tablas (II)Formato de la tablaEs
posible modificar los siguientes atributos de una
tabla:AtributoSignificadoPosibles valoreswidthancho de la tablaun
nmero, acompaado de % cuando se desee que sea en
porcentajeheightaltura de la tablaun nmero, acompaado de % cuando
se desee que sea en porcentajecellpaddingespacio entre el contenido
de las celdas y el bordeun nmerocellspacingespacio entre celdasun
nmerobordergrosor del bordeun nmeroalignalineacin de la tabla
dentro de la pginaleft (izquierda)right (derecha)center
(centro)bgcolorcolor de fondonmero hexadecimalbackgroundimagen de
fondonmero hexadecimalbordercolorcolor del bordenmero
hexadecimalPor ejemplo, para modificar la tabla de la pgina
anterior para que quedase como la siguiente:SabadoDomingoCurso
HTMLCurso DreamweaverCurso FrontpageCurso FlashHabra que
escribir:...Con esto indicamos que el ancho (width) de la tabla
debe ocupar el 50% del ancho de la ventana (lo puedes comprobar
cambiando el ancho de la ventana de tu navegador y vers que el
ancho de la tabla vara para ocupar siempre la mitad de la ventana),
que el borde (border) tiene un grosor de dos pxeles (es ms ancho
que las separaciones internas de la tabla que tienen grosor 1), que
la tabla est alineada al centro (center) de la ventana, que no hay
espacio entre las celdas (cellspacing="0"), que el borde la tabla
es negro (#000000) y el fondo naranja (#FFCC99).Formato de las
celdasEs posible modificar los siguientes atributos de una
celda:AtributoSignificadoPosibles valoreswidthancho de la tablaun
nmero, acompaado de % cuando se desee que sea en
porcentajeheightaltura de la tablaun nmero, acompaado de % cuando
se desee que sea en porcentajealignalineacin horizontal del
contenido de la celdaleft (izquierda)right (derecha)center
(centro)valignalineacin vertical del contenido de la celdabaseline
(lnea de base)bottom (inferior)middle (medio)top
(superior)bgcolorcolor de fondonmero hexadecimalbackgroundimagen de
fondonmero hexadecimalbordercolorcolor del bordenmero
hexadecimalTambin es posible modificar estos atributos de toda una
fila, especificndolos en la etiqueta , en lugar de en la etiqueta
.Hay que tener en cuenta que los atributos tienen ms prioridad
cuando son establecidos para una celda que cuando son establecidos
para una fila completa. Al mismo tiempo, tienen ms prioridad los
atributos establecidos para una fila que los establecidos para toda
la tabla. Por ejemplo, si escribiramos el siguiente
cdigo:SabadoDomingoCurso HTMLCurso DreamweaverCurso FrontpageCurso
Flash Obtendramos la siguiente tabla:SabadoDomingoCurso HTMLCurso
DreamweaverCurso FrontpageCurso FlashSe ha establecido el color
naranja como fondo de toda la tabla, pero con la lnea de cdigo se
ha establecido el color azul como color de fondo de la primera
fila, por lo que dicha fila se mostrar de color azul, y no de color
naranja. Al mismo tiempo, se ha cambiado el color de la segunda
celda de la primera fila por el color verde, a travs de la lnea
Domingo por lo que esta fila en vez de ser azul ser verde, los
atributos de celda tienen prioridad sobre los de la fila.Existe
otro atributo que puede establecerse sobre las celdas. Se trata del
atributo nowrap, que hace que el contenido de la celda no se ajuste
de manera automtica al ancho de la columna sino que el ancho de la
celda se adapta al ancho del contenido para que el contenido ocupe
u