Códigos HTML básicos para páginas web
Ahora sí, te mostraremos cuáles son los códigos HTML fundamentales para páginas
web y los iremos repasando en orden para que puedas hacerlo a la vez en tu documento
o editor HTML.
Eso sí, antes de seguir, debes saber que tu código HTML debe comenzar con la
declaración <!DOCTYPE html> para indicar que tu código está escrito en HTML y
pueda leerse sin problemas.
A partir de allí, ya puedes comenzar a agregar el resto del código HTML que define la
estructura y el contenido de la página, como te enseñaremos a continuación.
1. <html> – El elemento raíz
Luego de especificar <!DOCTYPE html>, todos los sitios web siguen con el elemento
html. También se lo conoce como elemento raíz porque está en la raíz del árbol de
elementos que conforman una página web.
Para crear el elemento html, debes escribir una etiqueta de apertura <html> seguida de
una etiqueta de cierre </html>. Todo lo demás en tu página web va entre estas 2
etiquetas.
Ejemplo:
<html>
Todos los demás elementos del sitio van aquí.
</html>
2. <head> – El encabezado del documento
El elemento head contiene información sobre la página web, a diferencia del contenido
de la web en sí. Hay muchos elementos que puedes poner dentro del elemento del
encabezado, como:
Título.
Enlace, que puedes usar para agregar hojas de estilo y faviconos a tu página.
Meta, para especificar cosas como conjuntos de caracteres, descripciones de página y
palabras clave para motores de búsqueda.
Script, para agregar código JavaScript a la página.
Aquí hay un ejemplo de elemento head típico:
<head>
<title> Las aventuras de mi gato Lucky </title>
<meta http-equiv = "Content-Type" content = "text / html; charset
= utf-8">
<meta name = "description" content = "Las aventuras de mi gato
favorito Lucky, con historias, fotos y películas">
<meta name = "keywords" content = "cat, Lucky, pet, animal">
<link rel = "stylesheet" type = "text / css" href = "/ style.css">
<link rel = «icono de acceso directo» href = «/ favicon.ico»>
</head>
3. <title> – El título de la página
Esta etiqueta contiene el título de la página. El título se muestra en la barra de título
del navegador (en la parte superior de la ventana del navegador), así como en
marcadores, resultados en las tendencias de búsqueda de Google y muchos otros
lugares.
El título debe describir el contenido de la página de manera precisa. Intenta dar a cada
página de tu sitio su propio título único.
Aquí hay un ejemplo:
<title> Las aventuras de mi gato Lucky </title>
4. <body> – El contenido de la página
La etiqueta body o contenido aparece después del elemento principal en la página. Debe
contener toda la información de tu sitio web: texto, imágenes, etc. Todas las páginas
web tienen un elemento de cuerpo único, con la excepción de las páginas de conjunto de
marcos.
Aquí hay un ejemplo el formato general del elemento body:
<body>
(Todo el contenido de la página va aquí)
</body>
5. <h1> – Encabezado de sección
Los encabezados te permiten dividir el contenido de tu página en fragmentos legibles.
Funcionan de manera muy similar a los títulos y subtítulos en un libro o un informe.
HTML admite 6 elementos de encabezado: h1, h2, h3, h4, h5 y h6. De estos, h1 es
para los encabezados más importantes, h2 es para subtítulos menos importantes, y así
sucesivamente. Por lo general, no necesitarás usar más de h1, h2 y h3, a menos que tu
página sea muy larga y compleja.
Este es un ejemplo de un elemento de encabezado h1:
<h1> Las aventuras de mi gato Lucky </h1>
6. <p> – Un párrafo
El elemento p te permite crear párrafos de texto. La mayoría de los navegadores
muestran párrafos con un espacio vertical entre cada uno de ellos, separando muy bien
el texto.
Si bien puedes crear «párrafos» de texto simplemente usando etiquetas <br> para
insertar líneas en blanco entre fragmentos de texto, es mejor usar elementos p en la
mayoría de los casos. No solo es más ordenado, sino que brinda a los navegadores y
motores de búsqueda una mejor idea de cómo está estructurada tu página.
Aquí hay un ejemplo de un párrafo:
<p> Mi gato Lucky tiene muchas aventuras. ¡Ayer atrapó un ratón, y
esta mañana atrapó dos! </p>
Una buena regla general al escribir texto para la web es asegurarse de que cada párrafo
contenga un solo punto, tema o pensamiento. Si quieres hablar sobre 2 cosas diferentes,
usa 2 párrafos.
7. <a> – Un enlace
Uno de los elementos más importantes de una página web, es el elemento a porque te
permite crear enlaces a otro contenido. El contenido puede estar en tu propio sitio o
en cualquier otro.
Para crear un enlace, usa las etiquetas <a> y </a> alrededor del contenido que deseas
colocar en el enlace e indica la URL para vincular en el atributo href de la etiqueta <a>.
A continuación, te mostramos cómo crear un texto que se vincule a www.ejemplo.com:
<a href="http://www.ejemplo.com/"> ¡Visita este excelente sitio web!
</a>
8. <img> – Una imagen
El elemento img te permite insertar imágenes en una página web. Para insertar una
imagen, primero carga la imagen en tu servidor, luego usa una etiqueta <img> para
hacer referencia al nombre de archivo de la imagen cargada.
Aquí hay un ejemplo:
<img src = "mifoto.jpg" alt = "Mi foto">
El atributo alt es obligatorio para todas las etiquetas img. Lo utilizan los navegadores
que no muestran imágenes para ofrecer texto alternativo al visitante.
9. <div> – Un contenedor a nivel de bloque para contenido
El elemento div es un contenedor genérico que puedes usar para agregar más estructura
al contenido de tu página. Por ejemplo, puedes agrupar varios párrafos o encabezados
que tengan un propósito similar en un elemento div. Por lo general, los elementos div se
usan para:
• Encabezados y pies de página
• Columnas de contenido y barras laterales.
• Cuadros resaltados dentro del flujo de texto
• Áreas de la página con un propósito específico, como anuncios publicitarios.
• Galerías de imágenes.
Al agregar atributos de clase y/o id a tus elementos div, puedes usar CSS para diseñar
y posicionar los divs. Esta es la base para crear diseños de página basados en CSS.
Aquí hay un ejemplo que usa un div para mostrar el contenido de una barra lateral en la
página:
<div id = "barra lateral">
<h1> Encabezado de la barra lateral </h1>
<p> Texto de la barra lateral </p>
<p> Más texto de la barra lateral </p>
</div>
10. <span> – Un elemento en línea para contenido
El elemento span es similar a div en que se usa para agregar estructura a tu contenido.
La diferencia es que div es un elemento de nivel de bloque, mientras que span es un
elemento en línea:
• Los elementos de nivel de bloque, como div, h1 y p, están diseñados para contener
bloques de contenidos relativamente grandes o independientes, como párrafos de texto.
Un elemento de nivel de bloque siempre comienza en una nueva línea.
• Los elementos en línea, como span, a e img, están diseñados para contener piezas de
contenido más pequeñas, como algunas palabras o una oración, dentro de un bloque de
contenido más grande. Agregar un elemento en línea no hace que se cree una nueva
línea y, además, los elementos a nivel de bloque pueden contener elementos en línea;
sin embargo, los elementos en línea no pueden contener elementos a nivel de bloque.
Al igual que con un div, a menudo agrega un atributo de clase y/o id a un intervalo para
que puedas diseñarlo usando CSS.
El siguiente ejemplo utiliza elementos span para indicar nombres de productos dentro
de un párrafo. Estos nombres de productos podrían resaltarse con CSS. Un motor de
búsqueda personalizado también podría utilizar la información provista por los
elementos span para identificar los productos dentro de la página.
<p> Algunos de nuestros productos incluyen <span class = "product">
SuperWidgets </span>, <span class = "product"> MegaWidgets </span> y
<span class = "product"> WonderWidgets </span> . </p>
11. <ol> y <ul> – Listas numeradas e ítems
Para crear una lista numerada deberás utilizar la etiqueta <ol> (que significa
ordered list). Mientras que la etiqueta <li> (list item) identificará cada elemento de la
lista.
<p> Aceptamos:</p>
<ol>
<li> Tarjetas de crédito</li>
<li> Efectivo</li>
<li> Cheques</li>
</ol>
Si no te interesa que tu lista sea numerada y simplemente quieres ítems, puedes
reemplazar <ol> por <ul> (unordered list).
Resultado
Ahora que conoces estos 11 códigos HTML básicos para páginas web, vamos a
juntarlas en una sola página web:
<!DOCTYPE html>
<html>
<head>
<title> Las aventuras de mi gato Lucky </title>
<meta http-equiv = "Content-Type" content = "text / html; charset
= utf-8">
<meta name = "description" content = "Las aventuras de mi gato
favorito Lucky, con historias, fotos y películas">
<meta name = "keywords" content = "cat, Lucky, pet, animal">
<link rel = "stylesheet" type = "text / css" href = "/ style.css">
<link rel = "icono de acceso directo" href = "/ favicon.ico">
</head>
<body>
<h1> Las aventuras de mi gato Lucky </h1>
<div id = "mainContent">
<p> Mi gato Lucky tiene muchas aventuras. Ayer <a
href="mouse.html"> atrapó un ratón </a>, ¡y esta mañana atrapó dos!
</p>
<p> Aquí hay una foto de Lucky: </p>
<img src = "lucky.jpg" alt = "Lucky">
</div>
<div id = "barra lateral">
<h2> ¡Compra nuestros productos! </h2>
<p> Algunos de nuestros productos incluyen <span class =
"product"> SuperWidgets </span>, <span class = "product"> MegaWidgets
</span> y <span class = "product"> WonderWidgets </span> . </p>
<p> Aceptamos:</p>
<ol>
<li> Tarjetas de crédito</li>
<li> Efectivo</li>
<li> Cheques</li>
</ol>
</div>
</body>
</html>
Resumen
Como puedes ver, es posible crear un sitio web completo utilizando solo estos 11
códigos HTML básicos. Lo primero que debes tener es una cuenta de web hosting.
Con el web hosting de Neolo, tu página web cargará rápido como un rayo y el
soporte técnico te responderá el 80% de las veces en menos de 1 hora ante
cualquier ayuda que necesites.
10 comandos HTML y etiquetas esenciales
El código HTML básico cuenta con una amplia gama de etiquetas, cada una con un
propósito específico para estructurar y presentar contenido en la web. A continuación,
les enumeramos una decena de las etiquetas más esenciales.
1. <!DOCTYPE>: Esta declaración define el tipo de documento y la versión de
HTML. Es esencial para asegurar que el navegador interprete correctamente el
documento. Ejemplo: <!DOCTYPE html> para HTML5.
2. <html>: Es la raíz del documento HTML. Todo el contenido de una página web
se encuentra dentro de esta etiqueta.
Ejemplo: <html lang="es">
...
</html>
1. <head>: Contiene metadatos, enlaces a hojas de estilo y scripts. No es visible
directamente en la página web.
Ejemplo: <head>
<title>Mi Página Web</title>
</head>
1. <title>: Define el título de la página, que se muestra en la pestaña del
navegador. Es crucial para SEO y la usabilidad.
Ejemplo: <title>Mi Blog Personal</title>
2. <body>: Encapsula todo el contenido visible de una página, como texto,
imágenes y enlaces.
Ejemplo: <body>
<h1>Bienvenido a mi Blog</h1>
</body>
1. <h1> a <h6>: Son etiquetas de encabezado, siendo <h1> el más importante y
<h6> el menos. Estas etiquetas ayudan a estructurar el contenido y son
importantes para el SEO.
Ejemplo: <h1>Título Principal</h1>
<h2>Subtítulo</h2>
1. <p>: Define un párrafo. Es una de las etiquetas más utilizadas para el texto.
Ejemplo: <p>Este es un párrafo de ejemplo.</p>
2. <a>: Define un hipervínculo, que se utiliza para enlazar a otras páginas o
recursos. Ejemplo: <a href="https://www.ejemplo.com">Visita este sitio</a>
3. <img>: Se utiliza para insertar imágenes. El atributo src especifica la ruta de la
imagen, y alt proporciona un texto alternativo.
Ejemplo: <img src="imagen.jpg" alt="Descripción de la imagen">
4. <ul> y <ol>: <ul> crea una lista desordenada y <ol> una lista ordenada. Dentro
de estas, se utilizan <li> para cada elemento de la lista.
Ejemplo: <ul>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ul>
Estas etiquetas HTML son fundamentales para estructurar el contenido de una manera
lógica y accesible no solo para los usuarios, sino también para los motores de búsqueda.
Al utilizar estas etiquetas de manera efectiva, se puede mejorar significativamente la
presentación y la funcionalidad de una página web.
Cómo crear un documento HTML básico
1. Comenzar con <!DOCTYPE html> para definir el tipo de documento.
2. Usar la etiqueta <html> para iniciar el documento.
3. Dentro de <html>, colocar <head>. Aquí pueden incluir el título de su página
con <title>Mi Página Web</title>.
4. Después de <head>, añadir la etiqueta <body>.
5. Dentro de <body>, pueden agregar contenido como <p>¡Hola, mundo!</p> para
un párrafo.
6. Cerrar las etiquetas </body> y </html> para finalizar el documento.
Scratch es un lenguaje visual de programación centrado en fomentar la creatividad y el
pensamiento lógico. Aunque cualquier edad es buena para aprenderlo, los niños/as
son destinatarios ideales para Scratch. Enseñándoles a usar Scratch estamos
ayudándoles a afrontar y resolver situaciones y problemas de todo tipo de una manera
lógica y estructurada.
el objetivo principal debería ser que vaya cogiendo soltura y asimilando conceptos,
ideas básicas y flujos de trabajo sobre programación y pensamiento computacional de
manera divertida y atrayente, para que se genere un interés y base técnica que le
anime a seguir.
Scratch es un lenguaje visual desarrollado por el MIT y que, basándose en bloques que
se unen a modo de puzzle, supone un modo sencillo de aprender sobre programación.
Pero esa sencillez de la interfaz o su colorido no debe ocultar que estamos ante un
lenguaje también muy potente y que admite grandes proyectos que se pueden
alcanzar de manera gradual.
El uso de Scratch propicia el desarrollo del pensamiento lógico a través de la
búsqueda de diferentes soluciones a un problema. Programando, el niño/a es capaz de
desarrollar su capacidad para ser más estructurado y organizado en la gestión de
recursos y el uso de herramientas que le lleven a alcanzar la resolución de una tarea
concreta.
