SlideShare une entreprise Scribd logo
1  sur  28
{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
¿Qué es una fuente en código HTML?
 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>
¿Qué es una fuente en código HTML?
 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
 <FONT SIZE="4">El tamaño de letra es 4</FONT>
 El tamaño de letra es 4
 <FONT SIZE="7">El tamaño de letra es 7</FONT>
 El tamaño de letra es 7
¿Cuáles son las etiquetas para
manipular el tamaño de letra?
 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)
¿Cuáles son las etiquetas para
manipular el tamaño de letra?
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

Contenu connexe

Tendances (14)

html
htmlhtml
html
 
HTML
HTMLHTML
HTML
 
Curso HTML 5 & jQuery - Leccion 9
Curso HTML 5 & jQuery - Leccion 9Curso HTML 5 & jQuery - Leccion 9
Curso HTML 5 & jQuery - Leccion 9
 
Guia html
Guia htmlGuia html
Guia html
 
Herramientas de html (Tablas)
Herramientas de html (Tablas)Herramientas de html (Tablas)
Herramientas de html (Tablas)
 
Codigos de html mitzi inf 1
Codigos de html mitzi inf 1Codigos de html mitzi inf 1
Codigos de html mitzi inf 1
 
Guia básica html
Guia básica htmlGuia básica html
Guia básica html
 
Guia de html
Guia de  htmlGuia de  html
Guia de html
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Introhtml
IntrohtmlIntrohtml
Introhtml
 
Html – básico 1
Html – básico 1Html – básico 1
Html – básico 1
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
CREACION DE PAGINAS WEB
CREACION DE PAGINAS WEB CREACION DE PAGINAS WEB
CREACION DE PAGINAS WEB
 
Presentacion de etiquetas
Presentacion de etiquetasPresentacion de etiquetas
Presentacion de etiquetas
 

En vedette

Libro 4 ambición gobernante con que finalidad
Libro 4  ambición gobernante con que finalidadLibro 4  ambición gobernante con que finalidad
Libro 4 ambición gobernante con que finalidadDelfor Susvielle
 
Presentación expo salud
Presentación expo saludPresentación expo salud
Presentación expo saludDavid Teme
 
Virus y antivirus
Virus y antivirusVirus y antivirus
Virus y antivirusMayvise04
 
Gobierno electronico en Argentina y Portugal
Gobierno electronico en Argentina y PortugalGobierno electronico en Argentina y Portugal
Gobierno electronico en Argentina y PortugalSEMINARIOGRUPO7
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin títulooalm2
 
PROGRAMAS DE ESTUDIO 2011 - CIENCIAS
PROGRAMAS DE ESTUDIO 2011 - CIENCIASPROGRAMAS DE ESTUDIO 2011 - CIENCIAS
PROGRAMAS DE ESTUDIO 2011 - CIENCIASJEDANNIE Apellidos
 
La tecnología en la educación del siglo xxi
La tecnología en la educación del siglo xxiLa tecnología en la educación del siglo xxi
La tecnología en la educación del siglo xxiALNH93
 
EL HÁBITAT COMO DERECHO HUMANO
EL HÁBITAT COMO DERECHO HUMANO EL HÁBITAT COMO DERECHO HUMANO
EL HÁBITAT COMO DERECHO HUMANO MCarorivero
 
Generos periodisticos
Generos periodisticosGeneros periodisticos
Generos periodisticosAlex Auriazul
 
Trabajo de investigacion dokeos informatico
Trabajo de investigacion dokeos informaticoTrabajo de investigacion dokeos informatico
Trabajo de investigacion dokeos informaticosuamr18
 
Lo más importante presentacion del cuento
Lo más importante presentacion del cuentoLo más importante presentacion del cuento
Lo más importante presentacion del cuentoisabelreynosoilag
 
Planificador proyecto enriquecido_con_tic.docx
Planificador proyecto enriquecido_con_tic.docxPlanificador proyecto enriquecido_con_tic.docx
Planificador proyecto enriquecido_con_tic.docxVannya Echeverry
 
Power point entrevita a juan antonio
Power point entrevita a juan antonio Power point entrevita a juan antonio
Power point entrevita a juan antonio eleazar ciau nahuat
 

En vedette (20)

Libro 4 ambición gobernante con que finalidad
Libro 4  ambición gobernante con que finalidadLibro 4  ambición gobernante con que finalidad
Libro 4 ambición gobernante con que finalidad
 
Presentación expo salud
Presentación expo saludPresentación expo salud
Presentación expo salud
 
Virus y antivirus
Virus y antivirusVirus y antivirus
Virus y antivirus
 
Gobierno electronico en Argentina y Portugal
Gobierno electronico en Argentina y PortugalGobierno electronico en Argentina y Portugal
Gobierno electronico en Argentina y Portugal
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin título
 
Los Cables de Computación
Los Cables de Computación Los Cables de Computación
Los Cables de Computación
 
PROGRAMAS DE ESTUDIO 2011 - CIENCIAS
PROGRAMAS DE ESTUDIO 2011 - CIENCIASPROGRAMAS DE ESTUDIO 2011 - CIENCIAS
PROGRAMAS DE ESTUDIO 2011 - CIENCIAS
 
Lucy...
Lucy...Lucy...
Lucy...
 
Presentación gobierno escolar
Presentación gobierno escolarPresentación gobierno escolar
Presentación gobierno escolar
 
La tecnología en la educación del siglo xxi
La tecnología en la educación del siglo xxiLa tecnología en la educación del siglo xxi
La tecnología en la educación del siglo xxi
 
EL HÁBITAT COMO DERECHO HUMANO
EL HÁBITAT COMO DERECHO HUMANO EL HÁBITAT COMO DERECHO HUMANO
EL HÁBITAT COMO DERECHO HUMANO
 
Banda ancha-y-desarrollo2
Banda ancha-y-desarrollo2Banda ancha-y-desarrollo2
Banda ancha-y-desarrollo2
 
pdf
pdfpdf
pdf
 
Eloy alfaro
Eloy alfaro Eloy alfaro
Eloy alfaro
 
Generos periodisticos
Generos periodisticosGeneros periodisticos
Generos periodisticos
 
Trabajo de investigacion dokeos informatico
Trabajo de investigacion dokeos informaticoTrabajo de investigacion dokeos informatico
Trabajo de investigacion dokeos informatico
 
CV Roberta Kühleis-sp
CV Roberta Kühleis-spCV Roberta Kühleis-sp
CV Roberta Kühleis-sp
 
Lo más importante presentacion del cuento
Lo más importante presentacion del cuentoLo más importante presentacion del cuento
Lo más importante presentacion del cuento
 
Planificador proyecto enriquecido_con_tic.docx
Planificador proyecto enriquecido_con_tic.docxPlanificador proyecto enriquecido_con_tic.docx
Planificador proyecto enriquecido_con_tic.docx
 
Power point entrevita a juan antonio
Power point entrevita a juan antonio Power point entrevita a juan antonio
Power point entrevita a juan antonio
 

Similaire à HInf2 exc12 p1_a_unidad 3_html_jessica

Similaire à HInf2 exc12 p1_a_unidad 3_html_jessica (20)

Inf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaInf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_Valenzuela
 
Inf2 p1 a_exc2_danna
Inf2 p1 a_exc2_dannaInf2 p1 a_exc2_danna
Inf2 p1 a_exc2_danna
 
Inf2_ p1 a_exc2_danna
Inf2_ p1 a_exc2_dannaInf2_ p1 a_exc2_danna
Inf2_ p1 a_exc2_danna
 
Codigo HTML
Codigo HTMLCodigo HTML
Codigo HTML
 
Código HMTL
Código HMTLCódigo HMTL
Código HMTL
 
Inf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarezInf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarez
 
Inf2 exc2 unidad3_p1_a_fridaleyva
Inf2 exc2 unidad3_p1_a_fridaleyvaInf2 exc2 unidad3_p1_a_fridaleyva
Inf2 exc2 unidad3_p1_a_fridaleyva
 
HTML-Andrea Sofia
HTML-Andrea SofiaHTML-Andrea Sofia
HTML-Andrea Sofia
 
Html- Andrea Sofia
Html- Andrea SofiaHtml- Andrea Sofia
Html- Andrea Sofia
 
Vals}(1)
Vals}(1)Vals}(1)
Vals}(1)
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Tema formato de texto color tamaño fuente alineación
Tema formato de texto color tamaño fuente alineaciónTema formato de texto color tamaño fuente alineación
Tema formato de texto color tamaño fuente alineación
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 
Páginas web (1)
Páginas web (1)Páginas web (1)
Páginas web (1)
 
Conociendo mas sobre HTLM
Conociendo mas sobre HTLMConociendo mas sobre HTLM
Conociendo mas sobre HTLM
 
conociendo sobre HTLM
conociendo sobre HTLMconociendo sobre HTLM
conociendo sobre HTLM
 
Manual html basico GUTIECUADOR
Manual html basico GUTIECUADORManual html basico GUTIECUADOR
Manual html basico GUTIECUADOR
 
HTML
HTMLHTML
HTML
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 

Dernier

Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..RobertoGumucio2
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaarkananubis
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativaAdrianaMartnez618894
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxAlexander López
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx241523733
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxAlexander López
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxMariaBurgos55
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptJavierHerrera662252
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son241514984
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxJOSEMANUELHERNANDEZH11
 

Dernier (20)

Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en mina
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
definicion segun autores de matemáticas educativa
definicion segun autores de matemáticas  educativadefinicion segun autores de matemáticas  educativa
definicion segun autores de matemáticas educativa
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptxGoogle-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
Google-Meet-como-herramienta-para-realizar-reuniones-virtuales.pptx
 
GonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptxGonzalezGonzalez_Karina_M1S3AI6... .pptx
GonzalezGonzalez_Karina_M1S3AI6... .pptx
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
 
Segunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptxSegunda ley de la termodinámica TERMODINAMICA.pptx
Segunda ley de la termodinámica TERMODINAMICA.pptx
 
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptx
 

HInf2 exc12 p1_a_unidad 3_html_jessica

  • 1. {INF2_EXC12_P1A_UNID AD 3_HTML Jessica Lizet Ramirez Ochoa Preparatoria 1ª Computacion Azucena Cervantes Ponce
  • 2. ¿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.
  • 3.  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 ¿Qué es una fuente en código HTML?
  • 4.  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> ¿Qué es una fuente en código HTML?
  • 5.
  • 6.  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?
  • 7. 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  <FONT SIZE="4">El tamaño de letra es 4</FONT>  El tamaño de letra es 4  <FONT SIZE="7">El tamaño de letra es 7</FONT>  El tamaño de letra es 7 ¿Cuáles son las etiquetas para manipular el tamaño de letra?
  • 8.  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) ¿Cuáles son las etiquetas para manipular el tamaño de letra?
  • 9.
  • 10. 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
  • 11.  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
  • 12.
  • 13.  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?
  • 14.
  • 15.  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
  • 16.
  • 17.  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.
  • 18.  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?
  • 19.
  • 20. <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
  • 21.
  • 22. 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?
  • 23.
  • 24. 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
  • 25.
  • 26.  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:
  • 27.  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:
  • 28.  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