{"id":171,"date":"2014-08-01T20:28:36","date_gmt":"2014-08-02T01:28:36","guid":{"rendered":"http:\/\/giogui.com\/blog\/?p=171"},"modified":"2014-08-18T19:30:57","modified_gmt":"2014-08-19T00:30:57","slug":"como-hacer-una-pagina-web-3-que-es-html","status":"publish","type":"post","link":"http:\/\/giogui.com\/blog\/como-hacer-una-pagina-web-3-que-es-html\/","title":{"rendered":"C\u00f3mo Hacer Una P\u00e1gina Web #3 &#8211; \u00bfQu\u00e9 es HTML?"},"content":{"rendered":"<div id=\"attachment_172\" style=\"width: 640px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-3-html.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-172\" class=\"wp-image-172 size-full\" src=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-3-html.jpg\" alt=\"C\u00f3mo Hacer Una P\u00e1gina Web #3 | \u00bfQu\u00e9 es HTML? | Giogui Soluciones en L\u00ednea\" width=\"630\" height=\"200\" srcset=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-3-html.jpg 630w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-3-html-300x95.jpg 300w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-3-html-624x198.jpg 624w\" sizes=\"auto, (max-width: 630px) 100vw, 630px\" \/><\/a><p id=\"caption-attachment-172\" class=\"wp-caption-text\">C\u00f3mo Hacer Una P\u00e1gina Web #3 | \u00bfQu\u00e9 es HTML? | Giogui Soluciones en L\u00ednea<\/p><\/div>\n<p>HTML es el lenguaje que le da estructura a las p\u00e1ginas web. <strong>Es como el esqueleto de una p\u00e1gina web<\/strong>, ya que hace que la p\u00e1gina tenga un estructura ordenada a la que se le pueden a\u00f1adir varios complementos con otros lenguajes de programaci\u00f3n, si se requiere. Si una p\u00e1gina web fuera una casa, HTML ser\u00edan los cimientos y la estructura en general de esta casa.<\/p>\n<p>HTML est\u00e1 conformado por elementos HTML, llam\u00e9moslos ahora etiquetas. Estas ayudan a diferenciar diferentes partes de la p\u00e1gina. Por ejemplo hay una etiqueta que se llama \u201cbody\u201d y dentro de esta etiqueta se escribir\u00e1 todo el contenido de la p\u00e1gina web utilizando varias etiquetas m\u00e1s. <strong>HTML utiliza la estructura de un s\u00e1ndwich<\/strong>, en donde el pan son etiquetas que abarcan mucho contenido y el jam\u00f3n o jitomate o dem\u00e1s elementos del s\u00e1ndwich son etiquetas que abarcan menos contenido. Veamos la siguiente imagen como un ejemplo de esto.<\/p>\n<div id=\"attachment_173\" style=\"width: 423px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-1.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-173\" class=\"size-full wp-image-173\" src=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-1.jpg\" alt=\"C\u00f3mo Hacer Una P\u00e1gina Web #3 | Estructura HTML | Giogui Soluciones en L\u00ednea\" width=\"413\" height=\"250\" srcset=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-1.jpg 413w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-1-300x181.jpg 300w\" sizes=\"auto, (max-width: 413px) 100vw, 413px\" \/><\/a><p id=\"caption-attachment-173\" class=\"wp-caption-text\">C\u00f3mo Hacer Una P\u00e1gina Web #3 | Estructura HTML | Giogui Soluciones en L\u00ednea<\/p><\/div>\n<p>La etiqueta \u201cpan\u201d contiene las etiquetas de \u201cjitomate\u201d y \u201ccarne\u201d. Entonces estas dos etiquetas, jitomate y carne, est\u00e1n dentro de la etiqueta pan y tienen las mismas caracter\u00edsticas de la etiqueta pan m\u00e1s las suyas propias. En este ejemplo sencillo de una hamburguesa con elementos dentro, <strong>se muestra muy sencillamente como se estructura HTML y<\/strong> b\u00e1sicamente como funciona tambi\u00e9n.<\/p>\n<p>Las etiquetas funcionan para diferenciar partes del contenido de la p\u00e1gina web y hay etiquetas predefinidas en HTML que tienen funciones predefinidas tambi\u00e9n. Utilicemos la misma estructura del ejemplo de la hamburguesa pero cambiemos los nombres de las etiquetas por nombres reales de etiquetas HTML. As\u00ed es como quedar\u00eda la imagen ahora:<\/p>\n<div id=\"attachment_174\" style=\"width: 452px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-2.jpg\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-174\" class=\"size-full wp-image-174\" src=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-2.jpg\" alt=\"C\u00f3mo Hacer Una P\u00e1gina Web #3 | Estructura HTML | Giogui Soluciones en L\u00ednea\" width=\"442\" height=\"250\" srcset=\"http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-2.jpg 442w, http:\/\/giogui.com\/blog\/wp-content\/uploads\/2014\/08\/como-hacer-una-pagina-web-estructura-html-2-300x169.jpg 300w\" sizes=\"auto, (max-width: 442px) 100vw, 442px\" \/><\/a><p id=\"caption-attachment-174\" class=\"wp-caption-text\">C\u00f3mo Hacer Una P\u00e1gina Web #3 | Estructura HTML | Giogui Soluciones en L\u00ednea<\/p><\/div>\n<p>La imagen de arriba utiliza etiquetas HTML reales. A continuaci\u00f3n explicaremos para que sirve cada una de estas etiquetas. La etiqueta &lt;body&gt; se utiliza como un envoltorio del contenido que va a tener la p\u00e1gina. La etiqueta &lt;h1&gt; se utiliza para hacer que cierta palabra o frase tenga el formato de encabezado. La etiqueta &lt;p&gt; se utiliza para decir que lo que se encuentra dentro de ella es un p\u00e1rrafo ordinario de texto. <strong>Cada etiqueta HTML tiene que ser cerrada al final de su uso<\/strong>, para que as\u00ed sus funciones predeterminadas no vayan a pasarse a las pr\u00f3ximas etiquetas HTML. En la imagen podemos ver como se cierran, se cierran a\u00f1adiendo una diagonal al inicio de su nombre de etiqueta, as\u00ed: &lt;\/body&gt;.<\/p>\n<p>Estas son unas de las etiquetas m\u00e1s comunes que se pueden ver en una p\u00e1gina web:<\/p>\n<p><span class=\"magazine\">&lt;h1&gt; <\/span>Encabezado Primario (Tama\u00f1o de Letra m\u00e1s Grande)<\/p>\n<p><span class=\"magazine\">&lt;h2&gt; <\/span>Encabezado Secundario ( Tama\u00f1o de letra menos grande que el h1)<\/p>\n<p><span class=\"magazine\">&lt;p&gt; <\/span>Texto que ser\u00e1 un p\u00e1rrafo de la p\u00e1gina web<\/p>\n<p><span class=\"magazine\">&lt;div&gt; <\/span>Secci\u00f3n de un \u00e1rea de la p\u00e1gina web que ser\u00e1 ajustada a criterio del dise\u00f1ador.<\/p>\n<p>Existen muchas etiquetas m\u00e1s de HTML. La verdad no son tantas, <strong>son alrededor de 75<\/strong>. Y usualmente solo se utilizan de 10 a 20. HTML es un lenguaje b\u00e1sico, b\u00e1sico en este caso quiere decir que es muy necesario porque va a ser utilizando siempre para hacer p\u00e1ginas web. Adquirir conocimientos fuertes en HTML no es solo importante, es indispensable para la creaci\u00f3n de p\u00e1ginas web.<\/p>\n<p>Esperamos que les haya gustado este art\u00edculo y los esperamos en la pr\u00f3xima entrada de esta serie \u201cC\u00f3mo Hacer Una P\u00e1gina Web\u201d el pr\u00f3ximo viernes 9 de agosto.<\/p>\n<p class=\"entry-title\">Aqu\u00ed est\u00e1 el art\u00edculo anterior de la serie: <a href=\"http:\/\/giogui.com\/blog\/como-hacer-una-pagina-web-2-html-y-css\/\" rel=\"bookmark\">\u00bfC\u00f3mo Hacer Una P\u00e1gina Web? #2 \u201cHTML y CSS\u201d<\/a><\/p>\n<p>Conozca m\u00e1s acerca de nuestros servicios de <a title=\"Dise\u00f1o Web en Guadalajara\" href=\"http:\/\/www.giogui.com\/diseno-de-paginas-web-en-guadalajara-por-giogui.php\" target=\"_blank\">Dise\u00f1o de P\u00e1ginas Web Giogui<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>HTML es el lenguaje que le da estructura a las p\u00e1ginas web. Es como el esqueleto de una p\u00e1gina web, ya que hace que la p\u00e1gina tenga un estructura ordenada a la que se le pueden a\u00f1adir varios complementos con otros lenguajes de programaci\u00f3n, si se requiere. Si una p\u00e1gina web fuera una casa, HTML [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21,47],"tags":[28,23,8,9,18,12,24,11,10,19],"class_list":["post-171","post","type-post","status-publish","format-standard","hentry","category-como-hacer-una-pagina-web","category-cursos-de-entrenamiento-en-linea","tag-como-hacer-una-pagina-web-3","tag-como-hacer-una-pagina-web-2","tag-diseno-web-2","tag-diseno-web-en-guadalajara","tag-e-marketing-2","tag-giogui","tag-pagina-web-de-restaurante","tag-paginas-web","tag-paginas-web-en-guadalajara","tag-posicionamiento-web"],"_links":{"self":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts\/171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/comments?post=171"}],"version-history":[{"count":9,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions"}],"predecessor-version":[{"id":194,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/posts\/171\/revisions\/194"}],"wp:attachment":[{"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/media?parent=171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/categories?post=171"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/giogui.com\/blog\/wp-json\/wp\/v2\/tags?post=171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}