Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior.

Transcripción

1 Vamos a describir un lenguaje HTML y CSS resumido, sólo con unos ciertos mínimos, para uso en el programa Sénior.

2 1. Lo que va siempre Ejemplo con todo lo básico-minimo obligatorio que irá siempre: <!doctype html> <html> <head> <meta charset="latin1"> </head> <body> </body> </html> <!doctype html> Ponerlo siempre exactamente así al principio del fichero <html> Justo debajo de <!doctype> Siempre así </html> La última línea del fichero. Siempre así <head> Justo debajo de <html> Siempre así <meta charset... Justo debajo de <head> Si estamos en un sistema no Windows tendremos que cambiar lo de latin1 a la tabla de códigos que use ese sistema, por ejemplo utf8 </head> Al acabar el material de cabecera. El que nosotros vemos son las etiquetas <meta>, <style> y <script> (si las hay) <body> Justo debajo de </head> La usaremos siempre así </body> Justo encima de </html> Siempre así Entre <body> y </body> irá todo lo demás, el contenido de la página

3 2. Esto es contenido: irá entre las etiquetas body Ejemplo de etiquetas <h3>nota importante</h3> Siempre es <h y luego un número que indica el nivel de importancia del titular. 1 es para los más importantes (saldrán mayores) y 6 para los menos. Después irá el titular (lo que queramos que ponga) y luego </h con el mismo número.

4 3. de texto normal Esto es contenido: irá entre las etiquetas body Ejemplo: <p>esta es una página dedicada a mis comentarios</p> Siempre irá <p> al principio, luego el párrafo y cuando se termine pondremos </p>

5 4. Esto es contenido: irá entre las etiquetas body Ejemplo de lista: <ol> <li>acabar con la pobreza</li> <li>mejorar el medio ambiente</li> <li>elevar el nivel mental de cada persona a su límite máximo</li> </ol> Al principio pondremos la etiqueta ol para listas numeradas y ul para listas de viñetas; y al final repetiremos esa etiqueta pero con /. Cada ítem de la lista va entre <li> y </li>

6 5. Esto es contenido: irá entre las etiquetas body Ejemplo de etiqueta: <img src="verano.jpg" width="200" height="100" /> Detras de src irá el nombre del fichero entre comillas; hay que ponerlo obligatoriamente. Detrás de width irá la anchura entre comillas (pueden ser comillas simples o dobles), en píxels; podemos no ponerlo y usará la anchura real de la imagen. Detrás de height irá la altura entre comillas, en píxels; podemos no ponerlo y usará la anchura real de la imagen.

7 6. Esto es contenido: irá entre las etiquetas body Ejemplo de enlace: <a href=" universidad de Cantabria</a> Siempre pondremos detrás de href la dirección de Internet a donde enlazamos entre comillas, que pueden ser simples o dobles. El lo dejaremos siempre antes de la ruta. Después del > irá lo que queremos que salga en la página (donde pulsará el usuario) y al final pondremos </a>

8 7. Cuadros de información Esto va en alguno de los elementos que hemos visto. En cualquier elemento (img, p, div, span, etc.) en que queramos que salga un cuadro con una información cuando el usuario ponga el cursor sobre ello añadiremos en la etiqueta title="mensaje" Por ejemplo: <p>este texto no tiene mensaje, pero a <span title="este es el mensaje">estas tres palabras</span> se lo pongo</p>

9 8. Estilos, formatos Si no decimos nada, el navegador usa un estilo normalizado: fondo blanco, letras corrientes negras, etc. Si eso no nos vale, le tenemos que explicar los estilos o formatos que queremos. Para ello necesitamos hacer dos cosas: explicar en qué consiste cada formato y asignar esos formatos a alguna parte de la página. La sección donde explicamos los estilos y formatos que queremos irá justo despues de <meta.. y antes de </head> La primera línea tiene que ser <style type="text/css"> y la última </style> Bloque de explicación de cada estilo Entre las líneas <style y </style> habrá un bloque por cada estilo que queramos. Vamos a ver dos opciones, un estilo con nombre, sólo para ciertas partes de la página y un estilo para todos los elementos. En el primer caso, estilo sólo para ciertas partes, la primera línea del bloque será.nombre { (será el nombre que queramos ponerles al estilo) y la última será } Lo que va detrás del punto es el nombre que llamamos a este estilo o formato y que lo usaremos donde nos venga bien (ver el apartado de zonas con formato) En el segundo caso, si es el estilo general de base para toda la página entonces en vez de un punto y un nombre pondremos sólo un asterisco (*)

10 9. Formatos que podemos poner Formato de texto Pondremos font: tipo de letra; En el tipo de letra podremos poner: grosor Pondremos bold si queremos negrita. Si no, pondremos normal. tamaño Pondremos los píxels que queramos que mida la letra. tipo de letra Pondremos el nombre de un tipo de letra o de varios, separados por coma, por si el ordenador del cliente no tiene el tipo que pedimos Ejemplo: font: normal 20px "Century Gothic",Arial,Times; Color del texto Pondremos color: nombre; El nombre del color es en inglés. Aquí está una lista de colores habituales: black, green, silver, lime, gray, olive, white, yellow, maroon, navy, red, blue, purple, teal, fuchsia, aqua Fondo Pondremos background: datos del fondo; Los datos que podemos poner son: color Pondremos un nombre como para el texto imagen Pondremos url(nombredelaimagencompleto) fijado Si queremos que la imagen de fondo quede fija en pantalla aunque el usuario avance o retroceda pondremos fixed Borde Pondremos border: datos del borde; Los datos del borde son: anchura pondremos el número de píxels estilo lo normal es poner solid color pondremos el nombre, como para el texto Ejemplo: border: 2px solid green; Sombra Pondremos box-shadow: datos de la sombra; Los datos de la sombra son: desplazamiento en horizontal en píxels desplazamiento en vertical en píxels difuminado en píxels Ejemplo: box-shadow: 10px 10px 5px; Margen Pondremos margin: margenenpixels;

11 10. Ejemplo de sección de formato Ejemplo completo: vamos a definir un formato llamado "nube" consistente en que las letras sean gruesas y blancas sobre fondo azul celeste y con un borde blanco de 5 píxels de grueso. <style type="text/css">.nube { font: bold; color: white; background: cyan; border: 5px solid white } </style>

12 11. Asignación de formatos Bloques enteros con formato A la parte de la página a la que queramos poner un formato de los que hemos preparado le ponemos class="nombredelformato" Ejemplo: <p class="marcado">este párrafo va con un estilo preparado por mí</p> Zonas con formato especial Qué hacemos cuando uno de los estilos o formatos que hemos preparado no queremos que afecte a una parte entera, sino sólo a un trozo? Por ejemplo, si queremos que afecte sólo a la primera palabra de un párrafo, no a todo. Respuesta: marcamos la parte que queremos afectar como zona de formato especial Típicamente son unas pocas palabras dentro de un párrafo para las que queremos un formato o estilo distinto. Antes de la primera palabra que lleva el formato pondremos <span class= y luego el nombre del estilo entre comillas Detrás de la última palabra afectada pondremos </span> Ejemplo: <span class="negrita">puntualmente</span>

13 12. Animaciones Queremos que un elemento de nuestra página tenga cierta animación? Tenemos que concretar: qué elemento, qué características van a cambiar en la animación, en cuanto tiempo. Al elemento a animar le ponemos id="..." y en los puntos suspensivos ponemos un nombre. Por ejemplo: <p id="animado"> Dentro la etiqueta <style> ponemos un bloque de líneas como el siguiente: #... { -webkit-animation: animacion1 4s infinite alternate; animation: animacion1 4s infinite alternate; animacion1 { from {...} to {...} animacion1 { from {...} to {...} } En los primeros puntos suspensivos, tras el # va el nombre del elemento, lo que hemos puesto en su id. En el caso de que no se trate de un sólo elemento, sino de muchos, se cambia en todas partes de id a class y de # a. Detrás de animacion1 podemos cambiar el tiempo que dura cada vuelta y cuántas tiene que dar (infinite significa para siempre). Entre las llaves de from y de to pondremos el estilo que queremos que tenga al principio y al final de cada vuelta.

14 13. Añadidos para acciones que requieren programas El resto de posibilidades que vamos a comentar requieren unos programas extra, que se proporcionan con el material del curso. Eso implica unos añadidos en la página que vayamos a hacer y unos ficheros extra que habrá que poner. Añadidos en la página En la parte head hay que añadir, literalmente las siguientes líneas: <script src="jquery.js"></script> <link rel="stylesheet" href="jquery-ui.css" /> Ficheros extra que necesitaremos Además de la página, tendremos que poner, en la misma carpeta, los siguientes ficheros que están con el material del curso, suministrados en la carpeta extras : jquery.js jquery-ui.css la carpeta images

15 14. de la página que se pueden expandir y contraer Cómo hacemos para tener un menú de apartados y elegir pulsando cuál de ellos vemos? 1. Preparamos los apartados. Cada uno: un título entre <h1> y un contenido, entre <div></div> 2. Englobamos todo dentro de otras etiquetas. La de arriba será <div id="...">; en los puntos suspensivos pondremos un nombre, por ejemplo "bloque" Debajo será </div> 3. Al final de todo ponemos el siguiente bloque: <script type="text/javascript"> menu(...,"acordeon",200, "auto"); </script> Lo que hay que poner en los puntos suspensivos es el nombre del div global, por ejemplo, bloque Si en vez de uno encima de otro, queremos uno al lado del otro, en vez de acordeon pondremos pestanhas El número detrás, es las milésimas en que cambia. Lo último puede ser "auto" si queremos que todos los apartados tengan la altura del más alto o "content" si queremos que cada uno tenga la suya. Ejemplo: <div id="apartados"> <h1>oro</h1> <div>metal brillante, trabajable y poco alterable. Innecesario para los seres vivos. Muy caro.</div> <h1>aire</h1> <div>mezcla de gases. Vital para los seres vivos, por su parte de oxígeno. Regalado (de momento)</div> </div> <script type="text/javascript"> menu("apartados","acordeon", 250, "content"); </script>

16 15. Conjunto de imágenes que aparecen pequeñas y pulsando en una de ellas pasa a ser grande Si en una página queremos enseñar muchas fotos, con todas a tamaño natural, costará moverse por ella, o buscar una foto concreta. Es mejor que salgan a un tamaño pequeño (pero reconocible) y pulsando en una de ellas ésa pase a grande. Cómo podemos hacerlo? Pensando en muchas fotos, vamos a evitarnos escribir cada una de las etiquetas de fotos en la página. Usaremos instrucciones de programa. Los pasos son: 1. Preparamos todas las imágenes en una subcarpeta 2. Preparamos un listado con el nombre de cada archivo de foto en un fichero que se llamará lista...; en los puntos suspensivos va el nombre de la subcarpeta, y acabará en.txt. Este fichero estará fuera de la subcarpeta. 3. Ponemos en la página unas etiquetas div para indicar donde van a ir las fotos, tendrán un id igual que el nombre de la subcarpeta. Por ejemplo: <div id="fotos"></div> 4. Al final de todo ponemos el siguiente bloque: <script type="text/javascript"> cargafotos("..."); </script> En la parte de <style> añadiremos el siguiente bloque: #....ui-selected {width:400px} #....ui-unselected{width:50px} #... img { -webkit-transition: width 2s; transition: width 2s; } En todos los puntos suspensivos tenemos que poner el nombre de la subcarpeta de las fotos en la línea de selected pondremos el ancho de las fotos a lo grande y en la de unselected el ancho de cuando son pequeñas En las dos líneas de transition pondremos el tiempo que tarda en cambiar