Este es el primero de una serie de post en los que abordaremos el diseño de paginas web, desde el comienzo, pero para hacerlos mas apegados al desarrollo actual, usaremos desde un principio las reglas de CSS para dar estilo a las paginas, para omitir las etiquetas y atributos de formato que se usaban en versiones anteriores, pues de todas formas las reglas de desarrollo actual ya no contemplan que se usen, pero que los navegadores aun reconocen, así que primero comenzaremos con el texto.
Estructura principal de una pagina
HTML no es un lenguaje de programación, es un lenguaje de descripción de documentos basados en etiquetas, las cuales son palabras claves encerradas entre los símbolos < y >, las cuales sirven para marcar elementos o partes del documento.
Las etiquetas en su mayoria funcionan en pares, en donde hay una etiqueta de apertura y una etiqueta de cierre con su mismo nombre pero, con la diagonal antes del nombre, de la forma:
- < etiqueta > </ etiqueta >
aunque algunas se cierran a si mismas colocando la diagonal antes del signo >.
- <etiqueta />
Como podemos ver en la imagen anterior, toda pagina web hecha con HTML 5 comienza con la etiqueta doctype, la cual se simplifico en esta versión y le indica al navegador que la pagina que va a presentar corresponde a una pagina de HTML 5.
Toda pagina web consta de una estructura jerárquica en la que la etiqueta html, indica que lo que ella esta encerrando es una pagina web, en donde toda pagina se divide en dos secciones principales (cada una enmarcada en su etiqueta correspondiente:
- encabezado (head): en esta parte se colocan etiquetas que indican enlaces a recursos que la pagina puede usar, así como etiquetas que describen la configuración regional y para los buscadores sobre la pagina.
- cuerpo (body): con esta etiqueta se marca el cuerpo principal de la pagina, es decir, la parte visible, dentro de estas etiquetas se colocan los textos y las etiquetas que indican en donde se colocaran los elementos multimedia y de datos de la pagina.
En el ejemplo que tenemos se puede ver la etiqueta title, la cual encierra el texto que servirá de titulo para la pagina y que aparecerá en la barra de titulo del navegador, de la misma forma se observa la etiqueta meta que nos permite configurar ciertos parámetros regionales y de búsqueda, en este caso indica al navegador que el contenido de este documento es una pagina html con una codificación de caracteres UTF-8 la cual nos permite mostrar la letra «ñ» dentro de la pagina.
Trabajando con texto
Como una pagina web es en si, un archivo de texto plano, estos carecen de conceptos como bordes, renglones y saltos de pagina, por lo que para colocar un texto, necesitamos de ciertas etiquetas que nos ayuden a dar forma al texto, en este caso, serán las etiquetas:
- p: indica que el texto encerrado entre ellas es un párrafo y debe mantenerse unido, los saltos de linea los determina el espacio en pantalla y la cantidad de texto, ademas de que por defecto dejan un espacio al final del texto.
- br : se emplea para marcar un salto de linea, de tal forma que lo que este después de ella se ira a la siguiente linea, colocar dos o mas de ellas, hace que se dejen lineas en blanco.
En el siguiente ejemplo podemos ver un ejemplo de su uso.
En la imagen anterior, del lado izquierdo tenemos el código en HTML y del lado izquierdo el resultado del código, como puede ver en la parte final el uso de la etiqueta br forza a que el texto que le sigue pase a la siguiente linea, así mismo, podemos notar que la etiqueta br, no tiene una etiqueta de cierre.
La etiqueta p como vemos enmarca los párrafos dándonos la ventaja de que estos se ajustan al tamaño de la venta de forma automática, principio fundamental del responsive design (diseño adaptativo) , en el que una pagina web se debe ajustar de forma automática para su mejor presentación, al tamaño de cualquier pantalla, ya sea, computadora, tablet, smartphone o TV.
El siguiente es el archivo de ejemplo que estamos usando
http://www.mediafire.com/view/vnmopfvdh403bpw/ejemplo1.html
Sistemasumma.com 