{"id":36161,"date":"2023-11-04T01:31:34","date_gmt":"2023-11-04T00:31:34","guid":{"rendered":"\/tutoriales\/?p=36161"},"modified":"2026-03-10T16:27:52","modified_gmt":"2026-03-10T15:27:52","slug":"como-hacer-una-pagina-web-en-html","status":"publish","type":"post","link":"\/mx\/tutoriales\/como-hacer-una-pagina-web-en-html\/","title":{"rendered":"C\u00f3mo hacer una p\u00e1gina web en HTML: 7 sencillos pasos"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Crear un sitio web hoy en d&iacute;a es sencillo y no requiere conocimientos de codificaci&oacute;n. Plataformas como WordPress o un <a href=\"\/mx\/creador-de-paginas-web\">creador de sitios web<\/a> ofrecen una interfaz visual sencilla y funciones de arrastrar y soltar para facilitar el proceso de desarrollo.&nbsp;<\/p><p class=\"wp-block-paragraph\">Sin embargo, puede que quieras crear sitios web desde cero con <a href=\"\/mx\/tutoriales\/que-es-html\/\">lenguaje de marcado de hipertexto (HTML)<\/a>. Aunque es m&aacute;s dif&iacute;cil, los sitios web HTML son m&aacute;s flexibles y r&aacute;pidos, ya que necesitan menos recursos para funcionar.&nbsp;<\/p><p class=\"wp-block-paragraph\">Este art&iacute;culo te ense&ntilde;ar&aacute; c&oacute;mo hacer una p&aacute;gina web en HTML. Tambi&eacute;n te proporcionaremos pr&aacute;cticas posteriores al desarrollo para mejorar el aspecto y la funcionalidad de tu sitio HTML.<\/p><figure class=\"wp-block-image size-large\"><a href=\"https:\/\/assets.hostinger.com\/content\/tutorials\/pdf\/Build-Website-In-9-Easy-Steps-ES.pdf\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" width=\"1024\" height=\"283\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-25981\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2022\/12\/eBook-Build-website-ES.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-como-hacer-una-pagina-web-en-html\">C&oacute;mo hacer una p&aacute;gina web en HTML<\/h2><p class=\"wp-block-paragraph\">Esta secci&oacute;n proporcionar&aacute; instrucciones paso a paso para aprender c&oacute;mo hacer una p&aacute;gina web en HTML. Antes de continuar, consulta nuestra <a href=\"\/mx\/tutoriales\/codigos-html-cheat-sheet\/\">hoja de trucos HTML<\/a> si no est&aacute;s familiarizado con el lenguaje de marcado est&aacute;ndar.<\/p><h3 class=\"wp-block-heading\" id=\"h-1-elige-un-editor-de-codigo-html\">1. Elige un editor de c&oacute;digo HTML<\/h3><p class=\"wp-block-paragraph\">Un editor de c&oacute;digo es un software que se utiliza para escribir tu sitio web. Aunque puedes crear una p&aacute;gina HTML con un editor de texto predeterminado como el Bloc de notas, este carece de funciones que ayudan a simplificar el proceso de desarrollo, como:<\/p><ul class=\"wp-block-list\">\n<li><strong>Resaltado de sintaxis:<\/strong> marca las etiquetas HTML en distintos colores seg&uacute;n su categor&iacute;a. Esto hace que la estructura del c&oacute;digo sea m&aacute;s f&aacute;cil de leer y comprender.&nbsp;<\/li>\n\n\n\n<li><strong>Autocompletado:<\/strong> sugiere autom&aacute;ticamente atributos, etiquetas y elementos HTML bas&aacute;ndose en el valor anterior para acelerar el proceso de codificaci&oacute;n.&nbsp;&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Detecci&oacute;n de errores:<\/strong> resalta los errores de sintaxis, lo que permite al desarrollador web advertirlos y corregirlos r&aacute;pidamente.<\/li>\n\n\n\n<li><strong>Integraci&oacute;n: <\/strong>algunos editores de c&oacute;digo se integran con plugins, Git y clientes FTP para hacer m&aacute;s eficiente el proceso de implementaci&oacute;n.&nbsp;<\/li>\n\n\n\n<li><strong>Vista previa en vivo:<\/strong> en lugar de abrir los archivos HTML manualmente en los navegadores, puedes instalar un plugin para obtener una vista previa en vivo del sitio.<\/li>\n<\/ul><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1460\" height=\"751\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-25.png\/w=1024,h=1024,fit=scale-down\" alt=\"Funci&oacute;n de vista previa en Visual Studio Code.\" class=\"wp-image-36331\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-25.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-25.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-25.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-25.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-25.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure><\/div><p class=\"wp-block-paragraph\">Como hay muchas opciones, hemos enumerado algunos de los <a href=\"\/mx\/tutoriales\/mejores-editores-html\/\">mejores editores de c&oacute;digo HTML<\/a> para ayudarte a encontrar uno que se adapte a tus necesidades:<\/p><ul class=\"wp-block-list\">\n<li><strong>Notepad++: <\/strong>un editor de texto ligero y gratuito con funciones a&ntilde;adidas para la codificaci&oacute;n y compatibilidad con plugins.&nbsp;<\/li>\n\n\n\n<li><strong>Atom: <\/strong>un editor HTML de c&oacute;digo abierto con una funci&oacute;n de previsualizaci&oacute;n en vivo del sitio web y una amplia compatibilidad con lenguajes de marcado y scripting.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>Visual Studio Code (VSCode):<\/strong> una popular herramienta para el desarrollo web con una completa biblioteca de extensiones para ampliar sus funcionalidades.&nbsp;<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-2-planifica-el-diseno-del-sitio\">2. Planifica el dise&ntilde;o del sitio<\/h3><p class=\"wp-block-paragraph\">Crear un plan de dise&ntilde;o te permite visualizar mejor el aspecto de tu sitio web. Tambi&eacute;n puedes utilizarlo como lista de control para saber qu&eacute; elementos incluir en tu sitio.&nbsp;<\/p><p class=\"wp-block-paragraph\">Adem&aacute;s, un plan de dise&ntilde;o te ayuda a determinar la usabilidad y la navegaci&oacute;n de tu sitio, que afectan a la experiencia del usuario. Algunos elementos a tener en cuenta en la planificaci&oacute;n son la cabecera, el pie de p&aacute;gina y la navegaci&oacute;n del sitio.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1460\" height=\"580\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-26.png\/w=1024,h=1024,fit=scale-down\" alt=\"Ejemplo de dise&ntilde;o de un sitio.\" class=\"wp-image-36332\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-26.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-26.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-26.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-26.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-26.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure><\/div><p class=\"wp-block-paragraph\">Puedes utilizar l&aacute;piz y papel o un programa de dise&ntilde;o web como <a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noopener\">Figm<\/a><a href=\"https:\/\/www.figma.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">a<\/a> para <a href=\"\/mx\/tutoriales\/como-disenar-una-pagina-web\/\">dise&ntilde;ar un sitio web<\/a>. No tiene por qu&eacute; ser detallado, siempre que represente a grandes rasgos el aspecto y la sensaci&oacute;n de tu sitio.&nbsp;<\/p><h3 class=\"wp-block-heading\" id=\"h-3-escribe-el-codigo-html\">3. Escribe el c&oacute;digo HTML<\/h3><p class=\"wp-block-paragraph\">Una vez que la herramienta y el plan de dise&ntilde;o est&eacute;n listos, puedes empezar a escribir el c&oacute;digo de tu sitio. Los pasos pueden variar dependiendo de tu editor de c&oacute;digo, pero la idea general es similar.&nbsp;<\/p><p class=\"wp-block-paragraph\">En este tutorial, te mostraremos c&oacute;mo hacerlo utilizando <strong>VSCode<\/strong>:<\/p><ol class=\"wp-block-list\">\n<li>Crea una nueva carpeta en tu ordenador. Ser&aacute; el directorio para todos los archivos de tu sitio.&nbsp;<\/li>\n\n\n\n<li>Abre VSCode &rarr; <strong>Archivo<\/strong> &rarr; <strong>Abrir carpeta<\/strong>.<\/li>\n\n\n\n<li>Localiza la nueva carpeta y haz clic en <strong>Seleccionar carpeta<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Selecciona <strong>Archivo -&gt; Nuevo archivo<\/strong>. Nombra el archivo <strong>index.html<\/strong> y pulsa <strong>Intro<\/strong>.&nbsp;<\/li>\n\n\n\n<li>Haz clic en <strong>Crear archivo nuevo<\/strong> para confirmar.&nbsp;<\/li>\n\n\n\n<li>Cuando aparezca la pesta&ntilde;a del editor <strong>index.html<\/strong>, introduce la siguiente estructura b&aacute;sica de documento HTML:<\/li>\n<\/ol><pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt; &lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;\/head&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">Para ayudarte a entender el c&oacute;digo, aqu&iacute; tienes una explicaci&oacute;n de cada etiqueta:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;!DOCTYPE html&gt;<\/strong>: indica a los navegadores web que el sitio web es una p&aacute;gina HTML.<\/li>\n\n\n\n<li><strong>&lt;\/html&gt;<\/strong>: la etiqueta de apertura del documento HTML que indica d&oacute;nde comienza el c&oacute;digo.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;head&gt;<\/strong>: etiqueta que contiene los metadatos del sitio.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;title&gt;<\/strong>: define el texto que se muestra en la pesta&ntilde;a del navegador al visitar la p&aacute;gina web.<\/li>\n\n\n\n<li><strong>&lt;body&gt;<\/strong>: contiene todo el contenido visible de la p&aacute;gina web.&nbsp;<\/li>\n<\/ul><h3 class=\"wp-block-heading\" id=\"h-4-crear-elementos-en-el-diseno\">4. Crear elementos en el dise&ntilde;o<\/h3><p class=\"wp-block-paragraph\">A&ntilde;ade c&oacute;digo HTML en el archivo index.html para crear los elementos de tu dise&ntilde;o previsto. Dependiendo del dise&ntilde;o de tu p&aacute;gina web, necesitar&aacute;s diferentes <a href=\"https:\/\/www.w3schools.com\/html\/html5_semantic_elements.asp\" target=\"_blank\" rel=\"noreferrer noopener\">elementos sem&aacute;nticos HTML<\/a>.&nbsp;<\/p><p class=\"wp-block-paragraph\">Estos elementos separar&aacute;n tu sitio en varias secciones y se convertir&aacute;n en los contenedores del contenido. Estas son las etiquetas que utilizaremos:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;header&gt;<\/strong>: contenedor para el contenido introductorio o la navegaci&oacute;n.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;main&gt;<\/strong>: representa el contenido principal de una p&aacute;gina web.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;div&gt;<\/strong>: define una secci&oacute;n en un documento HTML.&nbsp;<\/li>\n\n\n\n<li><strong>&lt;footer&gt;<\/strong>: contiene el contenido que aparece en la parte inferior de tu p&aacute;gina web.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">Coloca estos elementos dentro de las etiquetas <strong>&lt;body&gt;&lt;\/body&gt;<\/strong> en el c&oacute;digo de tu archivo <strong>index.html<\/strong>. Aseg&uacute;rate de cerrar cada elemento con una etiqueta de cierre, o tu c&oacute;digo no funcionar&aacute;.&nbsp;<\/p><p class=\"wp-block-paragraph\">Este es el aspecto del c&oacute;digo completo:<\/p><pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Personal Blog&lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;\/head&gt;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;&nbsp;&nbsp;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;row\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;post-text-box&rdquo;&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;profile&rdquo;&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/main&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/footer&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre><h3 class=\"wp-block-heading\" id=\"h-5-anade-el-contenido-html\">5. A&ntilde;ade el contenido HTML<\/h3><p class=\"wp-block-paragraph\">Cuando el dise&ntilde;o est&eacute; listo, empieza a rellenarlo con el contenido de tu sitio, como texto, <a href=\"\/mx\/tutoriales\/insertar-imagen-html\/\">im&aacute;genes<\/a>, hiperv&iacute;nculos o videos. Si el contenido no est&aacute; listo, usa contenido ficticio como marcador de posici&oacute;n y sustit&uacute;yelo m&aacute;s tarde.&nbsp;<\/p><p class=\"wp-block-paragraph\">Estas son algunas etiquetas que utilizaremos para a&ntilde;adir el contenido del sitio web:<\/p><ul class=\"wp-block-list\">\n<li><strong>&lt;h1&gt; y &lt;p&gt;<\/strong>: contienen texto de encabezamiento y de p&aacute;rrafo. Usa la etiqueta &lt;br&gt; para crear un salto de l&iacute;nea si el texto es demasiado largo.<\/li>\n\n\n\n<li><strong>&lt;nav&gt; y &lt;a&gt;:<\/strong> especifican la barra de navegaci&oacute;n y su elemento de anclaje. Utiliza el atributo href para especificar la URL enlazada del ancla.&nbsp;&nbsp;<\/li>\n\n\n\n<li><strong>&lt;img&gt;<\/strong>: contenedor para el elemento imagen. Contiene el atributo img src, que especifica el enlace o el nombre del archivo de imagen.&nbsp;<\/li>\n<\/ul><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Consejo Profesional                <\/p>\n            <\/div>\n            <p class=\"protip__content\">La etiqueta tambi&eacute;n tiene un atributo opcional <strong>alt<\/strong>. Describe la imagen en caso de que el archivo no se cargue.<\/p>\n                    <\/div>\n        <\/p><p class=\"wp-block-paragraph\">As&iacute; luce el c&oacute;digo:<\/p><pre class=\"wp-block-code\"><code>&lt;!DOCTYPE html&gt;\n\n&lt;html&gt;\n\n&nbsp;&nbsp;&nbsp;&lt;head&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;title&gt;Personal Blog&lt;\/title&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/head&gt;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&lt;body&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;header&gt;&nbsp;&nbsp;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Your Personal Blog&lt;\/h1&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;nav&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;domain.tld\/home&rdquo;&gt;Home&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;domain.tld\/blog&rdquo;&gt;Blog&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;domain.tld\/about&rdquo;&gt;About&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/nav&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/header&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;main&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;row\"&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;post-text-box&rdquo;&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;Newest Post&lt;\/h1&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;section&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;First Post&lt;\/h1&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;The first post&rsquo;s content&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/section&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div class=&rdquo;profile&rdquo;&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;h1&gt;About Me&lt;\/h1&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;img src=&rdquo;profile-picture.png&rdquo;&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;p&gt;About the author&lt;\/p&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/div&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/main&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;footer&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;twitter.com\/author&rdquo;&gt;Twitter&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;facebook.com\/author&rdquo;&gt;Facebook&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;a href=&rdquo;instagram.com\/author&rdquo;&gt;Instagram&lt;\/a&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/footer&gt;\n\n&nbsp;&nbsp;&nbsp;&nbsp;&lt;\/body&gt;\n\n&lt;\/html&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">Despu&eacute;s de a&ntilde;adir el c&oacute;digo, tu sitio web HTML tendr&aacute; un aspecto, luce as&iacute;:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"1460\" height=\"623\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-30.png\/public\" alt=\"Ejemplo de c&oacute;mo se ve una p&aacute;gina HTML inicial.\" class=\"wp-image-36343\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-30.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-30.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-30.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-30.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-30.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure><\/div><h3 class=\"wp-block-heading\" id=\"h-6-incluye-css-de-diseno\">6. Incluye CSS de dise&ntilde;o<\/h3><p class=\"wp-block-paragraph\">Como HTML solo te permite crear la estructura del sitio web y a&ntilde;adir contenido b&aacute;sico, utiliza <a href=\"\/mx\/tutoriales\/que-es-css\/\">Hojas de Estilo en Cascada (CSS)<\/a> para cambiar su dise&ntilde;o. CSS es un lenguaje que define el estilo de tu documento HTML.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para ello, crea un archivo <strong>style.css<\/strong> y enlaza la hoja de estilos al documento HTML a&ntilde;adiendo el siguiente c&oacute;digo entre las etiquetas de apertura y cierre <strong>&lt;head&gt;<\/strong> de <strong>index.html<\/strong>:&nbsp;<\/p><pre class=\"wp-block-code\"><code>&lt;link rel=\"hoja de estilo\" href=\"style.css\"&gt;<\/code><\/pre><p class=\"wp-block-paragraph\">Para realizar el dise&ntilde;o del sitio web a dos columnas, utilizaremos la propiedad <strong>flex<\/strong>. Esta organiza los elementos HTML mediante contenedores flexibles, permitiendo que se ajusten al tama&ntilde;o de la pantalla de los usuarios.&nbsp;<\/p><p class=\"wp-block-paragraph\">Este es el aspecto del c&oacute;digo completo:<\/p><pre class=\"wp-block-code\"><code>\/*header style*\/\n\nheader {\n\n&nbsp;&nbsp;&nbsp;text-align: center;&nbsp;\n\n&nbsp;&nbsp;&nbsp;padding: 20px;\n\n}\n\n\/*navigation menu style*\/\n\nnav {\n\n&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;word-spacing: 30px;\n\n&nbsp;&nbsp;&nbsp;Padding: 10px;\n\n}\n\n\/*creating the two-column layout*\/\n\n*{\n\n&nbsp;&nbsp;&nbsp;box-sizing: border-box;\n\n}\n\n.row {\n\n&nbsp;&nbsp;&nbsp;display: flex;\n\n&nbsp;&nbsp;&nbsp;flex-wrap: wrap;\n\n}\n\n.post-text-box {\n\n&nbsp;&nbsp;&nbsp;flex: 70%;\n\n&nbsp;&nbsp;&nbsp;padding: 20px;\n\n}\n\n.profile {\n\n&nbsp;&nbsp;&nbsp;flex: 70%;\n\n&nbsp;&nbsp;&nbsp;padding: 20px;\n\n}\n\n\/*profile image and heading style*\/\n\n.profile img {\n\n&nbsp;&nbsp;&nbsp;width: 120px;\n\n&nbsp;&nbsp;&nbsp;display: block;\n\n&nbsp;&nbsp;&nbsp;margin-left: 0;\n\n&nbsp;&nbsp;&nbsp;margin-right: 0;\n\n}\n\n.profile h1 {\n\n&nbsp;&nbsp;&nbsp;text-align: center;\n\n}<\/code><\/pre><p class=\"wp-block-paragraph\">Despu&eacute;s de a&ntilde;adir el fragmento de c&oacute;digo a tu archivo CSS, este es el aspecto que tendr&aacute; el sitio web:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" width=\"1460\" height=\"588\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-29.png\/public\" alt=\"\" class=\"wp-image-36342\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-29.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-29.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-29.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-29.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-29.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure><\/div><p class=\"wp-block-paragraph\">        <div class=\"protip\">\n            <div class=\"protip__heading\">\n                <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n                    <path d=\"M1.49234 23.5024C1.23229 23.5024 0.972242 23.4024 0.782206 23.2123C0.562165 22.9923 0.452144 22.6822 0.502153 22.3722C0.562165 21.9221 1.14227 17.9113 3.00262 16.351C3.63274 15.8209 4.43289 15.5509 5.26305 15.5609C6.09321 15.5909 6.87335 15.9109 7.47347 16.4911C8.6937 17.6913 8.76371 19.6717 7.6435 20.9919C6.0832 22.8523 2.08245 23.4324 1.63237 23.4924C1.59236 23.4924 1.54235 23.4924 1.50234 23.4924L1.49234 23.5024ZM5.16303 17.5613C4.84297 17.5613 4.53291 17.6713 4.29287 17.8813C3.60274 18.4614 3.07264 19.9317 2.75258 21.242C4.06282 20.9219 5.5331 20.3918 6.11321 19.7017C6.55329 19.1716 6.54329 18.3814 6.0832 17.9213C5.85316 17.7013 5.5431 17.5713 5.20304 17.5613C5.19304 17.5613 5.17303 17.5613 5.16303 17.5613ZM11.7243 21.8821C11.4942 21.8821 11.2642 21.8021 11.0841 21.652C10.8541 21.462 10.7241 21.1819 10.7241 20.8819V15.9109L8.08358 13.2705H3.11264C2.81259 13.2705 2.53254 13.1404 2.3425 12.9104C2.15246 12.6803 2.07245 12.3803 2.12246 12.0902C2.19247 11.7102 2.84259 8.36953 4.70294 7.12929C6.33325 6.04909 8.96375 6.49918 10.244 6.80923C11.5442 4.96889 13.2546 3.4286 15.2349 2.33839C17.4553 1.11816 19.9858 0.518051 22.4963 0.498047C23.0464 0.498047 23.4865 0.948132 23.4865 1.49824C23.4865 5.0389 22.3763 9.97983 17.1753 13.7605C17.4853 15.0408 17.9354 17.6613 16.8552 19.2816C15.615 21.1419 12.2744 21.7921 11.8943 21.8621C11.8343 21.8721 11.7743 21.8821 11.7143 21.8821H11.7243ZM12.7245 16.181V19.6016C13.7146 19.2916 14.7948 18.7915 15.2049 18.1814C15.675 17.4812 15.605 16.091 15.385 14.9008C14.5248 15.3808 13.6346 15.8109 12.7245 16.181ZM9.66388 12.0302L11.9643 14.3307C13.1845 13.8306 14.3648 13.2204 15.485 12.5103C19.9358 9.51974 21.2361 5.60901 21.4561 2.53843C19.6157 2.67846 17.8254 3.20856 16.2051 4.09872C14.2847 5.14892 12.6544 6.68921 11.4942 8.54956C10.7841 9.65977 10.174 10.82 9.66388 12.0302ZM4.39289 11.2701H7.81353C8.1936 10.3599 8.63368 9.46974 9.11377 8.60957C7.92355 8.38953 6.51329 8.31952 5.81315 8.78961C5.19304 9.19968 4.70294 10.3099 4.39289 11.2701Z\" fill=\"#673DE6\"\/>\n                <\/svg>\n                <p class=\"protip__title\">\n                    Lectura sugerida                <\/p>\n            <\/div>\n            <p class=\"protip__content\">Conoce los <a href=\"\/mx\/tutoriales\/tipos-de-estilos-css\/\">diferentes tipos de CSS<\/a>, incluyendo en l&iacute;nea, externo e interno.<\/p>\n                    <\/div>\n        <\/p><h3 class=\"wp-block-heading\" id=\"h-7-personaliza-tu-sitio\">7. Personaliza tu sitio<\/h3><p class=\"wp-block-paragraph\">Adem&aacute;s de cambiar el dise&ntilde;o, utiliza CSS para personalizar otros aspectos visuales de tu sitio web. Por ejemplo, puedes <a href=\"\/mx\/tutoriales\/mejores-fuentes-html\/\">cambiar la familia de fuentes<\/a> y la imagen de fondo.&nbsp;<\/p><p class=\"wp-block-paragraph\">Para cambiar la apariencia de tu sitio web, a&ntilde;ade las propiedades CSS en el elemento que quieras personalizar. Por ejemplo, &eacute;ste es el c&oacute;digo para dar estilo al color de fondo y a los elementos de texto de la barra del men&uacute; de navegaci&oacute;n:&nbsp;<\/p><pre class=\"wp-block-code\"><code>\/*navigation bar style*\/\n\nnav {\n\n&nbsp;&nbsp;&nbsp;text-align: center;\n\n&nbsp;&nbsp;&nbsp;word-spacing: 30px;\n\n&nbsp;&nbsp;&nbsp;padding: 10px;\n\n&nbsp;&nbsp;&nbsp;background-color: #f5f5dc\n\n&nbsp;&nbsp;&nbsp;font-family: Helvetica;\n\n}\n\n\/*navigation bar button style*\/\n\nnav a {\n\n&nbsp;&nbsp;&nbsp;color: #000000;\n\n&nbsp;&nbsp;&nbsp;text-decoration: none;\n\n&nbsp;&nbsp;&nbsp;font-size: larger;\n\n}<\/code><\/pre><p class=\"wp-block-paragraph\">Despu&eacute;s de a&ntilde;adir estilos CSS a cada elemento, este es el aspecto del sitio web:<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" width=\"1460\" height=\"572\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-27.png\/w=1024,h=1024,fit=scale-down\" alt=\"Ejemplo de p&aacute;gina web HTML tras a&ntilde;adir estilos CSS.\" class=\"wp-image-36335\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-27.png\/w=1460,fit=scale-down 1460w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-27.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-27.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-27.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-27.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 1460px) 100vw, 1460px\" \/><\/figure><\/div><h2 class=\"wp-block-heading\" id=\"h-pasos-a-seguir-tras-crear-una-pagina-web-en-html\">Pasos a seguir tras crear una p&aacute;gina web en HTML<\/h2><p class=\"wp-block-paragraph\">En esta secci&oacute;n se explican los pasos a seguir despu&eacute;s de crear un sitio web utilizando HTML y CSS. Estos pasos har&aacute;n que tu sitio web sea accesible y m&aacute;s funcional.<\/p><p class=\"wp-block-paragraph\"><strong>Aloja el sitio en la plataforma adecuada<\/strong><\/p><p class=\"wp-block-paragraph\">Para que tu sitio web sea accesible a trav&eacute;s de Internet, usa un servicio de hosting web. Muchos proveedores de hosting tienen diferentes planes que se adaptan a las distintas necesidades de los usuarios.&nbsp;<\/p><p class=\"wp-block-paragraph\">Como las p&aacute;ginas web HTML son ligeras y necesitan pocos recursos para cargarse, basta con un <a href=\"\/mx\/hosting-web\">plan de hosting<\/a> compartido.&nbsp;<\/p><p class=\"wp-block-paragraph\">Como alternativa, utiliza una plataforma gratuita de alojamiento de sitios est&aacute;ticos como <a href=\"https:\/\/pages.github.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">GitHub Pages<\/a>. Sin embargo, evita las plataformas de alojamiento est&aacute;tico gratuito si piensas a&ntilde;adir m&aacute;s c&oacute;digo o hacer que tu sitio sea din&aacute;mico. Aparte de posibles problemas de compatibilidad, sus limitados recursos de servidor pueden ralentizar tu sitio web.&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>A&ntilde;ade una barra desplegable para mejorar la navegaci&oacute;n<\/strong><\/p><p class=\"wp-block-paragraph\">Los sitios web complejos con varias p&aacute;ginas tienen muchos botones de navegaci&oacute;n, enlaces y textos. Puedes <a href=\"\/mx\/tutoriales\/crear-un-menu-horizontal-simple-css\/\">crear un sencillo men&uacute; desplegable utilizando CSS<\/a> para agrupar estos elementos.&nbsp;<\/p><div class=\"wp-block-image\"><figure class=\"aligncenter size-full\"><img decoding=\"async\" width=\"950\" height=\"405\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-28.png\/public\" alt=\"Ejemplo de men&uacute; CSS.\" class=\"wp-image-36336\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-28.png\/w=950,fit=scale-down 950w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-28.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-28.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/11\/image-28.png\/w=768,fit=scale-down 768w\" sizes=\"(max-width: 950px) 100vw, 950px\" \/><\/figure><\/div><p class=\"wp-block-paragraph\">Los usuarios pueden expandir la barra de navegaci&oacute;n para acceder a los elementos. Esto ayuda a reducir el desorden y mejora la usabilidad del sitio web para los usuarios con pantallas m&aacute;s peque&ntilde;as.&nbsp;&nbsp;<\/p><p class=\"wp-block-paragraph\"><strong>Mejora el dise&ntilde;o del sitio con CSS avanzado<\/strong><\/p><p class=\"wp-block-paragraph\">CSS te permite realizar personalizaciones avanzadas para mejorar el dise&ntilde;o de tu sitio web y ofrecer una mejor experiencia al usuario. Por ejemplo, activa el ajuste de desplazamiento, la animaci&oacute;n de texto, la animaci&oacute;n de zoom al pasar el rat&oacute;n y los degradados.&nbsp;<\/p><p class=\"wp-block-paragraph\">Adem&aacute;s, puedes crear un sitio web adaptable con consultas de medios, reglas CSS y flexboxes. El dise&ntilde;o flexbox adapta autom&aacute;ticamente tu sitio al tama&ntilde;o de la pantalla del cliente.<\/p><p class=\"wp-block-paragraph\"><strong>Haz el sitio m&aacute;s interactivo con JavaScript<\/strong><\/p><p class=\"wp-block-paragraph\">JavaScript es un lenguaje de programaci&oacute;n que te permite crear contenidos interactivos y din&aacute;micos para tu sitio web. Por ejemplo, activar animaciones, a&ntilde;adir cuentas atr&aacute;s e incluir botones, formularios o men&uacute;s.&nbsp;<\/p><p class=\"wp-block-paragraph\">Estas funciones hacen que tu sitio web sea m&aacute;s interesante e inmersivo, mejorando la experiencia del usuario. Los pasos para <a href=\"\/mx\/tutoriales\/insertar-javascript-en-html\/\">a&ntilde;adir JavaScript a tu sitio web HTML<\/a> son similares a los de CSS. Puedes utilizar un archivo independiente o escribirlo directamente en el c&oacute;digo actual.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-necesitas-aprender-html-para-crear-una-pagina-web\">&iquest;Necesitas aprender HTML para crear una p&aacute;gina web?<\/h2><p class=\"wp-block-paragraph\">Los usuarios pueden no tener el tiempo o el compromiso de aprender HTML para el desarrollo web. Afortunadamente, algunas plataformas les permiten crear un sitio web funcional sin escribir c&oacute;digo.<\/p><p class=\"wp-block-paragraph\">Un creador de sitios web como Hostinger es una excelente opci&oacute;n para principiantes. Tiene una interfaz de usuario visual y un editor de arrastrar y soltar, lo que facilita la personalizaci&oacute;n.<\/p><p class=\"wp-block-paragraph\">El mantenimiento de un sitio web basado en un constructor tambi&eacute;n es m&aacute;s sencillo y menos propenso a errores, ya que no es necesario actualizar manualmente su c&oacute;digo fuente. Basta con seleccionar los elementos que deseas editar y aplicar los cambios directamente en una pantalla.<\/p><p class=\"wp-block-paragraph\">Como el creador de sitios web de Hostinger est&aacute; incluido en todos nuestros planes de hosting, no es necesario adquirir el servicio por separado. Comienza a partir de <strong>MX$ 24.99\/mes<\/strong> y es actualizable a servicios de alojamiento de mayor rendimiento.<\/p><figure class=\"wp-block-image size-large\"><a href=\"\/mx\/creador-de-paginas-web\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" width=\"1024\" height=\"300\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner.png\/w=1024,h=1024,fit=scale-down\" alt=\"\" class=\"wp-image-29282\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/39\/2023\/02\/ES-Website-Builder_in-text-banner.png\/w=1536,fit=scale-down 1536w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure><h2 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusi&oacute;n<\/h2><p class=\"wp-block-paragraph\">En lugar de utilizar plataformas como WordPress o creadores de sitios web, puedes programar un sitio web desde cero con HTML. Aunque son m&aacute;s complicados de crear, los sitios web HTML son m&aacute;s flexibles y consumen menos recursos, ya que puedes editar el c&oacute;digo fuente.<\/p><p class=\"wp-block-paragraph\">En este art&iacute;culo, hemos explicado c&oacute;mo codificar un sitio web usando HTML y CSS en siete pasos:<\/p><ol class=\"wp-block-list\">\n<li><strong>Elige un editor HTML:<\/strong> escoge el programa para escribir y editar el c&oacute;digo de tu sitio web, como VSCode.&nbsp;<\/li>\n\n\n\n<li><strong>Planifica el dise&ntilde;o del sitio:<\/strong> haz una maqueta del dise&ntilde;o del sitio web utilizando un programa como Adobe XD o un bol&iacute;grafo y papel.&nbsp;<\/li>\n\n\n\n<li><strong>Escribe el c&oacute;digo HTML: <\/strong>crea un archivo index.html y a&ntilde;ade etiquetas de estructura de documento HTML.<\/li>\n\n\n\n<li><strong>Crea los elementos de dise&ntilde;o:<\/strong> separa tu sitio web en varias secciones en funci&oacute;n del dise&ntilde;o a&ntilde;adiendo etiquetas al archivo HTML.<\/li>\n\n\n\n<li><strong>A&ntilde;ade el contenido HTML:<\/strong>&nbsp;agrega el t&iacute;tulo del encabezado, el cuerpo del texto y las im&aacute;genes en cada secci&oacute;n.<\/li>\n\n\n\n<li><strong>Incluye CSS de dise&ntilde;o: <\/strong>crea un archivo style.css y a&ntilde;ade c&oacute;digo CSS para cambiar la posici&oacute;n de las columnas, la alineaci&oacute;n del texto y el relleno de los elementos.<\/li>\n\n\n\n<li><strong>Personaliza tu sitio:<\/strong> utiliza atributos de estilo CSS para personalizar el color de fondo del sitio web, el tama&ntilde;o de la fuente, los tipos de letra y otros elementos visuales.&nbsp;&nbsp;<\/li>\n<\/ol><p class=\"wp-block-paragraph\">Despu&eacute;s de crear tu p&aacute;gina web HTML, puedes a&ntilde;adir CSS y JavaScript avanzados para mejorar la navegaci&oacute;n, la interactividad y el dise&ntilde;o general. Para que el sitio sea accesible en l&iacute;nea, utiliza un servicio de alojamiento como Hostinger.&nbsp;<\/p><h2 class=\"wp-block-heading\" id=\"h-preguntas-frecuentes-sobre-como-hacer-una-pagina-web-en-html\">Preguntas frecuentes sobre c&oacute;mo hacer una p&aacute;gina web en HTML <\/h2><p class=\"wp-block-paragraph\">Para ayudarte a comprender mejor la creaci&oacute;n de un sitio web con HTML, responderemos a algunas preguntas frecuentes al respecto.<\/p><div id=\"rank-math-faq\" class=\"rank-math-block\">\n<div class=\"rank-math-list \">\n<div id=\"faq-question-69446dfb9ead3\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Basta con HTML para crear un sitio web?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&iacute;, puedes crear un sitio web funcional solo con HTML. Sin embargo, solo muestra contenido est&aacute;tico como texto, enlaces, im&aacute;genes y videos.&nbsp;u003cbr \/u003eu003cbr \/u003eUtiliza CSS para dar estilo al elemento HTML, como cambiar el color de fondo y el tama&ntilde;o de la fuente. Para crear un sitio web din&aacute;mico e interactivo, tambi&eacute;n necesitas PHP.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446dfb9ead6\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;El HTML es bueno para crear sitios web?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>S&iacute;, es bueno para crear un sitio web est&aacute;tico. Los sitios web HTML necesitan menos recursos para cargarse y son flexibles, ya que puedes modificar el c&oacute;digo fuente.u003cbr \/u003eu003cbr \/u003eSin embargo, HTML solo es adecuado para sitios web complejos si se combina con CSS y JavaScript. Si s&oacute;lo est&aacute;s aprendiendo HTML, es mejor que utilices WordPress.<\/p>\n\n<\/div>\n<\/div>\n<div id=\"faq-question-69446dfb9ead7\" class=\"rank-math-list-item\">\n<h3 class=\"rank-math-question \">&iquest;Cu&aacute;nto se tarda en programar un sitio web en HTML?<\/h3>\n<div class=\"rank-math-answer \">\n\n<p>Los sitios web m&aacute;s complejos tardar&aacute;n m&aacute;s en crearse. El n&uacute;mero de desarrolladores web que trabajen en el proyecto, sus habilidades y recursos tambi&eacute;n pueden afectar al tiempo de creaci&oacute;n. Por lo general, un desarrollador experimentado puede programar un sitio web sencillo desde cero en cuatro a seis semanas.<\/p>\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Crear un sitio web hoy en d&iacute;a es sencillo y no requiere conocimientos de codificaci&oacute;n. Plataformas como WordPress o un creador de sitios web ofrecen una interfaz visual sencilla y funciones de arrastrar y soltar para facilitar el proceso de desarrollo.&nbsp; Sin embargo, puede que quieras crear sitios web desde cero con lenguaje de marcado [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/mx\/tutoriales\/como-hacer-una-pagina-web-en-html\/\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":329,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"C\u00f3mo hacer una p\u00e1gina web en HTML (7 pasos)","rank_math_description":"Conoce los 7 pasos para hacer una p\u00e1gina web en HTML: 1. Elige un editor de c\u00f3digo HTML 2. Planifica el dise\u00f1o del sitio y m\u00e1s.","rank_math_focus_keyword":"c\u00f3mo hacer una p\u00e1gina web en html","footnotes":""},"categories":[14371],"tags":[14452],"class_list":["post-36161","post","type-post","status-publish","format-standard","hentry","category-produccion","tag-como-hacer-una-pagina-web-en-html"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/making-website-with-html\/","default":1},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/site-html\/","default":0},{"locale":"fr-FR","link":"https:\/\/www.hostinger.com\/fr\/tutoriels\/comment-creer-page-web-html\/","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"id-ID","link":"https:\/\/www.hostinger.com\/id\/tutorial\/cara-membuat-website-dengan-html\/","default":0},{"locale":"de-DE","link":"https:\/\/www.hostinger.com\/de\/tutorials\/website-mit-html-erstellen\/","default":0},{"locale":"it-IT","link":"https:\/\/www.hostinger.com\/it\/tutorial\/realizzazione-di-un-sito-web-con-html\/","default":0},{"locale":"nl-NL","link":"https:\/\/www.hostinger.com\/nl\/tutorials\/website-maken-met-html\/","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-GB","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/making-website-with-html\/","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/making-website-with-html\/","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/como-hacer-una-pagina-web-en-html\/","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/site-html\/","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/36161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/users\/329"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/comments?post=36161"}],"version-history":[{"count":14,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/36161\/revisions"}],"predecessor-version":[{"id":46634,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/posts\/36161\/revisions\/46634"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/media?parent=36161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/categories?post=36161"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/mx\/tutoriales\/wp-json\/wp\/v2\/tags?post=36161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}