![\"\"](\"https:\/\/blog.sutilweb.eu\/wp-content\/uploads\/2024\/05\/Elementos-y-tecnicas-de-diseno-en-HTML.png\")
<\/figure>\n\n\n\nElementos de dise\u00f1o HTML<\/h2>\n\n\n\n
HTML tiene varios elementos sem\u00e1nticos que definen las diferentes partes de una p\u00e1gina web:<\/p>\n\n\n\n Ejm<\/strong><\/p>\n\n\n\n Hay cuatro t\u00e9cnicas diferentes para crear dise\u00f1os de varias columnas. Cada t\u00e9cnica tiene sus pros y sus contras:<\/p>\n\n\n\n Si deseas crear su dise\u00f1o r\u00e1pidamente, puedes usar un marco CSS<\/strong>, como W3.CSS<\/strong> o Bootstrap<\/strong>.<\/p>\n\n\n\n Es com\u00fan hacer dise\u00f1os web completos usando la propiedad flotante de CSS. Float<\/em> <\/strong>es f\u00e1cil de aprender: solo necesitas recordar c\u00f3mo funcionan las propiedades float<\/em> <\/strong>y clear<\/em><\/strong>. Desventajas: los elementos flotantes est\u00e1n vinculados al flujo de documentos, lo que puede da\u00f1ar la flexibilidad.<\/p>\n\n\n\n El uso de flexbox<\/strong> garantiza que los elementos se comporten de manera predecible cuando el dise\u00f1o de la p\u00e1gina deba adaptarse a diferentes tama\u00f1os de pantalla y diferentes dispositivos de visualizaci\u00f3n.<\/p>\n\n\n\n El m\u00f3dulo grid CSS<\/strong> ofrece un sistema de dise\u00f1o basado en cuadr\u00edculas, con filas y columnas, lo que facilita el dise\u00f1o de p\u00e1ginas web sin tener que usar floats<\/strong> y posiciones.<\/p>\n","protected":false},"excerpt":{"rendered":" Los sitios web a menudo muestran contenido en varias columnas (como una revista o un peri\u00f3dico).<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":41,"menu_order":41,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-211","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":"Los sitios web a menudo muestran contenido en varias columnas (como una revista o un peri\u00f3dico).","_links":{"self":[{"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/211","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=211"}],"version-history":[{"count":2,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions"}],"predecessor-version":[{"id":214,"href":"https:\/\/sutilweb.eu\/index.php\/wp-json\/wp\/v2\/pages\/211\/revisions\/214"}],"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=211"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"https:\/\/sutilweb.com\/wp-content\/uploads\/2022\/02\/Captura-de-pantalla-2022-02-26-a-las-10.48.04.png\")
<\/figure>\n\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<title>CSS Template<\/title>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<style>\n* {\nbox-sizing: border-box;\n}\n\nbody {\nfont-family: Arial, Helvetica, sans-serif;\n}\n\n\/* Style the header *\/\nheader {\nbackground-color: #666;\npadding: 30px;\ntext-align: center;\nfont-size: 35px;\ncolor: white;\n}\n\n\/* Create two columns\/boxes that floats next to each other *\/\nnav {\nfloat: left;\nwidth: 30%;\nheight: 300px; \/* only for demonstration, should be removed *\/\nbackground: #ccc;\npadding: 20px;\n}\n\n\/* Style the list inside the menu *\/\nnav ul {\nlist-style-type: none;\npadding: 0;\n}\n\narticle {\nfloat: left;\npadding: 20px;\nwidth: 70%;\nbackground-color: #f1f1f1;\nheight: 300px; \/* only for demonstration, should be removed *\/\n}\n\n\/* Clear floats after the columns *\/\nsection::after {\ncontent: \"\";\ndisplay: table;\nclear: both;\n}\n\n\/* Style the footer *\/\nfooter {\nbackground-color: #777;\npadding: 10px;\ntext-align: center;\ncolor: white;\n}\n\n\/* Responsive layout - makes the two columns\/boxes stack\n on top of each other instead of next to each other, on small screens *\/\n@media (max-width: 600px) {\nnav, article {\nwidth: 100%;\nheight: auto;\n}\n}\n<\/style>\n<\/head>\n<body>\n\n<h2>CSS Layout Float<\/h2>\n<p>In this example, we have created a header, two columns\/boxes and a footer.\n On smaller screens, the columns will stack on top of each other.<\/p>\n<p>Resize the browser window to see the responsive effect \n(you will learn more about this in our next chapter - HTML Responsive.)<\/p>\n\n<header>\n<h2>Cities<\/h2>\n<\/header>\n\n<section>\n<nav>\n<ul>\n<li><a href=\"#\">London<\/a><\/li>\n<li><a href=\"#\">Paris<\/a><\/li>\n<li><a href=\"#\">Tokyo<\/a><\/li>\n<\/ul>\n<\/nav>\n\n<article>\n<h1>London<\/h1>\n<p>London is the capital city of England. It is the most populous\n city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.<\/p>\n<p>Standing on the River Thames, London has been a major settlement for two millennia,\n its history going back to its founding by the Romans, who named it Londinium.<\/p>\n<\/article>\n<\/section>\n\n<footer>\n<p>Footer<\/p>\n<\/footer>\n\n<\/body>\n<\/html><\/pre>\n\n\n\nT\u00e9cnicas de dise\u00f1o HTML<\/h2>\n\n\n\n
\n
Frameworks CSS<\/h2>\n\n\n\n
CSS Float Layout<\/h2>\n\n\n\n
CSS Flexbox Layout<\/h2>\n\n\n\n
CSS Grid Layout<\/h2>\n\n\n\n