Ejercicios para aprender html y css:
 |
| daPhyre / CC-BY 3.0 |
Mostrando entradas con la etiqueta css. Mostrar todas las entradas
Mostrando entradas con la etiqueta css. Mostrar todas las entradas
miércoles, 21 de octubre de 2020
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:
background-color: gray;
}
background-color: blue;
}
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.
<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í:
background-color: gray;
}
- el color de fondo de un elemento con un identificador (por ejemplo, la división encabezado, <div id="encabezado">):
background-color: blue;
}
- Los estilos de la barra de navegación se definirán así:
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
Creación web: ejercicio 1
El primer ejercicio consiste en realizar una página web que debe contener:
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:
- Una división para el encabezado.
- Una división para la navegación.
- 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).
lunes, 19 de diciembre de 2016
Superlentes de Rayos X de Mozilla
Este ejercicio consiste en remezclar una página web mediante la herramienta "superlentes de rayos X" de Mozilla. Para ello se elegirá la página web que se desee y:
Desde este otro enlace pueden instalarse las superlentes.
En este vídeo se explica su funcionamiento:
- se cambiarán al menos dos imágenes
- se introducirán al menos dos imágenes nuevas
- se cambiarán al menos tres textos
- se cambiarán al menos tres vínculos
- se cambiará el estilo de los elementos modificados.
Desde este otro enlace pueden instalarse las superlentes.
En este vídeo se explica su funcionamiento:
miércoles, 21 de septiembre de 2016
Cómo hacer una barra de navegación para la web
Para hacer una barra de navegación primero elaboraremos una lista con los enlaces. Las etiquetas de lista son <ul></ul> para una lista desordenada (unordered list, de viñetas) o <ol></ol> para una lista ordenada (ordered list, de números). En principio podemos usar cualquiera, pues posteriormente le quitaremos las viñetas o los números. Cada elemento de la lista debe ir entre las etiquetas <li></li> (list item):
Posteriormente añadiremos los vínculos, con las etiquetas <a></a>:
Ahora quitaremos las viñetas. Para ello habrá que dar estilo a las etiquetas <li>, de esta manera: <li style="list-style-type:none;>:
Si deseamos que la navegación quede en línea, en lugar de hacia abajo, añadiremos al estilo de las etiquetas <li> la propiedad display con el valor inline:
Por último, si no queremos que los vínculos aparezcan subrayados, daremos estilo a las etiquetas <a>, de esta manera: <a style="text-decoration:none;>:
Posteriormente añadiremos los vínculos, con las etiquetas <a></a>:
Ahora quitaremos las viñetas. Para ello habrá que dar estilo a las etiquetas <li>, de esta manera: <li style="list-style-type:none;>:
Si deseamos que la navegación quede en línea, en lugar de hacia abajo, añadiremos al estilo de las etiquetas <li> la propiedad display con el valor inline:
Por último, si no queremos que los vínculos aparezcan subrayados, daremos estilo a las etiquetas <a>, de esta manera: <a style="text-decoration:none;>:
Suscribirse a:
Entradas (Atom)