Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing.

Stephanie Miranda ciclo 12014

El texto Caracteres especiales y espacios en blanco Los 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 &lt; > Se representa con &gt;

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:

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 &nbsp;.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
Por ejemplo, para insertar el texto: Bienvenidos, esta es mi 1 pgina! Habra que escribir: &iexcl;Bienvenidos, esta es mi&nbsp;&nbsp;&nbsp;1&ordf;&nbsp;&nbsp;&nbsp;p&aacute;gina! Comentarios En 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 <!-- y //-->. 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: <!-A continuacin aparecer una &iexcl;Bienvenidos, esta es mi 1&ordf; p&aacute;gina! Saltos de lnea <br> 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 <br> donde se desee que se produzca el salto. La etiqueta <br> no precisa ninguna etiqueta de cierre. No hay que insertar la etiqueta </br> despus de ella, ya que dicha etiqueta no existe. Por ejemplo, para insertar el texto: Queridos tengo el placer de comunicarles que hay una nueva seccin. Habra que escribir: Queridos usuarios,<br>tengo el placer de comunicarles que hay una nueva secci&oacuten. usuarios, lnea de texto//-->

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
Texto preformateado <pre> Una forma de asegurarnos de que el texto aparezca en el navegador tal cual ha sido insertado dentro del cdigo, es utilizando las etiquetas <pre> y </pre>. 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 <br>. Por ejemplo, para insertar el texto: Hola, BIENVENIDOS esta ES MI PGINA WEB y esto un texto preformateado Habra que escribir: <pre>Hola, BIENVENIDOS esta ES MI y esto un texto preformateado</pre>

PGINA

WEB

El inconveniente de esta etiqueta es que entre las etiquetas <pre> y </pre> no se pueden incluir las etiquetas <img> (para incluir imgenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup. Separadores <hr> 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 <hr>. Dicha etiqueta no precisa ninguna etiqueta de cierre. Es posible especificar algunos atributos de la regla horizontal:

Por ejemplo, para insertar el texto y la regla horizontal siguientes:

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014

Habra que escribir:

Sangrado de texto <blockquote> 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 <blockquote> y </blockquote>. 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 <blockquote> obliga a que el texto aparezca en una nueva lnea. Insertando el texto entre varias etiquetas <blockquote> y </blockquote> se consigue que los mrgenes sean mayores. Por ejemplo, para insertar el texto: Queridos usuarios, tengo el placer de comunicarles que hay una nueva seccin. Habra que escribir: Queridos <blockquote> <blockquote> tengo el placer </blockquote> </blockquote> Formatear el texto <font> Las propiedades del texto pueden modificarse a travs de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: usuarios,

de

comunicarles

que

hay

una

nueva

secci&oacuten.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014

Por ejemplo, para insertar el texto: Bienvenidos a mi sitio web Habra que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a mi sitio web</font> Tambin es posible definir una fuente para todo el documento. Para ello, hay que insertar la etiqueta <basefont> despus de la etiqueta <body>. La etiqueta <basefont> no necesita una etiqueta de cierre, y permite modificar los mismos atributos del texto que la etiqueta <font>. Por ejemplo: <body> <basefont ...

color="#006699"

size="4"

face="Arial">

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 <basefont> o <font>, el navegador encuentra otra etiqueta <font>, la que prevalece es siempre la ltima que se encuentra. Resaltado del texto <b> Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto. A continuacin se muestran algunas etiquetas asociadas al tipo de letra: Existen una serie de etiquetas que permiten aplicar diferentes estilos al texto que se encuentra entre ellas, y generalmente se utilizan para resaltarlo. Estos estilos pueden agruparse segn vayan asociados al tipo de letra o a la informacin que represente el texto. No hay que olvidar que todas estas etiquetas necesitan una etiqueta de cierre, y que pueden aplicarse varias etiquetas al mismo texto.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
A continuacin se muestran algunas etiquetas asociadas al tipo de letra:

A continuacin se muestran algunas etiquetas asociadas al tipo de informacin:

Las 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 <b> y <strong> es el mismo. Incluso a veces algunos estilos asociados al tipo de informacin pueden representarse de forma distinta segn el navegador.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
Por ejemplo, para insertar el texto: Bienvenidos a mi sitio web Habra que escribir: <font color="#993366" size="4" face="Comic Sans MS, Arial, MS Sans Serif">Bienvenidos a <b><u><tt>mi sitio web</tt></u></b></font> Prrafos <p> El texto de una pgina puede agruparse en prrafos. Para ello, el texto de cada uno de los prrafos debe insertarse entre las etiquetas <p> y </p>. No es necesario insertar la etiqueta <br> para que un nuevo prrafo aparezca debajo del anterior, ya que las etiquetas <p> y </p> 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 encontrars cursos de formacin muy interesantes. Habra que escribir: <div align="center">Bienvenidos a mi p&aacutegina.</div> <div>Aqu&iacute encontrar&aacutes cursos de formaci&oacuten muy interesantes.</div> Otro par de etiquetas que permiten agrupar bloques de texto, pero que no implican el cambio de lnea (como en el caso de <p> y <div>), son las etiquetas <span> y </span> volveremos a hablar de estas etiquetas cuando veamos las hojas de estilo. Encabezados <h1> 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:

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014

Para todas estas etiquetas es posible especificar el valor del atributo align. Por ejemplo, para insertar el texto: El lenguaje HTML Apartado 1: Las etiquetas Habra que escribir: <H2 align="center">El lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</H4> Marquesinas <marquee> Las marquesinas son lneas de texto que pueden desplazarse de un lado a otro de la ventana en forma de lnea. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>. La marquesina, por defecto, se desplaza de derecha a izquierda indefinidamente, pero si lo deseas puedes hacer que estas propiedades varen.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
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:

NOTA; una marquesina es un texto que se mueve, por obvias razones no se puede apreciar en un documento. Habra que escribir: <marquee <b><font </marquee> bgcolor="#006699" behavior="alternate" direction="right"> color="#FFFFCC" size="5">Esto es una marquesina </font></b>

Tambin es posible insertar imgenes, tablas y otros elementos entre las etiquetas <marquee> y </marquee>, no slamente texto. Elemento de lista <li> Cada uno de los elementos de una lista ha de insertarse entre las etiquetas <li> y </li>. Por ejemplo, para insertar en una lista los siguientes elementos: Perro Gato Periquito

Habra que escribir: ... <li>Perro</li> <li>Gato</li> <li>Periquito</li> ... 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.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
Lista desordenada <ul> Para que una lista sea desordenada, sus elementos debern encontrarse entre las etiquetas <ul> y </ul>. 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: o o o Perro Gato Periquito

Habra que escribir: <ul type="circle"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ul> Lista ordenada <ol> Para que una lista sea ordenada, sus elementos debern encontrarse entre las etiquetas <ol> y </ol>. 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 siquiente lista: i. ii. iii. Perro Gato Periquito

Habra que escribir: <ol type="i"> <li>Perro</li> <li>Gato</li> <li>Periquito</li> </ol> Anidar listas Es posible anidar listas dentro de otras. Estas listas pueden ser tanto desordenadas como ordenadas. Por ejemplo, para insertar la siguiente lista:

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
1. Lunes Ingles Frances 2. Martes 1. Ingles A. Correccion de ejercicios B. Proponer ejercicios Habra que escribir: <ol> <li>Lunes <ul type="square"> <li>Ingles</li> <li>Frances</li> </ul> </li> <li>Martes <ol> <li>Ingles</li> <ol type="A"> <li>Correccion de ejercicios</li> <li>Proponer ejercicios </li> </ol> </li> </ol> </li> </ol> Empezamos por la lista ordenada (la ms externa) <ol>, esta lista tiene dos elementos <li>Lunes y <li>Martes. El elemento Lunes contiene una lista desordenada con tipo cuadrado <ul type="square"> que tiene dos elementos <li>Ingles</li> y <li>Frances</li>. El elemento Martes contiene una lista ordenada de un slo elemento <li>Ingles</li> elemento que contiene a su vez una lista desordenada de tipo letras maysculas <ol type="A"> con los dos elementos <li>Correccion de ejercicios</li> y <li>Proponer ejercicios </li> Ejercicio 1 1. Abre el archivo inicio.htm, que creaste en la clase anterior y que se encuentra en la carpeta ejercicios_html/animales. 2. Inserta una lnea en blanco debajo de la etiqueta <body>, y escribe el siguiente cdigo en ella: <basefont color="red" size="1 "> 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. Detrs de la etiqueta <basefont> inserta una lnea en blanco, y escribe el siguiente texto: Inicio 3. Guarda el archivo y visualzalo en tu navegador, el texto debe aparecer en rojo y pequeo.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
Dejaremos la pgina un poco ms discreta y cambiaremos el color del texto a verde oscuro (#003333) y subiremos el tamao de las letras. Rectifica la etiqueta <basefont para que quede as: <basefont color="#003333" size="4"> Con este cdigo estars estableciendo el color verde oscuro (#003333) y tamao 4 para el texto del documento. Guarda el archivo y visualzalo en tu navegador, observa los cambios. Encierra el texto Inicio entre etiquetas <H1> de la siguiente forma: <h1>Inicio</h1> Con este cdigo estars conviertiendo el texto en un encabezado de primer nivel. Guarda el archivo y visualzalo en tu navegador, observa los cambios, el texto aparece destacado y ms grande. Inserta una lnea en blanco debajo del cdigo anterior, y escribe la etiqueta <hr>. Con esta etiqueta estars insertando una regla horizontal. Guarda el archivo y visualzalo en tu navegador, observa la regla Inserta una lnea en blanco debajo de la etiqueta anterior, y escribe el siguiente cdigo en ella:

4.

5. 6.

7. 8. 9. 10.

<blockquote> <blockquote> <p align="left"> <em> Somos una asociaci&oacute;n de veterinarios, estudiantes de veterinaria, o simplemente amantes de los animales. <br> Desde esta p&aacute;gina web intentaremos resolver tus dudas acerca de c&oacute;mo cuidar a tus mascotas. </em> </p> </blockquote> </blockquote> Con este cdigo estars insertando un prrafo (<p>) dividido en dos lneas (<br>). Este prrafo estar alineado a la izquierda (align="left"), aparecer en cursiva (<em>) y tendr doble sangrado (<blockquote>). 13 Guarda el archivo y visualzalo en tu navegador. Ejercicio 2. Crea un documento llamado gatos.htm, en la siguiente ruta originales/animales (crea las carpetas necesaria) Guarda la pgina con el mismo documentos/ejercicios_html/animales nombre en tu directorio de ejercicios Mis

Vamos a modificar la pgina para que tenga el siguiente aspecto:

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014

1. Empezamos por darle a la palabra Gatos un estilo de encabezado 1: <h1>Gatos</h1> Si quieres puedes ir observando los cambios segn los vayas introduciendo, guardando sin cerrar el notepad++ 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 <hr>. 3. Aadimos una lnea en blanco con <br> 4. La pregunta queda sangrada con respecto al resto del texto, la colocamos dentro de una etiqueta <blockquote> y adems le asignamos un estilo de encabezado 3:

<blockquote> <h3>&iquest;COMO </blockquote>

PREVENIR

LOS

PROBLEMAS

DENTALES?</h3>

5. Slo nos queda definir la lista intercalando las siguientes etiquetas: <ul> <li>Alimentar al gato con comida seca de buena calidad o darle algo duro para que lo mastique</li> <ul> <li>Preferiblemente que coma pienso</li> </ul> <li>Cepillarle los dientes una vez a la semana</li> <li>Que el veterinario examine la boca del gato por lo menos cada seis meses</li> </ul> 6. Guarda el archivo y visualzalo en tu navegador.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014

CONTROL DE GUIA

INDIQUE SI SON FALSAS O VERDADERAS LAS SIGUIENTES ASEVERACIONES.

1. Existen algunos caracteres que no se visualizan correctamente en algunos navegadores. 2. Los caracteres < y > son dos caracteres especiales que indican inicio y fin de etiqueta. 3. Los comentarios se insertan entre <!-- y //-->. 4. Si se escriben varios espacios en blanco seguidos slamente se mostrar uno en el navegador. 5. La etiqueta <b> hace que el texto se muestre en cursiva. 6. El texto &nbsp; equivale a un espacio en blanco.

ELIJA LA OPCIN CORRECTA DE LAS SIGUIENTES PROPUESTAS.

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 <center> y </center>. 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 <p> y <div>. b) Podemos utilizar la etiqueta <span>. 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.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
Deportes. 1 Crea un documento llamado quienes, en la ruta ejercicios_html/deportes.(crea las carpetas que sean necesarias) 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. Flores. 1 Crea un documento llamado inicio.htm, en la ruta ejercicio_html/flores. (crea las carpetas que sean necesarias) 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.

Universidad Andrs Bello Gua 2 Sistemas Utilitarios Ing. Stephanie Miranda ciclo 12014
3 Guardar los cambios y comprobar el funcionamiento en un navegador. NOTA: el fondo puede ser cualquiera, no necesariamente el que aparece en el ejercicio.