14
María José Guzmán Ponce Prof. Azucena Cervantes 1.B 07/05/15

PAGINA HTML

Embed Size (px)

Citation preview

Page 1: PAGINA HTML

María José Guzmán PonceProf. Azucena Cervantes1.B07/05/15

Page 2: PAGINA HTML

¿Qué es una fuente en código HTML?

• La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos de la pagina web.

<FONT>

<B> Texto en negrita </B>

<I> Texto en cursiva </I>

<U> Texto subrayado </U>

<STRIKE> Texto tachado </STRIKE>

Page 3: PAGINA HTML

¿Cuáles son las etiquetas para manipular el tamaño de la letra?

• Define el tamaño de la letra. Este tamaño puede ser absoluto o relativo.

• Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande.

Page 4: PAGINA HTML

Describe las etiquetas para generar los encabezados, coloca una imagen de cada uno

• HTML acepta seis encabezados para definir la estructura jerárquica de los párrafos en un documento:

Page 5: PAGINA HTML

¿Qué es la etiqueta font face?• Con la versión 3.0 de Netscape se ha implementado un nuevo

atributo del elemento <FONT> que permite elegir tipos de letra entre los varios de que dispone por defecto Windows. Se trata del atributo FACE. Este atributo permite forzar el tipo de letra que el diseñador de la página quiere que vea el cliente, sin importar el que por defecto tenga establecido el visualizador.

• Hay que tener cuidado con este atributo ya que cada usuario, dependiendo de la plataforma que utilice, puede no disponer de los mismos tipos de letra que nosotros con lo que, si nosotros elegimos un tipo del que no dispone, el navegador se verá forzado a mostrar el texto con la fuente que utiliza por defecto (suele ser Times New Roman). Para evitar esto, dentro del atributo suelen seleccionarse varios tipos de letra separados por comas. En este caso el navegador comprobará que dispone del primer tipo enumerado y si no es así, pasará al segundo y así sucesivamente hasta encontrar un tipo que posea o bien acabar la lista y poner la fuente por defecto. Veamos un ejemplo.

Page 6: PAGINA HTML
Page 7: PAGINA HTML

¿Cómo se puede manipular el color de la fuente?

• El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión. Por otra parte, es posible definir de una manera inmediata algunos de los colores como: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal y White.

Page 8: PAGINA HTML

¿Cuál es la etiqueta de marquee?• La etiqueta marquee nos sirve para dar un efecto

diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>".

• El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

• align: Este atributo nos indicará si el texto dentro de la etiqueta se alineará en la zona alta del marquee ("top"), en el medio ("middle") o en la parte baja ("bottom").

Page 9: PAGINA HTML

• height y width: El primero marca la altura que tendrá la marquesina y el segundo la anchura de la misma.

• scrollamount: Este atributo define la cantidad de píxeles que queremos que se desplace el texto en cada movimiento. Por ejemplo: <marquee scrollamount="3"> </marquee> significará que el texto que vaya dentro de esa etiqueta se moverá a razón de tres píxeles por movimiento.

• scrolldelay: Éste nos define la velocidad del texto que está dentro de la marquesina. A menor numeración, mayor velocidad. Es decir, un texto irá más rápido si el scrolldelay es 5, que si el scrolldelay es 20

Page 10: PAGINA HTML

• loop: Este atributo nos determina si el movimiento se repetirá o no. Si queremos que el movimiento sólo se repita unas veces determinadas debemos indicárselo con un número, que será el número de veces que se repita. Si queremos que se repita sólo 10 veces, su loop será el siguiente: <marquee loop="10"> </marquee>

• Si queremos que se repita debemos usar "infinite" o "-1". Si no especificamos nada, se repetirá constantemente.

• direction: Sirve para definir la dirección del movimiento: "left" para la izquierda, "right" para la derecha, "top" para arriba y "down" para abajo.

Page 11: PAGINA HTML

• behavior: Gracias a este atributo podemos dar nuevos efectos a la marquesina. Si no especificamos este atributo, el texto se moverá de forma circular en el sentido que le hayamos marcado. Con behavior="scroll" conseguiremos el mismo efecto: el texto se moverá circularmente.

• Con behavior="slide" haremos que el texto se detenga al llegar al final de la marquesina. Y con el behavior="alternate" el texto irá y volverá de un lado a otro de la marquesina.

Page 12: PAGINA HTML

Como insertar una imagenUna de las primeras cosas que debemos aprender del HTML es la etiqueta <img> que funciona para colocar imágenes dentro de una página web.Para poner una imágen utilizamos el siguiente código:<img src="imagenHTML.jpg">Donde "imagenHTML.jpg" es la imagen que vamos a colocar. Deberá estar ubicada en el mismo directorio. Si queremos colocar una imagen con HTML en una página que no está colocada dentro del mismo directorio, podemos usar una ruta absoluta:<img src="folder/imagenHTML.jpg"La etiqueta <img> tiene varias propiedas como son:border, width, height, altEjemplo con propiedades de imágen en HTML<img src="imagenHTML.jpg" border="0" width="10" height="10">El ancho y alto (width, height) se coloca en pixeles y deben corresponder al tamaño original de la imagen para que no se distorcione.Los formatos soportados por el explorer son jpg, gif y png.

Page 13: PAGINA HTML

Función ALTEl uso de texto para comentar las imágenes es una regla fundamental que debemos observar en la creación de sitios web por varias razones:

algunos navegadores pordrían estar impostados para no invocar las imágenes;los navegadores textuales para invidentes no conseguirían interpretar las imágenes si carecieran de comentario;es posible evitar pies de imagen incluyendo comentarios dentro de la imagen misma.

En todos estos casos, el uso de comentarios resuelve el problema y permite optimizar la página web. La sintaxis correcta de los comentarios es la siguiente:

<IMG SRC="immagine.gif" ALT="Obra de K. Haring">13

Page 14: PAGINA HTML

• http://www.htmlpoint.com/guida/html_06.htm• http://es.kioskea.net/contents/248-encabezados-en

-html• http://www.desarrolloweb.com/articulos/556.php• http://www.htmlpoint.com/guida/html_09.htm• http://www.ejemplode.com/17-html/81-ejemplo_de

_como_colocar_imagenes_con_html.html