HInf2 exc12 p1_a_unidad 3_html_jessica

{INF2_EXC12_P1A_UNID
AD 3_HTML
Jessica Lizet Ramirez Ochoa
Preparatoria 1ª
Computacion
Azucena Cervantes Ponce

¿Qué es una fuente en código HTML?
Usar etiquetas del tipo <Font Size=+1> a las de tipo <Font
Size=12>
 Cada persona puede tener definido un tamaño de letra por defecto
distinto. Por ejemplo, si posee un monitor de 14" posiblemente tenga
por defecto un tamaño de letra 10, con lo que las etiquetas <Font
Size=+1> y <Font Size=12> tendrán el mismo efecto. Pero si posee un
monitor de 17", es posible que usted tenga configurado el navegador
con un tamaño de letra 14 con lo que <FONT SIZE=+1> aumentaría el
tamaño, pero <FONT SIZE=12> lo disminuiría.

 Importar fuentes tipográficas mediante CSS con @font-face
 La mencionada regla @font-face nace con CSS 2 pero hasta CSS 3 no
empieza a funcionar y prosperar. En un principio sólo funcionaba en
IE 5 y únicamente admitía formatos de fuente .eot, pero con el paso
del tiempo otros navegadores ampliaron su soporte, comenzando con
Safari 3,1. En la actualidad admite otros tipos de formatos
tipográficos como son .ttf y .otf y funciona también con los
navegadores Opera 10, Firefox 3,1 y por supuesto, todas las versiones
superiores a los navegadores ya citados.Así pues, nada nos impide ya
hacer uso de esta @font-face, para poder utilizar cualquier fuente en
nuestra web, con la garantía que se verá perfectamente en todos los
navegadores más actuales.
 Su sintaxis es la siguiente: @font-face{font-family:<nombre_fuente>;
src: <source>[,<source>]*;
[font-weight:<weigth>];
[font-style:<style>];
 Con esto definimos el tipo de letra y su ubicación en nuestro servidor.
Si queremos utilizar dicha fuente tan solo tenemos que llamarla con
font-family en las reglas de estilo que deseemos

 FONT COLOR
 Se puede controlar el color del texto utilizando el elemento <FONT>
con el atributo COLOR="xxx", donde "xxx" es el nombre en inglés del
color que se desea. Hay que tener presente que algunos no se verán o
se verán mal si la máquina no soporta, por lo menos, 256 colores. Por
supuesto, este efecto es anidable con el de tamaño y todos los
demás.Si escribes:
 <B><FONT COLOR="red">Texto ROJO </FONT> <br>

 Para definir distintos tamaños de letra, en HTML se utiliza el
elemento lleno <Hx> </Hx> donde x es un número que puede variar
entre 1 y 6, siendo 1 el tamaño mayor.Se escribirán así:
 <H1> Texto de prueba (H1)</H1>. <H2> Texto de prueba (H2)</H2>
<H3> Texto de prueba (H3)</H3> <H4> Texto de prueba (H4)</H4>
<H5> Texto de prueba (H5)</H5> <H6> Texto de prueba (H6)</H6> y
este sería el resultado:
¿Cuáles son las etiquetas para
manipular el tamaño de letra?

Atributo size
 Este atributo de la etiqueta “font” sirve para cambiar el tamaño de
las fuentes. Hay varias maneras de utilizarlo.
 La manera más habitual de establecer esta función es la siguiente:
 Size=X. De esta manera se asigna un tamaño directamente. El tamaño
(X) va desde 1 a 7, donde 1 es el valor de letra más pequeño y 7 el más
grande.
 Ejemplos:
 <FONT SIZE="1">El tamaño de letra es 1</FONT>
 El tamaño de letra es 1

 También existe una segunda forma para cambiar el tamaño de la
fuente, aunque su uso no es muy habitual:
 Size=+X ó Size=-X
 Aquí incrementas o disminuyes un tamaño (X) relativo al tamaño base que
tiene la fuente, que por defecto es 3:
 <FONT SIZE="-2">Tamaño de letra 1 (3-2)</FONT>
 Tamaño de letra 1 (3-2)
 <FONT SIZE="+4">Tamaño de letra 7 (3+4)</FONT>
 Tamaño de letra 7 (3+4)

Encabezados
 HTML acepta seis encabezados para
definir la estructura jerárquica de los
párrafos en un documento. Pues bien,
para escribir encabezados tenemos
que utilizar las etiquetas <h>. Esta
etiqueta viene acompañada de un
número, desde el 1 hasta el 6,
predefiniendo éstos el tamaño del
encabezado. Así, <h1> sería el
encabezado más grande mientras que
<h6> sería el más pequeño.
Describe las etiquetas para
generar encabezados colocando
una imagen de cada una

 H1 es una etiqueta que sirve para colocar la frase que indica el
título del contenido de una página web. Importante en este
punto delimitar de forma clara la diferencia entre sitio web y
página web: un título H1 debe hacer referencia a una página de tu
sitio web, y no al sitio web en general.
 La etiqueta H2 es un elemento similar al H1, que indica títulos de
importancia para subsecciones del documento web actual. Por su
naturaleza, puede haber varios H2 en un sitio, que indiquen los
diferentes títulos de importancia de la página en la que nos
encontramos.
 Las etiquetas H3 en adelante nos permiten definir títulos de
subapartados de un bloque encabezado con un H2. Su
incidencia en SEO es más limitada, y por ello no es habitual ni
recomendable el trabajar los titulares a partir de H4.
Describe las etiquetas para
generar encabezados

 font - fuente . Indica el tamaño, color, o fuente del texto que
contiene.
 Sus etiquetas son: <font> y </font> (ambas obligatorias).Está
definido como: Elemento desaprobado. En un doctype transicional
está definido como un elemento especial y por lo tanto en línea.
 Crea una caja: En línea.Puede contener: Texto, y/o cero o más
elementos en línea .
 Especificar la fuente, el tamaño de fuente y color de texto:
< FONT size= " 3" color= "red" >Este es texto. < /font>
< FONT size= " 2" color= "blue" >Este es texto. < /font>
< FONT face= "Verdana" color= "verde" >Este es texto. < /font>
¿Qué es una etiqueta font face?

 Especificar la fuente, el tamaño de fuente y color de texto:
< FONT size= " 3" color= "red" >Este es texto. < /font>
 <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para
formatear</FONT>
El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el
tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor
dimensión cuanto más cercano al 7); COLOR=red indica el color
del texto (que puede expresarse asimismo en valores
hexadecimales).
Coloca una pequeño código donde
expliques la etiqueta font face

 Selecciona un color para la fuente. Las fuentes de HTML
generalmente se describen con códigos hexadecimales que se
traducen en la composición RGB (rojo, verde y azul, por sus siglas
en inglés) de los diferentes colores disponibles. Para cada color
existe un conjunto de 6 caracteres que lo conforma.Por ejemplo, el
rojo se forma con el código: ff0000, el verde con el código: 00ff00 y el
azul con el código: 0000ff. En el lenguaje hexadecimal, "00" equivale
al cero y "ff" es igual a 255, que es el valor máximo que puede tomar
un canal en la composición RGB. Entre más alto sea el valor, el color
será más claro. Por ejemplo, el código: ffffff corresponde al blanco y
el código: 000000 se traduce en el color negro.
 Puedes formar el color que quieras combinando los códigos que
aparecen en el punto anterior.
¿Cómo se puede manipular el color
de la fuente? Describe la etiqueta con un
ejemplo de código.

 La etiqueta <MARQUEE> </MARQUEE> crea una marquesina cuyo
contenido se desplaza. Por defecto, ocupa todo el ancho de la
pantalla, tiene una línea de altura y el texto se mueve lentamente de
derecha a izquierda.
 Los atributos WIDHT y HEIGHT permiten controlar el ancho y el
alto de la marquesina y pueden expresarse en pixeles o
porcentualmente. El atributo ALIGN permite alinear el texto que
rodea la marquesina, y puede tener los siguientes
valores: top (arriba), middle (centrado) bottom (abajo). Los
atributos HSPACE y VSPACE definen la separación horizontal y
vertical del texto con los bordes de la marquesina:
 <marquee width="50%" height="60" align="bottom">
... texto ...
</marquee>
¿Cuál es la etiqueta de marquee?

<img> 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, alt
Ejemplo 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.
Describe la etiqueta de como
insertar una imagen

WIDTH y HEIGHT
En los ejemplos vistos hasta ahora, no hemos especificado las medidas
de la imagen que el navegador se ha encargado de buscar
automáticamente. Es posible definir la anchura y la altura de la imagen
gracias a los atributos width y height, respectivamente:
<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Obra de
K. Haring">
Donde WIDTH=178 es la dimensión horizontal (ancho) de la imagen
expresada en píxel, y HEIGHT=180 la dimensión vertical (alto).
Mediante estos atributos podemos definir dimensiones diferentes de
las que realmente tiene la imagen. En cualquier caso, es aconsejable
insertar imágenes con su tamaño efectivo sobre todo si están en
formato GIF, dado que, cuando se cambian las medidas, este formato
pierde mucha calidad.
¿Cómo puedes manipular el ancho y alto
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">
Para aquellas personas que navegan por la web con la opción de mostrar
gráficos desconectada, el atributo alt ofrece una estupenda forma de
escribir una visión natural de lo que es la imagen.
¿Qué tiene que ver la función “ALT”
dentro de la etiqueta de una imagen? Y
escribe un ejemplo

 Deciencias (2015) ¿Qué es una fuente en código HTML? 06/05/2015
De:http://www.deciencias.net/disenoweb/elaborardw/paginas/tipog
rafias.htm
 UV ¿Qué es una fuente en código HTML? 06/05/2015
De:https://www.uv.es/jac/guia/texcolej.htm
 Desarrollo Web ¿Qué es una fuente en código HTML? 06/05/2015
De:http://www.desarrolloweb.com/articulos/intro-font-face.html
 UV(2015)¿Cuáles son las etiquetas para manipular el tamaño de
letra? 06/05/2015 De:https://www.uv.es/jac/guia/tamanyo.htm
 Base Kit(2015)¿Cuáles son las etiquetas para manipular el tamaño
de letra? 06/05/2015 De:
http://www.basekit.com.mx/basekiteca/texto-en-html-definir-
tamano-y-color-de-la-fuente
 Haz una web (2015) Describe las etiquetas para generar
encabezados. 06/05/2015 De:http://html.hazunaweb.com/107.php
FORMATO APA:

 Kioskea (2015) Describe las etiquetas para generar encabezados.
06/05/2015 De:http://es.kioskea.net/contents/248-encabezados-en-
html
 Hectormainar (2015) Describe las etiquetas para generar
encabezados. 06/05/2015 De:http://www.hectormainar.com/seo/h1-
h2-y-h3-como-utilizar-correctamente-las-etiquetas-de-encabezado-
de-html
 Todo el e.net (2015) Coloca una pequeño código donde expliques la
etiqueta font face 06/05/2015
De:http://www.todoele.net/DukeWorkshopHtml/html1/texto_html.
htm
 UV (2015) ¿Cómo se puede manipular el color de la fuente?
Describe la etiqueta con un ejemplo de código 06/05/2015 De:h
 Vagabundia (2015) ¿Cuál es la etiqueta de marquee? 06/05/2015 De:
http://vagabundia.blogspot.com/2007/03/desplazamientos-de-
textos-marquee.html
FORMATO APA:

 Todo HTML (2015) ¿Qué es una etiqueta font face? 06/05/2015
De:https://sites.google.com/site/dwebhtml/reference/tags/font
 HTML POINT (2015) Coloca una pequeño código donde expliques la etiqueta
font face 06/05/2015 De:http://www.htmlpoint.com/guida/html_06.htm
 UV (2015) Describe la etiqueta de como insertar una imagen 06/05/2015
De:http://www.ejemplode.com/17-html/81-
ejemplo_de_como_colocar_imagenes_con_html.html
 HTML Point (2015) ¿Cómo puedes manipular el ancho y alto de una imagen?
06/05/2015 De: http://www.htmlpoint.com/guida/html_09.htm
 Duiops (2015) ¿Qué tiene que ver la función “ALT” dentro de la etiqueta de
una imagen? Y escribe un ejemplo 06/05/2015
De:http://www.duiops.net/curso/atribimg.htm
 http://es.wikihow.com/cambiar-el-color-del-texto-en-HTML

HInf2 exc12 p1_a_unidad 3_html_jessica

Más contenido relacionado

La actualidad más candente (14)

Destacado (20)

Similar a HInf2 exc12 p1_a_unidad 3_html_jessica (20)

Último (20)

HInf2 exc12 p1_a_unidad 3_html_jessica