Codificación aprenderaprogramar.com: CU00727B
CREACIÓN DE UN PORTAL BÁSICO
En las próximas entregas, nos vamos a centrar en poner en marcha todos los conocimientos que hemos ido adquiriendo a lo largo del curso para crear un pequeño, y de momento modesto, portal web. Para ello, vamos a crear un portal muy básico incluyendo algo de maquetación.
En primer lugar crearemos una página de inicio o portada que contendrá lo siguiente: una cabecera, un menú, un cuerpo y un pié. No entraremos a explicar los temas de diseño ni las hojas de estilos que se suelen usar en páginas web ya que ahora trataremos de centrarnos en cuestiones básicas de HTML sin complicarlo con otros aspectos añadidos.
Lo que primero vamos a hacer es crear una estructura básica de página HTML. Respecto a los conocimientos que ya teníamos, añadimos la novedad de que a cada contenedor div le vamos a poner un nombre único (que no puede repetirse en otro contenedor) usando esta expresión. <div id="AquíElNombreDelContenedor"> … elementos … </div>
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Portal básico - aprenderaprogramar.com</title> </head> <body> <div id="page"> <div id="header"><!-- Aquí vendría el código de la cabecera --></div> <div id="wrapper"> <div id="menu"><!-- Aquí vendría el código del menú --></div> <div id="body"><!-- Aquí vendría el código del cuerpo --></div> </div> <div id="footer"><!-- Aquí vendría el código del pié --></div> </div> </body> </html> |
Básicamente, la estructura ya la tenemos montada, ahora lo necesario es ir definiendo cada uno de los elementos por separado y posteriormente unificarlos todos.
CABECERA
En nuestro caso la cabecera será tan simple que solo mostrará un texto. Puedes intentar complicarla añadiendo algunos botones, imágenes, campos de texto, o lo que creas oportuno.
|
<div id="header"> Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com </div> |
PIE
El pie también es similar en complejidad a la cabecera. En este caso, sólo mostraremos el copyright como texto. Se puede complicar añadiéndole imágenes, links, etc.
|
<div id="footer"> Copyright 2006-2072 aprenderaprogramar.com </div> |
MENÚ Y CONTENIDO PRINCIPAL (CUERPO)
En este caso en concreto, el menú que vamos a crear irá en un contenedor div y el contenido principal en otro contenedor div. Para ello tendremos que usar tantas etiquetas div como resulten necesarias.
|
<!-- contenedor --> <div id="wrapper"> <!-- menu --> <div id="menu"> <div>Menú</div> <hr style="color:red; background-color:red; width:50%;" /> <ul> <li><a href="#">Portada</a></li> <li> <a href="http://www.aprenderaprogramar.com">aprenderaprogramar.com</a> </li> </ul> </div> <!-- fin menu --> <!-- cuerpo --> <div id="body"> <p> Al hablar de fundamentos de programación nos referimos a aquellos conocimientos básicos que nos permitirán desenvolvernos sin excesivo número de tropiezos. Veamos a qué tipo de tropiezos nos referimos utilizando un símil de transporte. El conductor (programador) dispone de un coche (el ordenador) y desea trasladarse </p> </div> <!-- fin cuerpo --> </div> <!-- fin contenedor --> |
La expresión <href="#">Portada</a> significa que hacemos un link a #. El símbolo # es obvio que no es una URL, lo que significa es “link a la misma página que estamos visualizando”.
El código resultante de todo el proceso, más algunos detalles básicos de diseño (no te preocupes si no entiendes algunos elementos definidos con style, lo importante es comprender el código y estructura HTML), sería el que se muestra a continuación. Abre un editor como Notepad++, escríbelo y guárdalo con un nombre como ejemplo1.html. A continuación, visualiza el resultado en tu navegador.
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Portal básico - aprenderaprogramar.com</title> </head> <body> <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid gray;"> <div id="header"> Portal (Tutorial básico del programador web: HTML desde cero) - aprenderaprogramar.com </div> <!-- contenedor --> <br /> <br /> <br /> <div id="wrapper"> <!-- menu --> <div id="menu"> <div>Menú</div> <hr style="color:red; background-color:red; width:50%;" /> <ul> <li><a href="#">Portada</a></li> <li> <a href="http://www.aprenderaprogramar.com">aprenderaprogramar.com</a> </li> </ul> </div> <!-- fin menu --> <!-- cuerpo --> <div id="body"> <p> Al hablar de fundamentos de programación nos referimos a aquellos conocimientos básicos que nos permitirán desenvolvernos sin excesivo número de tropiezos. Veamos a qué tipo de tropiezos nos referimos utilizando un símil de transporte. El conductor (programador) dispone de un coche (el ordenador) y desea trasladarse </p> </div> <!-- fin cuerpo --> </div> <!-- fin contenedor --> <br /> <br /> <br /> <div id="footer"> Copyright 2006-2072 aprenderaprogramar.com </div> </div> </body> </html> |
Si abrimos la página HTML del ejemplo anterior obtendremos una visualización similar a la siguiente:
Si tuviéramos unos conocimientos más amplios en maquetación y hojas de estilo (CSS), fácilmente podríamos conseguir convertir la página anterior en una algo más vistosa. No vamos a entrar ahora en describir cómo.
EJERCICIO
Define la estructura de un portal web que conste de:
a) Una cabecera con una imagen, un texto h1, y otra imagen que a su vez sea un link.
b) Un cuerpo con un menú que contenga 5 items, una imagen y dos párrafos.
c) Un pie que contenga una imagen, un copyright y un texto que sea a su vez un link.
Para comprobar si tus respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.
Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link: Ver curso completo.
Para hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.
