Diseo Grafico Centro de Formacin para el Trabajo Samuel Robinson

Etiquetas Bsicas:
Como darles valores a atributos de etiquetas?
<etiqueta atributo = valor>
Definir tamao de letra de un Encabezado:
<Hn>Esto es un Texto</Hn> donde n puede tomar los valores desde 1 hasta 6
Ejemplo 1: <H1>Texto Ejemplo con tamao 1</H1>
Ejemplo 2: <H3>Texto Ejemplo con tamao 3</H3>
Insertar barras con diferentes tamaos: <HR SIZE=n> donde n puede tomar valores desde 1 hasta 10 de acuerdo al explorador.
Ejemplo 3: <HR SIZE=5>

Formatos de Parrafo: Se hace con la etiqueta <P>..</P>. Esta etiqueta tiene atributos tales como:
Atributos Valor Descripcin Soportado por:
align left Desaprobado
Alnea el contenido de la etiqueta horizontalmente.

center
right
justify

Los ms estndar son: Soportado por todos los navegadores.
Atributos Valor Descripcin
class nombre de la clase Asigna un nombre de clase.
El atributo class acta:
Como selector para las hojas de estilo(CSS), cuando se asigna informacin de estilo a un conjunto
de elementos.
Para procesos generales por parte del usuario.
id nombre Asigna un nombre a un elemento.
El atributo id acta:
Como selector para las hojas de estilo(CSS).
Como vnculo destino para vnculos de hipertexto.
Como medio de hacer referencia a un elemento en particular desde un script.
Como nombre de un elemento object declarado.
Para procesos generales por parte del usuario.
style estilo Este atributo especifica informacin de estilo para el elemento actual.
title nombre Este atributo ofrece informacin consultiva sobre el elemento para el cual se establece.
dir ltr o rtl Especifica la direccin del texto.
Valores posibles:
ltr : De izquierda a derecha (left to right).
rtl : De derecha a izquierda (right to left).
lang cdigo de lenguaje Especifica el idioma base de los valores de los atributos y del texto contenido en un elemento.
El atributo lang es til para:
Ayudar a los motores de bsqueda.
Ayudar a los sintetizadores de voz.
Ayudar al agente de usuario a hacer decisiones sobre separacin de palabras, ligaduras, y
espaciado.
Ayudar a los verificadores de ortografa y gramtica.
Diseo Grafico Centro de Formacin para el Trabajo Samuel Robinson

Salto de Linea: Se realiza con la etiqueta HR. Normalmente se hace en los prrafos. Por ejemplo:
<P ALIGN=LEFT>Bienvenido al curso de la academia Samuel Robinson, donde usted aprender a disear paginas web y Gestionar imgenes
</P> <HR><HR>
En este ultimo ejemplo se insertaran dos lneas.
Uso de Anclas o Hiperenlaces: Se realiza con la etiqueta <a>...</a>. Tiene los siguientes atributos:
Name: <a name = nombre_ancla>...</a>
HREF: se usa para referenciar a otro lugar del mismo documento. Ejemplo: <a href = Inicio> Ir al Inicio </a>
Tambin podemos referenciar a otra pagina del mismo documento para comenzar a navegar.
Ejemplo: <a href = pagina2.htm> Ir a Pagina 2</a>
Tambin para llamar a otra pagina con su URL. Ejemplo: <a href = http://www.youtube.com>Ir a Youtube</a>.
Tambin se usa para hacer referencia de un enlace a travs de imgenes.
Ejemplo: <a name = #Inicio></a><img src = imagenes/imagen.jpg>
Tambin se usa para referencial un correo electrnico.
Ejemplo: <a href = mailto: micorreo@gmail.com>E-mail: micorreo@gmail.com</a>
Formatos de Textos y Caracteres:
Etiquetas de Estilos Fsicos:
Etiqueta Ejemplo
<b></b> <b>Negrillas</b>
<i></i> <i>Cursiva</i>
<u></u> <u>Subrayado</u>
<s></s> <s>Tachado</s>
 _Subindice
 ^SuperIndice

Tambin existen los estilos lgicos donde no haremos nfasis porque ya casi no se usan.
Entidades de caracteres numricas y nominales para caracteres acentuados, u con diresis y ee.


Diseo Grafico Centro de Formacin para el Trabajo Samuel Robinson

Entidades de caracteres para caracteres reservados.


Entidades de caracteres numricas y nominales para algunos caracteres especiales de uso comn.


Formatear el texto: Se realiza con la etiqueta <font></font> .

Atributo Significado Posibles valores
face fuente nombre de la fuente, o fuentes
color color del texto nmero hexadecimal o texto predefinido
size tamao del texto
valores del 1 al 7, siendo por defecto el 3,
o desplazamiento respecto al tamao por defecto,
aadiendo + o - delante del valor

Por ejemplo, para insertar el texto: Bienvenidos a Samuel Robinson.
Habra que escribir:
<Font color = #993366 size = 4 face = Comic Sans MS, Arial, MS Sans Serif>Bienvenidos a Samuel Robinson</font>

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>


Creacin de una Marquesina. Para insertar una marquesina, es necesario insertar el texto entre las etiquetas <marquee> y </marquee>.
Ejemplo:

<marquee bgcolor = #006699 behaviour = altrnate direction = right> <b><font color = #FFFFCC size = 5>esto es una
Marquesina</font></b></marquee>











Diseo Grafico Centro de Formacin para el Trabajo Samuel Robinson

Ejercicios

Ejercicio 1: Genere la siguiente plantilla y guardela con el nombre de Plantilla.html

Abra el Block de Notas o Note Pad ++:

Escriba lo siguiente:

<HTML>
<HEAD>
<TITLE>Mi Primera Pagina Web</TITLE>
</HEAD>

<BODY>
<H1>Ejemplo de mi primera pagina WEB</H1>
</BODY>

</HTML>

Luego gurdelo y lo abre con el botn derecho seleccionando su browser (Internet explorer, Google Chrome o Mozilla FireFox)


Ejercicio 2: Abra el archivo Plantilla.html y renmbrelo con el nombre de Ejercicio02.html. Esto se hace seleccionando Guardar como y le escribe el
nombre de Ejercicio02.html.

a) Despus del encabezado de la pagina:
- Como base de la fuente (basefont), defina el color de #282ECE y el tamao +3
b) Despus del Titulo escriba Los Humoristas Venezolanos - Humor y Risas
c) En el cuerpo de la pagina, defina un ancla con el nombre de arriba.
d) En el cuerpo de la pagina, agregue una imagen cuyo nombre es Risa_gato.jpg y se encuentra en la carpeta imgenes. Esta imagen
debe estar alineada a la izquierda, y a la derecha escriba CHISTES VENEZOLANOS - Humor y Risas con un encabezado de tamao 1.
e) Luego escriba el encabezado con tamao 2, Quienes Somos.
f) En un formato de Prrafo escriba lo siguiente:
Los chistes Venezolanos de un grupo reconocido de artistas
dedicados al mundo de la risa, la comedia y el espectculo.
Entre nosotros podrs encontrar humoristas, artistas, showmen, etc.
g) En otro formato de prrafo, escriba:
Si usted o su empresa necesita crear
un espectculo y no quiere quedar decepcionado no dude en
escribirnos AHORA MISMO. Nuestra direccin es:
h) Crear un ancla referenciando al correo: Email: chistesvzla@yahoo.es.
i) Crear un encabezado de tamao 2, escribiendo lo siguiente: Un ejemplo de nuestro repertorio
j) Escriba en formato de prrafo con alineacin a la Izquierda:
Cada da le mostramos ejemplos distintos de nuestro amplsimo y novedoso repertorio de chistes:
k) Colocando sangra de texto con la etiqueta <blockquote> escriba lo siguiente:
Jaimito le dice a su mama:
!Mama!, !mama!, !dame dinero para darselo a un pobre senor que paso gritando
por la calle!
La mama le responde:
?Y que gritaba ese senor?
-!Helados! !Lleven sus helados!

Doctor, Doctor, cuanto tiempo me queda de vida?

5... 4... 3... 2...
l) En otro encabezado de tamao 2 escriba: Enlaces a pginas relacionadas . Luego en formato de prrafo y creando un ancla donde se
hace referencia al URL http://chistesdiarios.wordpress.com/category/jaimito/. Luego escriba el titulo:
A Rerse Toca, Ja, ja, ja!.
Si te aburres, ests deprimido, o simplemente quieres rer, psate por mi pgina y disfrutars de los ms de 110 chistes que tiene. Con
posibilidad de enviar t el tuyo!

En otro encabezado de tamao 2 escriba: 1er Concurso de feos por Internet. Luego en formato de prrafo, escriba : 1er Concurso de
Feos por Internet participa y gana tu premio
Luego en formato de prrafo y creando un ancla donde se hace referencia al URL http://www.emiliolovera.com/.
Diseo Grafico Centro de Formacin para el Trabajo Samuel Robinson

Luego escriba el titulo:
Emilio Lovera Web
En esta pagina encontrars un listado de dichos
populares, y las 50 cosas que se deberan cambiar para mejorar
la vida terrcola de nuestro querido planeta Tierra
l) Crear el ancla cuyo nombre es #arriba y target en el tope. El titulo ser Ir Arriba.
m) Usando la etiqueta <address> escriba: Pgina creada por los estudiantes de Diseo Grafico Academia Samuel Robinson
n) Inserte una lnea de salto y escriba Ultima actualizacin: 14-03-2014 ;-)
o) Defina una marquesina que contenga Bienvenido al curso de Diseo Grafico en Samuel Robinson.






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/animales
Vamos a modificar la pgina para que tenga el siguiente aspecto:

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 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 <hr>.
3 Aadimos una lnea en blanco con <br>


Diseo Grafico Centro de Formacin para el Trabajo Samuel Robinson

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 PREVENIR LOS PROBLEMAS DENTALES?</h3>
</blockquote>
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.