{"id":5378,"date":"2016-01-07T22:42:25","date_gmt":"2016-01-07T22:42:25","guid":{"rendered":"http:\/\/betaweblog.education\/?p=5378"},"modified":"2016-01-07T22:42:25","modified_gmt":"2016-01-07T22:42:25","slug":"html-desde-cero-clase-2","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/07\/html-desde-cero-clase-2\/","title":{"rendered":"HTML desde cero \u2013 Clase 2"},"content":{"rendered":"<p>En la <a href=\"http:\/\/betaweblog.education\/2016\/01\/06\/html-desde-cero-clase-1\/\">clase 1<\/a> hicimos una p\u00e1gina muy sencilla.<br \/>\nHasta ahora s\u00f3lo tenemos la estructura b\u00e1sica de la p\u00e1gina web, y dentro de su contenido depositamos unos p\u00e1rrafos sin ning\u00fan estilo.<br \/>\nAhora vamos a modificar esa misma p\u00e1gina web, agreg\u00e1ndole negrita, cursiva, enlaces. En la <a href=\"http:\/\/betaweblog.education\/2016\/01\/08\/html-desde-cero-clase-3\/\">tercera clase<\/a> le vamos a agregar im\u00e1genes, t\u00edtulo y encabezados.<\/p>\n<p>Destacamos partes del texto<\/p>\n<div style=\"border-radius: 25px; background: #b7dc70; padding-left: 2em; width: 80%;\">Comienzo de texto destacado: &lt;strong&gt;<strong><br \/>\n<\/strong>Fin de texto destacado:\u00a0&lt;\/strong&gt;<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding-left: 2em; width: 80%;\">Comienzo de texto en cursiva: &lt;em&gt;<em><br \/>\n<\/em>Fin de texto en cursiva: &lt;\/em&gt;<\/div>\n<p>Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)<br \/>\nY vamos a elegir algunas palabras para destacar en cursiva y en negrita.<br \/>\nLo que tenemos que hacer es marcar con el comienzo del texto destacado, y marcar con el cierre del texto destacado. Lo mismo para cursiva, pero con em:<\/p>\n<p style=\"padding-left: 30px;\"><strong>Mart\u00edn Fierro<\/strong><\/p>\n<p style=\"padding-left: 30px;\"><em>La vuelta de Mart\u00edn Fierro<\/em><\/p>\n<p style=\"padding-left: 30px;\">El Gaucho <strong>Mart\u00edn Fierro<\/strong> es un poema <em>narrativo<\/em>, escrito en verso por Jos\u00e9 Hern\u00e1ndez en 1872, obra literaria considerada ejemplar del g\u00e9nero. Debido a que tiene una continuaci\u00f3n, <em>La vuelta de Mart\u00edn Fierro<\/em>, 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).<\/p>\n<h3>Agregamos enlaces<\/h3>\n<div style=\"border-radius: 25px; background: #b7dc70; padding-left: 2em; width: 80%;\">Comienzo de enlace:\u00a0&lt;a href=&#8221;https:\/\/es.wikipedia.org\/&#8221;&gt;<br \/>\nFin de enlace: &lt;\/a&gt;<\/div>\n<p>La estructura de un enlace es un poco diferente a los tags que venimos viendo, porque -si bien hay apertura y cierre- hay otros dos elementos fundamentales:<\/p>\n<p>El destino del enlace (la direcci\u00f3n, por ejemplo, https:\/\/es.wikipedia.org\/ )<br \/>\nEl texto visible en el enlace, lo que uno quiere que se lea en el link (por ejemplo \u201cEnciclopedia libre\u201d)<\/p>\n<p>&lt;a href=&#8221;https:\/\/es.wikipedia.org\/&#8221;&gt;Enciclopedia libre&lt;\/a&gt;<\/p>\n<p>Se ve de esta manera:<\/p>\n<p><a href=\"https:\/\/es.wikipedia.org\/\">Enciclopedia libre<\/a><\/p>\n<p>Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:<\/p>\n<ul>\n<li>Los enlaces no tienen que tener texto igual entre s\u00ed, por ejemplo: haga clic \u201caqu\u00ed\u201c, \u201caqu\u00ed\u201d y \u201caqu\u00ed\u201d para leer m\u00e1s. Una persona que navega escuchando el sitio (como los invidentes o personas con altas dificultades de visi\u00f3n), s\u00f3lo va a escuchar la palabra \u201caqu\u00ed\u201d, lo cual no lo ayuda para saber de qu\u00e9 se trata. La forma correcta es: Acceda a la enciclopedia Wikipedia, al sitio de Martin Fierro, o busque m\u00e1s informaci\u00f3n en Google.<\/li>\n<li>Los visitantes de tu p\u00e1gina tienen que poder decidir si quieren que un enlace se abra en la misma ventana o en una nueva. Est\u00e1 desaconsejado el uso de enlaces que se abren en una ventana nueva, ya que el usuario pierde el dominio de su navegaci\u00f3n. Si a\u00fan as\u00ed lo necesitaras, al c\u00f3digo anterior se le agrega lo siguiente: target=\u201c_blank\u201d<\/li>\n<\/ul>\n<p style=\"text-align: center;\">&lt;a href=&#8221;https:\/\/es.wikipedia.org\/&#8221; target=&#8221;_blank&#8221;&gt;Enciclopedia libre&lt;\/a&gt;<\/p>\n<p>Se ve de esta manera:<\/p>\n<p style=\"text-align: center;\"><a href=\"https:\/\/es.wikipedia.org\/\" target=\"_blank\" rel=\"noopener noreferrer\">Enciclopedia libre<\/a><\/p>\n<p>Te propongo hacer el siguiente ejercicio:<\/p>\n<ul>\n<li>Tom\u00e1 un texto que te interese y cre\u00e1 una p\u00e1gina web nueva, usando la estructura aprendida como base, y poniendo negrita, cursiva y enlaces en diversos lugares del texto.<\/li>\n<\/ul>\n<h3>C\u00f3mo ver el c\u00f3digo de una p\u00e1gina web<\/h3>\n<p>Cuando quieras ver y por qu\u00e9 no copiar c\u00f3digo (es frecuente y est\u00e1 permitido, esto es c\u00f3digo abierto!) pod\u00e9s hacer clic con el bot\u00f3n derecho sobre una p\u00e1gina web y mirar c\u00f3mo est\u00e1 hecha. Si no tiene programaci\u00f3n (javascript, php, etc) o cosas hechas con Flash u otros plugins, vas a poder aprender copiando, pegando y modificando.<\/p>\n<h3>M\u00e1s tutoriales de HTML<\/h3>\n<p>En el sitio de <a href=\"https:\/\/web.archive.org\/web\/20160113092551\/http:\/\/www.w3schools.com\/html\/default.asp\">w3schools<\/a> hay excelentes tutoriales de HTML y CSS.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En la clase 1 hicimos una p\u00e1gina muy sencilla. Hasta ahora s\u00f3lo tenemos la estructura b\u00e1sica de la p\u00e1gina web, y dentro de su contenido depositamos unos p\u00e1rrafos sin ning\u00fan estilo. Ahora vamos a modificar esa misma p\u00e1gina web, agreg\u00e1ndole negrita, cursiva, enlaces. En la tercera clase le vamos a agregar im\u00e1genes, t\u00edtulo y encabezados. &hellip; <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/07\/html-desde-cero-clase-2\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;HTML desde cero \u2013 Clase 2&#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-5378","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\/5378","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=5378"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5378\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=5378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=5378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=5378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}