SlideShare una empresa de Scribd logo
1 de 6
Etiquetas basicas de html

HTML es el lenguaje por el cual construimos una página web. Este lenguaje se basa
principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados
de nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para
poder crear o al menos modificar una página web.


* <HTML>: indica el comienzo del documento HTML.
* <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título
(<title> de la web, una descripción y otras informaciones relacionadas con el contenido de
la página.

* <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una
web. En el body van los textos, las imágenes y todos los contenidos de la web.

* <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados
textos de la página como titulares, suelen tener un tamaño de fuente mayor para
diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores.

* <A>: define los enlaces.

* <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>.


* <P>: el texto dentro de esta etiqueta forma un párrafo.

* <IMG>: imágenes.

* <BR>: salto de línea.

* <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI>
definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas
ordenadas.

* <B> y <STRONG>: se utilizan para resaltar el texto.

* <U>: texto subrayado.

* <I>: texto en cursiva.

Ejemplo de página básica

<html>
<head>
<title>Título de la página</title>
</head>
<body>
<h1>Encabezado de la página</h2>
<h3>Encabezado de menor tamaño</h3>
<p>Este es el texto de un párrafo.</p>
<p>Este es el texto de otro párrafo. Dentro de este párrafo,
pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo
que quieras.</p>
<p>También podemos poner listas como la siguiente:</p>
<ul>
<li>Guión número uno.</li>
<li>Guión número dos.</li>
<li>Guión número tres.</li>
</ul>
</body>
</html>




Consejo de Atributos

bgcolor=?><body
Establece el color de fondo, usando nombres o valores hex
text=?><body
Establece el color del texto, usando nombres o valores hex
link=?><body
Establece el color de los enlaces, usando nombres o valores hex
vlink=?><body
Establece el color de los enlaces, usando nombres o valores hex
alink=?><body
Establece el color de los enlaces con un clic

Etiquetas de texto

<pre></ pre>
Crea texto preformateado
<h1></ h1>
Crea un título grande
<h6></ h6>
Crea un título pequeño
<b></ b>
Crea texto en negrita
<i></ i>
Crea texto en cursiva
<tt></ tt>
Crea, o máquina de escribir estilo de texto-teletipo
<cite></ cite>
Crea una cita, por lo general en cursiva
<em></ em>
Hace hincapié en la palabra (con cursiva o negrita)
<strong></ strong>
Hace hincapié en la palabra (con cursiva o negrita)
size=?><font</ font>
Ajusta tamaño del fuente, de 1 a 7)
color=?><font</ font>
Juegos de color de la fuente, usando nombres o valores hex

Enlaces

<a href="URL"></ a>
Crea un hipervínculo
<a href="mailto:EMAIL"></ a>
Crea un enlace de correo
<a name="NAME"></ a>
Crea una ubicación de destino dentro de un documento
<a href="#NAME"></ a>
Enlaces a ese lugar de destino en otra parte del documento

Formato

<p></p>
Crea un nuevo párrafo
align=?><p
Alinea un párrafo a la izquierda, derecha o al centro
<br>
Inserta un salto de línea

<blockquote></ Span>
Sangría de texto de ambos lados
<dl></ dl>
Crea una lista de definiciones
<dt>
Precede cada definición de término
<dd>
Precede cada definición
<ol></ ol>
Crea una lista numerada
<li></ li>
Precede a cada elemento de la lista, y añade un número
<ul></ ul>
Crea una lista con viñetas
align=?><div
Un tag genérico utilizado para grandes bloques de formato de HTML, también se utiliza
para hojas de estilo

Elementos gráficos

<imgsrc="name">
Agrega una imagen
<imgsrc="name" align=?>
Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo
<imgsrc="name" border=?>
Ajusta tamaño del borde alrededor de una imagen
<hr>
Inserta una regla horizontal
size=?><hr
Establece el tamaño (altura) de la regla
width=?><hr
Establece la anchura de la regla, en porcentaje o valor absoluto
noshade><hr
Crea una regla sin una sombra

Tablas

<table></ table>
Crea una tabla
<tr></ tr>
marcha cada fila en una tabla
<td></ td>
Pone en marcha cada celda de una fila
<th></ th>
Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado)

Atributos de la tabla

border=#><table
Establece el ancho de borde alrededor de celdas de la tabla
cellspacing=#><table
Ajusta la cantidad de espacio entre las celdas de la tabla
cellpadding=#><table
Ajusta la cantidad de espacio entre el borde de una celda y su contenido
width=# <table o %>
Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento
align=?><tr o align=?><td
Establece la alineación de la celda (s) (a la izquierda, centro o derecha)
valign=?><tr o valign=?><td
Establece la alineación vertical de la celda (s) (, superior, media o inferior)
<tdcolspan=#>
Establece el número de columnas de una celda debe abarcar
<tdrowspan=#>
Establece el número de filas de una célula debe abarcar (por defecto = 1)
<tdnowrap>
Evita las líneas dentro de una célula se rompa para adaptarse a

Frames Marcos

<frameset></ frameset>
etiquetas en un documento marco, también se pueden anidar en otros conjuntos de
marcos
rows="value,value"><frameset
Define las filas dentro de un conjunto de marcos, utilizando el número de píxeles, o el
porcentaje de ancho de w
cols="value,value"><frameset
Define las columnas dentro de un conjunto de marcos, utilizando el número de píxeles, o
el porcentaje de ancho de
<frame>
Define un marco único - o región - dentro de un conjunto de marcos
<NOFRAMES></ noframes>
Define lo que aparecerá en navegadores que no soporten marcos

Marcos Atributos

src="URL"><frame
Especifica que el documento HTML se debe mostrar
name="name"><frame
Nombres de la estructura, o de la región, por lo que puede ser objetivo de otros marcos
marginwidth=#><frame
Define los márgenes izquierdo y derecho del marco, debe ser igual o superior a 1
marginheight=#><frame
Define los márgenes superior e inferior del marco, debe ser igual o superior a 1
scrolling=VALUE><frame
Establece si el marco tiene una barra de desplazamiento, puede ser igual a "sí", "no", o
"auto. Valor" El valor por defecto, como en los documentos ordinarios, es automático.
noresize><frame
Impide que el usuario cambiar el tamaño de un marco

Formularios
Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la
apariencia de un formulario.
<form></ form>
Creatodaslasformas
</select><select name="nombre" múltiples size=?></ select>
Crea un menú desplegable. Tamaño establece el número de elementos de menú visible
antes de yo u necesidad de desplazarse.
<option>
Pone en marcha cada elemento de menú
<select name="NAME"></ select>
Creaunmenúdesplegable
<option>
Pone en marcha cada elemento de menú
<textareaname="nombre" cols=40 rows=8></ textarea>
Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura.
<input type="checkbox" name="NAME">
Crea una casilla de verificación. Texto siguiente etiqueta.
<input type="radio" name="nombre" value="x">
Crea un botón de radio. Textosigueetiquetas
<input type=text name="foo" size=20>
. Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.
<input type="submit" value="NAME">
CreaunbotónEnviar
<input type="image" border=0 name="NAME" src="name.gif"> type="image"
Crea un botón Enviar con una imagen
type="reset"><input

Más contenido relacionado

La actualidad más candente

La actualidad más candente (19)

Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Html
HtmlHtml
Html
 
Html
HtmlHtml
Html
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Comando básicos HTML.
Comando básicos HTML. Comando básicos HTML.
Comando básicos HTML.
 
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
 
Frames
FramesFrames
Frames
 
Comandos html
Comandos htmlComandos html
Comandos html
 
Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 
Doctypehtml
DoctypehtmlDoctypehtml
Doctypehtml
 
Organigramas John Jayro
Organigramas John JayroOrganigramas John Jayro
Organigramas John Jayro
 
Clase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDFClase 1 - Comandos HTML.PDF
Clase 1 - Comandos HTML.PDF
 
Presentacion de etiquetas
Presentacion de etiquetasPresentacion de etiquetas
Presentacion de etiquetas
 
[modo de compatibilidad] HTML
[modo de compatibilidad] HTML[modo de compatibilidad] HTML
[modo de compatibilidad] HTML
 
Comandos de html
Comandos de htmlComandos de html
Comandos de html
 
Portales ud4 - lenguaje html
Portales   ud4 - lenguaje htmlPortales   ud4 - lenguaje html
Portales ud4 - lenguaje html
 
Etiquetas basicas html
Etiquetas basicas htmlEtiquetas basicas html
Etiquetas basicas html
 
Curso basico con_html
Curso basico con_htmlCurso basico con_html
Curso basico con_html
 
Páginas web en formato HTML
Páginas web en formato HTMLPáginas web en formato HTML
Páginas web en formato HTML
 

Similar a Etiquetas Basicas de Html (20)

Elianyyyyy
ElianyyyyyElianyyyyy
Elianyyyyy
 
Ppp jjj 1002
Ppp jjj 1002Ppp jjj 1002
Ppp jjj 1002
 
Deber vero
Deber veroDeber vero
Deber vero
 
Codigo html
Codigo htmlCodigo html
Codigo html
 
Clase1
Clase1Clase1
Clase1
 
Estructura html
Estructura htmlEstructura html
Estructura html
 
Deber de pagina wed..!!!
Deber de pagina wed..!!!Deber de pagina wed..!!!
Deber de pagina wed..!!!
 
Producto 4
Producto 4Producto 4
Producto 4
 
Curso html
Curso htmlCurso html
Curso html
 
Conceptos Etiquetas de HTML
Conceptos Etiquetas de HTMLConceptos Etiquetas de HTML
Conceptos Etiquetas de HTML
 
Mi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notasMi primera pagina web en html con bloc de notas
Mi primera pagina web en html con bloc de notas
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
Html
HtmlHtml
Html
 
Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS Lenguaje HTML ETIQUETAS
Lenguaje HTML ETIQUETAS
 
Pres de po
Pres de poPres de po
Pres de po
 
Resumen
ResumenResumen
Resumen
 
Etiqueta de html
Etiqueta de htmlEtiqueta de html
Etiqueta de html
 
TAREA DEL CSS
TAREA DEL CSSTAREA DEL CSS
TAREA DEL CSS
 
Deber k riss
Deber k rissDeber k riss
Deber k riss
 
HTML
HTMLHTML
HTML
 

Etiquetas Basicas de Html

  • 1. Etiquetas basicas de html HTML es el lenguaje por el cual construimos una página web. Este lenguaje se basa principalmente en etiquetas, con las cuales vamos construyendo los diferentes apartados de nuestra web. Es imprescindible conocer estas etiquetas y su funcionamiento para poder crear o al menos modificar una página web. * <HTML>: indica el comienzo del documento HTML. * <HEAD>: indica que empieza la cabecera de la página. En ella se suele poner el título (<title> de la web, una descripción y otras informaciones relacionadas con el contenido de la página. * <BODY>: es el cuerpo de la página, donde va lo que se ve en el navegador al cargar una web. En el body van los textos, las imágenes y todos los contenidos de la web. * <H1>, <H2>, etc.: son los títulos o encabezados. Se utilizan para establecer determinados textos de la página como titulares, suelen tener un tamaño de fuente mayor para diferenciarlos del resto del texto. Son importantes en el posicionamiento en buscadores. * <A>: define los enlaces. * <TABLE>: es una tabla, y dentro de esta tenemos filas <TR> y celdas <TD>. * <P>: el texto dentro de esta etiqueta forma un párrafo. * <IMG>: imágenes. * <BR>: salto de línea. * <UL>: los textos dentro de esta etiqueta se estructuran en listas. Mediante el uso de <LI> definimos cada guión dentro de la lista, y usando <OL> en lugar de <UL> tendremos listas ordenadas. * <B> y <STRONG>: se utilizan para resaltar el texto. * <U>: texto subrayado. * <I>: texto en cursiva. Ejemplo de página básica <html>
  • 2. <head> <title>Título de la página</title> </head> <body> <h1>Encabezado de la página</h2> <h3>Encabezado de menor tamaño</h3> <p>Este es el texto de un párrafo.</p> <p>Este es el texto de otro párrafo. Dentro de este párrafo, pueden ir palabras <b>en negrita</b>, <i>en cursiva</i> o lo que quieras.</p> <p>También podemos poner listas como la siguiente:</p> <ul> <li>Guión número uno.</li> <li>Guión número dos.</li> <li>Guión número tres.</li> </ul> </body> </html> Consejo de Atributos bgcolor=?><body Establece el color de fondo, usando nombres o valores hex text=?><body Establece el color del texto, usando nombres o valores hex link=?><body Establece el color de los enlaces, usando nombres o valores hex vlink=?><body Establece el color de los enlaces, usando nombres o valores hex alink=?><body Establece el color de los enlaces con un clic Etiquetas de texto <pre></ pre> Crea texto preformateado <h1></ h1> Crea un título grande <h6></ h6> Crea un título pequeño <b></ b>
  • 3. Crea texto en negrita <i></ i> Crea texto en cursiva <tt></ tt> Crea, o máquina de escribir estilo de texto-teletipo <cite></ cite> Crea una cita, por lo general en cursiva <em></ em> Hace hincapié en la palabra (con cursiva o negrita) <strong></ strong> Hace hincapié en la palabra (con cursiva o negrita) size=?><font</ font> Ajusta tamaño del fuente, de 1 a 7) color=?><font</ font> Juegos de color de la fuente, usando nombres o valores hex Enlaces <a href="URL"></ a> Crea un hipervínculo <a href="mailto:EMAIL"></ a> Crea un enlace de correo <a name="NAME"></ a> Crea una ubicación de destino dentro de un documento <a href="#NAME"></ a> Enlaces a ese lugar de destino en otra parte del documento Formato <p></p> Crea un nuevo párrafo align=?><p Alinea un párrafo a la izquierda, derecha o al centro <br> Inserta un salto de línea <blockquote></ Span> Sangría de texto de ambos lados <dl></ dl> Crea una lista de definiciones <dt> Precede cada definición de término <dd> Precede cada definición
  • 4. <ol></ ol> Crea una lista numerada <li></ li> Precede a cada elemento de la lista, y añade un número <ul></ ul> Crea una lista con viñetas align=?><div Un tag genérico utilizado para grandes bloques de formato de HTML, también se utiliza para hojas de estilo Elementos gráficos <imgsrc="name"> Agrega una imagen <imgsrc="name" align=?> Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo <imgsrc="name" border=?> Ajusta tamaño del borde alrededor de una imagen <hr> Inserta una regla horizontal size=?><hr Establece el tamaño (altura) de la regla width=?><hr Establece la anchura de la regla, en porcentaje o valor absoluto noshade><hr Crea una regla sin una sombra Tablas <table></ table> Crea una tabla <tr></ tr> marcha cada fila en una tabla <td></ td> Pone en marcha cada celda de una fila <th></ th> Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado) Atributos de la tabla border=#><table Establece el ancho de borde alrededor de celdas de la tabla cellspacing=#><table Ajusta la cantidad de espacio entre las celdas de la tabla
  • 5. cellpadding=#><table Ajusta la cantidad de espacio entre el borde de una celda y su contenido width=# <table o %> Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento align=?><tr o align=?><td Establece la alineación de la celda (s) (a la izquierda, centro o derecha) valign=?><tr o valign=?><td Establece la alineación vertical de la celda (s) (, superior, media o inferior) <tdcolspan=#> Establece el número de columnas de una celda debe abarcar <tdrowspan=#> Establece el número de filas de una célula debe abarcar (por defecto = 1) <tdnowrap> Evita las líneas dentro de una célula se rompa para adaptarse a Frames Marcos <frameset></ frameset> etiquetas en un documento marco, también se pueden anidar en otros conjuntos de marcos rows="value,value"><frameset Define las filas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de w cols="value,value"><frameset Define las columnas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de <frame> Define un marco único - o región - dentro de un conjunto de marcos <NOFRAMES></ noframes> Define lo que aparecerá en navegadores que no soporten marcos Marcos Atributos src="URL"><frame Especifica que el documento HTML se debe mostrar name="name"><frame Nombres de la estructura, o de la región, por lo que puede ser objetivo de otros marcos marginwidth=#><frame Define los márgenes izquierdo y derecho del marco, debe ser igual o superior a 1 marginheight=#><frame Define los márgenes superior e inferior del marco, debe ser igual o superior a 1 scrolling=VALUE><frame Establece si el marco tiene una barra de desplazamiento, puede ser igual a "sí", "no", o "auto. Valor" El valor por defecto, como en los documentos ordinarios, es automático.
  • 6. noresize><frame Impide que el usuario cambiar el tamaño de un marco Formularios Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la apariencia de un formulario. <form></ form> Creatodaslasformas </select><select name="nombre" múltiples size=?></ select> Crea un menú desplegable. Tamaño establece el número de elementos de menú visible antes de yo u necesidad de desplazarse. <option> Pone en marcha cada elemento de menú <select name="NAME"></ select> Creaunmenúdesplegable <option> Pone en marcha cada elemento de menú <textareaname="nombre" cols=40 rows=8></ textarea> Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura. <input type="checkbox" name="NAME"> Crea una casilla de verificación. Texto siguiente etiqueta. <input type="radio" name="nombre" value="x"> Crea un botón de radio. Textosigueetiquetas <input type=text name="foo" size=20> . Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres. <input type="submit" value="NAME"> CreaunbotónEnviar <input type="image" border=0 name="NAME" src="name.gif"> type="image" Crea un botón Enviar con una imagen type="reset"><input