ETIQUETAS BÁSICAS HTML

ETIQUETAS BÁSICAS 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. 

*

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

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

* : texto subrayado. 

* < I>: texto en cursiva. 

Ejemplo de página básica 

 

 

 

 

 

Encabezado de la página

 

Encabezado de menor tamaño

 

Este es el texto de un párrafo.
 

Este es el texto de otro párrafo. Dentro de este párrafo, 

pueden ir palabras en negrita, en cursiva o lo 

que quieras.

 

También podemos poner listas como la siguiente:
 

 

Guión número uno.

 

Guión número dos.

 

Guión número tres.

 

 

 

 

Consejo de Atributos 

bgcolor=?>

Establece el color de fondo, usando nombres o valores hex 

text=?>

Establece el color del texto, usando nombres o valores hex 

link=?>

Establece el color de los enlaces, usando nombres o valores hex 

vlink=?>

Establece el color de los enlaces, usando nombres o valores hex 

alink=?>

Establece el color de los enlaces con un clic 

Etiquetas de texto 

 </ pre> 

Crea texto preformateado 

</ h1> 

Crea un título grande 

</ h6> 

Crea un título pequeño 

</ b> 

Crea texto en negrita 

</ i> 

Crea texto en cursiva 

</ tt> 

Crea, o máquina de escribir estilo de texto-teletipo 

</ cite> 

Crea una cita, por lo general en cursiva 

</ em> 

Hace hincapié en la palabra (con cursiva o negrita) 

</ strong> 

Hace hincapié en la palabra (con cursiva o negrita) 

size=?> </ font> 

Ajusta tamaño del fuente, de 1 a 7) 

color=?> </ font> 

Juegos de color de la fuente, usando nombres o valores hex 

Enlaces 

</ a> 

Crea un hipervínculo 

</ a> 

Crea un enlace de correo 

</ a> 

Crea una ubicación de destino dentro de un documento 

</ a> 

Enlaces a ese lugar de destino en otra parte del documento 

Formato 

 

Crea un nuevo párrafo 

align=?>

Alinea un párrafo a la izquierda, derecha o al centro 

 

Inserta un salto de línea 

</ Span> 

Sangría de texto de ambos lados 

</ dl> 

Crea una lista de definiciones 

 

Precede cada definición de término 

 

Precede cada definición 

</ ol> 

Crea una lista numerada 

</ li> 

Precede a cada elemento de la lista, y añade un número 

</ ul> 

Crea una lista con viñetas 

align=?>

Un tag genérico utilizado para grandes bloques de formato de HTML, también se utiliza para hojas de estilo 

Elementos gráficos 

 

Agrega una imagen 

 

Alinea una imagen: izquierda, derecha, centro;, superior, medio fondo 

 

Ajusta tamaño del borde alrededor de una imagen 

---

 

Inserta una regla horizontal 

 

Tablas 

</ table> 

Crea una tabla 

</ tr> 

marcha cada fila en una tabla 

</ td> 

Pone en marcha cada celda de una fila 

</ th> 

Pone en marcha la cabecera de la tabla (una celda normal, con negrita, texto centrado) 

Atributos de la tabla 

border=#>

Establece el ancho de borde alrededor de celdas de la tabla 

cellspacing=#>

Ajusta la cantidad de espacio entre las celdas de la tabla 

cellpadding=#>

Ajusta la cantidad de espacio entre el borde de una celda y su contenido 

width=#  

Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento 

align=?>

Establece la alineación de la celda (s) (a la izquierda, centro o derecha) 

valign=?>

Establece la alineación vertical de la celda (s) (, superior, media o inferior) 

 

Establece el número de columnas de una celda debe abarcar 

 

Establece el número de filas de una célula debe abarcar (por defecto = 1) 

 

Evita las líneas dentro de una célula se rompa para adaptarse a 

Frames Marcos 

</ frameset> 

etiquetas en un documento marco, también se pueden anidar en otros conjuntos de marcos 

rows="value,value">

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">

Define las columnas dentro de un conjunto de marcos, utilizando el número de píxeles, o el porcentaje de ancho de 

 

Define un marco único - o región - dentro de un conjunto de marcos 

<!-- noframes-->&nbsp;</div> <div style="text-align: justify;"> Define lo que aparecerá en navegadores que no soporten marcos&nbsp;</div> <div style="text-align: justify;"> <br></div> <div style="text-align: justify;"> Marcos Atributos&nbsp;</div> <div style="text-align: justify;"> <br></div> <div style="text-align: justify;"> src="URL"> <frame&nbsp;</div> <div style="text-align: justify;"> Especifica que el documento HTML se debe mostrar&nbsp;</div> <div style="text-align: justify;"> name="name"> <frame&nbsp;</div> <div style="text-align: justify;"> Nombres de la estructura, o de la región, por lo que puede ser objetivo de otros marcos&nbsp;</div> <div style="text-align: justify;"> marginwidth=#> <frame&nbsp;</div> <div style="text-align: justify;"> Define los márgenes izquierdo y derecho del marco, debe ser igual o superior a 1&nbsp;</div> <div style="text-align: justify;"> marginheight=#> <frame&nbsp;</div> <div style="text-align: justify;"> Define los márgenes superior e inferior del marco, debe ser igual o superior a 1&nbsp;</div> <div style="text-align: justify;"> scrolling=VALUE> <frame&nbsp;</div> <div style="text-align: justify;"> 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.&nbsp;</div> <div style="text-align: justify;"> noresize> <frame&nbsp;</div> <div style="text-align: justify;"> Impide que el usuario cambiar el tamaño de un marco&nbsp;</div> <div style="text-align: justify;"> <br></div> <div style="text-align: justify;"> Formularios&nbsp;</div> <div style="text-align: justify;"> Para las formas funcionales, tendrá que ejecutar un script CGI. El HTML sólo crea la apariencia de un formulario.&nbsp;</div> <div style="text-align: justify;"> <form> <!-- form-->&nbsp;</div> <div style="text-align: justify;"> Crea todas las formas&nbsp;</div> <div style="text-align: justify;"> </select> <select name="nombre" múltiples size=?> <!-- select-->&nbsp;</div> <div style="text-align: justify;"> Crea un menú desplegable. Tamaño establece el número de elementos de menú visible antes de yo u necesidad de desplazarse.&nbsp;</div> <div style="text-align: justify;"> <option>&nbsp;</div> <div style="text-align: justify;"> Pone en marcha cada elemento de menú&nbsp;</div> <div style="text-align: justify;"> <select name="NAME" > <!-- select-->&nbsp;</div> <div style="text-align: justify;"> Crea un menú desplegable&nbsp;</div> <div style="text-align: justify;"> <option >&nbsp;</div> <div style="text-align: justify;"> Pone en marcha cada elemento de menú&nbsp;</div> <div style="text-align: justify;"> <textarea name="nombre" cols=40 rows=8 > </ textarea>&nbsp;</div> <div style="text-align: justify;"> Crea un área de la caja de texto. Establecer el ancho de las columnas, filas ajustar la altura.&nbsp;</div> <div style="text-align: justify;"> <input type="checkbox" name="NAME" >&nbsp;</div> <div style="text-align: justify;"> Crea una casilla de verificación. Texto siguiente etiqueta.&nbsp;</div> <div style="text-align: justify;"> <input type="radio" name="nombre" value="x" >&nbsp;</div> <div style="text-align: justify;"> Crea un botón de radio. Texto sigue etiquetas&nbsp;</div> <div style="text-align: justify;"> <input type=text name="foo" size=20 >&nbsp;</div> <div style="text-align: justify;"> . Crea una línea de texto y un área. Tamaño establece la longitud, en caracteres.&nbsp;</div> <div style="text-align: justify;"> <input type="submit" value="NAME" >&nbsp;</div> <div style="text-align: justify;"> Crea un botón Enviar&nbsp;</div> <div style="text-align: justify;"> <input type="image" border=0 name="NAME" src="name.gif"> type="image" ></div> <div style="text-align: justify;"> Crea un botón Enviar con una imagen&nbsp;</div> <div style="text-align: justify;"> type="reset"> <input ></div> <div style="text-align: justify;"> Crea un botón de reinicio&nbsp;</div> <p> </p> <p> </p>