25 de octubre de 2016

Programación básica de HTML: Nuestra primera página

En una primera clase de TIC hemos aprendido a programar en HTML (Hyper Text Markup Language).
HTML es un lenguaje que leen los navegadores y que se encargan de interpretar el código y traducirla para que el usuario pueda verla. En esta entrada veremos como empezar a programar un documento HTML.

Estos documentos se basan en una programación de etiquetas ( <> </> ), y todo archivo HTML comenzará con lo siguiente:

 

Estas etiquetas informan al navegador de que lo que comienza a traducir es un documento HTML. Tras esto podemos comenzar a programar nuestra pagina. Un documento HTML tiene una parte donde informa de como es la pagina es decir nombre, dirección, etc y una parte donde se encuentra el contenido de la pagina conocido como cuerpo (body). Para ello escribiremos los siguiente:

Centrémonos en la cabeza (head), ahora queremos configurar el nombre de nuestra pagina web, para ello escribiremos lo siguiente:

Veamos como queda si abrimos nuestro documento .html:

Como vemos nuestra página no tiene ningún contenido pero ya tiene nombre. Pasemos al cuerpo (body) de nuestro documento HTML donde aparecerá el contenido que queremos. Primero pondremos una imagen de fondo siguiendo este código:

Donde está escrito "Imagen que queremos añadir y donde se ubica" , tenemos que introducir la ubicación de la imagen que queramos añadir que este ubicada en nuestro ordenador. Recomiendo crear una carpeta donde introducir todas estas imágenes. Por ejemplo:


Mis archivos están alojados en la carpeta IMG y se llama IMG_01 con la extensión .jpg. MUY IMPORTANTE que aparezca la extensión. Nuestra web se vería así:


Ahora nos toca añadir textos y títulos. Para ello tenemos una multitud de comandos que podemos combinar pero que funcionan igual. Los comando son:

Títulos: <h1><h2><h3><h4><h5><h6> 


Párrafos: <p> </p>


Letras más detalladas: <font...> </font>


Para poner en negrita, cursiva o subrayado cualquier texto:


Podemos ver su uso:


Y nos quedaría así:


Recordar que todos los comando que abramos <> hay que cerrarlos </>  y que nuestro código HTML esté lo más ordenador posible. 
Leer mas..