con el atributo class= " logotipo" . Así podremos asignar atributos en común a los tres elementos
. Luego, también damos a cada
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 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: selector { atributo : v alor ; } Aquí aplicamos la sintaxis: h1 { text-color: black; text-align: center; }
Si deseamos seleccionar el elemento
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 6f491z
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 1p2f66
serán presentados en color negro. Además declaramos el atributo textalign (alineación del texto) como center (centrado) esto causa que todos los encabezados 4d5u4h
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: selector { atributo : v alor ; } 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
es un sub elemento del elemento "contenido" . El último caso es una declaración para el elemento
que a su v ez es un sub elemento de
. 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
. 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
. 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
. 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
. #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 es el elemento paterno con letras de un tamaño de 10 pixeles . Las letras delelemento
adquiere el doble 2 0em del tamaño de las letras del elemento paterno, o sea 20 pixeles. El elemento
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 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
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
. Las siguientes marcas…
Diseño web
Programación web
Arquitectura web
… generan el siguiente resultado: una lista ordenada
con tres ítems
: 1. Diseño web 2. Programación web 3. Arquitectura web
Items
Una lista ordenada se compone de ítems. Especif icamos cada ítem dentro de una lista con la marca
. Los ítems adquieren automáticamente su numeración. Listas de viñetas
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
. Las siguientes marcas …
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
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
le aplicáramos un imán hacia la izquierda, primero el ítem Inicio, seguido por Inscripciones, Prensa y f inalmente o. 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 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 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: Las NU han decretado el <strong>Artículo XX.
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: Las NU han decretado el <em><strong>Artículo XX.
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
.
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
.
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.
6.1. Objetivo del capítulo Al f inal de este capítulo habremos logrado el resultado que podemos v er en la siguiente f igura: Figura 26 Resultado del capítulo.
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
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 podrá inscribirse para participar en el próximo maratón.
7.1. Objetivo del capítulo 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.15 km 8 km
En el elemento <select name="inscripción"> especif icamos el nombre del menú como "inscripción". Elemento Para agregar opciones al menú utilizamos el elemento . Por ejemplo: Maratón completo
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 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 (lista de datos). El elemento nos muestra solamente una sub lista de opciones. Por ejemplo, v eamos la siguiente lista de datos: País ...
Si por ejemplo, escribimos la letra b, 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 es que el menú de <select> tiene una lista predeterminada de opciones, mientras que el menú de acepta datos que no f orman parte de la lista de datos. Elemento Utilizamos este elemento para asegurarnos de que el escriba v alores numéricos dentro de un rango específ ico entre un mínimo y un máximo. Clasificación
Elemento 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.">
Los atributos cols= y rows= sirv en para especif icar las
dimensiones del elemento. En este caso mide cuatro líneas por 35 caracteres. Elemento 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:
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.
8.1. Objetivo del capítulo La siguiente f igura muestra el resultado que nos proponemos crear en este capítulo. Figura 34 Resultado del capítulo.Record Personal País . . . . . .
Elemento Con el elemento (renglón de tabla) creamos un renglón de la tabla. En el ejemplo anterior lo hicimos con las cinco columnas. Elemento Con el elemento (nombre de columna) nombramos a las columnas que deseamos tener en la tabla. Elemento Con el elemento (pie de tabla) describimos inf ormación adicional sobre los datos de la tabla. Por ejemplo:
Lugar
Nombre
Tiempo
Record Personal
País
Los mejores diez corredores
. . .
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 ocupa cinco columnas a lo ancho. Los mejores diez corredores
Elemento Dentro del elemento (cuerpo de tabla) agrupamos todos los renglones de la tabla. Por ejemplo:
Lugar
Nombre
Tiempo
Record
País
Los mejores diez corredores
1
Gebre Gebrmariam
02:08:14
<span class="check">
Etiopía
Elemento
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 o
Todo sitio web debe contener una página de o. Aunque pueda parecer que esta página no es importante, sirv e una f unción básica: es la única v ía de o directo del web master o encargado del sitio web con los s, cuy as opiniones o sugerencias son muy importantes para el sitio.
9.1. Objetivo del capítulo 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 o.
9.4. Diseño de la página o. 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 o.
9.5. Práctica 15 En esta práctica v as a desarrollar una página de o 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.
Related Documents
Html5 Y Css3 June 2020 4
Html5 Css3 (!!!)y Javascript August 2020 0
Html5 Y Css3 May 2020 4
Html5 Y Css3 June 2022 0
Html5 Y Css3 Toc February 2023 0
Html5 + Css3 August 2021 0
More Documents from "Marcos Ramos"
April 2022 0
Pcopy - Qb64 Wiki May 2023 0
Romanos - Joao Calvino.pdf July 2019 171
December 2020 0
Estudio De Socavacion Rio Palca.xls May 2021 0
Tren De Rodamiento February 2021 0
1z1251