Introducción a HTML
HTML significa lenguaje de marcado de hipertexto, y los documentos que utilizan este lenguaje crean páginas web. Todos los sitios web utilizan esto, por lo que es importante comprender cómo funciona.
En este artículo del tutorial, aprenderá todo lo que necesita saber sobre HTML .
¿Qué es la declaración <! DOCTYPE>?
La declaración <! DOCTYPE> es la primera línea de código en cada archivo HTML . Le dice a los navegadores web qué versión de HTML se encuentra dentro de un archivo específico.
Cada versión de HTML es única y tiene su propio conjunto de reglas. HTML 5 es la última versión del idioma. Es la versión recomendada para los desarrolladores, así como la versión más sencilla de declarar. Para declarar un documento HTML 5 , simplemente agregue el elemento HTML a la declaración <! DOCTYPE> .
Puedes ver un ejemplo a continuación:
<!DOCTYPE html>¿Qué es la etiqueta <head>?
En cada documento HTML , la declaración <! DOCTYPE> va seguida de la etiqueta <html> . Esta etiqueta identifica la raíz del documento e incluye las etiquetas <head> y <body> .
La etiqueta <head> es la primera sección y contiene las etiquetas <title> y <meta> . Sin embargo, en algunos casos, cuando el desarrollador elige usar CSS interno, la etiqueta <style> también se coloca dentro de la etiqueta <head> .
Solo hay una etiqueta <title> en un documento HTML . La etiqueta <title> contiene el título de una página web y esta información aparece en el área de pestañas de un navegador web.
Puede ver un ejemplo de etiqueta de título a continuación:
<title>An Introduction to HTML</title>Un archivo HTML que tiene la etiqueta <title> arriba se mostrará como "Introducción a HTML" en el área de pestañas de los navegadores.
La etiqueta <meta> describe el contenido de una página web y generalmente tiene un nombre y un atributo de contenido. Tres de los tipos más populares de etiquetas <meta> son descripción, palabra clave y ventana gráfica.
A continuación se muestra un ejemplo de etiqueta <meta> de descripción:
<mete name="description" content="This is a simple page, which demonstrates the basics of HTML">
El atributo de contenido de la etiqueta description <meta> contiene una descripción de su página web. Estos son los datos que se muestran en el resultado de un motor de búsqueda, lo que le dice a un visitante potencial qué esperar en un sitio web.
A continuación se muestra un ejemplo de etiqueta <meta> de palabras clave:
<meta name="keywords" content="HTML, web development, etc">
La etiqueta de palabras clave <meta> contiene palabras o frases que son relevantes para su sitio web. Cada nueva palabra o frase asignada a un atributo de contenido de palabra clave está separada por una coma, como puede ver en el ejemplo anterior.
A continuación se muestra un ejemplo de etiqueta de ventana gráfica <meta> :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
La etiqueta viewport <meta> ayuda a crear diseños receptivos, al hacer que su página web responda a diferentes tipos de dispositivos.
¿Qué es la etiqueta <body>?
La etiqueta <body> es la segunda sección principal dentro de la etiqueta raíz <html> . La etiqueta <body> contiene todos los elementos que se muestran en una página web.
Los elementos con una etiqueta <body> se clasifican como elementos en línea o en bloque. Si desea ver una hoja de referencia completa de HTML esencial , hemos reunido una para que pueda comprender todo más fácilmente.
¿Qué son los elementos de bloque?
Los elementos de bloque siempre comienzan en una nueva línea y ocupan todo el ancho de la línea en la que se encuentran.
Algunos elementos de bloque que usará incluyen:
- Las etiquetas de encabezado
- La etiqueta <p>
- La etiqueta <div>
- La etiqueta <ol>
- La etiqueta <ul>
- La etiqueta <li>
Los elementos de bloque se utilizan para dividir el texto en el sitio web en un formato coherente y digerible.
¿Qué son las etiquetas de encabezado?
Hay seis tipos diferentes de etiquetas de encabezado: <h1> , <h2> , <h3> , <h4> , <h5> y <h6> . La etiqueta <h1> produce el encabezado más grande, <h6> produce el encabezado más pequeño y todos los demás encabezados caen en una posición entre los dos (dependiendo de su valor numérico).
Las etiquetas de encabezado se utilizan en los encabezados de una página web. El uso de una etiqueta de encabezado específica depende de la posición del encabezado en la página web. Por ejemplo, la etiqueta <h1> se usa en el primer encabezado de una página web, y una página web solo usa un elemento h1 (aunque puede tener varios elementos h2, h3 y h4).
Puede ver un ejemplo de la etiqueta <h1> en acción a continuación:
<h1> Learning the Basics of HTML </h1>
¿Qué es la etiqueta <p>?
<p> es otro elemento de bloque que se usa dentro del cuerpo de la página web y crea párrafos. A continuación se muestra un ejemplo del uso de esta etiqueta:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum mollitia dignissimos officia,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
¿Qué es la etiqueta <div>?
La etiqueta <div> representa una división. Se utiliza para crear contenedores para grupos de otros elementos HTML con fines funcionales o de estilo.
Por ejemplo, si está trabajando con una cuadrícula, deberá colocar todos los elementos de la cuadrícula dentro de un contenedor. Una etiqueta <div> es lo que necesitará usar para crear el contenedor.
¿Qué son las etiquetas <ol> y <ul>?
Las etiquetas <ol> y <ul> se utilizan para crear listas en HTML . La etiqueta <ol> crea listas ordenadas, mientras que la etiqueta <ul> crea listas desordenadas. Sin embargo, ambas etiquetas usan la etiqueta <li> , que crea elementos de lista.
Uso de la etiqueta <ol>
Una lista ordenada utiliza números de forma predeterminada. Sin embargo, la etiqueta <ol> tiene un atributo de tipo que puede usar para indicar explícitamente el elemento que desea usar para ordenar su lista. Puede ordenar una lista con números romanos en mayúscula o minúscula, letras mayúsculas o minúsculas o números.
Puedes ver un ejemplo a continuación:
<ol type="a">
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
El código anterior crea una lista ordenada con letras minúsculas.
Uso de la etiqueta <ul>
La etiqueta <ul> también tiene un atributo de tipo, que toma uno de varios valores: disco, círculo o cuadrado. Sin embargo, el disco es el indicador predeterminado de un nuevo elemento de lista en una lista desordenada.
A continuación se muestra un ejemplo de lo que le gustaría a una lista desordenada en forma de código:
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
¿Qué son los elementos en línea?
Un elemento en línea no comienza en una nueva línea. Comienza en la siguiente posición disponible, que puede estar o no en una nueva línea, y solo usa el ancho necesario. Algunos elementos en línea que es más probable que uses incluyen:
- La etiqueta <span>
- La etiqueta <a>
- La etiqueta <img>
- La etiqueta <label>
- La etiqueta <botón>
Discutiremos cada uno de estos con mayor profundidad a continuación.
¿Qué es la etiqueta <span>?
La etiqueta <span> se utiliza con fines de estilo en línea. Por ejemplo, si desea cambiar el estilo de una palabra o frase específica dentro de un párrafo, puede usar la etiqueta <span> .
A continuación se muestra un ejemplo de esta etiqueta:
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit aliquid a cupiditate
inventore, reiciendis earum illum <span id="important">dignissimos officia</span> ,culpa cumque dolorem
quidem atque maiores, ad tempora quia. Repudiandae, delectus!
</p>
El uso de la etiqueta <span> en el ejemplo anterior asegura que las dos palabras dentro de la etiqueta <span> ahora puedan tener un estilo único.
¿Qué es la etiqueta <a>?
La etiqueta <a> se utiliza para crear enlaces en una página web. La etiqueta <a> permite que un desarrollador se vincule a un sitio web diferente (enlace externo) o una página web diferente en el mismo sitio web (enlace interno). La etiqueta <a> tiene dos atributos importantes: href y target.
El atributo href es esencial, ya que almacena el valor de la ubicación del enlace. Y el atributo de destino es necesario porque permite al usuario abrir el enlace en una nueva pestaña. Sin el atributo de destino, se abrirá un enlace en la pestaña actual y, si es un enlace externo, alejará el tráfico de su sitio web.
Vea a continuación un ejemplo de la etiqueta <a> en acción:
<a href="http://google.com" target="_blank">Click this link to Google</a>Aprender HTML es esencial para los programadores
Aprender HTML es crucial para todos los programadores y debe formar los conceptos básicos de sus estudios. Sin embargo, afortunadamente, tampoco es demasiado complicado.
Después de leer esta guía, debería tener todo lo que necesita para comenzar a formatear mejor los sitios web.