Estructura y diseño web de una página
En la actualidad una de las primeras cosas a tener en cuenta cuando desarrollamos una página web es que sea compatible con todos los dispositivos móviles que existen actualmente. El teléfono, la tableta, el ordenador son algunos ejemplos.
Últimamente oímos muchos los términos ingleses: adaptative o responsive. Parece algo complicado que no entendemos, pero no es tan difícil como parece. Para que nuestra página se adapte a todos loas tamaños de pantalla tan solo debemos tener algunos aspectos presentes antes de empezar a diseñar nuestra página web.
Estructura de la página web:
Primero debemos crear la estructura de nuestra página. En el siguiente artículo de diseño web veremos como crear una página web sencilla. Por ejemplo nuestro diseño web constará de los siguientes elementos:
– Sección que describa nuestro producto o servicio.
– Un formulario para que se pueda enviar información de contacto.
– Un video donde se pueda explicar de una forma visual nuestro producto o servicio.
– Imágenes.
– Una tabla donde se recojan las características principales del producto.
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>CS256: Mobile Web development - structure</title> </head> <body> <div id="headline"> <header> <h1></h1> <p></p> </header> <div id="blurb"> <p></p> <ul> <li> </ul> </div> <form method="post" id="register"> </form> </div> <div id="section1"> <h2></h2> <p></p> <ul> <li> </ul> <video></video> </div> <div id="section2"> <h2></h2> <p></p> <div id="images"> <img> </div> </div> <div id="section3"> <h2></h2> <p></p> </div> <footer> <p></p> </footer> </body> </html>
Vamos a utilizar esta estructura predefinida para la creación de nuestra página web.
Podemos apreciar en la estructura que el documento está dividido en un header, un footer y en divs. En diseño web cada elemento tiene su función.
Por ejemplo usaremos el header es para introducir toda la información relevante del documento pero que no será visible en la ventana de nuestro navegador.
Para crear nuestro diseño web vamos a utilizar el lenguaje de marcas HTML, este lenguaje es muy fácil de usar, tan solo debemos escribir en una archivo todos los elemntos que queremos que tenga nuestra página web.
<p>Esto es un texto</p> <h1>Esto es el título principal de la página</h1> <h2>Esto es un título un poco menos importante</h2> <h3>Y este todavía un poco menos, podemos estar así hasta llegar a h6</h6> <form>Esto es un formulario</form>
