UOC 2013
Llenguatges i estàndards web PAC2· 2013-2 HTML - CSS Núria Espinoza 3/29/2013
Núria Espinoza - Llenguatges i estàndards web · PAC2 · 2013-2
URL: http://cv.uoc.edu/~nespinozan/index.html <HTML> • •
• • • • • •
• •
<title> : Indica el título de la página web <meta>: indicamos la descripción de la página y las keywords, para las búsquedas y la indexación en buscadores. Además añadimos la especificación de caracteres UTF-8 para que el navegador lea correctamente los caracteres Unicode. <ul> <li>: Listado no ordenado para el menú en la parte superior <dl><dt>: Listado de definición para las preguntas teóricas <span>: destaco algunas palabras, especialmente en la página de respuestas, para diferenciarlas del resto. <br />: espacio en blanco utilizado para separar algunos párrafos. <div>: elementos que quiero agrupar dentro de una etiqueta para poder modificarlos en bloque. <pre>: utilizo esta etiqueta para poner texto con formato previo y que conserva los line breaks y los espacios. De esta manera puedo controlar mejor el texto para conseguir una apariencia lo más parecida posible al original. <img>: inserto imágenes, y les añado alt para que cumplir las características de accesibilidad de la página y que los lectores de pantalla puedan leerlo. <q>: hay un par de quotes en otro idioma que quiero que se identifiquen correctamente para cumplir las condiciones de accesibilidad y sean legibles.
<CSS> • •
•
@charset "UTF-8"; indicado junto a meta en el html para que el navegador lea correctamente los caracteres Unicode. Body: formato de todo lo contenido dentro de <body> en el html o Font-family: quiero que todo dentro de este elemento sea sans-serif, preferiblemente Arial. o Background: el fondo quiero que sea de color gris oscuro, o Margin: quiero que el margen sea 0 o Padding: quiero que el ancho sea 0 o Line-height: en todo body quiero que el ancho entre líneas sea de 30 píxeles. Me ayudará a definir a posteriori el resto de espaciados en el documento. H2: utilizado para los títulos en color naranja de “consum_colaboratiu” y de “index” o Font-family: siguiendo el ejemplo del pdf, ha de ser serif, preferiblemente Times New Roman o Font-size: siguiendo el ejemplo del pdf, ha de ser tamaño 35px, o Color: naranja o Font-weight: para que se parezca lo máximo al ejemplo, he preferido darle un aspecto bold 1
Núria Espinoza - Llenguatges i estàndards web · PAC2 · 2013-2
•
•
•
•
•
• •
H3: Utilizado en “el_acces.html” para indicar la fecha y la autoría del artículo. o Color: verde o Font-style: italic para seguir el ejemplo o Margin-top: quiero controlar el espacio que le separa de h2 por lo que lo reduzco a 0 o Líne-height: para especificar la distancia entre líneas y el espacio existente, lo pongo a 1,5 para acercarlo al ejemplo o Font-size: tamaño 14 H4: Utilizado en los subtítulos de “el_Acces.html” y en “index.html” o Color: ha de ser azul, este se asemeja al ejemplo o Font-family: el texto de “el_Acces.html” tiene una fuente diferente. Quiero que sea una sans-serif, preferiblemente Trebuchet MS o Font-size: el ejemplo tiene un tamaño de 22px aproximadamente, o Border-bottom: la principal característica de este subtítulo es el borde que cubre toda la línea. El grosor (1px), color (#000) y estilo (solid) están especificados o Line-height: gracias a esto puedo controlar el espaciado existente entre la línea y las palabras y así asemejarlo al máximo con el ejemplo .container, .container_acces: refieren a los div principales (tienen el contenido principal) de los 4 html. Nos servirá para dar el aspecto de “hoja” que tenemos en el pdf. o Width: 960px será nuestro ancho, o Background: blanco, que se diferenciará del fondo gris oscuro que especificamos en body o Margin: especificamos que estará en el centro justo del documento o Padding: espacio que habrá entre el contenido en sí y los bordes interiores de la “caja” contenedora Span: para destacar texto, sobre todo en la página de “respostes.html” y “el_acces.html” o Font-style: italic para que sea parecido al ejemplo o Color: tono azulado. Pre: damos una apariencia al texto pre-formateado o Font-family: para acercarlo al ejemplo, quiero que la fuente sea una sans-serif, ojalá una Trebuchet MS o Font-size: 14px es el tamaño adecuado para el aspecto o Line-height: este espaciado (1.3 em) es adecuado según el PDF Q : las citas en otro idioma tendrán el aspecto especificado aquí o Font-style: italic .ejemplo: da formato al ejemplo utilizado en la última pregunta de “respostes.html” o Background: he querido dar un aspecto de caja, por lo que he especificado un fondo diferente al blanco. Gris en este caso o Outline: he añadido un fondo negro (#000), delgado (1px) y que sea una línea (solid) 2
Núria Espinoza - Llenguatges i estàndards web · PAC2 · 2013-2
Margin: estará centrado en el documento. Padding: habrá una distancia de 40 px entre el contenido de mi caja y el borde interior de la misma. o Width: le pongo un ancho a mano según el contenido. Si no lo especifico, el ancho de la caja será el mismo que el del documento. .menu a:link, a:visited, a:focus, a:hover, a:active : los enlaces del menú superior tendrán las siguientes características (al ser diferentes del a. principal explicado más abajo, ha de tener su formato propio) o Font-family: serán en sans-serif (elección propia) o Font-size: quiero que sean bien visibles, por lo que pongo un tamaño 20px .menu ul li: aquí es donde indico que el menú será horizontal. Como está construido como lista, hay que especificar lo siguiente: o List-style-type: mi lista horizontal no tendrá bullets, por lo que pongo none o Display: esto hará que mi listado se vea horizontal y no vertical o Background-color: he querido que mi menú se distinga bien en la parte superior de la página, por lo que añado un fondo a cada uno de los elementos del listado o Border: cada uno de los elementos estará rodeado de una línea (solid) delgada (1px) de color negro (#000) o Padding: habrá una distancia de 0.5em entre el contenido de cada elemento del menú y el borde de la caja que lo contiene o Text-align: cada elemento del menú estará centrado dentro de su caja contenedora Dl.respostes1: damos formato a los enunciados de preguntas teóricas de “respostes.html” o Font-family: todo lo escrito en el listado estará en fuente sans-serif, y Arial será la primera opción. o Font-size: todo lo escrito en el listado estará en fuente tamaño 20px, o Font-weight: todo lo escrito en el listado estará en bold Dd.respostes1: damos formato a las respuestas de las preguntas teóricas de “respostes.html” o Font-size: quiero que las respuestas se diferencien del enunciado, por lo que el tamaño será un poco más pequeño, 16px o Font-weight: así como el enunciado estará en negrita, quiero que las respuestas no lo estén, por eso especifico que el weight sea normal Ol.lista-consumo-colaborativo: damos formato a los puntos del listado ordenado de “consum_colaboratiu.html” o Font-family: todo lo escrito en el listado estaré en fuente sans-serif, y Arial será la primera opción o Font-size: todo lo escrito en el listado estará en fuente tamaño 20px, o Color: el color, siguiendo el ejemplo del pdf, ha de ser un de un tono azulgrisáceo o o
•
•
•
•
•
3
Núria Espinoza - Llenguatges i estàndards web · PAC2 · 2013-2
Margin-left: según el pdf el listado no está centrado del todo, por lo que pongo margin 100px para que sea lo más parecido posible: estará a 100px del lado izquierdo del documento Li.anidado: damos formato a cada uno de los elementos ordenados listados y que están anidados en ol.lista-consumo-colaborativo: o Font-family: la fuente de cada elemento anidado es diferente al del elemento listado principal, en este caso es una serif tipo Times New Roman o Font-size: el tamaño ha de ser un poco más pequeño que el listado principal, en este caso 18px, o Color: el color ha de ser diferente del listado principal, en este caso gris o Margin-left: este margin refiere al sangrado respecto al elemento del listado principal. En este caso, quiero que esté a 45px siguiendo el pdf. o List-style-type: yo especificaré la imagen que hará de bullet, por lo que indico none o Background: el fondo del elemento anidado será el mismo que el del documento principal (#fff) y quiero que el bullet sea una imagen con una ruta especificada por mí. Yo indicaré lo alineado que estará respecto al texto (0 0.4em) y que sólo se mostrará una vez (no-repeat) o Padding-left: la distancia que hay entre el texto y el bullet, en este caso 27px. o Font-weight: siguiendo el pdf, el elemento anidado estará en negrita. Li.intercanvis: hay un estilo diferente en este listado anidado de “consum_colaboratiu.html” por lo que es necesario darle un formato propio o Font-family: todo lo escrito en el listado anidado estaré en fuente sans-serif, y Arial será la primera opción o Font-size: el tamaño de la fuente será 16px; o Color: siguiendo el pdf, el texto será de color rojizo. o List-style-type: yo especificaré la imagen que hará de bullet, por lo que indico none o Background: el fondo del elemento anidado será el mismo que el del documento principal (#fff) y quiero que el bullet sea una imagen con una ruta especificada por mí. Yo indicaré lo alineado que estará respecto al texto (0 0.4em) y que sólo se mostrará una vez (no-repeat) o Padding-left: la distancia que hay entre el texto y el bullet, en este caso 20px. o Margin-left: siguiendo el ejemplo, indicamos una distancia de 10px de margen para intentar la máxima semejanza. li.elacces_list: damos formato a los elementos de los listados no ordenados de “el_acces.html” o float: para poder eliminar el espacio entre los elementos del listado y ser lo más parecidos posibles al ejemplo, he indicado float:left o width: imprescindible para que funcione float, quiero que el listado tenga un ancho de 900px ul.elacces_list0: damos formato al listado no ordenado de “el_acces.html” o
•
•
•
•
4
Núria Espinoza - Llenguatges i estàndards web · PAC2 · 2013-2
list-style-type: al indicar que los elementos del listado estarán como float:left, el bullet desaparece, por lo que especifico circ para volver a tener el círculo del ejemplo o Font-family: como el listado en sí ha de tener el mismo tipo de texto de <pre> (que es el principal contenido de esta página), lo especifico aquí. o Font-size: mantendrá el mismo tamaño de texto del resto del texto del documento o Line-height: el mismo interlineado del resto del documento Ol.elacces_list1: al igual que en el anterior listado no ordenado, en este listado ordenado hay que especificar: o Font-family: como el listado en sí ha de tener el mismo tipo de texto de <pre> (que es el principal contenido de esta página), lo especifico aquí. o Font-size: mantendrá el mismo tamaño de texto del resto del texto del documento o Line-height: el mismo interlineado del resto del documento A:link, a:visited, a:focus, a:active: formato de los enlaces de las 4 páginas. Son los utilizados en “consum_colaboratiu.html”. o Border-bottom: quiero que todos los enlaces tengan un borde delgado (1px), negro (#000) y que sean puntitos (dotted) para poder distinguirlos. o Text-decoration: con none eliminamos el subrayado por defecto de los enlaces o Font-family: como seguimos el ejemplo del pdf, ha de ser una serif, principalmente Times New Roman o Font-size: 18px es adecuado siguiendo el ejemplo o Color: todos los enlaces serán en color negro A:hover: damos un formato especial a los enlaces al pasarles el cursor por encima (hover) o Color: al pasar el cursor por encima del enlace, se convertirá a color verde. A.enlaces1:link, a.enlaces1:visited, a:enlaces1:Focus, a.enlaces1:hover, a.enlaces1:active: formato específico de los enlaces que aparecen en el primer cuadro de “el_acces.html”. El formato indicado aquí hará que el enlace se vea de la misma manera ya sea activo, visitado, o si paso el cursor por encima. o Font-family: como el a. principal especificado en el css indica unas características diferentes, le doy un formato propio. En este caso, quiero que la fuente sea una sans-serif. o Font-size: el tamaño ha de ser 14px para que no se distinga del texto o Color: el color ha de ser blanco para no distinguirlo del resto de la frase y seguir el ejemplo o Border-bottom: como en a. principal indica un borde específico y no quiero que salga, indico none A.texto:link, a.texto:visited, a.texto:focus, a.texto:hover, a.texto:active: Damos formato a los listados que aparecen en “el_acces.html” (Al ser diferente de la a. principal del css hemos de especificarlo) El formato indicado aquí hará que el enlace se vea de la misma manera ya sea activo, visitado, o si paso el cursor por encima. o
•
•
•
•
•
5
Núria Espinoza - Llenguatges i estàndards web · PAC2 · 2013-2
Text-decoration: siguiendo el ejemplo será underline Color: tiene un tono naranja-rojizo. En este caso, cogemos rojo Font-family: especificamos que sea un sans-serif, y principalmente Trebuchet MS, al igual que el resto del texto del documento o Font-size: Siguiendo el resto del texto del documento, será tamaño 14px; o Border-bottom: como en a. principal indica un borde específico y no quiero que salga, indico none .cuadro: da formato a los cuadros con imágenes en “el_acces.html” o Background: tienen un fondo gris oscuro o Border-bottom: en el ejemplo tienen un borde sólo en la parte inferior, grueso (5px), de puntos (dotted) y de color anaranjado o Padding: hay una distancia de 10px entre el contenido del cuadro y el borde inferior del mismo o Font-size: todo lo escrito en el interior de .cuadro será en tamaño 14px (esto lo utilizamos sobre todo en la primera imagen de la página “el_Acces.html” y su pie) o Color: todo lo escrito dentro de .cuadro será en color blanco o Text-align: el contenido dentro de este <div> estará centrado o Margin-top: controlamos así el espacio entre el párrafo anterior de texto y el cuadro con la imagen o Line-height: controlamos aquí el espacio entre la imagen y la frase o Font-weight: la frase tiene un formato diferente al resto del texto, está en negrita. o Padding-top: siguiendo el ejemplo, hay un espacio determinado entre el contenido y el borde inferior del cuadro .imagen_float: formato específico del último cuadro con imagen de la página “el_acces.html” o Background: tiene un fondo gris oscuro o Text-align: el contenido dentro de este <div> estará centrado o Float: queremos que este cuadro esté situado a la izquierda del texto, y que se forme una columna a su derecha. Para ello especificamos float:left o Width: valor imprescindible para que funcione float, le damos un valor manual de 400px. o Padding-bottom, padding-top, padding-left, padding-right: seguimos el ejemplo del pdf y jugamos con estos valores para conseguir el máximo parecido o Margin-bottom, margin-top, margin-right: siguiendo el ejemplo del pdf y los espacios que hay entre este cuadro y el texto de alrededor, jugamos con los valores hasta conseguir el máximo parecido. No hay margin-left porque sería 0 .final: el cuadro final de “el_access.html” no contiene imágenes, sólo texto y enlaces. o Background: el mismo fondo gris oscuro de los otros dos cuadros o Text-align: el contenido del cuadro está alineado a la izquierda o o o
•
•
•
6
Núria Espinoza - Llenguatges i estàndards web · PAC2 · 2013-2
o o o o
Padding: habrá una separación de 10px entre el contenido del cuadro y el borde interior del mismo. Padding-left: la separación en el lado izquierdo quiero que sea un poco mayor que 10px para que sea como en el modelo Color: el texto en el cuadro tiene un color diferente al del resto de la página por lo que he de especificar que sea blanco Font-size: el tamaño también es diferente al del resto del documento, por lo que pongo un tamaño un poco inferior a 14px.
7