UOC 2013
Llenguatges i estàndards web Pràctica· 2013-4 HTML - CSS Núria Espinoza 11/5/2013
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
URL: http://cv.uoc.edu/~nespinozan/practica/ Guía para crear un fansite usando un template ya hecho: Así que quieres crear un fansite. ¡Genial! Bienvenido al mundo del fandom activo, yo seré tu guía ;) Te daré una serie de indicaciones para que puedas utilizar el template de Game of Thrones y modificarlo para cualquier otro tema. Ya verás que es muy sencillo y sólo requiere que tengas claro unas cosas. Antes que nada, es recomendable que realices un pequeño esquema (en papel o donde quieras) con tu idea inicial de página web. Has de poder responder las siguientes preguntas: o ¿Qué quiero mostrar en mi página? o ¿Qué quiero contar? o ¿A qué público quiero llegar? (de esto dependerá por ejemplo el tono que utilices o algunos contenidos)
Ilustración 1 Primer esquema de la web
1
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
Una vez tengas claro esos primeros puntos, esta siguiente parte vendrá prácticamente sola: o ¿Qué apartados tendrá mi página web? o ¿Qué subapartados habrá? o ¿Qué contenidos? ¿Tengo los permisos de los autores para publicarlos? ¿Datos de autor, año, etc? o ¿Qué paleta de colores? ¿Otros elementos gráficos? Episodes
Seasons
Index
Cast info Cast & Crew Crew Multimedia (screensavers, wallpapers...) Extras Interview About Ilustración 2 Esquema de los apartados de la web
o o
Este apartado es ordenar y definir inicialmente, lo cual se puede ir haciendo también a medida que la web se va construyendo. Un consejo a tener en cuenta y a recordar siempre, tanto para contenido como para código es la COHERENCIA. Las páginas han de seguir un hilo para que el usuario entienda que son todas partes de un mismo website.
Ok, ya tengo la web definida, ¡quiero comenzar! Muy bien, el siguiente paso es familiarizarnos con el código. El HTML de cada página es muy parecido y ya verás que es muy sencillo. Comencemos por lo básico que aparece en cada página. Este listado te servirá para identificar cada parte, ver cuáles son sus propiedades y poder modificarlas a tu gusto. o HTML que verás en cada .html de este website: <head>: aquí en este apartado hay algunas cosas a tener en cuenta • <title>: Este será el título de cada página, y podrá verse en el navegador.
2
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
Define el idioma: la página que he creado está en inglés (lang=en), cámbialo si tu idioma será otro. • Define las keywords: esto es importante si quieres que tu página esté indexada en motores de búsqueda y la puedan encontrar por esas palabras. • Define la ruta de tu css <main>: Este será el contenedor principal de la web. • <Header>: aquí tenemos nuestro logo, que puedes cambiarlo por el que quieras. • El menú y submenús: están en formato lista horizontal. <ul class="header_list"> • Los menús en la parte superior derecha: <div class="fixed1"> (Schedule) y <div class="fixed2"> (Register y Log in). • <div class="center">donde pondremos nuestros contenidos. Tiene dos div que aparecen en cada web: o <div class="socialmedia">: en la parte derecha de la página, es un listado también. o <div class="breadcrumbs">: imprescindibles para facilitar la navegación y la usabilidad de la web, aparecen en todas las páginas menos en index.html • <footer>: la parte inferior de la página, con logo e información de copyright. •
Ilustración 3 Explicación de los divs de cada página
3
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
o
CSS común a cada página de este website: Body: aquí definimos cómo se verá todo lo que esté dentro de <body> en el html. • Background: en este caso he usado una imagen fija como fondo. • Font-family: he definido que todas las letras sean sans-serif • Font-size: el tamaño estándar de letra es 12px, • Color: el color para todo el texto es un gris claro. a:link, a:visited, a:focus, a:active y a:hover: defines cómo quieres que se vean los enlaces, tanto los activos, visitados, cuando pasas el cursor por encima…En este caso: • color: todos los enlaces se verán de un color concreto amarillento, • text-decoration: no tendrán subrayado, • Font-weight: estarán en negrita • Font-size: el tamaño será superior al del texto estándar. • Font-style: no quiero que estén en cursiva así que indico normal (esto es debido a que como verás, la lista del menú principal estará en cursiva) .main: definimos aquí el contenedor principal. • Max-width y min-width: cada vez tendemos más a conectarnos a través de dispositivos más pequeños que un ordenador, por lo que tenemos que pensar que las resoluciones serán diferentes. Por eso indicamos un mínimo y un máximo en la amplitud del .main, para que la página esté preparada para estos cambios de tamaño. • Margin: establecemos que esté situado en el centro de la pantalla. .center: definimos el contenedor central de .main, donde veremos el contenido en sí • Background: usaremos un fondo negro, pero con una opacidad más baja de 1 para que el fondo se vea. • Overflow: establecemos que este div vaya creciendo a medida que tenga contenido. Header y footer: características comunes a ambos div. • Text-align: me interesa que esté alineado a la izquierda • Margin-top: quiero que haya un espacio entre la parte superior de los divs .header_list: el listado de menú principal • List-style: no queremos que sea bulleted list, por lo que indicamos none. • Display: el elemento que hará que se vean de manera horizontal: inline. 4
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
Padding: habrá un pequeño espacio entre los elementos del listado. • Font-style: por defecto quiero que se vean en cursiva. • Margin-left: estará alineado a la izquierda por estética. .header_list1: hablamos del menú Schedule que se ha hecho separado del resto. • Comparte todas las características de header_list, excepto que no requiere el margin-left. .header_list2: refiere al menú register / login y al menú secundario. • Comparte todas las características de .header_list Footer_list: el listado donde tenemos el copyright, terms and conditions • Comparte todas las características de header_list, excepto dos: o Font-size: es más pequeño que los otros listados, 10px; o Font-style: no quiero que estén en cursiva, indico normal. • Terms and conditions tienen su propio estilo de enlaces: al ser en letra más pequeña y estar situados justo delante del background, necesito que destaquen para que se vean bien y al usar el estilo general de enlaces no quedaba estéticamente bien. o Font-size: reduzco hasta 10px, al igual que el resto de texto del footer. o Color: definimos que el texto sea de color blanco .fixed1, .fixed2: características de los menús superiores (Schedule y register/login) • Position: quiero que se queden en la parte superior, por lo que indico absolute. • Top: estarán a 20px de la parte superior de la pantalla • Fixed1 y fixed2 están situados a % diferentes de left. .socialmedia: refiere al listado de íconos de social media que están en todas las páginas. • Float: estará situado flotando a la derecha de los divs de contenido. • Clear: no admitirá nada a su derecha, ya que ha de estar siempre lo más a la derecha posible. • Position: para que no se mueva, le añado un position: relative. .socialmedia_list li: refiere a los elementos del listado de socialmedia: • List-style: no tienen decoración, por lo que indicamos none • Padding: hay un espacio entre los elementos de 10px. •
5
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
.socialmedia tiene un estilo de enlaces propio: a.sm. Difiere del resto ya que al ser imágenes y estar en modo vertical, la línea horizontal superior del resto de enlaces no le quedaba bien. Decido que tenga un borde fino color amarillo en la parte inferior al pasarle el cursor por encima (border-bottom:1px solid #ffb257) y elimino el borde superior. .breadcrumbs: refiere a las “migas de pan” de navegación, situadas en la parte superior del div de contenido • Text-align: al estar centrados, el texto también, • Width: estará siempre situado en la parte superior del contenido, quiero que use el 100% de la anchura. • Font-style: quiero que esté en cursiva por estética.
Bien, ya tienes lo básico para comenzar a introducir contenido. A continuación, iremos página por página para que entiendas los códigos usados en cada una de ellas y lo puedas adaptar a tus necesidades. Recuerda que todo lo anterior es lo común a todas las páginas. INDEX (index.html)
o
o
En index.html hemos utilizado una estructura de 3 divs con imágenes. Index está pensado como la bienvenida tanto a personas que conocen la serie como los nuevos. En este caso, he optado por realizar una serie de publicaciones y artículos con información de la serie, usando imágenes de fans. Es una forma de introducir a los novatos en la materia: las series más populares son representadas por artistas conocidos en las redes sociales, por lo que dice mucho de Game of Thrones.. 6
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
o
o
HTML: este HTML será el repetido en varias páginas ¡ATENCIÓN! Hemos usado 3 divs alineadas: .index1, .index2 y .index3. En cada una de ellas hemos añadido una imagen, y dos líneas de texto: una con el título del artículo y una breve descripción. CSS: este CSS será el repetido en varias páginas ¡ATENCIÓN! .index1, .index2 y .index3 comparten las siguientes características: • Float: los 3 están flotando a la izquierda, • Width: el tamaño de los divs es de un 27% del total, para que quepan los 3 alineados más el div de social media. .index1: • Clear: al ser el que más a la izquierda está, no puede admitir nada más, por lo que indicamos left. • Margin-left: le damos un margen de 50px respecto a la izquierda del borde del contenido. Index2: • Margin: el espacio que habrá al alrededor es de 50px, • Margin-top: indicamos una distancia concreta para que esté perfectamente alineado con .index1. Index3: • Margin: no queremos que haya separación extra entre los divs, sólo contaremos con la separación indicada en el div del medio (.index2) • Margin-top: indicamos una distancia concreta para que esté perfectamente alineado con .index1 y .index2.
EPISODES (episodes.html)
7
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
o o
o o o o
Esta página pretende ser una rápida distribución a los contenidos principales: el listado de episodios de cada temporada. Por eso vemos por primera vez los breadcrumbs y el menú secundario en acción. Recordemos que los breadcrumbs (<div class=”breadcrumbs”) y el menú secundario (<div class=”header_list2”>) han sido explicados en en html y css común. Hemos utilizado los mismos div que en index, .index1, .index2 y .index3, explicados en el punto anterior. Lo nuevo en este punto es el listado central con elementos anidados. Los enlaces a la primera y segunda temporada son ficticios. CSS: Episodes_list: características para el listado en general, • Font-size: tamaño de letra 14px, • Line-height: espaciado entre las letras de 1.3em. Episodes_list li: características concretas para cada elemento anidado, • Font-size: 12px a diferencia de los títulos, • List-style: sin elementos de decoración en el listado.
THIRD SEASON (3season.html)
o o o
Esta página es un vistazo previo a los episodios de la 3ª temporada: por eso incluye una screenshot, el nombre del episodio y un pequeño resumen. Hemos utilizado la misma estructura que en index.html y que en episodes.html, es decir .index1, .index2 y .index3 HTML: los nombres de episodios y su descripción han sido realizados mediante listados de definición. Les he añadido unos estilos concretos. 8
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
o
CSS: sólo tenemos como elemento nuevo el estilo de texto especial usado en el título de cada episodio. .review1: • Font-size: especifico que sea tamaño 18px, • Font-weight: especifico que sea en negrita, • Color: un color anaranjado a juego con la paleta utilizada en la página.
CAST & CREW (cast.html)
o o
o
o
o o
Podemos conocer en esta página a los actores y sus roles en la serie, además de tener un rápido vistazo a los productores y escritores de la serie. Se han utilizado fotografías de los actores sin caracterizar para que tanto fans como nuevos tengan la oportunidad de conocerles mejor fuera de la serie y en algunos casos reconocerles de anteriores trabajos. Hemos seguido la estructura utilizada hasta ahora, pero tenemos que realizar nuevos divs ya que los usados en las anteriores páginas son muy anchas para todo el contenido que tenemos que mostrar. Como novedad también tenemos el uso de enlaces anchor ya que no hemos generado páginas separadas y hemos incluido tanto actores como escritores en la misma página. Por otro lado, hemos añadido un back to top para que sea más fácil y cómoda la navegación y usabilidad. HTML: .pics, .pics2, .pics3, .pics4, .pics5 y .pics6: son los divs creados para esta página. En cada div, tenemos una imagen + listado de definición. 9
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
o
CSS:
para la sección Writers & Producers, hemos utilizado un listado con una configuración propia, .writers. Enlaces ancla usado en menú secundario: dirige directamente a writers & producers (<a href="#writers"> + <a id=”writers”> ) Nuevo div class=”back” para el elemento back to top en la parte inferior derecha de la página. Utilizado sólo en aquellas páginas con scroll para mejorar la navegación. .pics, .pics2, .pics3, .pics4, .pics5 y .pics6: Hemos de indicarles anchos y márgenes que nos permitan alinear no sólo las 6 columnas, sino también el div de social media. • Float: todos están indicados que floten a la izquierda • Width: esta es la diferencia con los divs usados previamente. El tamaño ha de ser inferior para poder mostrar todo en un solo vistazo. • Sólo .pics está indicado que no tenga nada a la izquierda, clear: left • .pics2, .pics3, .pics4, .pics5, .pics6: o al igual que .index2 y .index3, tienen indicado un margin-top de 55px. o Margin: el margin será sólo de 5px Listado de actores: • <dt> utiliza el estilo de texto .review1: o Font-size: 18px de tamaño, o Font-weight: en negrita, o Color: usamos un color anaranjado por defecto. o Los <dt> que contienen un enlace usan el estilo .cast_links para que todos sean iguales: Color: anaranjado oscuro Font-weight: en negrita, Font-size: un tamaño 14px. • <dd> utilizada el estilo .cast_list: o Font-style: quiero que se vean en cursiva, o Line-height: al haber tanta información, quiero que se vea bien separada y que respire. o Font-weight: en negrita por estética. o Font-size: será más pequeño que el nombre del actor, usaremos 13px. Listado de escritores / productores: • <dt> usa el estilo ya explicado anteriormente .review2 • <dd> utiliza el mismo estilo anterior, .cast_list • .writer: estilo propio para el listado entero
10
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
Margin-top: sólo queremos un margen superior de 50px. .back: el elemento back to top • Float: este elemento está pensado para que esté fijo en la parte inferior derecha de la pantalla, por lo que estará flotando en right. • Clear: siguiendo lo anterior, no tendrá ningún otro elemento flotando a sus lados, por lo que será both • Margin: añadimos un margin de 30px a su alrededor. o
PETER DINKLAGE y GWENDOLINE CHRISTIE (cast1.html y cast2.html)
o
o o
o
Estas páginas dedicada al actor Peter Dinklage y a la actriz Gwendoline Christie contienen información para los más interesados en sus trabajos previos y curiosidades sobre sus trabajos en Game of Thrones. También incluye un par de fotografías. Es una web muy sencilla que servirá como plantilla para el resto de actores. Incluye breadcrumbs, menú secundario y elemento back to top, todos explicados anteriormente. HTML: Usaremos dos divs, .cast_Files y .cast_files2, con el mismo esquema visto hasta ahora, sin embargo con diferentes anchuras. CSS: .cast_Files y .cast_files2: • Float: al igual que lo visto hasta ahora, usaremos left
11
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
Max-width: nuestro contenido esta vez es bastante ancho (el texto), por lo que indicamos un máximo del 45% del ancho del div container. • .cast_files2 cuenta con los mismos márgenes vistos hasta ahora para su alineación con su compañero. o Margin: 50px o Margin-top: 55px • .cast_files: tiene además la propiedad clear: left y un margen izquierdo de 50px (margin-left) Para resaltar elementos de la vida de los actores (películas y trabajos anteriores), hemos utilizado un estilo especial en los enlaces, .cast_links3 • Font-style: en cursiva ya que muchos son nombres de películas y obras • Font-weight: no queremos que se vean en negrita. • Font-size: tamaño ligeramente superior al estándar, 13px. •
EXTRAS (extras.html)
o
o
Esta página también está pensada para tener mucho contenido. Tenemos bastantes enlaces ficticios en el menú secundario que servirán de ejemplo. Sólo tenemos activos los wallpapers, links y interview (en una página aparte debido a la longitud) Al igual que las páginas anteriores, está utiliza dos divs alineados, los mismos que en las páginas de Peter y Gwendoline (.cast_Files y .cast_files2) 12
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
o o o o
Podríamos utilizar dos con las mismas propiedades y nombres diferentes, pero esto puede generar muchas redundancias en el css, por lo que reutilizamos. Los divs contienen una imagen y una breve descripción con estilo .review2, también explicado previamente. Utilizamos un enlace de ancla para los links (<a id="links">) Utilizamos también el elemento back to top explicado también. Esta página es una perfecta muestra de cómo podemos modificar los elementos mencionados hasta ahora para sólo cambiar el contenido, ya que no hemos añadido ningún elemento nuevo.
INTERVIEW WITH GEORGE R.R. MARTIN (interview.html)
o
o
o
o
Esta página contiene mucho texto, por lo que es importante que hayan elementos “distractores” de tanto en tanto para que nuestros usuarios no se cansen y abandonen la página. Igualmente, el espaciado es importante, y la elección de la paleta de colores que hemos realizado en primera instancia, de tal manera que no usemos colores que puedan tener mucho contraste y cansar más rápidamente la vista. Nosotros hemos usado un color grisáceo para el texto que no contraste tanto como un blanco. HTML: la página está compuesta por un único div (aparte de los fijos), .extras3, en el que tenemos todo el contenido de la entrevista, creado con un listado de definición. CSS: .extras3: • Line-height: como decíamos, es importante el espaciado. Nuestro <p> está definido a 2em, así que lo definimos igual. 13
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
Float: lo alineamos a la izquierda, Clear: no queremos que tenga nada más a la izquierda. Margin-left: para seguir la línea de todas las otras páginas, le añadimos 50px de diferencia (¡coherencia entre páginas…!) • Max-width: para que no nos solape con nuestro div de social media, le ponemos un máximo de 85% de ancho. <dt> utiliza el estilo cast_list: • Font-style: cursiva, ya que es el nombre de quien habla y queremos distinguirlo. • Font-weight: en negrita, por la misma razón indicada arriba. • Font-size: 14px, • Color: un color amarillento para distinguirlo del texto. Las imágenes intercaladas en la entrevista utilizan dos estilos, .interviewpic y .interviewpic1 • Interviewpic: o Float: está colocada a la izquierda o Clear: no tendrá nada a la izquierda o Margin-right: el margen con el texto será de 20px, • Interviewpic1: o Float: estará situado a la derecha. No añadimos clear ya que a la derecha tenemos otro div, el de socialmedia. o Margin- left: el margen con el texto será de 20px. • • •
SCHEDULE (schedule.html)
14
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
o
o
o
Con esta tabla queremos que los usuarios vean de una ojeada cuál es el siguiente episodio, la hora, fecha y nombre del mismo. Las tablas son idóneas para mostrar esta información de forma fácil y clara. HTML: <table></table>: Tabla <caption>: título de la tabla. <thead><tbody><tfoot>: definimos qué saldrá en la parte superior, cuerpo y parte final de la tabla. <tr></tr>: fila de la tabla. <td></td>: celda de la tabla. <th></th>: define los encabezamientos de las columnas, añadido con scope. CSS: .schedule: definimos características para el div que contiene la tabla en su conjunto. • Width: ancho de 85% del total • Float: al igual que anteriores div, queremos que esté alineado a la izquierda, • Clear: y que no tenga nada a su izquierda. • Margin-left: al igual que otros div, tendrá un margen de 50px. .table: referimos a la tabla en sí • Font-size: todo el texto será tamaño 14px, • Border-collapse: indicamos esto para que los bordes se solapen y no hayan espacios entre ellos • Width: ocuparemos el 100% del espacio indicado en .schedule. • Vertical-align: el texto estará alineado en la mitad de la celda, • Color: el color del texto por defecto será blanco, • Padding: hay un espacio de 10px entre cada elemento. • Margin-bottom: añadimos 30px de espacio respecto al fondo para que respire dentro del contenido de la página. Caption: • Background: la celda donde esté caption tendrá un fondo anaranjado. • Color: el color del texto será negro, #000, • Font-weight: para que destaque más, será negrita, • Font-size: un tamaño adecuado será 18px, • Line-height: para seguir igual que en el resto de páginas, el espacio entre líneas será de 2em. Td, th: celdas y cabezales, • Line-height: para seguir igual que en el resto de páginas, el espacio entre líneas será de 2em. 15
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
• Text-align: el texto de las celdas está centrado, Thead, tfoot: referimos a la parte superior e inferior de la tabla. • Color: el color del texto será anaranjado, • Font-size: el tamaño serán 15px, • Text-align: centrado. .filas1: este estilo sólo aplicará en los cabezales de las filas, donde está indicado el número de episodio. • Text-align: alineado a la derecha, • Border-right: por estética, le añadimos una línea (solid) delgada (1px) de color blanco (#fff) • Padding-right: separamos el texto del borde 10px, • Width: el ancho de esta celda será de 15% del total de la tabla. • Color: el contenido será color anaranjado. .Episode_name: le damos un ancho especial a las celdas que contienen el nombre del episodio, para que no se corte el texto. • Width: 30%; .column: texto de los cabezales de columnas, • Border-bottom: por estética, le añadiremos un borde que será una línea (solid) blanca (#fff) y delgada (1px) .filas2: destacamos una fila para mostrar el siguiente episodio. • Background: lo diferenciamos del resto con un fondo amarillo • Color: el texto será de color negro para que se vea, • Font-weight: en negrita • Border: le añadimos un sencillo borde negro (1 px solid #000)
16
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
REGISTER (register.html)
o
o
o
Queremos que la gente se registre en nuestra web y en nuestro newsletter, por tanto haremos un formulario que a la gente le sea sencillo y rápido de rellenar. HTML: <form></form>: Formulario. <fieldset>: Áreas determinadas por fieldset dentro de un formulario. <legend>: Indicamos un título para una zona especificada del formulario, adecuada para accesibilidad. <label>: etiqueta de cada elemento del formulario. <input>: área donde los usuarios podrán introducir información en el formato especificado. CSS: Form: estilo para todo el formulario • Width: ocupará un espacio de 85% del container • Float: está alineado a la izquierda, • Margin-left: tendrá un espacio a la izquierda de 50px, Fieldset: nuestro formulario tiene dos. Este será el estilo en general. • Border: sin bordes • Float: queremos que esté alineado a la izquierda. • Width: cada fieldset tendrá una anchura de 42% del espacio total del formulario. • Padding: habrá un espacio entre ambos de 20px. Form li: aplicamos estilo a todos los elementos listados en el formulario: • List-style: no tendrán decoración, así que indicamos none 17
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
• Line-height: interlineado de 3em entre los elementos. Label: estilo para las etiquetas de cada elemento del formulario. • Float: estarán alineadas a la izquierda de los inputs • Width: su anchura será de 120px para que no se corte el texto • Text-align: estará alineado a la izquierda para que mantengan un orden • Margin-bottom: le restamos espacio para que las etiquetas estén alineadas con sus inputs • Font-size: tamaño de letra 14px, • Border-bottom: por estética le damos un borde sencillo y blanco. Input[type=”text”]: damos estilo solo a los inputs tipo texto. • Margin-top: tendrán un margen respecto a la parte superior de 18px, • Border: les eliminamos totalmente los bordes por estética, • Border-bottom: para conjuntarlos con sus etiquetas, les añadimos el mismo borde. • Background: sin fondo por estética, • Margin-left: les damos un margen del mismo tamaño de las etiquetas • Width: su anchura será de 200px por comodidad de los usuarios. Input[type=”radio”] tenemos un elemento radio en el formulario. • Margin-left: lo separamos respecto del borde izquierdo 100px. .button: los botones submit y reset • Margin-top: les damos 30px de espacio respecto al resto de elementos del formulario • Font-size: aumentamos el tamaño de letra a 16px. Legend: tenemos dos legends, con dos estilos diferentes sólo por estética. Este aplicará al de la izquierda. • Font-size: 20px de tamaño, • Color: un estilo amarillo, • Margin-bottom: le restamos espacio de los elementos para que estéticamente sea más elegante. Legend1: refiere a del fieldset derecho, • Font-size: la misma que el anterior, 20px, • Color: este será de color blanco, • Margin-left: lo alineo con las etiquetas del formulario, • Margin-bottom: le resto el mismo número de píxels que el anterior para igualarlos. Formtext1 y formtext2: estos estilos los aplicaremos en el texto que vemos en el primer fieldset, que es meramente informativo. 18
Núria Espinoza - Llenguatges i estàndards web · Pràctica · 2013-4
• • •
Font-size: en ambos casos, será de 14px, Formtext1: estará en negrita y color blanco, Formtext2: simplemente estará del mismo color gris del texto de la web.
Ahora que tienes esta guía, ¡puedes modificar el template para poder crear tus propias páginas web!
19