Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 113

Visitas el mes pasado: 47

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




8. Listas (I)

8.1. Contenido

Paso 20

logo miweb

La segunda página

En el resto de este manual vamos a ir creando las demás páginas que formarán nuestra web. El lenguaje HTML, con el que se muestra el contenido de la página, no sólo consiste en poder poner texto, imágenes y enlaces en la página, sino que tiene también otra serie de recursos para poder organizar y ver los contenidos de la página de otras formas.

Uno de estos recursos es poder mostrar los elementos formando listas. Esto es lo que veremos en esta segunda página de nuestra web.

Organizar la página

Lo primero que haremos será crear el archivo de la segunda página de nuestra web. Para ello abrimos el archivo plantilla.html con el editor de textos, y lo guardamos con un nuevo nombre. En la barra superior pulsamos en "Archivo" y luego en "Salvar Como" (en HTML-Kit), o "Guardar Como" (en el Block de Notas). Al guardar el archivo lo llamamos listas.html. Comprueba que guardas el archivo en la carpeta raíz de la web.

A partir de aquí trabajaremos con este archivo (listas.html). El cual una vez abierto con el editor de textos, vamos a modificarlo.

Cambios en la etiqueta head

Una vez que tenemos abierto el archivo listas.html en el editor de textos, vamos a modificarlo para que sea reamente la segunda página. Abrimos el archivo con el editor de textos y hacemos algunos cambios en la etiqueta head, la cual quedará así:

 <head>
    <link rel="stylesheet" type="text/css" href="general.css" />
    <link rel="stylesheet" type="text/css" href="listas.css" />
    <title>Listas en Mi Propia Web</title>
  </head>

Los cambios que hemos hecho vienen marcados en color azul, y son los siguientes:

Tal como vemos podemos poner enlaces a varios archivos CSS. En este caso pondremos siempre en primer lugar los archivos que tengan estilos de caracter más general y después los que tengan estilos más específicos.

Cambios en la etiqueta body

La etiqueta body, donde ponemos el cuerpo visible de la página, la tenemos dividida en varias secciones o "divs". La única sección que modificaremos será la sección "principal", es decir la etiqueta:

<div id="principal"> </div>

Dentro de esta etiqueta pondremos todo el contenido nuevo que veremos aquí. El resto de secciones se quedan tal como están, pues ya las tenemos hechas en la plantilla.

Etiquetas para listas

En el contenido de la página incluiremos varias listas, sin embargo lo primero que vamos a ver son las etiquetas que tenemos en el lenguaje HTML para crear listas.

en primer lugar utilizaremos la etiqueta <ul>...</ul> para indicar el comienzo y el final de la lista.

Dentro de esta etiqueta pondremos para cada elemento de la lista una etiqueta <li> ... </li> que indica el comienzo y final del elemento.

Un ejemplo de lista podría ser el siguiente:

<ul>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ul>

Toda la lista está englobada por la etiqueta <ul></ul> mientras que cada elemento se define mediante una etiqueta <li></li>.

Contenido de la página

Vamos a rellenar con contenido la etiqueta div id="principal" de la página. Abrimos el archivo listas.html y empezamos a escribir dentro del div id="principal":

  <div id="principal">
  <h2>Aprendiendo a hacer listas</h2>
  <p>Como ya he aprendido a hacer listas para las páginas web, incluiré en esta página dos listas.</p>
  <p>En la primera de ellas pondremos los países más poblados del mundo, y en la segunda los 
     idiomas más hablados del mundo. El número que ponemos después del nombre del país indica los 
     millones de personas.</p>
  <p>Para la lista de idiomas el número indica sólo las personas que tienen ese idioma como lengua materna
     o primera lengua, y no a aquellos que aunque saben hablarlo, no lo tienen como su primera lengua.</p> 
		 
  </div>

Hemos incluido en el cuerpo principal de la página un título y dos párrafos. Ahora incluiremos la primera lista, para ello, justo debajo del último párrafo, es decir entre el último párrafo y la etiqueta de cierre </div> . Toda la lista la lista, incluido su título, la pondremos dentro de una etiqueta div de clase (con el atributo class). Insertamos por lo tanto en el sitio indicado el siguiente contenido:

  <div class="lista">
    <h3>Países más poblados del mundo</h3>
    <ul id="paises">
      <li>China : 1360.</li>
      <li>India : 1268.</li>
      <li>Estados Unidos : 316.</li>
      <li>Indonesia : 250.</li>
      <li>Brasil : 202.</li>
      <li>Paquistán : 186.</li>
      <li>Nigeria : 177.</li>
      <li>Bangladés : 155.</li>
      <li>Rusia : 143.</li>
      <li>Japón : 127.</li>
      <li>México : 119.</li>
      <li>Filipinas : 99.</li>
    </ul>
  </div>

Tal como hemos indicado, todo este contenido debe ir después del último párrafo y antes de la etiqueta de cierre del div id="principal". el contenido consiste en un "div" con un título y una lista. Fijáte que a la etiqueta de lista (ul) le hemos puesto un atributo id. Esto nos servirá para diferenciarla de otras listas al aplicarle el estilo CSS.

Ahora pondremos una segunda lista, justo a continuación de la anterior. La estructura de etiquetas es la misma, y la pondremos debajo de la que ya tenemos, y antes de la etiqueta de cierre del div id="principal". Insertamos en el sitio indicado el siguiente código:

  <div class="lista">
  <h3>Idiomas más hablados en el mundo</h3>
  <ul id="idiomas">
    <li>Chino mandarín : 1151.</li>
    <li>Español : 420.</li>
    <li>Inglés : 375.</li>
    <li>Hindi : 311.</li>
    <li>Árabe : 250.</li>
    <li>Portugués : 216.</li>
    <li>Ruso : 146.</li>
    <li>Japonés : 127.</li>
    <li>Alemán : 98.</li>
    <li>Francés : 77.</li>
    <li>Coreano : 76.</li>
    <li>Italiano : 60.</li>	
  </ul>
  </div>
  <div class="vacio"></div> 

La estructura de esta segunda lista es igual que la de la primera, lo único que cambia es el texto, ya que la estructura de etiquetas es la misma.

Después de las dos listas hemos puesto también un div id="vacio", tal como hemos hecho en otras secciones de la página. Esto impide que los elementos que se posicionen en flotante se salgan de su contenedor.

Una vez que hemos escrito todo el código anterior en el sitio indicado, cerramos y guardamos el archivo listas.html, y comprobamos el resultado. Para ello abrimos el archivo listas.html con el navegador, el cual debe quedar como el del siguiente enlace:

El contenido que hemos incluido en la página ha tomado el estilo por defecto, En el siguiente paso pondremos estilo a esta parte de la página.

El archivo listas.html está ya completo. Por si algo no ha quedado claro o tal vez el resultado tuyo no es el mismo que tenemos nosotros, dejamos en el siguiente enlace una página donde se muestra el código completo del archivo:

Tenemos ya el texto o contenido de la página, nos queda por hacer la maquetación y el estilo. todo ello lo veremos en la siguiente página de este manual.




el siguiente paso es maquetar y dar estilo al contenido principal de esta página.

Estilo de listas




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com