Programación para InternetPROGRAMACIÓN PARA INTERNET                                       Módulo 1. Construcción de págin...
RequisitosPROGRAMACIÓN PARA INTERNET                             ●   Lo único que necesitas es:                           ...
XHTMLPROGRAMACIÓN PARA INTERNET                             ●   XHTML significa eXtensible HyperText Markup               ...
CSSPROGRAMACIÓN PARA INTERNET                             ●   CSS son las siglas de Cascading Style                       ...
Etiquetas en XHTMLPROGRAMACIÓN PARA INTERNET                             XHTML está basado en etiquetas. Una etiqueta     ...
... Etiquetas en XHTMLPROGRAMACIÓN PARA INTERNET                             ●   Volviendo al ejemplo anterior de nuestro ...
... Etiquetas en XHTMLPROGRAMACIÓN PARA INTERNET                             Hay etiquetas que pueden modificarse mediante...
Estructura de un documento                                            XHTMLPROGRAMACIÓN PARA INTERNET                     ...
DOCTYPE y codificaciónPROGRAMACIÓN PARA INTERNET                             ●   La primera línea que debemos tener en nue...
... DOCTYPE y codificaciónPROGRAMACIÓN PARA INTERNET                             ●   Tenemos que escribir esto:           ...
NotasPROGRAMACIÓN PARA INTERNET                             ●   Estas dos etiquetas no llevan la barra / de               ...
El elemento raíz (HTML)PROGRAMACIÓN PARA INTERNET                             ●   El resto de nuestro documento tiene que ...
La cabecera (HEAD)PROGRAMACIÓN PARA INTERNET                             ●   La cabecera contiene información que no forma...
... La cabecera (HEAD)PROGRAMACIÓN PARA INTERNET                             <head>                                 <title...
El cuerpo (BODY)PROGRAMACIÓN PARA INTERNET                             ● Por ultimo, nos encontramos con el cuerpo,       ...
<?xml version="1.0" encoding="UTF-8"?>                             <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0           ...
Guardar el archivoPROGRAMACIÓN PARA INTERNET                             ●   La extensión del archivo XHTML es .htm o     ...
Texto en XHTMLPROGRAMACIÓN PARA INTERNET                             ●   HTML fue creado en principio para el alfabeto    ...
Texto:              Descripción:PROGRAMACIÓN PARA INTERNET                                                   Pantalla:    ...
PárrafosPROGRAMACIÓN PARA INTERNET                             ●   Los párrafos sirven para estructurar el                ...
Saltos de líneaPROGRAMACIÓN PARA INTERNET                             ●   A veces, dentro de un mismo párrafo             ...
TítulosPROGRAMACIÓN PARA INTERNET                             ●   Los títulos nos sirven para agrupar información.        ...
Los BlockquotesPROGRAMACIÓN PARA INTERNET                             ●   Los blockquotes sirven para mostrar un bloque qu...
Separadores horizontalesPROGRAMACIÓN PARA INTERNET                             ●   Los separadores horizontales (horizonta...
... Separadores horizontalesPROGRAMACIÓN PARA INTERNET                             ●   WIDTH: Permite especificar el ancho...
ComentariosPROGRAMACIÓN PARA INTERNET                             ●   Existen dos etiquetas distintas para ingresar       ...
Etiquetas de formatoPROGRAMACIÓN PARA INTERNET                             ●   Ahora veremos cómo destacar ciertas partes ...
EnfásisPROGRAMACIÓN PARA INTERNET                             ●   Para dar énfasis a un texto disponemos de la            ...
Texto preformateadoPROGRAMACIÓN PARA INTERNET                             ●   Recordemos que XHTML ignora espacios en     ...
CitasPROGRAMACIÓN PARA INTERNET                             ●   Si queremos marcar un texto como una cita,                ...
Acrónimos y abreviaturasPROGRAMACIÓN PARA INTERNET                             ●   Para explicar el significado de los acr...
... Acrónimos y abreviaturasPROGRAMACIÓN PARA INTERNET                             <p>                             Mi orde...
PROHIBIDO USARPROGRAMACIÓN PARA INTERNET                             ●   Si ya sabías HTML ya no uses <b>, <i>, <font>    ...
Enlace a una página externaPROGRAMACIÓN PARA INTERNET                             ● Si queremos un link a una página que e...
Enlace a una página localPROGRAMACIÓN PARA INTERNET                             ●   Para enlazar a una página que está en ...
Enlace a una dirección de e-mailPROGRAMACIÓN PARA INTERNET                             ●   Podemos hacer un enlace que al ...
AnclasPROGRAMACIÓN PARA INTERNET                             ●   Las anclas nos permiten enlazar a una posición           ...
ListasPROGRAMACIÓN PARA INTERNET                             ●   Cuando necesitamos presentar en un texto una             ...
PROGRAMACIÓN PARA INTERNET                             Lic. Nancy Michelle Torres Villanueva   39
Etiqueta <ul> </ul>PROGRAMACIÓN PARA INTERNET                             ●   Indica al navegador que cree una lista con  ...
Etiqueta <ol> </ol>PROGRAMACIÓN PARA INTERNET                             ●                                 Listas ordenad...
Etiqueta <li> </li>PROGRAMACIÓN PARA INTERNET                             ●   Se usa para indicar al navegador que exhiba ...
Listas de definiciónPROGRAMACIÓN PARA INTERNET                             ● Las listas de definición se diferencian de la...
ImágenesPROGRAMACIÓN PARA INTERNET                             ●   Podemos usar tres formatos de imagen: GIF, JPEG y      ...
Insertar una imágenPROGRAMACIÓN PARA INTERNET                             ●   Para poner una imagen hacemos uso de la     ...
Atributo Widht y HeightPROGRAMACIÓN PARA INTERNET                             ●   Los atributos width y height nos permite...
Atributo AltPROGRAMACIÓN PARA INTERNET                             ● El atributo alt contiene una descripción de la       ...
Imágenes como linksPROGRAMACIÓN PARA INTERNET                             <a href="http://pagina.com"                     ...
ThumbnailsPROGRAMACIÓN PARA INTERNET                             ●   Thumbnail es una imagen más pequeña que la           ...
... ThumbnailsPROGRAMACIÓN PARA INTERNET                             ●   Si nuestro wallpaper de Trinity ocupa 100Kb (o má...
TablasPROGRAMACIÓN PARA INTERNET                             ●   En HTML también podemos incluir arreglos de              ...
... TablasPROGRAMACIÓN PARA INTERNET                             ●   <table>: Crea la tabla                             ● ...
Atributos de tablePROGRAMACIÓN PARA INTERNET                             ●   Align: Establece la alineación de la tabla o ...
Fusionar celdasPROGRAMACIÓN PARA INTERNET                             ●   Colspan: Expandir una celda varias columnas.    ...
<table width=”80%” align=”center”>                             <caption>Directorio telefonico</caption>                   ...
<td>jose@prueba.com.bo</td>                             </tr>PROGRAMACIÓN PARA INTERNET                             <tr>  ...
FormulariosPROGRAMACIÓN PARA INTERNET                             ●   Los formularios están delimitados con la            ...
¿Cuáles son sus atributos?PROGRAMACIÓN PARA INTERNET                             ●   METHOD: indica cómo se enviarán las  ...
PROGRAMACIÓN PARA INTERNET                             ●   ACTION: indica la dirección a la que se enviará                ...
EjemploPROGRAMACIÓN PARA INTERNET                             ●   <FORM ACTION="procesa2.html"                            ...
PROGRAMACIÓN PARA INTERNET                             ●   La diferencia entre estos dos métodos radica                   ...
PROGRAMACIÓN PARA INTERNET                             ●   La etiqueta FORM actúa como una especie de                     ...
PROGRAMACIÓN PARA INTERNET                             ●   Se puede insertar cualquier elemento HTML en                   ...
Elementos interactivosPROGRAMACIÓN PARA INTERNET                             ●   La etiqueta INPUT: Todos los botones y   ...
INPUTPROGRAMACIÓN PARA INTERNET                             ●   <INPUT type="tipo de campo" value="Valor                  ...
Atributo namePROGRAMACIÓN PARA INTERNET                             ●   Permite a algunos scripts reconocer qué campo     ...
Atributo typePROGRAMACIÓN PARA INTERNET                             ●   Se usa para especificar qué tipo de elemento      ...
Ejemplo de checkboxPROGRAMACIÓN PARA INTERNET                             <input type="checkbox"                          ...
PROGRAMACIÓN PARA INTERNET                             Lic. Nancy Michelle Torres Villanueva   69
... Atributo typePROGRAMACIÓN PARA INTERNET                             ●   hidden: Este campo, que el navegador no       ...
... Atributo typePROGRAMACIÓN PARA INTERNET                             ● file: Este tipo de control permite a los usuario...
... Atributo typePROGRAMACIÓN PARA INTERNET                             ●   radio: Un botón que permite al usuario elegir ...
Ejemplo radioPROGRAMACIÓN PARA INTERNET                             <input type="radio" name="transporte"                 ...
... Atributo typePROGRAMACIÓN PARA INTERNET                             ●   reset: Un botón de restauración para quitar   ...
... Atributo typePROGRAMACIÓN PARA INTERNET                             ●   text: Una casilla de texto para escribir una  ...
TextareaPROGRAMACIÓN PARA INTERNET                             ●   Se usa para definir un cuadro de texto más             ...
Atributos del TextareaPROGRAMACIÓN PARA INTERNET                             ●   cols: representa el número de caracteres ...
... Atributos del TextareaPROGRAMACIÓN PARA INTERNET                             ●   readonly: impide que el usuario modif...
Ejemplo TextareaPROGRAMACIÓN PARA INTERNET                             <TEXTAREA COLS=20 ROWS=10                          ...
SelectPROGRAMACIÓN PARA INTERNET                             ●   Sirve para crear una lista desplegable de                ...
Atributos de SelectPROGRAMACIÓN PARA INTERNET                             ●   name: representa el nombre asociado con la  ...
... Atributos de SelectPROGRAMACIÓN PARA INTERNET                             ●   size: representa el número de líneas de ...
Ejemplo de SelectPROGRAMACIÓN PARA INTERNET                             <select name="transporte">                        ...
PROGRAMACIÓN PARA INTERNET                             Lic. Nancy Michelle Torres Villanueva   84
PROGRAMACIÓN PARA INTERNET                             Lic. Nancy Michelle Torres Villanueva   85
<form action="ejemplo.php" enctype="multipart/form-data">                             <fieldset><legend>Información person...
<fieldset> <legend>Intereses</legend>                             <input name="intereses" type="checkbox"PROGRAMACIÓN PARA...
PROGRAMACIÓN PARA INTERNET                             Lic. Nancy Michelle Torres Villanueva   88
PROGRAMACIÓN PARA INTERNET                             Demuestra lo que aprendiste!!                                 Lic. ...
Herramientas de diseñoPROGRAMACIÓN PARA INTERNET                             ●   Editores de texto plano y navegador      ...
SoftwarePROGRAMACIÓN PARA INTERNET                             ●   Notepad++                             ●   Gedit        ...
ExtrasPROGRAMACIÓN PARA INTERNET                             ●   Firebug: Plugin para visualizar el código fuente de las p...
... ExtrasPROGRAMACIÓN PARA INTERNET                             ●   CSS Menu Maker. Crear y personalizar tus             ...
Donde poner CSSPROGRAMACIÓN PARA INTERNET                             ●   Hay dos opciones para insertar estilos en un    ...
... Donde poner CSSPROGRAMACIÓN PARA INTERNET                             ●   La otra opción es escribir la información   ...
Funcionalidad de CSSPROGRAMACIÓN PARA INTERNET                             ●   En una hoja de estilos utilizamos reglas qu...
SelectoresPROGRAMACIÓN PARA INTERNET                             ● Si queremos elegir una etiqueta, simplemente           ...
... SelectoresPROGRAMACIÓN PARA INTERNET                             ● También podemos elegir un elemento único           ...
ClasesPROGRAMACIÓN PARA INTERNET                             ● Otra cosa que podemos hacer es definir una                 ...
... ClasesPROGRAMACIÓN PARA INTERNET                             ● Luego podríamos usar esa clase en los                  ...
CascadingPROGRAMACIÓN PARA INTERNET                             ●   Cascading significa cascada, y tiene que ver          ...
ComentariosPROGRAMACIÓN PARA INTERNET                             /* Esto es un comentario */                             ...
ColoresPROGRAMACIÓN PARA INTERNET                             ●   Se especifica el color deseado mediante números         ...
... ColoresPROGRAMACIÓN PARA INTERNET                             ●   Podemos hacerlo en inglés, por ejemplo. En          ...
Modelo de cajasPROGRAMACIÓN PARA INTERNET                              Lic. Nancy Michelle Torres Villanueva   105
Color del textoPROGRAMACIÓN PARA INTERNET                             body { color:#666; }                                ...
FondoPROGRAMACIÓN PARA INTERNET                             ●   Podemos modificar el fondo de un elemento                 ...
... FondoPROGRAMACIÓN PARA INTERNET                             ●   image: indicamos qué imagen usaremos de fondo.        ...
... FondoPROGRAMACIÓN PARA INTERNET                             ●   attachment: sirve para indicar si el fondo se queda   ...
... FondoPROGRAMACIÓN PARA INTERNET                             /* solo color de fondo */                             body...
FuentePROGRAMACIÓN PARA INTERNET                             ●   Usar sólo fuentes “estándar”, que tengan la              ...
... FuentePROGRAMACIÓN PARA INTERNET                             ●   El tema de la negrita se controla con font-          ...
... FuentePROGRAMACIÓN PARA INTERNET                             /* fuente para todo el documento */                      ...
TareaPROGRAMACIÓN PARA INTERNET                             ●   Preparar una presentación de los temas del archivo:       ...
Upcoming SlideShare
Loading in …5
×

XHTML y CSS

2,066 views
1,937 views

Published on

1er parte del curso "Programación para Internet"

Published in: Technology
2 Comments
2 Likes
Statistics
Notes
  • Uauuu Gracias por la info muy interesante.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Ahora con sitio web en internet http://michelle.slmx.org/ donde podrás encontrar mas material
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
2,066
On SlideShare
0
From Embeds
0
Number of Embeds
90
Actions
Shares
0
Downloads
15
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

XHTML y CSS

  1. 1. Programación para InternetPROGRAMACIÓN PARA INTERNET Módulo 1. Construcción de páginas Web Objetivo: El estudiante conocerá y explotará el lenguaje de marcado XHTML como medio fundamental de creación de páginas Web. 1.1. Fundamentos de XHTML 1.2. Uso de herramientas de diseño XHTML 1.3. Consideraciones sobre diseño de sitios Web 1.4. Introducción a las Hojas de estilo en cascada (CSS) 1.5. Uso de herramientas de diseño de hojas de estilo (CSS) Lic. Nancy Michelle Torres Villanueva
  2. 2. RequisitosPROGRAMACIÓN PARA INTERNET ● Lo único que necesitas es: ● Un editor de texto plano ● Un navegador que funcione bien y cumpla los estándares: el Mozilla Firefox, por ejemplo ● Un navegador que funcione mal, tenga todo el mundo y pase de los estándares: ¿Ya sabes cuál? Lic. Nancy Michelle Torres Villanueva
  3. 3. XHTMLPROGRAMACIÓN PARA INTERNET ● XHTML significa eXtensible HyperText Markup Language y es la versión modernizada del tradicional HTML4 , pero compatible con XML. ● Es un lenguaje semántico, lo que quiere decir que no definimos el aspecto de las cosas, sino lo que significan. Por ejemplo, si tenemos nuestro título de la página, en lugar de decir “Lo quiero grande en letras rojas”, le indicamos al navegador que “Este es el título principal de la página. Haz algo para que destaque”. Lic. Nancy Michelle Torres Villanueva
  4. 4. CSSPROGRAMACIÓN PARA INTERNET ● CSS son las siglas de Cascading Style Sheets y son un regalo del cielo. Si el documento XHTML está bien estructurado, podemos cambiar totalmente su apariencia sin tocar una sola línea de código en el archivo .html. ● Esto nos permite separar el contenido del aspecto, y es de gran importancia. Lic. Nancy Michelle Torres Villanueva
  5. 5. Etiquetas en XHTMLPROGRAMACIÓN PARA INTERNET XHTML está basado en etiquetas. Una etiqueta tiene la siguiente forma: <etiqueta> Algo aqui dentro </etiqueta> Lic. Nancy Michelle Torres Villanueva
  6. 6. ... Etiquetas en XHTMLPROGRAMACIÓN PARA INTERNET ● Volviendo al ejemplo anterior de nuestro título: la etiqueta para poner el título principal en la página es <h1>. Entonces nos quedará: <h1>What is the Matrix?</h1> ● Como ves, <h1> marca el inicio de la etiqueta, mientras que </h1> se encarga de cerrarla. Lic. Nancy Michelle Torres Villanueva
  7. 7. ... Etiquetas en XHTMLPROGRAMACIÓN PARA INTERNET Hay etiquetas que pueden modificarse mediante atributos. Su estructura es la siguiente: <etiqueta atributo="valor"> ● Por ultimo, comentar un par de reglas que siguen las etiquetas: siempre en minúsculas y los atributos entre comillas. Lic. Nancy Michelle Torres Villanueva
  8. 8. Estructura de un documento XHTMLPROGRAMACIÓN PARA INTERNET ● El DOCTYPE y la codificación ● El elemento raíz (HTML) ● La cabecera (HEAD) ● El cuerpo (BODY) Lic. Nancy Michelle Torres Villanueva
  9. 9. DOCTYPE y codificaciónPROGRAMACIÓN PARA INTERNET ● La primera línea que debemos tener en nuestro documento XHTML es la que marca la codificación, es decir, el formato en el que guardamos nuestro archivo. La codificación estándar es la Unicode (UTF-8) y soporta caracteres de todas las lenguas (occidentales, griegos, chinos, árabes, japoneses, coreanos...). Asegúrate de que el editor de textos que uses te guarda el archivo en formato Unicode. Lic. Nancy Michelle Torres Villanueva
  10. 10. ... DOCTYPE y codificaciónPROGRAMACIÓN PARA INTERNET ● Tenemos que escribir esto: <?xml version="1.0" encoding="UTF-8"?> ● A continuación tenemos que indicar el DOCTYPE. Se encarga de decirle al navegador qué contiene el archivo que está abriendo. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtm l1-strict.dtd"> Lic. Nancy Michelle Torres Villanueva
  11. 11. NotasPROGRAMACIÓN PARA INTERNET ● Estas dos etiquetas no llevan la barra / de cierre ● El doctype aparece en dos líneas. No hay problema porque el navegador interpreta los saltos de línea en el código como espacios en blanco. En realidad podríamos escribir todo el archivo XHTML en una sola línea. O cada palabra en una línea diferente. Lic. Nancy Michelle Torres Villanueva
  12. 12. El elemento raíz (HTML)PROGRAMACIÓN PARA INTERNET ● El resto de nuestro documento tiene que ir encerrado por la etiqueta <html>. ● Pero en esa etiqueta tenemos que indicar una serie de cosas, como que nuestro documento es XHTML y la lengua que utilizamos. Si escribimos en español, nos quedaría: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> Lic. Nancy Michelle Torres Villanueva
  13. 13. La cabecera (HEAD)PROGRAMACIÓN PARA INTERNET ● La cabecera contiene información que no forma parte del contenido de la página, como el título, vínculos a hojas de estilo CSS, información para robots de búsqueda, scripts, etc. ● La cabecera va encerrada entre <head> y </head> y el título entre <title> y </title> Lic. Nancy Michelle Torres Villanueva
  14. 14. ... La cabecera (HEAD)PROGRAMACIÓN PARA INTERNET <head> <title>Titulo de la web</title> </head> ● La sangría no es necesaria, pero se recomienda Lic. Nancy Michelle Torres Villanueva
  15. 15. El cuerpo (BODY)PROGRAMACIÓN PARA INTERNET ● Por ultimo, nos encontramos con el cuerpo, encerrado entre <body> y </body>, y que contiene todo el código. Quedaría así: <body> Aqui va el cuerpo de la web </body> Lic. Nancy Michelle Torres Villanueva
  16. 16. <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"PROGRAMACIÓN PARA INTERNET "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es"> <head> <title>Titulo de la web</title> </head> <body> Aqui va el cuerpo de la web </body> </html> Lic. Nancy Michelle Torres Villanueva
  17. 17. Guardar el archivoPROGRAMACIÓN PARA INTERNET ● La extensión del archivo XHTML es .htm o .html. No hay tal cosa como una extensión de archivo xhtml. La forma en que se especifica al navegador que un archivo es un archivo XHTML es en la declaración DOCTYPE, no en la extensión de archivo. Lic. Nancy Michelle Torres Villanueva
  18. 18. Texto en XHTMLPROGRAMACIÓN PARA INTERNET ● HTML fue creado en principio para el alfabeto en inglés, sin embargo se buscaron modos para mostrar también caracteres o símbolos denominados especiales. ● Para utilizar caracteres especiales usaremos los símbolos & y ; para denotar el inicio y final respectivamente de un símbolo especial. Lic. Nancy Michelle Torres Villanueva 18
  19. 19. Texto: Descripción:PROGRAMACIÓN PARA INTERNET Pantalla: &acute; Acento ´ &ntilde; eñe ñ &quot; Comillas Dobles " &deg: Grados ° &aacute; a con acento á &eacute; e con acento é &nbsp; espacio en blanco Lic. Nancy Michelle Torres Villanueva 19
  20. 20. PárrafosPROGRAMACIÓN PARA INTERNET ● Los párrafos sirven para estructurar el contenido. En la web funcionan igual que en la vida real: contienen una o más frases con relación entre sí. Para crear un párrafo, metemos texto entre las etiquetas <p> y </p>. Lic. Nancy Michelle Torres Villanueva
  21. 21. Saltos de líneaPROGRAMACIÓN PARA INTERNET ● A veces, dentro de un mismo párrafo necesitamos cambiar de línea. Esto lo conseguimos con la etiqueta <br /> ● <p> ● Esta es una linea <br /> ● Esta es otra linea ● </p> Lic. Nancy Michelle Torres Villanueva
  22. 22. TítulosPROGRAMACIÓN PARA INTERNET ● Los títulos nos sirven para agrupar información. ● Para conseguir esto, tenemos las etiquetas <hx> y </hx>, donde x es un número del 1 al 6. <h1> corresponde al título más importante y debería haber solo uno por página. ● Lic. Nancy Michelle Torres Villanueva
  23. 23. Los BlockquotesPROGRAMACIÓN PARA INTERNET ● Los blockquotes sirven para mostrar un bloque que indica que lo que hay en el interior es una cita. Los navegadores normalmente los muestran con un indentado, aunque esto se puede cambiar con CSS. <blockquote> <p> Aqui va la cita </p> </blockquote> Lic. Nancy Michelle Torres Villanueva
  24. 24. Separadores horizontalesPROGRAMACIÓN PARA INTERNET ● Los separadores horizontales (horizontal rules) han caído en desuso, ya que podemos conseguir bordes delimitadores mediante CSS. Pero como el saber no afecta: la etiqueta es <hr /> ● Algunas de sus propiedades son: ● Align: Establece que la regla se alinee a la izquierda, centro o derecha LEFT,CENTER o RIGHT ● NOSHADE: Quita el sombreado predeterminado de la regla. Lic. Nancy Michelle Torres Villanueva
  25. 25. ... Separadores horizontalesPROGRAMACIÓN PARA INTERNET ● WIDTH: Permite especificar el ancho de la regla (en pixeles o porcentaje) ● SIZE: Permite especificar el alto de la regla (en pixeles) Lic. Nancy Michelle Torres Villanueva
  26. 26. ComentariosPROGRAMACIÓN PARA INTERNET ● Existen dos etiquetas distintas para ingresar comentarios en nuestro código. <!-- Comentario de una linea --> <comment>Otro tipo</comment> Lic. Nancy Michelle Torres Villanueva 26
  27. 27. Etiquetas de formatoPROGRAMACIÓN PARA INTERNET ● Ahora veremos cómo destacar ciertas partes del contenido de nuestra página para hacer más clara la lectura. ● Hay que tener en cuenta que el aspecto de todos estos formatos son totalmente configurables con CSS. Lic. Nancy Michelle Torres Villanueva
  28. 28. EnfásisPROGRAMACIÓN PARA INTERNET ● Para dar énfasis a un texto disponemos de la etiqueta <em> . Si queremos dar un énfasis más fuerte, utilizaremos <strong>. <p> <em>Remarcado</em> sin remarcar y continua <strong>otro</strong>. </p> ● Los navegadores suelen representar <em> con cursiva y <strong> con negrita. Lic. Nancy Michelle Torres Villanueva
  29. 29. Texto preformateadoPROGRAMACIÓN PARA INTERNET ● Recordemos que XHTML ignora espacios en blanco consecutivos, tabuladores, saltos de línea etc. Pero muchas veces nos interesa que estas cosas se tengan en cuenta (por ejemplo queremos mostrar código). Para esto tenemos la etiqueta <pre> Lic. Nancy Michelle Torres Villanueva
  30. 30. CitasPROGRAMACIÓN PARA INTERNET ● Si queremos marcar un texto como una cita, utilizaremos <cite> . La diferencia con <blockquote> es que <cite> no crea la cita en un bloque, sino que la integra en el mismo texto. Los navegadores normalmente muestran el texto citado con cursivas. Lic. Nancy Michelle Torres Villanueva
  31. 31. Acrónimos y abreviaturasPROGRAMACIÓN PARA INTERNET ● Para explicar el significado de los acrónimos y abreviaturas usaremos <acronym> y <abbr> , respectivamente. El efecto es el mismo: al pasar el ratón por encima de la palabra, nos aparece un rectángulo de ayuda con lo que significan. ● Estas etiquetas necesitan un atributo para funcionar, y es title. Lic. Nancy Michelle Torres Villanueva
  32. 32. ... Acrónimos y abreviaturasPROGRAMACIÓN PARA INTERNET <p> Mi ordenador tiene 512 <abbr title="Megabytes">Mb</abbr> de memoria <acronym title="Random Access Memory">RAM</acronym>. </p> Lic. Nancy Michelle Torres Villanueva
  33. 33. PROHIBIDO USARPROGRAMACIÓN PARA INTERNET ● Si ya sabías HTML ya no uses <b>, <i>, <font> y ningún otro tipo de etiqueta que antes solías usar para dar formato Lic. Nancy Michelle Torres Villanueva
  34. 34. Enlace a una página externaPROGRAMACIÓN PARA INTERNET ● Si queremos un link a una página que está en otro servidor, usamos <a> de esta forma: <a href="http://www.loquesea.com" title="Descripcion">Texto del enlace </a> Lic. Nancy Michelle Torres Villanueva
  35. 35. Enlace a una página localPROGRAMACIÓN PARA INTERNET ● Para enlazar a una página que está en nuestro servidor, necesitamos saber la ruta. <a href="profile.html" title="Informacion sobre mi"> Ficha personal </a> Lic. Nancy Michelle Torres Villanueva
  36. 36. Enlace a una dirección de e-mailPROGRAMACIÓN PARA INTERNET ● Podemos hacer un enlace que al pulsar sobre él, se abra automáticamente una ventana del cliente de correo electrónico que tenga el usuario para que escriba un mensaje a esa dirección. <a href="mailto:correo@servidor.com" title="E-mail de contacto">Contactame</a> Lic. Nancy Michelle Torres Villanueva
  37. 37. AnclasPROGRAMACIÓN PARA INTERNET ● Las anclas nos permiten enlazar a una posición concreta de la página. ● En el punto al que queremos saltar, insertamos un ancla (usamos el atributo id): <a id="nuestra_ancla" /> ● Ahora debemos crear un link que nos lleve a ese ancla: <a href="#nuestra_ancla" title="descripcion">Texto del enlace</a> Lic. Nancy Michelle Torres Villanueva
  38. 38. ListasPROGRAMACIÓN PARA INTERNET ● Cuando necesitamos presentar en un texto una serie de conceptos o ideas utilizamos listas. ● Las listas pueden ser ordenadas o no serlo. Las que no son ordenadas, a cada término se le antepone un círculo negro. Las ordenadas tienen un número en cada término. Lic. Nancy Michelle Torres Villanueva 38
  39. 39. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 39
  40. 40. Etiqueta <ul> </ul>PROGRAMACIÓN PARA INTERNET ● Indica al navegador que cree una lista con viñetas no ordenada. ● No solamente usada para fines de numeraciones y viñetas, sino también para fines de sangría o tabulaciones. <ul> <li>Esto es un tipo de punto.</li> <li>Este es otro.</li> <li>Y este es otro diferente.</li> </ul> Lic. Nancy Michelle Torres Villanueva 40
  41. 41. Etiqueta <ol> </ol>PROGRAMACIÓN PARA INTERNET ● Listas ordenadas, esta etiqueta predeterminada indica al navegador que numera la lista de elementos comprendidos dentro de las etiquetas <ol>. <ol> <li value="20">Este sera el numero 20. </li> <li>Este sera el 21. </li> <li>Este sera el 22. Y asi sucesivamente. </li> </ol> Lic. Nancy Michelle Torres Villanueva 41
  42. 42. Etiqueta <li> </li>PROGRAMACIÓN PARA INTERNET ● Se usa para indicar al navegador que exhiba el texto que le sigue como un elemento de línea en una lista. ● Utiliza los siguientes atributos: <li value="20">Este sera el numero 20. </li> Lic. Nancy Michelle Torres Villanueva 42
  43. 43. Listas de definiciónPROGRAMACIÓN PARA INTERNET ● Las listas de definición se diferencian de las anteriores en que cada “ítem” está compuesto por un par de elementos: un término y su definición. Se usan estas etiquetas: <dl> para marcar la lista, <dt> para un término y <dd> para su definición. <dl> <dt>:)</dt> <dd>Sonrisa</dd> </dl> Lic. Nancy Michelle Torres Villanueva 43
  44. 44. ImágenesPROGRAMACIÓN PARA INTERNET ● Podemos usar tres formatos de imagen: GIF, JPEG y PNG. ● El JPEG es el más adecuado para imágenes con muchos colores, como fotografías, y que no tengan grandes áreas de colores planos. ● Las imágenes GIF son de sólo 8 bits (256 colores), pero podemos usar un color transparente. ● El formato PNG es el estándar y podemos elegir varias profundidades de paleta (número de colores). Además, podemos utilizar un canal alpha para crear transparencias. Lic. Nancy Michelle Torres Villanueva 44
  45. 45. Insertar una imágenPROGRAMACIÓN PARA INTERNET ● Para poner una imagen hacemos uso de la etiqueta <img> con unos cuantos atributos: <img src="image.gif" width="ancho" height="alto" alt="descripcion" /> Lic. Nancy Michelle Torres Villanueva 45
  46. 46. Atributo Widht y HeightPROGRAMACIÓN PARA INTERNET ● Los atributos width y height nos permiten establecer el ancho y el alto de la imagen. Podemos indicar un valor en píxeles o en tanto por ciento. width="200" muestra la imagen con 200 píxeles de ancho, mientras que width="200%" hace que se vea al doble de su anchura original. ● Es conveniente que pongamos las dimensiones en píxeles reales, ya que ahorramos tiempo al navegador a la hora de maquetar la página. Lic. Nancy Michelle Torres Villanueva 46
  47. 47. Atributo AltPROGRAMACIÓN PARA INTERNET ● El atributo alt contiene una descripción de la imagen, que veremos cuando pasemos el ratón por encima y mientras se carga el fichero. También se muestra esta descripción cuando no se ha podido cargar la imagen. Es un atributo obligatorio, por cuestiones de accesibilidad. <img src="banner.gif" width="200" height="40" alt="BenKo’s Art" /> Lic. Nancy Michelle Torres Villanueva 47
  48. 48. Imágenes como linksPROGRAMACIÓN PARA INTERNET <a href="http://pagina.com" title="Portafolio online"> <img src="banner.gif" width="200" height="40" alt="Imagen banner" /> </a> Lic. Nancy Michelle Torres Villanueva 48
  49. 49. ThumbnailsPROGRAMACIÓN PARA INTERNET ● Thumbnail es una imagen más pequeña que la original, de modo que al hacer clic sobre ella, cargamos la imagen a tamaño completo. <a href="matrix.jpg" title="Wallpaper de Trinity"> <img src="matrix.jpg" width="100" height="50" alt="Trinity" /> </a> Lic. Nancy Michelle Torres Villanueva 49
  50. 50. ... ThumbnailsPROGRAMACIÓN PARA INTERNET ● Si nuestro wallpaper de Trinity ocupa 100Kb (o más), tendremos esos 100Kb ¡como thumbnail! (justo lo que queremos evitar). El escalar una imagen con width y height no hace que ocupe menos espacio. ● Tenemos que escalar la imagen y guardar esta copia más pequeña (de 5Kb, por ejemplo): <a href="matrix.jpg" title="Wallpaper de Trinity"> <img src="matrix_thumb.jpg" width="100" height="50" alt="Trinity" /> </a> Lic. Nancy Michelle Torres Villanueva 50
  51. 51. TablasPROGRAMACIÓN PARA INTERNET ● En HTML también podemos incluir arreglos de tablas. ● Se deben utilizar varias etiquetas que se describen a continuación: Lic. Nancy Michelle Torres Villanueva 51
  52. 52. ... TablasPROGRAMACIÓN PARA INTERNET ● <table>: Crea la tabla ● <caption>: Pone título a la tabla ● <tr>: Crea una fila ● <td>: Crea una celda ● <th>: Crea una celda de encabezamiento Lic. Nancy Michelle Torres Villanueva 52
  53. 53. Atributos de tablePROGRAMACIÓN PARA INTERNET ● Align: Establece la alineación de la tabla o texto mediante ALIGN=LEFT o ALIGN=RIGHT ● Border: Determina el ancho del borde en pixeles ● Cellpadding: Establece la cantidad de espacio libre junto al contenido de una celda ● Cellspacing: Asigna la cantidad de espacio entre las celdas de una tabla ● Width: Determina el ancho de la tabla en pixeles o en un porcentaje Lic. Nancy Michelle Torres Villanueva 53
  54. 54. Fusionar celdasPROGRAMACIÓN PARA INTERNET ● Colspan: Expandir una celda varias columnas. ● Rowspan: Expandir una celda varias filas. Lic. Nancy Michelle Torres Villanueva 54
  55. 55. <table width=”80%” align=”center”> <caption>Directorio telefonico</caption> <tr>PROGRAMACIÓN PARA INTERNET <th colspan=”3”>Directorio telefonico</th> </tr> <tr align=”center”> <td width=”40%”> Nombre </td> <td width=”30%”> Teléfono </td> <td width=”30%”> E-Mail </td> </tr> <tr> <td> Jos&eacute; Rodr&iacute;guez </td> <td> 223454 </td> Lic. Nancy Michelle Torres Villanueva 55
  56. 56. <td>jose@prueba.com.bo</td> </tr>PROGRAMACIÓN PARA INTERNET <tr> <td> Carolina Nu&ntilde;ez </td> <td> 453444 </td> <td>carolina@prueba.com.bo</td> </tr> </table> Lic. Nancy Michelle Torres Villanueva 56
  57. 57. FormulariosPROGRAMACIÓN PARA INTERNET ● Los formularios están delimitados con la etiqueta <FORM>...</FORM>, que permite reunir varios elementos de un formulario, como botones y casillas de texto. Lic. Nancy Michelle Torres Villanueva 57
  58. 58. ¿Cuáles son sus atributos?PROGRAMACIÓN PARA INTERNET ● METHOD: indica cómo se enviarán las respuestas. "POST": Es el valor que envía los datos al agente de procesamiento almacenándolos en el cuerpo del formulario. "GET": Envía los datos agregándolos a la dirección URL y separándolos de la dirección con un signo de interrogación. Lic. Nancy Michelle Torres Villanueva 58
  59. 59. PROGRAMACIÓN PARA INTERNET ● ACTION: indica la dirección a la que se enviará la información (un script o dirección de correo electrónico (e_mail@hotmail.com)) Lic. Nancy Michelle Torres Villanueva 59
  60. 60. EjemploPROGRAMACIÓN PARA INTERNET ● <FORM ACTION="procesa2.html" METHOD="GET"> ● <FORM ACTION="procesa2.html" METHOD="POST"> Lic. Nancy Michelle Torres Villanueva 60
  61. 61. PROGRAMACIÓN PARA INTERNET ● La diferencia entre estos dos métodos radica en la forma de enviar los datos a la página, mientras que el método GET envía los datos usando la URL, el método POST los envía por la entrada estándar STDIO. Lic. Nancy Michelle Torres Villanueva 61
  62. 62. PROGRAMACIÓN PARA INTERNET ● La etiqueta FORM actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. ● Todos los datos se enviarán a la dirección URL indicada en el atributo ACTION de la etiqueta FORM, por el método indicado en el atributo METHOD. Lic. Nancy Michelle Torres Villanueva 62
  63. 63. PROGRAMACIÓN PARA INTERNET ● Se puede insertar cualquier elemento HTML en una etiqueta FORM (como texto, botones, tablas y enlaces), pero los elementos interactivos son los más interesantes. Lic. Nancy Michelle Torres Villanueva 63
  64. 64. Elementos interactivosPROGRAMACIÓN PARA INTERNET ● La etiqueta INPUT: Todos los botones y casillas de texto. ● La etiqueta TEXTAREA: una casilla de texto. ● La etiqueta SELECT: una lista de opciones múltiples. Lic. Nancy Michelle Torres Villanueva 64
  65. 65. INPUTPROGRAMACIÓN PARA INTERNET ● <INPUT type="tipo de campo" value="Valor predeterminado" name="Nombre de elemento"> Lic. Nancy Michelle Torres Villanueva 65
  66. 66. Atributo namePROGRAMACIÓN PARA INTERNET ● Permite a algunos scripts reconocer qué campo está asociado con un par nombre/valor, lo que significa que el nombre del campo estará seguido de un signo igual ("=") seguido de un valor que el usuario introdujo, o si el usuario no introdujo ningún valor, por el valor predeterminado de la etiqueta value. Lic. Nancy Michelle Torres Villanueva 66
  67. 67. Atributo typePROGRAMACIÓN PARA INTERNET ● Se usa para especificar qué tipo de elemento se representa con la etiqueta INPUT. ● Estos son los valores posibles: ● checkbox: Las casillas de elección pueden adoptar uno de dos estados: checked (seleccionado) o unchecked (no seleccionado). Cuando la casilla es seleccionada, el par nombre/valor se envía. Lic. Nancy Michelle Torres Villanueva 67
  68. 68. Ejemplo de checkboxPROGRAMACIÓN PARA INTERNET <input type="checkbox" name="transporte" value="1">Coche <br> <input type="checkbox" name="transporte" value="2" checked>Avión <br> <input type="checkbox" name="transporte" value="3">Tren Lic. Nancy Michelle Torres Villanueva 68
  69. 69. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 69
  70. 70. ... Atributo typePROGRAMACIÓN PARA INTERNET ● hidden: Este campo, que el navegador no muestra, es para definir una configuración única que se enviará como par nombre/valor. <INPUT TYPE=HIDDEN NAME="para" VALUE="bufoland@entelchile.net"> ● image: Un botón de envío personalizado que aparece cuando se ubica una imagen en la ubicación definida por el atributo SRC <INPUT TYPE=IMAGE NAME="mono" SRC="botoncito.gif" > Lic. Nancy Michelle Torres Villanueva 70
  71. 71. ... Atributo typePROGRAMACIÓN PARA INTERNET ● file: Este tipo de control permite a los usuarios elegir un archivo para enviar. Este archivo es enviado con el formulario. Nota que para carga de archivos, el atributo "enctype" del formulario debe tomar le valor "multipart/form-data". <input name="imagen" type="file" accept="image/gif" value="-" /> ● password: Una casilla de texto donde los caracteres escritos aparecen como asteriscos. Lic. Nancy Michelle Torres Villanueva 71
  72. 72. ... Atributo typePROGRAMACIÓN PARA INTERNET ● radio: Un botón que permite al usuario elegir entre varias opciones. Cada uno de estos botones debe tener el mismo atributo name. El par nombre/valor del botón radio seleccionado se enviará. Al aplicar el atributo checked para uno de estos botones se definirá como seleccionado de forma predeterminada. Lic. Nancy Michelle Torres Villanueva 72
  73. 73. Ejemplo radioPROGRAMACIÓN PARA INTERNET <input type="radio" name="transporte" value="1">Coche <br> <input type="radio" name="transporte" value="2" checked>Avión <br> <input type="radio" name="transporte" value="3">Tren Lic. Nancy Michelle Torres Villanueva 73
  74. 74. ... Atributo typePROGRAMACIÓN PARA INTERNET ● reset: Un botón de restauración para quitar todos los elementos en el formulario y restablecer sus valores predeterminados. ● submit: Un botón de envío para enviar el formulario. El texto en el botón puede definirse usando el atributo value. Lic. Nancy Michelle Torres Villanueva 74
  75. 75. ... Atributo typePROGRAMACIÓN PARA INTERNET ● text: Una casilla de texto para escribir una línea de texto. El tamaño de la casilla puede definirse usando el atributo size y la extensión máxima del texto con el atributo maxlength. Lic. Nancy Michelle Torres Villanueva 75
  76. 76. TextareaPROGRAMACIÓN PARA INTERNET ● Se usa para definir un cuadro de texto más grande que la línea simple propuesta por la etiqueta INPUT. Lic. Nancy Michelle Torres Villanueva 76
  77. 77. Atributos del TextareaPROGRAMACIÓN PARA INTERNET ● cols: representa el número de caracteres que puede contener un línea. ● rows: representa el número de líneas ● name: representa el nombre asociado con el cuadro de texto, que permite su identificación en el par nombre/valor. Lic. Nancy Michelle Torres Villanueva 77
  78. 78. ... Atributos del TextareaPROGRAMACIÓN PARA INTERNET ● readonly: impide que el usuario modifique el texto predeterminado en el campo. ● value: representa el valor predeterminado que se enviará al script si el usuario no ha escrito nada en el cuadro de texto Lic. Nancy Michelle Torres Villanueva 78
  79. 79. Ejemplo TextareaPROGRAMACIÓN PARA INTERNET <TEXTAREA COLS=20 ROWS=10 NAME="Texto"> </TEXTAREA> Lic. Nancy Michelle Torres Villanueva 79
  80. 80. SelectPROGRAMACIÓN PARA INTERNET ● Sirve para crear una lista desplegable de elementos (especificados por las etiquetas OPTION dentro de ella). Lic. Nancy Michelle Torres Villanueva 80
  81. 81. Atributos de SelectPROGRAMACIÓN PARA INTERNET ● name: representa el nombre asociado con la casilla de texto, que permite su identificación en el par nombre/valor. ● disabled: crea un lista desactivada, que aparece atenuada Lic. Nancy Michelle Torres Villanueva 81
  82. 82. ... Atributos de SelectPROGRAMACIÓN PARA INTERNET ● size: representa el número de líneas de la lista (este valor puede ser más grande que el número de elementos reales de la lista). ● multiple: Permite al usuario seleccionar varios campos de la lista Lic. Nancy Michelle Torres Villanueva 82
  83. 83. Ejemplo de SelectPROGRAMACIÓN PARA INTERNET <select name="transporte"> <option>Coche</option> <option>Avión</option> <option selected>Tren</option> </select> <select name="transporte"> <option value="1">Coche</option> <option value="2">Avión</option> <option value="3">Tren</option> </select> Lic. Nancy Michelle Torres Villanueva 83
  84. 84. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 84
  85. 85. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 85
  86. 86. <form action="ejemplo.php" enctype="multipart/form-data"> <fieldset><legend>Información personal</legend>PROGRAMACIÓN PARA INTERNET Nombre: <input name="nombre" type="text" maxlength="20" size="20" /><br /> Apellido: <input name="apellido" type="text" /><br /> Contraseña: <input name="contrasena" type="password" /><br /><br /> Género:<br /> <input name="genero" type="radio" checked="checked" value="masculino" />Masculino<br /> <input name="genero" type="radio" value="femenino" />Femenino<br /><br /> Imagen: <input name="imagen" type="file" accept="image/gif" /> </fieldset> Lic. Nancy Michelle Torres Villanueva 86
  87. 87. <fieldset> <legend>Intereses</legend> <input name="intereses" type="checkbox"PROGRAMACIÓN PARA INTERNET checked="checked" />Deportes<br /> <input name="intereses" type="checkbox" checked="checked" />Películas<br /> <input name="intereses" type="checkbox" />Viajes<br /> <input name="intereses" type="checkbox" />Arte<br /> <input name="intereses" type="checkbox" />Autos </fieldset> <input name="borrarform" type="reset" value="Borrar formulario" /> <input name="enviarform" type="button" value="Enviar formulario" /> <input name="email" type="hidden" value="usuario@servidor.com" /> </form> Lic. Nancy Michelle Torres Villanueva 87
  88. 88. PROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 88
  89. 89. PROGRAMACIÓN PARA INTERNET Demuestra lo que aprendiste!! Lic. Nancy Michelle Torres Villanueva 89
  90. 90. Herramientas de diseñoPROGRAMACIÓN PARA INTERNET ● Editores de texto plano y navegador ● Editores de texto especializados en HTML y CSS ● Editores de texto especializados con ventana de vista previa ● Editores WYSIWIG Lic. Nancy Michelle Torres Villanueva 90
  91. 91. SoftwarePROGRAMACIÓN PARA INTERNET ● Notepad++ ● Gedit ● Bluefish ● Dreamweaver ● NVU Lic. Nancy Michelle Torres Villanueva 91
  92. 92. ExtrasPROGRAMACIÓN PARA INTERNET ● Firebug: Plugin para visualizar el código fuente de las páginas ● Web Developer: Plugin con varias herramientas para desarrolladores ● Color Scheme Designer: Útil para selección de colores ● W3C Markup Validation Service: Revisa el código ● Grid Designer: Genera el código de los grids que necesites ● Kotatsu: Genera el código de tablas ● CSS Redundancy Checker. Encuentra los selectores CSS que no son utilizados por los archivos HTML y que puede ser redundante Lic. Nancy Michelle Torres Villanueva 92
  93. 93. ... ExtrasPROGRAMACIÓN PARA INTERNET ● CSS Menu Maker. Crear y personalizar tus menús CSS ● CSS Text Wrapper. De una manera muy sencilla logramos que el texto HTML adquiera una forma que no sean sólo un rectángulos ● PSDtoCSS online. Convierte tus archivos PSD en un diseño XHTML-CSS Lic. Nancy Michelle Torres Villanueva 93
  94. 94. Donde poner CSSPROGRAMACIÓN PARA INTERNET ● Hay dos opciones para insertar estilos en un documento XHTML. Lo más normal es hacerlo en un archivo externo (que se llama hoja de estilos) y enlazarlo desde nuestro documento XHTML. ● Podemos enlazar una o más hojas poniendo esto dentro de la cabecera (head): <link href="nuestra_hoja.css" rel="stylesheet" type="text/css" /> Lic. Nancy Michelle Torres Villanueva 94
  95. 95. ... Donde poner CSSPROGRAMACIÓN PARA INTERNET ● La otra opción es escribir la información referente a los estilos en el mismo archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas <style> y </style>, que también deben ir en la cabecera. ● Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estén dentro de <style>. Lic. Nancy Michelle Torres Villanueva 95
  96. 96. Funcionalidad de CSSPROGRAMACIÓN PARA INTERNET ● En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propiedades. ● Los selectores los utilizamos para elegir a qué elementos se aplican las propiedades que escribimos. Hay diferentes tipos de selectores Lic. Nancy Michelle Torres Villanueva 96
  97. 97. SelectoresPROGRAMACIÓN PARA INTERNET ● Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo, si queremos establecer propiedades para los enlaces: a { ... } Lic. Nancy Michelle Torres Villanueva 97
  98. 98. ... SelectoresPROGRAMACIÓN PARA INTERNET ● También podemos elegir un elemento único utilizando su atributo id. Para ello, empleamos numeral (#) almohadilla: #menu { ... } Lic. Nancy Michelle Torres Villanueva 98
  99. 99. ClasesPROGRAMACIÓN PARA INTERNET ● Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un punto antes del nombre. Por ejemplo, si queremos destacar algo: .importante { ... } Lic. Nancy Michelle Torres Villanueva 99
  100. 100. ... ClasesPROGRAMACIÓN PARA INTERNET ● Luego podríamos usar esa clase en los párrafos que queramos (o cualquier otro elemento), usando el atributo class. De este modo: <p class="importante">Bla bla bla</p> Lic. Nancy Michelle Torres Villanueva 100
  101. 101. CascadingPROGRAMACIÓN PARA INTERNET ● Cascading significa cascada, y tiene que ver con la herencia. En CSS los elementos hijos heredan todas las propiedades de sus padres. Por ejemplo, si establecemos una regla para el elemento table, sus hijos (td entre otros) también tendrán esas mismas reglas. Lic. Nancy Michelle Torres Villanueva 101
  102. 102. ComentariosPROGRAMACIÓN PARA INTERNET /* Esto es un comentario */ Lic. Nancy Michelle Torres Villanueva 102
  103. 103. ColoresPROGRAMACIÓN PARA INTERNET ● Se especifica el color deseado mediante números hexadecimales mediante la siguiente estructura: #RRVVAA ● El color tiene un signo de numeral # antecediendo a los 6 números. ● Existen dos números para cada color principal: rojo, verde y azul. ● Cada uno de los números varía hexadecimal mente {0,1,2....,9,A,B,...F}. Lic. Nancy Michelle Torres Villanueva 103
  104. 104. ... ColoresPROGRAMACIÓN PARA INTERNET ● Podemos hacerlo en inglés, por ejemplo. En lugar de #fff escribimos white y lo solucionamos. ● El inconveniente es que no todos los colores tienen nombre. Lic. Nancy Michelle Torres Villanueva 104
  105. 105. Modelo de cajasPROGRAMACIÓN PARA INTERNET Lic. Nancy Michelle Torres Villanueva 105
  106. 106. Color del textoPROGRAMACIÓN PARA INTERNET body { color:#666; } Lic. Nancy Michelle Torres Villanueva 106
  107. 107. FondoPROGRAMACIÓN PARA INTERNET ● Podemos modificar el fondo de un elemento con la propiedad background, que tiene la siguiente sintaxis: ● background: [color] [image] [repeat] [attachment] [position] Lic. Nancy Michelle Torres Villanueva 107
  108. 108. ... FondoPROGRAMACIÓN PARA INTERNET ● image: indicamos qué imagen usaremos de fondo. Por ejemplo, url("fondo.gif") ● repeat: con esto establecemos si queremos que la imagen se repita o no, tanto horizontal como verticalmente. Con repeat se repite siempre en ambos sentidos (valor por defecto), mientras que con no-repeat no se repite nunca. Con repeat-x se repite sólo horizontalmente y con repeat-y lo hace sólo en vertical. Lic. Nancy Michelle Torres Villanueva 108
  109. 109. ... FondoPROGRAMACIÓN PARA INTERNET ● attachment: sirve para indicar si el fondo se queda fijo en el sitio o se desplaza con el scroll. Con scroll (valor por defecto) el fondo se desplaza y con fixed se queda siempre en el mismo sitio. ● position: indica la posición del fondo. Indicamos tanto la posición desde la izquierda como desde arriba (ya sea en píxeles o porcentaje). Los valores por defecto son 0% 0% que sitúan al fondo en la esquina superior izquierda. Si lo quisiéramos en las coordenadas 20,30, escribiríamos 20px 30px. Si queremos el fondo centrado, pues 50% 50%. Lic. Nancy Michelle Torres Villanueva 109
  110. 110. ... FondoPROGRAMACIÓN PARA INTERNET /* solo color de fondo */ body { background-color: #fff; } /* color de fondo e imagen en mosaico */ body { background: #fff url("fondo.gif");} /* imagen fija, centrada y sin repetir, */ /* a modo de "marca de agua" */ body { background: #fff url("fondo.gif") no-repeat fixed 50% 50%; } Lic. Nancy Michelle Torres Villanueva 110
  111. 111. FuentePROGRAMACIÓN PARA INTERNET ● Usar sólo fuentes “estándar”, que tengan la mayoría de ordenadores. Además, podemos especificar varias, de forma que si no se tiene la primera, se muestra la segunda, si no se tiene la segunda, pues la tercera, etc. ● La propiedad que sirve para cambiar la fuente es font-family. ● El tamaño de la fuente lo controlamos con font- size. Podemos indicar medidas en píxeles (px) o en puntos (pt). Lic. Nancy Michelle Torres Villanueva 111
  112. 112. ... FuentePROGRAMACIÓN PARA INTERNET ● El tema de la negrita se controla con font- weight asignándole bold o normal. La cursiva con font-style, poniendo italic o normal. Si queremos versales, pues font-variant con small-caps o normal. Lic. Nancy Michelle Torres Villanueva 112
  113. 113. ... FuentePROGRAMACIÓN PARA INTERNET /* fuente para todo el documento */ body { font: 11px Arial, Verdana, sans-serif; color: #666; } /* para el enfasis fuerte */ strong { font-variant: small-caps; color: #000; } Lic. Nancy Michelle Torres Villanueva 113
  114. 114. TareaPROGRAMACIÓN PARA INTERNET ● Preparar una presentación de los temas del archivo: Introducción CSS 1. Modelo de cajas 2. Posicionamiento y visualización 3. Texto Entregar el archivo en PDF 4. Enlaces Utilizar muchos ejemplos 5. Imágenes 6. Listas 7. Tablas 8. Formularios 9. Layout Lic. Nancy Michelle Torres Villanueva 114

×