Etiquetas Para Crear Una Pagina Web En Bloc De Notas
¡Hola a todos futuros desarrolladores web! ¿Listos para el examen? No se preocupen, vamos a repasar las etiquetas esenciales para crear una página web básica usando el Bloc de Notas. ¡Ánimo!
Estructura Básica de HTML
Toda página web comienza con una estructura fundamental. Recuerden, sin ella, el navegador no sabrá qué hacer con nuestro código. La etiqueta <!DOCTYPE html> le dice al navegador que estamos usando HTML5. Es lo primero que debemos escribir.
La etiqueta <html> es la raíz de todo. Todo el contenido de nuestra página web irá dentro de esta etiqueta. Incluye dos secciones principales: <head> y <body>.
Must Read
<head> contiene metadatos. Son datos sobre la página, como el título y la configuración. No se muestra directamente en la página.
<body> contiene todo el contenido visible. Aquí es donde irá el texto, las imágenes y otros elementos.
Etiquetas Esenciales Dentro de <head>
Dentro de <head>, la etiqueta <title> define el título de la página. Este título se muestra en la pestaña del navegador. Es muy importante para el SEO.
La etiqueta <meta> proporciona metadatos adicionales. Podemos usarla para definir la codificación de caracteres, como UTF-8. Esto asegura que los caracteres especiales se muestren correctamente.
Por ejemplo, <meta charset="UTF-8">. No olviden incluirla. Evitará problemas con acentos y otros símbolos.
Etiquetas Comunes Dentro de <body>
Ahora la parte divertida: el contenido visible. La etiqueta <h1> a <h6> define encabezados. <h1> es el encabezado más importante y <h6> el menos importante.
La etiqueta <p> define párrafos. Es la forma principal de mostrar texto en nuestra página. Podemos incluir varias oraciones dentro de un párrafo.
La etiqueta <br> inserta un salto de línea. Es útil para crear espacios verticales pequeños. No necesita etiqueta de cierre.
La etiqueta <hr> inserta una línea horizontal. Se usa para separar secciones de contenido. Tampoco necesita etiqueta de cierre.
Para crear enlaces, usamos la etiqueta <a>. El atributo href define la URL a la que enlazamos. Por ejemplo: <a href="https://www.ejemplo.com">Visita Ejemplo</a>.
La etiqueta <img> inserta imágenes. El atributo src define la ruta de la imagen. El atributo alt proporciona un texto alternativo si la imagen no se carga.
Por ejemplo: <img src="imagen.jpg" alt="Descripción de la imagen">. Recuerden guardar la imagen en el mismo directorio que el archivo HTML.
Formato de Texto Básico
Para hacer el texto en negrita, usamos la etiqueta <strong>. Esto le da énfasis al texto. Es importante para resaltar palabras clave.
Para hacer el texto en cursiva, usamos la etiqueta <em>. Se usa para dar un tono diferente al texto. Puede ser útil para citas o énfasis sutil.
Recuerden, estas etiquetas son básicas pero fundamentales. Con ellas pueden construir una página web funcional. ¡Practiquen escribiendo código en el Bloc de Notas!
Ejemplo Completo
Aquí un ejemplo rápido:
<!DOCTYPE html>
<html>
<head>
<title>Mi Primera Página</title>
<meta charset="UTF-8">
</head>
<body>
<h1>¡Hola Mundo!</h1>
<p>Este es mi primer párrafo.</p>
<a href="https://www.google.com">Visita Google</a>
</body>
</html>
Consejos Finales
Guarden el archivo con la extensión .html. Por ejemplo, "mipagina.html". Asegúrense de seleccionar "Todos los archivos" en el tipo de archivo al guardar.
Abran el archivo en un navegador web. Simplemente hagan doble clic en el archivo. ¡Verán su página en acción!
Resumen: Dominen la estructura básica HTML (<html>, <head>, <body>). Conozcan las etiquetas de encabezado (<h1>-<h6>), párrafo (<p>), enlace (<a>) e imagen (<img>). ¡Y no olviden guardar el archivo con la extensión .html!
¡Mucha suerte en el examen! ¡Confío en que lo harán genial!