id HTML. Creación de un portal básico. Cabecera, cuerpo, pie.
© aprenderaprogramar.com, 2006-2029
APRENDERAPROGRAMAR.COM
I...
id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
ATRIBUTO ID HTML
En primer lugar crearemos una página de inic...
id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
CABECERA
<div id="header">
Portal Web Personal de Programació...
id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
En nuestro caso la cabecera será tan simple que solo mostrará...
id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
<!-- contenedor
-->
<div id="wrapper">
<!-- menu -->
<div id=...
id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
La expresión <a href="#">Portada</a> significa que hacemos un...
id HTML. Creación de un portal básico. Cabecera, cuerpo,pie.
1.Realiza los siguientes ejercicios en Bloc de Notas
siguiend...
of 7

Portal web basico

Creación Sitio Web Básico
Published on: Mar 4, 2016
Published in: Education      
Source: www.slideshare.net


Transcripts - Portal web basico

  • 1. id HTML. Creación de un portal básico. Cabecera, cuerpo, pie. © aprenderaprogramar.com, 2006-2029 APRENDERAPROGRAMAR.COM ID HTML. CREACIÓN DE UN PORTAL WEB BÁSICO. PÁGINA PRINCIPAL. CABECERA, MENÚ, CUERPO Y PIE.
  • 2. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie. ATRIBUTO ID HTML 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> 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. <html> <head> <meta charset="utf-8"> <title>Portal básico – CIC Santa Tecla</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>
  • 3. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie. CABECERA <div id="header"> Portal Web Personal de Programación </div> Continúa en la siguiente página
  • 4. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie. 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.ç 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. 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. <div id="footer"> Copyright 2015 By “Escribe tu nombre” </div> Continúa en la siguiente página
  • 5. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie. <!-- 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.cic.edu.sv"> CIC Santa Tecla </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 -->
  • 6. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie. La expresión <a 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 tunavegador. <html> <head> <meta charset="utf-8"> <title>Portal Web Personal</title> </head> <body> <div id="page" style="width: 980px; text-align: center; margin: auto; border: 2px solid gray;"> <div id="header"> Portal Web Personal de Programación </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">aprende raprogramar.com </a>
  • 7. id HTML. Creación de un portal básico. Cabecera, cuerpo,pie. 1.Realiza los siguientes ejercicios en Bloc de Notas siguiendo las indicaciones correspondientes a cada ejercicio. 2.Copia el código de cada ejercicio en tu cuaderno. 3.Elabora un cuestionario (Pregunta y Respuesta) en tu cuaderno de 10 preguntas sobre este material; posteriormente pon en práctica lo aprendido. 4.Cuando hayas realizados todos lo anterior debes hacer lo siguiente: Crea una página Web que contenga lo siguiente el tema de la pagina es libre. 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. </div> <!-- fin contenedor --> <br /> <br /> <br /> <div id="footer"> Copyright 2015-2070 By “Escribe tu nombre” </div> </div> </body> </html>