{"id":5373,"date":"2016-01-08T22:37:36","date_gmt":"2016-01-08T22:37:36","guid":{"rendered":"http:\/\/betaweblog.education\/?p=5373"},"modified":"2016-01-08T22:37:36","modified_gmt":"2016-01-08T22:37:36","slug":"html-desde-cero-clase-3","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/08\/html-desde-cero-clase-3\/","title":{"rendered":"HTML desde cero \u2013 Clase 3"},"content":{"rendered":"<p>En <a href=\"http:\/\/betaweblog.education\/2016\/01\/06\/html-desde-cero-clase-1\/\">la clase 1<\/a> hicimos una p\u00e1gina muy sencilla. En <a href=\"http:\/\/betaweblog.education\/2016\/01\/07\/html-desde-cero-clase-2\/\">la clase 2<\/a>\u00a0agregamos\u00a0negrita, cursiva, enlaces.\u00a0En la tercera clase le vamos a agregar im\u00e1genes, t\u00edtulo y encabezados.<\/p>\n<h2>Los t\u00edtulos de las ventanas<\/h2>\n<div style=\"border-radius: 25px; background: #b7dc70; padding-left: 2em; width: 80%;\">\n<ul>\n<li>Comienzo de t\u00edtulo de ventana: &lt;title&gt;<\/li>\n<li>Fin de t\u00edtulo de ventana: &lt;\/title&gt;<\/li>\n<\/ul>\n<\/div>\n<p>Vamos a abrir el archivo HTML en el editor de texto (Notepad++, Geany, etc.)<br \/>\nHasta ahora en la parte del encabezado s\u00f3lo tenemos la declaraci\u00f3n del tipo de caracteres, lo cual es necesario incluir para poder ver los acentos y e\u00f1es.<br \/>\nAhora vamos a agregar algo m\u00e1s en esa secci\u00f3n (dentro del heading)<\/p>\n<div>\n<p>&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=\u201d<\/span><span class=\"highVAL\">UTF-8\u2033<\/span><span class=\"highGT\">&gt;<br \/>\n<\/span><strong>&lt;title&gt;El Mart\u00edn Fierro&lt;\/title&gt;<\/strong><br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<\/p>\n<\/div>\n<p>\u00bfPero d\u00f3nde se ve ese t\u00edtulo? Cuando abras tu p\u00e1gina web, vas a ver el t\u00edtulo <strong>en la parte de arriba del navegador<\/strong>, y tambi\u00e9n en la barra de tareas.<\/p>\n<h2>Agregamos\u00a0t\u00edtulos y subt\u00edtulos en la p\u00e1gina<\/h2>\n<div style=\"border-radius: 25px; background: #b7dc70; padding-left: 2em; width: 80%;\">\n<ul>\n<li>Comienzo de encabezado de primer nivel (t\u00edtulos principales): &lt;h1&gt;<\/li>\n<li>Fin de encabezado: &lt;\/h1&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding-left: 2em; width: 80%;\">\n<ul>\n<li>Comienzo de encabezado de segundo\u00a0nivel (subt\u00edtulos): &lt;h2&gt;<\/li>\n<li>Fin de encabezado de segundo nivel: &lt;\/h2&gt;<\/li>\n<\/ul>\n<\/div>\n<p>Para insertar un t\u00edtulo, por supuesto, se puede escribir el t\u00edtulo y luego agregarle negrita o cursiva. Sin embargo, esa manera de poner un t\u00edtulo no es \u00fatil para todos los usuarios. <strong>Lo que es correcto sem\u00e1nticamente es indicar que lo que uno est\u00e1 escribiendo es un t\u00edtulo.<\/strong>De esa manera quien lo necesite puede comprender la estructura de la p\u00e1gina, y tambi\u00e9n se puede determinar un formato para todos los encabezados de primer nivel (t\u00edtulos), otro formato para los encabezados de segundo nivel (subt\u00edtulos), etc.<\/p>\n<div>\n<p>&lt;body&gt;<\/p>\n<p>&lt;h1&gt;Rayuela&lt;\/h1&gt;<\/p>\n<p>&lt;h2&gt;Pero no el libro original&lt;\/h2&gt;<\/p>\n<p>&lt;h3&gt;Autor: Yo&lt;\/h3&gt;<\/p>\n<p>&lt;p&gt;Hab\u00eda una vez una vereda, una ni\u00f1a, y una tiza. Tambi\u00e9n hab\u00eda una piedra y otra ni\u00f1a. Todos esos elementos se combinaron de tal forma que en la vereda qued\u00f3 una rayuela. La lluvia la borr\u00f3.&lt;\/p&gt;<\/p>\n<p>&lt;\/body&gt;<\/p>\n<\/div>\n<h2>Im\u00e1genes<\/h2>\n<div style=\"border-radius: 25px; background: #b7dc70; padding-left: 2em; width: 80%;\">\n<ul>\n<li>Inserci\u00f3n de una imagen: &lt;img src=\u201dimagen.png&gt; alt=\u201dLogotipo\u201d \/&gt;<\/li>\n<\/ul>\n<\/div>\n<p>Para insertar una imagen es necesario que el archivo:<\/p>\n<ul>\n<li>Tenga uno de estos tres formatos:\n<ul>\n<li>GIF\u00a0(menos colores, pero con posibilidad de ser animados),<\/li>\n<li>JPG (todos los colores, sin transparencia ni animaci\u00f3n pero mejor compresi\u00f3n que el PNG), o<\/li>\n<li>PNG (pesa m\u00e1s, pero admite transparencias)<\/li>\n<\/ul>\n<\/li>\n<li>Est\u00e9 on line, es decir, tenemos que subir la imagen para poder indicar su ubicaci\u00f3n<em> (en el caso de nuestras pr\u00e1cticas con p\u00e1ginas locales, no es necesario; basta con poner el archivo de imagen en la misma carpeta que la p\u00e1gina que estamos creando).<\/em><\/li>\n<li>Tenga derechos que te permitan usarla. Nunca hay que usar una imagen que no tiene declarada una licencia que permita su uso.<\/li>\n<\/ul>\n<h2>Im\u00e1genes con enlaces<\/h2>\n<p>Para poner un enlace en una imagen, basta con poner la imagen en el lugar donde se escribe el contenido del enlace:<\/p>\n<p>&lt;a href=\u201dhttps:\/\/es.wikipedia.org\/\u201d&gt;&lt;img src=\u201dhttps:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/1e\/Wikipedia-logo-v2-es.svg\/135px-Wikipedia-logo-v2-es.svg.png\u201d\/&gt;&lt;\/a&gt;<\/p>\n<p>Se ve de esta manera:<\/p>\n<p><a href=\"https:\/\/web.archive.org\/web\/20160113092551\/https:\/\/es.wikipedia.org\/\"><img decoding=\"async\" src=\"https:\/\/web.archive.org\/web\/20160113092551im_\/https:\/\/upload.wikimedia.org\/wikipedia\/commons\/thumb\/1\/1e\/Wikipedia-logo-v2-es.svg\/135px-Wikipedia-logo-v2-es.svg.png\" alt=\"Logo de Wikipedia, Enciclopedia libre\" \/><\/a><\/p>\n<p>Hay dos recomendaciones muy importantes para mejorar la accesibilidad del sitio web:<\/p>\n<ul>\n<li>Las im\u00e1genes deben tener texto alternativo significativo (si la imagen tiene enlace, el texto alternativo debe ser la indicaci\u00f3n del enlace, por ejemplo \u201cIr al comienzo\u201d)<\/li>\n<li>Las im\u00e1genes tienen que estar optimizadas para poder cargar r\u00e1pidamente, para no gastar ancho de banda innecesario, m\u00e1xime teniendo en cuenta que cuando navegamos con nuestros celulares pagamos por cada byte que descargamos.<\/li>\n<\/ul>\n<p>Te propongo hacer el siguiente ejercicio:<\/p>\n<ul>\n<li>Arm\u00e1 una peque\u00f1a galer\u00eda de arte o \u00e1lbum de fotos, poniendo una imagen, luego un enlace a la siguiente, etc.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>M\u00e1s tutoriales de HTML<\/h2>\n<p>En <a href=\"https:\/\/web.archive.org\/web\/20160113092551\/http:\/\/www.w3schools.com\/html\/default.asp\">el sitio de 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. En la clase 2\u00a0agregamos\u00a0negrita, cursiva, enlaces.\u00a0En la tercera clase le vamos a agregar im\u00e1genes, t\u00edtulo y encabezados. Los t\u00edtulos de las ventanas Comienzo de t\u00edtulo de ventana: &lt;title&gt; Fin de t\u00edtulo de ventana: &lt;\/title&gt; Vamos a abrir el archivo HTML en el editor de texto (Notepad++, &hellip; <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/08\/html-desde-cero-clase-3\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;HTML desde cero \u2013 Clase 3&#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-5373","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\/5373","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=5373"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5373\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=5373"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=5373"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=5373"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}