Inf2 exc2 unidad3_p1_a_fridaleyva

15
HTML Frida Leyva Teran. Ing. Azucena Cervantes Ponce. Informatica II Jueves 7 de Mayo, 2015. 1°A

Transcript of Inf2 exc2 unidad3_p1_a_fridaleyva

Page 1: Inf2 exc2 unidad3_p1_a_fridaleyva

HTMLFrida Leyva Teran.

Ing. Azucena Cervantes Ponce.Informatica II

Jueves 7 de Mayo, 2015.1°A

Page 2: Inf2 exc2 unidad3_p1_a_fridaleyva

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

Una fuente en código HTML es una etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>.<FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada.• Se puede especificar el tipo de letra añadiéndolo a la etiqueta, por ejemplo:  <FONT FACE="Arial">...</FONT>.• Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>.

* Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamaño y el color de los caracteres: <FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.

Page 3: Inf2 exc2 unidad3_p1_a_fridaleyva

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

• Se puede especificar el tamaño de la fuente con la etiqueta

 <FONT SIZE="?">...</FONT>. • Se puede especificar el valor del tamaño deseado puede ponerse de manera absoluta (un número del 1 al 7) o relativa.

Page 4: Inf2 exc2 unidad3_p1_a_fridaleyva

Ejemplos:

Page 5: Inf2 exc2 unidad3_p1_a_fridaleyva

Etiquetas para generar encabezados.

Si queremos empezar nuestra pagina web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Para escribir encabezados tenemos las etiquetas <h>.

Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo el tamaño del encabezado.

Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño.

Page 6: Inf2 exc2 unidad3_p1_a_fridaleyva

Uso.Resultado.

Page 7: Inf2 exc2 unidad3_p1_a_fridaleyva

¿Qué es la etiqueta font face?

Para establecer el tipo de letra hay que incluir dentro de la etiqueta de apertura:FACE="tipo de letra“Ejemplo: <FONT FACE="tipo de letra">Texto</FONT>

FACE, como todas las propiedades de una etiqueta, se incluye dentro de la etiqueta de apertura, va seguida del signo =, sin espacio intermedio, y después, entre comillas, el valor que queramos: Arial, Helvetica, Times New Roman, etc.Ejemplo:  <FONT FACE="Arial, Times New Roman, Courier">Texto</FONT>

Para establecer el tamaño de letra hay que incluir dentro de la etiqueta de apertura: SIZE="tamaño de letra“Ejemplo: <FONT FACE="Arial" SIZE="tamaño de letra">Texto</FONT>

Page 8: Inf2 exc2 unidad3_p1_a_fridaleyva

Ejemplos:

Page 9: Inf2 exc2 unidad3_p1_a_fridaleyva

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

El color del texto puede ser definido mediante la etiqueta de 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 solo con poner el nombre del color, sin ponerlo en codigo hexadecimal. Estos son algunos de los colores: Nombre Color: Aqua,Black,Blue,Fuchsia,Gray,GreenLime,Maroon,Navy,Olive,Purple,Red,SilverTeal,White,Yellow, etc.

<font color="red">Este texto está en rojo</font>

Que se visualizaría así en una página web. Este texto está en rojo

Page 10: Inf2 exc2 unidad3_p1_a_fridaleyva

¿Cuál es la etiqueta de marquee?

La etiqueta marquee es para poner un texto en movimiento en nuestra pagina web.

La etiqueta es <MARQUEE>, un texto a desplazar y su cierre </MARQUEE>.

Aquí dejo un video para que vean los efectos:

https://www.youtube.com/watch?v=sI0PrPG4iSw

Page 11: Inf2 exc2 unidad3_p1_a_fridaleyva

Etiqueta para insertar una imagen.

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">

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 distorsione.

Page 12: Inf2 exc2 unidad3_p1_a_fridaleyva

¿Cómo se puede manipular el ancho y alto de una imagen?

Por defecto, el tamaño de la imagen que carga es su tamaño original.

Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen. A esto les tenemoss que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.Ejemplo: Si queremos poner la imagen a 100x100 pixels, la línea de código quedaría de la siguiente forma:

<IMG src="mifoto.jpg" width="100" height="100"/>

Page 13: Inf2 exc2 unidad3_p1_a_fridaleyva

¿Que tiene que ver la funcion “atl” dentro de la etiqueta de una imagen?

alt="descripción_de_la_imagen" El atributo alt te permite describir la imagen para los navegadores de sólo texto, así como etiquetar la imagen antes de que se cargue en una página.

Este importante atributo te permite colocar una descripción a las imágenes. Por ejemplo:

<IMG SRC="bander.gif" WIDTH="86"  HEIGHT="59" BORDER="0" ALIGN="RIGHT" ALT="Dibujo de una bandera">

Page 14: Inf2 exc2 unidad3_p1_a_fridaleyva

APAHTML Básico. Cómo crear una página web. Recuperado el Miércoles 6 de Mayo, 2015. De: http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_1.html

APR. Encabezados HTML. Recuperado el Miércoles 6 de Mayo, 2015. De: http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=489:encabezados-html-h1-a-h6-parrafos-aplicar-estilos-y-etiqueta-pre-texto-preformateado-ejemplo-cu00715b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

Todoele. Font. Recuperado el Miércoles 6 de Mayo, 2015. De: http://www.todoele.net/DukeWorkshopHtml/html1/texto_html.htm

Desarrolloweb.com. Color, tamaño y tipo de letra. Recuperado el Miércoles 6 de Mayo, 2015. De: http://www.desarrolloweb.com/articulos/556.php

Marquesinas. Marquee. Recuperado el Miércoles 6 de Mayo, 2015. De:http://serbal.pntic.mec.es/apan/marque.htm

Page 15: Inf2 exc2 unidad3_p1_a_fridaleyva

APAEjemplode.com. Ejemplo de cómo colocar imágenes con HTML. Recuperado el Miércoles 6 de Mayo, 2015. De: http://www.ejemplode.com/17-html/81-ejemplo_de_como_colocar_imagenes_con_html.html

Línea de código. HTML. Recuperado el Miércoles 6 de Mayo, 2015. De: http://lineadecodigo.com/html/alto-y-ancho-de-una-imagen-con-html/c

Duiops.net. Atributos de la etiqueta <IMG>. Recuperado el Miércoles 6 de Mayo, 2015. De: http://www.duiops.net/curso/atribimg.htm