Aprende HTML desde cero: Guía completa para principiantes
Introducción a HTML
¡Bienvenido a nuestra guía completa para aprender HTML desde cero! HTML, que significa Lenguaje de Marcado de Hipertexto (HyperText Markup Language), es el lenguaje estándar utilizado para crear páginas web. En esta guía, te guiaremos a través de los fundamentos de HTML, desde lo más básico hasta conceptos más avanzados, para que puedas comenzar a crear tus propias páginas web desde cero.
¿Qué es HTML?
HTML significa HyperText Markup Language (Lenguaje de Marcado de Hipertexto). Es un lenguaje de marcado que se utiliza para crear la estructura y el contenido de las páginas web. El código HTML se compone de etiquetas que definen los diferentes elementos de una página web, como el título, los párrafos, las imágenes, los enlaces, etc.
HTML para principiantes
Si bien muchas guías en Internet intentan enseñar HTML utilizando una gran cantidad de teorías alucinantes, este tutorial se centrará en brindarle las habilidades prácticas para crear su primer sitio .
El objetivo es mostrarle "cómo" crear su primera página web sin dedicar todo el tutorial a centrarse demasiado en el "por qué".
Al final de este tutorial, tendrá los conocimientos necesarios para crear un sitio web básico y esperamos que esto le inspire a profundizar más en el mundo de HTML utilizando nuestras guías siguientes.
Bien, esta es la única teoría obligatoria. Para comenzar a escribir HTML, es útil saber lo que estás escribiendo.
HTML es el lenguaje en el que están escritos la mayoría de los sitios web . HTML se utiliza para crear páginas y hacerlas funcionales.
El código utilizado para hacerlos visualmente atractivos se conoce como CSS y nos centraremos en esto en un tutorial posterior. Por ahora, nos centraremos en enseñarle cómo construir en lugar de diseñar .
La historia del HTML
HTML fue creado por primera vez por Tim Berners-Lee, Robert Cailliau y otros a partir de 1989 . Significa lenguaje de marcado de hipertexto.
Hipertexto significa que el documento contiene enlaces que permiten al lector saltar a otros lugares del documento o a otro documento completamente. La última versión se conoce como HTML5.
Un lenguaje de marcado es una forma en que las computadoras se comunican entre sí para controlar cómo se procesa y presenta el texto. Para hacer esto, HTML utiliza dos cosas: etiquetas y atributos .
¿Qué son las etiquetas y los atributos?
Las etiquetas y los atributos son la base del HTML.
Trabajan juntos pero realizan funciones diferentes, vale la pena invertir 2 minutos en diferenciarlos.
¿Qué son las etiquetas HTML?
Las etiquetas se utilizan para marcar el inicio de un elemento HTML y normalmente están entre corchetes angulares. Un ejemplo de etiqueta es: <h1>.
La mayoría de las etiquetas deben abrirse <h1> y cerrarse </h1> para funcionar.
¿Qué son los atributos HTML?
Los atributos contienen información adicional . Los atributos toman la forma de una etiqueta de apertura y se coloca información adicional en su interior.
Un ejemplo de atributo es:
<img src="mydog.jpg" alt="A photo of my dog.">
En este caso, la fuente de la imagen (src) y el texto alternativo (alt) son atributos de la <img> etiqueta.
Reglas de oro para recordar
La gran mayoría de las etiquetas deben abrirse (<tag>) y cerrarse (</tag>) con la información del elemento, como un título o texto, entre las etiquetas.
Cuando se utilizan varias etiquetas, las etiquetas deben cerrarse en el orden en que se abrieron
Por ejemplo:
<strong><em>This is really important!</em></strong>Editores HTML
Ahora que hemos dejado de lado la teoría básica. Es hora de aprender a construir nuestro primer sitio web.
En primer lugar, debemos asegurarnos de tener las herramientas adecuadas. Lo más importante es que necesitamos un editor HTML.
Hay muchas opciones en el mercado. Éstos son algunos de los más populares:
Texto sublime 3
Sin embargo, para este tutorial, usaremos Sublime Text 3 , ya que es gratuito y también ofrece soporte multiplataforma para usuarios de Windows, Mac y Linux.
Uso de elementos semánticos HTML5 como <header>, <footer>, <nav>, <article>, <section>. Consejos sobre accesibilidad web, optimización para motores de búsqueda y buenas prácticas de desarrollo web.
Otro ejemplo es aprender desde Visual Studio Code que en el siguiente tutorial lo explicaremos mas a fondo, para aprender HTML en Visual Studio Code, puedes seguir estos pasos:
Si aún no tienes Visual Studio Code instalado, descárgalo e instálalo desde su sitio web oficial.
Una vez instalado, abre Visual Studio Code en tu computadora.
Haz clic en "Archivo" en la barra de menú superior y selecciona "Nuevo archivo". Luego, guarda el archivo con la extensión .html, por ejemplo, index.html.
En el nuevo archivo HTML, escribe tu código HTML. Puedes comenzar con algo simple, como:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página web</title>
</head>
<body>
<h1>Hola, mundo!</h1>
<p>¡Bienvenido a mi primera página web!</p>
</body>
</html>
Guarda tu archivo: Asegúrate de guardar tu archivo HTML después de escribir tu código.
Visualiza tu página web: Puedes abrir tu archivo HTML en tu navegador web predeterminado haciendo clic derecho en el archivo en el explorador de archivos de Visual Studio Code y seleccionando "Abrir con Live Server" si tienes la extensión Live Server instalada. Esto abrirá tu página web en tu navegador localmente y te permitirá ver los cambios en tiempo real mientras editas tu código.
Experimenta y aprende: Una vez que hayas creado tu primera página web, experimenta con diferentes etiquetas HTML y propiedades CSS.
Construcción básica de una página HTML
Estas etiquetas deben colocarse una debajo de la otra en la parte superior de cada página HTML que cree.
<!DOCTYPE html>— Esta etiqueta especifica el idioma en el que escribirás en la página. En este caso el lenguaje es HTML 5.
<html>— Esta etiqueta indica que de aquí en adelante vamos a escribir en código HTML.
<head>— Aquí es donde van todos los metadatos de la página , cosas destinadas principalmente a motores de búsqueda y otros programas informáticos.
<body>— Aquí es donde va el contenido de la página .
Estructura HTML
Así es como se estructura visualmente una página HTML promedio. Más etiquetas
Dentro de la <head> etiqueta, hay una etiqueta que siempre se incluye: <title>, pero hay otras que son igual de importantes:
<title>
Aquí es donde insertamos el nombre de la página tal como aparecerá en la parte superior de la ventana o pestaña del navegador.
<meta>
Aquí es donde se almacena la información sobre el documento: codificación de caracteres, nombre (contexto de la página), descripción. Probemos una <head>sección básica:
<head>
<title>My First Webpage</title>
<meta charset="UTF-8">
<meta name="description" content="Este campo contiene información sobre su página. Suele tener alrededor de dos frases..">
<meta name="author" content="Conor Sheils">
</header>
Agregar contenido
A continuación, haremos <body> una etiqueta.
El HTML <body> es donde agregamos el contenido diseñado para ser visto por ojos humanos. Esto incluye texto, imágenes, tablas, formularios y todo lo que vemos en Internet todos los días.
Cómo agregar encabezados HTML a su página web
En HTML, los títulos se escriben en los siguientes elementos:
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
Como habrás adivinado <h1>, <h2> deben usarse para los títulos más importantes, mientras que las etiquetas restantes deben usarse para subtítulos y texto menos importante.
Los robots de los motores de búsqueda utilizan este orden para descifrar qué información es más importante en una página.
Creando tu encabezado
Probémoslo. En una nueva línea en el editor HTML, escriba:
<h1> Bienvenido a mi pagina </h1>
Y pulsa guardar. Guardaremos este archivo como " index.html " en una nueva carpeta llamada "mi página web".
El momento de la verdad : haga clic en el archivo recién guardado y su primera página web debería abrirse en su navegador predeterminado. Puede que no sea bonito, es tuyo... todo tuyo. *Risa malvada*😎
Pues no nos dejemos llevar; Todavía tenemos muchas funciones excelentes que podemos agregar a su página.
Cómo agregar texto en HTML
Agregar texto a nuestra página HTML es sencillo usando un elemento abierto con la etiqueta <p> que crea un nuevo párrafo . Colocamos todo nuestro texto normal dentro del elemento.
Conclusión
¡Felicidades por completar nuestra primera parte de la guía de como aprender HTML desde cero!
Aprende Html
Descubre HTML, el lenguaje clave para crear la estructura web. Este curso cubre texto, navegación, imágenes, multimedia, atributos globales, accesibilidad, tablas, formularios y más.
Leer Más
Aprende Html y CSS
Domina los fundamentos para ingresar a la programación web con HTML y CSS. En nuestros videos, te guiaremos paso a paso a través de la estructura esencial para crear sitios web, todo utilizando software gratuito.
Leer Más
Aprende CSS
Masteriza CSS el lenguaje escencial para estilizar HTML en web y apps. Este curso incluye texto, modelo de caja, estilos, layouts, diseño receptivo, Flexbox, Grid, móvil primero, transiciones y más.
Leer Más
0 Comentarios