el color el tamaño del texto tipo de letra listas

18

Upload: elena-miranda-fuentes

Post on 25-Jan-2016

232 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: El color El tamaño del texto Tipo de letra Listas
Page 2: El color El tamaño del texto Tipo de letra Listas

El color

Page 3: El color El tamaño del texto Tipo de letra Listas

El tamaño del texto

Page 4: El color El tamaño del texto Tipo de letra Listas

Tipo de letra

Page 5: El color El tamaño del texto Tipo de letra Listas

Listas

Page 6: El color El tamaño del texto Tipo de letra Listas

Lista desordenada

Page 7: El color El tamaño del texto Tipo de letra Listas

Lis

ta o

rden

ad

a

Page 8: El color El tamaño del texto Tipo de letra Listas

Lista de definiciones

Page 9: El color El tamaño del texto Tipo de letra Listas

IMAGENES

Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e imágenes en nuestras páginas utilizaremos la etiqueta

<IMG SRC="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0 ALIGN=“LEFT, RIGHT, TOP, BOTTOM, MIDDLE”>

El parámetro SRC especifica la URL del fichero que contiene el gráfico. Los formatos estándar en la red son el GIF, PNG y JPG

El parámetro ALT especifica el texto que se mostrará. Los atributos WIDTH y HEIGHT indican el ancho y alto del gráfico en

pixels. Su uso no es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen: el navegador sabe el espacio que ocupará.

Por último vemos el atributo BORDER que como podrás adivinar tan solo coloca el ancho del borde que rodea la imagen.

Page 10: El color El tamaño del texto Tipo de letra Listas

IMAGENES DE FONDO

Para poder insertar una imagen de fondo, a la etiqueta body se le debe de colocar el atributo background.

<BODY BACKGROUND= “Nombre de la imagen”>

Ejemplo:<Body background=“google.jpeg”>NOTA: Si la imagen no es lo suficientemente

grande, esta se repetirá hasta rellenar toda la pagina.

Page 11: El color El tamaño del texto Tipo de letra Listas

Imágenes y enlaces

En este caso el navegador destaca la imagen colocandole un borde del color que use para señalar los enlaces de texto. Algo bastante lógico pero que en la mayoría de los casos queda poco estético, afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER.

<a href="tema1.htm"><img src="/imgs/im_crear/indice2.png" alt="Tema 1" width="45" height="30"></a>

Se ve así:

Page 12: El color El tamaño del texto Tipo de letra Listas

ENLACES

Para agregar un enlace:<A HREF=“DIRECCION URL”>EL TEXTO

DEL VINCULO</A>Para un link pueden ser:

◦Dirigiendote a una pagina dentro de tu pagina.◦Dirigiendote a una imagen◦Dirigiendote a una pagina externa.

Page 13: El color El tamaño del texto Tipo de letra Listas

Ejemplo:◦<A HREF=HTTP://WWW.GOOGLE.COM

TARGET=BLANK>IR AL BUSCADOR</A> Te lleve a una página externa de tu página.

◦<A HREF=http://WWW.GOOGLE.COM TARGET=BLANK><IMG SRC="GOOGLE.JPEG" WIDTH=100 HEIGHT=100></IMG></A></align> Te coloca una imagen para que sea el vínculo.

Page 14: El color El tamaño del texto Tipo de letra Listas

Tablas

Page 15: El color El tamaño del texto Tipo de letra Listas

Ejemplo de tabla

<TABLE WIDTH=300 BORDER=1 BORDERCOLOR=BLACK>

<TR><TD>1</TD><TD>2</TD><TD>3</TD></TR><TR><TD>4</TD><TD>5</TD><TD>6</TD></TR>

Page 16: El color El tamaño del texto Tipo de letra Listas

<table width=100% border=1 cellpadding=0 cellspacing=0 bordercolor=#000000>

<tr> <th>Encabezado 1</th> <th>Encabezado 2</th> <th>Encabezado 3</th> </tr> <tr> <td rowspan=2 valign=middle align=left>Este texto está alineado al centro verticalmente y a la izquierda horizontalmente</td> <td>&nbsp;</td> <td>&nbsp;</td> </tr> <tr> <td colspan=2><IMG SRC=“GOOGLE.JPEG”></IMG></td> </tr>

</TABLE>

Page 17: El color El tamaño del texto Tipo de letra Listas
Page 18: El color El tamaño del texto Tipo de letra Listas

Titulares