{"id":1037,"date":"2014-11-02T12:33:45","date_gmt":"2014-11-02T17:33:45","guid":{"rendered":"https:\/\/e-lexia.com\/blog\/?p=1037"},"modified":"2024-11-01T11:47:00","modified_gmt":"2024-11-01T16:47:00","slug":"estructura-de-un-hiperdocumento","status":"publish","type":"post","link":"https:\/\/e-lexia.com\/blog\/estructura-de-un-hiperdocumento\/","title":{"rendered":"Estructura de un hiperdocumento"},"content":{"rendered":"<p>El primer paso para la producci\u00f3n web es comprender c\u00f3mo se estructura una p\u00e1gina: cu\u00e1les son los elementos claves y c\u00f3mo estos se definen a partir de est\u00e1ndares web que permitan su correcta <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/indexacion-web\/\" rel=\"noopener\" target=\"_blank\">indexaci\u00f3n<\/a> en motores de b\u00fasqueda y visualizaci\u00f3n en navegadores.<\/p>\n<p>En este art\u00edculo intentar\u00e9 dar una gu\u00eda al respecto. \u00a1Vamos!<\/p>\n<p>Por cierto, he actualizado esta entrada (09-2019) como material de apoyo al curso en \u00abDise\u00f1o de proyectos educativos digitales\u00bb que oriento en la Universidad de Antioquia.<\/p>\n<p><!-- Google Adsense --><\/p>\n<div class=\"adsense\">\n  <script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-7923590131153633\" crossorigin=\"anonymous\"><\/script><br \/>\n  <ins class=\"adsbygoogle\" style=\"display:block; text-align:center;\" data-ad-layout=\"in-article\" data-ad-format=\"fluid\" data-ad-client=\"ca-pub-7923590131153633\" data-ad-slot=\"5345374831\"><\/ins><br \/>\n  <script>(adsbygoogle = window.adsbygoogle || []).push({});<\/script>\n<\/div>\n<h2>Estructura b\u00e1sica<\/h2>\n<p>Conocer el interior de una p\u00e1gina web precisa dividirla en dos grandes partes: la <strong>cabeza<\/strong> y el <strong>cuerpo<\/strong>.<\/p>\n<p>En la primera se especifica informaci\u00f3n sobre el documento que es de inter\u00e9s para los motores de b\u00fasqueda y para los navegadores web. Algunos de estos datos son:<\/p>\n<ul>\n<li>T\u00edtulo<\/li>\n<li>Juego de caracteres<\/li>\n<li>Descripci\u00f3n<\/li>\n<li>Palabras claves<\/li>\n<li>Instrucciones de programaci\u00f3n<\/li>\n<li>Instrucciones de apariencia<\/li>\n<\/ul>\n<p>Excepto el t\u00edtulo, esta informaci\u00f3n no es visualizada por el navegador, pero s\u00ed tiene relaci\u00f3n e impacto directo con el contenido de la p\u00e1gina. Por ejemplo, el juego de caracteres define \u2013entre otras- si el navegador puede interpretar correctamente las tildes y la letra \u201c\u00f1\u201d.<\/p>\n<p>La segunda parte, el <strong>cuerpo<\/strong>, agrupa las etiquetas de contenido multimedia, como:<\/p>\n<ul>\n<li>P\u00e1rrafo<\/li>\n<li>Negrita<\/li>\n<li>Cursiva<\/li>\n<li>Listas<\/li>\n<li>Im\u00e1genes<\/li>\n<li>Tablas<\/li>\n<li>Video y audio<\/li>\n<\/ul>\n<p>Esta informaci\u00f3n s\u00ed es visualizada por el navegador.<\/p>\n<p>As\u00ed, en resumen, podemos afirmar que una p\u00e1gina web tiene dos partes: la cabeza (<code>&lt;HEAD&gt;<\/code>) y el cuerpo (<code>&lt;BODY&gt;<\/code>). En la primera hay informaci\u00f3n que le interesa a Google, y en la segunda est\u00e1 el contenido que puede leer nuestro lector.<\/p>\n<h2>Cuidado con las etiquetas HTML<\/h2>\n<p>En el p\u00e1rrafo anterior aparecen dos elementos marcados en letra roja: <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code>. Estos son etiquetas HTML y permiten al navegador interpretar correctamente lo que queremos mostrar.<\/p>\n<p>\u00a1Ojo! Cualquier imprecisi\u00f3n con el marcado sem\u00e1ntico, es decir, con la escritura de estas etiquetas, puede afectar la correcta visualizaci\u00f3n del contenido y, por ende, la experiencia del usuario.<\/p>\n<p>Lo anterior sin contar que si las etiquetas del <code>&lt;HEAD&gt;<\/code> est\u00e1n incorrectas es posible que nuestra p\u00e1gina no funcione ni sea indexada por los motores de b\u00fasqueda.<\/p>\n<p>Y es que el HTML tiene una sintaxis propia, la cual debe conservarse. Por ejemplo, para frases sencillas en espa\u00f1ol utilizamos la estructura: <em>sujeto + verbo + complemento<\/em>. Es la mejor forma de escribir. En HTML funciona igual.<\/p>\n<h2>Iniciando un documento web<\/h2>\n<p>Vamos a crear nuestra primera p\u00e1gina web.<\/p>\n<p>Imaginemos que el documento tiene dos cajas: el <code>&lt;HEAD&gt;<\/code> y el <code>&lt;BODY&gt;<\/code>. En cada caja se almacena informaci\u00f3n, recursos y contenidos. Esto lo revisamos anteriormente \u00bfcierto? Pero estas dos cajas est\u00e1n dentro de una caja mayor: el <code>&lt;HTML&gt;<\/code>.<\/p>\n<p>As\u00ed, una p\u00e1gina web es una gran caja, llamada <code>&lt;HTML&gt;<\/code>, que agrupa dos cajas: <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code>.<\/p>\n<p>Por recomendaci\u00f3n del est\u00e1ndar, cada caja tiene una etiqueta de apertura, por ejemplo:<\/p>\n<p>La etiqueta de apertura de la caja mayor es <code>&lt;HTML&gt;<\/code> y su etiqueta de cierre es <code>&lt;\/HTML&gt;<\/code>. Si miramos en detalle, la diferencia entre una y otra es la barra diagonal en la etiqueta de cierre.<\/p>\n<p>Y para las dos cajas siguientes, las etiquetas de inicio y final, respectivamente, son: <code>&lt;HEAD&gt;<\/code>, <code>&lt;\/HEAD&gt;<\/code>, y <code>&lt;BODY&gt;<\/code>, <code>&lt;\/BODY&gt;<\/code>.<\/p>\n<p>Estas instrucciones permiten indicarle al navegador d\u00f3nde empieza y termina una caja.<\/p>\n<p>El c\u00f3digo b\u00e1sico de un documento web es:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>Este es el c\u00f3digo b\u00e1sico de un documento web. Se presenta la etiqueta <code>&lt;HTML&gt;<\/code> como gran contenedor. Dentro de ella aparecen <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code>, respectivamente.<\/p>\n<p>Este c\u00f3digo indica que:<\/p>\n<ul>\n<li>La primera etiqueta del documento es <code>&lt;HTML&gt;<\/code><\/li>\n<li>La etiqueta <code>HTML<\/code> agrupa las dos partes de la p\u00e1gina: <code>&lt;HEAD&gt;<\/code> y <code>&lt;BODY&gt;<\/code><\/li>\n<li>El <code>&lt;HEAD&gt;<\/code> se define antes que el <code>&lt;BODY&gt;<\/code><\/li>\n<li>Al final el documento se define el cierre <\/code>&lt;\/HTML&gt;<\/code><\/li>\n<\/ul>\n<p>\u00a1Felicidades! Acabas de aprender a crear una p\u00e1gina web.<\/p>\n<h2>Optimizando el HEAD<\/h2>\n<p>El <code>&lt;HEAD&gt;<\/code>, como se mencion\u00f3 anteriormente, es la primera parte de un documento web basado en HTML.<\/p>\n<p>All\u00ed se definen algunas etiquetas que agregan datos sobre contenido, contexto, cobertura, periodicidad, entre otros.<\/p>\n<p>Esta informaci\u00f3n permite a motores de b\u00fasqueda, como Google o Bing, realizar procedimientos de indexaci\u00f3n de contenidos m\u00e1s precisos.<\/p>\n<p>Las etiquetas b\u00e1sicas para construir un buen <code>HEAD<\/code> son:<\/p>\n<p><code>&lt;META CHARSET=\"UTF-8\"&gt;<\/code>: Permite utilizar un juego de caracteres que contiene letras, signos ortogr\u00e1ficos y s\u00edmbolos del ingl\u00e9s y espa\u00f1ol. En otras palabras, UTF-8 permite que el contenido web presente tildes y la consonante \u201c\u00f1\u201d.<\/p>\n<p><code>&lt;TITLE&gt;<\/code>: Como su nombre lo indica, permite asignar un t\u00edtulo al documento. Este dato aparece en la barra superior y\/o pesta\u00f1a del navegador.<\/p>\n<p><code>&lt;META NAME=\"DESCRIPTION\" CONTENT=\" \"&gt;<\/code>: Permite anexar una descripci\u00f3n a cada p\u00e1gina. Esta aparece en los resultados de b\u00fasqueda. La extensi\u00f3n recomendada es entre 70 y 160 caracteres.<\/p>\n<p><code>&lt;META NAME=\"KEYWORDS\" CONTENT=\"#\"&gt;<\/code>: Permite anexar palabras claves sobre el contenido de cada p\u00e1gina. Aunque algunos autores exponen que ya no es necesario, es recomendable anexarlas para el uso en sistemas de b\u00fasqueda propios o meta-buscadores. Se recomiendan 10 palabras claves por documento.<\/p>\n<p><code>&lt;META NAME=\"VIEWPORT\" CONTENT=\"#\"&gt;<\/code>: Permite que los navegadores Web de dispositivos m\u00f3viles identifiquen el documento HTML y lo visualicen correctamente, de acuerdo a las instrucciones de <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/css\/\" rel=\"noopener\" target=\"_blank\">CSS<\/a>.<\/p>\n<p><code>&lt;LINK REL =\"ICON\" TYPE=\"IMAGE\/PNG \" HREF=\"#\"&gt;<\/code>: Permite asignar una imagen como icono del documento. Aparece en la barra superior y\/o pesta\u00f1a de navegaci\u00f3n.<\/p>\n<p>Miremos una aplicaci\u00f3n de estas etiquetas en el <code>HEAD<\/code>:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot;&gt;\r\n    &lt;title&gt;T\u00edtulo de la p\u00e1gina&lt;\/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;Esta es la descripci\u00f3n del documento. No debe exceder los 160 caracteres&quot;&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;palabras, claves, m\u00e1ximo, diez, por, documento&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\r\n    &lt;link rel=&quot;icon&quot; type=&quot;image\/png&quot; href=&quot;img\/design\/fav-icon.png&quot;&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p><!-- ASESOR COMUNICATIVO --><\/p>\n<div class=\"destacado-asesor\">\n<div class=\"destacado-asesor__imagen\">\n    <a href=\"https:\/\/e-lexia.com\/contacto.html\"><br \/>\n      <img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2023\/01\/asesor-comunicativo-juancadotcom.png\" alt=\"Juan Carlos Morales S., asesor en comunicaci\u00f3n digital\"><br \/>\n    <\/a>\n   <\/div>\n<div class=\"destacado-asesor__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/contacto.html\">\u00bfNecesitas asesor\u00eda en comunicaci\u00f3n digital?<\/a><\/h2>\n<p>Dise\u00f1a y optimiza tus proyectos en comunicaci\u00f3n digital, entregando una mejor experiencia a tus usuarios y potenciando el valor de tu marca.<br \/>\n      <a class=\"cta-asesor\" href=\"https:\/\/e-lexia.com\/contacto.html\">Conversemos<\/a>\n     <\/p>\n<\/p><\/div>\n<\/div>\n<h2>Otras etiquetas en el HEAD<\/h2>\n<p>Para ser m\u00e1s precisos y ampliar las posibilidades de un documento HTML, el <code>HEAD<\/code> permite a\u00f1adir otras etiquetas sem\u00e1nticas.<\/p>\n<p>Esto no indica necesariamente que toda p\u00e1gina debe tener un <code>HEAD<\/code> similar; el \u00e9xito en el dise\u00f1o de recursos HTML est\u00e1 en la precisi\u00f3n, oportunidad y pertinencia en el uso de las etiquetas.<\/p>\n<p>Tomando como referente el sitio Web <a href=\"http:\/\/www.e-lexia.com\">http:\/\/www.e-lexia.com<\/a>, algunas etiquetas que pueden robustecer y optimizar el documento son:<\/p>\n<p><code>&lt;!DOCTYPE html&gt;<\/code>: Aunque est\u00e1 etiqueta no est\u00e1 inmersa en el <code>HEAD<\/code> (ni en el <code>HTML<\/code>) se convierte en una instrucci\u00f3n necesaria al dise\u00f1ar en HTML5. Su funci\u00f3n b\u00e1sicamente es indicar al navegador la versi\u00f3n del lenguaje de marcado que utiliza el documento.<\/p>\n<p><code>&lt;LINK REL=\"STYLESHEET\" HREF=\" \"&gt;<\/code>: A trav\u00e9s de esta etiqueta se vinculan archivos de estilo en cascada (CSS).<\/p>\n<p><code>&lt;META NAME=\"AUTHOR\" CONTENT=\"e-Lexia\"&gt;<\/code>: Esta meta indica a los sistemas de indexaci\u00f3n y recuperaci\u00f3n de contenido el autor del mismo. Puede ser persona natural o jur\u00eddica.<\/p>\n<p><code>&lt;META NAME=\"REVISIT-AFTER\" CONTENT=\"90 days\"&gt;<\/code>: El uso de esta etiqueta permite a los robots (peque\u00f1os <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/algoritmo\/\" rel=\"noopener\" target=\"_blank\">algoritmos<\/a> que visitan los sitios web en busca de contenidos) programar su regreso al sitio en busca de actualizaciones.<\/p>\n<p><code>&lt;META NAME=\"RATING\" CONTENT=\"general\"&gt;<\/code>: Permite clasificar el contenido de acuerdo a las audiencias. Sus valores pueden ser: <em lang=\"en\">general, mature, restricted, 14 years, safe for kids<\/em>.<\/p>\n<p><code>&lt;META NAME=\"ROBOTS\" CONTENT=\"index, follow\"&gt;<\/code>: Por \u00faltimo, esta etiqueta permite o deshabilita la indexaci\u00f3n del contenido por parte de los <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/buscador\/\" rel=\"noopener\" target=\"_blank\">buscadores<\/a>. Si su sitio es p\u00fablico, de inter\u00e9s general, la idea es permitir la indexaci\u00f3n y seguimiento.<\/p>\n<p>El resultado final del proceso de marcado sem\u00e1ntico para la primera parte del documento (&lt;HEAD&gt;) es:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot;&gt;\r\n    &lt;title&gt;T\u00edtulo de la p\u00e1gina&lt;\/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;Esta es la descripci\u00f3n del documento. No debe exceder los 160 caracteres&quot;&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;palabras, claves, m\u00e1ximo, diez, por, documento&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\r\n    &lt;link rel=&quot;icon&quot; type=&quot;image\/png&quot; href=&quot;img\/design\/fav-icon.png&quot;&gt;\r\n\r\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/estilos.css&quot;&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;Mi empresa&quot;&gt;\r\n    &lt;meta name=&quot;revisit-after&quot; content=&quot;90 days&quot;&gt;\r\n    &lt;meta name=&quot;rating&quot; content=&quot;general&quot;&gt;\r\n    &lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot;&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>En \u201c<a href=\"https:\/\/www.youtube.com\/watch?v=K4DTneQ6N_c\" target=\"_blank\" rel=\"noopener noreferrer\">Producci\u00f3n Web con HTML y CSS (cap06)<\/a>\u201d puede encontrar m\u00e1s informaci\u00f3n sobre la optimizaci\u00f3n del HEAD, teniendo presente la t\u00e9cnica SEO<\/p>\n<div class=\"marco-yt\">\n<div class=\"video-yt\">\n<iframe loading=\"lazy\" width=\"560\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/K4DTneQ6N_c\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<\/div>\n<p class=\"youtube-video\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/logo-youtube.png\">En el <a href=\"https:\/\/www.youtube.com\/@e-lexia?sub_confirmation=1\" target=\"_blank\" rel=\"noopener\">canal YouTube \u00abe-Lexia.com\u00bb<\/a> puedes encontrar m\u00e1s videos sobre el tema.<\/p>\n<h2>Etiquetas del BODY<\/h2>\n<p>El cuerpo del documento (<code>&lt;BODY&gt;<\/code>) es la zona que permite la <a href=\"https:\/\/e-lexia.com\/diccionario-tic\/interactividad\/\" rel=\"noopener\" target=\"_blank\">interactividad<\/a> entre usuario y recurso web; pues all\u00ed se insertan textos, im\u00e1genes, formularios, audiovisuales, enlaces y cualquier otro recurso.<\/p>\n<p>Sin duda es la regi\u00f3n de mayor trabajo para creadores de contenido (dise\u00f1adores gr\u00e1ficos, bibliotec\u00f3logos, comunicadores y otras disciplinas).<\/p>\n<p>Aunque la informaci\u00f3n que se presenta en <code>HEAD<\/code> es importante para el \u00e9xito del sitio, el <code>BODY<\/code> presenta la informaci\u00f3n hito de la estrategia digital.<\/p>\n<p>Los algoritmos de indexaci\u00f3n de informaci\u00f3n de Google se concentran en dar mayor importancia al trabajo que se realice aqu\u00ed. Incluso, muchas de las nuevas etiquetas sem\u00e1nticas de HTML5 apuntan a la optimizaci\u00f3n del <code>BODY<\/code>.<\/p>\n<p>Para iniciar el marcado es necesario tener presente qu\u00e9 y c\u00f3mo se quiere lograr. Es decir, identificar cada elemento y conocer cu\u00e1l es la etiqueta HTML que mejor lo define.<\/p>\n<p>Algunas de las etiquetas HTML de contenido son:<\/p>\n<ul>\n<li>P\u00e1rrafo: <code>&lt;P&gt;<\/code><\/li>\n<li>Encabezados:<\/li>\n<ul>\n<li>Primer nivel: <code>&lt;H1&gt;<\/code><\/li>\n<li>Segundo nivel: <code>&lt;H2&gt;<\/code><\/li>\n<li>Tercer nivel: <code>&lt;H3&gt;<\/code><\/li>\n<li>Cuarto nivel: <code>&lt;H4&gt;<\/code><\/li>\n<li>Quinto nivel: <code>&lt;H5&gt;<\/code><\/li>\n<li>Sexto nivel: <code>&lt;H6&gt;<\/code><\/li>\n<\/ul>\n<li>Tabla:<\/li>\n<ul>\n<li>Definici\u00f3n: <code>&lt;TABLE&gt;<\/code><\/li>\n<li>Fila: <code>&lt;TR&gt;<\/code><\/li>\n<li>Columna: <code>&lt;TD&gt;<\/code><\/li>\n<li>Encabezado: <code>&lt;TH&gt;<\/code><\/li>\n<\/ul>\n<li><a href=\"https:\/\/e-lexia.com\/diccionario-tic\/enlace-web\/\" rel=\"noopener\" target=\"_blank\">Enlace<\/a>: <code>&lt;A&gt;<\/code><\/li>\n<li>Cita de otro recurso: <code>&lt;BLOCKQUOTE&gt;<\/code><\/li>\n<li>Lista sin ordenar: <code>&lt;UL&gt;<\/code><\/li>\n<li>Lista ordenada: <code>&lt;OL&gt;<\/code><\/li>\n<li>Elemento de lista: <code>&lt;LI&gt;<\/code><\/li>\n<li>Imagen: <code>&lt;IMG&gt;<\/code><\/li>\n<\/ul>\n<div class=\"destacado-libro\">\n<div class=\"destacado-libro__imagen\">\n  <a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\"><img decoding=\"async\" src=\"https:\/\/e-lexia.com\/blog\/wp-content\/uploads\/2021\/04\/libro-prodccion-contenidos-web.jpg\" alt=\"Producci\u00f3n de contenidos web. Libro gratuito. Autor: Juan Carlos Morales S.\"><\/a>\n <\/div>\n<div class=\"destacado-libro__desc\">\n<h2><a href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Producci\u00f3n de contenidos web<\/a><\/h2>\n<p>  Descarga este libro electr\u00f3nico de acceso libre, donde se presentan recomendaciones de producci\u00f3n multimedia.<br \/>\n  <a class=\"cta-libro\" href=\"https:\/\/e-lexia.com\/blog\/produccion-contenidos-web-ebook-gratuito\/\">Obtener una copia<\/a>\n <\/div>\n<\/div>\n<h2>Creando el BODY<\/h2>\n<p>Continuando con el c\u00f3digo, un ejemplo de p\u00e1gina web con contenido ser\u00eda:<\/p>\n<pre>\r\n&lt;html&gt;\r\n\r\n  &lt;head&gt;\r\n    &lt;meta charset=&quot;utf-8&quot;&gt;\r\n    &lt;title&gt;T\u00edtulo de la p\u00e1gina&lt;\/title&gt;\r\n    &lt;meta name=&quot;description&quot; content=&quot;Esta es la descripci\u00f3n del documento. No debe exceder los 160 caracteres&quot;&gt;\r\n    &lt;meta name=&quot;keywords&quot; content=&quot;palabras, claves, m\u00e1ximo, diez, por, documento&quot;&gt;\r\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width&quot;&gt;\r\n    &lt;link rel=&quot;icon&quot; type=&quot;image\/png&quot; href=&quot;img\/design\/fav-icon.png&quot;&gt;\r\n\r\n    &lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/estilos.css&quot;&gt;\r\n    &lt;meta name=&quot;author&quot; content=&quot;Mi empresa&quot;&gt;\r\n    &lt;meta name=&quot;revisit-after&quot; content=&quot;90 days&quot;&gt;\r\n    &lt;meta name=&quot;rating&quot; content=&quot;general&quot;&gt;\r\n    &lt;meta name=&quot;robots&quot; content=&quot;noindex, nofollow&quot;&gt;\r\n  &lt;\/head&gt;\r\n\r\n  &lt;body&gt;\r\n    &lt;h1&gt;Tema principal de la p\u00e1gina&lt;\/h1&gt;\r\n    &lt;p&gt;Este es un primer p\u00e1rrafo. La recomendaci\u00f3n es abordar una idea por p\u00e1rrafo, pues la lectura en pantalla es diferente a la de los libros.&lt;\/p&gt;\r\n    &lt;h2&gt;Aq\u00fa\u00ed hay un subt\u00edtulo de segundo nivel&lt;\/h2&gt;\r\n    &lt;p&gt;Las listas permiten presentar diferentes elementos y evitar las comas enumerativas. Esto, adem\u00e1s, facilita la lectura.&lt;\/p&gt;\r\n    &lt;ul&gt;\r\n      &lt;li&gt;Elemento 1&lt;\/li&gt;\r\n      &lt;li&gt;Elemento 2&lt;\/li&gt;\r\n      &lt;li&gt;Elemento 3&lt;\/li&gt;\r\n    &lt;\/ul&gt;\r\n    &lt;h3&gt;Un nuevo encabezado, pero de nivel 3&lt;\/h3&gt;\r\n    &lt;table&gt;\r\n      &lt;tr&gt;\r\n        &lt;td&gt;Aqu\u00ed va contenido&lt;\/td&gt;\r\n        &lt;td&gt;Aqu\u00ed tambi\u00e9n&lt;\/td&gt;\r\n      &lt;\/tr&gt;\r\n    &lt;\/table&gt;\r\n  &lt;\/body&gt;\r\n\r\n&lt;\/html&gt;\r\n<\/pre>\n<p>\u00a1Bien! Ahora ya sabes crear una p\u00e1gina web. Lo que contin\u00faa es producir contenidos.<\/p>\n<p>Si quieres ampliar m\u00e1s sobre el tema, te invito a leer estas dos entradas:<\/p>\n<ul>\n<li><a title=\"\u00bfQu\u00e9 es HTML?\" href=\"https:\/\/e-lexia.com\/blog\/que-es-html\/\">\u00bfQu\u00e9 es HTML?<\/a><\/li>\n<li><a title=\"Origen del HTML\" href=\"https:\/\/e-lexia.com\/blog\/origen-del-html\/\">Origen del HTML<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>El primer paso para la producci\u00f3n web es comprender c\u00f3mo se estructura una p\u00e1gina: cu\u00e1les son los elementos claves y c\u00f3mo estos se definen a partir de est\u00e1ndares web que permitan su correcta indexaci\u00f3n en motores de b\u00fasqueda y visualizaci\u00f3n en navegadores. En este art\u00edculo intentar\u00e9 dar una gu\u00eda al&hellip;<\/p>\n","protected":false},"author":1,"featured_media":1645,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[65,66],"class_list":["post-1037","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-produccion-web","tag-codigo","tag-hipermedia","has-post-thumbnail-archive"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1037","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/comments?post=1037"}],"version-history":[{"count":0,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/posts\/1037\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media\/1645"}],"wp:attachment":[{"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/media?parent=1037"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/categories?post=1037"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/e-lexia.com\/blog\/wp-json\/wp\/v2\/tags?post=1037"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}