SlideShare una empresa de Scribd logo
1 de 10
Para incluir imágenes en una página web debemos tener en cuenta que 
las imágenes tienen que tener los formatos GIF, JPG o PNG. Las 
imágenes dentro de una página web se incluyen utilizando la etiqueta 
<img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo: 
<img src="http://www.aprenderaprogramar.com/images/logo.png" 
alt="Logotipo APR2"> 
Atributo Uso Observaciones 
src 
Este atributo es obligatorio e indica el nombre del archivo de 
imagen (entre comillas) o la URL desde la que se va a 
obtener la imagen. 
Obligatorio. Si no se incluye no se 
mostrará imagen alguna. 
align 
Permite controlar la alineación de una imagen con respecto a 
una línea de texto adyacente o a otras imágenes en esa línea. 
Los valores posibles son los ya conocidos left, right, middle, 
top, bottom. 
Atributo obsoleto (deprecated). Sustituir 
por CSS. 
Width 
Este atributo es opcional pero podemos ponerlo para 
especificar al navegador que muestre la imagen con un 
tamaño específico. Significa “ancho de la imagen” que vamos 
a representar. Si no se escribe, se carga la imagen con el 
tamaño original. 
Opcional. Indicar valor en pixeles. 
También se puede indicar con CSS. 
Height Al igual que el atributo width, es opcional. Este atributo indica 
el alto de la imagen. 
Opcional. Indicar valor en pixeles. 
También se puede indicar con CSS.
La etiqueta <body> define el cuerpo de un documento. 
Dentro del cuerpo del documento se incluye todo el contenido del mismo. 
El color de fondo puede establecerse a través del atributo bgcolor, al que 
es posible asignarle un color representado en hexadecimal o por un 
nombre predefinido. 
... 
<body bgcolor="#0000FF"> 
... 
</body> 
</html>
HTML acepta seis encabezados para definir 
la estructura jerárquica de los párrafos en un 
documento: 
Etiqueta Efecto visual 
H1 Prueba 
H2 Prueba 
H3 Prueba 
H4 Prueba 
H5 Prueba 
H6 Prueba
La etiqueta que permite esto se llama FONT 
(Fuente) y presenta atributos que nos permiten 
modificar el tamaño y color del texto incluido entre la 
etiqueta de inicio y fin. 
Inst. HTML Muestra Explicación 
<FONT 
SIZE=2>Muestra</FONT 
> 
Muestra 
Obtendriamos en este 
caso texto de tamaño de 
fuente 2 
<FONT 
SIZE=6>Muestra</FONT 
> 
Muestra 
Este texto es de tamaño 
de fuente 6 
<FONT SIZE=- 
1>Muestra</FONT> 
Muestra 
Obtendriamos también en 
este caso texto de 
tamaño de fuente 2, pero 
lo definiríamos de forma 
relativa: 3-1=2
l atributo width establece el ancho de la 
tabla, en porcentaje o en píxeles. 
Ejemplos: 
<table width="50%"> 
<table width="200px"> 
<table border="1">
Los enlaces o hipervínculos, también 
llamados hipertextos son los textos o los 
objetos sobre los que podemos hacer clic 
para que nos lleven a otra parte del 
documento, a otra página web en el mismo 
sitio o a otra página de Internet, entre otras 
funciones.
La marca <P> sirve para definir un nuevo párrafo de texto, 
indicando al navegador que el mismo debe empezar en una 
nueva línea y colocarse a la derecha, a la izquierda o centrado. 
Si no se especifica otra cosa, la marca <P> alinea el texto por 
defecto a la izquierda. Para indicar otros tipos de alineación, 
existen atributos específicos: 
<P ALIGN=left> 
Define un párrafo y alinea el texto a la izquierda(left). 
<P ALIGN=right> 
Define un párrafo y alinea el texto a la derecha (right). 
<P ALIGN=center> 
Define un párrafo y centra el texto (center).
Las propiedades del texto pueden modificarse a través de la etiqueta 
<font>. Para ello, podemos insertar el texto entre las etiquetas <font> y 
</font>, especificando algunos de los atributos de la etiqueta: 
Atributo Significado Posibles valores 
Face Fuente 
Nombre de la fuente, o 
fuentes 
Color Color de texto 
Número hexadecimal o texto 
predefinido 
Size Tamaño del texto 
Valores del 1 al 7, siendo por 
defecto el 3, 
o desplazamiento respecto al 
tamaño por defecto, 
añadiendo + o - delante del 
valor
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=484:etiquetas-html-basicas- 
imagenes-img-src-alt-width-height-deprecated-border-align-rutas-cu00714b&catid=69:tutorial-basico-programador- 
web-html-desde-cero&Itemid=192 
http://www.aulaclic.es/html/t_2_2.htm 
http://es.kioskea.net/contents/248-encabezados-en-html 
http://www2.uca.es/serv/sc/manual-html/font.htm 
http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.html#Atributos 
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=508:hipervinculos-links-o-enlaces- 
html-etiqueta-a-atributos-href-target-y-title-tipos-de-links-img-cu00717b&catid=69:tutorial-basico-programador- 
web-html-desde-cero&Itemid=192 
http://www.htmlpoint.com/guida/html_07.htm 
http://www.aulaclic.es/html/t_3_3.htm

Más contenido relacionado

La actualidad más candente (20)

02 texto
02 texto02 texto
02 texto
 
Etiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje htmlEtiquetas mas utilizadas del lenguaje html
Etiquetas mas utilizadas del lenguaje html
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
HTML
HTMLHTML
HTML
 
3 johan
3 johan3 johan
3 johan
 
Texto enrriquecido HTML
Texto enrriquecido HTMLTexto enrriquecido HTML
Texto enrriquecido HTML
 
Listado etiquetas html 5
Listado etiquetas html 5Listado etiquetas html 5
Listado etiquetas html 5
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Etiquetas HTML
Etiquetas HTMLEtiquetas HTML
Etiquetas HTML
 
Páginas html
Páginas htmlPáginas html
Páginas html
 
Páginas web con html
Páginas web con htmlPáginas web con html
Páginas web con html
 
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
 
Deber de pagina wed..!!!
Deber de pagina wed..!!!Deber de pagina wed..!!!
Deber de pagina wed..!!!
 
Compu
CompuCompu
Compu
 
Html
HtmlHtml
Html
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Practicas html
Practicas htmlPracticas html
Practicas html
 
Html-CSS
Html-CSSHtml-CSS
Html-CSS
 

Destacado

Ea normas-para-citacion-y-bibliografia
Ea normas-para-citacion-y-bibliografiaEa normas-para-citacion-y-bibliografia
Ea normas-para-citacion-y-bibliografiaNoelia S. del Castillo
 
Tablas dinamicas
Tablas dinamicasTablas dinamicas
Tablas dinamicasrgomezyazir
 
Doman1
Doman1Doman1
Doman1Vale
 
Practica powerpointshey.pptxssss
Practica powerpointshey.pptxssssPractica powerpointshey.pptxssss
Practica powerpointshey.pptxssssElizabetth Jayme
 
Dn13 u3 a29_poe
Dn13 u3 a29_poeDn13 u3 a29_poe
Dn13 u3 a29_poeelisoyyo
 
Material 2 unidad_1
Material 2 unidad_1Material 2 unidad_1
Material 2 unidad_1siamu_evap
 
Practica 1
Practica 1Practica 1
Practica 1AleMuPa
 
Informacion Personal Maria
Informacion Personal MariaInformacion Personal Maria
Informacion Personal MariaCarlos AnDrés
 
Untitled 2 (2)534651
Untitled 2 (2)534651Untitled 2 (2)534651
Untitled 2 (2)534651Camilo Baron
 
Actividad clase 10 los encadenados (1)
Actividad clase 10 los encadenados (1)Actividad clase 10 los encadenados (1)
Actividad clase 10 los encadenados (1)Didactica Ludica
 
Curso online-microsoft-visual-basic-2008-lw
Curso online-microsoft-visual-basic-2008-lwCurso online-microsoft-visual-basic-2008-lw
Curso online-microsoft-visual-basic-2008-lwCursodirecto.com
 
Tecnología vo ip
Tecnología vo ipTecnología vo ip
Tecnología vo ipnalexoopp
 
Sistemas operativos mono.multiusuarios
Sistemas operativos mono.multiusuariosSistemas operativos mono.multiusuarios
Sistemas operativos mono.multiusuariosHonorio Madrigal
 
ปิยะบุตร ถนอมเกียรติ ม.6/2 เลขที่ 24
ปิยะบุตร  ถนอมเกียรติ  ม.6/2  เลขที่ 24ปิยะบุตร  ถนอมเกียรติ  ม.6/2  เลขที่ 24
ปิยะบุตร ถนอมเกียรติ ม.6/2 เลขที่ 24Piyabud Tang
 

Destacado (20)

Ea normas-para-citacion-y-bibliografia
Ea normas-para-citacion-y-bibliografiaEa normas-para-citacion-y-bibliografia
Ea normas-para-citacion-y-bibliografia
 
Tablas dinamicas
Tablas dinamicasTablas dinamicas
Tablas dinamicas
 
Doman1
Doman1Doman1
Doman1
 
Booklel bttf
Booklel bttfBooklel bttf
Booklel bttf
 
Practica powerpointshey.pptxssss
Practica powerpointshey.pptxssssPractica powerpointshey.pptxssss
Practica powerpointshey.pptxssss
 
Dn13 u3 a29_poe
Dn13 u3 a29_poeDn13 u3 a29_poe
Dn13 u3 a29_poe
 
Presentación1
Presentación1Presentación1
Presentación1
 
Material 2 unidad_1
Material 2 unidad_1Material 2 unidad_1
Material 2 unidad_1
 
Practica 1
Practica 1Practica 1
Practica 1
 
Informacion Personal Maria
Informacion Personal MariaInformacion Personal Maria
Informacion Personal Maria
 
Untitled 2 (2)534651
Untitled 2 (2)534651Untitled 2 (2)534651
Untitled 2 (2)534651
 
Actividad clase 10 los encadenados (1)
Actividad clase 10 los encadenados (1)Actividad clase 10 los encadenados (1)
Actividad clase 10 los encadenados (1)
 
Actividad 3
Actividad 3Actividad 3
Actividad 3
 
Curso online-microsoft-visual-basic-2008-lw
Curso online-microsoft-visual-basic-2008-lwCurso online-microsoft-visual-basic-2008-lw
Curso online-microsoft-visual-basic-2008-lw
 
Tecnología vo ip
Tecnología vo ipTecnología vo ip
Tecnología vo ip
 
Sistemas operativos mono.multiusuarios
Sistemas operativos mono.multiusuariosSistemas operativos mono.multiusuarios
Sistemas operativos mono.multiusuarios
 
HisTorias Prudencia
HisTorias PrudenciaHisTorias Prudencia
HisTorias Prudencia
 
ปิยะบุตร ถนอมเกียรติ ม.6/2 เลขที่ 24
ปิยะบุตร  ถนอมเกียรติ  ม.6/2  เลขที่ 24ปิยะบุตร  ถนอมเกียรติ  ม.6/2  เลขที่ 24
ปิยะบุตร ถนอมเกียรติ ม.6/2 เลขที่ 24
 
Estadisticasal25agosto08
Estadisticasal25agosto08Estadisticasal25agosto08
Estadisticasal25agosto08
 
Practica19
Practica19Practica19
Practica19
 

Similar a Producto 4 FR (20)

Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Producto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon leeProducto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon lee
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Etiquetas basicas producto 10
Etiquetas basicas producto 10Etiquetas basicas producto 10
Etiquetas basicas producto 10
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Nmvkhl
NmvkhlNmvkhl
Nmvkhl
 
Inf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_ValenzuelaInf1_P1b_Exc12_Celina_Valenzuela
Inf1_P1b_Exc12_Celina_Valenzuela
 
Etiquetas básicas en html
Etiquetas básicas en htmlEtiquetas básicas en html
Etiquetas básicas en html
 
Presentación unidad tres
Presentación unidad tresPresentación unidad tres
Presentación unidad tres
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Manual html basico GUTIECUADOR
Manual html basico GUTIECUADORManual html basico GUTIECUADOR
Manual html basico GUTIECUADOR
 
El texto HTML
El texto HTMLEl texto HTML
El texto HTML
 
Karol cortez normas apa
Karol cortez normas apaKarol cortez normas apa
Karol cortez normas apa
 
Texto del html
Texto del htmlTexto del html
Texto del html
 

Último

institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenajuniorcuellargomez
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdflauradbernals
 
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAdanielaerazok
 
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenadanielaerazok
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webDecaunlz
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfOscarBlas6
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdfedwinmelgarschlink2
 
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfisrael garcia
 

Último (8)

institucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalenainstitucion educativa la esperanza sede magdalena
institucion educativa la esperanza sede magdalena
 
Guia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdfGuia para el registro en el sitio slideshare.pdf
Guia para el registro en el sitio slideshare.pdf
 
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENAINSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
INSTITUCION EDUCATIVA LA ESPERANZA SEDE MAGDALENA
 
Institucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalenaInstitucion educativa la esperanza sede la magdalena
Institucion educativa la esperanza sede la magdalena
 
Buscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la webBuscadores, SEM SEO: el desafío de ser visto en la web
Buscadores, SEM SEO: el desafío de ser visto en la web
 
COMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdfCOMPETENCIAS CIUDADANASadadadadadadada .pdf
COMPETENCIAS CIUDADANASadadadadadadada .pdf
 
12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf12 Clasificacion de las Computadoras.pdf
12 Clasificacion de las Computadoras.pdf
 
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdfNUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
NUVO PROGRAMAS DE ESCUELAS NUEVO-ACUERDO-CTE.pdf
 

Producto 4 FR

  • 1.
  • 2. Para incluir imágenes en una página web debemos tener en cuenta que las imágenes tienen que tener los formatos GIF, JPG o PNG. Las imágenes dentro de una página web se incluyen utilizando la etiqueta <img>, que no tiene una etiqueta correspondiente de cierre. Ejemplo: <img src="http://www.aprenderaprogramar.com/images/logo.png" alt="Logotipo APR2"> Atributo Uso Observaciones src Este atributo es obligatorio e indica el nombre del archivo de imagen (entre comillas) o la URL desde la que se va a obtener la imagen. Obligatorio. Si no se incluye no se mostrará imagen alguna. align Permite controlar la alineación de una imagen con respecto a una línea de texto adyacente o a otras imágenes en esa línea. Los valores posibles son los ya conocidos left, right, middle, top, bottom. Atributo obsoleto (deprecated). Sustituir por CSS. Width Este atributo es opcional pero podemos ponerlo para especificar al navegador que muestre la imagen con un tamaño específico. Significa “ancho de la imagen” que vamos a representar. Si no se escribe, se carga la imagen con el tamaño original. Opcional. Indicar valor en pixeles. También se puede indicar con CSS. Height Al igual que el atributo width, es opcional. Este atributo indica el alto de la imagen. Opcional. Indicar valor en pixeles. También se puede indicar con CSS.
  • 3. La etiqueta <body> define el cuerpo de un documento. Dentro del cuerpo del documento se incluye todo el contenido del mismo. El color de fondo puede establecerse a través del atributo bgcolor, al que es posible asignarle un color representado en hexadecimal o por un nombre predefinido. ... <body bgcolor="#0000FF"> ... </body> </html>
  • 4. HTML acepta seis encabezados para definir la estructura jerárquica de los párrafos en un documento: Etiqueta Efecto visual H1 Prueba H2 Prueba H3 Prueba H4 Prueba H5 Prueba H6 Prueba
  • 5. La etiqueta que permite esto se llama FONT (Fuente) y presenta atributos que nos permiten modificar el tamaño y color del texto incluido entre la etiqueta de inicio y fin. Inst. HTML Muestra Explicación <FONT SIZE=2>Muestra</FONT > Muestra Obtendriamos en este caso texto de tamaño de fuente 2 <FONT SIZE=6>Muestra</FONT > Muestra Este texto es de tamaño de fuente 6 <FONT SIZE=- 1>Muestra</FONT> Muestra Obtendriamos también en este caso texto de tamaño de fuente 2, pero lo definiríamos de forma relativa: 3-1=2
  • 6. l atributo width establece el ancho de la tabla, en porcentaje o en píxeles. Ejemplos: <table width="50%"> <table width="200px"> <table border="1">
  • 7. Los enlaces o hipervínculos, también llamados hipertextos son los textos o los objetos sobre los que podemos hacer clic para que nos lleven a otra parte del documento, a otra página web en el mismo sitio o a otra página de Internet, entre otras funciones.
  • 8. La marca <P> sirve para definir un nuevo párrafo de texto, indicando al navegador que el mismo debe empezar en una nueva línea y colocarse a la derecha, a la izquierda o centrado. Si no se especifica otra cosa, la marca <P> alinea el texto por defecto a la izquierda. Para indicar otros tipos de alineación, existen atributos específicos: <P ALIGN=left> Define un párrafo y alinea el texto a la izquierda(left). <P ALIGN=right> Define un párrafo y alinea el texto a la derecha (right). <P ALIGN=center> Define un párrafo y centra el texto (center).
  • 9. Las propiedades del texto pueden modificarse a través de la etiqueta <font>. Para ello, podemos insertar el texto entre las etiquetas <font> y </font>, especificando algunos de los atributos de la etiqueta: Atributo Significado Posibles valores Face Fuente Nombre de la fuente, o fuentes Color Color de texto Número hexadecimal o texto predefinido Size Tamaño del texto Valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor
  • 10. http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=484:etiquetas-html-basicas- imagenes-img-src-alt-width-height-deprecated-border-align-rutas-cu00714b&catid=69:tutorial-basico-programador- web-html-desde-cero&Itemid=192 http://www.aulaclic.es/html/t_2_2.htm http://es.kioskea.net/contents/248-encabezados-en-html http://www2.uca.es/serv/sc/manual-html/font.htm http://www.mclibre.org/consultar/amaya/xhtml/xhtml_tablas_atributos.html#Atributos http://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=508:hipervinculos-links-o-enlaces- html-etiqueta-a-atributos-href-target-y-title-tipos-de-links-img-cu00717b&catid=69:tutorial-basico-programador- web-html-desde-cero&Itemid=192 http://www.htmlpoint.com/guida/html_07.htm http://www.aulaclic.es/html/t_3_3.htm