{"id":58,"date":"2024-05-20T21:38:41","date_gmt":"2024-05-20T19:38:41","guid":{"rendered":"https:\/\/blog.sutilweb.eu\/?page_id=58"},"modified":"2024-05-20T21:56:13","modified_gmt":"2024-05-20T19:56:13","slug":"04-primeros-ejemplos-con-html5","status":"publish","type":"page","link":"https:\/\/sutilweb.eu\/index.php\/lenguajes\/html5\/html5-manual\/04-primeros-ejemplos-con-html5\/","title":{"rendered":"04. Primeros ejemplos con HTML5"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">En este cap\u00edtulo vamos a mostrar algunos ejms b\u00e1sicos. No te preocupes si no comprendes todo el c\u00f3digo, se ir\u00e1 explicando a lo largo de los cap\u00edtulos posteriores.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Documentos HTML<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Todos los documentos deben comenzar con la declaraci\u00f3n <strong><em>&lt;!DOCTYPE html&gt;<\/em><\/strong>. Posteriormente debe incluir las etiquetas <strong><em>&lt;html&gt;<\/em><\/strong> y <strong><em>&lt;\/html&gt;<\/em><\/strong>. La parte visible del documento la encontraremos entre las etiquetas <strong><em>&lt;body&gt;<\/em><\/strong> y <strong><em>&lt;\/body&gt;<\/em><\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE&nbsp;html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h1&gt;Mi primer encabezado&lt;\/h1&gt;\n&lt;p&gt;Mi primer p\u00e1rrafo&lt;\/p&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">La declaraci\u00f3n &lt;!DOCTYPE&gt;<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La declaraci\u00f3n <strong><em>&lt;!DOCTYPE&gt;<\/em><\/strong> representa el tipo de documento, y ayuda a los navegadores a mostrar las webs correctamente. Siempre debe aparecer al comienzo del documento. No son CASE SENSITIVE, es decir, no son sensibles a may\u00fasculas o min\u00fasculas. La declaraci\u00f3n <strong><em>&lt;!DOCTYPE&gt;<\/em><\/strong> para HTML5 es<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;!DOCTYPE html5&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Encabezados HTML5<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Los <strong>encabezados<\/strong> vienen definidos con las etiquetas <strong><em>&lt;h1&gt;<\/em><\/strong>, &lt;h2&gt;&#8230; &lt;h6&gt;. &lt;h1&gt; definir\u00eda el encabezado o cabecera m\u00e1s importante, mientras que &lt;h6&gt; definir\u00eda el encabezado menos importante.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Ejm<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;h1&gt;Encabezado 1&lt;\/h1&gt;\n&lt;h2&gt;Encabezado 1&lt;\/h2&gt;\n&lt;h3&gt;Encabezado 1&lt;\/h3&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">P\u00e1rrafos HTML5<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Son definidos mediante la etiqueta <strong><em>&lt;p&gt;<\/em><\/strong>, de la siguiente forma.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;p&gt;Esto es un p\u00e1rrafo&lt;\/p&gt;\n&lt;p&gt;Esto es otro p\u00e1rrafo&lt;\/p&gt;<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Enlaces en HTML5<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Son definidos mediante la etiqueta <strong><em>&lt;a&gt;<\/em><\/strong>, de la siguiente manera.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;a&nbsp;href=\"https:\/\/sutilweb.com\"&gt;Esto es un enlace&lt;\/a&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">El destino del enlace o link se especifica mediante el <strong>atributo <em>href<\/em><\/strong>. Los <strong>atributos<\/strong> son utilizados para proveer informaci\u00f3n adicional acerca de los elementos HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Im\u00e1genes en HTML5<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Son definidas mediante la etiqueta <strong><em>&lt;img&gt;<\/em><\/strong>, de la siguiente forma.<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">&lt;img&nbsp;src=\"sutilweb.jpg\"&nbsp;alt=\"sutilweb.com\"&nbsp;width=\"104\"&nbsp;height=\"142\" \/&gt;<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Los atributos <strong><em>src<\/em><\/strong>, <strong><em>alt<\/em><\/strong>, <strong><em>width<\/em> <\/strong>y <strong><em>height<\/em><\/strong>, incluidos en la etiqueta <strong><em>&lt;img&gt;<\/em><\/strong>, proveen m\u00e1s caracter\u00edsticas a dicha etiqueta.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este cap\u00edtulo vamos a mostrar algunos ejms b\u00e1sicos. No te preocupes si no comprendes todo el c\u00f3digo, se ir\u00e1 explicando a&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":3,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-58","page","type-page","status-publish","hentry"],"uagb_featured_image_src":{"full":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false},"uagb_author_info":{"display_name":"Sutil Web","author_link":"https:\/\/sutilweb.eu\/index.php\/author\/sutilweb\/"},"uagb_comment_info":0,"uagb_excerpt":"En este cap\u00edtulo vamos a mostrar algunos ejms b\u00e1sicos. No te preocupes si no comprendes todo el c\u00f3digo, se ir\u00e1 explicando a...","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/58","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/comments?post=58"}],"version-history":[{"count":1,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/58\/revisions"}],"predecessor-version":[{"id":59,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/58\/revisions\/59"}],"up":[{"embeddable":true,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/41"}],"wp:attachment":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/media?parent=58"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}