{"id":5471,"date":"2016-01-13T17:40:22","date_gmt":"2016-01-13T20:40:22","guid":{"rendered":"http:\/\/betaweblog.education\/wp\/?p=5471"},"modified":"2016-01-13T17:40:22","modified_gmt":"2016-01-13T20:40:22","slug":"html-desde-cero-clase-4","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/13\/html-desde-cero-clase-4\/","title":{"rendered":"HTML desde cero &#8211; Clase 4"},"content":{"rendered":"<p>En <a href=\"http:\/\/betaweblog.education\/wp\/html-desde-cero\/\">la clase 1<\/a> hicimos una p\u00e1gina muy sencilla. En <a href=\"http:\/\/betaweblog.education\/wp\/html-desde-cero-clase-2\/\">la clase 2<\/a>\u00a0agregamos\u00a0negrita, cursiva, enlaces.\u00a0En la <a href=\"http:\/\/betaweblog.education\/wp\/html-desde-cero-clase-3\/\">tercera clase<\/a> le agregamos im\u00e1genes, t\u00edtulo y encabezados.<\/p>\n<p>En esta cuarta clase vamos a\u00a0utilizar listas numeradas y no numeradas, y un m\u00ednimo de tablas.<\/p>\n<h2>Listas<\/h2>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de lista numerada: &lt;ol&gt;<\/li>\n<li>Fin de lista numerada: &lt;\/ol&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de lista no numerada (vi\u00f1etas): &lt;ul&gt;<\/li>\n<li>Fin de lista no numerada: &lt;\/ul&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo \u00edtem de lista: &lt;li&gt;<\/li>\n<li>Fin de \u00edtem de lista: &lt;\/li&gt;<\/li>\n<\/ul>\n<\/div>\n<p>Cada vez que necesitamos tener un conjunto de p\u00e1rrafos con vi\u00f1etas, o con un s\u00edmbolo al lado, debemos utilizar listas ordenadas (OL, &#8220;orderer) o no ordenadas (UL, &#8220;unorderer list&#8221;).<img decoding=\"async\" class=\"size-medium wp-image-5477 alignright\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/01\/listasolyul-2-300x270.png\" alt=\"ejemplo de ol y ul\" width=\"230\"  \/><\/p>\n<div style=\"border: 1px solid #b7dc70; padding: 10px; width: 70%;\">\n<pre>&lt;h1&gt;Comienzo de clases&lt;\/h1&gt;<\/pre>\n<pre>&lt;h2&gt;Resultado del campeonato de truco&lt;\/h2&gt;<\/pre>\n<pre>&lt;ol&gt;<\/pre>\n<pre>&lt;li&gt;P\u00e9rez&lt;\/li&gt;<\/pre>\n<pre>&lt;li&gt;G\u00f3mez&lt;\/li&gt;<\/pre>\n<pre>&lt;li&gt;Fern\u00e1ndez&lt;\/li&gt;<\/pre>\n<pre>&lt;li&gt;Rodr\u00edguez&lt;\/li&gt;<\/pre>\n<pre>&lt;\/ol&gt;<\/pre>\n<pre>&lt;h2&gt;Lista de elementos a traer&lt;\/h2&gt;<\/pre>\n<pre>&lt;ul&gt;\n &lt;li&gt;Birome&lt;\/li&gt;\n<\/pre>\n<pre>&lt;li&gt;Cuaderno&lt;\/li&gt;<\/pre>\n<pre>&lt;li&gt;Hilo de pizza&lt;\/li&gt;<\/pre>\n<pre>&lt;li&gt;Instrumento musica (no piano)&lt;\/li&gt;<\/pre>\n<pre>&lt;\/ul&gt;<\/pre>\n<\/div>\n<h2><\/h2>\n<h2>Tablas<\/h2>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de tabla: &lt;table&gt;<\/li>\n<li>Fin de tabla: &lt;\/table&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de fila\u00a0de tabla (row): &lt;tr&gt;<\/li>\n<li>Fin de\u00a0fila de tabla: &lt;\/tr&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de datos de la tabla\u00a0(data): &lt;td&gt;<\/li>\n<li>Fin de datos de tabla: &lt;\/td&gt;<\/li>\n<\/ul>\n<\/div>\n<div style=\"border-radius: 25px; background: #b7dc70; padding: 10px; width: 80%;\">\n<ul>\n<li>Comienzo de encabezados\u00a0de tabla\u00a0(heading): &lt;th&gt;<\/li>\n<li>Fin de encabezados de tabla: &lt;\/th&gt;<\/li>\n<\/ul>\n<\/div>\n<p>Es muy importante saber que se deben usar tablas solamente cuando los datos pueden presentarse claramente como\u00a0una tabla, es decir tienen m\u00e1s de una columna y m\u00e1s de una fila. Hace unos cu\u00e1ntos a\u00f1os se usaban tablas invisibles para acomodar objetos en la pantalla, pero estas le est\u00e1n indicando a los lectores de pantalla algo que no es, lo cual hace imposible la comprensi\u00f3n para una persona invidente o que utiliza ayudas t\u00e9cnicas.<br \/>\n<a href=\"\/betaweblog\/wp-content\/uploads\/2016\/01\/tabla-1.png\" rel=\"attachment wp-att-5479\"><img decoding=\"async\" class=\"size-medium wp-image-5479 alignright\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/01\/tabla-1-300x181.png\" alt=\"Tabla\" width=\"200\" \/><\/a><\/p>\n<div style=\"border: 1px solid #b7dc70; padding: 10px; width: 70%;\">\n<p>&lt;h2&gt;Resultado del campeonato de truco&lt;\/h2&gt;<\/p>\n<p>&lt;table&gt;<br \/>\n&lt;tr&gt;<br \/>\n&lt;th&gt;Apellido&lt;\/th&gt;<br \/>\n&lt;th&gt;Nombre&lt;\/th&gt;<br \/>\n&lt;th&gt;Puntaje&lt;\/th&gt;<br \/>\n&lt;\/tr&gt;<br \/>\n&lt;tr&gt; &lt;td&gt;P\u00e9rez&lt;\/td&gt;<br \/>\n&lt;td&gt;Juan&lt;\/td&gt;<br \/>\n&lt;td&gt;300&lt;\/td&gt; &lt;\/tr&gt;<br \/>\n&lt;tr&gt; &lt;td&gt;G\u00f3mez&lt;\/td&gt;<br \/>\n&lt;td&gt;Juana&lt;\/td&gt;<br \/>\n&lt;td&gt;299&lt;\/td&gt; &lt;\/tr&gt;<br \/>\n&lt;tr&gt; &lt;td&gt;Rodr\u00edguez&lt;\/td&gt;<br \/>\n&lt;td&gt;Andr\u00e9s&lt;\/td&gt;<br \/>\n&lt;td&gt;99&lt;\/td&gt; &lt;\/tr&gt;<br \/>\n&lt;\/table&gt;<\/p>\n<\/div>\n<h2><\/h2>\n<p>&nbsp;<\/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 agregamos im\u00e1genes, t\u00edtulo y encabezados. En esta cuarta clase vamos a\u00a0utilizar listas numeradas y no numeradas, y un m\u00ednimo de tablas. Listas Comienzo de lista numerada: &lt;ol&gt; Fin de lista numerada: &lt;\/ol&gt; Comienzo de lista no &hellip; <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/01\/13\/html-desde-cero-clase-4\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;HTML desde cero &#8211; Clase 4&#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-5471","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\/5471","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=5471"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5471\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=5471"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=5471"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=5471"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}