Saltar al contenido
Closer Marketing

Conceptos básicos y casos de uso

Si está interesado en crear páginas web, este artículo es un buen punto de partida. En él, hablaré con ustedes sobre HTML, el lenguaje que se usa para ensamblar y estructurar el contenido de los sitios web. Una buena base de conocimientos de HTML es esencial para avanzar en el mundo del desarrollo web, ¡así que comencemos!

Que es HTML

HTML de Lenguaje de marcado de hipertexto Es un lenguaje de marcado que se utiliza para crear contenido web.

La primera versión HTML contenía solo 18 elementos. Fue creado en 1991 por Tim Berners-Lee, científico informático y físico del CERN. Además, no solo desarrolló este lenguaje de marcado de hipertexto, sino también el protocolo HTTP Localizador de recursos únicos (Url). Hoy es director del W3C, que ha supervisado el desarrollo y la especificación de HTML desde 1994.

¡Ojo! HTML es un lenguaje de marcado, no un lenguaje de programación.

¿Qué significa eso? Bueno, HTML es todo lo que puede hacer para estructurar el contenido de su sitio web. Si también desea personalizar estéticamente su contenido, deberá usar CSS. Si desea que su contenido sea dinámico y fácil de usar, necesita lenguajes como ASP, Python, PHP, SQL o JavaScript.

en otras palabras:

  • HTML para organizar el contenido (establecer párrafos, títulos, imágenes, etc.)
  • CSS cambia la apariencia del contenido (color, tamaño, fuente, etc.)
  • JavaScript para agregar funciones (ventanas emergentes, galerías de fotos, manipulación de otros elementos, etc.)
  • PHP y SQL serán ejemplos de lenguajes utilizados para manejar bases de datos y hacer que el contenido sea dinámico (lado del servidor), etc.


Desde entonces, HTML ha cambiado mucho. El HTML 5 actual tiene una nueva versión con importantes mejoras. Permítanme resumir brevemente:

  • HTML 2.0: el primer estándar HTML oficial. , conSon opcionales y no admiten el uso de formularios.
  • HTML 3.2: contiene el derecho Plato, Subprogramas Java y texto envuelto alrededor de la imagen.
  • HTML 4.01: incluye soporte para hojas de estilo CSS, scripts y formas.
  • HTML 5: nuevas etiquetas semánticas, multimedia y de formulario.

Su primer documento HTML (cómo funciona HTML)

Un documento HTML es un archivo .html o .htm, cuyo contenido es leído e interpretado por un navegador web. De esta forma, cuando abres una página web en tu navegador, este realiza una solicitud al servidor en el que se encuentra el documento, lo lee e interpreta y lo muestra en tu pantalla.

Es muy fácil crear documentos HTML. Todo lo que necesita hacer es crear un documento de texto y cambiar la extensión de .txt a .html. Cuando lo abras en un navegador, verás una pantalla en blanco, ya que todavía no hay contenido, pero te lo explicará. Para agregar este contenido, simplemente use un editor de texto (desde el simple Bloc de notas de Windows hasta programas más complejos como Sublime Text).

Crear documento HTML

Conceptos básicos de HTML

Como dije al principio, puedes usar HTML para organizar tu contenido web de manera jerárquica y semántica. Para hacer esto, usa una serie de elementos para crear su estructura.

Etiquetas HTML: crea elementos en HTML

Los elementos HTML se componen de etiquetas: generalmente etiquetas de inicio y final con contenido en el medio. Las etiquetas pueden contener una serie de atributos que se utilizan para personalizar o cambiar la apariencia de los elementos HTML. Aquí hay un ejemplo ficticio para ayudarlo a comprender:

Este ejemplo del mundo real podría verse así:

Como puede ver, el sello está con el símbolo «<”和“>«(En el caso de una etiqueta de cierre, también debe agregar una barra inclinada» / «.) El atributo está escrito en la etiqueta, seguido del carácter» = «, y su valor está entre comillas. Hay contenido entre las etiquetas de inicio y finalización.

No todos los elementos HTML tienen etiquetas de cierre y no todos los elementos necesitan tener contenido entre las etiquetas.

Proyectos masivos e integrados

Los elementos HTML pueden ser de dos tipos según los requisitos de espacio:

  • Elemento de bloque: Ocupan todo el ancho disponible y traen el siguiente elemento directamente debajo de él. Algunos de los elementos del bloque HTML:

Как видите, внутри элемента

Я ввел заголовок

И элемент абзаца

. В свою очередь, в

Я ввел элементЧтобы придать слову особый стиль.

Не все гнезда правильные.Например, нельзя создавать элементы

Внутри элемента
.

Комментарии в HTML

Комментарии очень полезны на любом языке. Они позволяют добавлять инструкции, которые помогают понять код, созданный другими людьми (или вами).

В HTML вы можете создавать комментарии, помещая текст между тегами. . Позволь мне привести пример:

Как видно из примера, вы также можете закомментировать фрагменты кода, которые не хотите отображать в окончательном результате.

Комментарии HTML не будут отображаться на странице, но будут видны в вашем исходном коде. Следовательно, если пользователи проверят страницы из браузера, они смогут их увидеть. Держи это в своей голове.

HTML-Kommentare

Atributos generales

Hay muchos atributos que son comunes a casi todas las etiquetas HTML. el más importante:

Se asigna "Id":

Le permite asignar nombres que identifican elementos específicos. "Id" debe ser único, es decir, no puede haber dos etiquetas con el mismo "Id". Esto es útil para identificar o llamar a un elemento a través de una hoja de estilo o un script para editarlo. El valor de ID no puede contener espacios ni tabulaciones. Te mostraré un ejemplo aplicado a CSS:

Identificación de atributos HTML

En este ejemplo, asigné el ID "título principal" y lo diseñé con CSS para que se muestre en mayúsculas azules.

Pertenece a la "clase":

El atributo de clase tiene un propósito muy similar al de id, pero en este caso se usa para asignar nombres que identifican múltiples elementos. La idea es identificar múltiples elementos de la misma clase para aplicar el mismo estilo a todos los elementos. En el caso de este atributo, si los separamos con espacios, podemos asignar múltiples clases a un mismo elemento. Los siguientes ejemplos le ayudarán a comprender esto mejor:

Clase de atributo HTML

En el ejemplo anterior, a los elementos se les asignan dos clases: "título secundario" y "texto destacado". Apliqué diferentes estilos CSS para cada clase. Por supuesto, puede reutilizar estas clases en otros elementos HTML si lo desea.

El "estilo" incluye:

El atributo de estilo le permite agregar estilos CSS en línea a elementos HTML. Aunque personalmente recomiendo usar estilos a través de una tabla CSS separada en el Documento HTML para aplicar. El funcionamiento es el siguiente:

Estilo de atributo HTML

Como puede ver, puse una etiqueta en la etiqueta para aplicar un cierto estilo a una sección de texto. En este caso apliqué rojo y aumenté el peso de la fuente.

Etiquetas HTML

Ahora que sabe qué son las etiquetas HTML y cómo funcionan, le mostraré cuáles son las más importantes. Según su función, se pueden dividir en diferentes tipos.

Etiqueta de estructura

HTML tiene una serie de etiquetas que le ayudarán a estructurar las páginas HTML. Antes de explicarte esto, te daré un ejemplo muy simple para ilustrar la estructura de un documento HTML:

Primero tienes que declarar el tipo de documento. Con esta instrucción, el navegador sabe que vamos a utilizar código HTML y su versión. En este caso es HTML5.

Entonces necesitas hacer una etiquetaContiene el documento completo y las etiquetas que contiene.con ...

etiquetaEste es el capítulo de la página. Puede incluir información del navegador (título, descripción, etc.), enlaces a hojas de estilo CSS, archivos JavaScript, etc. Todo lo que agregue aquí es completamente transparente para los usuarios. No se muestra visualmente en la página.

etiquetaEl cuerpo principal de la página. Aquí es donde pegas su contenido.

Vemos las etiquetas de estructura más utilizadas en HTML:

Esto es lo primero que debe escribir en su documento HTML. Esto no es solo una etiqueta, sino una declaración. Se utiliza para indicarle al navegador en qué versión HTML estamos creando el documento. En HTML 5, la declaración se ha simplificado enormemente.Comparado con la versión anterior.

Tipo de documento en HTML 4.01:

Tipo de documento en HTML 5:

Esta es la etiqueta del documento principal y el resto de los elementos están en ella (excepto ). Se admite el atributo 'lang' para indicar el idioma del documento HTML en cuestión (por ejemplo, 'lang = ”es”' significa español):

Lo primero que debe decir en la etiquetaEl título del documento. Esto se hace usando etiquetas Todo el contenido del encabezado es información sobre el documento HTML e inicialmente es invisible para el usuario. Los encabezados, las meta descripciones, los enlaces a hojas de estilo CSS o los documentos JavaScript son ejemplos de lo que puede agregar a un encabezado.

</strong></p> <p>En esta etiqueta tienes que definir el título del documento HTML. Por ejemplo, este título se muestra en la pestaña del navegador y debe activarlo. También es un elemento importante de la optimización del motor de búsqueda de su sitio web, así que sea lo más informativo posible.</p><!-- Urvanov Syntax Highlighter v2.8.24 --> <div id="urvanov-syntax-highlighter-6151dd326b766043356989" class="urvanov-syntax-highlighter-syntax crayon-theme-classic urvanov-syntax-highlighter-font-monaco urvanov-syntax-highlighter-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;"> <p><textarea wrap="soft" class="urvanov-syntax-highlighter-plain print-no" data-settings="dblclick" readonly="readonly" style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;"> <title>HTML de muestra.

<título>ejemplo de Archivo HTML...</título>

Ejemplo de encabezado HTML

etiquetaSe utiliza para proporcionar información sobre documentos a motores de búsqueda o navegadores. Puede insertar varias etiquetas.Agregue la información requerida (descripción, autor, codificación de la página, etc.)

Aquí hay unos ejemplos:

Esta etiqueta le permite establecer la URL base para las URL restantes (relativas) en el documento. Podemos decir que el resto de la URL tiene algún tipo de prefijo, por ejemplo si creamos la siguiente etiqueta :

Los siguientes elementos

Habrá una URL y en consecuencia.

Como puede ver, esta es una etiqueta que no requiere ningún contenido. Si cierra la pestaña, encontrará que está incompleta.En su lugar, simplemente agregue una barra antes de ">". Aunque esta viga cerrada es opcional, se recomienda que la coloques.

Esta etiqueta se utiliza cuando necesita vincular algunos recursos externos a su documento HTML. Lo más importante es que se utiliza para vincular hojas de estilo CSS o agregar iconos de sitios web a su sitio web.

El método para agregar una hoja de estilo externa a un documento es el siguiente:

En el atributo rel, debe especificar un valor para 'hoja de estilo' para indicar que desea vincular la hoja de estilo. Debe ingresar la ruta a la hoja de trabajo en el atributo "href".