Mauriz

¿Qué se necesita para crear una página web en HTML?

Si estás interesado en crear tu propia página web, seguramente ya has oído hablar de HTML. HTML (Hypertext Markup Language) es el lenguaje de marcado estándar utilizado para crear páginas web. Con HTML, puedes estructurar y dar formato al contenido de tu página, agregar imágenes, videos y enlaces, y mucho más.

En este artículo, te explicaremos los elementos básicos que necesitas para comenzar a crear tu propia página web en HTML. Desde las herramientas necesarias hasta la estructura básica de una página web y las etiquetas HTML más comunes, te proporcionaremos una introducción completa a la creación de páginas web en HTML.

Índice
  1. Herramientas necesarias
  2. Estructura básica de una página web en HTML
  3. Etiquetas HTML
  4. CSS
  5. Recursos y referencias
    1. Preguntas relacionadas:
    2. 1. ¿Cuáles son las ventajas de utilizar HTML para crear páginas web?
    3. 2. ¿Necesito conocer otros lenguajes de programación además de HTML para crear una página web?

Herramientas necesarias

Para comenzar a crear páginas web en HTML, necesitarás algunas herramientas básicas:

  1. Editor de texto: Necesitarás un editor de texto para escribir tu código HTML. Puedes utilizar cualquier editor de texto simple, como Bloc de notas en Windows o TextEdit en Mac. También hay editores de texto específicos para HTML, como Sublime Text o Visual Studio Code, que ofrecen características adicionales para facilitar la codificación.
  2. Navegador web: Necesitarás tener un navegador web instalado en tu computadora para ver y probar tus páginas web en HTML. Los navegadores populares incluyen Google Chrome, Mozilla Firefox y Microsoft Edge.

Estructura básica de una página web en HTML

Todas las páginas web en HTML tienen una estructura básica similar. Aquí tienes un ejemplo de una estructura básica:

```html



Título de la página

Título principal de la página

Este es un párrafo de ejemplo.



```

Veamos los elementos clave de esta estructura:

  • : Esta línea especifica la versión de HTML que estás utilizando, en este caso, HTML5.
  • ```html```: Esta etiqueta indica el inicio del documento HTML.
  • : Esta etiqueta envuelve todo el contenido de la página web.
  • : Esta etiqueta contiene información adicional sobre la página web, como el título que aparece en la pestaña del navegador.
  • </b>: Esta etiqueta define el título de la página web.</li><li><b><body></b>: Esta etiqueta contiene el contenido visible de la página web, como encabezados, párrafos, imágenes y enlaces.</li></ul><h2 id="Etiquetas_HTML">Etiquetas HTML</h2><p>HTML utiliza etiquetas para estructurar y dar formato al contenido de una página web. Aquí hay algunas etiquetas HTML comunes:</p><ul><li><b><br /><h1></b> - <b></p><h6></b>:</b> Estas etiquetas se utilizan para definir encabezados de diferentes niveles.</li><li><b><p></b>:</b> Esta etiqueta se utiliza para crear párrafos de texto.</li><li><b><ul></b> y <b></p><ol></b>:</b> Estas etiquetas se utilizan para crear listas sin ordenar y listas ordenadas, respectivamente.</li><li><b><a></b>:</b> Esta etiqueta se utiliza para crear enlaces a otras páginas web o archivos.</li><li><b><img loading="lazy"></b>:</b> Esta etiqueta se utiliza para insertar imágenes en una página web.</li><li><b><br /><table></b>:</b> Esta etiqueta se utiliza para crear tablas.</li><li><b><br /><form></b>:</b> Esta etiqueta se utiliza para crear formularios interactivos, como campos de texto, botones y casillas de verificación.</li><li><b><video></b> y <b><audio></b>:</b> Estas etiquetas se utilizan para insertar contenido multimedia, como videos y audio en una página web.</li></ul><p>Estas son solo algunas de las etiquetas HTML más comunes. Hay muchas más etiquetas disponibles para diferentes propósitos. A medida que te familiarices con HTML, podrás explorar y utilizar otras etiquetas según tus necesidades.</p><h2 id="CSS">CSS</h2><p>CSS (Cascading Style Sheets) es un lenguaje utilizado para dar estilo y diseño a las páginas web en HTML. Con CSS, puedes controlar la apariencia de los elementos HTML, como el color, el tamaño, la fuente y el posicionamiento. Aunque el CSS es un tema más amplio y complejo, es importante mencionarlo aquí, ya que la combinación de HTML y CSS es fundamental para crear páginas web visualmente atractivas.</p><h2 id="Recursos_y_referencias">Recursos y referencias</h2><p>Si estás interesado en aprender más sobre la creación de páginas web en HTML, aquí tienes algunos recursos y referencias adicionales:</p><ul><li><b>Tutoriales en línea:</b> Hay muchos tutoriales gratuitos en línea que cubren los fundamentos de HTML y proporcionan ejemplos prácticos. Algunos sitios recomendados son W3Schools y MDN Web Docs.</li><li><b>Documentación oficial de HTML:</b> La especificación oficial de HTML está disponible en el sitio web del World Wide Web Consortium (W3C). Puedes consultar la documentación para obtener información detallada sobre todas las etiquetas y atributos de HTML.</li><li><b>Ejemplos prácticos:</b> Explorar y estudiar ejemplos prácticos de páginas web en HTML puede ser una excelente manera de aprender y familiarizarse con las mejores prácticas de codificación.</li></ul><p>¡Ahora estás listo para comenzar a crear tus propias páginas web en HTML! Recuerda practicar con ejemplos y experimentar para mejorar tus habilidades. Con paciencia y perseverancia, podrás crear páginas web sorprendentes y funcionales.</p><h3 id="Preguntas_relacionadas:">Preguntas relacionadas:</h3><h3 id="1._¿Cuáles_son_las_ventajas_de_utilizar_HTML_para_crear_páginas_web?">1. ¿Cuáles son las ventajas de utilizar HTML para crear páginas web?</h3><p>HTML es un lenguaje estructurado que permite organizar y formatear el contenido de una página web de manera clara y coherente. Además, HTML es compatible con la mayoría de los navegadores web y es fácil de aprender y utilizar.</p><h3 id="2._¿Necesito_conocer_otros_lenguajes_de_programación_además_de_HTML_para_crear_una_página_web?">2. ¿Necesito conocer otros lenguajes de programación además de HTML para crear una página web?</h3><p>Si bien HTML es el lenguaje principal utilizado para estructurar el contenido de una página web, es recomendable tener conocimientos básicos de CSS para dar estilo y diseño a la página. También es útil tener conocimientos básicos de JavaScript para agregar interactividad a través de eventos y funciones.</p><div class="relpost-thumb-wrapper"><div class="relpost-thumb-container"><h4>Relacionados</h4><div style="clear: both"></div><div style="clear: both"></div><div class="relpost-block-container"><a href="https://www.mauriz.es/blog/es-el-diseno-web-un-buen-negocio-para-empezar/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Es el diseño web un buen negocio para empezar?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/es-el-diseno-web-un-buen-negocio-para-empezar-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Es el diseño web un buen negocio para empezar?</div></div></a><a href="https://www.mauriz.es/blog/dicas-essenciais-para-se-comunicar-na-internet-em-ingles/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="Dicas essenciais para se comunicar na internet em inglês" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/dicas-essenciais-para-se-comunicar-na-internet-em-ingles-150x150.png) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">Dicas essenciais para se comunicar na internet em inglês</div></div></a><a href="https://www.mauriz.es/blog/puedo-ser-desarrollador-web-sin-titulo/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Puedo ser desarrollador web sin título?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/puedo-ser-desarrollador-web-sin-titulo-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Puedo ser desarrollador web sin título?</div></div></a><a href="https://www.mauriz.es/blog/it-works-espana-opiniones/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="Experiencias Reales: Opiniones y Reseñas de It Works en España" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/it-works-espana-opiniones-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">Experiencias Reales: Opiniones y Reseñas de It Works en España</div></div></a><a href="https://www.mauriz.es/blog/level-up-opiniones/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="Level Up Opiniones: Análisis Detallado y Experiencias Reales de Usuarios" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/level-up-opiniones-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">Level Up Opiniones: Análisis Detallado y Experiencias Reales de Usuarios</div></div></a><a href="https://www.mauriz.es/blog/como-exporto-una-plantilla-de-canva/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Cómo exporto una plantilla de Canva?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/como-exporto-una-plantilla-de-canva-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Cómo exporto una plantilla de Canva?</div></div></a><a href="https://www.mauriz.es/blog/concepto-de-la-experiencia-de-usuario-que-es-y-como-aplicarlo/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="Concepto de la experiencia de usuario: ¿qué es y cómo aplicarlo?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/concepto-de-la-experiencia-de-usuario-que-es-y-como-aplicarlo-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">Concepto de la experiencia de usuario: ¿qué es y cómo aplicarlo?</div></div></a><a href="https://www.mauriz.es/blog/cuanto-tiempo-lleva-aprender-a-desarrollar-front-end/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Cuánto tiempo lleva aprender a desarrollar front-end?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/cuanto-tiempo-lleva-aprender-a-desarrollar-front-end-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Cuánto tiempo lleva aprender a desarrollar front-end?</div></div></a><a href="https://www.mauriz.es/blog/que-necesito-para-ser-disenador-web/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Qué necesito para ser diseñador web?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/que-necesito-para-ser-disenador-web-150x150.png) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Qué necesito para ser diseñador web?</div></div></a><a href="https://www.mauriz.es/blog/cuanto-cuesta-el-desarrollo-de-una-pagina-web/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Cuánto cuesta el desarrollo de una página web?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/cuanto-cuesta-el-desarrollo-de-una-pagina-web-150x150.png) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Cuánto cuesta el desarrollo de una página web?</div></div></a><a href="https://www.mauriz.es/blog/cual-es-la-mejor-plataforma-para-aprender-desarrollo-web/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Cuál es la mejor plataforma para aprender desarrollo web?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/cual-es-la-mejor-plataforma-para-aprender-desarrollo-web-150x150.png) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Cuál es la mejor plataforma para aprender desarrollo web?</div></div></a><a href="https://www.mauriz.es/blog/como-ser-desarrollador-web-en-7-pasos/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Cómo ser desarrollador web en 7 pasos?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/como-ser-desarrollador-web-en-7-pasos-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Cómo ser desarrollador web en 7 pasos?</div></div></a><a href="https://www.mauriz.es/blog/en-que-plataforma-se-ejecuta-html/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿En qué plataforma se ejecuta HTML?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/en-que-plataforma-se-ejecuta-html-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿En qué plataforma se ejecuta HTML?</div></div></a><a href="https://www.mauriz.es/blog/quien-gana-mas-desarrollador-web-o-disenador-ux/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Quién gana más desarrollador web o diseñador UX?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/quien-gana-mas-desarrollador-web-o-disenador-ux-150x150.png) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Quién gana más desarrollador web o diseñador UX?</div></div></a><a href="https://www.mauriz.es/blog/puedes-aprender-diseno-web-por-tu-cuenta/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Puedes aprender diseño web por tu cuenta?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/puedes-aprender-diseno-web-por-tu-cuenta-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Puedes aprender diseño web por tu cuenta?</div></div></a><a href="https://www.mauriz.es/blog/descubre-el-mundo-virtual-experiencias-fascinantes-y-como-funciona/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="Descubre el Mundo Virtual: Experiencias fascinantes y cómo funciona" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/05/descubre-el-mundo-virtual-experiencias-fascinantes-y-como-funciona-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">Descubre el Mundo Virtual: Experiencias fascinantes y cómo funciona</div></div></a><a href="https://www.mauriz.es/blog/que-programa-necesitas-para-escribir-html/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Qué programa necesitas para escribir HTML?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/que-programa-necesitas-para-escribir-html-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Qué programa necesitas para escribir HTML?</div></div></a><a href="https://www.mauriz.es/blog/quien-gana-mas-disenador-web-o-desarrollador-web/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Quién gana más diseñador web o desarrollador web?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/quien-gana-mas-disenador-web-o-desarrollador-web-150x150.png) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Quién gana más diseñador web o desarrollador web?</div></div></a><a href="https://www.mauriz.es/blog/mundo-virtual-significado-y-caracteristicas-descubrelo-ahora/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="Mundo Virtual: Significado y Características - ¡Descubrelo Ahora!" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/mundo-virtual-significado-y-caracteristicas-descubrelo-ahora-150x150.jpg) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">Mundo Virtual: Significado y Características - ¡Descubrelo Ahora!</div></div></a><a href="https://www.mauriz.es/blog/donde-aprender-desarrollo-web-gratis/"class="relpost-block-single" ><div class="relpost-custom-block-single" style="width: 150px; height: 225px;"><div class="relpost-block-single-image" alt="¿Dónde aprender desarrollo web gratis?" style="background: transparent url(https://www.mauriz.es/wp-content/uploads/2024/04/donde-aprender-desarrollo-web-gratis-150x150.png) no-repeat scroll 0% 0%; width: 150px; height: 150px;"></div><div class="relpost-block-single-text" style="font-family: Arial; font-size: 12px; color: #333333;">¿Dónde aprender desarrollo web gratis?</div></div></a></div><div style="clear: both"></div></div></div><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://www.mauriz.es/blog/que-debe-hacerse-para-comenzar-a-utilizar-canva/" target="_self" rel="dofollow" class="u71ae3d4baf743bd62e5c17ac7e8cb379"><style>.u71ae3d4baf743bd62e5c17ac7e8cb379 { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:inherit; border:0!important; border-left:4px solid inherit!important; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); text-decoration:none; } .u71ae3d4baf743bd62e5c17ac7e8cb379:active, .u71ae3d4baf743bd62e5c17ac7e8cb379:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u71ae3d4baf743bd62e5c17ac7e8cb379 { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u71ae3d4baf743bd62e5c17ac7e8cb379 .ctaText { font-weight:bold; color:inherit; text-decoration:none; font-size: 16px; } .u71ae3d4baf743bd62e5c17ac7e8cb379 .postTitle { color:inherit; text-decoration: underline!important; font-size: 16px; } .u71ae3d4baf743bd62e5c17ac7e8cb379:hover .postTitle { text-decoration: underline!important; }</style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText"></span>  <span class="postTitle">¿Qué debe hacerse para comenzar a utilizar Canva?</span></div></a></div></div><div class="social-buttons flexbox"> <a href="https://www.facebook.com/sharer/sharer.php?u=https://www.mauriz.es/blog/que-se-necesita-para-crear-una-pagina-web-en-html/" class="asap-icon-single icon-facebook" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M7 10v4h3v7h4v-7h3l1 -4h-4v-2a1 1 0 0 1 1 -1h3v-4h-3a5 5 0 0 0 -5 5v2h-3" /></svg></a> <a href="https://twitter.com/intent/tweet?text=¿Qué se necesita para crear una página web en HTML?&url=https://www.mauriz.es/blog/que-se-necesita-para-crear-una-pagina-web-en-html/" class="asap-icon-single icon-twitter" target="_blank" rel="nofollow noopener" viewBox="0 0 24 24"><svg xmlns="http://www.w3.org/2000/svg"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M22 4.01c-1 .49 -1.98 .689 -3 .99c-1.121 -1.265 -2.783 -1.335 -4.38 -.737s-2.643 2.06 -2.62 3.737v1c-3.245 .083 -6.135 -1.395 -8 -4c0 0 -4.182 7.433 4 11c-1.872 1.247 -3.739 2.088 -6 2c3.308 1.803 6.913 2.423 10.034 1.517c3.58 -1.04 6.522 -3.723 7.651 -7.742a13.84 13.84 0 0 0 .497 -3.753c-.002 -.249 1.51 -2.772 1.818 -4.013z" /></svg></a> <a href="https://pinterest.com/pin/create/button/?url=https://www.mauriz.es/blog/que-se-necesita-para-crear-una-pagina-web-en-html/&media=" class="asap-icon-single icon-pinterest" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="8" y1="20" x2="12" y2="11" /><path d="M10.7 14c.437 1.263 1.43 2 2.55 2c2.071 0 3.75 -1.554 3.75 -4a5 5 0 1 0 -9.7 1.7" /><circle cx="12" cy="12" r="9" /></svg></a> <a href="https://wa.me/?text=¿Qué se necesita para crear una página web en HTML?%20-%20https://www.mauriz.es/blog/que-se-necesita-para-crear-una-pagina-web-en-html/" class="asap-icon-single icon-whatsapp" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 21l1.65 -3.8a9 9 0 1 1 3.4 2.9l-5.05 .9" /> <path d="M9 10a.5 .5 0 0 0 1 0v-1a.5 .5 0 0 0 -1 0v1a5 5 0 0 0 5 5h1a.5 .5 0 0 0 0 -1h-1a.5 .5 0 0 0 0 1" /></svg></a> <a href="https://t.me/share/url?url=https://www.mauriz.es/blog/que-se-necesita-para-crear-una-pagina-web-en-html/&text=¿Qué se necesita para crear una página web en HTML?" class="asap-icon-single icon-telegram" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M15 10l-4 4l6 6l4 -16l-18 7l4 2l2 6l3 -4" /></svg></a> <a href="mailto:?subject=¿Qué se necesita para crear una página web en HTML?&body=https://www.mauriz.es/blog/que-se-necesita-para-crear-una-pagina-web-en-html/" class="asap-icon-single icon-email" target="_blank" rel="nofollow noopener"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><rect x="3" y="5" width="18" height="14" rx="2" /><polyline points="3 7 12 13 21 7" /></svg></a></div></article></main><div class="footer-breadcrumb"><div class="breadcrumb-trail breadcrumbs"><ul class="breadcrumb"><li ><a href="https://www.mauriz.es/" rel="home" itemprop="item"><span itemprop="name">Mauriz</span></a></li><li ><a href="https://www.mauriz.es/blog/" itemprop="item"><span itemprop="name">Blog</span></a></li><li ><span itemprop="name">¿Qué se necesita para crear una página web en HTML?</span></li></ul></div></div> <span class="go-top"><span>Subir</span><i class="arrow arrow-up"></i></span><footer><div class="content-footer"><div class="widget-content-footer"><div class="widget-area"><div class="menu-footer-container"><ul id="menu-footer" class="menu"><li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="https://www.mauriz.es/politica-de-privacidad/" itemprop="url">Política de Privacidad</a></li><li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"><a href="https://www.mauriz.es/aviso-legal/" itemprop="url">Aviso Legal</a></li><li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="https://www.mauriz.es/politica-de-cookies/" itemprop="url">Política de Cookies</a></li><li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="https://www.mauriz.es/personalizar-cookies/" itemprop="url">Personalizar Cookies</a></li><li id="menu-item-87" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-87"><a href="/sitemap_index.xml" itemprop="url">Sitemap</a></li></ul></div></div></div></div></footer><style>.aawp .aawp-product--horizontal .aawp-product__description { display: block; }</style><div id="cookies-eu-wrapper"><div id="cookies-eu-banner" data-wait-remove="250" ><div id="cookies-eu-label"> Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. <a class="argpd-cookies-politica" rel="nofollow" id="cookies-eu-more" href="https://www.mauriz.es/personalizar-cookies/">Más información</a></div><div id="cookies-eu-buttons"><button id="cookies-eu-reject" class="cookies-eu-reject">Rechazar</button> <button id="cookies-eu-accept" class="cookies-eu-accept">Aceptar</button></div></div></div><div id="cookies-eu-banner-closed"> <span>Privacidad</span></div> <script data-no-optimize="1">!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):(t="undefined"!=typeof globalThis?globalThis:t||self).LazyLoad=e()}(this,function(){"use strict";function e(){return(e=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n,a=arguments[e];for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(t[n]=a[n])}return t}).apply(this,arguments)}function i(t){return e({},it,t)}function o(t,e){var n,a="LazyLoad::Initialized",i=new t(e);try{n=new CustomEvent(a,{detail:{instance:i}})}catch(t){(n=document.createEvent("CustomEvent")).initCustomEvent(a,!1,!1,{instance:i})}window.dispatchEvent(n)}function l(t,e){return t.getAttribute(gt+e)}function c(t){return l(t,bt)}function s(t,e){return function(t,e,n){e=gt+e;null!==n?t.setAttribute(e,n):t.removeAttribute(e)}(t,bt,e)}function r(t){return s(t,null),0}function u(t){return null===c(t)}function d(t){return c(t)===vt}function f(t,e,n,a){t&&(void 0===a?void 0===n?t(e):t(e,n):t(e,n,a))}function _(t,e){nt?t.classList.add(e):t.className+=(t.className?" ":"")+e}function v(t,e){nt?t.classList.remove(e):t.className=t.className.replace(new RegExp("(^|\\s+)"+e+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,"")}function g(t){return t.llTempImage}function b(t,e){!e||(e=e._observer)&&e.unobserve(t)}function p(t,e){t&&(t.loadingCount+=e)}function h(t,e){t&&(t.toLoadCount=e)}function n(t){for(var e,n=[],a=0;e=t.children[a];a+=1)"SOURCE"===e.tagName&&n.push(e);return n}function m(t,e){(t=t.parentNode)&&"PICTURE"===t.tagName&&n(t).forEach(e)}function a(t,e){n(t).forEach(e)}function E(t){return!!t[st]}function I(t){return t[st]}function y(t){return delete t[st]}function A(e,t){var n;E(e)||(n={},t.forEach(function(t){n[t]=e.getAttribute(t)}),e[st]=n)}function k(a,t){var i;E(a)&&(i=I(a),t.forEach(function(t){var e,n;e=a,(t=i[n=t])?e.setAttribute(n,t):e.removeAttribute(n)}))}function L(t,e,n){_(t,e.class_loading),s(t,ut),n&&(p(n,1),f(e.callback_loading,t,n))}function w(t,e,n){n&&t.setAttribute(e,n)}function x(t,e){w(t,ct,l(t,e.data_sizes)),w(t,rt,l(t,e.data_srcset)),w(t,ot,l(t,e.data_src))}function O(t,e,n){var a=l(t,e.data_bg_multi),i=l(t,e.data_bg_multi_hidpi);(a=at&&i?i:a)&&(t.style.backgroundImage=a,n=n,_(t=t,(e=e).class_applied),s(t,ft),n&&(e.unobserve_completed&&b(t,e),f(e.callback_applied,t,n)))}function N(t,e){!e||0<e.loadingCount||0<e.toLoadCount||f(t.callback_finish,e)}function C(t,e,n){t.addEventListener(e,n),t.llEvLisnrs[e]=n}function M(t){return!!t.llEvLisnrs}function z(t){if(M(t)){var e,n,a=t.llEvLisnrs;for(e in a){var i=a[e];n=e,i=i,t.removeEventListener(n,i)}delete t.llEvLisnrs}}function R(t,e,n){var a;delete t.llTempImage,p(n,-1),(a=n)&&--a.toLoadCount,v(t,e.class_loading),e.unobserve_completed&&b(t,n)}function T(o,r,c){var l=g(o)||o;M(l)||function(t,e,n){M(t)||(t.llEvLisnrs={});var a="VIDEO"===t.tagName?"loadeddata":"load";C(t,a,e),C(t,"error",n)}(l,function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_loaded),s(e,dt),f(n.callback_loaded,e,a),i||N(n,a),z(l)},function(t){var e,n,a,i;n=r,a=c,i=d(e=o),R(e,n,a),_(e,n.class_error),s(e,_t),f(n.callback_error,e,a),i||N(n,a),z(l)})}function G(t,e,n){var a,i,o,r,c;t.llTempImage=document.createElement("IMG"),T(t,e,n),E(c=t)||(c[st]={backgroundImage:c.style.backgroundImage}),o=n,r=l(a=t,(i=e).data_bg),c=l(a,i.data_bg_hidpi),(r=at&&c?c:r)&&(a.style.backgroundImage='url("'.concat(r,'")'),g(a).setAttribute(ot,r),L(a,i,o)),O(t,e,n)}function D(t,e,n){var a;T(t,e,n),a=e,e=n,(t=It[(n=t).tagName])&&(t(n,a),L(n,a,e))}function V(t,e,n){var a;a=t,(-1<yt.indexOf(a.tagName)?D:G)(t,e,n)}function F(t,e,n){var a;t.setAttribute("loading","lazy"),T(t,e,n),a=e,(e=It[(n=t).tagName])&&e(n,a),s(t,vt)}function j(t){t.removeAttribute(ot),t.removeAttribute(rt),t.removeAttribute(ct)}function P(t){m(t,function(t){k(t,Et)}),k(t,Et)}function S(t){var e;(e=At[t.tagName])?e(t):E(e=t)&&(t=I(e),e.style.backgroundImage=t.backgroundImage)}function U(t,e){var n;S(t),n=e,u(e=t)||d(e)||(v(e,n.class_entered),v(e,n.class_exited),v(e,n.class_applied),v(e,n.class_loading),v(e,n.class_loaded),v(e,n.class_error)),r(t),y(t)}function $(t,e,n,a){var i;n.cancel_on_exit&&(c(t)!==ut||"IMG"===t.tagName&&(z(t),m(i=t,function(t){j(t)}),j(i),P(t),v(t,n.class_loading),p(a,-1),r(t),f(n.callback_cancel,t,e,a)))}function q(t,e,n,a){var i,o,r=(o=t,0<=pt.indexOf(c(o)));s(t,"entered"),_(t,n.class_entered),v(t,n.class_exited),i=t,o=a,n.unobserve_entered&&b(i,o),f(n.callback_enter,t,e,a),r||V(t,n,a)}function H(t){return t.use_native&&"loading"in HTMLImageElement.prototype}function B(t,i,o){t.forEach(function(t){return(a=t).isIntersecting||0<a.intersectionRatio?q(t.target,t,i,o):(e=t.target,n=t,a=i,t=o,void(u(e)||(_(e,a.class_exited),$(e,n,a,t),f(a.callback_exit,e,n,t))));var e,n,a})}function J(e,n){var t;et&&!H(e)&&(n._observer=new IntersectionObserver(function(t){B(t,e,n)},{root:(t=e).container===document?null:t.container,rootMargin:t.thresholds||t.threshold+"px"}))}function K(t){return Array.prototype.slice.call(t)}function Q(t){return t.container.querySelectorAll(t.elements_selector)}function W(t){return c(t)===_t}function X(t,e){return e=t||Q(e),K(e).filter(u)}function Y(e,t){var n;(n=Q(e),K(n).filter(W)).forEach(function(t){v(t,e.class_error),r(t)}),t.update()}function t(t,e){var n,a,t=i(t);this._settings=t,this.loadingCount=0,J(t,this),n=t,a=this,Z&&window.addEventListener("online",function(){Y(n,a)}),this.update(e)}var Z="undefined"!=typeof window,tt=Z&&!("onscroll"in window)||"undefined"!=typeof navigator&&/(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent),et=Z&&"IntersectionObserver"in window,nt=Z&&"classList"in document.createElement("p"),at=Z&&1<window.devicePixelRatio,it={elements_selector:".lazy",container:tt||Z?document:null,threshold:300,thresholds:null,data_src:"src",data_srcset:"srcset",data_sizes:"sizes",data_bg:"bg",data_bg_hidpi:"bg-hidpi",data_bg_multi:"bg-multi",data_bg_multi_hidpi:"bg-multi-hidpi",data_poster:"poster",class_applied:"applied",class_loading:"litespeed-loading",class_loaded:"litespeed-loaded",class_error:"error",class_entered:"entered",class_exited:"exited",unobserve_completed:!0,unobserve_entered:!1,cancel_on_exit:!0,callback_enter:null,callback_exit:null,callback_applied:null,callback_loading:null,callback_loaded:null,callback_error:null,callback_finish:null,callback_cancel:null,use_native:!1},ot="src",rt="srcset",ct="sizes",lt="poster",st="llOriginalAttrs",ut="loading",dt="loaded",ft="applied",_t="error",vt="native",gt="data-",bt="ll-status",pt=[ut,dt,ft,_t],ht=[ot],mt=[ot,lt],Et=[ot,rt,ct],It={IMG:function(t,e){m(t,function(t){A(t,Et),x(t,e)}),A(t,Et),x(t,e)},IFRAME:function(t,e){A(t,ht),w(t,ot,l(t,e.data_src))},VIDEO:function(t,e){a(t,function(t){A(t,ht),w(t,ot,l(t,e.data_src))}),A(t,mt),w(t,lt,l(t,e.data_poster)),w(t,ot,l(t,e.data_src)),t.load()}},yt=["IMG","IFRAME","VIDEO"],At={IMG:P,IFRAME:function(t){k(t,ht)},VIDEO:function(t){a(t,function(t){k(t,ht)}),k(t,mt),t.load()}},kt=["IMG","IFRAME","VIDEO"];return t.prototype={update:function(t){var e,n,a,i=this._settings,o=X(t,i);{if(h(this,o.length),!tt&&et)return H(i)?(e=i,n=this,o.forEach(function(t){-1!==kt.indexOf(t.tagName)&&F(t,e,n)}),void h(n,0)):(t=this._observer,i=o,t.disconnect(),a=t,void i.forEach(function(t){a.observe(t)}));this.loadAll(o)}},destroy:function(){this._observer&&this._observer.disconnect(),Q(this._settings).forEach(function(t){y(t)}),delete this._observer,delete this._settings,delete this.loadingCount,delete this.toLoadCount},loadAll:function(t){var e=this,n=this._settings;X(t,n).forEach(function(t){b(t,e),V(t,n,e)})},restoreAll:function(){var e=this._settings;Q(e).forEach(function(t){U(t,e)})}},t.load=function(t,e){e=i(e);V(t,e)},t.resetStatus=function(t){r(t)},Z&&function(t,e){if(e)if(e.length)for(var n,a=0;n=e[a];a+=1)o(t,n);else o(t,e)}(t,window.lazyLoadOptions),t});!function(e,t){"use strict";function a(){t.body.classList.add("litespeed_lazyloaded")}function n(){console.log("[LiteSpeed] Start Lazy Load Images"),d=new LazyLoad({elements_selector:"[data-lazyloaded]",callback_finish:a}),o=function(){d.update()},e.MutationObserver&&new MutationObserver(o).observe(t.documentElement,{childList:!0,subtree:!0,attributes:!0})}var d,o;e.addEventListener?e.addEventListener("load",n,!1):e.attachEvent("onload",n)}(window,document);</script><script data-optimized="1" src="https://www.mauriz.es/wp-content/litespeed/js/bfb20a8b78286273d14a94e22df49f6c.js?ver=0d6c1" defer></script></body></html> <!-- Page optimized by LiteSpeed Cache @2024-05-21 08:42:57 --> <!-- Page cached by LiteSpeed Cache 6.2.0.1 on 2024-05-21 08:42:57 -->