Guía de Etiquetas HTML

Etiquetas Obligatorias

  • Principio de Documento

    Toda la codificación debe estar incluida entre las etiquetas <html> y </html>.

  • Encabezado

    El encabezado se define con las etiquetas <head> y </head>. Aquí se coloca información sobre el documento, como el título.

  • Título

    El título se define con la etiqueta <title> y se muestra en la barra de título del navegador.

  • Cuerpo

    El cuerpo del documento se define con las etiquetas <body> y </body>. Aquí se coloca el contenido visible de la página.

Etiquetas para toda la página

  • Color de Fondo

    La etiqueta <body bgcolor=»#RRVVAA»> permite establecer un color de fondo uniforme para la página. Los valores RR, VV y AA representan la tonalidad de los colores rojo, verde y azul en formato hexadecimal.

  • Imagen de Fondo

    La etiqueta <body background=»nombreimagen.gif»> permite establecer una imagen de fondo. Se recomienda utilizar formatos .gif o .jpg.

  • Colores de texto, enlaces y enlaces visitados

    Las etiquetas <body text=»#RRVVAA»>, <body link=»#RRVVAA»> y <body vlink=»#RRVVAA»> permiten definir los colores del texto, enlaces y enlaces visitados, respectivamente. Los valores de color se representan en formato hexadecimal.

  • Estilos

    La etiqueta <style> permite definir estilos CSS para todo el documento.

  • Meta

    La etiqueta <meta> permite definir propiedades internas del documento, como la descripción y las palabras clave para los motores de búsqueda.

  • Sonido

    Las etiquetas <bgsound> y <embed> permiten reproducir archivos de sonido en la página.

Presentación de texto

  • Encabezamientos

    Las etiquetas <h1> a <h6> definen encabezados de diferentes tamaños.

  • Negrita, Cursiva y Subrayado

    Las etiquetas <b>, <i> y <u> permiten aplicar formato de negrita, cursiva y subrayado al texto.

  • Parpadeo

    La etiqueta <blink> hace que el texto parpadee (no se recomienda su uso).

  • Tamaño del Texto

    Las etiquetas <big> y <small> aumentan y disminuyen el tamaño del texto, respectivamente. La etiqueta <font size=»n»> permite definir un tamaño específico.

  • Subíndice y Superíndice

    Las etiquetas <sub> y <sup> permiten colocar texto como subíndice y superíndice.

  • Color del Texto

    La etiqueta <font color=»#RRVVAA»> permite definir el color del texto.

  • Tipo de fuente

    La etiqueta <font face=»nombre_fuente»> permite definir el tipo de fuente.

  • Texto preformateado

    La etiqueta <pre> muestra el texto con un formato de ancho fijo, conservando los espacios en blanco.

  • Texto en Movimiento

    La etiqueta <marquee> crea un texto en movimiento.

  • Línea Horizontal

    La etiqueta <hr> dibuja una línea horizontal.

  • Espacio en Blanco

    La entidad &nbsp; representa un espacio en blanco.

  • Comentario

    Los comentarios se colocan entre <!– y –> y no se muestran en la página.

  • Caracteres especiales

    Las entidades HTML permiten mostrar caracteres especiales, como <, >, &, «, acentos, etc.

Presentación de párrafos

  • Alineaciones

    Las etiquetas <p align=»left|center|right»> permiten alinear el texto a la izquierda, centro o derecha.

  • Sangría

    La etiqueta <blockquote> aplica una sangría al texto, generalmente utilizada para citas.

  • Párrafo

    La etiqueta <p> define un párrafo y agrega un espacio en blanco antes y después del texto.

  • Renglones en blanco

    La etiqueta <br> inserta un salto de línea.

Tratamiento de imágenes

  • Imagen Individual

    La etiqueta <img src=»nombre_imagen.gif»> permite insertar una imagen.

  • Texto de la imagen

    El atributo alt de la etiqueta <img> permite definir un texto alternativo para la imagen.

  • Alineación del texto

    El atributo align de la etiqueta <img> permite alinear el texto respecto a la imagen.

  • Ancho y Alto

    Los atributos width y height de la etiqueta <img> permiten definir el ancho y alto de la imagen.

  • Videos

    La etiqueta <embed src=»nombre_video.mp4″> permite insertar un video.

Listas

  • Lista numerada

    La etiqueta <ol> define una lista numerada. El atributo type permite definir el tipo de numeración (números, letras, etc.).

  • Lista no ordenada

    La etiqueta <ul> define una lista no ordenada. El atributo type permite definir el tipo de viñeta (círculo, cuadrado, etc.).

  • Lista con sangrado

    La etiqueta <dl> define una lista de definición, con términos (<dt>) y descripciones (<dd>).

Enlaces o Links

  • Enlace a otro URL

    La etiqueta <a href=»URL»> crea un enlace a otra página web.

  • Enlace a un e-mail

    La etiqueta <a href=»mailto:direccion@email»> crea un enlace que abre el cliente de correo electrónico.

  • Marca para enlace dentro de la misma página (Ancla – Anchor)

    La etiqueta <a name=»marca»> define un ancla dentro de la página. La etiqueta <a href=»#marca»> crea un enlace a esa ancla.

  • Enlace a otra página con marca, dentro del mismo sitio

    La etiqueta <a href=»pagina.html#marca»> crea un enlace a una ancla en otra página del mismo sitio web.

  • Enlace con imágenes

    Se puede utilizar una imagen como enlace encerrándola entre las etiquetas <a>.

Tablas

  • Definición

    La etiqueta <table> define una tabla.

  • Bordes y Color de Bordes

    El atributo border de la etiqueta <table> define el grosor del borde. El atributo bordercolor define el color del borde.

  • Separación entre celdas

    El atributo cellspacing de la etiqueta <table> define la separación entre las celdas.

  • Separación entre el borde y el contenido

    El atributo cellpadding de la etiqueta <table> define la separación entre el borde de la celda y su contenido.

  • Alto y ancho

    Los atributos width y height de la etiqueta <table> definen el ancho y alto de la tabla.

  • Color de Fondo o Imagen de Fondo

    El atributo bgcolor de la etiqueta <table> define el color de fondo. El atributo background define una imagen de fondo.

  • Título

    La etiqueta <caption> define un título para la tabla.

  • Definición de filas

    La etiqueta <tr> define una fila de la tabla.

  • Definición de títulos

    La etiqueta <th> define una celda de encabezado.

  • Definición de datos o contenidos

    La etiqueta <td> define una celda de datos.

  • Celda que ocupa muchas filas

    El atributo rowspan de la etiqueta <td> o <th> permite que una celda ocupe varias filas.

  • Celda que ocupa muchas columnas

    El atributo colspan de la etiqueta <td> o <th> permite que una celda ocupe varias columnas.

Formularios

  • Definición

    La etiqueta <form> define un formulario.

  • Acciones

    El atributo action de la etiqueta <form> define la página que procesará los datos del formulario.

  • Introducción de datos

    La etiqueta <input> define un campo de entrada de datos. El atributo type define el tipo de campo (texto, contraseña, casilla de verificación, etc.).

  • Ingreso de un texto que ocupa muchas líneas

    La etiqueta <textarea> define un campo de texto de varias líneas.

  • Ingreso por medio de un menú

    La etiqueta <select> define un menú desplegable. La etiqueta <option> define las opciones del menú.

Frames o Marcos

  • Definición

    La etiqueta <frameset> define un conjunto de marcos.

  • Frames en columnas y filas

    Los atributos cols y rows de la etiqueta <frameset> definen la disposición de los marcos en columnas y filas.

  • Contenido de cada frame

    La etiqueta <frame> define un marco individual. El atributo src define la página que se cargará en el marco.

  • Destino del frame

    El atributo target de la etiqueta <a> define en qué marco se abrirá el enlace.

  • Atributos del tag frameset

    Los atributos border, frameborder y framespacing de la etiqueta <frameset> controlan los bordes y el espaciado entre los marcos.

  • Atributos del tag frame

    Los atributos frameborder, marginheight, marginwidth, name, noresize, scrolling y src de la etiqueta <frame> controlan las propiedades del marco.

  • Si el frame no puede visualizarse

    La etiqueta <noframes> define contenido alternativo para navegadores que no admiten marcos.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.