Aprende HTML: de lo básico a lo profesional

1. Introduccion: ¿Alguna vez pensaste en construir un sitio web? Si es así, el primer idioma que necesitas aprender es HTML. Hoy vamos a recorrer todo lo que necesitas saber para aprender HTML. Hola, mi nombre es Zoe. Soy ingeniero de software y ex profesor que le encanta ayudar a otros a comenzar con la codificación. He creado toneladas de sitios web y aplicaciones web usando React, CSS, HTML y más. Hoy, repasaremos los conceptos básicos del HTML y cómo puedes usarlos para construir tu primer o próximo sitio web construyendo este sitio web. Hablaremos todo sobre cómo usar los elementos, la estructura pagada, los atributos y más. En este curso comenzaremos con la visión general de qué HML, por qué se usa y qué propósito sirve Luego nos sumergimos directamente en nuestro tutorial. El tutorial se dividirá en tres partes. Primero inicializaremos nuestro nuevo proyecto HTML. Luego lo pondremos en funcionamiento en nuestro navegador, y finalmente, construiremos la estructura de nuestro sitio web. Este curso es para cualquiera que esté interesado en construir sus propios sitios web y aprender a trabajar con HTML. Al final de este curso, podrás hacer todo esto por ti mismo. Empecemos. 2. Proyecto de clase: Proyecto de clase. El proyecto para esta clase será construir un sitio web simple usando solo HTML. A lo largo de la lección, cubriremos qué editor usar, cómo estructurar tu código y cómo ver y actualizar tu sitio mientras trabajas. Para esta clase, será fundamental tener acceso a una computadora con la que puedas ejecutar código de Visual Studio u otro editor de código de tu elección. También querrás tener un navegador como Google Chrome en funcionamiento, ya que lo usaremos para mostrar nuestra página web. Dejaré enlaces a cualquier activo y recurso que necesite en la pestaña de proyectos y recursos a continuación. 3. ¿Qué es HTML?: ¿Qué es HTML? HTML o lenguaje de marcado de hipertexto es el bloque de construcción esencial para todo lo que ves en la web Desde botones hasta enlaces secciones más grandes, todo involucra HTML. Si nunca antes has visto cómo se ve, en realidad puedes ver el HTML, pero eso se usa para construir esta página web. Si haces clic derecho en la página y seleccionas la opción que dice Ver fuente de la página, eso mostrará todo el HTML de la página. Y funciona en cualquier página de Internet. Pruébalo, que como lenguaje de marcado, nos permite mostrar todo lo que vemos en la web HTML está hecho de elementos, y estos elementos son los bloques de construcción de la web. Cada elemento consta de dos partes, sus etiquetas y su contenido. Veamos la estructura general del ataque para entenderlos mejor. 4. Etiquetas: Etiquetas. Hay tres tipos de etiquetas que abren etiquetas, etiquetas cierre y etiquetas de cierre automático. Una etiqueta de apertura comienza con un corchete en ángulo izquierdo, seguido del nombre del elemento y luego un corchete en ángulo recto. Si el elemento tiene contenido que va entre las etiquetas, entonces contendrá una etiqueta de cierre, que es una etiqueta de la misma estructura que nuestra etiqueta de apertura, pero con una diagonal hacia delante después del primer corchete angular Si el elemento no requiere etiqueta de cierre porque no hay contenido para ir entre las etiquetas, nos referiremos a él como una etiqueta de cierre automático y agregaremos una diagonal hacia adelante justo antes de ese corchete en ángulo recto Para la mayoría de los tipos de etiquetas, habrá contenido que viva entre las etiquetas de apertura y cierre, pero el contenido que elijas poner ahí dependerá del tipo de elemento con el que estés trabajando. 5. Elementos: Elementos. Hay decenas de elementos diferentes que se utilizan en HTML y cada uno puede servir para un propósito diferente. Si nos interesa crear un elemento para mostrar texto, dependiendo del tipo de texto que sea, podríamos llegar a un encabezado o una etiqueta de párrafo. Hay seis niveles diferentes de etiquetas de encabezado, y las usarás en tu página en un orden jerárquico Nos sumergiremos un poco más en los encabezados en nuestro tutorial. Digamos que no necesitábamos mostrar texto específicamente, pero estamos buscando más para estructurar el formato de nuestro HTML. En ese caso, queremos echar un vistazo a elementos como divisores o secciones Estos elementos nos ayudan a separar un pedazo de HTML de otro y nos permiten mantener nuestro código organizado y trabajar más fácilmente con sling más adelante en la línea 6. Tutorial: A así que lo primero es lo primero, echemos un vistazo al proyecto que esperamos construir. Este es un diseño para el proyecto que estamos buscando construir. Básicamente, es una forma simple con, ya sabes, algo de estilo en el fondo, algunos tamaños diferentes de los encabezados y cosas así. Bien, así que lo primero es lo primero, vas a ir al enlace en la descripción a continuación y conectar tu cuenta para que puedas descargar todos estos archivos de inicio de forma gratuita De verdad, solo necesitas las imágenes, pero podemos usar todo el kit de inicio para ponernos en marcha. Entonces, lo que se nos ha proporcionado aquí es mucha información. Básicamente han seguido adelante y han creado un montón de archivos para nosotros. Voy a seguir adelante y esconder este archivo para que podamos trabajar juntos para volver a construirlo. Entonces lo que queremos hacer es crear un nuevo archivo y llamar a ese punto índice HML, tal como lo tenían Esa es solo la convención que la gente usa para escribir nuevos archivos HTML. Impresionante. Entonces ahora queremos realmente tomar nuestro archivo HTML y mostrarlo, queremos ver los frutos de nuestra lava, ¿verdad? Hemos creado el archivo. Queremos verlo en la web. Entonces vamos a hacer click aquí abajo donde dice, Go Live. Recuerda, instalamos Live server en la última unidad. Bueno, ya vamos a empezar a usarlo. Entonces en la parte inferior derecha donde dice, Go Live, solo quieres hacer clic en eso para ejecutar el servidor Live. Y empezó. Por lo que comenzó en el puerto 5 mil 500 Si paso el mouse sobre uno y voy al puesto Local 5,500. Estoy recibiendo mi página web, pero literalmente no hay nada ahí. Ahora bien, ¿por qué es esto? Es porque aún no hemos puesto nada en el expediente. Entonces, veamos si le digo hola mundo, y haga clic en Guardar. Todavía nada. Eso es raro. ¿Por qué está pasando eso? Bueno, es porque HTML, como podrías haber vislumbrado en el otro archivo, tiene una estructura de carpetas muy específica que realidad le dice a la computadora que tiene el formato correcto del archivo HTML No podemos simplemente seguir adelante y escribir texto en nuestro editor. En realidad necesitamos formatearlo correctamente. E incluso verás que VS Code nos está dando un poco de servidor en vivo nos está dando una pequeña pista aquí. Al igual que, la recarga en vivo no es posible sin una cabeza o una etiqueta corporal, ¿sabes? Básicamente, nos está diciendo, como, Oye, te faltan piezas a este lugar. Entonces, el código VS tiene una característica realmente genial donde si escribe un signo de exclamación, realidad usará Emmet, que es una función de autocompletar incorporada, en realidad le proporcionará todo el tipo de documento para un Te animo a que lo uses porque muy raramente vas a tener que escribir Doc type HTML en tu trabajo real. Entonces, si pulsas signo de exclamación e Enter, tomará todo ese repetitivo y lo pondrá en la página por Si hacemos clic en Guardar, ahora tenemos un montón de elementos adecuados. Y echemos un vistazo lo que es. Entonces el primero, dice doctype HTML Entonces eso es básicamente solo decirnos que el documento es del tipo HTML. Si notas esto justo debajo del tipo Doc HTML, hay esta etiqueta HTML que en realidad tiene un par coincidente en la parte inferior ¿Recuerdas que hablamos de HTML que viene en pares? Bueno, esa es la etiqueta HTML de apertura y cierre. Ahora, una cosa que debes recordar con HTML es que todo cae dentro de los elementos, ¿verdad? Y si no escribes algo dentro del elemento HTML, no existe en la página. Entonces, como vamos a empezar a escribir, vamos a asegurarnos de que escribimos todo dentro de este elemento HTML. Bajemos al siguiente nivel. Aquí tenemos una cabeza, y debajo de la cabeza, parecen estar en el mismo nivel. Tenemos cuerpo. Así que la cabeza y el cuerpo. Se puede pensar en HTML como si fuera un cuerpo humano. Entonces la cabeza es lo que contiene mucha información, ya sabes, el tipo de conocimiento detrás de escena. El cuerpo es lo que contiene el elemento literal. Entonces, si miramos la cabeza aquí, veremos que aquí hay un par de metaetiquetas, que son básicamente, um información de metadatos para básicamente decirle a la computadora un poco más información sobre nuestro archivo HTML. Entonces te está diciendo qué juego de caracteres usar, contenido, el puerto de visualización, ese tipo de cosas. Estas no son partes de las que debamos preocuparnos ahora mismo. Entonces también nos da un título. Así que en realidad podemos darle un título a nuestra página web. Vamos a llamarlo formulario de registro. Ahora bien, si pasamos a nuestro navegador y tal vez actualizamos la página, todavía no hay nada ahí. Pero si notas en la parte superior izquierda, esa cosa que decía El anfitrión local 5,500 ahora dice formulario de registro Entonces, al cambiar el título en nuestro HTML dentro de nuestra cabeza, en realidad estamos cambiando el título de nuestra página. Bastante genial, ¿eh? Bien, así que terminamos con una cabeza por ahora Volveremos a esto en lecciones posteriores, pero por ahora, esto es lo mejor que necesitamos conseguir. A continuación, vamos a hablar del cuerpo. Ahora, como mencioné, el cuerpo es donde viven todos los elementos. Entonces queremos asegurarnos de que estamos poniendo todo lo que queremos ver en el cuerpo, en lugar de comenzar con solo textos básicos, porque aunque podríamos poner hola mundo aquí, y guardarlo y luego volver aquí, y aparecería. Eso no es realmente semánticamente correcto. HTML tiene un montón de elementos diferentes que realmente puedes usar para texto, para imágenes, para botones como ya hemos hablado antes. Quieres asegurarte de que estás usando el elemento, eso es correcto para el tipo de datos que vas a presentar. Entonces porque estoy presentando algún texto, probablemente voy a usar una etiqueta de encabezado. Entonces, la etiqueta H one es la más alta de las etiquetas de encabezado. Solo debería haber una etiqueta H una en tu página porque eso básicamente nos dice que de esto se trata la página. Entonces como no hay nada más en la página, voy a llamarla la página Hello World por ahora. Entonces escribo Hello World entre estas etiquetas H one, y echemos un vistazo, verás que ya tiene un formato diferente. Eso es porque los encabezados, por defecto, tienen algunos estilos incorporados Están en negrilla, son más grandes. Tienen más protagonismo en la página. Si tuviera que ir a crear esto con, digamos, una etiqueta H six, por ejemplo, y guardarla. Se vería lo pequeño que es el texto, apenas se puede leer. Así que es bueno entender la importancia y el protagonismo de H uno versus H dos versus H tres hasta H seis y cuándo debes usarlos. Yo personalmente no uso etiquetas H six muy a menudo porque eso solo requiere tantos encabezados antes de eso para que se agoten Echemos un vistazo a nuestro diseño. Entonces como podemos ver aquí, es esta gran imagen de fondo, y luego hemos aprendido a codificar viendo a otros, ver cómo desarrolladores experimentados resuelven problemas en tiempo real. Y luego está esta forma en el lado derecho. Bien, comencemos a construir esto. Bien, así que aprende a codificar observando a los demás. Supongo que ese es probablemente el H uno, así que vamos a escribir eso. Y si vamos por aquí, miren eso. Ya está refrescado. Asombroso. Bien. Y veamos, veamos cómo los desarrolladores experimentados resuelven los problemas. Entonces esta parte de aquí, esto ve cómo resuelven los desarrolladores experimentados, podrías estar pensando, Bueno, ¿debería estar usando H dos en la edad de tres y cuatro años? En realidad no quieres usar un encabezado para este bit. Esto es algo para lo que usarías una etiqueta Ptag o una etiqueta de párrafo Las etiquetas de párrafo son para esos textos más grandes y generales que verás en una página web, ya sabes, básicamente párrafos de texto. Entonces usaremos la etiqueta de párrafo para esto. Otra característica realmente genial sobre el código VS es que puedes arrastrar tus pestañas hacia un lado y luego tenerlas una al lado de la otra, para que puedas hacer referencia lo que está sucediendo en la otra pestaña. Entonces, usando un Ptag diremos, S aquí los tutoriales guionados de Bing son geniales, pero entender cómo piensan los desarrolladores es invaluable Estoy de acuerdo. Y definitivamente deberías comunicarte con tu mentor para obtener algo de eso uno a la vez. Bien. Impresionante. Entonces tenemos nuestro H uno y nuestro PTAC Veamos cómo se ve eso. Perfecto. Bien, genial. Pero luego está esta otra sección de aquí. Hay así, prueba gratis por siete días, y luego está esta, como, situación de forma. Y entonces esto parece un botón en el que haces clic. Y luego hay más texto debajo de aquí. Entonces, ¿cómo queremos estructurarlo? Podemos entender que aquí hay dos secciones, básicamente, ¿verdad? Hay una sección a la izquierda que en realidad es solo el texto. Es como contarnos sobre la página. Y luego hay una sección a la derecha que trata más sobre, como, lo que realmente está pasando. Entonces podemos usar ya sea el elemento section. O podemos usar el elemento div, que es más solo un divisor genérico. Entonces lo que voy a hacer es crear dos divs aquí, DIV uno y DIV dos Lo que he hecho aquí es que he puesto todo este texto en un div, y luego he creado el segundo div y voy a poner toda la información del formulario ahí. Esto es solo para darles una buena separación, y lo hará más fácil cuando volvamos a limo más tarde Entonces en esta primera sección de aquí arriba, voy a crear una etiqueta P y encapsular ese texto Entonces vamos a decir P. Ahora tenemos una forma. Esta es la primera vez que nos ocupamos de formularios. Hablemos de lo que es una forma. Un formulario es, ya sabes, probablemente hayas enviado un montón de formularios en línea, incluso cuando te registraste en Github, probablemente estés enviando un formulario. Lo que hace un formulario es tomar los diferentes datos que son enviados o ingresados por el usuario, y luego los envía a otra ubicación para ser procesados y tratados. A lo mejor se convirtió en usuario, tal vez, ya sabes, estás enviando tu pedido de Instacart por el día Sea lo que sea, los formularios se utilizan a través de la web, por lo que es muy importante saber cómo crearlos. Entonces, para crear un formulario, vamos a usar realmente el elemento llamado form. Y lo que eso va a hacer es simplemente darnos algunas herramientas extra especiales que vienen con formularios. Entonces dentro de una forma, puedes tener un par de cosas diferentes. Se puede tener una entrada. Y lo mejor de muchas de estas extensiones de código VS que hemos instalado es que te dan información aquí. Entonces, si alguna vez tienes una pregunta sobre qué es algo mientras lo estás escribiendo, literalmente puedes simplemente hacer clic aquí donde dice referencia MDN, y lo harás puedes decir ábrelo Y luego lo abrirá en una nueva pestaña y podrás leer todo sobre la entrada del formulario y el elemento form. Lo traeré aquí para que veas de lo que estoy hablando. Entonces está justo aquí. Input form element, y te dará toda esta información sobre la entrada dentro del elemento form, ¿verdad? Te diré que tiene un tipo, tiene identificaciones, tiene nombre, se requiere, etcétera, etcétera, etcétera, etcétera. Entonces insumos un lugar realmente genial para que empecemos. Entonces dentro de HTML, no solo tienes todos estos diferentes elementos. Entonces si vuelves a subir a la cima donde dice HTML aquí, y vemos Lang es igual al inglés. Lang es un atributo específico de HTML, el atributo language, ¿verdad? Podemos especificar el lenguaje en HTML porque es algo así como el elemento general. No todos los elementos tendrán esta característica, pero realmente no la necesitarías si estableces tu idioma general es el inglés. Así como así, todos estos diferentes elementos tienen sus propios atributos particulares. Entonces, la entrada es una de esas. La entrada tiene varios tipos diferentes de atributos. Entonces uno es el tipo, ¿verdad? Puedes especificar qué tipo de entrada tienes porque hay varios tipos diferentes de entradas que podrías. Entonces un pequeño hack que quiero mostrarte aquí. Bien, así que cuando escribes tipo y presionas Enter, te dará todas las diferentes opciones que tienes para qué tipo de entrada podría ser Entonces podría ser un botón, una casilla de verificación, un color. URL, podría haber tantos tipos diferentes de entrada que podrías usar. Entonces puedes empezar a ver cómo HML tiene mucha flexibilidad, aunque es un lenguaje bastante limitado para escribir Queremos que esto sea tomando el primer nombre de lo que ingresan nuestros usuarios. Entonces vamos a querer que sea un texto, entonces un tipo de texto. Y luego otro atributo en la entrada. Y puedes buscarlo aquí mismo en los documentos de MDN otro atributo es el ¿ es el nombre? ¿Es el nombre? Entonces quieres el nombre de cualquiera que sea la entrada. Entonces, ¿si es es el primer nombre de la persona? ¿Es su apellido? ¿Es su edad? ¿Cuál es esa información que están enviando? Entonces si volvemos por aquí, escribimos en nombre, realidad pondríamos primero y podríamos poner primer nombre. Y así es como sabemos qué pieza de información está ahí. Y luego lo cerramos. Las entradas son en realidad etiquetas de cierre automático. Entonces, en lugar de tener esta entrada de barra de nuevo, no haríamos eso Esa no es la sintaxis adecuada. Más guapa nos va a dar un pequeño error aquí diciendo: Oye, yo, si no hay nada entre tus etiquetas, deberían cerrar por Entonces lo que es una etiqueta de cierre automático es si tomamos entrada y la aislamos aquí, es una etiqueta que termina con una barra diagonal y un corchete Entonces no hay nada que entre ellas. La etiqueta en sí es el valor. Otra característica realmente genial que puedes usar con entrada. Otro atributo cool es el atributo placeholder. Así que en realidad puedes darle un aviso a tu usuario. Sabes, cuando alguna vez vas en un formulario y no estás muy seguro de lo que se supone que debes poner, en realidad puedes darle un mensaje, como dirección de correo electrónico, nombre, etcétera Así que vamos a seguir adelante y darle a nuestro primer atributo de entrada el marcador de posición un primer nombre Fresco. Así que ahora cuando volvamos a nuestra página, increíble. Cuando mires aquí, esta es nuestra pequeña caja de entrada, y esta es nuestra caja de nombre. Sin embargo, puede notar algo interesante. Todo nuestro código va directo hacia abajo. Al igual que, no es solo como venir a un lado. Eso es porque aún no hemos puesto ningún estilo. Trabajaremos en diseñar esta página en la siguiente unidad cuando hablemos de CSS. Pero por ahora, vamos a tratar conseguir todo en la página de una manera semántica Bien, vamos a sacar el siguiente par de entradas aquí. Así que vamos a copiar y pegar y pegar y pegar un poco de un hack ahí. Y vamos a escribir Este va a ser su apellido. Entonces vamos a cambiar el nombre por apellido. Así que recuerda, estos valores que envían van a ser enviados a, ya sabes, una base de datos o un back end o, ya sabes, vamos a iniciar sesión en la consola. Pero tenemos que entender lo que nos están enviando, ¿verdad? Porque si conocemos a alguien cuyo nombre es, como, George Steven, no sabremos si George o Steven es el primer nombre, a menos que le asignemos una clave en particular. Entonces hemos decidido que el primero va a ser el nombre de pila y el siguiente va a ser el apellido. Marcadillo de posición para éste, apellido. Y luego el siguiente parece, Bien, aquí tenemos nuestras cuatro entradas Nuevamente, están sentados uno al lado en lugar de apilados uno encima del otro, pero eso es algo que arreglaremos en otra lección. Y luego debajo de esto, necesitamos un tipo más de entrada. ¿Recuerdas antes que vimos que entrada podría ser un botón? Bueno, eso está relacionado específicamente con las formas. Entonces con los formularios, quieres asegurarte de que cuando envíes el formulario, toda esa información que envíes con un formulario se envíe con él. Y lo hacemos creando un tipo de botón de entrada, incluyendo el que está dentro del formulario. Entonces crearemos una entrada más, la llamaremos entrada, crearemos del tipo. Nombre del botón. Cambiemos el nombre a un valor real y reclamaremos tu prueba gratuita dentro de ahí. Y sigue siendo una etiqueta de auto cierre. Bien. Bien, genial. Así que valore reclama tu prueba gratuita. Si vamos aquí, boom, botón grande que dice reclama tu prueba gratuita. Impresionante. Estamos volando a través de esto. Bien, creo que lo último que tenemos que añadir es esta pieza de aquí Al hacer clic en el botón, estás aceptando nuestros términos y servicios Bien, así que sigamos adelante. Eso parece estar fuera de la forma. Sigamos adelante y agréguela aquí abajo. Hagamos un PTAG y lo pondremos. Ahora bien, algo interesante aquí es que tanto los términos como los servicios y probarlo gratis durante siete días están en negrilla, pero aún no los hemos puesto en negrilla. Entonces, lo que podríamos hacer es usar la etiqueta fuerte. Ahora bien, podríamos hacer esto en CSS, también, pero hay algunas formas realmente fáciles de hacerlo en HTML. La etiqueta fuerte básicamente solo hace que el texto sea más fuerte o negrita. Así que simplemente envolveremos las piezas de nuestro texto que queremos que aparezcan negrilla con la etiqueta fuerte Pongamos uno aquí y pruébalo gratis por siete días. Pongamos uno aquí. Guarde eso. Y boom, ahí vamos. Pruébalo gratis durante siete días es Bold, así como los términos y servicios. Impresionante. Creo que hemos conseguido todos los elementos en la página. Lo último que querrás hacer antes de pasar a CSS es empujar nuestro código a Github y obtener una grabación inicial de lo que estamos haciendo aquí. Entonces, sigamos adelante y abramos una nueva instancia de la terminal. Bien, entonces esto está en una carpeta llamada archivos de proyecto. Hagamos de esto un repositorio Git. Así que vamos a escribir Git en él. Y vamos a cambiar la rama a principal e increíble. Bien, entonces tenemos nuestras marcas Git y kit. Y como puedes ver aquí, todos estos aún no se han agregado a nuestro repositorio de Git. Entonces están apareciendo verdes y sin seguimiento. Entonces, qué podemos seguir adelante y hacer, y estos son solo los diseños y las imágenes así como el índice y las instrucciones de cómo construir esto. Pero realmente no necesitamos rastrear todas estas cosas. Todo lo que realmente necesitamos hacer es rastrear nuestro archivo HTML de punto índice en este momento. Cuando agregamos más CSS e imágenes sobre el trabajo con diferentes cosas, podemos comenzar a rastrearlas. Pero por ahora, todo lo que necesitamos es nuestro índice de punto HTML. Entonces podemos hacer esto y podemos simplemente llamar a este Commit inicial. Y podemos comprometerlo, y ahí vamos. Hecho. Bien, así que ahora lo que queremos hacer es vincular esto a un repositorio de Github, porque recuerden, estamos rastreando todo nuestro código en GitHub desde el primer día hasta el final Así que naveguemos hasta Github. Y vamos a ir a tu cuenta, sea cual sea tu nombre de cuenta, y seguiremos adelante y crearemos un nuevo repositorio. Así que nos dirigimos a repositorios, nuevo repositorio. Vamos a llamar a este formulario de inscripción. Espero que esté disponible. Sí, lo es. Impresionante. Bien, no necesita tu descripción Vamos a mantenerlo público, y solo vamos a seguir adelante y crear un repositorio, tal como lo hicimos la última vez. Impresionante. Como ya hemos creado un ya lo inicializamos como repositorio Git, todo lo que tenemos que hacer es presionar este botón de copia aquí mismo, y va a copiar todas estas lindas líneas de código que no necesitamos ir a memorizar Volveré al código VS, lo pegaré en nuestro terminal, presionaré Enter, y ahí vamos. Está configurado para rastrear. Entonces, si volvemos a GitHub, refrescar la página, solo para verificar nuestro trabajo. Bien, veremos que tenemos un archivo HTML de punto índice comprometido hace 1 minuto Tenemos un commit, y dice, Comprometer inicial. Y lo mejor de Github es que en realidad puedes hacer clic y ver toda la información. Entonces esto es todo lo que acabamos de escribir ahí. Consulta nuestros cuadros de texto, nuestros botones, nuestro formulario, nuestras etiquetas P, nuestras dibs, nuestra H Tenemos muchas cosas que hacer en este archivo HTML en este momento. Así que saltemos y aprendamos algo de CSS y agreguemos un poco de estilo a esta página.