SlideShare una empresa de Scribd logo
1 de 4
Consigna #4 
Etiquetas básicas de HTML 
Por: Jorge A. Robles y Miguel A. Osuna 
Investigar las siguientes etiquetas y sus atributos: 
Imagen - La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y 
algunos que ya no se recomienda usar: 
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. Sustituir 
por CSS. 
alt 
Entre comillas podremos escribir un texto 
que se mostrará si la imagen no llega a 
cargar, mientras se carga o, cuando 
visualizando ya la imagen, pasamos el ratón 
por encima. 
Atributo requerido, se 
recomienda incluirlo aunque 
si no se hace la imagen se 
mostrará. 
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. 
border 
Con border especificamos el ancho del 
borde que rodea la imagen. Si se indica 0 
equivale a “sin borde”. 
Atributo obsoleto. Sustituir 
por CSS. 
Body - La etiqueta <body> define el cuerpo de un documento. 
Dentro del cuerpo del documento se incluye todo el contenido del mismo, por ejemplo textos, 
enlaces, imágenes, tablas, etc. 
Encabezados - Los siguientes atributos se ubican dentro de las etiquetas de estructura, de 
forma que los elementos pueden mostrarse en ubicaciones específicas: 
Atributo Valor Efecto visual 
ALIGN 
LEFT 
RIGHT 
CENTER 
JUSTIFY 
Texto alineado a la izquierda 
Texto alineado a la derecha 
Texto centrado 
Texto justificado 
NOWRAP Evita que el navegador crea un salto de línea. 
ID 
Otorga una identificación a la etiqueta. Este atributo es especialmente útil 
para la programación con JavaScript 
LANG Especifica un idioma diferente 
CLASS Asigna una clase a los contenidos (para hojas de estilo) 
CLEAR 
Se usa cuando el texto está rodeando una imagen. Ubica el texto tan abajo 
de la página como sea necesario para tener un margen claro. 
Este es un ejemplo de encabezado: 
<H1 ALIGN=JUSTIFY> Texto justificado </H1> 
Fuente – <FONT> 
La marca tipográfica FONT es una de las más utilizadas y frecuentes en el actual web publishing. 
En la sección Impostar el fondo del documento (elemento BODY), hemos visto que el atributo
TEXT da un color único a todo el texto del documento. La marca FONT tiene, en parte, una función 
similar, aunque es mucho más amplia y conceptualmente diversa. 
La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del 
documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto 
comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo, 
conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro 
lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo 
utilizado, así como su tamaño y color. 
Aquí tienes la sintaxis correcta de la marca: 
<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). 
Tablas - La etiqueta <table> se utiliza para definir una tabla. 
Las tablas se componen con las siguientes etiquetas: 
 <table> Define una tabla 
 <tr> Define una fila 
 <th> Define un encabezamiento 
 <td> Define una celda 
Las tablas más complejas pueden contener también estas etiquetas: 
 <caption> 
 <col> 
 <colgroup> 
 <thead> 
 <tbody> 
 <tfoot> 
Hipervínculo - 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 utilizando la etiqueta <A>. 
Párrafo - HTML considera que los párrafos son bloques de texto. Los navegadores hacen lo 
posible para adaptar el contenido de los párrafos a la ventana, a menos que los atributos 
NOWRAP o NOBR estén explícitamente especificados. Dentro de un párrafo, todos los espacios, 
tabuladores y saltos de línea cuentan como un espacio simple. 
Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. 
Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>.
Texto – Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización 
de cualquiera de ellas es indiferente. La primera es la etiqueta <b> y la otra es la etiqueta <strong>. 
Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la 
etiqueta </i>). 
Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y 
cerrarlo con su correspondiente etiqueta. 
TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple 
entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>. 
Gracias a las etiquetas <big> y <small> se puede cambiar el tamaño de las letras. 
http://es.kioskea.net/contents/248-encabezados-en-html 
http://www.virtualnauta.com/html-etiqueta-body 
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 
http://www.virtualnauta.com/html-etiqueta-table 
http://es.kioskea.net/contents/244-parrafos-en-html 
http://html.hazunaweb.com/103.php

Más contenido relacionado

La actualidad más candente (20)

Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1 Curso HTML 5 & jQuery - Leccion 1
Curso HTML 5 & jQuery - Leccion 1
 
HTML
 HTML HTML
HTML
 
Manual html basico GUTIECUADOR
Manual html basico GUTIECUADORManual html basico GUTIECUADOR
Manual html basico GUTIECUADOR
 
HTML
HTMLHTML
HTML
 
Html Exposicion
Html ExposicionHtml Exposicion
Html Exposicion
 
¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?¿Qué es el lenguaje HTML?
¿Qué es el lenguaje HTML?
 
Introducción a CSS
Introducción a CSSIntroducción a CSS
Introducción a CSS
 
Etiquetas Html Udp
Etiquetas Html UdpEtiquetas Html Udp
Etiquetas Html Udp
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
¿Qué es HTML5?
¿Qué es HTML5?¿Qué es HTML5?
¿Qué es HTML5?
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Presentacion de etiquetas
Presentacion de etiquetasPresentacion de etiquetas
Presentacion de etiquetas
 
HTML
HTMLHTML
HTML
 
Programacion en html
Programacion en htmlProgramacion en html
Programacion en html
 
¿Qué es CSS?
¿Qué es CSS?¿Qué es CSS?
¿Qué es CSS?
 
2. html
2. html2. html
2. html
 
Html
HtmlHtml
Html
 
Html apunte 2
Html apunte 2Html apunte 2
Html apunte 2
 

Destacado

Digiajastu infotund 26082013 - elektroonilised õppematerjalid
Digiajastu infotund 26082013 - elektroonilised õppematerjalidDigiajastu infotund 26082013 - elektroonilised õppematerjalid
Digiajastu infotund 26082013 - elektroonilised õppematerjalideOppeArenduskeskus
 
Loodusõpetus lasteaias
Loodusõpetus lasteaiasLoodusõpetus lasteaias
Loodusõpetus lasteaiaskaljuste91
 
Moodsa ajastu riskid
Moodsa ajastu riskidMoodsa ajastu riskid
Moodsa ajastu riskidLeego
 
Elstr Anwendungsfall Globale Artikelinformation
Elstr Anwendungsfall Globale ArtikelinformationElstr Anwendungsfall Globale Artikelinformation
Elstr Anwendungsfall Globale ArtikelinformationIntelliact AG
 
Cibercrime: DANGER IN THE RED!
Cibercrime: DANGER IN THE RED!Cibercrime: DANGER IN THE RED!
Cibercrime: DANGER IN THE RED!M.Amparo
 
Tööstusühiskonnast teadmusühiskonda
Tööstusühiskonnast teadmusühiskondaTööstusühiskonnast teadmusühiskonda
Tööstusühiskonnast teadmusühiskondahelinaraal
 
Redes inalambricas
Redes inalambricasRedes inalambricas
Redes inalambricasleiderserna
 
Επιχειρηματικότητα και ομότιμες σχέσεις
Επιχειρηματικότητα και ομότιμες σχέσειςΕπιχειρηματικότητα και ομότιμες σχέσεις
Επιχειρηματικότητα και ομότιμες σχέσειςSpiros Kapetanakis
 
Pecha Kucha at Handheld2008 by Geoff Stead of Tribal
Pecha Kucha at Handheld2008 by Geoff Stead of TribalPecha Kucha at Handheld2008 by Geoff Stead of Tribal
Pecha Kucha at Handheld2008 by Geoff Stead of Tribalgeoff stead
 
Zibynca Boletín Vo. 2 No.12
Zibynca Boletín Vo. 2 No.12Zibynca Boletín Vo. 2 No.12
Zibynca Boletín Vo. 2 No.12María Gómez
 
Diptico mie africa
Diptico mie africaDiptico mie africa
Diptico mie africaCEMER
 
Vastseliina Gümnaasiumi konkursitöö "Mööbel"
Vastseliina Gümnaasiumi konkursitöö "Mööbel"Vastseliina Gümnaasiumi konkursitöö "Mööbel"
Vastseliina Gümnaasiumi konkursitöö "Mööbel"neemel
 
Letter of invitation
Letter of invitationLetter of invitation
Letter of invitationgerttusimm
 
E-õppe muutustrendid ja nende võimalik mõju õppekavale
E-õppe muutustrendid ja nende võimalik mõju õppekavaleE-õppe muutustrendid ja nende võimalik mõju õppekavale
E-õppe muutustrendid ja nende võimalik mõju õppekavaleMart Laanpere
 
Aviacion
AviacionAviacion
Aviacionjulio
 
Trabalho infantil no brasil trabalho - âmbito jurídico
Trabalho infantil no brasil   trabalho - âmbito jurídicoTrabalho infantil no brasil   trabalho - âmbito jurídico
Trabalho infantil no brasil trabalho - âmbito jurídicoLuis Araujo
 
Loodushelid1
Loodushelid1Loodushelid1
Loodushelid1kadriart
 

Destacado (20)

Digiajastu infotund 26082013 - elektroonilised õppematerjalid
Digiajastu infotund 26082013 - elektroonilised õppematerjalidDigiajastu infotund 26082013 - elektroonilised õppematerjalid
Digiajastu infotund 26082013 - elektroonilised õppematerjalid
 
Loodusõpetus lasteaias
Loodusõpetus lasteaiasLoodusõpetus lasteaias
Loodusõpetus lasteaias
 
Moodsa ajastu riskid
Moodsa ajastu riskidMoodsa ajastu riskid
Moodsa ajastu riskid
 
Elstr Anwendungsfall Globale Artikelinformation
Elstr Anwendungsfall Globale ArtikelinformationElstr Anwendungsfall Globale Artikelinformation
Elstr Anwendungsfall Globale Artikelinformation
 
Cibercrime: DANGER IN THE RED!
Cibercrime: DANGER IN THE RED!Cibercrime: DANGER IN THE RED!
Cibercrime: DANGER IN THE RED!
 
Webquest 03
Webquest 03Webquest 03
Webquest 03
 
Estómago
EstómagoEstómago
Estómago
 
Tööstusühiskonnast teadmusühiskonda
Tööstusühiskonnast teadmusühiskondaTööstusühiskonnast teadmusühiskonda
Tööstusühiskonnast teadmusühiskonda
 
Redes inalambricas
Redes inalambricasRedes inalambricas
Redes inalambricas
 
Επιχειρηματικότητα και ομότιμες σχέσεις
Επιχειρηματικότητα και ομότιμες σχέσειςΕπιχειρηματικότητα και ομότιμες σχέσεις
Επιχειρηματικότητα και ομότιμες σχέσεις
 
Pecha Kucha at Handheld2008 by Geoff Stead of Tribal
Pecha Kucha at Handheld2008 by Geoff Stead of TribalPecha Kucha at Handheld2008 by Geoff Stead of Tribal
Pecha Kucha at Handheld2008 by Geoff Stead of Tribal
 
Zibynca Boletín Vo. 2 No.12
Zibynca Boletín Vo. 2 No.12Zibynca Boletín Vo. 2 No.12
Zibynca Boletín Vo. 2 No.12
 
Diptico mie africa
Diptico mie africaDiptico mie africa
Diptico mie africa
 
Vastseliina Gümnaasiumi konkursitöö "Mööbel"
Vastseliina Gümnaasiumi konkursitöö "Mööbel"Vastseliina Gümnaasiumi konkursitöö "Mööbel"
Vastseliina Gümnaasiumi konkursitöö "Mööbel"
 
Letter of invitation
Letter of invitationLetter of invitation
Letter of invitation
 
E-õppe muutustrendid ja nende võimalik mõju õppekavale
E-õppe muutustrendid ja nende võimalik mõju õppekavaleE-õppe muutustrendid ja nende võimalik mõju õppekavale
E-õppe muutustrendid ja nende võimalik mõju õppekavale
 
Aviacion
AviacionAviacion
Aviacion
 
Trabalho infantil no brasil trabalho - âmbito jurídico
Trabalho infantil no brasil   trabalho - âmbito jurídicoTrabalho infantil no brasil   trabalho - âmbito jurídico
Trabalho infantil no brasil trabalho - âmbito jurídico
 
Loodushelid1
Loodushelid1Loodushelid1
Loodushelid1
 
Kla(20100210)
Kla(20100210)Kla(20100210)
Kla(20100210)
 

Similar a Producto 4 jorge robles y miguel a.

Similar a Producto 4 jorge robles y miguel a. (20)

Html power
Html powerHtml power
Html power
 
Html
Html Html
Html
 
Html
HtmlHtml
Html
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Conceptos básicos HTML
Conceptos básicos HTMLConceptos básicos HTML
Conceptos básicos HTML
 
Html doc. descargado (reparado)
Html doc. descargado (reparado)Html doc. descargado (reparado)
Html doc. descargado (reparado)
 
Etiquetas básicas de HTML
Etiquetas básicas de HTMLEtiquetas básicas de HTML
Etiquetas básicas de HTML
 
Html
HtmlHtml
Html
 
Producto 4 FR
Producto 4 FRProducto 4 FR
Producto 4 FR
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Conceptos basicos
Conceptos basicosConceptos basicos
Conceptos basicos
 
Conceptos basicos
Conceptos basicosConceptos basicos
Conceptos basicos
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Lissette lainez
Lissette lainezLissette lainez
Lissette lainez
 
Codigos de html mitzi inf 1
Codigos de html mitzi inf 1Codigos de html mitzi inf 1
Codigos de html mitzi inf 1
 
Unidad 3
Unidad 3Unidad 3
Unidad 3
 
Gordo
GordoGordo
Gordo
 
Informática etiquetas html
Informática etiquetas htmlInformática etiquetas html
Informática etiquetas html
 
Producto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon leeProducto 4 etiquetas basicas joon lee
Producto 4 etiquetas basicas joon lee
 

Producto 4 jorge robles y miguel a.

  • 1. Consigna #4 Etiquetas básicas de HTML Por: Jorge A. Robles y Miguel A. Osuna Investigar las siguientes etiquetas y sus atributos: Imagen - La etiqueta img dispone de estos atributos, algunos obligatorios, otros opcionales y algunos que ya no se recomienda usar: 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. Sustituir por CSS. alt Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima. Atributo requerido, se recomienda incluirlo aunque si no se hace la imagen se mostrará. 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.
  • 2. 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. border Con border especificamos el ancho del borde que rodea la imagen. Si se indica 0 equivale a “sin borde”. Atributo obsoleto. Sustituir por CSS. Body - La etiqueta <body> define el cuerpo de un documento. Dentro del cuerpo del documento se incluye todo el contenido del mismo, por ejemplo textos, enlaces, imágenes, tablas, etc. Encabezados - Los siguientes atributos se ubican dentro de las etiquetas de estructura, de forma que los elementos pueden mostrarse en ubicaciones específicas: Atributo Valor Efecto visual ALIGN LEFT RIGHT CENTER JUSTIFY Texto alineado a la izquierda Texto alineado a la derecha Texto centrado Texto justificado NOWRAP Evita que el navegador crea un salto de línea. ID Otorga una identificación a la etiqueta. Este atributo es especialmente útil para la programación con JavaScript LANG Especifica un idioma diferente CLASS Asigna una clase a los contenidos (para hojas de estilo) CLEAR Se usa cuando el texto está rodeando una imagen. Ubica el texto tan abajo de la página como sea necesario para tener un margen claro. Este es un ejemplo de encabezado: <H1 ALIGN=JUSTIFY> Texto justificado </H1> Fuente – <FONT> La marca tipográfica FONT es una de las más utilizadas y frecuentes en el actual web publishing. En la sección Impostar el fondo del documento (elemento BODY), hemos visto que el atributo
  • 3. TEXT da un color único a todo el texto del documento. La marca FONT tiene, en parte, una función similar, aunque es mucho más amplia y conceptualmente diversa. La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. En realidad, si la marca FONT abriera y cerrara el documento, todo el texto comprendido dentro quedaría formateado tal y como estuviera indicado. Sin embargo, conceptualmente la marca FONT ha sido concebida para definir partes limitadas de texto. Por otro lado, mientras TEXT determina tan sólo en color del texto, la marca FONT puede definir el tipo utilizado, así como su tamaño y color. Aquí tienes la sintaxis correcta de la marca: <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). Tablas - La etiqueta <table> se utiliza para definir una tabla. Las tablas se componen con las siguientes etiquetas:  <table> Define una tabla  <tr> Define una fila  <th> Define un encabezamiento  <td> Define una celda Las tablas más complejas pueden contener también estas etiquetas:  <caption>  <col>  <colgroup>  <thead>  <tbody>  <tfoot> Hipervínculo - 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 utilizando la etiqueta <A>. Párrafo - HTML considera que los párrafos son bloques de texto. Los navegadores hacen lo posible para adaptar el contenido de los párrafos a la ventana, a menos que los atributos NOWRAP o NOBR estén explícitamente especificados. Dentro de un párrafo, todos los espacios, tabuladores y saltos de línea cuentan como un espacio simple. Para colocar textos en bloques, se utiliza el par de etiquetas <p> y </p>. Los saltos de línea (saltar de una línea a la siguiente) se crean usando la etiqueta <br/>.
  • 4. Texto – Existen dos etiquetas que harán que nuestro texto se convierta en negrita. La utilización de cualquiera de ellas es indiferente. La primera es la etiqueta <b> y la otra es la etiqueta <strong>. Para escribir un texto en cursiva debemos utilizar la etiqueta <i> (y por supuesto cerrarla con la etiqueta </i>). Si queremos que la palabra o el texto quede subrayado, deberemos rodearlo con la etiqueta <u> y cerrarlo con su correspondiente etiqueta. TT son las iniciales de “teletype”. Utilizando esta etiqueta conseguiremos un espaciado simple entre las diferentes letras del texto. Abriremos la etiqueta con <tt> y la cerraremos con </tt>. Gracias a las etiquetas <big> y <small> se puede cambiar el tamaño de las letras. http://es.kioskea.net/contents/248-encabezados-en-html http://www.virtualnauta.com/html-etiqueta-body 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 http://www.virtualnauta.com/html-etiqueta-table http://es.kioskea.net/contents/244-parrafos-en-html http://html.hazunaweb.com/103.php