lunes, 23 de enero de 2017

Creación web, ejercicio 2: Hoja de estilos

Para evitar tener que teclear todo el estilo en cada una de las páginas, éste suele definirse en un archivo aparte, con la extensión "css", al que enlazan cada una de las páginas. Para ello, en el <head> de cada una de ellas debe aparecer la siguiente etiqueta:


<link href="estilo.css" rel="stylesheet" type="text/css" />

En un archivo css los estilos se definen así:

elemento {
 propiedad: valor;
 propiedad: valor;


Vamos a dar estilo a la página web creada en el ejercicio anterior a través del archivo css:

  • El color de fondo de la página puede definirse así:
 body {
      background-color: gray;
 }

  • el color de fondo de un elemento con un identificador (por ejemplo, la división encabezado, <div id="encabezado">):
#encabezado {
     background-color: blue;
}

  • Los estilos de la barra de navegación se definirán así:
#navegacion {
     background-color:blue;
}

#navegación ul {
     list-style-type:none;
}

#navegacion li {
     display: inline;
}

#navegacion a {
     text-decoration: none;
}

En cuanto a los elementos que aparecen en el contenido, tenemos tres tipos de párrafos que se repiten varias veces (los normales, los que contienen las imágenes, y los pies de foto).

En una página web un identificador sólo puede aparecer en un elemento. Para poder definir estilos que se repiten varias veces pueden identificarse con una clase. Las clases si pueden aparecer varias veces en una misma página web. Por ejemplo, podemos identificar los párrafos normales así:

<p class="normal">

los pies de foto así:

<p class="piefoto">

y los de las imágenes así:

<p class="imagen">

En un archivo css a las clases se les define el estilo así:

.normal {
     font-size: 14px;
     color: red;
}

.piefoto {
     font-size: 10px;
     color: gray; 
     text-align: center;
}

.imagen {
     text-align:center;
}

En este ejercicio deberás quitar todos los estilos de la página web que creaste y ponerlos en un archivo css.

Además, deberás crear el resto de páginas web de tu sitio.

martes, 10 de enero de 2017

Etiquetas HTML y estilos CSS


Pincha en la imagen para ampliarla

Creación web: ejercicio 1

El primer ejercicio consiste en realizar una página web que debe contener:

  1. Una división para el encabezado.
  2. Una división para la navegación.
  3. Una división para el contenido.

A la división encabezado se le dará estilo (por ejemplo, un color de fondo) y deberá contener una imagen.

En la división navegación aparecerán los vínculos a otras páginas, tal y como se explica en esta entrada.

En la división contenido deberá incluirse al menos:

  • Un título (<h1></h1>)
  • Varios párrafos (al menos tres) (<p></p>), para los que se definirá un estilo (por ejemplo, un color o un tamaño de letra)
  • Varias imágenes (al menos tres), que deberán alinearse al centro.
  • Cada imagen llevará un pie de foto. Éste será un párrafo con un estilo diferente a los anteriores (tamaño de letra más pequeño, y alineación centrada).
En esta otra entrada aparece una tabla con las principales etiquetas html y los principales estilos css.