{"id":8543,"date":"2024-04-24T08:37:00","date_gmt":"2024-04-24T06:37:00","guid":{"rendered":"https:\/\/www.loading.es\/blog\/?p=8543"},"modified":"2024-04-25T07:23:04","modified_gmt":"2024-04-25T05:23:04","slug":"que-es-el-html-guia-principiantes","status":"publish","type":"post","link":"https:\/\/www.loading.es\/blog\/que-es-el-html-guia-principiantes\/","title":{"rendered":"Qu\u00e9 es el HTML y c\u00f3mo se utiliza: Gu\u00eda para principiantes"},"content":{"rendered":"\n<p>Si has te interesa un poco el mundo de la web, seguro que has escuchado algo sobre <strong>HTML<\/strong>. Es el est\u00e1ndar con el que se construye y se estructura el contenido en la web. En esta gu\u00eda para principiantes, vamos a ver <strong>qu\u00e9 es el HTML<\/strong>, c\u00f3mo funciona y por qu\u00e9 es tan importante para la creaci\u00f3n de sitios web. Tambi\u00e9n veremos algunos ejemplos b\u00e1sicos para que veas <strong>c\u00f3mo funciona el HTML<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-aioseo-table-of-contents\"><ul><li><a href=\"#aioseo-que-es-html\">Qu\u00e9 es HTML<\/a><ul><li><a href=\"#aioseo-un-poco-de-historia\">Un Poco de Historia<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-como-funciona-html\">C\u00f3mo Funciona HTML<\/a><\/li><li><a href=\"#aioseo-elementos-y-etiquetas\">Elementos y Etiquetas<\/a><ul><li><a href=\"#aioseo-elemento-html\">Elemento HTML<\/a><\/li><li><a href=\"#aioseo-ejemplo-de-uso-de-etiquetas\">Ejemplo de uso de etiquetas<\/a><\/li><li><a href=\"#aioseo-atributos-de-las-etiquetas\">Atributos de las etiquetas<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-etiquetas-html-mas-utilizadas\">Etiquetas HTML m\u00e1s utilizadas<\/a><\/li><li><a href=\"#aioseo-crea-tu-primera-web-html\">Crea tu primera Web HTML<\/a><ul><li><a href=\"#aioseo-herramientas-necesarias\">Herramientas Necesarias<\/a><\/li><li><a href=\"#aioseo-creando-un-documento-html-basico\">Creando un Documento HTML B\u00e1sico<\/a><\/li><li><a href=\"#aioseo-explicacion-del-codigo\">Explicaci\u00f3n del c\u00f3digo<\/a><\/li><li><a href=\"#aioseo-resultado\">Resultado<\/a><\/li><\/ul><\/li><li><a href=\"#aioseo-hosting-para-tu-pagina-web\">Hosting para tu p\u00e1gina web<\/a><\/li><li><a href=\"#aioseo-conclusion\">Conclusi\u00f3n<\/a><\/li><\/ul><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-que-es-html\">Qu\u00e9 es HTML<\/h2>\n\n\n\n<p>HTML, abreviatura de <strong>HyperText Markup Language<\/strong> (Lenguaje de Marcas de Hipertexto), es el lenguaje imprescindible para la <strong>creaci\u00f3n de p\u00e1ginas web<\/strong>.<\/p>\n\n\n\n<p>Es un est\u00e1ndar que define <strong>c\u00f3mo se estructura<\/strong> y presenta el contenido en la web, permitiendo a los desarrolladores crear y organizar secciones, p\u00e1rrafos, <strong>enlaces<\/strong> y mucho m\u00e1s en sus p\u00e1ginas web.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-un-poco-de-historia\">Un Poco de Historia<\/h3>\n\n\n\n<p>El <strong>origen de HTML<\/strong> se remonta a 1991, cuando Tim Berners-Lee, un f\u00edsico trabajando en el CERN (Organizaci\u00f3n Europea para la Investigaci\u00f3n Nuclear), lo dise\u00f1\u00f3.<\/p>\n\n\n\n<p>Berners-Lee propuso un nuevo sistema de informaci\u00f3n que utilizara <strong>hiperv\u00ednculos<\/strong> para conectar <strong>documentos entre s\u00ed<\/strong> en una red global, lo que eventualmente se convertir\u00eda en la <strong>World Wide Web<\/strong> que conocemos hoy.<\/p>\n\n\n\n<p>HTML fue concebido originalmente para ser un <strong>lenguaje de marcado<\/strong> que pudiera ser <strong>usado por personas sin experiencia en codificaci\u00f3n<\/strong> para crear documentos y compartirlos.<\/p>\n\n\n\n<p>Los primeros documentos HTML eran relativamente simples, con el tiempo, el lenguaje ha evolucionado para <strong>incorporar una gama m\u00e1s amplia de funcionalidades<\/strong>, incluyendo incrustaci\u00f3n de im\u00e1genes, formularios interactivos, y scripts complejos.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-como-funciona-html\">C\u00f3mo Funciona HTML<\/h2>\n\n\n\n<p><strong>HTML utiliza las etiquetas para marcar los elementos<\/strong>, indicando al navegador c\u00f3mo debe presentar el contenido.<\/p>\n\n\n\n<p>Por ejemplo, una etiqueta de t\u00edtulo <em>&lt; title &gt;<\/em> determina el t\u00edtulo de la p\u00e1gina, que es el texto que ves en la pesta\u00f1a de tu navegador.<\/p>\n\n\n\n<p>Las etiquetas de encabezado (<em>&lt; h1 &gt;<\/em>, <em>&lt; h2 &gt;<\/em>, etc.) definen los t\u00edtulos y subt\u00edtulos, organizando la informaci\u00f3n de manera jer\u00e1rquica y <strong>facilitando la lectura<\/strong> tanto para los usuarios como para los <strong>motores de b\u00fasqueda<\/strong>.<\/p>\n\n\n\n<p>El HTML en s\u00ed mismo no se encarga del estilo o la interactividad de las p\u00e1ginas web. Eso se logra con <strong>CSS<\/strong> (Cascading Style Sheets) y <strong>JavaScript<\/strong>, respectivamente, que trabajan en conjunto con HTML para crear experiencias web ricas y din\u00e1micas.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-elementos-y-etiquetas\">Elementos y Etiquetas<\/h2>\n\n\n\n<p>En HTML, los <strong>elementos y las etiquetas<\/strong> son conceptos fundamentales que forman la base estructural de cualquier p\u00e1gina web.<\/p>\n\n\n\n<p>Cada elemento HTML se define por etiquetas, que son fragmentos de c\u00f3digo encerrados entre corchetes angulares (<code>&lt;<\/code>, <code>&gt;<\/code>).<\/p>\n\n\n\n<p>Estas etiquetas dictan c\u00f3mo se debe mostrar el contenido dentro de los navegadores web y c\u00f3mo se organiza la informaci\u00f3n en la p\u00e1gina.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-elemento-html\">Elemento HTML<\/h3>\n\n\n\n<p>Un elemento HTML t\u00edpico consiste en:<\/p>\n\n\n\n<ul>\n<li><strong>Etiqueta de Apertura<\/strong>:<br>Esta etiqueta marca el inicio de un elemento. Por ejemplo, <em>&lt; div &gt;<\/em> inicia un elemento divisorio.<\/li>\n\n\n\n<li><strong>Contenido<\/strong>:<br>Este es el cuerpo del elemento, que puede ser texto, otros elementos HTML, o incluso contenido multimedia como im\u00e1genes y v\u00eddeos.<\/li>\n\n\n\n<li><strong>Etiqueta de Cierre<\/strong>:<br>Esta etiqueta se\u00f1ala el final del elemento. Se diferencia de la etiqueta de apertura por incluir una barra inclinada antes del nombre del elemento, como en <em>&lt; \/div &gt;<\/em>.<\/li>\n<\/ul>\n\n\n\n<p>Veamos algunos ejemplos m\u00e1s detallados para ilustrar c\u00f3mo se utilizan estos elementos en la pr\u00e1ctica:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-ejemplo-de-uso-de-etiquetas\">Ejemplo de uso de etiquetas<\/h3>\n\n\n\n<p><strong>Encabezados y p\u00e1rrafos<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h1&gt;Bienvenido a mi Blog&lt;\/h1&gt;\n&lt;p&gt;Este es el primer p\u00e1rrafo del contenido, donde explico de qu\u00e9 tratar\u00e1 mi blog.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p>En este ejemplo, <em>&lt; h1 &gt;<\/em> es una etiqueta que define un encabezado de primer nivel, el m\u00e1s importante y de mayor tama\u00f1o en la jerarqu\u00eda HTML. El <em>&lt; p &gt;<\/em> es una etiqueta para p\u00e1rrafos, utilizada para envolver bloques de texto.<\/p>\n\n\n\n<p><strong>Listas<\/strong><\/p>\n\n\n\n<p>Las listas son elementos muy utilizados para organizar informaci\u00f3n de manera ordenada o desordenada. Hay dos tipos principales:<\/p>\n\n\n\n<ul>\n<li><strong>Listas Ordenadas (&lt; ol &gt;)<\/strong>: Enumera los elementos en un orden espec\u00edfico.<\/li>\n\n\n\n<li><strong>Listas Desordenadas (&lt; ul &gt;)<\/strong>: Agrupa los elementos sin un orden particular.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;h2&gt;Mis Frutas Favoritas&lt;\/h2&gt;\n&lt;ul&gt;\n&nbsp; &nbsp;&lt;li&gt;Manzana&lt;\/li&gt;\n&nbsp; &nbsp;&lt;li&gt;Banana&lt;\/li&gt;\n&nbsp; &nbsp;&lt;li&gt;Fresa&lt;\/li&gt;\n&lt;\/ul&gt;<\/code><\/pre>\n\n\n\n<p><strong>Enlaces<\/strong><\/p>\n\n\n\n<p>Los enlaces permiten la navegaci\u00f3n entre p\u00e1ginas o sitios. Se crean usando la etiqueta <em>&lt; a &gt;<\/em>, que incluye un atributo href especificando el destino del enlace.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;p&gt;Visita nuestro &lt;a href=\"https:\/\/www.ejemplo.com\"&gt;sitio web&lt;\/a&gt; para m\u00e1s informaci\u00f3n.&lt;\/p&gt;<\/code><\/pre>\n\n\n\n<p><strong>Im\u00e1genes<\/strong><\/p>\n\n\n\n<p>Las im\u00e1genes se incrustan en las p\u00e1ginas HTML mediante la etiqueta <em>&lt; img &gt;<\/em>, que es una etiqueta autocerrada y lleva atributos como <em>src<\/em> (la fuente de la imagen) y alt (texto alternativo).<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;img src=\"imagen.jpg\" alt=\"Descripci\u00f3n de la imagen\"&gt;<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-atributos-de-las-etiquetas\">Atributos de las etiquetas<\/h3>\n\n\n\n<p>Los elementos HTML pueden tener atributos, que proporcionan informaci\u00f3n adicional sobre el elemento. Un atributo siempre se escribe dentro de la etiqueta de apertura y generalmente consta de un nombre y un valor, como en <em>class=\u00bbnombreClase\u00bb<\/em>.<\/p>\n\n\n\n<p><strong>Ejemplo de Atributos<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"https:\/\/www.ejemplo.com\" target=\"_blank\"&gt;Visita Ejemplo&lt;\/a&gt;<\/code><\/pre>\n\n\n\n<p>En este ejemplo, <em>href<\/em> es un atributo que indica la direcci\u00f3n URL del enlace, y <em>target=\u00bb_blank\u00bb<\/em> es un atributo que hace que el enlace se abra en una nueva pesta\u00f1a del navegador.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-etiquetas-html-mas-utilizadas\">Etiquetas HTML m\u00e1s utilizadas<\/h2>\n\n\n\n<p>Aqu\u00ed tienes una tabla que resume <strong>algunas de las etiquetas HTML m\u00e1s utilizadas<\/strong> y su funci\u00f3n, ideal para principiantes que desean familiarizarse r\u00e1pidamente con los elementos fundamentales del lenguaje HTML:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Etiqueta<\/th><th>Funci\u00f3n<\/th><\/tr><\/thead><tbody><tr><td><code>&lt;html&gt;<\/code><\/td><td>Define la ra\u00edz de un documento HTML.<\/td><\/tr><tr><td><code>&lt;head&gt;<\/code><\/td><td>Contiene metadatos y enlaces a scripts y hojas de estilo.<\/td><\/tr><tr><td><code>&lt;title&gt;<\/code><\/td><td>Especifica el t\u00edtulo del documento, visible en la pesta\u00f1a del navegador.<\/td><\/tr><tr><td><code>&lt;body&gt;<\/code><\/td><td>Representa el contenido principal del documento HTML.<\/td><\/tr><tr><td><code>&lt;h1&gt;<\/code> a <code>&lt;h6&gt;<\/code><\/td><td>Definen los encabezados, desde el m\u00e1s importante (<code>&lt;h1&gt;<\/code>) al menos importante (<code>&lt;h6&gt;<\/code>).<\/td><\/tr><tr><td><code>&lt;p&gt;<\/code><\/td><td>Define un p\u00e1rrafo de texto.<\/td><\/tr><tr><td><code>&lt;a&gt;<\/code><\/td><td>Define un hiperv\u00ednculo, que enlaza a otra p\u00e1gina o recurso.<\/td><\/tr><tr><td><code>&lt;img&gt;<\/code><\/td><td>Incrusta una imagen en el documento, usando el atributo <code>src<\/code> para determinar la fuente de la imagen.<\/td><\/tr><tr><td><code>&lt;ul&gt;<\/code>, <code>&lt;ol&gt;<\/code>, <code>&lt;li&gt;<\/code><\/td><td><code>&lt;ul&gt;<\/code> y <code>&lt;ol&gt;<\/code> definen listas desordenadas y ordenadas, respectivamente, mientras que <code>&lt;li&gt;<\/code> se utiliza para cada elemento de la lista.<\/td><\/tr><tr><td><code>&lt;table&gt;<\/code>, <code>&lt;tr&gt;<\/code>, <code>&lt;td&gt;<\/code>, <code>&lt;th&gt;<\/code><\/td><td><code>&lt;table&gt;<\/code> crea una tabla, <code>&lt;tr&gt;<\/code> define una fila de la tabla, <code>&lt;td&gt;<\/code> una celda de datos, y <code>&lt;th&gt;<\/code> una celda de encabezado.<\/td><\/tr><tr><td><code>&lt;div&gt;<\/code><\/td><td>Define una divisi\u00f3n o secci\u00f3n en un documento, \u00fatil para agrupar elementos y aplicar estilos CSS.<\/td><\/tr><tr><td><code>&lt;span&gt;<\/code><\/td><td>Se utiliza para agrupar contenido en l\u00ednea para aplicar estilos o identificar partes del texto.<\/td><\/tr><tr><td><code>&lt;form&gt;<\/code><\/td><td>Define un formulario HTML para la entrada del usuario.<\/td><\/tr><tr><td><code>&lt;input&gt;<\/code><\/td><td>Define un campo de entrada, como texto, contrase\u00f1a, radio, checkbox, etc.<\/td><\/tr><tr><td><code>&lt;button&gt;<\/code><\/td><td>Define un bot\u00f3n que el usuario puede presionar.<\/td><\/tr><tr><td><code>&lt;script&gt;<\/code><\/td><td>Incorpora o hace referencia a un script, como JavaScript, en el documento.<\/td><\/tr><tr><td><code>&lt;link&gt;<\/code><\/td><td>Se utiliza para enlazar hojas de estilo externas, como CSS.<\/td><\/tr><tr><td><code>&lt;meta&gt;<\/code><\/td><td>Proporciona metadatos sobre el HTML, como la codificaci\u00f3n de caracteres o palabras clave para SEO.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>Esta tabla proporciona una <strong>visi\u00f3n general de las etiquetas m\u00e1s comunes<\/strong> que encontrar\u00e1s y utilizar\u00e1s al desarrollar p\u00e1ginas web.<\/p>\n\n\n\n<p><strong>Cada etiqueta tiene su prop\u00f3sito<\/strong> espec\u00edfico y juega un papel importante en la estructuraci\u00f3n y la funcionalidad de los sitios web.<\/p>\n\n\n\n<p>Con el dominio de estas etiquetas, podr\u00e1s empezar a crear tu propio HTML para tu web.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-crea-tu-primera-web-html\">Crea tu primera Web HTML<\/h2>\n\n\n\n<p><strong>Crear tu primera p\u00e1gina web<\/strong> es m\u00e1s f\u00e1cil de lo que piensas, de hecho <strong>vamos a hacer una web ahora mismo<\/strong>.<\/p>\n\n\n\n<p>T\u00f3matelo como una introducci\u00f3n al mundo del desarrollo web. Aprender\u00e1s a crear una p\u00e1gina web simple que <strong>incluye un saludo<\/strong>, una <strong>imagen<\/strong> y un <strong>enlace<\/strong>.<\/p>\n\n\n\n<p>Comenzaremos eligiendo una herramienta adecuada para escribir el c\u00f3digo y luego pasaremos a la escritura del HTML b\u00e1sico.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-herramientas-necesarias\">Herramientas Necesarias<\/h3>\n\n\n\n<p>Para <strong>escribir HTML<\/strong>, necesitas un editor de texto. Hay muchas opciones disponibles, pero aqu\u00ed te recomendamos algunas que son f\u00e1ciles de usar y gratuitas:<\/p>\n\n\n\n<ul>\n<li><strong><a href=\"https:\/\/notepad-plus-plus.org\/\" target=\"_blank\" rel=\"noopener\" title=\"Editor Notepad++\">Notepad++<\/a><\/strong> (Windows):<br>Es un editor de texto poderoso con caracter\u00edsticas que facilitan la escritura de c\u00f3digo, como la coloraci\u00f3n de sintaxis.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noopener\" title=\"Editor Visual Studio\">Visual Studio .Code<\/a><\/strong> (Windows, Mac, Linux):<br>Un editor de c\u00f3digo fuente ligero pero potente que soporta la edici\u00f3n de HTML y muchos otros lenguajes de programaci\u00f3n. Ofrece muchas extensiones y herramientas integradas.<\/li>\n\n\n\n<li><strong><a href=\"https:\/\/www.sublimetext.com\/\" target=\"_blank\" rel=\"noopener\" title=\"Editor Sublime Text\">Sublime Text<\/a><\/strong> (Windows, Mac, Linux):<br>Este es otro editor de texto muy utilizado que es r\u00e1pido y f\u00e1cil de usar.<\/li>\n<\/ul>\n\n\n\n<p>Cualquiera de estos editores <strong>ser\u00e1 suficiente para empezar<\/strong> a crear p\u00e1ginas web. <strong>Son gratuitos<\/strong>, no tienes que gastar nada para empezar crear tu web con HTML.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-creando-un-documento-html-basico\">Creando un Documento HTML B\u00e1sico<\/h3>\n\n\n\n<ol>\n<li><strong>Abre tu editor de texto<\/strong> y comienza un nuevo archivo.<\/li>\n\n\n\n<li><strong>Escribe el siguiente c\u00f3digo HTML<\/strong> en tu archivo. Este c\u00f3digo es una estructura b\u00e1sica de una p\u00e1gina HTML que incluye un saludo, una imagen y un enlace.<\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n&lt;html lang=\"es\"&gt;\n&lt;head&gt;\n    &lt;meta charset=\"UTF-8\"&gt;\n    &lt;title&gt;Mi Primera P\u00e1gina Web&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n    &lt;h1&gt;\u00a1Hola, mundo!&lt;\/h1&gt;\n    &lt;p&gt;Bienvenido a mi primera p\u00e1gina web.&lt;\/p&gt;\n    &lt;img src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/logo-loading-100.png\" alt=\"Imagen gen\u00e9rica\"&gt;\n    &lt;p&gt;Visita &lt;a href=\"https:\/\/loading.es\"&gt;Loading&lt;\/a&gt; para saber m\u00e1s sobre desarrollo web.&lt;\/p&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/code><\/pre>\n\n\n\n<ol start=\"3\">\n<li><strong>Guarda el archivo<\/strong> con la extensi\u00f3n .html, por ejemplo, mi_primera_web.html.<\/li>\n\n\n\n<li><strong>Abre el archivo en tu navegador<\/strong>. Puedes hacerlo simplemente haciendo doble click en el icono y se abrir\u00e1 en el navegador por defecto que tengas establecido o haciendo clic derecho en el archivo y seleccionando \u00abAbrir con\u00bb y luego eligiendo tu navegador.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"351\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/ejemplo-html-codigo-editor.jpg\" alt=\"ejemplo html codigo editor\" class=\"wp-image-8545\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/ejemplo-html-codigo-editor.jpg 650w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/ejemplo-html-codigo-editor-300x162.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-explicacion-del-codigo\">Explicaci\u00f3n del c\u00f3digo<\/h3>\n\n\n\n<ul>\n<li><em>&lt;!DOCTYPE html&gt;<\/em> declara que este documento es HTML5.<\/li>\n\n\n\n<li><em>&lt;html lang=\u00bbes\u00bb&gt;<\/em> es el elemento ra\u00edz de una p\u00e1gina web y especifica que el idioma del documento es espa\u00f1ol.<\/li>\n\n\n\n<li>Dentro del <em>&lt;head&gt;<\/em>, se define la codificaci\u00f3n de caracteres y el t\u00edtulo de la p\u00e1gina web, que aparece en la pesta\u00f1a del navegador.<\/li>\n\n\n\n<li>El <em>&lt;body&gt;<\/em>contiene todo el contenido visible de la p\u00e1gina:\n<ul>\n<li><em>&lt;h1&gt;<\/em> es un encabezado que dice \u00ab\u00a1Hola, mundo!\u00bb.<\/li>\n\n\n\n<li><em>&lt;p&gt;<\/em> es un p\u00e1rrafo con texto de bienvenida.<\/li>\n\n\n\n<li><em>&lt;img&gt;<\/em> incrusta una imagen gen\u00e9rica (reemplaza el URL de la imagen con una real o elige una imagen de tu PC modificando el atributo <em>src<\/em>).<\/li>\n\n\n\n<li>El \u00faltimo <em>&lt;p&gt;<\/em> contiene un enlace a Loading, donde puedes aprender m\u00e1s sobre desarrollo web.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"aioseo-resultado\">Resultado<\/h3>\n\n\n\n<p>Cuando abras el archivo en tu navegador, ver\u00e1s un encabezado, un p\u00e1rrafo de texto, una imagen y un enlace.<\/p>\n\n\n\n<p><strong>\u00a1Felicidades!<\/strong> Acabas de crear y visualizar tu primera p\u00e1gina web.<\/p>\n\n\n\n<p>Este ejemplo es un punto de partida excelente para empezar a experimentar con HTML.<\/p>\n\n\n\n<p>Puedes intentar <strong>modificar el texto<\/strong>, agregar m\u00e1s im\u00e1genes, o incluso <strong>enlazar otras p\u00e1ginas<\/strong> que crees. La pr\u00e1ctica es clave en el aprendizaje del desarrollo web.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img decoding=\"async\" loading=\"lazy\" width=\"650\" height=\"415\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/mi-primera-web-html.jpg\" alt=\"mi primera web html\" class=\"wp-image-8546\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/mi-primera-web-html.jpg 650w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/mi-primera-web-html-300x192.jpg 300w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/figure><\/div>\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-hosting-para-tu-pagina-web\">Hosting para tu p\u00e1gina web<\/h2>\n\n\n\n<p>Una vez tengas <strong>creada tu primera p\u00e1gina web en HTML*<\/strong>* la tendr\u00e1s guardada en tu PC, as\u00ed que no estar\u00e1 accesible para nadie m\u00e1s que para ti.<\/p>\n\n\n\n<p>Si quieres que tu web est\u00e9 en internet tienes que subirla a un servidor y es aqu\u00ed donde <strong>Loading<\/strong> puede ayudarte.<\/p>\n\n\n\n<p>Tenemos planes de <strong><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noopener\" title=\"Hosting Web en Loading\">hosting web<\/a><\/strong> de distintos tama\u00f1os para que se adapten al proyecto que quieras crear.<\/p>\n\n\n\n<p>S\u00f3lo tienes que contratar el plan de hosting que mejor se adapte a tus necesidades y <strong><a href=\"https:\/\/www.loading.es\/blog\/como-subir-tu-pagina-web-a-internet\/\" target=\"_blank\" rel=\"noopener\" title=\"C\u00f3mo subir una p\u00e1gina web\">subir tu web<\/a><\/strong> al hosting y a partir de es ese momento, cualquier usuario de cualquier parte del mundo podr\u00e1 acceder a tu web.<\/p>\n\n\n\n<p>Y si no tienes claro qu\u00e9 tipo de hosting es el que m\u00e1s te conviene, siempre puedes <a href=\"https:\/\/www.loading.es\/sobre-loading\/conozcanos\/index.html#contactar\" target=\"_blank\" rel=\"noopener\" title=\"Contacta con Loading\">ponerte en contacto con nosotros<\/a>. Te ayudaremos encantados.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"aioseo-conclusion\">Conclusi\u00f3n<\/h2>\n\n\n\n<p><strong>\u00a1Y ah\u00ed lo tienes!<\/strong> Has dado tus primeros pasos en el emocionante mundo del desarrollo web con HTML.<\/p>\n\n\n\n<p>Como has visto, HTML es la base de todas las p\u00e1ginas web, pero tambi\u00e9n es un <strong>punto de partida accesible<\/strong> para cualquiera que quiera empezar a crear contenido en la web.<\/p>\n\n\n\n<p>Aunque lo que hemos cubierto hoy es bastante b\u00e1sico, te proporciona la estructura fundamental para que puedas <strong>empezar a experimentar y construir<\/strong> por tu cuenta.<\/p>\n\n\n\n<p>Recuerda que <strong>la pr\u00e1ctica hace al maestro<\/strong>, as\u00ed que no dudes en jugar con el c\u00f3digo, probar nuevas etiquetas y explorar c\u00f3mo los diferentes elementos interact\u00faan entre s\u00ed.<\/p>\n\n\n\n<p>Cada l\u00ednea de c\u00f3digo que escribes te acerca un poco m\u00e1s a convertirte en un h\u00e1bil desarrollador web. <strong>No tengas miedo de cometer errores<\/strong>; cada error es una oportunidad de aprendizaje.<\/p>\n\n\n\n<p><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.loading.es\/hosting\/index.html\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" loading=\"lazy\" width=\"1000\" height=\"100\" src=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png\" alt=\"oferta para contratar hosting web\" class=\"wp-image-8039\" srcset=\"https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb.png 1000w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-300x30.png 300w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-768x77.png 768w, https:\/\/www.loading.es\/blog\/wp-content\/uploads\/oferta_hostingweb-850x85.png 850w\" sizes=\"(max-width: 1000px) 100vw, 1000px\" \/><\/a><\/figure><\/div>\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-4 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"mFKC221ip6\"><a href=\"https:\/\/www.loading.es\/blog\/como-subir-tu-pagina-web-a-internet\/\">C\u00f3mo subir tu p\u00e1gina web a Internet<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo subir tu p\u00e1gina web a Internet\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/como-subir-tu-pagina-web-a-internet\/embed\/#?secret=HNkzTS4t15#?secret=mFKC221ip6\" data-secret=\"mFKC221ip6\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"wx8vGB3m0F\"><a href=\"https:\/\/www.loading.es\/blog\/ganar-dinero-internet\/\">C\u00f3mo Ganar Dinero por Internet<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo Ganar Dinero por Internet\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/ganar-dinero-internet\/embed\/#?secret=sytTucRiVf#?secret=wx8vGB3m0F\" data-secret=\"wx8vGB3m0F\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-el-blog-de-loading wp-block-embed-el-blog-de-loading\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"1Y1gmpXjPB\"><a href=\"https:\/\/www.loading.es\/blog\/traducir-sitio-web\/\">C\u00f3mo traducir un sitio web<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"\u00abC\u00f3mo traducir un sitio web\u00bb \u2014 El blog de Loading\" src=\"https:\/\/www.loading.es\/blog\/traducir-sitio-web\/embed\/#?secret=n98Rv89Kdm#?secret=1Y1gmpXjPB\" data-secret=\"1Y1gmpXjPB\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Si has te interesa un poco el mundo de la web, seguro que has escuchado algo sobre HTML. Es el est\u00e1ndar con el que se construye y se estructura el contenido en la web. En esta gu\u00eda para principiantes, vamos a ver qu\u00e9 es HTML, c\u00f3mo funciona y por qu\u00e9 es tan importante para la creaci\u00f3n de sitios web. Tambi\u00e9n veremos algunos ejemplos b\u00e1sicos para que veas c\u00f3mo funciona el HTML.<\/p>\n","protected":false},"author":2,"featured_media":8544,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[376,38],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/8543"}],"collection":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/comments?post=8543"}],"version-history":[{"count":3,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/8543\/revisions"}],"predecessor-version":[{"id":8550,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/posts\/8543\/revisions\/8550"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media\/8544"}],"wp:attachment":[{"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/media?parent=8543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/categories?post=8543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.loading.es\/blog\/wp-json\/wp\/v2\/tags?post=8543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}