practicas html 2015

Los 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 del0al9, y de laAa laF.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



#660000#660033#660066#660099#6600CC#6600FF

#660033#663333#663366#663399#6633CC#6633FF

#666600#666633#666666#666699#6666CC#6666FF

#669900#669933#669966#669999#6699CC#6699FF



#990000#990033#990066#990099#9900CC#9900FF

#993300#993333#993366#993399#9933CC#9933FF

#996600#996633#996666#996699#9966CC#9966FF

#999900#999933#999966#999999#9999CC#9999FF



#CC0000#CC0033#CC0066#CC0099#CC00CC#CC00FF




#CCCC00#CCCC33#CCCC66#CCCC99#CCCCCC#CCCCFF

#CCFF00#CCFF33#CCFF66#CCFF99#CCFFCC#CCFFFF

#FF0000#FF0033#FF0066#FF0099#FF00CC#FF00FF




#FFCC00#FFCC33#FFCC66#FFCC99#FFCCCC#FFCCFF

#FFFF00#FFFF33#FFFF66#FFFF99#FFFFCC#FFFFFF

Existe 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

#FFFF00yellow

Prrafos ...

El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetasy.No es necesario insertar la etiqueta
para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetasyhacen que se cambie de lnea automticamente.Tambin es posible cambiar la alineacin del texto de cada prrafo. Para ello se modifica el valor del atributoalign, cuyos valores pueden serleft(izquierda),right(derecha),center(centrado) ojustify(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&aacutegina.Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.Otra forma de cambiar la alineacin del texto es mediante las etiquetasy, para las que tambin existe el atributoalign. 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&aacutegina.Aqu&iacute encontrar&eacuteis cursos de formaci&oacuten muy interesantes.Tambin es posible insertar el texto entre las etiquetasypara que aparezca centrado.Por ejemplo, para insertar el texto:Bienvenidos a mi pgina.Habra que escribir:Bienvenidos a mi p&aacutegina.Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso dey), son las etiquetasyvolveremos a hablar de estas etiquetas cuando veamos las hojas de estilo.

Encabezados ...

Existen una serie de encabezados que suelen utilizarse para establecerttulosdentro 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:EtiquetaEjemplo

Ttulo 1: HTML

Ttulo 2: HTML

Ttulo 3: HTML

Ttulo 4: HTML

Ttulo 5: HTML

Ttulo 6: HTML

Para todas estas etiquetas es posible especificar el valor del atributoalign.Por ejemplo, para insertar el texto:El lenguaje HTMLApartado 1: Las etiquetasHabra que escribir:El lenguaje HTMLApartado 1: Las etiquetas

Marquesinas

Lasmarquesinasson 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 etiquetasy.La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen.A travs del atributobehaviorpuede modificarse el tipo de movimiento. Puede tomar los valoresalternate(de lado a lado de la ventana, como si rebotara en los extremos),scroll(de un lado a otro, continuamente) oslide(de un lado a otro, pero una sola vez).A travs del atributodirectionpuede modificarse la direccin en la que se mover el texto. Puede tomar los valoresdown(de arriba a abajo),up(de abajo a arriba),left(de derecha a izquierda) oleft(de izquierda a derecha).Tambin es posible establecer un color de fondo, a travs del atributobgcolor.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 etiquetasy, no slamente texto.

Practicarlas operaciones que hay que realizar paracrear una pgina bsica.

Si es la primera vez que realizas el ejercicio, haz clicaqupara descargarte la carpeta de ejercicios, debers extraer los archivos en la carpetaMis documentosde tu disco duro, ah se crear una carpetaejercicios_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 carpetaanimales, 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 carpetadeportes, 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 carpetaflores, 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 carpetaimagenesy una carpetavariosdonde iremos guardando las imgenes y ficheros varios respectivamente.Una vez tenemos nuestros sitios organizados, podemos empezar a practicar.

1Si no tienes abierto elBloc de notas, brelo para realizar el primer ejercicio.2Escribe el cdigo que aparece a continuacin:

Inicio

Con este cdigo estars creando un documento con el ttulo "Inicio", y con el color de fondo verde (#99CC99).3Haz clic sobre el menArchivo.4Haz clic sobre la opcinGuardar como. Se abrir el cuadro de dilogo Guardar como.5En el recuadroTipo:eligeTodos los archivos.6Guarda el documento con el nombreinicio.htm, dentro de la carpetaMis documentos/ejercicios_html/animalesde tu disco duro.7Abre el documento que acabas de crear en un navegador, y comprueba que obtienes una pgina como la que aparece sipulsas aqu. Fjate en el color de fondo de la pgina y en la barra de ttulo.

Estructura de una pginaSi no tienes abierto el Bloc de notas, brelo para realizar los ejercicios planteados a continuacin.

Ejercicio 1: Deportes.

1Abrir el documentoquienes.htm, de la carpetaoriginales/deportesdel curso.2Guardar la pgina con el mismo nombre en tu directorio de ejerciciosMis documentos/ejercicios_html/deportes3Establecer#0099CCcomo color de fondo y40como tamao de los mrgenes.4Guardar 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.

1Copiar la imagenfondo.gifque encontrars en la carpetaoriginales/flores/imagenesa tu carpetaMis documentos/ejercicios_html/flores/imagenes2Copiar el documentoinicio.htm, de la carpetaoriginales/floresa tu carpetaMis documentos/ejercicios_html/flores.3Abrir el documentoMis documentos/ejercicios_html/flores/inicio.htmcon el Bloc de notas.4Establecer como imagen de fondo la imagenfondo.gifde la carpetaejercicios_html/flores/imagenes.5Guardar los cambios y comprobar el funcionamiento en tu navegador.

Si no tienes muy claro las operaciones a realizar en los ejercicios anteriores,Aqute lo explicamos.

Ejercicio 1: Deportes

Apartado 1Hacer clic sobre el menArchivo, y elegir la opcinAbrir.En la nueva ventana, elegirTodos los archivosenTipo:.Seleccionar el documentoquienes.htm, de la carpetadeportes.Pulsar sobre el botnAbrir.Apartado 2Hacer clic sobre el menArchivo, y elegir la opcinGuardar como.En la nueva ventana, elegir la carpetaejercicios_html/deportes.Dejar el mismo nombre de documentoquienes.htm.Pulsar sobre el botnGuardar.Apartado 3Buscar la etiqueta.Sustituirla por.Apartado 4Hacer clic sobre la opcinGuardar, del menArchivo.Abrir el documentoquienes.htmen un navegador y comprobar que el fondo de la pgina es de color azul.

Ejercicio 2: Flores

Apartado 3Hacer clic sobre el menArchivo, y elegir la opcinAbrir.En la nueva ventana, elegirTodos los archivosenTipo:.Seleccionar el documentoinicio.htm, de la carpetaejercicios_html/flores.Pulsar sobre el botnAbrir.Apartado 4Buscar la lnea en la que aparezcade cierre de la etiquetabody.Apartado 5Hacer clic sobre la opcinGuardar, del menArchivo.Abrir el documentoinicio.htmen un navegador, y comprobar el fondo de la pgina es de color rosa, con flores.

Modificar las propiedades del textoPracticarlas operaciones que hay que realizar parainsertar texto especificando sus propiedades.

Ejercicio 1.

1Si no tienes abierto elBloc de notas, brelo para realizar el ejercicio.2Abre el archivoinicio.htm, que creaste en el tema anterior y que se encuentra en la carpetaejercicios_html/animales.3Inserta 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 tamao1para el texto del documento.Si guardas ahora los cambios y visualizas la pgina, no vers ningn cambio ya que la pgina no tiene texto.4Detrs de la etiquetainserta una lnea en blanco, y escribe el siguiente texto:Inicio5Guarda 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.6Rectifica la etiqueta

practicas html 2015

Documents