¿Qué es una página web y cómo crearte tu propio website?

Total
0
Shares
  • La mayoría de las páginas web son documentos digitales estáticos o dinámicos que engloba un conjunto de tecnologías como son HTML5 , CSS , Javascript y que trabajan entre sí y además son compatibles entre ellas.

1. Introducción a la tecnología web

  • Las tecnologías HTML5 , CSS , Javascript trabajan entre sí de forma conjuntan para confeccionar la presentación y la usabilidad de los documentos digitales, permitiendo no solo incluir elementos de tipo texto sino otro elementos más interactivos como por ejemplo pueden ser imágenes , videos , sonidos , hiperenlaces a otros documentos , juegos , etc.
  • Las páginas web están creadas y pensadas para ser navegada sobre ellas mediante programas informáticos llamados navegadores web, los más conocidos son Chrome , Mozilla Firefox , Opera , etc.
  • Los navegadores web sean desde el ordenador, laptop, tablet , smartphone son capaces de interpretar las marcas , etiquetas o código fuente que en conjunto confeccionan las páginas web y que queremos presentar a los usuarios para que naveguen por ella.

2. Inspeccionar elementos de las páginas web o websites

  • Los distintos navegadores web no muestran en principio las marcas , etiquetas o código fuente que componen las website o páginas web, aunque se puede pedir que los muestre en una ventana aparte o en la misma, para ello se debe de pulsar un atajo de teclado correspondiente al navegador que estemos usando que suele ser Ctrl+u.
  • Otra alternativa para ver el código fuente puede ser :
    • En Firefox – Pulsar botón derecho del ratón sobre la pagina web o website > ver código fuente de la pagina o pulsar Ctrl + Mayus + i para activar la consola web
    • En Chrome, Pulsar botón derecho del ratón sobre la pagina web o website > ver código fuente de la pagina o pulsar Ctrl + Mayus + i para activar la consola web
    • En Edge, primero hay que abrir la página about:flags y marcar la casilla “Mostrar código fuente”.
      • A partir de ese momento, al hacer clic derecho del ratón sobre cualquier página, el menú contextual mostrará la opción
        • Ver origen. El código fuente se mostrara en la ventana.
        • También se puede ver el código fuente pulsando Ctrl+u o pulsar Ctrl + Mayus + i para activar la consola web
      • Opera – Pulsar botón derecho del ratón sobre la pagina web o website > ver código fuente de la pagina o pulsar Ctrl + Shift + c para activar la consola web

3. Breve introducción a la confección de un documento digital

Las etiquetas o marcas con las que se confeccionan los documentos digitales se escriben entre corchetes angulares ,  cuñas  (<p>, <h1>, <div>, etc.) y la mayoría suelen ir en parejas , aunque hay casos en las que las etiquetas o marcas no van acompañados por su pareja y solo se escribe una etiqueta para que realice su acción necesaria , dentro de los paréntesis hay una palabra o letra que define la acción que va a realizar ese elemento dentro del documento digital.

La marca de apertura contiene como mínimo el nombre de la marca o etiqueta y la marca de cierre empieza por el carácter barra (/) y contiene únicamente el nombre de la marca (</p>, </h1>, </div>, etc.) que va a cerrar.

Código fuente de la página web o website podría contener una marca o etiqueta como por ejemplo esta.

<p> Agregando un párrafo</p>

<p> Agregando un segundo párrafo</p>

Hay marcas o etiquetas como las que se usan para añadir imágenes, saltos de líneas, separadores, etc, que no necesitan etiqueta de cierre y sólo es necesario escribir la etiqueta de apertura para que realice su acción o tarea necesaria.

Estas marcas se les conocen como marcas o etiquetas vacías (void).

Algunas marcas o etiquetas vacías de HTML son :

<area>, <base>, <br>, <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> y <wbr>.

Un ejemplo de código fuente de una página web.

<p>Agregamos un párrafo.</p>

<hr>

<p>Agregamos otro párrafo. Entre los dos párrafos insertamos una línea horizontal.</p>

Casi todos los navegadores web modifican en cierta manera el aspecto visual del texto en función de las etiquetas existentes, aunque hay etiquetas que no tienen ningún estilo predeterminado y tiene una única utilidad.

Un ejemplo de este tipo de comportamiento lo podemos ver en el código fuente de una página web.

<p>Dentro de un párrafo, añado una palabra <strong>en negrita</strong> para resaltarla la palabra</p>

<p> Dentro de otro párrafo, podemos añadir <span>otro párrafo</span> que no produzce un salto de línea y me permite continua escribiendo en el <strong>mismo parrafo</strong>.</p>

Las etiquetas se pueden anidar, aunque no de cualquier manera ya que siguen unas reglas básica y fijas.

Otro ejemplo de código fuente de la página web o website sería esta.

<div>

<p>Agrego un párrafo con una palabra en <strong>negrita</strong>.</p>

<p> Agrego otro párrafo con una palabra en <em> cursiva </em>.</p>

</div>

Hay gran variedad de etiquetas, reglas y elementos a tener en cuenta para confeccionar una página web, que iremos abordando sobre la marcha para desarrollar nuestros documentos digitales.

 

  • Para más información visitar la página oficial de tecnología HTML5 donde viene toda las especificaciones y reglas estándar para la confección de páginas web.

Gracias por su atención.

3 comentarios
Deja un comentario
También puede interesarte