{"id":46,"date":"2009-07-21T01:09:39","date_gmt":"2009-07-21T05:09:39","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/cari22\/?p=46"},"modified":"2009-07-21T01:13:13","modified_gmt":"2009-07-21T05:13:13","slug":"46","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/cari22\/2009\/07\/21\/46\/","title":{"rendered":"TUTORIAL HTML: 5. CUERPO DEL DOCUMENTO"},"content":{"rendered":"<p>La etiqueta <strong>&lt;body&gt;&lt;\/body&gt;<\/strong> engloba el contenido principal del documento HTML (textos, im\u00e1genes, etc.). Esta etiqueta puede llevar par\u00e1metros opcionales relativos al color de fondo del documento y al color del texto y los enlaces. Estos par\u00e1metros son:<\/p>\n<ul>\n<li><strong>bgcolor<\/strong> = Define el color de fondo del    documento.<\/li>\n<\/ul>\n<blockquote><p><span class=\"resalte\">Ejemplo: <strong>&lt;body bgcolor=\"#000000&gt;&lt;\/body&gt;<\/strong><\/span><\/p><\/blockquote>\n<ul>\n<li> <strong>background<\/strong>= Hace referencia al fichero de imagen que servir\u00e1 como fondo de la p\u00e1gina. Si la imagen no rellena todo el fondo del documento, ser\u00e1 reproducida en mosaico.<\/li>\n<\/ul>\n<blockquote><p>Ejemplo: <strong>&lt;body background=\"mifoto.jpg\"&gt;&lt;\/body&gt;<\/strong><\/p><\/blockquote>\n<ul>\n<li>text =                      Define el  color para el texto del  documento. Por defecto es negro.<\/li>\n<\/ul>\n<blockquote><p>Ejemplo:<strong>&lt;body text=\"red\"&gt;&lt;\/body&gt;<\/strong><\/p><\/blockquote>\n<ul>\n<li><strong>link <\/strong>=                     Define  el color de los enlaces. Por defecto es azul.<\/li>\n<\/ul>\n<blockquote><p><span class=\"resalte\">Ejemplo:<strong> &lt;body alink=\"#00FF00\"&gt;&lt;\/body&gt;<\/strong><\/span><\/p><\/blockquote>\n<ul>\n<li><strong>vlink<\/strong> = Define el color de los enlaces ya visitados. Por defecto es   morado.<\/li>\n<\/ul>\n<blockquote><p><span class=\"resalte\">Ejemplo:<strong> &lt;body vlink=\"yellow\"&gt;&lt;\/body&gt;<\/strong><\/span><\/p><\/blockquote>\n<p>El color puede describirse de dos formas:<\/p>\n<ul>\n<li>Por medio del nombre del color en ingl\u00e9s (ver cuadro de colores).<\/li>\n<li>Por medio de una expresi\u00f3n num\u00e9rica: Consiste en la formaci\u00f3n de un c\u00f3digo <strong><em>RBG<\/em><\/strong> (Red, Green, Blue) compuesto por tres valores hexadecimales que se\u00f1alan la proporci\u00f3n de cada uno de ellos en el color resultante. Es necesario colocar delante de ellos el s\u00edmbolo \"almohadilla\" (#).<\/li>\n<\/ul>\n<p>Cuadro de colores :<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img148.imageshack.us\/img148\/8061\/dibujoztg.png\" alt=\"http:\/\/img148.imageshack.us\/img148\/8061\/dibujoztg.png\" \/><\/p>\n<p>Puedes ver todos los colores en html en: http:\/\/html-color-codes.com\/<\/p>\n<p>\ud83d\ude42<\/p>\n<p align=\"left\">\n<p align=\"left\"><span class=\"ejercicio_tit\">Ejercicio : <\/span><\/p>\n<p>Copia el siguiente c\u00f3digo en el editor de textos (te recomiendo que escribas los c\u00f3digos a mano y no caigas en la tentaci\u00f3n de copiar y pegar, pues es la mejor forma a aprender HTML)<\/p>\n<p><strong>&lt;html&gt;<br \/>\n<\/strong><strong>&lt;head&gt;&lt;title&gt;<\/strong>Mi p\u00e1gina web <strong>&lt;\/title&gt;&lt;\/head&gt;<\/strong><br \/>\n<strong>&lt;body bgcolor=\"#000000\" text=\"#FFFFFF\" link=\"#00FF00\" vlink=\"#0000FF\"&gt;<\/strong>Este es el texto de mi p\u00e1gina web <strong>&lt;\/body&gt;<\/strong><br \/>\n<strong>&lt;\/html&gt;<\/strong><\/p>\n<p>Gu\u00e1rdalo como \"ejercicio_2.html\" (recuerda poner la extensi\u00f3n \"html\", si no se guardar\u00e1 por defecto como text).\u00c1brelo desde tu navegador y observa la apariencia. Haz los cambios necesarios hasta que adquieras cierta pr\u00e1ctica. Prueba a poner cualquier imagen de fondo. Guarda la imagen en la misma carpeta en la que hayas guardado el ejercicio_2.html y a\u00f1ade el siguiente atributo dentro de la etiqueta body:<\/p>\n<p><strong>background=\"nombrearchivo.jpg\"<\/strong><\/p>\n<p>Puedes guardar las im\u00e1genes en otra carpeta (de hecho es lo recomendable) pero entonces tendr\u00e1s que tener mucho cuidado al indicar la ruta al navegador.<\/p>\n<p>Prueba el resultado. Ver\u00e1s que la imagen de fondo anula el color de fondo. Como por ahora no hemos colocado ning\u00fan link en nuestra p\u00e1gina, no podr\u00e1s ver el efecto. Si quieres, para ir probando, a\u00f1ade lo siguiente a continuaci\u00f3n de la palabra web.<\/p>\n<p><strong>&lt;a href=\"#\"&gt;<\/strong>esto es un link <strong>&lt;\/a&gt;<\/strong><\/p>\n<p>De modo que quede como sigue:<\/p>\n<p><strong>&lt;html&gt;<\/strong><br \/>\n<strong>&lt;head&gt;&lt;title&gt;<\/strong>Mi p\u00e1gina web <strong>&lt;\/title&gt;&lt;\/head&gt;<br \/>\n<\/strong><strong>&lt;body bgcolor=\"#000000\" text=\"#FFFFFF\" alink=\"#00FF00\" vlink=\"#0000FF\"&gt;<\/strong>Este es el texto de mi p\u00e1gina web. <strong>&lt;a href=\"#\"&gt;<\/strong>esto es un link <strong>&lt;\/a&gt;&lt;\/body&gt;<\/strong><br \/>\n&lt;<strong>\/html&gt;<\/strong><\/p>\n<p>Prueba a  indicar los colores  usando sus nombres en ingl\u00e9s en vez del valor RBG:<\/p>\n<p><strong>&lt;body bgcolor=\"blue\" alink=\"green\" vlink=\"yellow\"&gt;<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>La etiqueta &lt;body&gt;&lt;\/body&gt; engloba el contenido principal del documento HTML (textos, im\u00e1genes, etc.). Esta etiqueta puede llevar par\u00e1metros opcionales relativos al color de fondo del documento y al color del texto y los enlaces. Estos par\u00e1metros son: bgcolor = Define el color de fondo del documento. Ejemplo: &lt;body bgcolor=\"#000000&gt;&lt;\/body&gt; background= Hace referencia al fichero de [&hellip;]<\/p>\n","protected":false},"author":1937,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[9750,2205,1503],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-cuerpo-documento-html","tag-html","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/users\/1937"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":5,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":49,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/posts\/46\/revisions\/49"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/cari22\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}