DEV Community

Cover image for JS Básico - Estructura básica de una página web I.
Incuerd0
Incuerd0

Posted on

JS Básico - Estructura básica de una página web I.

Para encontrar un inicio propicio podemos comenzar a ver una página web como un conjunto de bloques ordenados. Al abrir el explorador, en este caso Chrome, si pulsamos Control + U se abrirá una pestaña nueva con el siguiente código:

Código fuente de una nueva pestaña en Chrome

Control + U es un atajo del explorador Chrome que nos permite mostrar el código fuente de la página en una pestaña nueva. El código fuente de una página describe la estructura de esta.

Tomando la idea mencionada anteriormente podemos definir cada "bloque" como la sucesión de caracteres <[...]></[...]>, a esto se le llama elemento, el mismo elemento está representado por una palabra. Por ejemplo <html></html>: el elemento html encerrado entre los símbolos <></> es llamado etiqueta html, las etiquetas no son más que elementos que contienen dos propiedades: atributos y contenido.

De manera habitual se tiene que cada elemento tiene una etiqueta de apertura <[...]> y de cierre </[...]>, empero, es posible encontrar elementos que no necesariamente incluyan una etiqueta de cierre, a veces encontrando sólo la etiqueta de apertura como <[...]> o bien <[...] />. Se debe indicar que no es estrictamente necesario que la etiqueta de cierre se incluya en todos los escenarios.

Ahora bien, cada etiqueta puede o no tener contenido, se considera contenido lo que se encuentra entre la etiqueta de apertura del elemento, y su etiqueta de cierre por lo que en <title>Nueva pestaña</title>, la frase "Nueva pestaña" es el contenido de la etiqueta "title". El contenido puede ser texto plano u otro elemento.

De esta manera tenemos, en el código mostrado anteriormente, las siguientes etiquetas:

<html>: Esta etiqueta representa la raíz (root) de un documento HTML.
<head>: Es la primera parte importante del documento, puesto a que establece información importante del documento como el charset del mismo, el título o los estilos que tendrá el documento en este caso.
<title>: Se utiliza para definir el título del documento, es decir, el texto que nos mostrará la pestaña.
<style>: Contiene la información de estilo del documento o de una parte del mismo, contiene CSS, más tarde se entrará en detalle sobre este tema específico.
<body>: Es la segunda parte importante puesto a que define el cuerpo del documento, esto es el contenido que se mostrará del documento, tal como párrafos, imágenes, enlaces, etc.

Para finalizar esta primera entrada debemos indicar los atributos: un atributo es aquello que está definido dentro de la etiqueta de apertura del elemento. Veamos el elemento <iframe id="backgroundImage" src=""></iframe>:

<iframe> es usado para incluir otro documento en el documento actual HTML.

  1. El atributo id define un identificador de este elemento.
  2. El atributo src define la fuente del elemento, es decir, el documento que en este caso se va a incluir dentro del documento actual.

Para este caso no son los únicos atributos y cada elemento contiene sus atributos específicos con los que trabajar. Para encontrar una descripción completa de los atributos de <iframe> recomiendo entrar al siguiente enlace.

Considero justa esta entrada del blog, en una entrada posterior se tocará el tema específico respecto a los archivos CSS y la integración con Javascript.

Discussion (0)