SlideShare una empresa de Scribd logo
1 de 9
Descargar para leer sin conexión
HTML
COLEGIO BUCERIAS
MAESTRA Ing. Azucena Cervantes
Alumna Andrea Sofia Perez Samano
Informatica 2
parcial 3
7 de mayo del 2015
¿Que es una fuente en
código HTML?
• El código fuente de un programa informático (o
software) 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.
• El término código fuente también se usa para
hacer referencia al código fuente de otros
elementos del software, como por ejemplo el
código fuente de una página web que está escrito
en lenguaje de marcado HTML o en Javascript, u
otros lenguajes de programación web, y que es
posteriormente ejecutado por el navegador web
para visualizar dicha página cuando es visitada.
¿Cuales son las etiquetas para
manipular el tamaño de la letra?
• 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>
• No hay que olvidar poner el cierre </Hx> a cada elemento utilizado.
• Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del cierre
automáticamente el visualizador inserta un salto de párrafo.
Etiquetas para generar
encabezados• Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título
del artículo, categoría, etc. Pues bien, para escribir encabezados disponemos de 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.
• A continuación mostramos un código ejemplo de los seis diferentes encabezados:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://
www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title>
</head>
<body>
<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>
</body>
</html>
Etiqueta font face
• @font-face permite al autor especificar fuentes
online para visualizar en sus páginas web. Al
permitir a los autores proporcionar sus propias
fuentes, @font-face elimina la necesidad de
depender del numero limitado de fuentes de
usuarios instaladas en sus computadoras.
• <html>
• <head>
• <title>Web Font Sample</
title>
• <style type="text/css"
media="screen, print">
• @font-face {
• font-family: "Bitstream Vera
Serif Bold";
• src: url("http://
developer.mozilla.org/@api/
deki/files/2934/
=VeraSeBd.ttf") }
• body { font-family:
"Bitstream Vera Serif Bold",
serif }
• </style>
• </head>
• <body>
• This is Bitstream Vera Serif
Bold.
• </body>
• </html>
Este ejemplo
simplemente
especifica una
fuente que puede
ser descargada
para utilizar,
aplicando la
fuente a todo el
cuerpo del
documento.
¿Como se puede manipular
el ancho y alto de 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 pixels que queremos reflejar.
• Así, 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"/>
La función ALT dentro de la etiqueta
de una imagen y un ejemplos
• El atributo alt especifica un texto alternativo que se representa cuando la imagen no
puede ser mostrada (ver abajo para más información sobre cómo especificar texto
alternativo). Los agentes de usuario deben representar el texto alternativo cuando no
puedan soportar imágenes, cuando no puedan soportar un tipo de imágenes, o
cuando estén configurados para no mostrar imágenes.
• El siguiente ejemplo muestra cómo puede utilizarse el atributo longdesc para una
descripción:
• <BODY>
• <P>
• <IMG src="mapadelsitio.gif"
• alt="Mapa del Sitio de Laboratorios HP"
• longdesc="mapadelsitio.html">
• </BODY>
• El atributo alt proporciona una descripción corta de la imagen. Esta información
debería ser suficiente como para que los usuarios puedan decidir si quieren seguir el
vínculo dado por el atributo longdesc hacia la descripción más larga, en este caso
WIKIPEDIA. Fuente código
RECUPERADO:06 may 2015
http://es.wikipedia.org/wiki/C%C3%B3digo_fuente
DESARROLLWED.
RECUPERADO:06 may 2015
http://www.desarrolloweb.com/articulos/556.php
DEVELOPER.MOZILLA.Font-Face
RECUPERADO:06 may 2015
https://developer.mozilla.org/es/docs/Web/CSS/@font-face
LINEDECODIGO.Alto y ancho
RECUPERADO:06 may 2015
http://lineadecodigo.com/html/alto-y-ancho-de-una-imagen-con-html/
CONCLASE.html
RECUPERADO:06 may 2015
http://html.conclase.net/w3c/html401-es/struct/objects.html
APRENDERAPROGRMAR. Encabezados
RECUPERADO:06 may 2015
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
FORMATO APA

Más contenido relacionado

La actualidad más candente

La actualidad más candente (9)

Tema 02 trabajando con texto en html
Tema 02 trabajando con texto en htmlTema 02 trabajando con texto en html
Tema 02 trabajando con texto en html
 
CODIGOS HTML
CODIGOS HTMLCODIGOS HTML
CODIGOS HTML
 
Tutorial De Ascii
Tutorial De AsciiTutorial De Ascii
Tutorial De Ascii
 
Exc12 p1 b_ana gabriela ramos lozano
Exc12 p1 b_ana gabriela ramos lozanoExc12 p1 b_ana gabriela ramos lozano
Exc12 p1 b_ana gabriela ramos lozano
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Tutorialhtml
TutorialhtmlTutorialhtml
Tutorialhtml
 
Presentacion de etiquetas
Presentacion de etiquetasPresentacion de etiquetas
Presentacion de etiquetas
 
Seminario de Diseño de HTML Friendly
Seminario de Diseño de HTML FriendlySeminario de Diseño de HTML Friendly
Seminario de Diseño de HTML Friendly
 

Destacado

Localization of mobile robots
Localization of mobile robotsLocalization of mobile robots
Localization of mobile robotsDilupa Herath
 
Applied numerical methods lec4
Applied numerical methods lec4Applied numerical methods lec4
Applied numerical methods lec4Yasser Ahmed
 
See No Evil - The Moors Murders
See No Evil - The Moors MurdersSee No Evil - The Moors Murders
See No Evil - The Moors Murdersemcdonald4
 
TIC en el primer ciclo de enseñanza
TIC en el primer ciclo de enseñanzaTIC en el primer ciclo de enseñanza
TIC en el primer ciclo de enseñanzacatalinabarahona71
 
Learning Using Smartphones. SITE 2013
Learning Using Smartphones. SITE 2013Learning Using Smartphones. SITE 2013
Learning Using Smartphones. SITE 2013sandrasawaya
 
Linked Classrooms Model. SITE 2014
Linked Classrooms Model. SITE 2014Linked Classrooms Model. SITE 2014
Linked Classrooms Model. SITE 2014sandrasawaya
 
(2) burglar steals money box as householder sleep upstairs
(2) burglar steals money box as  householder sleep upstairs(2) burglar steals money box as  householder sleep upstairs
(2) burglar steals money box as householder sleep upstairsgentlemen8p
 
(3) coca cola, christmas is not coming to grimsby
(3) coca cola, christmas is not coming to grimsby(3) coca cola, christmas is not coming to grimsby
(3) coca cola, christmas is not coming to grimsbygentlemen8p
 
Video presentació activitat 4
Video presentació activitat 4Video presentació activitat 4
Video presentació activitat 4dunaimurta
 
Nicolas e olavio
Nicolas e olavioNicolas e olavio
Nicolas e olavioostrovildo
 
Personal Portals for Synchromodal Learning. MSU IT Conference 2013
Personal Portals for Synchromodal Learning. MSU IT Conference 2013Personal Portals for Synchromodal Learning. MSU IT Conference 2013
Personal Portals for Synchromodal Learning. MSU IT Conference 2013sandrasawaya
 
Social Media Made Easier
Social Media Made EasierSocial Media Made Easier
Social Media Made EasierJim David
 
Applied numerical methods lec3
Applied numerical methods lec3Applied numerical methods lec3
Applied numerical methods lec3Yasser Ahmed
 

Destacado (18)

Localization of mobile robots
Localization of mobile robotsLocalization of mobile robots
Localization of mobile robots
 
Base de datos
Base de datosBase de datos
Base de datos
 
Yury suarez
Yury suarezYury suarez
Yury suarez
 
Applied numerical methods lec4
Applied numerical methods lec4Applied numerical methods lec4
Applied numerical methods lec4
 
See No Evil - The Moors Murders
See No Evil - The Moors MurdersSee No Evil - The Moors Murders
See No Evil - The Moors Murders
 
TIC en el primer ciclo de enseñanza
TIC en el primer ciclo de enseñanzaTIC en el primer ciclo de enseñanza
TIC en el primer ciclo de enseñanza
 
Learning Using Smartphones. SITE 2013
Learning Using Smartphones. SITE 2013Learning Using Smartphones. SITE 2013
Learning Using Smartphones. SITE 2013
 
Linked Classrooms Model. SITE 2014
Linked Classrooms Model. SITE 2014Linked Classrooms Model. SITE 2014
Linked Classrooms Model. SITE 2014
 
(2) burglar steals money box as householder sleep upstairs
(2) burglar steals money box as  householder sleep upstairs(2) burglar steals money box as  householder sleep upstairs
(2) burglar steals money box as householder sleep upstairs
 
(1) main story
(1) main story(1) main story
(1) main story
 
(3) coca cola, christmas is not coming to grimsby
(3) coca cola, christmas is not coming to grimsby(3) coca cola, christmas is not coming to grimsby
(3) coca cola, christmas is not coming to grimsby
 
Video presentació activitat 4
Video presentació activitat 4Video presentació activitat 4
Video presentació activitat 4
 
Nicolas e olavio
Nicolas e olavioNicolas e olavio
Nicolas e olavio
 
Personal Portals for Synchromodal Learning. MSU IT Conference 2013
Personal Portals for Synchromodal Learning. MSU IT Conference 2013Personal Portals for Synchromodal Learning. MSU IT Conference 2013
Personal Portals for Synchromodal Learning. MSU IT Conference 2013
 
Social Media Made Easier
Social Media Made EasierSocial Media Made Easier
Social Media Made Easier
 
Applied numerical methods lec3
Applied numerical methods lec3Applied numerical methods lec3
Applied numerical methods lec3
 
Vietnam report
Vietnam reportVietnam report
Vietnam report
 
Digital painting
Digital paintingDigital painting
Digital painting
 

Similar a Html- Andrea Sofia

Similar a Html- Andrea Sofia (20)

Lineas separadoras etiquetas hr comentarios html atributos noshade
Lineas separadoras etiquetas hr comentarios html atributos noshadeLineas separadoras etiquetas hr comentarios html atributos noshade
Lineas separadoras etiquetas hr comentarios html atributos noshade
 
Consulta de html
Consulta de html Consulta de html
Consulta de html
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Diseño web guias 1-3
Diseño web guias 1-3Diseño web guias 1-3
Diseño web guias 1-3
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Temas de html
Temas de htmlTemas de html
Temas de html
 
Consulta
ConsultaConsulta
Consulta
 
Consulta_
Consulta_Consulta_
Consulta_
 
Inf2 exc12 p1_a_unidad 3_html_josue rodriguez
Inf2 exc12 p1_a_unidad 3_html_josue rodriguezInf2 exc12 p1_a_unidad 3_html_josue rodriguez
Inf2 exc12 p1_a_unidad 3_html_josue rodriguez
 
Html Sharon 4101
Html Sharon 4101Html Sharon 4101
Html Sharon 4101
 
Trabajo.docx
Trabajo.docxTrabajo.docx
Trabajo.docx
 
HTML
HTMLHTML
HTML
 
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
 
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
 
Producto 4
Producto 4Producto 4
Producto 4
 
DISEÑO WEB - HTML 5 - PRINCIPIOS BASICOS.pptx
DISEÑO WEB - HTML 5 - PRINCIPIOS BASICOS.pptxDISEÑO WEB - HTML 5 - PRINCIPIOS BASICOS.pptx
DISEÑO WEB - HTML 5 - PRINCIPIOS BASICOS.pptx
 
Presentación HTML
Presentación HTML Presentación HTML
Presentación HTML
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 

Html- Andrea Sofia

  • 1. HTML COLEGIO BUCERIAS MAESTRA Ing. Azucena Cervantes Alumna Andrea Sofia Perez Samano Informatica 2 parcial 3 7 de mayo del 2015
  • 2. ¿Que es una fuente en código HTML? • El código fuente de un programa informático (o software) 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. • El término código fuente también se usa para hacer referencia al código fuente de otros elementos del software, como por ejemplo el código fuente de una página web que está escrito en lenguaje de marcado HTML o en Javascript, u otros lenguajes de programación web, y que es posteriormente ejecutado por el navegador web para visualizar dicha página cuando es visitada.
  • 3. ¿Cuales son las etiquetas para manipular el tamaño de la letra? • 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> • No hay que olvidar poner el cierre </Hx> a cada elemento utilizado. • Este tipo de elemento se suele utilizar para escribir encabezamientos, ya que después del cierre automáticamente el visualizador inserta un salto de párrafo.
  • 4. Etiquetas para generar encabezados• Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados disponemos de 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. • A continuación mostramos un código ejemplo de los seis diferentes encabezados: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Ejemplo del uso de encabezados - aprenderaprogramar.com</title> </head> <body> <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> </body> </html>
  • 5. Etiqueta font face • @font-face permite al autor especificar fuentes online para visualizar en sus páginas web. Al permitir a los autores proporcionar sus propias fuentes, @font-face elimina la necesidad de depender del numero limitado de fuentes de usuarios instaladas en sus computadoras.
  • 6. • <html> • <head> • <title>Web Font Sample</ title> • <style type="text/css" media="screen, print"> • @font-face { • font-family: "Bitstream Vera Serif Bold"; • src: url("http:// developer.mozilla.org/@api/ deki/files/2934/ =VeraSeBd.ttf") } • body { font-family: "Bitstream Vera Serif Bold", serif } • </style> • </head> • <body> • This is Bitstream Vera Serif Bold. • </body> • </html> Este ejemplo simplemente especifica una fuente que puede ser descargada para utilizar, aplicando la fuente a todo el cuerpo del documento.
  • 7. ¿Como se puede manipular el ancho y alto de 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 pixels que queremos reflejar. • Así, 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"/>
  • 8. La función ALT dentro de la etiqueta de una imagen y un ejemplos • El atributo alt especifica un texto alternativo que se representa cuando la imagen no puede ser mostrada (ver abajo para más información sobre cómo especificar texto alternativo). Los agentes de usuario deben representar el texto alternativo cuando no puedan soportar imágenes, cuando no puedan soportar un tipo de imágenes, o cuando estén configurados para no mostrar imágenes. • El siguiente ejemplo muestra cómo puede utilizarse el atributo longdesc para una descripción: • <BODY> • <P> • <IMG src="mapadelsitio.gif" • alt="Mapa del Sitio de Laboratorios HP" • longdesc="mapadelsitio.html"> • </BODY> • El atributo alt proporciona una descripción corta de la imagen. Esta información debería ser suficiente como para que los usuarios puedan decidir si quieren seguir el vínculo dado por el atributo longdesc hacia la descripción más larga, en este caso
  • 9. WIKIPEDIA. Fuente código RECUPERADO:06 may 2015 http://es.wikipedia.org/wiki/C%C3%B3digo_fuente DESARROLLWED. RECUPERADO:06 may 2015 http://www.desarrolloweb.com/articulos/556.php DEVELOPER.MOZILLA.Font-Face RECUPERADO:06 may 2015 https://developer.mozilla.org/es/docs/Web/CSS/@font-face LINEDECODIGO.Alto y ancho RECUPERADO:06 may 2015 http://lineadecodigo.com/html/alto-y-ancho-de-una-imagen-con-html/ CONCLASE.html RECUPERADO:06 may 2015 http://html.conclase.net/w3c/html401-es/struct/objects.html APRENDERAPROGRMAR. Encabezados RECUPERADO:06 may 2015 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 FORMATO APA