Estructura para crear una pagina web en html

estructura de una página web en html

En este capítulo, verás la estructura de una página web en HTML con algo de color añadido mediante CSS. La creación de la estructura general de una página dará más contexto a los elementos HTML que ya has aprendido en la parte 2: texto, listas, imágenes y más.

En realidad, podría nombrar casi cualquier sitio web, y podrías dividirlo en secciones notablemente predecibles. Los desarrolladores escriben el HTML de forma que permite una estructura de contenidos coherente en toda la web. Esto reduce el trabajo cognitivo de los usuarios y hace que los distintos sitios se muestren de forma fiable en todos los navegadores, lectores de pantalla y motores de búsqueda.

Por ejemplo, si se mira el New York Times, se utiliza la navegación para navegar por las secciones, buscar un artículo o acceder a las opciones de afiliación y a la configuración de la cuenta. En Airbnb, la navegación le permite convertirse en anfitrión o acceder a la configuración de su cuenta. Las barras de navegación se adaptan al contenido de cada sitio, pero no son fundamentalmente diferentes.

Además, los sitios web suelen reorganizar sus bloques de contenido cuando se ven en dispositivos móviles y tabletas. A menudo verás que los artículos o las piezas de contenido más pequeñas se apilan verticalmente en los tamaños de pantalla más pequeños.

formato de texto html

Además de definir partes individuales de su página (como “un párrafo” o “una imagen”), HTML también cuenta con una serie de elementos a nivel de bloque que se utilizan para definir áreas de su sitio web (como “la cabecera”, “el menú de navegación”, “la columna de contenido principal”). Este artículo analiza cómo planificar la estructura básica de un sitio web y cómo escribir el HTML para representar esta estructura.

Secciones básicas de un documentoLas páginas web pueden tener y tendrán un aspecto bastante diferente entre sí, pero todas suelen compartir componentes estándar similares, a menos que la página muestre un vídeo o un juego a pantalla completa, forme parte de algún tipo de proyecto artístico o simplemente esté mal estructurada:

Enlaces a las secciones principales del sitio; suelen estar representados por botones de menú, enlaces o pestañas. Al igual que la cabecera, este contenido suele ser consistente de una página web a otra: tener una navegación incoherente en tu sitio web sólo hará que los usuarios se sientan confundidos y frustrados. Muchos diseñadores web consideran que la barra de navegación forma parte de la cabecera en lugar de ser un componente individual, pero esto no es un requisito; de hecho, algunos también argumentan que tener las dos separadas es mejor para la accesibilidad, ya que los lectores de pantalla pueden leer las dos características mejor si están separadas.

contenido html

Es común hacer diseños web completos utilizando la propiedad CSS float. Float es fácil de aprender: sólo hay que recordar cómo funcionan las propiedades float y clear. Desventajas: Los elementos flotantes están atados al flujo del documento, lo que puede perjudicar la flexibilidad. Aprende más sobre float en nuestro capítulo CSS Float y Clear.

W3Schools está optimizado para el aprendizaje y la formación. Los ejemplos pueden ser simplificados para mejorar la lectura y el aprendizaje. Los tutoriales, las referencias y los ejemplos se revisan constantemente para evitar errores, pero no podemos garantizar la total corrección de todo el contenido. Al utilizar W3Schools, usted acepta haber leído y aceptado nuestra

estructura de la página web

Uno de los primeros obstáculos importantes a la hora de crear una página web si estás empezando a tener claro cómo debes estructurar tu contenido HTML. Hoy, vamos a hacer una inmersión profunda en este tema.

Al tratar de entender el panorama general, mira todo el sitio web en general y trata de buscar los lugares donde se requieren envolturas. Es mucho más fácil mostrar esto con un ejemplo, así que usaré mi blog como uno.

Una vez que entiendas cómo se ve la imagen, es increíblemente simple escribir el HTML. Siempre se va de arriba a abajo, de izquierda a derecha. Si hay algo dentro de un cuadro, se profundiza, utilizando el mismo procedimiento.

Espero que esto te dé una idea de cómo estructurarías el diseño cuando escribas HTML por primera vez. Tan pronto como entiendas cómo se usan estos grandes diseños, el CSS se vuelve mucho más fácil de manejar.

P.D. Esto es un pequeño adelanto de un curso que he estado preparando recientemente. En el curso, aprenderás a hacer sitios web desde cero, y también entenderás las consideraciones importantes detrás de ellos. Si te gusta este post y quieres saber más sobre cómo puedo ayudarte con mi curso, envíame un correo electrónico y podemos hablar más.