¿Cuánto HTML debe aprender por adelantado?

Bienvenido, soy Miguel y en esta ocasión les traigo un post.

Una guía para principiantes sobre cuánto HTML es suficiente para empezar. Cuánto se debe aprender HTML antes de sumergirse en CSS o JavaScript. Cubrió los 9 aspectos más importantes de HTML.

Este artículo lo guiará sobre cuánto HTML debe aprender para comenzar en el mundo del desarrollo web. Este artículo cubre hasta 9 temas importantes que uno debe conocer sobre HTML. Al final, hay un fragmento de código que cubre todo lo que necesita saber sobre los conceptos básicos de HTML y luego puede saltar a CSS inmediatamente después.

Antes de comenzar, debe conocer el esqueleto básico de HTML.

Aquí está la lista de cosas que creo que todo principiante debería conocer y no tomará tiempo dominarla.

1. Tipografía

La tipografía en HTML se ocupa de las etiquetas en las que podemos escribir el encabezado, subtítulo, párrafos largos, etc.
Hay seis tipos diferentes de etiquetas de encabezado en HTML, cada uno de los cuales tiene un tamaño de texto diferente, <h1>tiene el tamaño de texto más grande y <h6>tiene el pequeñísimo. La mayoría de las etiquetas <h1>y <h2>se utilizan en el código HTML, ya que la mayor parte del tamaño y el estilo se realiza con la ayuda de CSS.
Hay una <p>etiqueta en la que podemos agrupar un fragmento de texto en una sola unidad, y esa unidad de texto puede tener una longitud variable.

HTML también incluye <strong>,<em> y la etiqueta para hacer que el texto encerrado en ella se destacan de una manera ya sea en negrita o cursiva o tachado. <del>

El siguiente fragmento de código muestra el ejemplo de todas las etiquetas discutidas ahora. Simplemente copie y ejecute para ver el resultado.

Tipografía en HTML

2. Listas

HTML básicamente contiene dos tipos diferentes de listas. Uno es la lista ordenada y el otro es la lista desordenada. La lista ordenada se define con una <ol> etiqueta y la lista desordenada se define con <ul>.

Para mostrar elementos en la lista, <li>se utiliza una etiqueta que se conoce como elementos de lista. Esta etiqueta se utiliza tanto en listas ordenadas como en listas desordenadas.

La lista también puede estar anidada, como una lista ordenada dentro de una lista desordenada o viceversa. Puede haber n niveles posibles de anidamiento con listas HTML. A continuación se muestra el fragmento de código de la lista HTML.

Tabla HTML

4. Formularios

Los formularios en HTML son una de las cosas más útiles, ya que ayudan a obtener los datos del usuario y esos datos se envían al lenguaje de backend, puede ser Python, Java, Node.js, etc. El atributo de acción de la <form>etiqueta indica dónde los datos deben enrutarse.

Dentro de la <form>etiqueta hay una <input>etiqueta que tiene un atributo de tipo en el que podemos mencionar diferentes tipos de entrada que queremos del usuario. Algunos de los ejemplos son los siguientes:

• texto
• correo electrónico
• número
• fecha
• radio
• caja
• enviar
• Reiniciar

Si queremos que el usuario seleccione la entrada de la lista desplegable, hay una <select> etiqueta en la que hay varias <option>etiquetas, que se pueden usar para crear una lista desplegable en la página web.

Si queremos que el usuario ingrese un trozo de texto, <textarea>se usa una etiqueta.

Una <label>etiqueta se debe utilizar antes de que el <input>y <select>etiqueta y el de atributo de la <label>etiqueta debe ser la misma que Identificación del atributo de <input>y <select>etiqueta. Esto debe hacerse porque si hacemos clic en la etiqueta, el campo de entrada se resaltará automáticamente en la página web.

Se recomienda adjuntar todos <label>, <input>o <label>, <select>etiqueta en un <div>contenedor pero no es necesario siempre. Al ver el bloque de código a continuación, obtendrá una idea clara de cómo funcionan los formularios.

Ejemplo de formulario HTML

5. Enlaces

Los enlaces se utilizan para conectar diferentes páginas web en Internet. HTML tiene una etiqueta de anclaje <a>que tiene un atributo href en el que debemos ingresar la ruta o dirección de otra página web a la que debemos navegar haciendo clic en el enlace. Si queremos abrir un enlace en una nueva pestaña, debemos establecer el atributo de destino en _blank . El contenido debe ir entre la etiqueta de anclaje de apertura y cierre como se ve a continuación.

Etiqueta de anclaje en HTML

En el código anterior, los dos primeros enlaces navegarán al sitio web de LinkedIn y el último navegará a la página web del mismo sitio web.

6. Imágenes

Como la mayoría de las páginas web tienen imágenes, es un tema importante a tratar. Para agregar una imagen en la página web necesitamos usar una <img> etiqueta y en el atributo src de la etiqueta de la imagen, debemos especificar la ruta de la imagen o la dirección de la imagen donde se encuentra.

En el atributo alt , debemos agregar un texto alternativo si por alguna razón nuestra imagen no se carga, ese texto se mostrará en la página web. Veamos el código ahora.

Etiqueta de imagen en HTML

7. Entidades HTML

Algunos de los caracteres están invertidos en HTML como < y > , estos símbolos pueden tratarse como etiquetas HTML de apertura o cierre, por lo que debemos reemplazar estos caracteres con una entidad de carácter. Algunas de las entidades HTML válidas se enumeran a continuación:

blank space -->  
> --> >
< --> &lt;
& --> &amp;
cent symbol --> &cent;
pound symbol --> &pound;
copy right --> &copy;

A continuación se muestra el código de la entidad HTML:

Entidades HTML

8. Metaetiqueta

<meta>está dentro de la <head>etiqueta que se utiliza para diferentes funcionalidades. Algunas de sus funcionalidades se enumeran a continuación:

• Se usa para especificar en qué juego de caracteres está codificado nuestro documento.
• Se utiliza para especificar la ventana gráfica de nuestro documento.
• Se utiliza para escribir la descripción de nuestra página web, que se mostrará debajo del título en la página web.
• Se utiliza para especificar el autor del documento.
• Se utiliza para actualizar la página web dada en un cierto intervalo de tiempo.

Ejemplo de metaetiqueta

9. Semántica HTML5

Al mirar la <div>etiqueta, no podemos saber qué contenido contiene. Entonces, para que esto no suceda, usamos etiquetas semánticas HTML5 que nos informan sobre el contenido que contiene esa etiqueta.

Al igual que la <header>etiqueta contendrá el encabezado de la página web, la <footer>etiqueta contendrá el pie de página de la página web, la <main>etiqueta contendrá el cuerpo principal de la página web, <section>contendrá un fragmento particular de código que debe separarse del resto del código. La mayoría de las secciones se utilizan solo en la etiqueta principal. Y hay muchas más etiquetas semánticas HTML5.

Etiquetas semánticas HTML5

Bono: si has llegado hasta aquí leyendo este artículo, aquí tienes un pequeño consejo que puede ayudarte.

Debe tener en cuenta la diferencia entre la etiqueta de nivel de bloque y la etiqueta en línea. Algunas etiquetas son de nivel de bloque como la etiqueta <div>, <p>y muchas más. Y luego algunas son etiquetas en línea como la etiqueta de anclaje , la etiqueta fuerte , la etiqueta em , etc.

El código que cubre los temas que hemos discutido en este artículo.

Conclusión

Hemos analizado todos los conceptos básicos de HTML que debe conocer antes de pasar a CSS. Ha sido un buen viaje de dos días escribiendo este artículo, espero que les haya gustado.

Y

Si todavía está leyendo este artículo, muchas GRACIAS por el valioso tiempo que ha dedicado a leer este artículo. Espero que hayas aprendido algo de este artículo.

Recursos

• Tutorial HTML.
• Lenguaje de marcado de hipertexto.

Gracias por leer este artículo.