Tecnología web de front-end

En esta lección, hablaremos del lenguaje de marcado de hipertexto. Lenguaje de marcado de hipertexto o HTML, es el idioma principal utilizado en Internet. Este lenguaje se introdujo a principios de la década de 1990. por Sir Tim Berners-Lee, e incluye características como hipervínculos que hoy damos por hecho. Vamos a ver HTML y un par de las nuevas convenciones que han salido en los últimos años. Voy a eliminar el HTML que tenemos aquí. Y vamos a empezar de nuevo con el tipo de documento. De hecho, podemos comenzar con HTML. Ahora, si comenzamos solo con HTML, como ves el elemento HTML en la página ahora mismo. Oh, por cierto, a menudo escucharás elementos HTML llamados etiquetas. Una forma de pensarlo es un elemento HTML es un conjunto completo de etiquetas. En este caso, si ponemos un párrafo y lo encerramos con etiquetas de dos P o etiquetas de párrafo, entonces ahí lo tienes, tenemos un elemento de párrafo. Algunos elementos pueden ser considerados cosas como dirección, pie de página, encabezado, y otras cosas dentro de HTML. En este caso, vamos a considerar elementos HTML y las etiquetas HTML sean sinónimos. Usaremos etiquetas a veces, a veces usaremos elementos. Entonces, comencemos a usar un par de etiquetas. Primero, vamos a comenzar con una declaración DOCTYPE. Así que vamos a seguir adelante e insertar una exclamación de ángulo DOCTIPO HTML. Y eso nos dice que estamos usando algo después del año 2000 en HTML, simplemente escribiendo HTML por sí mismo renderizará su documento de una manera peculiar eso sería algo como la representación de documentos de la década de 1990. Eso no está mal. De hecho, puede escribir todo su HTML en el estándar actual y solo usa HTML en la parte superior y eso estará bien. Sin embargo, hay algunas etiquetas, algunos elementos que no eran compatibles en la década de 1990, y puedes ver cómo eso puede volverse confuso. Entonces, para evitar eso, usamos el signo de exclamación, que la gente llama bang y DOCTYPE HTML. Después de la declaración inicial de que estamos usando DOCTYPE HTML, Seguiremos adelante y comenzaremos nuestra codificación HTML. Ahora primero con HTML, vamos a tener lo que tendría normalmente en un documento. Entonces, en HTML, vamos a tener una sección de encabezado y también tendremos una sección de carrocería. Así que sigamos adelante. Haré un cuerpo como este. Así que tendremos una sección de cabeza y una sección de cuerpo. Ahora voy a cerrar cada una de estas etiquetas, cada uno de estos elementos. Y por aquí con cuerpo verás que Lo cerraré solo con una barra oblicua. Así que tenemos HTML cabeza, cabeza, cuerpo, cuerpo, así y podemos cerrar nuestro HTML. Ahora el editor que estoy usando coloca el texto en el tabulado derecho o en el espaciado correcto desde un lado, eso es realmente conveniente. Y nuestros futuros editores buscarán en el código de Visual Studio, y ese código VS le dará muchas más opciones de las que puede ver justo aquí en la pantalla. Sin embargo, lo que estamos escribiendo en la pantalla es HTML sin formato. y así es exactamente como se crea un documento. Debo señalar que no se requiere DOCTYPE en mayúsculas aquí, en realidad podemos hacer todo de esta minúscula, que es mucho más fácil encontrará cuando esté escribiendo. Luego, debajo de la sección principal, en realidad podemos poner nuestro título de nuestra pagina Así que lo guardaré muy rápido y veamos. lo que tenemos hasta ahora. Ahora mismo tenemos un documento en blanco. Si miras esto, tenemos mucho código para un documento en blanco, pero tenemos un documento en blanco con un título que dice página web. Así que si miramos aquí arriba, veremos que la página web es de hecho el título en la parte superior. Tres de los elementos o etiquetas que vamos a utilizar hoy son encabezado, párrafo, un salto de línea, fuente de imagen, un enlace URL, así que esto va a ser algo donde tienes un enlace a otro sitio web donde quieres ir a ese enlace, y una lista donde tienes una lista sin numerar, y finalmente una tabla. Para ver cómo se ve esto, sigamos adelante y entremos en nuestro cuerpo y sobre el cuerpo, Seguiremos adelante y crearemos un párrafo. Así que la P de ahí es la etiqueta del párrafo. Y dirás que esto es un párrafo. Ahora, una vez que escribimos que esto es un párrafo, no necesita espacios como después del elemento allí. Entonces podemos guardar eso. Asegúrese de guardarlo en el servidor antes de volver a cargarlo. Y verás que este es un párrafo que sale. Bien, antes de tus párrafos normalmente tendrás encabezados. Así que vayamos al cuerpo aquí y veamos H1. Ahora H1 es el encabezado más grande. Si alguna vez ha creado un documento, y esto no es ningún tipo de procesador de textos, sabes que tienes el titulo del documento, luego debajo del título, tendrás el primer encabezado y escribirás, a veces tendrás un subtítulo y un subsubtítulo, etcétera. Bueno, esto es lo mismo. Aquí mismo podemos decir que este es el encabezado uno, y simplemente iré y haré un H1 como este. Nos aseguraremos de guardarlo y actualizarlo, Verá que tenemos el encabezado uno, este es un párrafo. Bueno, sigamos adelante y pongamos un encabezado dos allí. Así que vamos a bajar aquí H2 y lo llamaremos bastante interesante, lo llamaremos encabezado dos. También ayuda a verlo en la pantalla. Entonces encabezando dos así y quiero hacer que dos, no uno, entonces vemos el encabezado dos. Guardemos eso y volvamos a cargarlo aquí mismo en la pantalla. Y verá que tenemos encabezado uno y encabezado dos, y luego esto es un párrafo debajo de eso.