SlideShare una empresa de Scribd logo
1 de 7
ETIQUETAS DE HTML
MARCAS BÁSICAS
Al principio y
al final de
todo
documento.
<head> </head>
Al principio y al final de
todo documento.
<meta>
Permite aportar meta
información al
documento,
<html></html>
<title> </title>
documento.
Dentro del head se
ponen las
etiquetas
<body> </body>
Dentro de esta etiqueta se
insertan los contenidos del
documento
<body> </body><body> <
PROPIEDADES DE LA PÁGINA
<body bgcolor="#xxyyzz"> define el color de
fondo de la página.
<body text="#xxyyzz"> define el color
por defecto del texto en la página.
<body
vlink="#xxyyzz">
define el color de los
enlaces visitados.
<body
alink="#xxyyzz">
define el color de los
enlaces activos.
<body
link="#xxyyzz">
define el color de
los enlaces.
<body
background="imag
en.gif"> establece una
imagen para el fondo de la
página.
FORMATO DE TEXTOS
<b> </b>
negrita (también sirve la
etiqueta
<strong>… </strong>)
<i> </i>
cursiva (también sirve la
etiqueta
<em>…</em>)
<u> </u> subrayado
<font> puede incluir los tres
parámetros (tamaño, fuente y
color):
<font size=X color=#XXYYZZ
face=fuente escogida> ……
</font>
<pre> preformateado. Respeta
espacios, saltos de línea y los
retornos utilizados.
<blink> hace parpadear el
texto
<font size=”X”> </font> marca
el tamaño de los caracteres,
<font color=”#XXYYZZ”> ……
</font> define el color del
texto
<font face=”arial”> …… </font>
determina el tipo de la fuente.
FORMATO DE PÁRRAFOS
•<p> salto de párrafo </p>
•<br> salto de línea
•<blockquote> </blockquote> sangrado
•<center> centrar el texto.
•<p align=center> párrafo centrado.
•<p align=left> párrafo alineado a la izquierda
•<p align=right> párrafo alineado a la derecha
CREACIÓN DE LISTAS
•Lista no numerada:
•<ul>
•<li>primer elemento
de la lista</li>
•<li>segundo
elemento de la
lista</li>
•<li>tercer elemento
de la lista</li>
•</ul> cierra lista
•lista numerada:
•<ol>
•<li>primer elemento
de la lista</li>
•<li>segundo
elemento de la
lista</li>
•</ol> cierra lista.
•lista de glosario o
definición:
•<dl>
•<dt>término que se
va a definir</dt>
•<dd>definición del
término</dd>
•</dl> cierra lista
LÍNEAS HORIZONTALES SEPARADORAS
• <hr> línea
horizontal.
• <hr width="x%">
anchura de la
línea en
porcentaje.
• <hr width=x>
anchura de la
línea en píxeles
• <hr size=x>
altura de la línea
en píxeles.
• <hr
align=center>
línea alineada en
el centro.
• <hr align=left>
línea alineada a
la izquierda
• <hr align=right>
línea alineada a
la derecha.
• <hr noshade>
línea sin efecto
de sombra
IMÁGENES
•img src="dirección de la imagen” "> indica la ruta de la imagen.
•<img ... border=”X"> establece un borde de X pixels en torno a la imagen.
•<img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y
•anchura) en pixels
•imagen.
•<img ... align="bottom"> alineación inferior del texto respecto de la imagen.
•<img ... align="middle"> alineación del texto en el medio de la imagen.
•<img ... align="top"> alineación superior del texto respecto de la imagen.
•<img ... align="left"> alineación izquierda de la imagen en el párrafo.
•<img ... align="right"> alineación derecha de la imagen en el párrafo.
•<img ... hspace=X> espacio horizontal entre la imagen y el texto.
•<img ... vspace=y> espacio vertical entre la imagen y el texto.

Más contenido relacionado

La actualidad más candente

DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotJIMENAESPANA
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigramalanegritabella
 
Etquetas de html
Etquetas de htmlEtquetas de html
Etquetas de htmlaynosk6
 

La actualidad más candente (6)

DBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspotDBER N° 2 blog blogger blogspot
DBER N° 2 blog blogger blogspot
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigrama
 
Producto 3: Pagina Web
Producto 3: Pagina Web Producto 3: Pagina Web
Producto 3: Pagina Web
 
Etquetas de html
Etquetas de htmlEtquetas de html
Etquetas de html
 
Tagshtml
TagshtmlTagshtml
Tagshtml
 

Destacado

Uso de equipos de monitoreo por George Meza G.
Uso de equipos de monitoreo por George Meza G.Uso de equipos de monitoreo por George Meza G.
Uso de equipos de monitoreo por George Meza G.UCCI
 
PORTFOLIO 4° AÑO ARQ.
PORTFOLIO 4° AÑO ARQ.PORTFOLIO 4° AÑO ARQ.
PORTFOLIO 4° AÑO ARQ.miragliamm
 
Problemas que ocasiona la computadora al hombre
Problemas que ocasiona la computadora al hombreProblemas que ocasiona la computadora al hombre
Problemas que ocasiona la computadora al hombreEmaCartazzo
 
Integración acciones en investigación extensión para la innovación
Integración acciones en investigación extensión para la innovaciónIntegración acciones en investigación extensión para la innovación
Integración acciones en investigación extensión para la innovaciónplaticar
 
Tarea 1 ricardo cordero
Tarea 1 ricardo corderoTarea 1 ricardo cordero
Tarea 1 ricardo corderomijari
 
Geodinamicaterrestre 120502115537-phpapp01
Geodinamicaterrestre 120502115537-phpapp01Geodinamicaterrestre 120502115537-phpapp01
Geodinamicaterrestre 120502115537-phpapp01Armando Calla
 
INTA en el marco de la Agricultura Familiar
INTA en el marco de la Agricultura FamiliarINTA en el marco de la Agricultura Familiar
INTA en el marco de la Agricultura Familiarplaticar
 

Destacado (20)

Uso de equipos de monitoreo por George Meza G.
Uso de equipos de monitoreo por George Meza G.Uso de equipos de monitoreo por George Meza G.
Uso de equipos de monitoreo por George Meza G.
 
Presentación1
Presentación1Presentación1
Presentación1
 
Bullying
BullyingBullying
Bullying
 
Ah1n1
Ah1n1Ah1n1
Ah1n1
 
Redes sociales 4c
Redes sociales 4cRedes sociales 4c
Redes sociales 4c
 
PORTFOLIO 4° AÑO ARQ.
PORTFOLIO 4° AÑO ARQ.PORTFOLIO 4° AÑO ARQ.
PORTFOLIO 4° AÑO ARQ.
 
BLOQUE 1
BLOQUE 1BLOQUE 1
BLOQUE 1
 
Asociación de productores ecológicos.
Asociación de productores ecológicos. Asociación de productores ecológicos.
Asociación de productores ecológicos.
 
Fresas
FresasFresas
Fresas
 
Tim gunn
Tim gunnTim gunn
Tim gunn
 
Problemas que ocasiona la computadora al hombre
Problemas que ocasiona la computadora al hombreProblemas que ocasiona la computadora al hombre
Problemas que ocasiona la computadora al hombre
 
Em sa d col
Em sa d colEm sa d col
Em sa d col
 
Software malicioso grupo_2_5_
Software malicioso grupo_2_5_Software malicioso grupo_2_5_
Software malicioso grupo_2_5_
 
Integración acciones en investigación extensión para la innovación
Integración acciones en investigación extensión para la innovaciónIntegración acciones en investigación extensión para la innovación
Integración acciones en investigación extensión para la innovación
 
Personas Famosas!
Personas Famosas!Personas Famosas!
Personas Famosas!
 
Tarea 1 ricardo cordero
Tarea 1 ricardo corderoTarea 1 ricardo cordero
Tarea 1 ricardo cordero
 
Manualinstalacion
Manualinstalacion Manualinstalacion
Manualinstalacion
 
Tutorial Paint
Tutorial PaintTutorial Paint
Tutorial Paint
 
Geodinamicaterrestre 120502115537-phpapp01
Geodinamicaterrestre 120502115537-phpapp01Geodinamicaterrestre 120502115537-phpapp01
Geodinamicaterrestre 120502115537-phpapp01
 
INTA en el marco de la Agricultura Familiar
INTA en el marco de la Agricultura FamiliarINTA en el marco de la Agricultura Familiar
INTA en el marco de la Agricultura Familiar
 

Similar a Luisa

Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de htmlEvelyncita Perea
 
Jime..html blog blogger blospot
Jime..html blog blogger blospotJime..html blog blogger blospot
Jime..html blog blogger blospotJIMENAESPANA
 
DEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotDEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotJIMENAESPANA
 
Etiquetas
EtiquetasEtiquetas
Etiquetasuts
 
LENGUAJE PHP
LENGUAJE PHPLENGUAJE PHP
LENGUAJE PHPuts
 
Etiquetas
EtiquetasEtiquetas
Etiquetasuts
 
Etiquetas html 2
Etiquetas html 2Etiquetas html 2
Etiquetas html 2Pepe Potamo
 
DEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotDEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotLISSYCE
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzadaKATHYALILIBETH
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzadaKATHYALILIBETH
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzadaKATHYALILIBETH
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzadaKATHYALILIBETH
 
Conceptos de las etiqueta Html .....
Conceptos de las etiqueta Html .....Conceptos de las etiqueta Html .....
Conceptos de las etiqueta Html .....genesisgray
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de htmlaynosk6
 

Similar a Luisa (20)

Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
 
Jime..html blog blogger blospot
Jime..html blog blogger blospotJime..html blog blogger blospot
Jime..html blog blogger blospot
 
DEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotDEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspot
 
Etiquetas en HTML
Etiquetas en HTMLEtiquetas en HTML
Etiquetas en HTML
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
LENGUAJE PHP
LENGUAJE PHPLENGUAJE PHP
LENGUAJE PHP
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Etiquetas en html
Etiquetas en htmlEtiquetas en html
Etiquetas en html
 
Etiquetas html 2
Etiquetas html 2Etiquetas html 2
Etiquetas html 2
 
DEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspotDEBER N°2 blog blogger blogspot
DEBER N°2 blog blogger blogspot
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzada
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzada
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzada
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzada
 
Conceptos de las etiqueta Html .....
Conceptos de las etiqueta Html .....Conceptos de las etiqueta Html .....
Conceptos de las etiqueta Html .....
 
Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
Tarea 2 de programación avanzada
Tarea  2 de programación avanzada Tarea  2 de programación avanzada
Tarea 2 de programación avanzada
 
ETIQUETAS HTML
ETIQUETAS HTMLETIQUETAS HTML
ETIQUETAS HTML
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
 

Luisa

  • 1. ETIQUETAS DE HTML MARCAS BÁSICAS Al principio y al final de todo documento. <head> </head> Al principio y al final de todo documento. <meta> Permite aportar meta información al documento, <html></html> <title> </title> documento. Dentro del head se ponen las etiquetas <body> </body> Dentro de esta etiqueta se insertan los contenidos del documento <body> </body><body> <
  • 2. PROPIEDADES DE LA PÁGINA <body bgcolor="#xxyyzz"> define el color de fondo de la página. <body text="#xxyyzz"> define el color por defecto del texto en la página. <body vlink="#xxyyzz"> define el color de los enlaces visitados. <body alink="#xxyyzz"> define el color de los enlaces activos. <body link="#xxyyzz"> define el color de los enlaces. <body background="imag en.gif"> establece una imagen para el fondo de la página.
  • 3. FORMATO DE TEXTOS <b> </b> negrita (también sirve la etiqueta <strong>… </strong>) <i> </i> cursiva (también sirve la etiqueta <em>…</em>) <u> </u> subrayado <font> puede incluir los tres parámetros (tamaño, fuente y color): <font size=X color=#XXYYZZ face=fuente escogida> …… </font> <pre> preformateado. Respeta espacios, saltos de línea y los retornos utilizados. <blink> hace parpadear el texto <font size=”X”> </font> marca el tamaño de los caracteres, <font color=”#XXYYZZ”> …… </font> define el color del texto <font face=”arial”> …… </font> determina el tipo de la fuente.
  • 4. FORMATO DE PÁRRAFOS •<p> salto de párrafo </p> •<br> salto de línea •<blockquote> </blockquote> sangrado •<center> centrar el texto. •<p align=center> párrafo centrado. •<p align=left> párrafo alineado a la izquierda •<p align=right> párrafo alineado a la derecha
  • 5. CREACIÓN DE LISTAS •Lista no numerada: •<ul> •<li>primer elemento de la lista</li> •<li>segundo elemento de la lista</li> •<li>tercer elemento de la lista</li> •</ul> cierra lista •lista numerada: •<ol> •<li>primer elemento de la lista</li> •<li>segundo elemento de la lista</li> •</ol> cierra lista. •lista de glosario o definición: •<dl> •<dt>término que se va a definir</dt> •<dd>definición del término</dd> •</dl> cierra lista
  • 6. LÍNEAS HORIZONTALES SEPARADORAS • <hr> línea horizontal. • <hr width="x%"> anchura de la línea en porcentaje. • <hr width=x> anchura de la línea en píxeles • <hr size=x> altura de la línea en píxeles. • <hr align=center> línea alineada en el centro. • <hr align=left> línea alineada a la izquierda • <hr align=right> línea alineada a la derecha. • <hr noshade> línea sin efecto de sombra
  • 7. IMÁGENES •img src="dirección de la imagen” "> indica la ruta de la imagen. •<img ... border=”X"> establece un borde de X pixels en torno a la imagen. •<img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y •anchura) en pixels •imagen. •<img ... align="bottom"> alineación inferior del texto respecto de la imagen. •<img ... align="middle"> alineación del texto en el medio de la imagen. •<img ... align="top"> alineación superior del texto respecto de la imagen. •<img ... align="left"> alineación izquierda de la imagen en el párrafo. •<img ... align="right"> alineación derecha de la imagen en el párrafo. •<img ... hspace=X> espacio horizontal entre la imagen y el texto. •<img ... vspace=y> espacio vertical entre la imagen y el texto.