{"id":24643,"date":"2022-08-29T02:50:00","date_gmt":"2022-08-29T02:50:00","guid":{"rendered":"https:\/\/mauriciofloreshtml.online\/?p=24643"},"modified":"2022-09-07T22:49:03","modified_gmt":"2022-09-07T22:49:03","slug":"que-es-el-html","status":"publish","type":"post","link":"https:\/\/mauriciofloreshtml.online\/?p=24643","title":{"rendered":"\u00bfQu\u00e9 es el HTML?"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

HTML (HiperText Markup Languaje)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

El Lenguaje de Marcado de Hipertexto<\/strong><\/em> (HTML)\u00a0es el c\u00f3digo que se utiliza para estructurar y desplegar una p\u00e1gina web y sus contenidos.\u00a0
Por ejemplo, sus contenidos podr\u00edan ser textos en p\u00e1rrafos, listas con vi\u00f1etas, o im\u00e1genes y tablas de datos.
Se combina con otras tecnolog\u00edas que utilizan c\u00f3digos como CSS o JavaScript para enriquecer tanto el dise\u00f1o como la experiencia de uso.<\/span><\/p>

Pero \u00bfQu\u00e9 es un hipertexto?: Es un texto que tiene enlaces que conectan p\u00e1ginas web entre s\u00ed, ya sea dentro de un p\u00e1gina web,\u00a0 un sitio web o entre sitios web.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Caracter\u00edsticas<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

HTML utiliza “marcas” para etiquetar texto, im\u00e1genes y otro contenido para mostrarlo en un navegador Web. Esas “marcas” contienten instruciones especiales que realizan funciones dentro de la p\u00e1gina web. A esas marcas no referiremos como TAGS DE HTML<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <progress>, <video>, <ul>, <ol>, <li><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t

Estructura de las TAGS jhasgdjasgdjhasgd<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\tLas tags se delimitan por el caracter <<\/strong> (menor que) para iniciar la instrucci\u00f3n y el caracter ><\/strong> (mayor que) para terminar la instrucci\u00f3n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Marcado de Textos<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Las tags sirven para marcar textos d\u00e1ndoles atributos tanto de forma como de funci\u00f3n.<\/p>

Las tags indican de donde a donde el texto va a ser afectado.<\/p>

Por ejemplo, si tenemos un texto en el que se desea resaltar una palabra con un peso de letra bold hay que indicarlo al inicio y al final del texto:<\/p>

\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ejemplo de texto en el que una palabra va bold<\/strong><\/p>\n

Su c\u00f3digo HTML se ver\u00eda as\u00ed.<\/p>\n

Ejemplo de texto en el que una palabra va <b>bold<\/b><\/p>

El tag <b> indica que el texto que enmarca es bold.
<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Ejemplo de marcado en una sola l\u00ednea<\/h4>

Ejemplo de texto en el que una palabra va <\/span>bold<\/strong><\/p>

Su c\u00f3digo HTML se ver\u00eda as\u00ed:<\/p>

Ejemplo de texto en el que una palabra va <b>bold<\/b><\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"\"\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

\u00a0<\/p>

La tag se coloca en el inicio del texto a marcar y para indicar que una tag cierra es necesario escribir la misma tag con una diagonal al inicio de la instrucci\u00f3n.<\/p>

<instruccion> = Tag de html para abrir.
<\/instruccion> Mismo Tag de html pero ahora para cerrar.<\/p>

Todo lo que est\u00e9 en medio de estas dos tags se ver\u00e1 afectado por ellas.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t
Ejemplo de marcado en varias\u00a0 l\u00edneas<\/h5>

Ejemplo de texto en el que una palabra va <\/span>bold<\/strong><\/p>

Su c\u00f3digo HTML se ver\u00eda as\u00ed:<\/p>

Ejemplo de texto en el que una palabra va\u00a0
<b>
<\/span>bold
<\/span><\/b><\/span><\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t
<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t

Atributos de dentro de las tags de HTML <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Cada Tag de HTML puede tener atributos que le indican al navegador c\u00f3mo debe desplegar el contenido.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

<Tag atributo=”valor” atributo2=”valor2″<\/em>><\/p>

Por ejemplo la tag:<\/p>

<img> Que indica que se va a insertar una imagen tiene varios atributos.<\/p>

  1. src=”ruta_de_la_imagen\/nombre_de_la_imagen.jpg”<\/li>
  2. width:#px (ancho de la imagen)<\/li>
  3. height:#px (alto de la imagen)<\/li>
  4. alt=”Texto alternativo de la imagen” (Texto alternativo por si no es posible desplegar
    la im\u00e1gen y sirve para las b\u00fasquedas de im\u00e1genes dentro de google)<\/li><\/ol>
    Ejemplo de Tag <img> completo<\/div>
    \u00a0<\/div>

    <img src=”directorio\/nombreimagen.jpg” width:300px height:800px alt=”Este es un ejemplo de texto alternativo”><\/span><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t

    \n\t\t\t\t\t\t
    \n\t\t\t\t\t
    \n\t\t\t
    \n\t\t\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t
    \n\t\t\t
    <\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t

    Atributos de estilo dentro de las tags de HTML <\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t
    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    Cada Tag de HTML puede tener atributos de estilo que le indican al navegador c\u00f3mo debe desplegar el contenido.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

    \n\t\t\t\t
    \n\t\t\t\t\t\t\t\t\t

    <Tag style=”estilo1:valor del estilo; estilo2:valor del estilo2;”<\/em>><\/p>

    Por ejemplo de estilos para la tag:<\/p>

    <p> Que indica que se va a insertar un p\u00e1rrafo.<\/p>

    1. color: red; (color de la letra)<\/li>
    2. font-size:#px;\u00a0 (tama\u00f1o de la letra en pixeles)<\/li>
    3. font-family:’sans-serif’:<\/li>
    4. background-color:blue;<\/li><\/ol>
      Ejemplo de Tag <p> con un varios estilos completo<\/div>
      \u00a0<\/div>

      <p style=”color:red; font-size:30px; font-family:<\/span><\/strong>‘sans-serif’; background-color-blue\u00a0<\/b>“>
      <\/span><\/strong>\u00a0Texto del parrafo a afectar issimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimu<\/p><\/span><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t

      \n\t\t\t\t
      \n\t\t\t\t\t\t\t\t\t

      Texto del parrafo a afectar issimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimu<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"

      HTML (HiperText Markup Languaje) El Lenguaje de Marcado de Hipertexto (HTML)\u00a0es el c\u00f3digo que se utiliza para estructurar y desplegar una p\u00e1gina web y sus contenidos.\u00a0Por ejemplo, sus contenidos podr\u00edan ser textos en p\u00e1rrafos, listas con vi\u00f1etas, o im\u00e1genes y tablas de datos. Se combina con otras tecnolog\u00edas que utilizan c\u00f3digos como CSS o JavaScript […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[4,5],"tags":[],"class_list":["post-24643","post","type-post","status-publish","format-standard","hentry","category-webdesign","category-programaymaquetaweb"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts\/24643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=24643"}],"version-history":[{"count":41,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts\/24643\/revisions"}],"predecessor-version":[{"id":24808,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=\/wp\/v2\/posts\/24643\/revisions\/24808"}],"wp:attachment":[{"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=24643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=24643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mauriciofloreshtml.online\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=24643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}