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!

📑 Aquí podrás encontrar 👇

Que es HTML
Su primer documento HTML (cómo funciona HTML)
Artículo sobre WordPress
Artículo sobre WPO
Etiquetas HTML
Título del capítulo
Título del capítulo
Enlaces relacionados
, etc.), logotipos, campos de búsqueda, enlaces u otros elementos.Puedes usar más de unoEn su documento HTML, si es necesario, pero recuerde que no puede anidarElemento interior , U otros articulos ...Te daré un código de muestra en el que he usado dos elementos : EmpezarinformacióntocarLista de artículos de WordPressCabecera del artículo
, , , conSe utilizan para crear títulos o títulos. La importancia en el documento es de mayor a menor lo queMejor calificados yel mas pequeño.Un título se usa para describir el contenido de un documento o la parte a la que pertenece, solo debe haber uno por documento HTML. Este es el título del documento vinculado. Para las secciones que crea en el documento, debe usar los encabezados restantes ( , etc.), dependiendo de cómo organice su información. Por supuesto, debe seguir el orden y no saltarse el área (es decir,si no lo has hecho ). Blog de noticiasDescripción de este blogNoticias de ciencia
Noticias deportivas
Color HTML
Editor de HTML
Documento HTML
Ejercicio HTML final
finalmente

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).

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:

</p> <p><elemento atributo1=”valor1” atributo2=”valor2”>Contenido del artículo</elemento>

<elemento Atributo 1="Coraje 1" Atributo 2="Coraje 2">contenido de elemento</elemento>

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

</p> <h1 class=”titulo”>Este es el titulo de mi pagina</h1> <p>

<Hora 1 Excelente="título">Ese Ese Ese toneladaGeneracioningreso de yo soy fósforoAmableGina Internet</Hora 1>

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:

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:

<p><span style="color: red;font-weight:bold;">esfuerzos</span>yo mismo<span style="color: red;font-weight:bold;">Solo amor</span></p>

<fósforo>gratitud yo mismo <Página de inicio estilo="Color rojo; grosor de fuente: negrita;">esfuerzos sentarse disfrute</Página de inicio>, Fortalecer caja cine...</fósforo>

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:

<!DOCTYPE html> <html> <head> <title>[Título del documento HTML]</title> </head> <body> [Contenido del documento HTML]</body> </html>

<!Tipo de documento html>

<html>

<título>[Título del documento HTML]</título>

</cabeza>

[Contenido del documento HTML]

</cuerpo>

</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:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!Tipo de documento Archivo HTML personas "- // W3C // DTD HTML 4.01 versión de transición // DE" "Http://www.w3.org/TR/html4/loose.dtd">

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):

<html>[Aquí va el contenido del documento HTML]</html>

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.

<head>[Aquí va el contenido de la cabecera]</head>

<cabeza>[Aquí va el contenido de la cabecera]</cabeza>

</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> <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>

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: