Diseño Web Con HTML5 y CSS3 - G Sanchez Cano PDF

Para más inf ormación sobre esta y otras publicaciones f av or
dirigirse a:
Colectiv o El Venado
colectiv oelv enado@gmail.com
Nos reserv amos todos los derechos. Se prohíbe la reproducción

total o parcial de esta obra. Ninguna de las partes de este libro
puede ser reproducida o guardada en un sistema de archiv o y
recuperación de datos, ni tampoco transmitida de ninguna
manera o por ningún medio, y a sea electrónico, mecánico, de
f otocopias, de grabación o cualquier otro, sin el permiso prev io
del editor.
Si bien hemos realizado un esfuerzo para asegurar la confiabilidad de la

información que se presenta en esta publicación, Colectivo el Venado no
garantiza la exactitud de los datos contenidos en ella y por lo tanto tampoco
acepta la responsabilidad por los errores u omisiones que pudiera contener, ni
sus consecuencias.
Copy right © 2014 Gabriel Sánchez Cano

All rights reserv ed.
DEDICACIÓN
Este libro se lo dedico a May te, Lucien y Jessika. Quiero

además agradecer a todos mis estudiantes por sus comentarios
y criticas. Gracias a Alicia Reardon por su colaboración y sus
acertadas correcciones. He escrito este libro con mucho placer
y espero que tanto los estudiantes como los maestros lo
encuentren útil y entretenido.
Durango, nov iembre 2013

Gabriel Sánchez Cano
Prólogo
Este libro es una introducción al diseño de sitios web, está

dirigido a estudiantes del primer año de cualquiera de los
estudios que tengan que v er con el diseño y la construcción de
sitios. La obra se presta f ácilmente para el estudio indiv idual y
contiene una cantidad amplia de ejercicios con los cuales
ponemos inmediatamente en práctica la teoría recién aprendida,
por lo tanto es una introducción ef ectiv a para todo aquel que
desee diseñar y construir un sitio web compatibles con todos los
nav egadores, y dispositiv os, y a sean portátiles, móv iles o
tablets.
Hemos tomado muy en cuenta los últimos desarrollos en

div ersas tecnologías web como HTML5 y CSS3. Las
posibilidades que estas nuev as tecnologías de código abierto
(open source) nos of recen son bastante interesantes y por lo
tanto las abordamos plenamente en este libro.
Índice
1. INTRODUCCIÓN A HTML5
1.1. EVOLUCIÓN DE HTML
1.2. H ERRAMIENTAS
1.3. EDITORES HTML
1.4. L AYOUT Y DISEÑO DE UNA PÁGINA W EB
1.5. D E CONCEPTO A REALIZACIÓN
1.6. MARCAS O ELEMENTOS
1.7. I NICIO DEL PROYECTO
1.8. N UESTRA PRIMERA PÁGINA W EB
1.9. N AVEGADORES
Elemento <!DOCTY PE html>
Elemento <html lang=“es”>
1.10. ELEMENTOS ANIDADOS CON SANGRÍAS
Elemento <head>
1.11. META INFORMACIÓN
Elemento <meta charset>
Elemento <meta name="language">
Elemento <meta name="author">
Elemento <meta name="description">
Elemento <meta name="key words">
Elemento <meta http-equiv ="ref resh">
Elemento <title>
Elemento 
1.12. ELEMENTOS SEMÁNTICOS
Elemento <body >
Elemento <div >
Elemento <section>
1.13. ¿QUÉ ES EL ATRIBUTO ID?
Los elementos <header>
Elementos <h1> hasta <h6>
1.14. L OGOTIPO
1.15. ¿QUÉ ES EL ATRIBUTO CLASS?
Elemento <span>
1.16. PRÁCTICA 1
2. INTRODUCCIÓN A CSS3
2.1. EVOLUCIÓN DE CSS
2.2. D ISEÑO DE LA PANCARTA Y DEL LOGOTIPO
2.3. SINTAXIS DE CSS
2.4. SELECCIÓN DE ELEMENTOS
2.5. SELECCIÓN DE #ID
2.6. PIXELES
2.7. L OS ATRIBUTOS WIDTH Y HEIGHT
2.8. L A HOJA DE ESTILOS
2.9. L A MARCA <LINK>
2.10. I MPLEMENTACIÓN
2.11. C OLORES DE LA W EB
2.12. N OTACIÓN DE COLORES
Atributo rgb:
Atributo rgba
Atributo text-align
2.13. D ECLARACIÓN DE SUB ELEMENTOS
Atributo background
2.14. QUÉ ES URL ?
2.15. ATRIBUTOS DE TEXTOS
Atributo f ont
Atributo f ont-size
Atributo f ont-weight
2.16. D ISEÑO DEL LOGOTIPO
Atributo position
Position relativ a
Position absoluta
2.17. SELECCIÓN DE .CLASS
Atributo border-radius
Atributo opacity
Atributo z-index
Atributo transition
2.18. PRÁCTICA 2
3. MARCAS DE LA NAVEGACIÓN
Elemento <nav >
3.1. L ISTAS
Listas ordenadas <ol>
Items <li>
Listas de v iñetas <ul>
Elemento <a>
3.2. PRÁCTICA 3
3.3. D ISEÑO DE LA NAVEGACIÓN
Atributo border.
Atributo f loat.
Atributo list-sty le-ty pe.
3.4. L AS PSEUDO CLASES
3.5. PRÁCTICA 4
4. CONTENIDO PRINCIPAL
4.1. ARTÍCULO PRINCIPAL
Elemento <article>
Elemento <p>
4.2. ESTILOS DE TEXTOS EN LÍNEA
Elemento <strong>
Elemento <em>
Elemento <mark>
Elemento <abbr>
4.3. PRÁCTICA 5
4.4. D ISEÑO DEL ARTÍCULO PRINCIPAL.
Atributo ov erf low
Atributo gradient
Atributo text-shadow
Atributo hsla
Atributo line-height
Atributo text-indent
Atributo f irst-letter
4.5. PRÁCTICA 6
5. CONTENIDO COMERCIAL
5.1. OBJETIVO DEL CAPÍTULO
Elemento <aside>
Elemento <v ideo>
Elemento <source>
5.2. F ORMATOS DE VIDEO
5.3. C ONVERSIONES DE VIDEOS
5.4. C OMERCIALES
Atributo <a href = “#”>
5.5. PRÁCTICA 7
5.6. D ISEÑO DEL CONTENIDO COMERCIAL
Atributo text-transf orm
Atributo background-position
5.7. PRÁCTICA 8
6. CONTENIDO COMPLEMENTARIO
6.2. GALERÍA DE FOTOS
Elemento <f ooter>
6.3. SÍMBOLOS ESPECIALES EN HTML
6.4. PRÁCTICA 9
6.5. D ISEÑO DEL CONTENIDO COMPLEMENTARIO
Atributo transf orm-origin
6.6. PRÁCTICA 10
7. LA PÁGINA INSCRIPCIONES
7.2. L A NAVEGACIÓN DE LA PÁGINA I NSCRIPCIONES
7.3. EL CONTENIDO PRINCIPAL DE I NSCRIPCIONES
Elemento <f orm>
Elemento <f ieldset>
Elemento <legend>
Elemento <input ty pe=“checkbox”>
Elemento <input ty pe=“radio”>
Elemento <label>
Elemento <input ty pe=“text”>
Elemento <select>
Elemento <option>
Elemento <datalist>
Elemento <input ty pe= “range”>
Elemento <textarea>
Elemento <input ty pe= “submit”>
7.4. PRÁCTICA 11
7.5. D ISEÑO DE LA PÁGINA I NSCRIPCIONES
Atributo clear:
Atributo af ter:
Atributo display :
Atributo required:
Atributo inv alid:
Atributo f ocus:
Atributo radial-gradient
7.6. PRÁCTICA 12
8. LA PÁGINA PRENSA
8.2. L A NAVEGACIÓN DE LA PÁGINA PRENSA.
8.3. EL CONTENIDO PRINCIPAL DE PRENSA.
Elemento <if rame>
Elemento <table>
Elemento <thead>
Elemento <tr>
Elemento <th>
Elemento <tf oot>
Atributo colspan
Elemento <tbody >
Elemento <td>
8.4. PRÁCTICA 13
8.5. D ISEÑO DE LA PÁGINA PRENSA
Atributo f rameborder:
Atributo border-collapse:
Atributo th:empty
Atributo content:
8.6. PRÁCTICA 14
9. LA PÁGINA CONTACTO
9.2. L A NAVEGACIÓN DE LA PÁGINA C ONTACTO.
9.3. EL CONTENIDO PRINCIPAL DE C ONTACTO.
9.4. D ISEÑO DE LA PÁGINA C ONTACTO.
9.5. PRÁCTICA 15
1. Introducción a HTML5
HTML es la lengua f ranca del Internet, el lenguaje por excelencia

que ha logrado unif icar al conjunto de las tecnologías de la Web
(Red). Toda comunicación dentro de esta Red ocurre a trav és
de páginas web y cada una de ellas a sido escrita en HTML.
1.1. Evolución de HTML
HTML son las siglas de Hyper Text Markup Language que se
traduce como Lenguaje de Marcas o etiquetas para Hipertextos.
Este lenguaje f ue desarrollado en 1991 por Sir Tim Bernes-Lee
cuando trabajaba para la Organización Europea para la
Inv estigación Nuclear (CERN-por sus siglas en f rancés). Allí
desarrolló un sistema para hacer documentos más accesibles.
Este sistema ha ev olucionado a trav és de los años hasta lo que
hoy conocemos como el nav egador (browser). El consorcio
World Wide Web (W3C) se encargó de desarrollar el HTML y en
diciembre de 1997 aparecieron las especif icaciones de la
primera v ersión de HTML4. Diez años después, en enero de
2008, se publicaron las primeras especif icaciones de HTML5. Ya
en 2007 Stev e Jobs había dicho que HTML5 haría que el
sof tware de Flash quedara obsoleto, porque HTML5 of rece
muchas posibilidades de animaciones al estilo Flash, pero sin la
necesidad de pagar licencias de software.
Entre los nuev os desarrollos importantes en HTML5 está por

ejemplo la construcción de documentos estructurados de una
manera más lógica. Además, se han introducido nuev os
elementos tales como: <section>, <article>, <aside> y <nav >.
Actualmente HTML5 y a se utiliza en todos los nav egadores.
1.2. Herramientas
Para poder realizar los ejercicios de HTML5 y CSS3 que más
delante aparecen en este libro, primero es necesario instalar en
tu PC o laptop un editor de textos HTML.
1.3. Editores HTML
Un editor HTML es un programa que nos f acilita escribir textos
en HTML. Estos textos reciben el nombre de páginas web.
A continuación, v emos una lista de sitios web donde podemos
descargar gratuitamente del Internet cualquiera de los siguientes
editores de textos HTML:
Sublime text 2 se puede descargar del siguiente sitio web:

http://www.sublimetext.com/2
El editor Notepad en español se puede descargar del siguiente

sitio web:
http://notepad.sof tonic.com/descargar
El editor TotalEdit se puede descargar del siguiente sitio web:

http://www.codertools.com/download.aspx
Después de descargar, instalar y arrancar uno de los editores

aquí mencionados, o cualquier otro editor de tu pref erencia,
v erás algo parecido a la siguiente f igura. Allí podrás comenzar a
escribir el primer texto HTML.
Figura 1 Un editor de textos HTML

1.4. Layout y diseño de una página web
Estudios recientes señalan que en el transcurso de los últimos
años los diseñadores de páginas web han utilizado patrones muy
similares para crearlas. En la may oría de las páginas web
encontramos los siguientes elementos básicos de diseño:
Figura 2 Elementos básicos de una página web

• Una pancarta colocada en la parte superior de la página web
• La barra de nav egación del sitio debajo de la pancarta
• Uno o más artículos que f orman el contenido de la página
• Una columna derecha para anuncios
• Un pie de página con inf ormación sobre la empresa
Casi todos los sitios web que cumplen con estos requisitos son
más f áciles de nav egar y su inf ormación es más f ácil de
encontrar.
1.5. De concepto a realización
En los siguientes capítulos, nos proponemos como proy ecto
diseñar y realizar un sitio web para el maratón de Río de
Janeiro. Al realizar este proy ecto v amos a div idir cada página
del sitio web en sus elementos más básicos, tal como se v e en
la f igura 2. En cada parte haremos primero la estructura de la
página (layout) con HTML5 y en seguida realizaremos el diseño
de la página con CSS3. Tal como v eremos en el siguiente
capítulo, el CSS3 consta de hojas o archiv os en las que
codif icaremos los atributos v isuales que adjudicaremos a los
elementos de una página web. El resultado f inal será parecido al
sitio que v emos en la siguiente f igura:
Figura 3 Resultado final de la página Inicio

1.6. Marcas o elementos
HTML es un lenguaje de marcas y toda página web está
compuesta por marcas que llamamos elementos html. Las
marcas o elementos se indican dentro de cuñas < >. Cada
marca tiene un signif icado semántico relacionado con el nombre
y el contenido del elemento. Por ejemplo, con el elemento
<!DOCTYPE html>
marcamos el comienzo de una página web. Con algunas

excepciones, casi todos los elementos tienen un inicio, un
medio y un f inal. Por ejemplo en:
<title>Maratón de Río</title>
El elemento <title> ( que traducimos como título) se compone de

tres partes:
En primer lugar, la marca <title> es el nombre e inicio del

elemento.
En segundo lugar, el texto Maratón de Río, es el texto que
aparecerá en la parte superior del nav egador.
Por último, con la marca </title> cerramos el elemento.
Marcamos el f inal de todo elemento con el símbolo /. Por

ejemplo, las marcas <html> y </html> indican el inicio y el f inal de
una página web. Cada marca que abrimos deberemos cerrarla
después. Todo lo que se encuentre entre las
marcas <html> y </html> será el contenido de la página web. Con
las marcas indicamos cómo estarán colocados los textos dentro
de la página. El nav egador interpreta las marcas para luego
presentar la página en la pantalla del ordenador. Allí aparecerán
contenidos como textos e imágenes pero no las marcas. Por
ejemplo, las siguientes marcas hacen que aparezca el título en
la barra del nav egador:
Aparece el texto Maratón de Río pero no las marcas <title> y </title>

1.7. Inicio del proyecto
Antes que nada debemos def inir la estructura de las carpetas en
las que v amos a guardar los archiv os del sitio web del Maratón
de Río. A cada carpeta le asignaremos un nombre que atenderá
a su contenido o propósito. Por ejemplo, necesitaremos una
carpeta para guardar nuestros archiv os html, otra para guardar
las imágenes y otra más para guardar los v ideos.
Ejecuta los siguientes tres pasos para crear la estructura de

carpetas del proy ecto.
• Abre la carpeta ‘Mis documentos’ y crea la carpeta ‘maraton’.

Escribimos los nombres de las carpetas sin acentos para ev itar
problemas de compatibilidad en los distintos nav egadores. En
esta carpeta v amos a guardar nuestras páginas web y nuestras
hojas de estilos.
• Abre la carpeta ‘maraton’ y crea la carpeta ‘imagenes’. En

esta carpetra v amos a guardar las imágenes de nuestro sitio.
• Dentro de la misma carpeta ‘maraton’ crea la carpeta ‘v ideos’.

En esta carpeta v amos a guardar los v ideos de nuestro sitio.
En la siguiente f igura v emos la estructura deseada del

proy ecto. La idea es simplemente el trabajar más
estructuradamente separando las páginas web de las imágenes
y de los v ideos.
Figura 4 Estructura de las carpetas del proyecto

Los nav egadores pueden interpretar dif erentes tipos de
documentos. El primer elemento de la página es <!DOCTYPE
html>, el cual def ine el tipo de documento. Con este elemento le
decimos a los nav egadores que este es un documento html, o
sea una página web. Una v ez que el nav egador identif ica el
documento, prosigue a leer e interpretar cada elemento y a
mostrar su contenido en la pantalla.
Elemento <html lang=“es”>
En la segunda línea del ejercicio 1 v emos el
elemento <html>. Con excepción del
elemento <!DOCTYPE> escribiremos todos los demás elementos
con letras minúsculas. Algunos de estos elementos pueden
contener atributos. En este caso, nuestro elemento contiene el
atributo lang= " es " . A todo atributo le asignamos un v alor escrito
entre comillas. En este caso al atributo lang , (lenguaje), le
asignamos el v alor " es " . Con esto indicamos al nav egador que
el contenido de esta página será en español.
1.10. Elementos anidados con sangrías
En el ejercicio 1, lo primero que salta a la v ista es la manera en
que escribimos los elementos anidados. Un elementoanidado es
aquel que está contenido dentro de otro. En este caso,
<html> contiene a los elementos <head> y <body>, para indicarlo
escribimos <head> y <body> precedidos de una sangría. Es decir,
escribimos el elemento anidado con una sangría en relación al
que lo contiene. El elemento <head> contiene a su v ez los
elementos <meta> y <title> los que también escribiremos después
de una sangría.
<head>
<meta http-equiv="Content-Type"
content="text/html;
charset=UTF-8">
</head>
El uso de sangrías es una ay uda puramente v isual y no tiene

ningún ef ecto en la presentación f inal de la página. Al usar
sangrías de esta manera se v en f ácilmente en nuestro script
cuales son los elementos que contienen a otros.
Todos los elementos deben abrirse y cerrarse en el orden

correcto. Por ejemplo, el que esté contenido debe cerrarse
dentro del elemento contenedor. En la siguiente f igura v emos
una ilustración de cómo cerrar correctamente un elemento
contenido.
Figura 6 Elementos anidados

<meta name="description"
content="tus comentarios y sugerencias">
Elemento <meta name="keywords">

Para especif icar una lista de palabras clav es que describen la
página usamos el atributo name="keywords":
<meta name="keywords"
content="Maratón de Río, inscripciones, resultados">
Elemento <meta http-equiv="refresh">

El atributo http-equiv="refresh", que no utilizamos en el ejercicio,
especif ica el lapso de tiempo, medido en segundos, en que esta
página será nuev amente actualizada.
También indica un enlace que se ef ectuará automáticamente
después de un lapso especif icado. Por ejemplo, en una página
de introducción, después de diez segundos se ef ectuará un
enlace con otra página:
<meta http-equiv=
"refresh"content="10;url=http://sitioweb.com"/>
Elemento <title>
Cada página contiene un elemento <title> que identif ica la página
en la parte superior del nav egador. En el ejercicio prev io hemos
asignado a la página index.html el título “Maratón de Río”.
Elemento 
A v eces es necesario aclarar o comentar algunos elementos en
nuestras páginas y lo hacemos por medio del elemento
comentario. Estos comentarios son, por ejemplo, notas en las
que explicamos un proceso o una estructura complicada a otros
diseñadores web. Todo comentario debe iniciarse con la
marca . Por ejemplo:
<!—inicio de la página home -->

<h2>Maratón de Río</h2>
ht
tp
://
w
w
w
.fi
ux
y.
omc
1.15. ¿Qué es el atributo class?
Para que un estilo sea aplicable a distintos elementos es
necesario colocarlos a todos dentro de la misma clasif icación.
En nuestro ejercicio hemos creado el elemento <div id="cápsula">
para encapsular al logotipo, este estará compuesto de tres
subelementos <div> con el atributo class= " logotipo" . Así podremos
asignar atributos en común a los tres elementos <div>. Luego,
también damos a cada <div> su propio id= , logorojo, logoazul y
logoverde. De esta manera podremos asignarles atributos por
separado.
Elemento <span>
El elemento <span> (extensión) se usa a niv el de textos y nos
sirv e para seleccionar e identif icar una parte de un texto. Aquí
lo hemos utilizado para marcar parte del nombre de la ciudad:
<span class="ciudad">Río de </span> Janeiro
En la siguiente f igura hemos abierto index.html con el

nav egador Chrome y v emos el resultado del ejercicio 5: un
encabezado o nombre del sitio web y un logotipo con el nombre
de la ciudad que organiza el maratón.
En el caso de que no consigas este resultado, revisa

nuevamente y corrige tus códigos. Los errores más
comunes del principiante son el no cerrar correctamente
las marcas. Este tipo de errores nos dan como resultado
una pantalla en blanco.
Figura 7 Resultado del ejercicio 5

1.16. Práctica 1
Al f inal de cada capítulo v as a realizar algunas prácticas. En
ellas, además de crear el sitio web del Maratón de Río, también
elaborarás el sitio para otro maratón. Consulta con tu docente,
elige una ciudad y elabora el sitio web para el maratón de esa
ciudad. Por ejemplo, para el maratón de Nuev a York o de
París. Al iniciar este ejercicio comienza a escribir el index.html
para el maratón de tu ciudad. El resultado de la práctica 1
deberá ser algo parecido a la f igura anterior.
2. Introducción a CSS3
CSS son las siglas de Cascading Style Sheets, que se traduce

como Hojas de Estilo en Cascada. Estas hojas de estilos son
archiv os en los que codif icamos los atributos v isuales que
asignamos a los elementos de una página web. La idea
f undamental es poder separar la parte semántica de la parte de
diseño de tu página web. Así def inimos los estilos de un
elemento una sola v ez y los podemos aplicar, como si
estuv ieran en cascada, a otras páginas web que contengan este
mismo elemento. Al f inal de este capítulo podremos v er el
resultado que ahora mostramos en la siguiente f igura:
Figura 8 Resultado del capítulo: diseño de la pancarta y logotipo

2.1. Evolución de CSS
Las primeras hojas CSS aparecieron como respuesta al
descontento que mostraban los diseñadores web con el uso de
marcas HTML para def inir estilos v isuales. Así, a partir de la
v ersión 1 CSS , que en 1996 elaboró el Grupo de Trabajo
Especializado en CSS del Consorcio W3C, se f ueron separando
estos dos aspectos (el semántico y el de diseño). Entonces, por
primera v ez los diseñadores pudieron def inir la posición, f uente
y tipo de letra de los elementos de una página web. En may o de
1998 CSS2 puso f in a las distintas interpretaciones de CSS que
existían ente los nav egadores Nestscape e Internet Explorer.
Hoy en día CSS3 nos of rece v arias opciones av anzadas con
posibilidades gráf icas tales como sombras, esquinas redondas,
múltiples f ondos, transparencias y animaciones.
2.2. Diseño de la pancarta y del logotipo
En el capítulo anterior hemos completado las marcas de la
pancarta y del logotipo de la página index.html. En este
capítulo continuamos con el diseño de estos elementos. Para
esto v amos a crear otro archiv o estilos.css que v a ser nuestra
hoja de estilos CSS.
2.3. Sintaxis de CSS
Cada declaración en una hoja de estilos obedece la siguiente
sintaxis:
selector {atributo: valor;}
como podemos v er, una declaración consiste de dos partes:
selector { atributo : v alor ; }
1. El nombre del selector o elemento HTML al que deseamos

otorgar atributos v isuales.
2. El par atributo : v alor que queremos asignar al elemento.
En el lugar del selector escribimos el nombre del elemento html

(sin sus cuñas <>) que deseamos seleccionar.
Luego escribimos entre las llav es { } el par atributo:valor
seguido por un punto y coma. Un selector puede contener uno o
más de estos pares. Cada par termina con un punto y coma.
2.4. Selección de elementos
Para crear estilos, primero hay que seleccionar uno o más
elementos en una hoja de estilos. Con este f in usamos
el selector , que es simplemente el nombre o nombres de los
elementos a seleccionar. A continuación v emos un ejemplo de
cómo elegir v arios elementos HTML para asignarles atributos y
v alores v isuales:
Aquí mostramos otra v ez la sintaxis:
Aquí aplicamos la sintaxis:
h1 {
text-color: black;
text-align: center;
}
Si deseamos seleccionar el elemento <h1> existente en una

página web simplemente escribimos este elemento h1 sin las
cuñas en la posición del selector. En este ejemplo
seleccionamos desde nuestra hoja de estilos todos los
elementos <h1> y les otorgamos el atributo text-color (color del
texto). Al atributo text-color le asignamos el v alor black(negro). El
resultado será que todos los encabezados <h1> serán
presentados en color negro. Además declaramos el atributo text-
align (alineación del texto) como center (centrado) esto causa que
todos los encabezados <h1> aparezcan centrados.
2.5. Selección de #id
Para seleccionar un elemento único utilizamos el
símbolo # seguido por la id. Por ejemplo, en la página index.html
hemos marcado el elemento <section id="contenido"> En la hoja de
estilos podemos seleccionar específ icamente este elemento por
medio de su id="contenido". Logramos esto de la siguiente manera:
Aquí mostramos nuev amente la sintaxis:
Aquí aplicamos la sintaxis:
#contenido {
width: 800px;
}
Hemos seleccionado el elemento <section> específ icamente el

elemento con la id="contenido" simplemente escribiendo el
símbolo # y contenido en el lugar del selector y le hemos otorgado
el atributo width . A este atributo le hemos asignado el v alor
de 800px. En otras palabras, le hemos dado una dimensión de
800 pixeles de ancho.
2.7. Los atributos width: y height:
Con los atributos width (anchura) y height (altura) def inimos las
dimensiones en pixeles de la presentación de un elemento en la
página web. Por ejemplo:
#contenido {
width: 800px;
height: 200px;
}
En este caso hemos otorgado dos atributos al elemento

<section id="contenido">.
v entana
margin-right:auto margen derecho ajustable a la
v entana
margin-bottom margen inf erior de 20 pixeles
padding-top:15px relleno superior de 15 pixeles entre el
borde superior y el contenido
de <section>
padding-left:15px relleno izquierdo de 15 pixeles entre el
borde izquierdo y el contenido
de <section>
box-shadow:4px sombras
2.12. Notación de colores
CSS nos of rece tres maneras de declarar colores: con números
decimales, con números hexadecimal y con porcentajes.
La manera más común de declarar colores en una página web

es usando el sistema hexadecimal. El sistema hexadecimal es
un sistema numérico basado en los dieciséis dígitos (0, 1, 2, 3,
4, 5, 6, 7, 8, 9, A, B, C, D, E, F). No v amos a abordar el tema
hexadecimal ahora, lo importante es v er cómo v amos a emplear
este sistema para crear combinaciones de los tres colores
básicos, usando el atributo rgb.
Atributo rgb:
El atributo rgb nos pide v alores de los tres colores primarios para
mezclarlos:
rgb(rojo,verde,azul)
Los v alores pueden ir desde 00 hasta FF en el sistema

hexadecimal, o desde 0 hasta 255 en el sistema decimal. Por
ejemplo, observ a el siguiente código para el color azul:
rgb(00,00,FF)
signif ica: cero rojo, cero v erde y el v alor máximo azul. Ahora
bien, si mezclamos un azul con un poco de v erde de la siguiente
manera:
rgb(00,66,FF)
nos da como resultado un azul v erde como podemos v er en la

siguiente tabla con códigos hexadecimales para los colores
primarios, secundarios y terciarios.
2.13. Declaración de sub elementos
Hasta ahora hemos declarado estilos para los siguientes
elementos:
#contenido
#contenido header
#contenido header #pancarta
El primer caso es una declaración para el elemento <section

id="contenido">. En el segundo caso <header> es un sub elemento
del elemento "contenido" . El último caso es una declaración para
el elemento <div id="pancarta"> que a su v ez es un sub elemento
de <header> . La declaración misma especif ica la posición de los
elementos:
#contenido header #pancarta
Atributo background
En el ejercicio prev io asignamos el atributo background al
elemento <div id="pancarta">. Este atributo puede contener las
siguientes opciones:
background-color color de f ondo

background-position posición de f ondo
background-repeat repetición de f ondo
background url url de f ondo
Con la opción color asignamos un color de f ondo para el

elemento. Con la opción position especif icamos la posición de la
imagen de f ondo. A este atributo podemos asignarle uno de los
siguientes v alores:
top alto
center centro
bottom bajo
top left alto izquieredo
top center alto centrado
top right alto derecho
bottom left bajo izquierdo
bottom center bajo centrado
bottom right bajo derecho
En nuestro caso centramos la pancarta de la siguiente manera:
background-position center;
Con la opción repeat (repetir) especif icamos si deseamos repetir

la imagen hasta cubrir todo el espacio del elemento. En nuestro
caso tenemos una imagen suf icientemente grande para llenar el
espacio y no es necesario duplicar la pancarta, por lo tanto
escribimos:
background-repeat:no-repeat;
2.14. Qué es URL?
Existe una manera de localizar cualquier documento o recurso
dentro de la Web. Para esto contamos con el URL, que son las
siglas de Uniform Resource Locator, que signif ica Localizador
Unif orme de Recursos. Un URL es una dirección que permite
acceder a un recurso o documento dentro de la Web. La f orma
general del URL es:
protocolo ://dominio/directorio/documento
Un protocolo es un conjunto de normas establecidas para la

transf erencia de inf ormación entre dos ordenadores. En este
caso usamos http, que es el protocolo para la transf erencia de
páginas web.
Un dominio es un nombre reserv ado que identif ica a un
ordenador o serv idor dentro del Internet.
Por ejemplo: http://google.com
Con la opción url especif icamos entonces la carpeta y el

nombre de la imagen que v amos a utilizar como f ondo del
elemento <hgroup>. En cualquier caso v as a trabajar una imagen
como pancarta o también puedes descargar cualquier imagen de
la Web para usar como pancarta. En el ejercicio anterior hemos
especif icado que la imagen de f ondo se localiza en la
carpeta imagenes y se llama pancarta.png
background: url(imagenes/pancarta.png);
2.15. Atributos de textos
Para crear un may or contraste entre la pancarta y el nombre del
sitio web aplicaremos algunos atributos al elemento <h1>.
Comenzando con el color del texto blanco y una sombra que
será negra.
Ejercicio 10 Abre estilos.css y agrega los siguientes

estilos al elemento <h1>.
#contenido header hgroup h1 {

color: rgb(255,255,255);
text-shadow: 4px 4px 10px rgba(0, 0, 0, 1.0);
font: cerif;
font-size:40px;
font-weight: bold;
text-align: center;
}
Atributo font
Utilizamos el atributo font (f uente) para def inir la f uente y el estilo
de las letras que se encuentran dentro de un elemento. Las
f uentes que generalmente se pueden utilizar con todos los
nav egadores son las siguientes:
Figura 14 Fuentes y estilos de la Web.

página web usamos puntos (pt). Las medidas en porcentajes y
múltiplos son medidas que se expresan en relación al tamaño
del elemento paterno. Por ejemplo:
body {font-size : 10px;}

body h1 {font-size : 2 0em;}
body h2 {font-size : 50%;}
El elemento <body> es el elemento paterno con letras de un

tamaño de 10 pixeles . Las letras delelemento <h1> adquiere el
doble 2 0em del tamaño de las letras del elemento paterno, o
sea 20 pixeles.
El elemento <h2> adquiere 50% del tamaño del elemento paterno, o
sea 5 pixeles.
Atributo font-weight
Cuando utilizamos el atributo f ont-weight (peso de la f uente) lo
hacemos para especif icar el grosor de las letras. Las opciones
que tenemos son:
normal normal
bold negritas
bolder obscuro
lighter claro
Figura 15 Resultado del ejercicio 10.

position:relative;
top:-90px;
left:-50px;
Si deseamos una posición relativ amente más baja que la

original, entonces es necesario asignarle v alores positiv os.
Position absoluta
Por otro lado, si def inimos la nuev a posición de un elemento en
términos absolutos, entonces decimos que ésta es absoluta con
respecto al marco del elemento <body> o sea, de la v entana del
nav egador. Por ejemplo:
position:absolute;
top:90px;
left:50px;
Esta posición absoluta implica la colocación f ija de 90 pixeles

desde el borde superior del nav egador y 50 pixeles desde el
borde izquierdo del nav egador.
izquierda a derecha y 50px de arriba hacia abajo.
transform: translate(100%,50px);
Desplazamos al logotipo v erde -100pxde derecha a izquierda y 0px

de arriba hacia abajo.
transform: translate(-100px,0px);
Y por último, asignamos al logotipo azul una rotación de 360deg,

o sea de 360 grados.
transform: rotate(360deg);
El ef ecto logrado es que al pasar el ratón sobre los logotipos se

activ a la animación.
#cápsula:hover #logorojo{
La acción de pasar el ratón sobre un elemento se

llama hover (f lotar). Veremos este atributo detalladamente en la
página # 53 donde trataremos las ‘pesudo clases’.
Figura 18 Resultado de la animación del logotipo.

2.18. Práctica 2
En esta práctica v as a diseñar un logotipo personal para tu

propio maratón. El logotipo debe tener por lo menos tres capas
superpuestas. Juega con combinaciones de colores y
experimenta con distintas animaciones.
3.1. Listas
HTML nos of rece dos tipos de listas para ordenar la inf ormación
en una página. Las listas pueden ser listas ordenadas o también
listas de v iñetas.
Listas ordenadas <ol>
En algunas ocasiones tendremos la necesidad de resumir la
inf ormación en una lista ordenada, por ejemplo, al enumerar los
pasos a seguir para realizar una operación. Para esto contamos
con el elemento <ol>. Las siguientes marcas…
<ol>
<li>Diseño web</li>
<li>Programación web</li>
<li>Arquitectura web</li>
</ol>
… generan el siguiente resultado: una lista ordenada <ol> con

tres ítems <li>:
1. Diseño web
2. Programación web
3. Arquitectura web
Items <li>
Una lista ordenada se compone de ítems. Especif icamos cada
ítem dentro de una lista con la marca <li>. Los ítems adquieren
automáticamente su numeración.
Listas de viñetas <ul>
En otras ocasiones tendremos la necesidad de resumir la
inf ormación de un texto. Utilizando v iñetas podemos destacar
sus puntos más importantes. Para esto contamos con el
elemento <ul>. Las siguientes marcas …
<ul>
3.2. Práctica 3
Para esta práctica v as a crear las marcas de tu propia

nav egación. Piensa desde ahora en cuál v a a ser la inf ormación
relev ante y en cómo v as a organizar esta inf ormación en las
distintas páginas web.
border-top: double 3px #8e8e8e;
Con la opción border-radius podemos redondear las esquinas de

los bordes de los elementos.
Atributo float.
El atributo float (f lotar) sirv e para alinear elementos a la
izquierda o derecha.
float-left f lotar a la izquierda

float-right f lotar a la derecha
En el ejercicio hemos alineado todos los elementos <li> de la

nav egación hacia la izquierda.
#contenido header nav ul li{

float:left;
padding-left 60px;
list-style-type none;
}
Es como si a cada elemento <li> le aplicáramos un imán hacia la

izquierda, primero el ítem Inicio, seguido por Inscripciones,
Prensa y f inalmente Contacto. Todos estos elementos tienden a
alinearse hacia la izquierda como si estuv ieran en cadena.
Atributo list-style-type.
Por último, en el ejercicio 17 v imos el atributo list-style-type. Este
atributo sirv e para asignar estilos a nuestras listas. Al asignarle
el v alor none (ninguno) logramos presentar las v iñetas sin estilo,
para que los puntos de las v iñetas desaparezcan.
Este atributo, además de la opción none , tiene las siguientes

opciones:
su totalidad. Aquí nos v olv emos a encontrar con el
atributo transition. Se trata de una transición con la duración
de 1 0s, o sea un segundo.
transition:all 1.0s ease-in-out;
Deseamos una transición que consista en intercambiar el color

del texto y el color del f ondo. Queremos que la transf ormación
sea activ ada con el ratón y por eso necesitamos la transición
(ease-in-out).
3.5. Práctica 4
En esta práctica v as a crear los estilos de tu nav egación.
Experimenta nuev amente con colores y con distintos tipos y
tamaños de letras. Piensa en algún ef ecto que ay ude al usuario
a saber en cada momento en qué página web se encuentra.
4. Contenido principal
Cada página del sitio web debe especializarse en un tema. No

es conv eniente poner en una página todo tipo de inf ormación sin
ninguna estructura, pues entonces, al usuario se le dif icultaría
encontrar alguna inf ormación específ ica y terminaría por
f rustrarse.
Al f inal de este capítulo obtendremos el siguiente resultado:
Figura 21 Resultado de este cap tulo.

4.2. Estilos de textos en línea
Contamos con algunos elementos de estilos en línea, estos los
escribimos pegados al texto y actúan sobre partes indiv iduales
del documento, sin inf luir en el resto de la página. La siguiente
lista muestra los estilos de textos en línea:
strong negrita
em cursiv a
mark marcación
abbr abrev iarción
Elemento <strong>
Usamos el elemento <strong> para mostrar textos con el estilo
negrita. Por ejemplo, las siguientes marcas:
<p>Las NU han decretado el

<strong>Artículo XX.</strong></p>
generan el siguiente texto:
Las NU han decretado el Artículo XX.

Elemento <em>
El elemento <em> se utiliza para enf atizar un texto con el estilo
cursiv as. Por ejemplo, las siguientes marcas:
<p>Las NU han decretado el

<em><strong>Artículo XX.</strong></em></p>
generan el siguiente texto:
Las NU han decretado el Artículo XX.

Elemento <mark>
4.3. Práctica 5
En esta práctica v as a escribir un artículo principal sobre tu

propio sitio web. Asegúrate de utilizar todos los estilos en línea
sobre tus textos.
4.5. Práctica 6
Busca y recopila, o en todo caso inv enta inf ormación sobre el
maratón que crearás, en ella debes explicar los objetiv os de tu
sitio web. Además, darás datos sobre la entidad organizadora.
Con esta inf ormación v as a diseñar el artículo principal del sitio
web.
5. Contenido comercial
Muchos sitios web reserv an espacio para la comercialización

dentro de sus páginas. Este puede ser, por ejemplo, un lugar
donde otras empresas con f ines comunes puedan anunciarse.
Este espacio se puede v ender por medio de Google o del mismo
sitio web a entidades interesadas. Para lograrlo, HTML5 cuenta
con el nuev o elemento <aside>.
5.1. Objetivo del capítulo
Al f inal de este capítulo habremos logrado el siguiente resultado:
Figura 25 Resultado del capítulo.

5.5. Práctica 7
En esta práctica v as a crear un espacio para contenido
comercial. En primer lugar v as a colocar un objeto v ideo con
sus conv ersiones. En segundo lugar v as a crear dos
comerciales para completar tu espacio del elemento <aside>.
5.7. Práctica 8
En esta práctica v as a crear el diseño del contenido comercial.
Trata de crear un diseño sobrio para que los comerciales no
distraigan mucho del contenido principal. El resultado deberá ser
algo así como la f igura # 25 de la página 60.
6. Contenido complementario
A nuestra página web le podemos añadir uno o más

elementos <article> con inf ormación complementaria al contenido
principal. En nuestro caso deseamos agregar una galería con
f otos de los mejores corredores del maratón.
Al f inal de este capítulo habremos logrado el resultado que
podemos v er en la siguiente f igura:

6.3. Símbolos especiales en HTML
HTML ha desarrollado un Character Entity Encoding para la
codif icación de símbolos especiales como los de las monedas
euro, libra esterlina y y en. También existen símbolos para
copy right y marcas registradas. Todos ellos se pueden
identif icar de dos f ormas: por sus nombres o por sus códigos
numéricos. Enseguida v emos una tabla con los símbolos más
comunes y sus códigos correspondientes.
6.4. Práctica 9
En esta práctica v as agregar contenido complementario a tu
página web, por ejemplo, una galería de f otograf ías del
maratón. No olv ides terminar tu página con el elemento <footer>
y con tu f irma de diseñador en su parte inf erior.
6.6. Práctica 10
En esta práctica v as a crear estilos para tu galería. El resultado
deberá ser algo así como el de la f igura # 26 en la página # 76.
7. La página Inscripciones
Sin olv idar que un sitio web debe tener un diseño atractiv o con
lugar para imágenes, sonido, v ideos y animaciones,
proseguimos en este capítulo con la creación de la segunda
página de nuestro sitio web: la página Inscripciones. En ella el
usuario podrá inscribirse para participar en el próximo maratón.
Al f inal de esta sección habremos logrado el siguiente resultado:
Figura 28 El formulario de inscripciones.

Ya que todo sitio web debe tener un diseño unif orme y
consistente, la página Inscripciones adquiere elmismo layout de
la página Inicio. Es decir, que tendrá la misma pancarta y
logotipo, así como la misma nav egación e idéntico contenido
comercial. De hecho lo único que hay que cambiar es la
nav egación y el artículo o contenido principal. En esta página, el
contenido principal es un f ormulario de inscripciones. En otras
palabras, lo único intercambiable de las páginas es el contenido
principal.
<option value="15">15 km</option>
<option value="8">8 km</option>
</select>
En el elemento <select name="inscripción"> especif icamos el

nombre del menú como "inscripción".
Elemento <option>
Para agregar opciones al menú utilizamos el elemento <option>.
Por ejemplo:
<option value="maratón"> Maratón completo</option>
aquí especif icamos que una de las opciones a elegir es Maratón

completo y que el v alor de esta elección es "maratón".
Elemento <datalist>
Un menú resulta práctico en la may oría de los casos, pero hay
ocasiones en que tenemos listas muy largas de opciones para
escoger. En estos casos un menú es inef icaz pues las opciones
son demasiadas. Entonces es conv eniente usar el
elemento <datalist> (lista de datos). El elemento <datalist> nos
muestra solamente una sub lista de opciones. Por ejemplo,
v eamos la siguiente lista de datos:
<label for="país">País</label> <input type="text" name="país" id="país"

list="países">
<datalist id="países">
<option value="Argentina">
<option value="Belice">
<option value="Bolivia">
<option value="Brasil">
...
</datalist>
Si por ejemplo, escribimos la letra b, <datalist> nos muestra

solamente las opciones que comienzan con la letra b, por
ejemplo:
Belice
Boliv ia
Brasil
Pero es perf ectamente aceptable escribir otro país que no esté

en la lista, por ejemplo ‘Bélgica’. La dif erencia principal
entre <select> y <datalist> es que el menú de <select> tiene una lista
predeterminada de opciones, mientras que el menú de <datalist>
acepta datos que no f orman parte de la lista de datos.
Elemento <input type= “range”>
Utilizamos este elemento para asegurarnos de que el usuario
escriba v alores numéricos dentro de un rango específ ico entre
un mínimo y un máximo.
<label for="clasificación">Clasificación</label>
<input type="range" name="clasificación"
id="clacificación" min="1" max="5" />
Elemento <textarea>
Un campo de entrada es suf iciente para escribir datos como por
ejemplo nombre y apellidos. Pero a v eces es necesario pedir
más inf ormación, como por ejemplo un comentario. En estos
casos utilizamos el elemento <textarea> de la siguiente manera:
<label for="comentarios">Comentarios</label>
<textarea cols="35" rows="4" name="comentarios"
id="comentarios"
placeholder="Comentarios o información adicional.">
</textarea>
Los atributos cols= y rows= sirv en para especif icar las

dimensiones del elemento. En este caso <textarea> mide cuatro
líneas por 35 caracteres.
Elemento <input type= “submit”>
Un f ormulario en línea debe tener al f inal un botón para env iar
los datos al serv idor web de la organización.
Por ejemplo:
<input type="submit" id="enviar"

name="enviar" value="Enviar" />
el atributo value="Enviar" especif ica el texto que debe aparecer en

el botón.
7.4. Práctica 11
En esta práctica v as a crear un f ormulario en línea para
registrar a todos los participantes de tu maratón. El resultado
deberá ser algo parecido al f ormulario que creamos en los
ejercicios prev ios.
7.5. Diseño de la página Inscripciones
Gran parte del diseño de la página Inscripciones será aplicado
en cascada, es decir, tendremos la misma distribución de
elementos que tiene la página Inicio. Los únicos elementos
nuev os serán todos los correspondientes a los f ormularios en
línea. En la siguiente f igura v emos el resultado que ha de
lograrse al terminar esta sección.
Figura 30 Diseño del formulario de inscripciones.

7.6. Práctica 12
Para esta práctica v as a crear estilos de tu propio f ormulario en
línea. El resultado f inal deberá ser algo parecido al que v emos
en la f igura # 30, que se encuentra en la página # 94.
8. La página Prensa
Nuestro sitio web debe contener una página de Prensa en la que

v amos a mostrar artículos que y a ha publicado la prensa o los
distintos medios de comunicación.
La siguiente f igura muestra el resultado que nos proponemos
crear en este capítulo.

<th>Record Personal</th>
<th>País</th>
</tr>
</thead>
<tfoot> . . . </tfoot>
<tbody> . . . </tbody>
</table>
Elemento <tr>
Con el elemento <tr> (renglón de tabla) creamos un renglón de la
tabla. En el ejemplo anterior lo hicimos con las cinco columnas.
Elemento <th>
Con el elemento <th> (nombre de columna) nombramos a las
columnas que deseamos tener en la tabla.
Elemento <tfoot>
Con el elemento <tfoot> (pie de tabla) describimos inf ormación
adicional sobre los datos de la tabla. Por ejemplo:
<table>
<thead>
<tr>
<th>Lugar</th>
<th>Nombre</th>
<th>Tiempo</th>
<th>Record Personal</th>
<th>País</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="5">Los mejores diez corredores</th>
</tr>
</tfoot>
<tbody> . . . </tbody>
</table>
Atributo colspan
Con el atributo colspan (abarcar) podemos indicar que una celda
abarca más de una columna a lo ancho. En el ejemplo prev io
hemos indicado que el elemento <tfoot> ocupa cinco columnas a
lo ancho.
Elemento <tbody>
Dentro del elemento <tbody> (cuerpo de tabla) agrupamos todos
los renglones de la tabla. Por ejemplo:
<table border="1">
<thead>
<tr>
<th>Lugar</th>
<th>Nombre</th>
<th>Tiempo</th>
<th>Record</th>
<th>País</th>
</tr>
</thead>
<tfoot>
<tr>
</tr>
</tfoot>
<tbody>
<tr>
<td>1</td>
<td>Gebre Gebrmariam</td>
<td>02:08:14</td>
<td><span class="check"></span></td
<td>Etiopía</td>
</tr>
</tbody>
</table>
Elemento <td>
8.4. Práctica 13
En esta práctica v as a crear una página Prensa con distintos
reportajes que f inalizarás con una tabla similar a la del ejercicio
prev io.
8.5. Diseño de la página Prensa
Ya que en la página prensa tenemos reportajes de distintos
medios de comunicación, con f uentes que v an desde YouTube
hasta reportajes locales, es importante que la página adquiera
un diseño lo más unif orme posible. En la siguiente f igura v emos
el resultado del diseño de la página Prensa:
Figura 37 Resultado del diseño de la página Prensa.

8.6. Práctica 14
En esta práctica v as a crear el diseño de la página Prensa.
Sobre todo v as a experimentar con los elementos de diseño de
tablas.
9. La página Contacto
Todo sitio web debe contener una página de Contacto. Aunque

pueda parecer que esta página no es importante, sirv e una
f unción básica: es la única v ía de contacto directo del web
master o encargado del sitio web con los usuarios, cuy as
opiniones o sugerencias son muy importantes para el sitio.
En la siguiente f igura v emos el resultado f inal de esta sección:
Figura 39 Resultado del diseño de la página Contacto.

9.4. Diseño de la página Contacto.
Al aplicar los diseños en cascada que y a hemos creado para el
f ormulario de la página Inscripciones, obtenemos como
resultado el diseño de la página Contacto.
9.5. Práctica 15
En esta práctica v as a desarrollar una página de Contacto para
tu propio maratón.
ACERCA DEL AUTOR
Gabriel Sánchez Cano es maestro de diseño web en la ciudad de

Ámsterdam. Esta experiencia lo ha llev ado a escribir v arios
libros sobre programación y diseño web. Este libro es el primero
de una serie sobre diseño y programación en español.
Anteriormente f ue programador y diseñó parsers y
compiladores. Actualmente reside en Holanda con su esposa y
dos hijas.

Diseño Web Con HTML5 y CSS3 - G Sanchez Cano PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Diseño Web Con HTML5 y CSS3 - G Sanchez Cano PDF

Uploaded by

Copyright:

Available Formats

Para más inf ormación sobre esta y otras publicaciones f av or

Nos reserv amos todos los derechos. Se prohíbe la reproducción

Si bien hemos realizado un esfuerzo para asegurar la confiabilidad de la

Copy right © 2014 Gabriel Sánchez Cano

Este libro se lo dedico a May te, Lucien y Jessika. Quiero

Durango, nov iembre 2013

Este libro es una introducción al diseño de sitios web, está

Hemos tomado muy en cuenta los últimos desarrollos en

HTML es la lengua f ranca del Internet, el lenguaje por excelencia

Entre los nuev os desarrollos importantes en HTML5 está por

Sublime text 2 se puede descargar del siguiente sitio web:

El editor Notepad en español se puede descargar del siguiente

El editor TotalEdit se puede descargar del siguiente sitio web:

Después de descargar, instalar y arrancar uno de los editores

Figura 1 Un editor de textos HTML

Figura 2 Elementos básicos de una página web

Figura 3 Resultado final de la página Inicio

marcamos el comienzo de una página web. Con algunas

El elemento <title> ( que traducimos como título) se compone de

En primer lugar, la marca <title> es el nombre e inicio del

Marcamos el f inal de todo elemento con el símbolo /. Por

Aparece el texto Maratón de Río pero no las marcas <title> y </title>

Ejecuta los siguientes tres pasos para crear la estructura de

• Abre la carpeta ‘Mis documentos’ y crea la carpeta ‘maraton’.

• Abre la carpeta ‘maraton’ y crea la carpeta ‘imagenes’. En

• Dentro de la misma carpeta ‘maraton’ crea la carpeta ‘v ideos’.

En la siguiente f igura v emos la estructura deseada del

Figura 4 Estructura de las carpetas del proyecto

El uso de sangrías es una ay uda puramente v isual y no tiene

Todos los elementos deben abrirse y cerrarse en el orden

Figura 6 Elementos anidados

Elemento <meta name="keywords">

Elemento <meta http-equiv="refresh">

<!—inicio de la página home -->

<span class="ciudad">Río de </span> Janeiro

En la siguiente f igura hemos abierto index.html con el

En el caso de que no consigas este resultado, revisa

Figura 7 Resultado del ejercicio 5

CSS son las siglas de Cascading Style Sheets, que se traduce

Figura 8 Resultado del capítulo: diseño de la pancarta y logotipo

selector {atributo: valor;}

como podemos v er, una declaración consiste de dos partes:

selector { atributo : v alor ; }

1. El nombre del selector o elemento HTML al que deseamos

2. El par atributo : v alor que queremos asignar al elemento.

En el lugar del selector escribimos el nombre del elemento html

Aquí mostramos otra v ez la sintaxis:

selector { atributo : v alor ; }

Aquí aplicamos la sintaxis:

Si deseamos seleccionar el elemento <h1> existente en una

Aquí mostramos nuev amente la sintaxis:

selector { atributo : v alor ; }

Aquí aplicamos la sintaxis:

Hemos seleccionado el elemento <section> específ icamente el

En este caso hemos otorgado dos atributos al elemento

La manera más común de declarar colores en una página web

Los v alores pueden ir desde 00 hasta FF en el sistema

nos da como resultado un azul v erde como podemos v er en la

El primer caso es una declaración para el elemento <section

#contenido header #pancarta

background-color color de f ondo

Con la opción color asignamos un color de f ondo para el

En nuestro caso centramos la pancarta de la siguiente manera: