HTML es la columna vertebral de cada página web.  Si es un principiante, permítanos guiarlo por los pasos básicos para comprender HTML.

5 pasos para comprender el código HTML básico

Anuncio HTML es una parte vital de la web tal como la conocemos. Y aunque pocos diseñadores web crean páginas escribiendo HTML manualmente, sigue siendo útil saber un poco al respecto. Vamos a ver algunos conceptos básicos del lenguaje, incluyendo qué es realmente HTML, algunos conceptos fundamentales y cómo interactúa con otros lenguajes. Piens

Anuncio

HTML es una parte vital de la web tal como la conocemos. Y aunque pocos diseñadores web crean páginas escribiendo HTML manualmente, sigue siendo útil saber un poco al respecto.

Vamos a ver algunos conceptos básicos del lenguaje, incluyendo qué es realmente HTML, algunos conceptos fundamentales y cómo interactúa con otros lenguajes. Piense en esto como un curso intensivo de "HTML para tontos".

Conceptos básicos de HTML: ¿Qué es HTML?

HTML significa lenguaje de marcado de hipertexto . Y aunque a veces está agrupado con lenguajes de programación, esto no es exacto.

Como lenguaje de marcado, HTML solo le permite crear el diseño de visualización de las páginas. Un verdadero lenguaje de programación, como Java o C ++, contiene lógica y comandos que se llevan a cabo.

Si bien es simple, el HTML está en la columna vertebral de cada página en la web. Es responsable de qué texto aparece en negrita, agregando imágenes y vinculando a otras páginas. Tenemos preguntas frecuentes sobre HTML Preguntas frecuentes sobre HTML esencial que debe marcar Las preguntas frecuentes sobre HTML esencial que debe marcar HTML ha existido por un tiempo, por lo que es hora de que aprenda lo básico. ¡Aquí está lo que es, cómo funciona y cómo puede escribir algunos elementos comunes en HTML hoy! Leer más que explica más.

Puede hacer clic derecho en la mayoría de las páginas web de su navegador y elegir Ver fuente de la página o similar para ver el HTML detrás de ellas. Es probable que esto también contenga una gran cantidad de código que no sea HTML, pero puede examinarlo.

Ver ejemplo de fuente HTML

Incluso si tiene cero experiencia con el marcado o los lenguajes de programación, aprender un poco sobre HTML lo convertirá en un usuario web más informado. Veamos cinco pasos básicos para ayudarlo a comprender cómo funciona HTML. Proporcionaremos ejemplos en el camino.

Paso 1: Comprender el concepto de etiquetas

HTML utiliza un sistema de etiquetas para clasificar diferentes elementos del documento.

La mayoría de las etiquetas vienen en pares para envolver el texto afectado dentro de ellas. Aquí hay un ejemplo simple (la etiqueta pone el texto en negrita ; lo discutiremos más en un momento).

 This is some bold text . 

Observe cómo la etiqueta de cierre comienza con una barra diagonal (/). Esto significa una etiqueta de cierre, que es importante. Si no cierra una etiqueta, todo desde el principio tendrá ese atributo.

Sin embargo, no todas las etiquetas tienen un par. Algunos elementos HTML, llamados elementos vacíos, no tienen contenido y existen por sí solos. Un ejemplo es el
etiqueta, que es un salto de línea. Puede "cerrar" dichas etiquetas agregando una barra inclinada (como
) pero no es estrictamente necesario.

Paso 2: El diseño HTML esqueleto

Un documento HTML adecuado debe tener determinadas etiquetas definidas para que se presente correctamente. Estas son las partes esenciales:

  • Cada documento HTML debe comenzar con para declararse como tal. Por lo tanto, su etiqueta de cierre, , es el último elemento en un archivo HTML.
  • A continuación, el La sección incluye información como el título de la página, varios scripts que se ejecutan en la página y similares. Como su nombre indica, esto suele ocurrir justo después de la inicial etiqueta. El usuario final no ve gran parte del contenido en estas etiquetas.
  • Finalmente, el La etiqueta contiene el texto de la página que ve el lector (y mucho más). Aquí encontrarás imágenes, enlaces y más.

Desde el La sección constituye la mayor parte de un documento HTML, el resto de nuestro tutorial analiza los elementos que pertenecen a él.

Paso 3: Etiquetas HTML básicas para formatear

A continuación, veamos algunas etiquetas comunes que componen documentos HTML. Por supuesto, no es posible cubrir todos los elementos, por lo que revisaremos algunos de los más importantes. Hemos cubierto muchos más ejemplos de HTML 17 Ejemplos de código HTML simple que puede aprender en 10 minutos 17 Ejemplos de código HTML simple que puede aprender en 10 minutos ¿Desea crear una página web básica? Aprenda estos ejemplos HTML y pruébelos en un editor de texto para ver cómo se ven en su navegador. Lea más si esto no lo satisface.

Si estas etiquetas parecen bastante básicas, recuerde que el HTML se creó en 1993. La web estaba muy basada en texto en sus primeras etapas.

Formato de texto simple

HTML admite estilos de texto básicos como los que encontrará en Microsoft Word:

  • Las etiquetas ponen el texto en negrita .
  • las etiquetas (que significa "énfasis") pondrán en cursiva el texto.

HTML también admite la etiqueta anterior para negrita y cursiva. Sin embargo, es preferible usar los anteriores.

En resumen, y muestre cómo debe entenderse algo, mientras que las últimas etiquetas solo le dicen cómo debería verse. Estas etiquetas anteriores son más accesibles para lectores de pantalla utilizados por personas con discapacidad visual.

Párrafo y otras divisiones

HTML La etiqueta le permite definir una sección del documento. Por lo general, esto se combina con CSS (ver más abajo) para formatear una sección de cierta manera.

los

etiqueta le permite dividir el texto en párrafos. Los navegadores pondrán automáticamente algo de espacio antes y después de estos, permitiéndole dividir el texto de forma natural.

Puede agregar encabezados a su documento y hacer que sea más fácil seguirlo usando

mediante

Etiquetas H1 es el encabezado más importante, mientras que H6 es el menos importante. Casi todos los artículos de MakeUseOf usan encabezados H2 y H3 para organizar la información.

Al presionar Entrar para agregar saltos de línea en su documento HTML, en realidad no se mostrarán. En cambio, puedes usar
para agregar un salto de línea.

Aquí hay un ejemplo que usa todo esto:

Encabezado de ejemplo

Este es un párrafo.

Este es un segundo
párrafo dividido entre dos líneas.

Paso 4: Insertar imágenes

Las imágenes son una parte vital de la mayoría de las páginas web. Puede agregarlos fácilmente con HTML e incluso establecer diferentes propiedades para ellos.

Inserta una imagen usando el etiqueta. La combinación de esto con el atributo src permite especificar desde dónde desea que se cargue la imagen.

Otro atributo importante de etiquetas es alt . El texto alternativo le permite describir la imagen para lectores de pantalla o en caso de que la imagen no se cargue correctamente. Puede pasar el mouse sobre una imagen para ver su texto alternativo.

Use los elementos de width y height para especificar el número de píxeles en los que aparece la imagen.

Póngalo todo junto, y una etiqueta de imagen se verá así:

 Dr. Phil 

Paso 5: Agregar enlaces

La World Wide Web no sería una gran red sin enlaces a otras páginas. Utilizando la etiqueta, puede vincular a otras páginas en cualquier texto.

Dentro de etiqueta, el atributo href le dice dónde está vinculando. Simplemente pegar la URL funcionará bien. Puede usar el elemento de title para agregar un poco de texto que aparece cuando alguien pasa el mouse sobre el enlace.

Un enlace básico se ve así:

 Visit Google 

los La etiqueta tiene muchos otros elementos posibles, pero no los analizaremos aquí.

Cómo se conecta HTML con CSS y JavaScript

Hemos visto lo básico de HTML y cómo establece una página web. Pero como puede imaginar, HTML solo no es suficiente para la web moderna. Las páginas web HTML simples eran comunes en los días de "Web 1.0", cuando la mayoría de los sitios web no eran más que texto estático.

Sitio web antiguo HTML

Pero ahora, tenemos mucho más. CSS (hojas de estilo en cascada) La hoja de trucos de las propiedades CSS3 esenciales La hoja de trucos de las propiedades CSS3 esenciales Domine la sintaxis de CSS esencial con nuestra hoja de trucos de propiedades CSS3. Leer más es un lenguaje utilizado para describir cómo debe verse el texto que preparó en HTML. Recuerda el etiqueta que discutimos? Dentro de esta (y otras etiquetas), puede definir un atributo de class . Luego, en el documento CSS que lo acompaña, puede escribir instrucciones sobre cómo debería verse esa class .

Puede definir estos elementos de estilo en línea en su código HTML, pero esto se considera una mala práctica ya que es mucho más difícil de mantener. Obtenga más información con estos ejemplos simples de CSS 10 ejemplos simples de código CSS que puede aprender en 10 minutos 10 ejemplos simples de código CSS que puede aprender en 10 minutos Veremos cómo crear una hoja de estilo en línea para que pueda practicar sus habilidades CSS. Luego pasaremos a 10 ejemplos básicos de CSS. A partir de ahí, ¡tu imaginación es el límite! Lee mas .

JavaScript

Hemos visto que HTML define el contenido y CSS determina la apariencia. JavaScript, el miembro final del trío vital para la web, permite que las páginas web respondan a las acciones de las personas sin cargar una nueva página cada vez.

Por ejemplo, JavaScript permite que un sitio web le advierta que la contraseña que ingresó no cumple con sus requisitos antes de intentar enviarla. Un diseñador web puede usar JavaScript para recorrer las imágenes en una presentación de diapositivas o solicitar al usuario que ingrese.

Estos son solo algunos ejemplos elementales. JavaScript es un lenguaje de secuencias de comandos que es capaz de hacer mucho, y es comparativamente mucho más complicado que HTML y CSS. Vea nuestra descripción general de JavaScript ¿Qué es JavaScript y cómo funciona? ¿Qué es JavaScript y cómo funciona? ¿Qué es Javascript? Es un lenguaje de programación utilizado para mejorar las páginas web. Incluye la actualización dinámica de páginas web, interfaces de usuario y más. Veamos de qué se trata Javascript. Leer más para mucho más.

Ver el alcance completo del diseño web está más allá del alcance de este artículo, pero es suficiente decir que HTML interactúa con otros idiomas para crear las páginas web que conocemos hoy.

La evolución de HTML

Es importante tener en cuenta que HTML no es estático. HTML ha pasado por varias revisiones, la más reciente es HTML 5. Notablemente, este estándar admite la incrustación de video nativo en lugar de depender de formatos propietarios como Adobe Flash.

Nuevas iteraciones de HTML también declaran ciertas etiquetas arcaicas como obsoletas de vez en cuando. Estos incluyen etiquetas horribles como y (ese desplazamiento y texto flash respectivamente) comúnmente visto en el diseño de sitios web de los años 90. Tenga en cuenta que los estándares cambian con el tiempo.

Un poco de conocimiento HTML es muy útil

Hemos hecho un breve recorrido sobre cómo funciona un documento HTML. Ahora ya conoce los fundamentos de cómo están estructuradas las páginas web. Incluso si no continúa creando páginas web, está un poco más consciente de la web que usa todos los días.

Para obtener más información, actualice sus habilidades de desarrollo web con herramientas esenciales Mejore sus habilidades de desarrollo web con estas 10 herramientas esenciales Mejore sus habilidades de desarrollo web con estas 10 herramientas esenciales ¿Listo para comenzar a desarrollar sitios web? ¡Estas herramientas en línea para desarrolladores web nuevos y expertos están garantizadas para aumentar sus habilidades! Lea más y luego consulte nuestra guía sobre cómo diseñar su primer sitio web Cómo hacer un sitio web: para principiantes Cómo hacer un sitio web: para principiantes Hoy lo guiaré a través del proceso de hacer un sitio web completo desde cero. No te preocupes si esto suena difícil. Te guiaré a través de cada paso del camino. Lee mas .

Haber de imagen: Belyaevskiy / Depositphotos

Explore más sobre: ​​HTML, HTML5, JavaScript, Programación, Desarrollo web, Herramientas para webmasters.