SlideShare una empresa de Scribd logo
1 de 10
ETIQUETAS DE HTML
MARCAS BÁSICAS
• Al principio y al final de todo documento.
<html></html>
• Cabecera del documento. Dentro del head se
ponen las etiquetas.
<head> </head>
• Indica el título de la página para el navegador.
<title> </title>
<meta> Permite aportar meta información al documento
• Permite aportar meta información al documento
<body> </body>
AQUÍ CULMINAMOS CON LAS ETIQUETAS BASICAS
• Dentro de esta etiqueta se insertan los contenidos del documento
PROPIEDADES DE LA PAGINA
<body
bgcol
or="#
xxyyzz
">
define
el
color
de
fondo
de la
págin
a.
<body
text="
#xxyyz
z">
define
el
color
por
defect
o del
texto
en la
página.
<body
link="
#xxyy
zz">
define
el
color
de los
enlace
s.
<body
vlink=
"#xxy
yzz">
define
el
color
de los
enlace
s
visitad
os.
<body
alink=
"#xxy
yzz">
define
el
color
de los
enlace
s
activo
s.
<body
backgr
ound="
imagen
.gif">
estable
ce una
imagen
para el
fondo
de la
<!--
coment
arios --
> Sirve
para
anotar
aclaraci
ones
'privada
s' del
autor
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 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.
<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
• <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
FORMATO DE PÁRRAFOS
•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
CREACIÓN DE LISTAS
• <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.
LÍNEAS HORIZONTALES
SEPARADORAS
Imagenes
<img src="dirección de
la imagen” "> indica la
ruta de la imagen.
<img ... height="XX"
width="YY"> establece un
tamaño de la imagen (altura
anchura en pìxel
<img ...
height="XX"
width="YY">
establece un
tamaño de la
imagen (altura y
anchura en
pixeles
<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 ...
border=”X">
establece un borde
de X pixels en
torno a la imagen
TABLAS
<table>……</table> Define dónde comienza
y termina la tabla
<table width="XX%"> Determina la anchura
de la tabla. Puede darse en píxeles (no lleva
el símbolo %), o en porcentaje de la página.
<table height="XX> Determina la altura de
la tabla en píxeles.
<table cellpadding="X"> Define el espacio
en píxeles entre el borde y el texto
CREACIÓN DE ENLACES
• <a href=”dirección página#marcador”> dirige el
enlace a un punto concreto de otra
• página.
• Dentro
• title=”texto descriptivo del enlace” permite incluir
una descripción del destino del enlace
<a
href=”http://www.servidor.com/directorio/pagin
a.htm”>Enunciado del enlace</a>
PÁGINA CON MARCOS
•<html>
•<head>
•<title>título de la página</title>
•</head>
• <frameset cols="20%, 80%"> (divide la página en dos marcos en forma de
•columnas, cada una con su anchura correspondiente en porcentaje)
•<frame src="menu.htm" name="navegacion"> (archivo menu.htm que
•corresponde al marco de la izquierda, llamado “navegación”, 20% de anchura)
•<frame src="principal.htm" name="contenidos"> (archivo principal.htm que
•corresponde al marco de la derecha, llamado “contenidos”, 80% de anchura)
•</frameset>
•Las páginas también se pueden dividir en marcos horizontales con
•<frameset rows=" , ">
•frameborder="NO" evita que se vea el borde entre los marcos
•framespacing="2" establece 2 pixels de separación entre los marcos
•scrolling="NO" evita que aparezca una barra de scroll dentro del marco
•scrolling="auto" mostrará la barra de scroll sólo si es necesario
•Ejemplo de una página con tres marcos en forma de filas. La superior y la inferior
•tienen un tamaño fijo de 80 pixels; la del medio es adaptable. No se muestran los
•bordes entre los marcos

Más contenido relacionado

La actualidad más candente

Etquetas de html
Etquetas de htmlEtquetas de html
Etquetas de htmlaynosk6
 
ETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASSholucy
 
Etquetas pabo
Etquetas paboEtquetas pabo
Etquetas pabopabobdp
 
Etiquetas en html
Etiquetas en htmlEtiquetas en html
Etiquetas en htmljose
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de HtmlWilmer Acero
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de htmlEvelyncita Perea
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzadaKATHYALILIBETH
 

La actualidad más candente (13)

Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
Pres de po
Pres de poPres de po
Pres de po
 
Etquetas de html
Etquetas de htmlEtquetas de html
Etquetas de html
 
Etiquetas
EtiquetasEtiquetas
Etiquetas
 
Estructura Página Web 2
Estructura Página Web 2Estructura Página Web 2
Estructura Página Web 2
 
ETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADASETIQUETAS HTML ANIMADAS
ETIQUETAS HTML ANIMADAS
 
Html
HtmlHtml
Html
 
Etquetas pabo
Etquetas paboEtquetas pabo
Etquetas pabo
 
Etiquetas en html
Etiquetas en htmlEtiquetas en html
Etiquetas en html
 
html
htmlhtml
html
 
Etiquetas Basicas de Html
Etiquetas Basicas de HtmlEtiquetas Basicas de Html
Etiquetas Basicas de Html
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
 
Tarea de programacion avanzada
Tarea de programacion avanzadaTarea de programacion avanzada
Tarea de programacion avanzada
 

Similar a PROGRAMACIÓN AVANZADA TAREA 2

Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de htmlaynosk6
 
Programación avamzada 1
Programación avamzada 1Programación avamzada 1
Programación avamzada 1Krolina Agui
 
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
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigramalanegritabella
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigramalanegritabella
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de htmlEvelyncita Perea
 
Diseño de paginas con html
Diseño de paginas con htmlDiseño de paginas con html
Diseño de paginas con htmlNoemi Gavilánez
 
Etiquetas y teoria html
Etiquetas y teoria htmlEtiquetas y teoria html
Etiquetas y teoria htmlssxdan
 

Similar a PROGRAMACIÓN AVANZADA TAREA 2 (20)

Etiquetas de html
Etiquetas de htmlEtiquetas de html
Etiquetas de html
 
Tecnología de la información
Tecnología de la informaciónTecnología de la información
Tecnología de la información
 
Programación avamzada 1
Programación avamzada 1Programación avamzada 1
Programación avamzada 1
 
Etiquetas en HTML
Etiquetas en HTMLEtiquetas en HTML
Etiquetas en HTML
 
Tagshtml
TagshtmlTagshtml
Tagshtml
 
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
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigrama
 
Ba trabajo de organigrama
Ba trabajo de organigramaBa trabajo de organigrama
Ba trabajo de organigrama
 
Programación avanzada etiquetas de html
Programación avanzada   etiquetas de htmlProgramación avanzada   etiquetas de html
Programación avanzada etiquetas de html
 
Doctypehtml
DoctypehtmlDoctypehtml
Doctypehtml
 
Guía rápida de comandos html
Guía rápida de comandos htmlGuía rápida de comandos html
Guía rápida de comandos html
 
Diseño de paginas con html
Diseño de paginas con htmlDiseño de paginas con html
Diseño de paginas con html
 
P4 etiquetas basicas
P4 etiquetas basicasP4 etiquetas basicas
P4 etiquetas basicas
 
Diseño de paginas con html1
Diseño de paginas con html1Diseño de paginas con html1
Diseño de paginas con html1
 
Etiquetas y teoria html
Etiquetas y teoria htmlEtiquetas y teoria html
Etiquetas y teoria html
 

PROGRAMACIÓN AVANZADA TAREA 2

  • 1. ETIQUETAS DE HTML MARCAS BÁSICAS • Al principio y al final de todo documento. <html></html> • Cabecera del documento. Dentro del head se ponen las etiquetas. <head> </head> • Indica el título de la página para el navegador. <title> </title>
  • 2. <meta> Permite aportar meta información al documento • Permite aportar meta información al documento <body> </body> AQUÍ CULMINAMOS CON LAS ETIQUETAS BASICAS • Dentro de esta etiqueta se insertan los contenidos del documento
  • 3. PROPIEDADES DE LA PAGINA <body bgcol or="# xxyyzz "> define el color de fondo de la págin a. <body text=" #xxyyz z"> define el color por defect o del texto en la página. <body link=" #xxyy zz"> define el color de los enlace s. <body vlink= "#xxy yzz"> define el color de los enlace s visitad os. <body alink= "#xxy yzz"> define el color de los enlace s activo s. <body backgr ound=" imagen .gif"> estable ce una imagen para el fondo de la <!-- coment arios -- > Sirve para anotar aclaraci ones 'privada s' del autor de la página.
  • 4. 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 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. <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
  • 5. • <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 FORMATO DE PÁRRAFOS •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 CREACIÓN DE LISTAS
  • 6. • <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. LÍNEAS HORIZONTALES SEPARADORAS
  • 7. Imagenes <img src="dirección de la imagen” "> indica la ruta de la imagen. <img ... height="XX" width="YY"> establece un tamaño de la imagen (altura anchura en pìxel <img ... height="XX" width="YY"> establece un tamaño de la imagen (altura y anchura en pixeles <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 ... border=”X"> establece un borde de X pixels en torno a la imagen
  • 8. TABLAS <table>……</table> Define dónde comienza y termina la tabla <table width="XX%"> Determina la anchura de la tabla. Puede darse en píxeles (no lleva el símbolo %), o en porcentaje de la página. <table height="XX> Determina la altura de la tabla en píxeles. <table cellpadding="X"> Define el espacio en píxeles entre el borde y el texto
  • 9. CREACIÓN DE ENLACES • <a href=”dirección página#marcador”> dirige el enlace a un punto concreto de otra • página. • Dentro • title=”texto descriptivo del enlace” permite incluir una descripción del destino del enlace <a href=”http://www.servidor.com/directorio/pagin a.htm”>Enunciado del enlace</a>
  • 10. PÁGINA CON MARCOS •<html> •<head> •<title>título de la página</title> •</head> • <frameset cols="20%, 80%"> (divide la página en dos marcos en forma de •columnas, cada una con su anchura correspondiente en porcentaje) •<frame src="menu.htm" name="navegacion"> (archivo menu.htm que •corresponde al marco de la izquierda, llamado “navegación”, 20% de anchura) •<frame src="principal.htm" name="contenidos"> (archivo principal.htm que •corresponde al marco de la derecha, llamado “contenidos”, 80% de anchura) •</frameset> •Las páginas también se pueden dividir en marcos horizontales con •<frameset rows=" , "> •frameborder="NO" evita que se vea el borde entre los marcos •framespacing="2" establece 2 pixels de separación entre los marcos •scrolling="NO" evita que aparezca una barra de scroll dentro del marco •scrolling="auto" mostrará la barra de scroll sólo si es necesario •Ejemplo de una página con tres marcos en forma de filas. La superior y la inferior •tienen un tamaño fijo de 80 pixels; la del medio es adaptable. No se muestran los •bordes entre los marcos