Translate

lunes, 27 de febrero de 2017

Lo que sé de ... Creación de una Página Web con HTML

Como ya vimos en entradas anteriores, el HTML es el lenguaje con el que se estructuran internamente las páginas web. Este lenguaje consiste en un conjunto de instrucciones, o etiquetas, que sirven para dar formato al texto y definir donde y como se van a presentar los elementos (texto, imágenes, etc.) en nuestra página web.

En la actualidad, no es necesario saber HTML para elaborar y publicar páginas web sencillas. Existen programas y páginas web que nos ayudan a desarrollar nuestra página web de manera gráfica e intuitiva, sin necesidad de tener conocimientos de programación. Wix.com, Jimdo, Weebly, one.com, etc., son algunos ejemplos de recursos sencillos que se pueden emplear en la actualidad para desarrollar nuestra página web.

Elaborar páginas web con HTML es más complicado, generalmente se seleccionan plantillas base de este lenguaje, a partir de las cuales se realizan modificaciones y añade nuevo código, hasta encontrar el diseño más adecuado para nuestra página web.

Las paginas web en HTML tienen una estructura definida, constan de tres módulos:
  1.  Se introduce una línea donde indica la versión de HTML utilizada (.
  2.  La cabecera, delimitada por las etiquetas y . 
  3.  El cuerpo, delimitado por las etiquetas y

Estructura de una página HTML. Temario SCM - CUM - UEx

La mayoría de plataformas, entre ellas blogger, nos permite realizar modificaciones en nuestro blog o página web en lenguaje HTML, en la opción "Editar HTML", dentro del panel de configuración del blog.

Editar HTML de plantilla con Blogger. Elaboración Propia

Ventana de edición de lenguaje HTML para plantillas de blogger. Elaboración Propia
Para introducirnos en el lenguaje HTML, realizaremos una sencilla página web. Para editar o elaborar un documento HTML se emplean editores de texto como "Bloc de Notas" (para Windows) o "TextEdit" (para Mac). 

Tras abrir el editor de texto, introducimos la siguiente información. Es muy importante respetar los signos, líneas, espacios y letras (mayúsculas o minúsculas), y escribirlo de la manera que se muestra. Estas instrucciones pertenecen a un complejo lenguaje, y si no se transcriben de manera correcta, puede que el navegador no pueda interpretar la información, y no muestre la página web o algunos elementos al usuario. 
Página HTML básica realizada con blog de notas. Temario SCM. CUM. UEx
Después seleccionamos "Archivo" > "Guardar como..." > Escribimos el nombre "MiPrimeraPagina.html" (es muy importante guardarlo en extensión ".htm" o ".html") y en la parte inferior, en la opción de "Codificación" seleccionamos "UTF-8".

Opciones de guardado para HTML. Elaboración Propia.

Ahora ya podemos abrir nuestra página web con el navegador, abrimos la carpeta donde hemos guardado el archivo, y observamos que el documento ya no tiene icono de un documento de texto, si no que aparece el símbolo del navegador predeterminado que utilizamos en nuestro ordenador. Clicamos y nuestra página web se abrirá en el navegador.

Los comentarios son un recurso importante a la hora de elaborar páginas web con HTML. Son líneas de texto incluidas en la estructura de la página web, que ayudan a documentar el código HTML. Sirven como notificaciones, indicaciones o recordatorios en el código HTML de la página. Estos comentarios solo se ven si abrimos el código fuente de la página web, nunca en el navegador. 
Para insertar un comentario se emplean las etiquetas "" al inicio y al final. 
Por ejemplo:

En el desarrollo del código HTML de nuestra página, es necesario tener algunas consideraciones en cuanto a formatos de texto. Para ello, existen blogs y páginas web con información extensa sobre este tipo de consideraciones, como por ejemplo:



Existen otros elementos más complejos que estructuran una página web en HTML. A continuación veremos algunos:

Listas ordenadas: Muestran un conjunto de elementos o sucesos con un orden estricto. Se crean con los pares de etiquetas

Listas no ordenadas: Muestran un conjunto de elementos relacionados entre sí, pero sin ningún orden. Se crean con los pares de etiquetas
Tablas: permiten organizar la información (texto, imágenes, mapas sensibles, hiperenlaces, listas, formularios e incluso otra tabla) en celdas organizadas en filas y columnas. Están definidas por las etiquetas y el comienzo de una fila de la tabla va marcado con la etiqueta y se finaliza con . Las celdas de una fila pueden ser cabeceras, con la etiqueta o Datos
Hipervínculos (o Links): es un enlace a un recurso Web (imágenes, sonidos, videos, documentos HTML). Normalmente aparecen subrayados y con un color distinto al resto del texto. 

Para incluir un hiperenlace de una página a otra se utiliza el formato: Texto , siendo "path" la dirección absoluta o relativa del recurso Web. La dirección absoluta está formada por el nombre del servidor Web que mantiene la página destino, más el nombre de esta (la URL). La dirección relativa define la ubicación de un archivo, basándose en la ubicación del documento actual (.../carpeta1/Archivo.htm).

Imágenes y Objetos: para incluir gráficos e imágenes se debe utilizar la etiqueta . Por ejemplo
De igual manera que ocurre con los formatos de texto, también podemos encontrar mucha información en internet sobre las instrucciones y recursos para la creación de listas, tablas, hipervínculos, imágenes, etc.

También se pueden incluir formularios web en nuestra página con HTML:

Elaboración de formularios con HTML. Temario SCM. CUM. UEx.

En la página web www.w3schools.com/default.asp se pueden encontrar más información, tutoriales y ejemplos sobre HTML, CSS y JavaScript, Estos dos últimos son conceptos sobre los que hablaremos en futuras entradas del blog.

Espero que esta entrada resulte de ayuda para todas esas personas que buscan adentrarse en el mundo de la programación de páginas web con HTML. ¡Hasta pronto!.

No hay comentarios:

Publicar un comentario