Fundamentos Esenciales de HTML: Estructura y Etiquetas Clave para el Desarrollo Web
Enviado por Programa Chuletas y clasificado en Informática y Telecomunicaciones
Escrito el en 
español con un tamaño de 6,1 KB
El Esquema General de una Página Web
El desarrollo de una página web se basa en la correcta utilización de las sentencias y etiquetas de HTML. A continuación, se presenta un listado de las etiquetas más comunes y sus atributos.
Configuración del Cuerpo del Documento (<body>)
La etiqueta <body> define el contenido visible de la página. Se le pueden aplicar los siguientes atributos (aunque muchos están obsoletos y se recomienda usar CSS):
bgcolor="color": Color de fondo de página (usando nombre o código RGB).background="imagen": Poner una imagen de fondo. Importante: Utilizar rutas relativas y no absolutas.text="color": Indica el color del texto para todo el documento (usando nombre o código hexadecimal).
Para asegurar que los caracteres especiales (como acentos y la ñ) se muestren correctamente, se debe configurar la codificación en la cabecera del documento (<head>).
Listado de Etiquetas de Formato de Texto
<b>o<strong>- Texto en negrita. (Se recomienda
<strong>por su valor semántico). <i>o<em>- Texto escrito en cursiva. (Se recomienda
<em>por su valor semántico). <h1>a<h6>- Etiquetas de encabezado.
<h1>es el tamaño más grande posible y<h6>es el tamaño más pequeño posible. <br>- Esta etiqueta no tiene etiqueta de cierre (es vacía) y realiza un salto de línea.
<p>- Indica que todo el texto pertenece a un párrafo. Podemos dar atributos a la etiqueta como
align, que tomará los valoresleft,center,rightojustify. <font size="7">(Obsoleto)- Toma la fuente mayor posible.
<blockquote>- Realiza una sangría al texto por la derecha y la izquierda (utilizado semánticamente para citas).
<u>- Para que el texto esté subrayado.
<s>o<del>- Tacha el texto.
<sub>- Para subíndices.
<sup>- Para superíndices.
<center>(Obsoleto)- Para centrar el texto.
Elementos Multimedia y Estructurales
Inserción de Imágenes (<img>)
La etiqueta <img> se utiliza para poner una imagen en nuestro documento. Es una etiqueta vacía y requiere el atributo src. Podemos darle las siguientes características:
width = [número | número%]: Toma valores numéricos (píxeles) o porcentuales.height = [número | número%]: Toma valores numéricos (píxeles) o porcentuales.alt="texto": Sirve para poner un texto alternativo si la imagen no se carga. Es fundamental para la accesibilidad y el SEO.
Línea Horizontal (<hr>)
Etiqueta para dibujar una línea en pantalla. Podemos darle las siguientes características:
Color: Define el color.Size: Define el grosor de la línea.Width: Define la longitud horizontal, en número o porcentaje.Align: Posicionamiento (left,centeryright).
Interactividad: Hipervínculos y Movimiento
Creación de Hipervínculos (<a>)
La etiqueta <a> se utiliza para realizar un hipervínculo a un documento de internet o a un recurso propio. Si el enlace es externo, es obligatorio incluir el protocolo http o https. El atributo principal es href.
Características:
Target: Para indicarle dónde abrir la página. Por defecto, sustituye nuestra página. Los valores que podemos poner son:_top: Abre el enlace en la ventana completa (saliendo de cualquier frame)._blank: Abre el enlace en una pestaña o ventana nueva._parent: Abre el enlace en el marco padre._self: Abre el enlace en la misma ventana o marco. (Valor por defecto).
Marquesina (<marquee> - Obsoleto)
La etiqueta <marquee> se utiliza para escribir un letrero en movimiento en la pantalla. Esta etiqueta está obsoleta y no debe usarse en desarrollo moderno.
Características:
Bgcolor: Pone color de fondo en lo que ocupa la marquesina.Direction: El sentido en que se mueve el texto (left,right,up,down).Behavior: Define el efecto sobre el texto. Los valores posibles son:- Alternate: Tiene un efecto rebote.
- Slide: Se para al llegar al final de la pantalla.
- Scroll: El movimiento es cíclico (es el valor por defecto).
Height: La altura de la marquesina (número o porcentaje).Hspace: Realiza una sangría horizontal (espacio a la izquierda y derecha del contenido).Loop: Indicamos el número de veces a repetir.Scrolldelay: Indica la velocidad de las letras al moverse. Va más rápido si el valor numérico es más pequeño.Width: Define el ancho de la marquesina.