SlideShare una empresa de Scribd logo
1 de 11
Colegio Bucerias
Josue Ramon Rodriguez Gil
HTML
Profa.Azucena Cervantes
1.A
Es un conjunto de líneas de texto que son las
instrucciones que debe seguir la computadora para
ejecutar dicho programa. Por tanto, en el código
fuente de un programa está escrito por completo su
funcionamiento.
¿QUÉ ES UNA FUENTE EN CÓDIGO HTML?
<HTML>
<BODY>
<P>
<FONT FACE="BOOKMAN OLD STYLE, BOOK
ANTIQUA, GARAMOND">ESTE PARRAFO UTILIZA
ESTE TIPO DE LETRA...</FONT>
</P>
<BASEFONT SIZE="2" COLOR="FFFFFF">
<P>TU TEXTO</P>
</BASEFONT>
</BODY>
</HTML>
¿Cuáles son las etiquetas para manipular el
tamaño de la letra?
<H1> TEXTO MUY GRANDE</H1>
<H2>TEXTO GRANDE</H2>
<H3>TEXTO ALGO MÁS GRANDE DE
LO NORMAL</H3>
<H4>TEXTO NORMAL</H4>
<H5>TEXTO PEQUEÑO</H5>
<H6>TEXTO MUY PEQUEÑO</H6>
Describe las etiquetas para generar los
encabezados
PERMITE ESTABLECER EL TIPO DE
LETRA QUE SE UTILIZARÁ LA PAGINA
WEB POR EJEMPLO ARIAL, VERDANA,
COMIC SANS MS.
EJEMPLO:
FONT FACE=“ARIAL”>TEXTO</FONT>
¿Qué es laetiqueta fontface?
CON ESTE ATRIBUTO PONDREMOS COLOR
A LA FUENTE YA SEA EN PALABRA EN
INGLES (BLUE) O BIEN EN CÓDIGO
HEXADECIMAL #0000FF
EJEMPLO:
<FONT FACE=“ARIAL” SIZE=“7”
COLOR=“#999999”>TEXTO</FONT>
¿Cómo se puede manipularel color de la fuente?
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>".
¿Cuál es la etiqueta de marquee?
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">
Describe la etiqueta de comoinsertar una
imagen
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 RESPECTIVAMENTE. A ESTOS
ATRIBUTOS LES TENDREMOS QUE DAR UNOS VALORES
NUMÉRICOS QUE INDIQUEN EL VALOR EN PIXELES
QUE QUEREMOS REFLEJAR.
ASÍ, SI QUEREMOS PONER LA IMAGEN A 100X100
PIXELES, LA LÍNEA DE CÓDIGO QUEDARÍA DE LA
SIGUIENTE FORMA:
<IMG SRC="MIFOTO.JPG" WIDTH="100"
HEIGHT="100"/>
¿Cómo puedes manipular el
ancho y alto de una imagen?
PODEMOS PONER UNA DESCRIPCIÓN DE LA IMAGEN
DENTRO DE LA MISMA PARA QUE LA GENTE PUEDE
LEERLA AL MANTENER EL RATÓN ENCIMA DE ELLA.
ESTA DESCRIPCIÓN PODEMOS ESCRIBIRLA MEDIANTE
EL ATRIBUTO "ALT" Y LO ESCRIBIRÍAMOS DE LA
SIGUIENTE MANERA: ALT= "X", SIENDO "X" LA
DESCRIPCIÓN QUE LE GENTE LEERÁ AL PASAR EL
RATÓN POR ENCIMA.
EJEMPLO:
<IMG SRC="TEMPLATES/APR02062010/IMAGES/LOGO.P
NG" ALT="LOGOTIPO APR2">
¿Qué tiene que ver la función “ALT” dentro de la
etiqueta de una imagen?
APA Codigo fuente
 De: http://es.wikipedia.org/wiki/C%C3%B3digo_fuente
 Etiquetas de tamaño
 De: https://mx.answers.yahoo.com/question/index?qid=20081111170326AAvOHkR
 Encabezados
 De: http://html.hazunaweb.com/107.php
 Font cize
De: http://alfatips.com/temas/fontfacefontcolorfontsize
 http://html.hazunaweb.com/116.php
 Imágenes en HTML
 DE: http://www.ejemplode.com/17-html/81-
ejemplo_de_como_colocar_imagenes_con_html.html
 Etiquetas HTML
 DE: http://html.hazunaweb.com/111.php
 Etiquetas html
 De:
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=484:etiq
uetas-html-basicas-imagenes-img-src-alt-width-height-deprecated-border-align-rutas-
cu00714b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

Más contenido relacionado

La actualidad más candente (8)

pag 4
pag 4pag 4
pag 4
 
Programa 7 eclipse
Programa 7 eclipsePrograma 7 eclipse
Programa 7 eclipse
 
Programa aa7
Programa aa7Programa aa7
Programa aa7
 
Colegio nacional nicolás es guerra
Colegio nacional nicolás es guerraColegio nacional nicolás es guerra
Colegio nacional nicolás es guerra
 
Imagenes
ImagenesImagenes
Imagenes
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Instructions
InstructionsInstructions
Instructions
 
Pagina web 5
Pagina web 5Pagina web 5
Pagina web 5
 

Similar a Inf2 exc12 p1_a_unidad 3_html_josue rodriguez

Inf2 p1 a_ejercicio2_estefaniaramirez
Inf2 p1 a_ejercicio2_estefaniaramirezInf2 p1 a_ejercicio2_estefaniaramirez
Inf2 p1 a_ejercicio2_estefaniaramirez
Colegio Bucerias
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
Alvaroav
 
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
Mariscalino2012
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
Wilmer Acero
 

Similar a Inf2 exc12 p1_a_unidad 3_html_josue rodriguez (20)

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
 
HTML-Andrea Sofia
HTML-Andrea SofiaHTML-Andrea Sofia
HTML-Andrea Sofia
 
Html- Andrea Sofia
Html- Andrea SofiaHtml- Andrea Sofia
Html- Andrea Sofia
 
Inf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaInf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_Valenzuela
 
Inf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarezInf2-exc-1-diego alvarez
Inf2-exc-1-diego alvarez
 
Inf2 p1 a_ejercicio2_estefaniaramirez
Inf2 p1 a_ejercicio2_estefaniaramirezInf2 p1 a_ejercicio2_estefaniaramirez
Inf2 p1 a_ejercicio2_estefaniaramirez
 
HInf2 exc12 p1_a_unidad 3_html_jessica
HInf2 exc12 p1_a_unidad 3_html_jessicaHInf2 exc12 p1_a_unidad 3_html_jessica
HInf2 exc12 p1_a_unidad 3_html_jessica
 
Exc12 unidad 3 html_mayrafranco
Exc12 unidad 3 html_mayrafrancoExc12 unidad 3 html_mayrafranco
Exc12 unidad 3 html_mayrafranco
 
Exc12 unidad 3 html_mayrafranco
Exc12 unidad 3 html_mayrafrancoExc12 unidad 3 html_mayrafranco
Exc12 unidad 3 html_mayrafranco
 
El lenguaje de programación en las páginas web
El lenguaje de programación en las páginas webEl lenguaje de programación en las páginas web
El lenguaje de programación en las páginas web
 
Codigos de html mitzi inf 1
Codigos de html mitzi inf 1Codigos de html mitzi inf 1
Codigos de html mitzi inf 1
 
HTML introducción a lo básico de html .pdf
HTML introducción a lo básico de html .pdfHTML introducción a lo básico de html .pdf
HTML introducción a lo básico de html .pdf
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
HTML
HTMLHTML
HTML
 
Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)Manual html1 (Informatica Aplia Educa)
Manual html1 (Informatica Aplia Educa)
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 

Más de Josue Rodriguez (6)

Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
 
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
 
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
 
Inf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gilInf1 p1 a_ex5_josue ramon rodriguez gil
Inf1 p1 a_ex5_josue ramon rodriguez gil
 
Inf1 p1 a_exc5_josue ramon rodriguez gil
Inf1 p1 a_exc5_josue ramon rodriguez gil Inf1 p1 a_exc5_josue ramon rodriguez gil
Inf1 p1 a_exc5_josue ramon rodriguez gil
 
INF2_P1_EXC2_Josue Ramon Rodriguez Gil 1,A
INF2_P1_EXC2_Josue Ramon Rodriguez Gil 1,AINF2_P1_EXC2_Josue Ramon Rodriguez Gil 1,A
INF2_P1_EXC2_Josue Ramon Rodriguez Gil 1,A
 

Último

Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdfAntenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
perezreyesalberto10
 
Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...
Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...
Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...
mosconilucia5
 
Mapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptxMapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptx
jose880240
 

Último (9)

Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdfAntenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
Antenas, tipos de antenas, diseño basico de una antena y parámetros.pdf
 
Presentacion Seguridad y Privacidad en la Web
Presentacion Seguridad y Privacidad en la WebPresentacion Seguridad y Privacidad en la Web
Presentacion Seguridad y Privacidad en la Web
 
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
¡Descubre el Poder del Masaje Holístico en nuestra Primera Sesión del Seminar...
 
Esquema Organizacional Cosapi (Constructora)
Esquema Organizacional Cosapi (Constructora)Esquema Organizacional Cosapi (Constructora)
Esquema Organizacional Cosapi (Constructora)
 
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
P7_E1_DanielPoza.pdf Los avances en los sistemas de comunicascion y su difusi...
 
Emprende en SPA Segundo día CENEC Mexico
Emprende en SPA Segundo día CENEC MexicoEmprende en SPA Segundo día CENEC Mexico
Emprende en SPA Segundo día CENEC Mexico
 
tabla-bacterias-1-0-179241-downloadable-3772106.pdf
tabla-bacterias-1-0-179241-downloadable-3772106.pdftabla-bacterias-1-0-179241-downloadable-3772106.pdf
tabla-bacterias-1-0-179241-downloadable-3772106.pdf
 
Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...
Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...
Litwin, Edith. Nuevos marcos interpretativos para el análisis de las práctica...
 
Mapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptxMapas Conceptuales finales Rubén finales.pptx
Mapas Conceptuales finales Rubén finales.pptx
 

Inf2 exc12 p1_a_unidad 3_html_josue rodriguez

  • 1. Colegio Bucerias Josue Ramon Rodriguez Gil HTML Profa.Azucena Cervantes 1.A
  • 2. Es un conjunto de líneas de texto que son las instrucciones que debe seguir la computadora para ejecutar dicho programa. Por tanto, en el código fuente de un programa está escrito por completo su funcionamiento. ¿QUÉ ES UNA FUENTE EN CÓDIGO HTML?
  • 3. <HTML> <BODY> <P> <FONT FACE="BOOKMAN OLD STYLE, BOOK ANTIQUA, GARAMOND">ESTE PARRAFO UTILIZA ESTE TIPO DE LETRA...</FONT> </P> <BASEFONT SIZE="2" COLOR="FFFFFF"> <P>TU TEXTO</P> </BASEFONT> </BODY> </HTML> ¿Cuáles son las etiquetas para manipular el tamaño de la letra?
  • 4. <H1> TEXTO MUY GRANDE</H1> <H2>TEXTO GRANDE</H2> <H3>TEXTO ALGO MÁS GRANDE DE LO NORMAL</H3> <H4>TEXTO NORMAL</H4> <H5>TEXTO PEQUEÑO</H5> <H6>TEXTO MUY PEQUEÑO</H6> Describe las etiquetas para generar los encabezados
  • 5. PERMITE ESTABLECER EL TIPO DE LETRA QUE SE UTILIZARÁ LA PAGINA WEB POR EJEMPLO ARIAL, VERDANA, COMIC SANS MS. EJEMPLO: FONT FACE=“ARIAL”>TEXTO</FONT> ¿Qué es laetiqueta fontface?
  • 6. CON ESTE ATRIBUTO PONDREMOS COLOR A LA FUENTE YA SEA EN PALABRA EN INGLES (BLUE) O BIEN EN CÓDIGO HEXADECIMAL #0000FF EJEMPLO: <FONT FACE=“ARIAL” SIZE=“7” COLOR=“#999999”>TEXTO</FONT> ¿Cómo se puede manipularel color de la fuente?
  • 7. 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>". ¿Cuál es la etiqueta de marquee?
  • 8. 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"> Describe la etiqueta de comoinsertar una imagen
  • 9. 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 RESPECTIVAMENTE. A ESTOS ATRIBUTOS LES TENDREMOS QUE DAR UNOS VALORES NUMÉRICOS QUE INDIQUEN EL VALOR EN PIXELES QUE QUEREMOS REFLEJAR. ASÍ, SI QUEREMOS PONER LA IMAGEN A 100X100 PIXELES, LA LÍNEA DE CÓDIGO QUEDARÍA DE LA SIGUIENTE FORMA: <IMG SRC="MIFOTO.JPG" WIDTH="100" HEIGHT="100"/> ¿Cómo puedes manipular el ancho y alto de una imagen?
  • 10. PODEMOS PONER UNA DESCRIPCIÓN DE LA IMAGEN DENTRO DE LA MISMA PARA QUE LA GENTE PUEDE LEERLA AL MANTENER EL RATÓN ENCIMA DE ELLA. ESTA DESCRIPCIÓN PODEMOS ESCRIBIRLA MEDIANTE EL ATRIBUTO "ALT" Y LO ESCRIBIRÍAMOS DE LA SIGUIENTE MANERA: ALT= "X", SIENDO "X" LA DESCRIPCIÓN QUE LE GENTE LEERÁ AL PASAR EL RATÓN POR ENCIMA. EJEMPLO: <IMG SRC="TEMPLATES/APR02062010/IMAGES/LOGO.P NG" ALT="LOGOTIPO APR2"> ¿Qué tiene que ver la función “ALT” dentro de la etiqueta de una imagen?
  • 11. APA Codigo fuente  De: http://es.wikipedia.org/wiki/C%C3%B3digo_fuente  Etiquetas de tamaño  De: https://mx.answers.yahoo.com/question/index?qid=20081111170326AAvOHkR  Encabezados  De: http://html.hazunaweb.com/107.php  Font cize De: http://alfatips.com/temas/fontfacefontcolorfontsize  http://html.hazunaweb.com/116.php  Imágenes en HTML  DE: http://www.ejemplode.com/17-html/81- ejemplo_de_como_colocar_imagenes_con_html.html  Etiquetas HTML  DE: http://html.hazunaweb.com/111.php  Etiquetas html  De: http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=484:etiq uetas-html-basicas-imagenes-img-src-alt-width-height-deprecated-border-align-rutas- cu00714b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192