🥷🏾 Aprende HTML desde cero en 20 MINUTOS GRATIS – #1 Aprendiendo HTML
Aprende como crear un documento html, etiquetas principales …y estructura de carpetas y archivos dentro de un proyecto.
Marcas de tiempo ⏱
00:00 – Intro
00:35 – Generando estructura del Proyecto
02:30 – Iniciando el servidor con Live Server
05:45 – Estructura básica de HTML
06:30 – Etiqueta Title
07:40 – Títulos
09:00 – Párrafos
09:45 – Saltos de línea
11:50 – Listas desordenadas
13:05 – Listas ordenadas
14:05 – Hipervinculos
18:55 – Imágenes
22:00 – Negritas
22:20 – Itálica / Cursiva[+] Show More
¿Quieres aprender HTML desde cero en solo 20 minutos?
¡Es posible! Con nuestro tutorial gratuito, podrás obtener una introducción rápida y sencilla a las bases del lenguaje y aprender HTML.
HTML es el lenguaje de marcado más comúnmente utilizado en la creación de páginas web. Sirve para estructurar y dar formato al contenido de una página, como texto, imágenes y enlaces. Aunque hay muchas etiquetas y atributos disponibles para aprender HTML, no es necesario aprender todos de una vez. Con nuestro tutorial, podrás obtener las nociones básicas en solo 20 minutos.
Empecemos por Aprender HTML
Para empezar, vamos a crear nuestro primer documento HTML. Abre tu editor de código favorito (como Visual Studio Code) y crea un nuevo archivo. Luego, escribe la siguiente línea en la parte superior del archivo:
<!DOCTYPE html>
Esta línea le dice al navegador que el documento que estamos creando es un documento HTML. A continuación, escribiremos la estructura básica de un documento HTML entre las etiquetas <html>:
<!DOCTYPE html>
<html>
<head>
<title>Título de mi página</title>
</head>
<body>
Contenido de mi página
</body>
</html>
La etiqueta <head> contiene información sobre el documento, como el título (que se muestra en la pestaña del navegador). La etiqueta <body> es donde incluiremos el contenido visible de la página, como texto, imágenes y enlaces.
Ahora que tenemos la estructura básica de nuestro documento, vamos a añadir algunos elementos de texto para darle un poco más de formato. Para crear un encabezado, podemos utilizar la etiqueta <h1>. Por ejemplo:
<h1>Bienvenido a mi sitio web</h1>
También podemos utilizar otras etiquetas de encabezado, como <h2>, <h3>, etc. para crear encabezados de distintos tamaños.
Para crear párrafos de texto, utilizamos la etiqueta <p>. Por ejemplo:
<p>Este es mi primer párrafo</p>
<p>Este es mi segundo párrafo</p>
También podemos utilizar la etiqueta <strong> para darle énfasis a ciertas palabras o frases:
<p>Este es un <strong>texto importante</strong></p>
Otras etiquetas comunes que puedes utilizar para aprender HTML son <em> para darle énfasis con cursiva, <img> para insertar imágenes y <a> para crear enlaces.
Una vez que hayas agregado algunos elementos de texto a tu página, guarda el archivo y ábrelo en tu navegador para ver cómo se ve. Si quieres darle un poco más de estilo a tu página, puedes utilizar CSS.
CSS (Hojas de Estilo en Cascada) es un lenguaje utilizado para dar formato a la presentación de un documento HTML. Con CSS, podemos cambiar cosas como el color de fondo, el tipo de letra y el espaciado entre elementos.
Para aprender HTML y CSS y como utilizar CSS en nuestra página, podemos crear un archivo de estilos CSS separado y vincularlo a nuestro documento HTML con la etiqueta <link>. Por ejemplo:
<head>
<link rel="stylesheet" href="estilos.css">
</head>
En el archivo de estilos, podemos especificar reglas de estilo para diferentes elementos en nuestra página. Por ejemplo, para cambiar el color de fondo de todo el contenido del <body>, podemos escribir la siguiente regla:
body {
background-color: lightblue;
}
También podemos especificar reglas de estilo para elementos específicos utilizando selectores. Por ejemplo, para cambiar el color de todos los encabezados de nivel 1 (<h1>), podemos
escribir la siguiente regla:
h1 {
color: red;
}
Además de cambiar el color, también podemos utilizar CSS para cambiar el tipo de letra, el tamaño y el espaciado entre elementos. Por ejemplo:
h1 {
font-family: Arial, sans-serif;
font-size: 36px;
margin-bottom: 20px;
}
Con CSS, hay muchas más opciones de estilo disponibles. ¡Explora y juega con diferentes opciones para ver cómo puedes personalizar tu página web! ¡Aprender HTML y CSS es muy sencillo!
Como ves, aprender HTML es muy sencillo y ahora que ya sabes cómo utilizar HTML y CSS para crear y dar formato a tu página web, ¿por qué no dar el siguiente paso y aprender a hacer tu sitio web responsive?
El diseño responsive es un enfoque de diseño de páginas web que permite que tu sitio se vea bien en cualquier dispositivo, ya sea una computadora de escritorio, una tablet o un teléfono móvil. Esto se logra utilizando reglas de estilo en CSS que cambian la apariencia de la página según el ancho de la pantalla del dispositivo.
Una forma fácil de hacer tu sitio web responsive es utilizar un framework de diseño como Bootstrap. Bootstrap es un conjunto de archivos CSS y JavaScript que proporcionan una serie de clases y componentes predefinidos que puedes utilizar en tu sitio web.
Aprender HTML y CSS es muy sencillo, una vez que ya tengas los conocimientos básicos, te recomendamos utilices un Framework como Bootstrap
Para utilizar Bootstrap en tu sitio web, primero debes descargar los archivos y vincularlos a tu documento HTML. Luego, puedes utilizar las clases predefinidas de Bootstrap en tus elementos HTML para aplicar estilos y componentes.
Por ejemplo, para aplicar una clase de grilla de Bootstrap a un elemento <div>, podemos escribir lo siguiente:
<div class="col-md-4">
Contenido
</div>
Esto dividirá el contenido en cuatro columnas en dispositivos con pantalla de ancho mediano o superior. Para dispositivos con pantalla más pequeña, el contenido se ajustará automáticamente para aprovechar mejor el espacio disponible.
Además de la grilla, Bootstrap también incluye una serie de otros componentes predefinidos, como menús de navegación, botones y formularios. Con estos componentes, podrás crear un sitio web atractivo y fácil de usar sin tener que empezar desde cero.
Con aprender HTML, CSS y Bootstrap y tenerlos en tu arsenal de habilidades de desarrollo web, estarás listo para comenzar a crear tus propias páginas web. ¡No olvides que hay mucho más que puedes aprender y explorar, así que sigue adelante y sigue mejorando tus habilidades!
Aprender HTML, CSS, Bootstrap y Github; La mejor combinación
Una herramienta esencial para cualquier ingeniero de software es un tablero de proyectos. Un tablero de proyectos es un lugar donde puedes organizar y administrar tareas y metas relacionadas con un proyecto. Hay muchas herramientas disponibles en línea que te permiten crear y gestionar tu tablero de proyectos, como Github Projects en nuestro canal de Youtube tenemos una lista de videos completa, pulsa aquí para ir a ella.
Una vez que hayas configurado tu tablero de proyectos y comenzado a utilizarlo para gestionar tus tareas y metas, asegúrate de seguir utilizándolo y actualizándolo regularmente. Un tablero de proyectos es una herramienta viva que te ayudará a mantener el rumbo y alcanzar tus objetivos de manera más eficiente.
Otra herramienta esencial para cualquier ingeniero de software es GitHub. GitHub es una plataforma en línea para almacenar y colaborar en proyectos de software. Con GitHub, puedes crear repositorios para tus proyectos y utilizar diferentes características para colaborar con otros desarrolladores
Una vez que hayas creado tu repositorio, puedes comenzar a subir tu proyecto. Esto se hace a través de la consola de tu computadora o a través de la interfaz de usuario de GitHub. Para subir tu proyecto a través de la consola, primero debes inicializar un repositorio local en tu computadora y luego usar los comandos git add y git commit para agregar y confirmar los cambios en tu repositorio. Luego, puedes utilizar el comando git push para subir tus cambios al repositorio en línea en GitHub.
Una vez que hayas subido tu proyecto a GitHub, puedes utilizar la plataforma para colaborar con otros desarrolladores. Una de las características más útiles de GitHub es la posibilidad de hacer “pull requests”. Un pull request es una solicitud para que tus cambios sean aceptados y fusionados en el repositorio principal. Para hacer un pull request, debes crear una “rama” (o versión) de tu repositorio con tus cambios y luego solicitar que se fusione con la rama principal del repositorio.
Otra característica útil de GitHub es la posibilidad de crear “issues” y “milestones”. Un issue es un problema o tarea que necesita ser resuelta en el proyecto. Puedes asignar issues a diferentes miembros de tu equipo y seguir el progreso de su resolución. Un milestone es un hito importante en el proyecto, como la finalización de una función o la entrega de un informe final.
En conclusión, aprender HTML es esencial para cualquier persona que desee crear y desarrollar sitios web. HTML es el lenguaje de marcado utilizado para estructurar el contenido de una página web y darle formato. Con un poco de práctica y una buena comprensión de cómo funcionan las etiquetas y atributos, aprender HTML será muy sencillo, podrás crear páginas web atractivas y bien estructuradas. Además, una vez que hayas dominado el HTML básico, podrás aprender HTML avanzado con el uso de formularios y manejo de datos.
