{"id":3557,"date":"2018-01-26T19:09:47","date_gmt":"2018-01-26T19:09:47","guid":{"rendered":"http:\/\/pensemosweb.com.mx\/index.php\/2018\/01\/26\/como-crear-primera-pagina-web\/"},"modified":"2024-04-14T16:45:18","modified_gmt":"2024-04-14T22:45:18","slug":"como-crear-primera-pagina-web","status":"publish","type":"post","link":"https:\/\/pensemosweb.com\/en\/como-crear-primera-pagina-web\/","title":{"rendered":"\u00bfC\u00f3mo crear mi primera p\u00e1gina web? HTML"},"content":{"rendered":"<h2 class=\"wp-block-heading\">Primero HTML, luego CSS y Javascript<\/h2>\n\n\n\n<p>Para crear una p\u00e1gina web necesitas comprender tres sencillas tecnolog\u00edas muy f\u00e1ciles de aprender; <strong>HTML<\/strong>, <strong>CSS <\/strong>and <strong>Javascript.<\/strong><\/p>\n\n\n\n<p>Juntas permiten crear aplicaciones sofisticadas, ejemplo de ellas son instagram, twitter y facebook, a continuaci\u00f3n veamos que son estas tecnolog\u00edas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">HTML<\/h3>\n\n\n\n<p><strong>HTML <\/strong>permite crear el contenido de nuestra p\u00e1gina o aplicaci\u00f3n de manera organizada y estructurada, sin HTML no podr\u00edas ver tus fotos en facebook o reproducir videos en youtube.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">CSS<\/h3>\n\n\n\n<p><strong>CSS <\/strong>se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el dise\u00f1o, colores, tama\u00f1o de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y dem\u00e1s caracter\u00edsticas de dise\u00f1o. Sin CSS ser\u00eda muy dif\u00edcil de entender tu muro de facebook, todo estar\u00eda muy revuelto.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Javascript<\/h3>\n\n\n\n<p><strong>Javascript <\/strong>te permite interactuar din\u00e1micamente con la aplicaci\u00f3n, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicaci\u00f3n o escribimos un comentario.<\/p>\n\n\n\n<p>Desde mi punto de vista lo ideal es aprender primero HTML, luego CSS y JavaScript.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">P\u00e1gina web solo usando HTML<\/h2>\n\n\n\n<p>El siguiente ejemplo muestra como crear tu primera p\u00e1gina web, si lo quieres probar en tu computadora, crea un archivo llamado <code>index.html<\/code>, despu\u00e9s copia y pega el c\u00f3digo de este ejemplo. Luego para ver tu p\u00e1gina reci\u00e9n generada solo realiza un doble clic sobre <code>index.html<\/code> desde tu explorador de archivos.<\/p>\n\n\n\n<p><iframe style=\"width: 100%;\" title=\"Mi primera p\u00e1gina web\" src=\"\/\/codepen.io\/jaime_cervantes_ve\/embed\/GeKZGp\/?height=265&amp;theme-id=0&amp;default-tab=html,result#full\" height=\"265\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\/pen\/GeKZGp\/\">Mi primera p\u00e1gina web<\/a> by Jaime Cervantes Velasco<br \/>\n(<a href=\"https:\/\/codepen.io\/jaime_cervantes_ve\">@jaime_cervantes_ve<\/a>) on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/><\/iframe><\/p>\n\n\n\n<p>A continuaci\u00f3n vamos a explicar cada una de las partes de nuestro c\u00f3digo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">DOCTYPE<\/h2>\n\n\n\n<p>Lo primero que existe en nuestro c\u00f3digo es  <code>&lt;!DOCTYPE html&gt;<\/code>, esto indica al navegador las sintaxis y reglas que formaran a nuestra p\u00e1gina web. Antiguamente, se utilizaba una definici\u00f3n de doctype mucho m\u00e1s extensa, algo como lo siguiente.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;!DOCTYPE HTML PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\"\n\"http:\/\/www.w3.org\/TR\/html4\/strict.dtd\"&gt;<\/code><\/pre>\n\n\n\n<p>Pero actualmente la versi\u00f3n corta es m\u00e1s que suficiente, solo no olvides agregarla, porque de otro modo tu contenido ser\u00e1 renderizado como una versi\u00f3n antigua de HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Etiqueta HTML<\/h2>\n\n\n\n<p>Luego tenemos la etiqueta <code>&lt;html&gt;<\/code>, indica el inicio de nuestra p\u00e1gina web, todas las dem\u00e1s etiquetas deben estar dentro de esta, el final de la etiqueta se marca<em> <\/em>con casi el mismo c\u00f3digo, pero con una diagonal despu\u00e9s del signo <code>&lt;<\/code>, as\u00ed <code>&lt;\/html&gt;<\/code>. Adem\u00e1s, la etiqueta <code>&lt;html&gt;<\/code> tiene solo dos etiquetas hijas, <code>&lt;head&gt;<\/code> and <code>&lt;body&gt;<\/code>, las cuales explicaremos un poco m\u00e1s abajo.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;html&gt;\n  &lt;head&gt;&lt;\/head&gt;\n  &lt;body&gt;&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Etiquetas<\/h2>\n\n\n\n<p>Pero <strong>\u00bfQu\u00e9 es una etiqueta?<\/strong>, una etiqueta es la unidad principal con la que se crea el contenido de una p\u00e1gina o aplicaci\u00f3n web.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/wp-content\/uploads\/2018\/02\/tag.jpg\" alt=\"Partes de una etiqueta HTML\" class=\"wp-image-315\"\/><figcaption class=\"wp-element-caption\">Partes de una etiqueta HTML<\/figcaption><\/figure>\n\n\n\n<p>Casi todas las etiquetas tiene su etiqueta de cierre <code>&lt;\/nombre-etiqueta&gt;<\/code>, digo casi todas porque la etiqueta DOCTYPE no tiene cierre. No te preocupes, son pocas las que no se cierran. Adem\u00e1s, los nombres de etiquetas no son sensibles a may\u00fasculas y min\u00fasculas, puedes escribir la etiqueta html as\u00ed <code>&lt;HtmL&gt;&lt;\/HtmL&gt;<\/code><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Atributo lang en la etiqueta html<\/h2>\n\n\n\n<p>Algo que destacar en la etiqueta es que tiene este <strong>atributo <\/strong><code>lang<\/code> <code>&lt;html lang=&quot;es&quot;&gt;<\/code>, el cual quiere decir <em>language<\/em> y su <strong>worth <\/strong> significa <em>spanish<\/em>. <\/p>\n\n\n\n<p>El atributo <code>lang<\/code> ayuda al navegador web a seleccionar texto, revisar la ortograf\u00eda, traducir tu p\u00e1gina y convertir el texto en audio para personas con problemas visuales.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Etiqueta head<\/h2>\n\n\n\n<p>The label <code>&lt;head&gt;<\/code> puede contener lo que se le llama metadatos y dem\u00e1s informaci\u00f3n que no es visible para el usuario. Es el lugar donde se definen o importan estilos (archivos CSS), c\u00f3digo Javascript,  y dem\u00e1s datos para que el navegador web pinte la p\u00e1gina web.<\/p>\n\n\n\n<p>Tambi\u00e9n sirve para describir la p\u00e1gina web a motores de b\u00fasqueda, por ejemplo usando metadatos sobre quien es el autor, el t\u00edtulo y una descripci\u00f3n corta sobre la p\u00e1gina web. El t\u00edtulo que mencionamos es el de la p\u00e1gina web, el que aparece en la pesta\u00f1a de tu navegador web.<\/p>\n\n\n\n<p>Adicional, la etiqueta head sirve para agregar metas de terceros como el open graph data creado por facebook y twitter cards creado por twitter.<\/p>\n\n\n\n<p>En nuestro ejemplo, dentro de la etiqueta <code>&lt;head&gt;<\/code> podemos ver dos etiquetas <code>&lt;meta&gt;<\/code> descritos a continuaci\u00f3n ( meta viene de <em>meta information<\/em>).<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;head&gt;  &lt;meta charset=&quot;utf-8&quot;&gt;  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt;  &lt;title&gt;Mi primera p\u00e1gina web&lt;\/title&gt;&lt;\/head&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">head<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">meta<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">charset<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">utf-8<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">meta<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">name<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">viewport<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">content<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">width=device-width,initial-scale=1<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">title<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Mi primera p\u00e1gina web<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">title<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">head<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Codificaci\u00f3n de caracteres utf-8<\/h3>\n\n\n\n<p>En el <strong>meta<\/strong> <code>&lt;meta charset=\"utf-8\"&gt;<\/code> usa un <strong>atributo <\/strong><code>charset<\/code> con <strong>worth <\/strong><code>utf-8<\/code>, esto indica la codificaci\u00f3n de caracteres de la p\u00e1gina y nos permite tener caracteres raros de otros idiomas que de otra manera no se visualizar\u00edan correctamente. Ejemplos concretos serian la <strong>\u00f1 <\/strong>and <strong>vocales con acentos <\/strong>para el idioma espa\u00f1ol, caracteres en chinos o koreano. <\/p>\n\n\n\n<p>Actualmente, los navegadores web como firefox, chrome y brave corrigen este problema autom\u00e1ticamente cuando se carga la p\u00e1gina web. Pero se recomienda usar este meta en caso de que se cargue la p\u00e1gina web en un navegador antiguo o alguno navegador web que no corrija esta codificaci\u00f3n de caracteres autom\u00e1ticamente<\/p>\n\n\n\n<p>A\u00fan teniendo este meta, es importante guardar el archivo en tu editor de c\u00f3digo con codificaci\u00f3n de caracteres <strong>UTF-8<\/strong>, probablemente no tengas que preocuparte de esto en los editores modernos como <a href=\"https:\/\/www.sublimetext.com\/\">Sublime text<\/a>, <a href=\"https:\/\/atom.io\/\" target=\"_blank\" rel=\"noreferrer noopener\">Atom<\/a> and <a href=\"https:\/\/code.visualstudio.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">Visual Studio Code<\/a>. Como dato curioso, <a href=\"https:\/\/pensemosweb.com\/en\/javascript-scheme-self-java\/\">Atom y Visual Studio Code estan creados con Javascript<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Meta Viewport<\/h3>\n\n\n\n<p>He <strong>meta <\/strong><code>&lt;meta name=\"viewport\" content=\"width=device-width,initial-scale=1\"&gt;<\/code> es muy \u00fatil cuando nuestra p\u00e1gina es visualizada en dispositivos m\u00f3viles, <code>width=device-width<\/code> permite tomar todo el ancho de nuestra pantalla m\u00f3vil como el ancho de la p\u00e1gina, <code>initial-scale=1<\/code> evita que ciertos dispositivos le apliquen alg\u00fan tipo de escaldo inicial a nuestra p\u00e1gina. Con este meta obtenemos un dise\u00f1o congruente en los dispositivos m\u00f3viles. De otra forma ver\u00edamos una p\u00e1gina con un escaldo muy peque\u00f1o debido a que el navegador trata de encajar el contenido como si lo estuvi\u00e9ramos viendo en una pantalla m\u00e1s grande de computadora.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;&gt; \" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">meta<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">name<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">viewport<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">content<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">width=device-width,initial-scale=1<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\"> <\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Una nota importante es que las etiquetas <code>&lt;meta&gt;<\/code> and <code>&lt;!DOCTYPE html&gt;<\/code> no tienen su correspondiente cierre o final de etiqueta, esto es as\u00ed porque estas etiquetas realmente no tienen <strong>contenido visible del elemento <\/strong>como pasa con la etiqueta <code>&lt;html&gt;&lt;\/html&gt;<\/code>, <code>&lt;body&gt;&lt;\/body&gt;<\/code> o el encabezado <code>&lt;h1&gt;&lt;\/h1&gt;<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Etiqueta body y etiquetas dentro de body<\/h2>\n\n\n\n<p>The label <code>&lt;body&gt;<\/code> contiene toda la informaci\u00f3n visible que deseas mostrar al usuario. Todo el contenido que puedas ver en una p\u00e1gina web o aplicaci\u00f3n est\u00e1 dentro de la etiqueta <code>&lt;body&gt;<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etiquetas de encabezados<\/h3>\n\n\n\n<p>Despu\u00e9s tenemos a la etiqueta <code>&lt;body&gt;<\/code>, la cual contiene todo el dem\u00e1s contenido visible de nuestra p\u00e1gina, dentro tenemos 6 etiquetas, <code>&lt;h1&gt;<\/code> to <code>&lt;h6&gt;<\/code>, la <code>h<\/code> significa <em>Heading<\/em> (encabezado), se ocupan para mostrar t\u00edtulos o encabezados, <code>&lt;h1&gt;<\/code> es el de mayor relevancia y <code>&lt;h6&gt;<\/code> es el de menor.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etiqueta para crear p\u00e1rrafos<\/h3>\n\n\n\n<p>M\u00e1s abajo tenemos nuestro primer p\u00e1rrafo, para crear un p\u00e1rrafo se utiliza la etiqueta <code>&lt;p&gt;<\/code>, <code>p<\/code> significa <em>Paragraph<\/em> (parrafo). Luego tenemos dos listas de elementos ordenados y desordenados.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;p&gt;  El desarrollo web o programaci\u00f3n web utiliza tres principales tecnolog\u00edas;  &lt;strong&gt;HTML, CSS y Javascript&lt;\/strong&gt;. Juntas permiten crear aplicaciones sofisticadas,  facebook es el ejemplo m\u00e1s conocido, tambi\u00e9n mercadolibre e instagram.&lt;\/p&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  El desarrollo web o programaci\u00f3n web utiliza tres principales tecnolog\u00edas;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">strong<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">HTML, CSS y Javascript<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">strong<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">. Juntas permiten crear aplicaciones sofisticadas,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  facebook es el ejemplo m\u00e1s conocido, tambi\u00e9n mercadolibre e instagram.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Etiqueta strong<\/h3>\n\n\n\n<p>The label <code>&lt;strong&gt;<\/code> permite marcar  palabras o frases que son importantes, normalmente son palabras que cuando hablamos les damos un \u00e9nfasis fuerte, con un tono m\u00e1s alto y a menor velocidad porque queremos ser m\u00e1s claros en la comunicaci\u00f3n. Es por eso que los screen readers leen el contenido de esta etiqueta con un tono de voz diferente.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;p&gt;  El desarrollo web o programaci\u00f3n web utiliza tres principales tecnolog\u00edas;  &lt;strong&gt;HTML, CSS y Javascript&lt;\/strong&gt;. Juntas permiten crear aplicaciones sofisticadas,  facebook es el ejemplo m\u00e1s conocido, tambi\u00e9n mercadolibre e instagram.&lt;\/p&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  El desarrollo web o programaci\u00f3n web utiliza tres principales tecnolog\u00edas;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">strong<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">HTML, CSS y Javascript<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">strong<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">. Juntas permiten crear aplicaciones sofisticadas,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  facebook es el ejemplo m\u00e1s conocido, tambi\u00e9n mercadolibre e instagram.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;p&gt;Este medicamente debe almacenarse &lt;strong&gt;fuera del alcance de los ni\u00f1os&lt;strong&gt;.&lt;\/p&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Este medicamente debe almacenarse <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">strong<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">fuera del alcance de los ni\u00f1os<\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">strong<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">.<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>Los navegadores web marcan el contenido en negritas, pero esta etiqueta no debe usarse con el objetivo visual de remarcar un texto en negritas. Para poner texto en negritas por razones solo de dise\u00f1o puedes utilizar un <code>&lt;span&gt;<\/code> en conjunto con alguna regla de estilos (CSS).<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Etiqueta em<\/h3>\n\n\n\n<p>The label <code>&lt;em&gt;<\/code>  es parecida a la etiqueta <code>&lt;strong&gt;<\/code> en el sentido de que se usa para enfatizar partes del texto y que los<em> screen readers <\/em>los lean en diferente tono de voz. Pero no tiene la misma importancia que un texto marcado con la etiqueta <code>&lt;strong&gt;<\/code>. Se utiliza para que el texto tenga m\u00e1s \u00e9nfasis que el texto normal.<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"&lt;p&gt;Recuarda que &lt;em&gt;tienes&lt;\/em&gt; que apurarte para que te des un poco mas de tiempo&lt;p&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Recuarda que <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">em<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">tienes<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">em<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\"> que apurarte para que te des un poco mas de tiempo<\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">p<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Etiqueta para crear listas de elementos<\/h3>\n\n\n\n<p>Para crear una lista de elementos desordenados utilizamos la etiqueta <code>&lt;ul&gt;<\/code>, <code>ul<\/code> (<em>Unorder List<\/em>). Para crear una lista ordenada usamos <code>&lt;ol&gt;<\/code>, <code>ol<\/code> (<em>Order List<\/em>). Estas dos listas contiene tres etiquetas <code>&lt;li&gt;<\/code>, <code>li<\/code> significa <em>List Item<\/em> (Elemento de Lista).<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#0F111A\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"  &lt;ul&gt;    &lt;li&gt;Jaime&lt;\/li&gt;    &lt;li&gt;Cervantes&lt;\/li&gt;    &lt;li&gt;Velasco&lt;\/li&gt;  &lt;\/ul&gt;  &lt;ol&gt;    &lt;li&gt;Jaime&lt;\/li&gt;    &lt;li&gt;Cervantes&lt;\/li&gt;    &lt;li&gt;Velasco&lt;\/li&gt;  &lt;\/ol&gt;&lt;\/pre&gt;&lt;\/div&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-ocean\" style=\"background-color: #0F111A\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">ul<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Jaime<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Cervantes<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Velasco<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">ul<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">ol<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Jaime<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Cervantes<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">    <\/span><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Velasco<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">li<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">  <\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">ol<\/span><span style=\"color: #89DDFF\">&gt;&lt;\/<\/span><span style=\"color: #BABED8\">pre<\/span><span style=\"color: #89DDFF\">&gt;&lt;\/<\/span><span style=\"color: #BABED8\">div<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>Como vemos, no es dif\u00edcil crear contenido para nuestra p\u00e1gina, lo \u00fanico que necesitamos saber son los nombres de las etiquetas y para qu\u00e9 nos sirven, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\" target=\"_blank\" rel=\"noreferrer noopener\">aqu\u00ed puedes encontrarlas<\/a>. No tienes que memorizarlas, pero si comprender como se usan, as\u00ed cada vez que necesites de alguna siempre puedes consultar en el anterior enlace.<\/p>\n\n\n\n<p>En futuras publicaciones profundizaremos como funciona nuestro contenido <strong>HTML <\/strong>con <strong>CSS<\/strong> (Cascade Style Sheet, Hojas de Estilo en Cascada), para terminar incluyendo tambi\u00e9n <strong>Javascript<\/strong> en una tercera publicacion.<\/p>","protected":false},"excerpt":{"rendered":"<p>Primero HTML, luego CSS y Javascript Para crear una p\u00e1gina web necesitas comprender tres sencillas tecnolog\u00edas muy f\u00e1ciles de aprender; HTML, CSS y Javascript. Juntas permiten crear aplicaciones sofisticadas, ejemplo de ellas son instagram, twitter y facebook, a continuaci\u00f3n veamos que son estas tecnolog\u00edas. HTML HTML permite crear el contenido de nuestra p\u00e1gina o aplicaci\u00f3n [&hellip;]<\/p>","protected":false},"author":2,"featured_media":3750,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[27],"tags":[53,67],"class_list":["post-3557","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html","tag-html","tag-basico"],"_links":{"self":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/comments?post=3557"}],"version-history":[{"count":2,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3557\/revisions"}],"predecessor-version":[{"id":3839,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/posts\/3557\/revisions\/3839"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media\/3750"}],"wp:attachment":[{"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/media?parent=3557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/categories?post=3557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pensemosweb.com\/en\/wp-json\/wp\/v2\/tags?post=3557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}