Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Menu
Productos mencionados
Creador de páginas web, Sitios web de WordPress
Estando en el proceso de creación de tu página web, puede que te hayas topado en internet
con términos como editor HTML, código HTML o etiquetas HTML.
Aunque la mayoría de las plataformas para crear sitios web (como WordPress) son bastante
fáciles de utilizar y no requieren de grandes conocimientos técnicos, conocer más sobre HMTL
te ayudará a entender conceptos de programación y te preparará para cuando sea hora de
modificar o mejorar la apariencia de tu sitio web.
Por eso, en esta ocasión te compartimos algunas nociones básicas del tema, así como los 10
códigos HTML que debes conocer, acompañados de ejemplos para que aprendas a utilizarlos.
¿Qué es el HTML?
Las siglas HTML vienen de “Hyper Text Markup Language” o Lenguaje Marcado de Hipertexto.
Los códigos HTML son el lenguaje universal que se utiliza para crear y dar formato a los sitios
web. Funcionan en cualquier sistema operativo (Windows, Mac, Linux, etc.) y con cualquier
navegador (Chrome, Explorer o Mozilla).
Etiquetas HTML
El lenguaje HTML está conformado por un sistema de etiquetas en serie o tags, que incluyen
instrucciones que los navegadores traducen como:
Imágenes
Texto
Hipervínculos
Listas de palabras
Tablas, etc.
Así, para que un elemento de este tipo pueda ser leído, la etiqueta debe tener dos partes: una
etiqueta de inicio (<etiqueta>) y una de cierre (</etiqueta>) entre guiones (< >).
Por ejemplo, las etiquetas <strong> y </strong> definen un texto en negrita. Si en nuestro
documento HTML escribimos una frase con el siguiente código:
Como seguro habrás notado, la etiqueta inicial sirve para definir el comportamiento del
contenido (por ejemplo, si un texto irá en negritas o si tendrá un tamaño específico), y la de
cierre le indica al navegador hasta dónde debe llegar ese comportamiento. Para construir los
“cierres” sólo necesitas agregar una diagonal (/) al inicio de la etiqueta.
Cabe destacar que no todas las etiquetas necesitan forzosamente un “cierre”. Por ejemplo, el
código <br> para introducir saltos de línea es considerado un “elemento vacío” y puede ir por sí
solo en cualquier parte del cuerpo del texto.
Para la creación de sitios web completos, usar documentos HTML te permitirá tener
organizados en un solo lugar todos los códigos que vayas a usar en cada página. Este
documento lo puedes elaborar en el editor de textos de tu preferencia (Microsoft Word o el
mismo bloc de notas), y solo debes asegurarte de guardarlo como .html u otro formato web (es
un documento por cada página).
Ahora bien, un documento HTML bien armado tiene cuatro etiquetas esenciales para que el
contenido se distribuya correctamente. Estas son:
1. HTML
<html> está al inicio de un documento HTML e indica a los navegadores que la página tiene
código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje, la etiqueta
de cierre </html> será el último elemento del documento.
2. Encabezado
3. Título de la página
<title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo. Es
el título que puedes ver en las pestañas del navegador.
4. Cuerpo
<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de otra
forma, comprende todo el contenido visible del sitio. Aquí podrás insertar texto, imágenes,
videos o cualquier otra funcionalidad que desees mostrar.
<html>
<head>
<title>Mi página de ejemplo</title>
</head>
<body>
Aquí va el contenido
</body>
</html>
Si creas un documento .html con este código y lo abres en tu navegador, verás algo como esto:
Con las cuatro etiquetas anteriores ya tienes el “esqueleto” de tu página web. La siguiente
tarea sería introducir texto (entre los tags <body> y </body>) y controlar sus etiquetas. Veamos
las más elementales.
5. Títulos y subtítulos
<h1> <h2>… <h6> son etiquetas que funcionan para agregar títulos y subtítulos en el cuerpo del
texto, lo cual ayuda a jerarquizar la información. Por cierto, te recomendamos utilizar la
etiqueta H1 sólo una vez dentro del contenido.
Ejemplo:
Resultado:
6. Párrafos
Las etiquetas <p> y <br> te ayudarán a organizar el texto en párrafos y saltos de línea.
Ejemplo:
7. Imágenes
<img> con esta etiqueta podrás agregar imágenes al cuerpo de tu página. Combinarlo con el
atributo src te permitirá especificar la ubicación donde se encuentra la imagen, y el atributo alt
te ayudará a darle un título a esa imagen para que lo lean buscadores como Google.
Ejemplo:
<img src="https://images.unsplash.com/photo-1535378917042-10a22c95931a">
Resultado:
8. Hipervínculos
<a> te permite insertar un hipervínculo a la página. Por ejemplo, el link hacia tus redes sociales
o hacia otro sitio web con el que desees conectar tu página.
Ejemplo:
Resultado:
Como te habrás dado cuenta, el atributo que se utilizó aquí fue href.
9. Listas e índices
<ol> sirve para agregar listas numeradas y <ul> para agregar bullets, los cuales mejoran la
legibilidad de tus textos.
Ejemplo:
<ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
<li>Elemento 3</li>
<li>Elemento 4</li>
</ul>
Resultado:
10. Estilo
Aunque usualmente se ubica dentro de la etiqueta <head>, con el atributo <style> puedes
definir el estilo de tu contenido en términos de:
Color
Tamaño de fuente
Tipografía, etc.
Ejemplo:
Resultado:
Tip adicional: basarte en los códigos HTML de otros sitios puede ayudarte a entender más
sobre diseño web. Estos están disponibles en todo momento al dar clic con el botón derecho del
mouse en alguna parte en blanco y seleccionar “Ver el código fuente de la página”.
Esperamos que este artículo haya despertado tu curiosidad para experimentar más con el
funcionamiento de estos códigos, y así no se te escape ningún detalle cuando empieces a dar
formato a tus páginas web. Recuerda que la práctica hace al maestro.
Si el lenguaje informático no es lo tuyo … ¡no te preocupes! Para eso también existen creadores
de páginas web como GoDaddy, donde puedes hacer tu sitio desde cero y sin necesidad de
tener conocimientos previos de programación.
Productos mencionados