Entender las partes de una Web y lo fundamental de HTML y CSS
Una página web se compone de tres partes fundamentales:
- El Encabezado (head)
- El Cuerpo (body)
- El pie (footer).
Todas las web tienen la estructura mencionada anteriormente. Y antes de meternos de lleno a WordPress, vamos a comprender un poco mejor como se compone un sitio web, identificando etiquetas html principales, maquetando y desmembrando un sitio. Reconociendo las tres partes fundamentales que hacen de una web sea fácil en navegar y usar para el usuario que la visite.
Te lo resumo
Header
El encabezado del sitio es la primera parte que se muestra en la interfaz de una página web, aunque esto no significa que necesariamente sea la primera parte del código. En esta sección encontraremos regularmente los menús de navegación, barras de búsqueda, el logo del sitio o empresa y quizás algún login para usuarios.
Footer
Esta sección es utilizada generalmente para mostrar logos adicionales, enlaces hacia otros sitios, secciones de la página, mapas del sitio, información de derechos, licencias y copyright. De las tres secciones puede resultar la menos importante por así decirlo, aunque en realidad son muchas las páginas que manejan esta sección dentro de sus layouts, ya que permite una navegación más sencilla y deja en claro, en un lugar visible, como manejas, proteges y utilizas tu contenido.
-
- Nota: Hace unos años el contenido de <title> se mostraba en la barra de título de la ventana del navegador, pero los navegadores han ido perdiendo ese elemento de la interfaz en su búsqueda de maximizar el espacio disponible para el contenido.
- La etiqueta permite hacer referencia a otro documento.
- El atributo rel indica en general la relación entre los dos documentos. En este caso, el valor del atributo rel=«stylesheet» indica que se está haciendo referencia a una hoja de estilo CSS.
- El atributo href indica el nombre y la ruta (absoluta o relativa) del archivo que contiene la hoja de estilo.
- El atributo type indica el tipo MIME del documento enlazado. En este caso, el valor del atributo type=«text/css» indica que el tipo MIME es el de una hoja de estilo. Como se trata de una información redundante, en HTML este atributo es optativo.
- La cabecera <head> …</head> podría contener también una etiqueta <script> …</script>, que permite incluir directamente código JavaScript en el documento o hacer referencia al documento en el que se encuentra ese código.
<head> ... <script src="script.js"></script> ... </head>En este caso, el atributo src nos indicaría el nombre y la ruta del fichero que contiene el código.
Nota: El lenguaje de programación JavaScript queda fuera del contenido de este curso.
Descargamos nuestro primer editor de código!
Nuestra primera web básica, escrita con sintaxis HTML.
[snippet slug=codigo-clase-2-basico-de-html lang=html]Sin miedo al éxito, te lo explico
- La primera etiqueta <!DOCTYPE … > es obligatoria e indica el tipo de documento (DOCTYPE) de la página. Existen varios tipos de documentos que corresponden a las diferentes versiones de HTML y XHTML. El tipo «html» es el que corresponde al HTML.
- La etiqueta <html> …</html> engloba todo el documento html.
- Un documento html se divide en dos partes, la cabecera … y el cuerpo …
- La cabecera … contiene información de identificación y control que en general no se muestra en la ventana del navegador, aunque puede afectar a la presentación (por ejemplo, los enlaces a hojas de estilo).
- Las etiquetas están pensadas para proporcionar información sobre el documento a los programas que analicen la página y por ello existen muchas etiquetas diferentes. Por ejemplo, la etiqueta
- La primera etiqueta <meta> del ejemplo informa del juego de caracteres empleado en la página, en este caso UTF-8.
- La segunda etiqueta <meta> del ejemplo se utiliza para mejorar la presentación de las páginas webs en las pantallas de los teléfonos móviles y, en general, en las pantallas de alta densidad.
- La etiqueta de título <title> …</title> es obligatoria y debe incluirse en todas las páginas web. Contiene el texto que se muestra en la pestaña del navegador, como muestra el siguiente ejemplo. Si el texto es largo, la pestaña sólo mostrará el principio, pero situando el ratón sobre la pestaña, el texto completo se mostrará en una pequeña ventana flotante.
- Las etiquetas están pensadas para proporcionar información sobre el documento a los programas que analicen la página y por ello existen muchas etiquetas diferentes. Por ejemplo, la etiqueta
- La cabecera … contiene información de identificación y control que en general no se muestra en la ventana del navegador, aunque puede afectar a la presentación (por ejemplo, los enlaces a hojas de estilo).
La complicamos y empezamos a reemplazar contenido trabajando un template , sin analizar todavía el CSS o el JS.
Ahora vamos a descargar nuestro primer práctico, y vamos a ir editando y haciendo nuestra primera Onepage profesional! Van a haber etiquetas que todavía no vimos, pero vamos a ir razonando e interpretando el contenido para hacer de un template algo nuestro!
Vamos a realizar este sitio web:
Página web del autor: https://www.free-css.com/free-css-templates/page274/salient
Esperamos tu mensaje!