{"id":5540,"date":"2016-01-06T23:54:06","date_gmt":"2016-01-07T02:54:06","guid":{"rendered":"http:\/\/betaweblog.education\/wp\/?p=5432"},"modified":"2016-01-06T23:54:06","modified_gmt":"2016-01-07T02:54:06","slug":"html-desde-cero","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/06\/html-desde-cero\/","title":{"rendered":"HTML desde cero &#8211; Clase 1"},"content":{"rendered":"<p>Si ten\u00e9s ganas de aprender a hacer p\u00e1ginas web desde cero, lo primero que ten\u00e9s que saber es que casi nadie empieza a programar abriendo un editor de textos vac\u00edo y escribiendo todo. As\u00ed que no vamos a empezar aprendiendo a escribir c\u00f3digo, sino modificando un c\u00f3digo ya existente.<\/p>\n<p><em>\u00bfD\u00f3nde se escribe el programa?<\/em> En cualquier editor de texto plano, por ejemplo <a href=\"http:\/\/www.geany.org\/\">Geany<\/a>\u00a0(para Linux) o <a href=\"https:\/\/notepad-plus-plus.org\/\">Notepad++<\/a>\u00a0(para Windows).<\/p>\n<p><em>\u00bfC\u00f3mo se ve lo que hace el programa?<\/em> Abriendo el archivo en un navegador (Mozilla Firefox, Chrome, etc.)<\/p>\n<p>Empezamos.<\/p>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de p\u00e1rrafo: &lt;p&gt;<\/li>\n<li>Fin de p\u00e1rrafo: &lt;\/p&gt;<\/li>\n<\/ul>\n<\/div>\n<ul>\n<li>Copi\u00e1 el siguiente c\u00f3digo y pegalo en tu editor de texto. En este c\u00f3digo lo que hice fue tomar de Wikipedia unos p\u00e1rrafos sobre el Mart\u00edn Fierro, pegarlos en el editor y utilizar los TAGS (etiquetas) correspondientes a comienzo y final de p\u00e1rrafo.<\/li>\n<\/ul>\n<div style=\"border: 1px solid #b7dc70; padding: 10px;\">&lt;p&gt;El Gaucho Mart\u00edn Fierro es un poema narrativo, escrito en verso por Jos\u00e9 Hern\u00e1ndez en 1872, obra literaria considerada ejemplar del g\u00e9nero. Debido a que tiene una continuaci\u00f3n, La vuelta de Mart\u00edn Fierro, escrita en 1879, este libro es tambi\u00e9n conocido como \u00abLa ida\u00bb. Ambos libros han sido considerados como libro nacional de la Argentina, bajo el t\u00edtulo gen\u00e9rico de \u00abEl Mart\u00edn Fierro\u00bb. En \u00abLa ida\u00bb, Mart\u00edn Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).&lt;\/p&gt;<br \/>\n&lt;p&gt;Narra el car\u00e1cter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la pol\u00edtica del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los ind\u00edgenas.&lt;\/p&gt;<\/div>\n<ul>\n<li>Guard\u00e1 el archivo con un nombre como &#8220;martinfierro.html&#8221;<\/li>\n<li>Abrilo en un navegador (o en todos los navegadores que tengas, de a poco vas a aprender las diferencias entre navegadores)<\/li>\n<\/ul>\n<p>\u00bfQu\u00e9 ves en el navegador? Probablemente ves el texto<strong> lleno de s\u00edmbolos raros<\/strong>. \u00bfPor qu\u00e9? Porque al comienzo de una p\u00e1gina web le tenemos que indicar algunas cosas importantes para que el navegador pueda entender en qu\u00e9 idioma est\u00e1 el texto, entre otras cosas.<\/p>\n<h2>La estructura de una p\u00e1gina web<\/h2>\n<p>La estructura b\u00e1sica de una p\u00e1gina web podr\u00eda resumirse de la siguiente manera:<\/p>\n<pre style=\"padding-left: 30px;\">Comienzo de p\u00e1gina\n   Comienzo de encabezado\n       ---contenido del encabezado---\n   Fin del encabezado\n   Comienzo del cuerpo de la p\u00e1gina\n       ---contenido del cuerpo de la p\u00e1gina---\n   Fin del cuerpo de la p\u00e1gina\nFin de la p\u00e1gina<\/pre>\n<ul>\n<li>Una p\u00e1gina web en HTML siempre tiene que empezar con la declaraci\u00f3n de tipo de documento y la codificaci\u00f3n de caracteres. Por eso todos empezamos una p\u00e1gina siempre abriendo otra, porque esto no creo que nadie lo escriba &#8220;de memoria&#8221;:<\/li>\n<\/ul>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de p\u00e1gina web: \u00a0&lt;!DOCTYPE html&gt;<\/li>\n<li>Fin de pagina web: &lt;\/HTML&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo del encabezado:\u00a0&lt;head&gt;<\/li>\n<li>Fin del encabezado:\u00a0&lt;\/head&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo del cuerpo de la p\u00e1gina: &lt;body&gt;<\/li>\n<li>Fin del cuerpo de la p\u00e1gina: &lt;\/body&gt;<\/li>\n<\/ul>\n<\/div>\n<p>Ahora nuevamente, copi\u00e1 este c\u00f3digo y pegalo en tu editor de texto. Guard\u00e1 el archivo como html y abrilo en un navegador:<\/p>\n<div style=\"border: 1px solid #b7dc70; padding: 10px;\">&lt;!DOCTYPE html&gt;<br \/>\n&lt;head&gt;<br \/>\n<span class=\"highLT\">&lt;<\/span><span class=\"highELE\">meta<\/span> <span class=\"highATT\">charset=<\/span><span class=\"highVAL\">&#8220;UTF-8&#8221;<\/span><span class=\"highGT\">&gt;<\/span><br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;p&gt;El Gaucho Mart\u00edn Fierro es un poema narrativo, escrito en verso por Jos\u00e9 Hern\u00e1ndez en 1872, obra literaria considerada ejemplar del g\u00e9nero. Debido a que tiene una continuaci\u00f3n, La vuelta de Mart\u00edn Fierro, escrita en 1879, este libro es tambi\u00e9n conocido como \u00abLa ida\u00bb. Ambos libros han sido considerados como libro nacional de la Argentina, bajo el t\u00edtulo gen\u00e9rico de \u00abEl Mart\u00edn Fierro\u00bb. En \u00abLa ida\u00bb, Mart\u00edn Fierro es un gaucho trabajador al que la injusticia social lo vuelve gaucho matrero (fuera de la ley).&lt;\/p&gt;<br \/>\n&lt;p&gt;Narra el car\u00e1cter independiente, heroico y sacrificado del gaucho. El poema es, en parte, una protesta en contra de la pol\u00edtica del presidente argentino Domingo Faustino Sarmiento de reclutar forzosamente a los gauchos para ir a la frontera contra los ind\u00edgenas.&lt;\/p&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/div>\n<p>Ahora s\u00ed, hiciste tu primera p\u00e1gina web. Felicitaciones. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Si ten\u00e9s ganas de aprender a hacer p\u00e1ginas web desde cero, lo primero que ten\u00e9s que saber es que casi nadie empieza a programar abriendo un editor de textos vac\u00edo y escribiendo todo. As\u00ed que no vamos a empezar aprendiendo a escribir c\u00f3digo, sino modificando un c\u00f3digo ya existente. \u00bfD\u00f3nde se escribe el programa? En &hellip; <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/06\/html-desde-cero\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;HTML desde cero &#8211; Clase 1&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,9],"tags":[],"class_list":["post-5540","post","type-post","status-publish","format-standard","hentry","category-cultura-libre","category-htmlcss"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=5540"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5540\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=5540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=5540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=5540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}