Algo sencillo
Vamos a crear nuestra primera pagina web usando el block de notas o notepad++. Para ello:
En cualquier espacio libre del escritorio de windows, hacemos click (botón derecho del mouse) y seleccionamos del menú contextual que aparece la opción: Nuevo/Documento de texto.
A este documento de texto le damos el nombre de index. Hecho esto, el archivo se mostrará en el escritorio comoindex.txt.
Abrimos el archivo recién creado (click izquierdo) y lo editamos escribiendo: mi página web. Guardamos los cambios y cerramos el archivo
Ahora debemos cambiar la extensión de este archivo. Para ello hacemos click (botón derecho) sobre el, seleccionamosCambiar nombre y reemplazamos la extensión txt por html.
Ante la advertencia de si estamos seguros de querer cambiar la extensión del archivo y correr el riesgo de que este quede inutilizado respondemos que si.
Finalizado este proceso tendremos en nuestro escritorio el archivo index.html.
Abrimos el archivo (click izquierdo) y se abrirá el navegador de internet que tengamos predeterminado, mostrando el resultado de la creación de nuestra primera página web.
Puede observarse que el nombre del archivo index.html es mostrado en la pestaña del navegador.
Etiquetas html5
Una página web es en esencia un documento de texto diseñado para ser procesado por un navegador de internet. Por esta razón se le asigna la extensión html, independientemente del procesador de texto con el cual se haya creado.
Las etiquetas html5 permiten al navegador procesar el texto contenido entre ellas de diferente manera y el resultado de esta interpretación es la apariencia que presenta la página web al ser cargada.
Sintaxis de las etiquetas html5
La gran mayoria de las etiquetas html5 contienen una sentencia de inicio y una de cierre:
<etiqueta></etiqueta>
Adaptando nuestra primera página web a la normativa html5
Procedamos a abrir con el block de notas nuestra primera página web (click derecho sobre el archivo index.html), que contiene como único párrafo:
mi página web
Esto, aunque funciona (puesto que el navegador muestra su contenido como una página web) no cumple con la normativa html5 y será suficiente si nuestra espectativa es crear un documento web con un solo párrafo. Por lo tanto para ampliar nuestras posibilidades vamos a crearle a nuestro documento una estructura html5 adecuada.
<!DOCTYPE html>
Esta instrucción le indica al navegador que el documento debe procesarse según la codificación html5.
Esta es la primera declaración que debe tener todo documento html. Escribimos entonces esto en nuestro documento y tendremos:
<!DOCTYPE html>
mi página web
mi página web
Sintaxis: todas las etiquetas pueden escribirse en mayúsculas, minúsculas ó mixto. De manera que es igualmente correcto:
<!doctype html>
<!dOcTyPe HtmL>
<!doctype html>
<!dOcTyPe HtmL>
Etiqueta párrafo: <p></p>
Se utiliza para crear párrafos en el documento.
El estandar html5 incluye la novedad de que no es necesario el uso de las etiquetas de cierre</p> (asi como pueden omitirse las etiquetas de cierre en otros casos); no obstante, también establece que no es incorrecto seguirlas utilizando.
Incluímos la etiqueta escribiendo:
<!DOCTYPE html>
<p>mi página web
<p>mi página web
Etiquetas estructurales
Sirven para establecer la estructura general del documento web. Su uso es mas de proceso interno del navegador. Las principales, que debe incluir todo documento web son html, head y body:
Contenido html: <html></html>
Le indica al navegador donde comienza y termina el contenido html del documento.
En realidad todo el documento debe estar contenido entre las etiquetas <html></html>, con la única excepción de la instrucción <!DOCTYPE html>
Incluimos esta nueva etiqueta escribiendo:
<!DOCTYPE html>
<html>
<p>mi página web
</html>
<html>
<p>mi página web
</html>
Atributos de las etiquetas html
Son instrucciones que se anexan a las etiquetas html para agregarles funcionalidades.
La etiqueta <html> soporta el atributo lang, por medio del cual se le indica al navegador el idioma en que está escrita la página. El parámetro de este artributo para el español es: es
Anexamos este atributo como se muestra:
<!DOCTYPE html>
<html lang=es>
<p>mi página web
</html>
<html lang=es>
<p>mi página web
</html>
Encabezado del documento: <head></head>
Delimita el encabezado de la página web. La información contenida en esta sección es para procesamiento interno del navegador y permanecerá (salvo ciertas excepciones) oculta al usuario:
Agregamos esta etiqueta escribiendo:
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<p>mi página web
</html>
<html lang=es>
<head>
</head>
<p>mi página web
</html>
Cuerpo del documento: <body></body>
Delimita el cuerpo del documento. En esta sección se incluye todo el contenido de la página que será mostrado al usuario:
La incluímos escribiendo:
<!DOCTYPE html>
<html lang=es>
<head>
</head>
<body>
<p>mi página web
</body>
</html>
<html lang=es>
<head>
</head>
<body>
<p>mi página web
</body>
</html>
Con esto finalizamos la edición de nuestro archivo index.html y procedemos a guardar los cambios y cerrarlo.
Estructura de una página web
Las etiquetas estructurales html, head y body deben estar presentes en todo documento html, aunque estén vacias (no se defina ningún contenido entre ellas).
Abriendo ahora nuestra página web con el navegador (click izquierdo), podremos observar que se muestra exactamente igual que antes. No obstante ahora tiene una estructura interna preparada que nos permitirá agregarle contenido y mejorar su apariencia aprovechando las potencialidades de las nuevas etiquetas html5 que iremos aprendiendo.
Tips de repaso
- Un documento html es un documento de texto con la extensión .html
- Para editarlo lo abrimos (click derecho) con cualquier editor de texto, como por ejemplo: block de notas
- Si lo abrimos normalmente (click izquierdo), se abrirá como página web, con el navegador de internet que tengamos predeterminado
- En todo documento html debe definirse la estructura básica; html, head y body
- El estudio de las etiquetas html, sus atributos y parámentros, nos capacitará para mejorar significativamente la apariencia y funcionalidad de nuestros sitios web
Lo que sigue
En la sección siguiente se exponen las etiquetas básicas que debemos incluir en el encabezado de nuestras páginas html, o sea entre las etiquetas:
<head>
</head>
</head>
Luego se inicia el estudio de la redacción del contenido de nuestro sitio web, entre las etiquetas:
<body>
</body>
</body>
Lo cual es el objetivo principal que motiva todo este proceso de aprendizaje y se centra básicamente en el estudio de las etiquetas html, sus atributos y parámetros principales.
Paralelamente, se expondrá la elaboración de archivos css3 (.css) utilizados para estandarizar el formato de todas las páginas html contenidas en nuestro sitio web.
Encabezado del documento: <head></head>
Contiene, entre otras cosas, información clave del documento para que la página sea encontrada por los motores debúsqueda de internet. De la información que se coloque en esta sección dependerá que nuestra página sea encontrada e incluída entre los resultados de los buscadores:
Ejemplo: Si estoy elaborando un sitio web de la cátedra de Sistemas de Representación. Las características claves de este sitio pueden ser:
- Título: Sistemas de Representación
- Descripción: Sitio dedicado al estudio de los sistemas de representación gráfica.
- Palabras clave: geometría, proyección, ortogonal, diedro, punto, recta, plano, poliedro, rebatimiento. No deben colocarse excesivas palabras ya que la mayoría de los buscadores consideran solamente las 20 primeras.
- Autor: Alberto M. Pérez G.
Esta información se coloca mediante las siguientes etiquetas:
<title></title>
Define el título de documento. Este título no se mostrará en el cuerpo del documento.
El documento debe tener una sola etiqueta <title></title>.
<title>Sistemas de Representación</title>
El contenido de la etiqueta <title>:
- Será mostrado en la pestaña del navegador.
- Será mostrado en el listado de favoritos del navegador después de haber anexado la página en esa clasificación.
- Será mostrado entre los resultados de un motor de búsqueda una vez que la página sea encontrada.
<meta>
Tiene la sintáxis:
<meta name='atributo' content='contenido del atributo'>
Puede haber varias etiquetas <meta> en un documento web. Crearemos 3, para incluir los aspectos:
- descripción
- palabras clave
- autor
description
<meta name='description' content='Sitio dedicado al estudio de los sistemas de representación gráfica'>
Sintaxis: Las comillas en los atributos de las etiquetas y/o en la descripción del contenido del atributo, solo son de uso obligatorio si entre ellas quedarían encerrados espacios en blanco o alguno de los caracteres: " ' ` = < >. Cuando este sea el caso pueden utilizarse comillas sencillas (' ') o dobles (" "), en caso contrario pueden omitirse.
Entonces la sentencia puede también escribirse:
<meta name=description content="Sitio dedicado al estudio de los sistemas de representación gráfica">
keywords
<meta name='keywords' content='geometría, proyección, ortogonal, diedro, punto, recta, plano, poliedro, rebatimiento'>
author
<meta name='author' content='Alberto M. Pérez G.'>
Una mas muy importante
<meta charset=ISO-8859-1>
Esta etiqueta capacita al navegador para interpretar correctamente los caracteres y signos de lenguajes latinos como el español, portugués, alemán, francés y otros.
Si no incluímos esta etiqueta, corremos el riesgo de que en ciertas circunstancias estos caracteres sean mostrados como signos extraños. Por ejemplo el párrafo:
niño, ácido, acné, ¿porqué?, ¡caramba!, cigüeña.
podría ser mostrado:
Estructura definitiva de la página de Sistemas de Representación
El documento index.html creado con el block de notas tendrá entonces la siguiente redacción:
<!DOCTYPE html>
<html lang=es>
<head>
<title>Sistemas de Representación</title>
<meta name='description' content='Sitio dedicado al estudio de los sistemas de representación gráfica'>
<meta name='keywords' content='geometría, proyección, ortogonal, diedro, punto, recta, plano, poliedro, rebatimiento'>
<meta name='author' content='Alberto M. Pérez G.'>
<meta charset='ISO-8859-1'>
</head>
<body>
<p>El estudio de los sistemas de represntación...
</body>
</html>
<html lang=es>
<head>
<title>Sistemas de Representación</title>
<meta name='description' content='Sitio dedicado al estudio de los sistemas de representación gráfica'>
<meta name='keywords' content='geometría, proyección, ortogonal, diedro, punto, recta, plano, poliedro, rebatimiento'>
<meta name='author' content='Alberto M. Pérez G.'>
<meta charset='ISO-8859-1'>
</head>
<body>
<p>El estudio de los sistemas de represntación...
</body>
</html>
La página será mostrada por el navegador de la siguiente manera:
Puede obsevarse que el título de la página Sistemas de Representación es mostrado en la pestaña del navegador, en vez del nombre del archivo index.html como sudedería por defecto si so se encuentra la etiqueta <title>.
Todas las páginas web deben tener como mínimo la estructura básica expuesta.
0 Comentarios