Vamos a conocer la estructura de una página web:
Estructura de una página web
Cuando hablamos de la estructura de una página web normalmente se identifica tres partes muy bien diferenciadas: la cabecera, el cuerpo y el pie de la página.
Cabecera o header
La cabecera contiene la parte superior de la web. En ella se encuentra la información básica de la empresa o marca y es consistente en todo el sitio, es decir, se repite en cada página de la web. Los elementos que normalmente se encuentran en la cabecera son:
- Logo de la empresa
- El menú de navegación
- Un cuadro de búsqueda
- Una pequeña descripción de la web
Cuerpo o body
Es la parte de la web que alberga el contenido principal de tu web. Esta parte sí es diferente en cada página de tu sitio. Es decir, no será el mismo contenido el que incluyes en tu página de contacto que en la página principal.
Pie de página o footer
El pie de página o footer es la parte inferior de un sitio web. Al igual que la cabecera, se repite y es consistente en cada página. Además, también incluye elementos básicos como:
- Menú simplificado
- Información de contacto
- Botones de redes sociales
- Logo de la empresa
- Enlace a la política de privacidad
códigos que son más utilizados y como se escriben
1. HTML
<html> está al inicio de un documento HTML e indica a los navegadores que la página tiene código HTML para que pueda leerlo de esa forma. Siguiendo la sintaxis del lenguaje, la etiqueta de cierre </html> será el último elemento del documento.
2. Encabezado
<head> es la etiqueta que se utiliza para el encabezado de la página. Su principal función es contener toda la información del funcionamiento del sitio. Debido a esto, es un código encriptado que las personas que entran a la página no pueden ver.
3. Título de la página
<title> es la etiqueta que da a tu sitio un nombre para que los usuarios puedan identificarlo. Es el título que puedes ver en las pestañas del navegador.
4. Cuerpo
<body> es la etiqueta que contiene todos los elementos individuales del sitio. O dicho de otra forma, comprende todo el contenido visible del sitio. Aquí podrás insertar texto, imágenes, videos o cualquier otra funcionalidad que desees mostrar.
5. <h1> – Encabezado de sección
Los encabezados te permiten dividir el contenido de tu página en fragmentos legibles. Funcionan de manera muy similar a los títulos y subtítulos en un libro o un informe.
HTML admite 6 elementos de encabezado: h1, h2, h3, h4, h5 y h6. De estos, h1 es para los encabezados más importantes, h2 es para subtítulos menos importantes, y así sucesivamente. Por lo general, no necesitarás usar más de h1, h2 y h3, a menos que tu página sea muy larga y compleja.
Este es un ejemplo de un elemento de encabezado h1:
<h1> Las aventuras de mi gato Lucky </h1>
6. <p> – Un párrafo
El elemento p te permite crear párrafos de texto. La mayoría de los navegadores muestran párrafos con un espacio vertical entre cada uno de ellos, separando muy bien el texto.
Si bien puedes crear “párrafos” de texto simplemente usando etiquetas <br> para insertar líneas en blanco entre fragmentos de texto, es mejor usar elementos p en la mayoría de los casos. No solo es más ordenado, sino que brinda a los navegadores y motores de búsqueda una mejor idea de cómo está estructurada tu página.
Aquí hay un ejemplo de un párrafo:
<p> Mi gato Lucky tiene muchas aventuras. ¡Ayer atrapó un ratón, y esta mañana atrapó dos! </p>
Una buena regla general al escribir texto para la web es asegurarse de que cada párrafo contenga un solo punto, tema o pensamiento. Si quieres hablar sobre 2 cosas diferentes, usa 2 párrafos.
7. <a> – Un enlace
Uno de los elementos más importantes de una página web, es el elemento a porque te permite crear enlaces a otro contenido. El contenido puede estar en tu propio sitio o en cualquier otro.
Para crear un enlace, usa las etiquetas <a> y </a> alrededor del contenido que deseas colocar en el enlace e indica la URL para vincular en el atributo href de la etiqueta <a>.
A continuación, te mostramos cómo crear un texto que se vincule a www.ejemplo.com:
<a href=”http://www.ejemplo.com/”> ¡Visita este excelente sitio web! </a>
8. <img> – Una imagen
El elemento img te permite insertar imágenes en una página web. Para insertar una imagen, primero carga la imagen en tu servidor, luego usa una etiqueta <img> para hacer referencia al nombre de archivo de la imagen cargada.
Aquí hay un ejemplo:
<img src = “mifoto.jpg” alt = “Mi foto”>
El atributo alt es obligatorio para todas las etiquetas img. Lo utilizan los navegadores que no muestran imágenes para ofrecer texto alternativo al visitante.
9. <div> – Un contenedor a nivel de bloque para contenido
El elemento div es un contenedor genérico que puedes usar para agregar más estructura al contenido de tu página. Por ejemplo, puedes agrupar varios párrafos o encabezados que tengan un propósito similar en un elemento div. Por lo general, los elementos div se usan para:
• Encabezados y pies de página
• Columnas de contenido y barras laterales.
• Cuadros resaltados dentro del flujo de texto
• Áreas de la página con un propósito específico, como anuncios publicitarios.
• Galerías de imágenes.
Al agregar atributos de clase y/o id a tus elementos div, puedes usar CSS para diseñar y posicionar los divs. Esta es la base para crear diseños de página basados en CSS.
Aquí hay un ejemplo que usa un div para mostrar el contenido de una barra lateral en la página:
<div id = “barra lateral”>
<h1> Encabezado de la barra lateral </h1>
<p> Texto de la barra lateral </p>
<p> Más texto de la barra lateral </p>
</div>
10. <span> – Un elemento en línea para contenido
El elemento span es similar a div en que se usa para agregar estructura a tu contenido. La diferencia es que div es un elemento de nivel de bloque, mientras que span es un elemento en línea:
• Los elementos de nivel de bloque, como div, h1 y p, están diseñados para contener bloques de contenidos relativamente grandes o independientes, como párrafos de texto. Un elemento de nivel de bloque siempre comienza en una nueva línea.
• Los elementos en línea, como span, a e img, están diseñados para contener piezas de contenido más pequeñas, como algunas palabras o una oración, dentro de un bloque de contenido más grande. Agregar un elemento en línea no hace que se cree una nueva línea y, además, los elementos a nivel de bloque pueden contener elementos en línea; sin embargo, los elementos en línea no pueden contener elementos a nivel de bloque.
Al igual que con un div, a menudo agrega un atributo de clase y/o id a un intervalo para que puedas diseñarlo usando CSS.
El siguiente ejemplo utiliza elementos span para indicar nombres de productos dentro de un párrafo. Estos nombres de productos podrían resaltarse con CSS. Un motor de búsqueda personalizado también podría utilizar la información provista por los elementos span para identificar los productos dentro de la página.
<p> Algunos de nuestros productos incluyen <span class = “product”> SuperWidgets </span>, <span class = “product”> MegaWidgets </span> y <span class = “product”> WonderWidgets </span> . </p>
los formatos de texto más utilizados
txt : Son el tipo de archivo más simple en texto. Solo guardan caracteres (letras, números y símbolos de puntuación). No mantendrán ningún tipo de formato como subrayado, tamaño o tipos de letra. Son los más genéricos y por tanto pueden ser abiertos con cualquier editor de texto. La aplicación más común es el Bloc de Notas.
rtf: (Rich Text Format). Este tipo de formato de texto enriquecido, ya conserva propiedades del texto como el subrayado, los tamaños, colores, etc. La aplicación que lo emplea es el WordPad presente en los sistemas operativos Windows.
odt: (Open Document Text) Documento de texto abierto, es el empleado por los paquetes Writte de OpenOffice. Sigue el standard ISO/IEC 26300, por ello toda aplicación, desde la aprobación del estándar debería permitir su apertura y guardado. Mantienen a nivel interno una clara separación entre contenido y formatos.
doc-docx: Es el equivalente al formato odt anterior, pero propietario de Microsoft. Es el generado con la aplicación Word. Los docx son una evolución en las últimas versiones del paquete Office.
wps: Archivos de texto utilizado por la aplicación Works, también distribuido habitualmente con los sistemas operativos Windows.
html: Es el tipo de documento que contiene texto con etiquetas especificas del lenguaje HTML. Se utiliza para la creación de páginas web. Es el formato que lee nuestro navegador para mostrar la página. Es editable con aplicaciones como el bloc de notas.
lenguaje en el que se programa código html
El HTML es el núcleo de cada página web, independientemente de la complejidad de un sitio o la cantidad de tecnologías involucradas. Es el punto de partida para cualquier persona que esté aprendiendo a crear contenido web. Y, por suerte para nosotros, es sorprendentemente fácil de aprender.
lenguaje se puede programar código
El HTML usa etiquetas o elementos para identificar los distintos tipos de contenido. Estas etiquetas tienen nombres bastante intuitivos: etiquetas de encabezado, etiquetas de párrafo, etiquetas de imagen, etc. Cada página web se compone de un montón de estas etiquetas HTML que identifican cada tipo de contenido en la página.
Debemos tener en cuenta para el diseño y elaboración de página en html
ESTABLECE UNOS OBJETIVOS PARA TU PÁGINA WEB
Es importante que definas lo que quieres conseguir con tu web, ya que debes saber que por mucho que tengas una página, esta no consigue los objetivos por sí misma. Conociendo hasta dónde quieres llegar con ella y para qué quieres utilizarla, se puede crear una web con unos objetivos muchos más claros y hacerlo orientada a dicha meta.
CREA TAMBIÉN TU IMAGEN DE MARCA
Si todavía no la tienes, es importante que tu marca tenga un logotipo y una imagen que los usuarios puedan asociar a tu compañía. Esto aporta credibilidad y seriedad a tu empresa, y se puede utilizar para incluir el logotipo y los colores corporativos a la hora de diseñar tu web.
ELIGE UN PROVEEDOR INTEGRAL Y PROFESIONAL
Es importante que confíes este proceso a un proveedor serio, profesional y de confianza. Tu página web será tu imagen en Internet y, si quieres tener una buena reputación, querrás que tu sitio web inspire confianza y transmita el mensaje que deseas hacer llegar a tus usuarios.
Además, apuesta por un proveedor que pueda llevar a cabo todas las fases del proceso de creación de una página web: desde el diseño de la misma, hasta la fase de programación. Y si además ofrece servicios de marketing, mucho mejor. Quizás cuando tengas tu web lista, necesites aplicar alguna estrategia de marketing online.
UNA WEB QUE FACILITE LA NAVEGACIÓN AL USUARIO
A la hora de decidirte por un diseño u otro, ten en cuenta que lo que necesitas es que el usuario se sienta cómodo navegando por tu página. Por ello, trata de decantarte por un diseño web que haga que tu página tenga la suficiente usabilidad y navegabilidad. Que sea funcional y clara, mostrando exactamente los productos o servicios que quieres destacar, de una manera ordenada y bien estructurada.
DISEÑO RESPONSIVE
No olvides apostar por un diseño responsive adaptado a todos los dispositivos móviles. Sin él, perderás muchas visitas y usuarios, ya que en la actualidad es cada vez mayor el número de personas que navegan por Internet a través de sus teléfonos móviles y tablets.
SI TU WEB ES UN E-COMMERCE, FACILITA EL PROCESO DE COMPRA
Si el objetivo de tu página es vender, elige módulos de compra fáciles para el usuario. Cuanto más claro sea el método de compra y cuantos menos campos deba rellenar el usuario, mucho mejor.
De esta forma, esta es la hoja de ruta que puedes seguir durante el proceso de creación de tu tienda online. Así podrás tener más claro cuáles son los pasos a seguir para conseguir que tu nueva página web se adapte exactamente a lo que quieres y necesitas.
Web Grafías:
https://www.neolo.com/blog/10-codigos-html-basicos-para-paginas-web-con-ejemplos.php
https://www.lucushost.com/blog/partes-de-una-pagina-web-estructura-y-contenido/
http://informaticacotidiana.com/2019/03/23/formatos-de-ficheros-de-texto-editable/
https://www.ycoinbound.com/blog/lenguajes-de-programación-html-css-y-javascript#:~:text=HTML%20y%20CSS%20en%20realidad,cada%20página%20web%20y%20aplicación.
https://www.vgsystems.es/blog/diseno-web/aspectos-a-tener-en-cuenta-a-la-hora-de-crear-una-pagina-web/
