Estructuras y elementos básicos en el desarrollo de páginas o sitios web

Total
0
Shares

En mis anteriores posts comente algunas pautas muy básicas sobre el desarrollo web que creía que serían importantes de conocer por parte de las personas que quieren adentrarse en este mundo y así ellos por si solos, poder confeccionar sus propias páginas o sitios web de la forma más sencilla y correctamente posible.

En este post se dará a conocer las etiquetas más básicas que forman parte de una página web, para comenzar deberemos de tener abierto nuestro IDENetbeans , Eclipse” o editor de código favorito “Visual Studio Code, Notepad++, Sublime Text”, si por algún caso no dispones de algunos de estos programas , se puede abrir el bloc de notas del sistema operativo y empezar a escribir el código en el orden que os vaya indicando.

Hay que tener en cuenta una cuestión muy básica, una página web se crea mediante etiquetas y atributos establecidos que deben de seguir un determinado orden fijo, unas reglas fijas y unos elementos preestablecidos para que funcionen y se visualicen correctamente , de no ser así nos llevaremos muchas desagradables sorpresas.

1. Etiquetas Básicas

La primera etiqueta que debemos colocar es la <!DOCTYPE> acompañada del atributo html , esto le indicará al navegador web que vamos a crear un documento digital destinado a la web.

<!DOCTYPE html> Actualmente nosotros trabajaremos con la última versión de HTML, conocida como HTML5 que proporcionara grandes ventajas con respecto a sus antecesores digitales, ya que esta versión reduce la cantidad de código a escribir, posee muchas más funcionalidades y elementos que las versiones anteriores no tenían.Elemento raíz  <html>

Esta etiqueta estará por debajo de la etiqueta inicial <!DOCTYPE html> y abarca todo el documento hasta el final del mismo , dentro de ella se añadirán más elementos o etiquetas que confeccionarán nuestra página web.

A continuación de la anterior etiqueta, aparecerá la etiqueta <head> que contiene dos subelementos

  • La etiqueta <meta>
    • Se utiliza para indicarle al navegador web ciertos apartados técnicos que va a poseer nuestra página web que son por ejemplo, el tipo de codificación de caracteres que contendrá , la dimensión de las pantallas que deben de tener los navegadores web para que se visualicen mejor las páginas web entre otras cosas más.
  • La etiqueta <body>
    • Esta etiqueta se usará como contenedor de otros elementos o etiquetas que servirán para confeccionar nuestra pagina web.

Etiqueta <head>

Contiene la información de carácter específico llamados “metadatos” que no se muestra en la ventana del navegador web, esta etiqueta almacena las siguientes etiquetas como son <title>, <base>, <link>, <meta> y <style>.

Etiqueta <title>

Contiene el título de nuestra página web y es muy importante agregarlo.

Los navegadores web muestran este texto en la pestaña de arriba de la ventana del navegador web, se suele utilizar para comunicarle a las personas  y navegadores el tipo de contenido que posee la pagina web.

Un ejemplo de esta etiqueta sería <title>

<title>Tienda Ordenadores</title>

Le está indicando al buscador de internet el tema o de que trata la pagina o sitio web.

Etiqueta  <meta>

Su tarea es la de contener información técnica entre otras funcionalidades, que el servidor “ordenador que tiene almacenado las páginas web” deberá de ofrecer a los navegadores web cuando estas se las soliciten para mostrarla en los navegadores web.

Esta etiqueta suele ser interpretada por todos los navegadores web , un ejemplo sería indicar el juego de caracteres de la página web para que se pueda leer correctamente.

<meta charset=”utf-8″>

Otro uso sería indicarle a los sistemas de pantallas de alta densidad, el ancho de pantalla del dispositivo para que se visualice correctamente la pagina web.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

 Etiqueta <body>

Se utiliza para almacenar todos los distintos contenidos que va a poseer nuestra página web , se añade esta etiqueta y a continuación , le vamos agregando todas las demás etiquetas establecidas por HTML5 para mostrar texto y enlaces a otras páginas o a la propia,  crear listas de elementos , añadir imágenes o visualizar videos.

2. Ejemplo Básico

Un ejemplo de una correcta página web en HTML5 sería:

<!DOCTYPE html>

<html lang=”es”>

<head>

<meta charset=”utf-8″>

<title>Mi primera pagina web.</title>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

</head>

<body>

<p>Bienvenidos a mi pagina web.</p>

</body>

</html>

Para terminar, quería comentaros la existencia de una herramienta online que nos permite averiguar si las páginas web que vamos creando son validas y además cumple con el estándar de HTML5 para que se visualice correctamente en los navegadores web.

La pagina web es : http://validator.w3.org/#validate_by_input

Solamente tenéis que ingresar en ella y agregar el código fuente de vuestra página web en la sección “Validate by Direct Input” y pulsar el botón “check” , realizado esto nos aparecerá una lista de sugerencias , errores y demás elementos que tendremos que corregir en el caso que los haya sino los tiene , nos dará el visto bueno y nos dará la posibilidad de agregar una URL donde certifica que tenemos una página web que cumple con el estándar básico de HTML.

 

7 comentarios
  1. Buenas, buen artículo, indicar que HTML significa “HyperText Markup Language”, es decir lenguaje de hypertexto por marcas, en este caso concreto las etiquetas y que por tanto guarda muchísimas semejanzas con otros tipos de lenguajes como XML , ” eXtensible Markup Language”, que es que utilizan numerosas aplicaciones para comunicarse (al ser en cambio HTML un lenguaje de hypertexto o con enlaces -links- orientado específicamente a la web).

    1. Si , todos esos términos y otros muchos más los conozco.
      Pero quería centrarme en lo importante porque sino , los post serían kilometricos con demasiada teoría que aburre a los iniciados , intento sintetizar al máximo el contenido.
      Sin ir más lejos , la etiqueta da para muchos post, si tuviera que explicar con exactitud para que sirve y algunos de sus atributos más importantes esto sería muy agotador para el lector.
      El problema de todo esto es que extenso y hay que saber por donde recortar.
      Pero agradezco tu aportación y aclaración!

Deja un comentario
También puede interesarte