Diseño de Páginas Web: HTML Autor: Javier V. Gallego
Contenidos I: <ul><li>Definición de términos. </li></ul><ul><li>Sintaxis de etiquetas. </li></ul><ul><li>Estructura básica...
Contenidos II: <ul><li>Cuerpo del documento. </li></ul><ul><li>Cabecera del documento. </li></ul><ul><li>Listas de element...
Definición de términos: <ul><li>Sistemas de codificación: </li></ul><ul><ul><li>Block de notas. </li></ul></ul><ul><ul><li...
Definición de términos: <ul><li>Recomendaciones: </li></ul><ul><ul><li>Visualizar los documentos en distintos navegadores ...
Definición de términos: <ul><li>¿Qué es HTML? </li></ul><ul><ul><li>“HiperText Markud Language”. </li></ul></ul><ul><ul><l...
Sintaxis de etiquetas: <ul><li>Se pueden escribir en mayúsculas o  minúsculas . Entre los símbolos <>. </li></ul><ul><li>V...
Estructura básica del documento: <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> </li></u...
Estructura básica del documento: <ul><li>Etiquetas comentario: </li></ul><ul><li><!--   Esto es un comentario   --> </li><...
Formato de texto: elementos. <ul><li>Cabeceras: </li></ul><ul><li><h1>…</h1> </li></ul><ul><ul><li><h6>…</h6> </li></ul></...
Formato de texto: elementos. <ul><li>Romper líneas: </li></ul><ul><ul><li><br>  ( </br> ) </li></ul></ul><ul><ul><li><nbr>...
Formato de texto: estilo. <ul><li>Negrita: </li></ul><ul><ul><li><b>…</b>  o <strong>…</strong> </li></ul></ul><ul><li>Cur...
Formato de texto: estilo. <ul><li>Texto mas pequeño: </li></ul><ul><li><small>…</small> </li></ul><ul><li>Texto mayor: </l...
Formato de texto: alineación. <ul><li>Atributo  align . </li></ul><ul><ul><li>Se usa con etiquetas:  <p> , <h>  y  <div> ....
Formato de texto: márgenes. <ul><li>Márgenes sencillos: </li></ul><ul><li><blockquote>…</blockquote> </li></ul><ul><ul><li...
Formato de texto: fuente. <ul><li>Etiqueta  <font>…</font> </li></ul><ul><ul><li>Atributos: </li></ul></ul><ul><ul><ul><li...
Formato: caracteres especiales. <ul><li>Conjunto de caracteres utilizados por el HTML para representar elementos de ASCII....
Formato: barra horizontal. <ul><li>Etiqueta  <hr>  (</hr>) </li></ul><ul><li>Atributos: </li></ul><ul><ul><li>align=“ left...
Cuerpo del documento: body. <ul><li>Atributos de fondo: </li></ul><ul><ul><li>Color de fondo:  bgcolor=“ x ” </li></ul></u...
Cuerpo del documento: body. <ul><li>Atributos de texto: </li></ul><ul><ul><li>Color de texto:  text </li></ul></ul><ul><ul...
Cabecera del documento: head. <ul><li>Se utiliza para procesos mentales. </li></ul><ul><li>Etiquetas que se incluyen: </li...
Cabeza del documento: head. <ul><li>Ejemplos: </li></ul><ul><li><meta name=“ Página de inicio ” content=“ Problemas de Quí...
Cabeza del documento: head. <ul><li><meta http-equiv=“ refresh ” content=“ 10 ” URL=“ http://www.alcala.es/inicio.html ”> ...
Listas de elementos. <ul><li>Listas no numeradas: (viñetas)  </li></ul><ul><li><ul> </li></ul><ul><li><li> Texto </li></ul...
Listas de elementos. <ul><li>Listas numeradas: </li></ul><ul><li><ol> </li></ul><ul><li><li> Texto. </li></ul><ul><li><li>...
Imágenes <ul><li>Etiqueta  <img>  </li></ul><ul><ul><li>No tiene cierre. </li></ul></ul><ul><ul><li>Atributo fuente:  src=...
Imágenes: atributos. <ul><ul><li>Anchura y altura: </li></ul></ul><ul><ul><li>width=“ x ” </li></ul></ul><ul><ul><li>heigh...
Imágenes: atributos. <ul><ul><li>Alineación horizontal y vertical: </li></ul></ul><ul><ul><li>align=“ xxx ” </li></ul></ul...
Hipervínculos <ul><li>Etiqueta Ancla:  <a>…</a> </li></ul><ul><ul><li>Atributos:  href </li></ul></ul><ul><ul><li>name </l...
Hipervínculos II: Tipos <ul><li>Vínculo absoluto: Dirección a un servidor exterior. </li></ul><ul><ul><li>Ejemplo: </li></...
Hipervínculos II: Tipos <ul><li>Vínculo relativo: Vincula páginas dentro del mismo sitio web. </li></ul><ul><ul><li>Ejempl...
Hipervínculos II: Tipos <ul><li>Vinculación interna (marcador):  en páginas extensas se vincula una parte de la página con...
Hipervínculos II: Tipos <ul><li>Vínculo de correo: mailto </li></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><li><a hre...
Tablas <ul><li>Etiqueta:  <table>…</table> </li></ul><ul><ul><li>Etiqueta de fila:  <tr>…</tr> </li></ul></ul><ul><ul><li>...
Tablas II <ul><li>Atributos de la etiqueta  table : </li></ul><ul><ul><li>align=“ right, center, left ” </li></ul></ul><ul...
Tablas II <ul><li>Atributos de celda:  td . </li></ul><ul><ul><li>Anchura de celda:  width </li></ul></ul><ul><ul><li>Alin...
Tablas II <ul><li>Expandir columnas y filas: </li></ul><ul><ul><li>Expandir columnas:  </li></ul></ul><ul><ul><li>colspan=...
Hojas de Estilo (CSS) <ul><li>Tipos de hojas de estilo: </li></ul><ul><ul><li>Hojas vinculadas. </li></ul></ul><ul><ul><li...
Hojas de Estilo (CSS) II <ul><li>Estilo vinculado. </li></ul><ul><ul><li>Se crea una hoja de estilo y se guarda como doc.c...
Hojas de Estilo (CSS) II <ul><li>Estilo interno. </li></ul><ul><ul><li>Se utiliza el atributo  style  sobre la etiqueta qu...
Hojas de Estilo (CSS) II <ul><li>Estilo empotrado. </li></ul><ul><ul><li>Utiliza la etiqueta  <style>…</style> </li></ul><...
Hojas de Estilo (CSS) II <ul><ul><li>Ejemplo 2: </li></ul></ul><ul><ul><li>body  { background-color:  #00cccc ; </li></ul>...
Hojas de Estilo (CSS) II <ul><ul><li>Ejemplo 3: </li></ul></ul><ul><ul><li>p  { font-family:  helvetica ; </li></ul></ul><...
Hojas de Estilo (CSS) II <ul><ul><li>Ejemplo 4: </li></ul></ul><ul><ul><li>a:Visited  { color: #00ccff;} </li></ul></ul><u...
Hojas de Estilo (CSS) II <ul><li>Colocación con CSSP: Capas </li></ul><ul><ul><li>Estilo interno o empotrado </li></ul></u...
Fin
Próxima SlideShare
Cargando en…5
×

Diseño web

4.390 visualizaciones

Publicado el

designe of web site in HTML 4.0

Publicado en: Educación, Tecnología, Diseño
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
4.390
En SlideShare
0
De insertados
0
Número de insertados
36
Acciones
Compartido
0
Descargas
223
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.
  • Ejercicio 0: Construir en el block de notas el esqueleto de una página web: Esqueleto.html
  • Ejercicio 1: Las estrellas. Transforma el documento de texto en una página web. Utiliza cabezeras para los títulos y párrafos para el resto del documento. Utiliza br o pre donde convenga. Pon algunas palabras en negrita, otras en cursiva y algunas de mayor o menor tamaño que el normal. Alinea los títulos al centro y justifica el resto.
  • Ejercicio 2: Samarcanda. Transforma el documento en una página web. Utiliza blockquote para crear márgenes. Alinea el texto según creas. Modifica el color(00cc66 y cc6699) el tamaño y la fuente para los títulos y el texto.
  • Ver tabla de caracteres especiales. Ejercicio 3: La Luna. Transforma el documento de texto en una página web, ponle alineaciones y el tipo de letra que quieras. Modifica aquellos símbolos (acentos, etc) utilizando los caracteres especiales.
  • Ejercicio 3: La Luna. Introduce una barra horizontal centrada de 300 pixeles de largo y 8 de ancho entre los títulos y el resto del documento. Elige como color 00cccc.
  • Ver tabla de colores seguros
  • Ejercicio 3 : La Luna. Modifica el ejercicio anterior añadiendo un color de fondo, y colores para el texto y los links. Añade posteriormente una imagen de fondo. Ejercicio 3bis:Transforma este documento de texto en una página web y añádele todos los atributos de body que conoces. Utiliza colores seguros basándote en la tabla anexa.
  • Ejercicio 4:El café. Transforma el documento en una página web utilizando etiquetas de listas según requieras.
  • Ejercicio 6: Inserta en el documento una imagen de la Tierra y una imagen de un cohete indicando en cada caso un texto alternativo. Crea con la primera imagen un vínculo a la página la Luna
  • Ejercicio 5:Crea en la página índice un vínculo absoluto a www.geocities.com/CapeCanaveral/3840/. Vínculos relativos a la página de la Luna y de las estrellas.
  • Diseño web

    1. 1. Diseño de Páginas Web: HTML Autor: Javier V. Gallego
    2. 2. Contenidos I: <ul><li>Definición de términos. </li></ul><ul><li>Sintaxis de etiquetas. </li></ul><ul><li>Estructura básica del documento . </li></ul><ul><li>Formato de texto . </li></ul>
    3. 3. Contenidos II: <ul><li>Cuerpo del documento. </li></ul><ul><li>Cabecera del documento. </li></ul><ul><li>Listas de elementos. </li></ul><ul><li>Imágenes. </li></ul><ul><li>Hipertexto. </li></ul><ul><li>Tablas. </li></ul><ul><li>Hojas de estilo (CSS). </li></ul>
    4. 4. Definición de términos: <ul><li>Sistemas de codificación: </li></ul><ul><ul><li>Block de notas. </li></ul></ul><ul><ul><li>Editores de código: Homesite, Hotdog, etc. </li></ul></ul><ul><ul><li>Utilidades de conversión: WordXP. </li></ul></ul><ul><ul><li>Aplicaciones WYSIWYG: FrontPage, Dreamweaver. </li></ul></ul>
    5. 5. Definición de términos: <ul><li>Recomendaciones: </li></ul><ul><ul><li>Visualizar los documentos en distintos navegadores y distintas resoluciones. </li></ul></ul><ul><ul><li>Aprender de las páginas Web visitadas visualizando el código fuente. </li></ul></ul>
    6. 6. Definición de términos: <ul><li>¿Qué es HTML? </li></ul><ul><ul><li>“HiperText Markud Language”. </li></ul></ul><ul><ul><li>Lenguaje para definir el formato de presentación de un documento, compuesto por texto e imágenes, para ser visualizado con un navegador. </li></ul></ul><ul><ul><li>Los formatos se definen mediante las “etiquetas”, “tags” o “directivas”. </li></ul></ul>Índice I
    7. 7. Sintaxis de etiquetas: <ul><li>Se pueden escribir en mayúsculas o minúsculas . Entre los símbolos <>. </li></ul><ul><li>Van por parejas: apertura y cierre. Ej: <html> … </html> . </li></ul><ul><li>Llevan atributos y valores según el formato siguiente: </li></ul><ul><li><body bgcolor= “#00CCFF” > … </body> </li></ul>Etiqueta Atributo Valor
    8. 8. Estructura básica del documento: <ul><li><!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;> </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title> Untitled </title> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>Todos los documentos HTML presenta esta estructura Documento Cabecera Cuerpo
    9. 9. Estructura básica del documento: <ul><li>Etiquetas comentario: </li></ul><ul><li><!-- Esto es un comentario --> </li></ul><ul><li>Espacios, tabulaciones y líneas: No existen, son todo uno. </li></ul><ul><li>Simetría horizontal. </li></ul><ul><li>Simetría vertical. </li></ul>Índice I
    10. 10. Formato de texto: elementos. <ul><li>Cabeceras: </li></ul><ul><li><h1>…</h1> </li></ul><ul><ul><li><h6>…</h6> </li></ul></ul><ul><li>Párrafo: </li></ul><ul><li><p>…</p> </li></ul>Se utilizan para los títulos del documento Se utilizan para el cuerpo del documento
    11. 11. Formato de texto: elementos. <ul><li>Romper líneas: </li></ul><ul><ul><li><br> ( </br> ) </li></ul></ul><ul><ul><li><nbr> ( </nbr> ) </li></ul></ul><ul><li>Formato previo: </li></ul><ul><li><pre>…</pre> </li></ul><ul><li>Etiqueta <div>…</div> . </li></ul><ul><ul><li>Permite modificar varios párrafos a la vez. </li></ul></ul>
    12. 12. Formato de texto: estilo. <ul><li>Negrita: </li></ul><ul><ul><li><b>…</b> o <strong>…</strong> </li></ul></ul><ul><li>Cursiva: </li></ul><ul><ul><li><i>…</i> o <em>…</em> </li></ul></ul><ul><li>Subrayado: </li></ul><ul><li><u>…</u> </li></ul><ul><li>Tachado: </li></ul><ul><li><strike>…</strike> </li></ul>
    13. 13. Formato de texto: estilo. <ul><li>Texto mas pequeño: </li></ul><ul><li><small>…</small> </li></ul><ul><li>Texto mayor: </li></ul><ul><li><big>…</big> </li></ul><ul><li>Superíndice y subíndice: </li></ul><ul><li><sup>…</sup> </li></ul><ul><li><sub>…</sub> </li></ul>
    14. 14. Formato de texto: alineación. <ul><li>Atributo align . </li></ul><ul><ul><li>Se usa con etiquetas: <p> , <h> y <div> . </li></ul></ul><ul><ul><li>Valores: left , right , center y justify . </li></ul></ul>Ejemplos: <p align= “center” > ………… </p> <h2 align= “right” > ………….. </h2> <div align= “justify” > …………. </div>
    15. 15. Formato de texto: márgenes. <ul><li>Márgenes sencillos: </li></ul><ul><li><blockquote>…</blockquote> </li></ul><ul><ul><li>Permite márgenes para toda la página. </li></ul></ul><ul><li>Hojas de estilo. </li></ul>
    16. 16. Formato de texto: fuente. <ul><li>Etiqueta <font>…</font> </li></ul><ul><ul><li>Atributos: </li></ul></ul><ul><ul><ul><li>Tamaño: size=“ ±1-7 ” </li></ul></ul></ul><ul><ul><ul><li>Color: color=“ xxx ” </li></ul></ul></ul><ul><ul><ul><li>Fuente: face=“ tipo de fuente ” </li></ul></ul></ul><ul><ul><li>Apilar fuentes </li></ul></ul>
    17. 17. Formato: caracteres especiales. <ul><li>Conjunto de caracteres utilizados por el HTML para representar elementos de ASCII. </li></ul><ul><li>Ejemplos: &xxx; </li></ul><ul><ul><li>&nbsp; espacio en blanco. </li></ul></ul><ul><ul><li>&aacute; á </li></ul></ul><ul><ul><li>&lt; < </li></ul></ul><ul><ul><li>&gt; > </li></ul></ul><ul><ul><li>&amp; & </li></ul></ul><ul><ul><li>&copy; © </li></ul></ul>Caracteres especiales
    18. 18. Formato: barra horizontal. <ul><li>Etiqueta <hr> (</hr>) </li></ul><ul><li>Atributos: </li></ul><ul><ul><li>align=“ left, right, center ” </li></ul></ul><ul><ul><li>size=“ x pixeles ” </li></ul></ul><ul><ul><li>width=“ xxx ” </li></ul></ul><ul><ul><li>noshade -> no muestra sombra </li></ul></ul><ul><ul><li>color=“ #xxxxxx ” </li></ul></ul>Índice I Crea una barra horizontal
    19. 19. Cuerpo del documento: body. <ul><li>Atributos de fondo: </li></ul><ul><ul><li>Color de fondo: bgcolor=“ x ” </li></ul></ul><ul><ul><li>Gráfico de fondo: background=“ url ” </li></ul></ul><ul><li>Colores seguros (216): #RRGGBB </li></ul><ul><li>Ej: 000000; FFFFFF; 00FF00 </li></ul><ul><ul><li>Colores predefinidos: 136 . </li></ul></ul>
    20. 20. Cuerpo del documento: body. <ul><li>Atributos de texto: </li></ul><ul><ul><li>Color de texto: text </li></ul></ul><ul><ul><li>Color de vínculo: link </li></ul></ul><ul><ul><li>Color de vínculo visitado: vlink </li></ul></ul><ul><ul><li>Color de vínculo activo: alink </li></ul></ul>Ejemplo: <body background=“ imagen/pato.jpg ” bgcolor=“ #00FFCC ” text=“ #006666 ” link=“ #9966CC ” vlink=“ #FF6633 ” alink=“ #66CC33 ”> Índice II
    21. 21. Cabecera del documento: head. <ul><li>Se utiliza para procesos mentales. </li></ul><ul><li>Etiquetas que se incluyen: </li></ul><ul><li><meta> Indica al navegador palabras clave y el contenido de la página. </li></ul><ul><ul><li>Parámetros: </li></ul></ul><ul><ul><li>name, content, http-equiv. </li></ul></ul><ul><li><script> permite añadir javascript. </li></ul>
    22. 22. Cabeza del documento: head. <ul><li>Ejemplos: </li></ul><ul><li><meta name=“ Página de inicio ” content=“ Problemas de Química ”> </li></ul><ul><li>Indica al navegador el nombre de la página y su contenido principal. </li></ul><ul><li><meta name=“ keywords ” content=“ redox, moleculas, estequiometría, ácidos ”> </li></ul><ul><li>Indica al navegador palabras clave para los buscadores de Internet. </li></ul>
    23. 23. Cabeza del documento: head. <ul><li><meta http-equiv=“ refresh ” content=“ 10 ” URL=“ http://www.alcala.es/inicio.html ”> </li></ul><ul><li>Carga la página del servidor cada 10 s. </li></ul><ul><li><meta http-equiv=“ “ content=“ no-cache ”> </li></ul><ul><li>Indica al navegador que no guarde la página en el caché. </li></ul>Índice II
    24. 24. Listas de elementos. <ul><li>Listas no numeradas: (viñetas) </li></ul><ul><li><ul> </li></ul><ul><li><li> Texto </li></ul><ul><li><li> Texto </li></ul><ul><li></ul> </li></ul><ul><ul><li>Atributo de <li> o <ul>: </li></ul></ul><ul><ul><li>type=“ circle, square, disc ” </li></ul></ul>
    25. 25. Listas de elementos. <ul><li>Listas numeradas: </li></ul><ul><li><ol> </li></ul><ul><li><li> Texto. </li></ul><ul><li><li> Texto. </li></ul><ul><li></ol> </li></ul><ul><ul><li>Atributos de <li> o <ol>: </li></ul></ul><ul><ul><li>type=“ A, a, i, I ” </li></ul></ul><ul><ul><li>value=“ x ” permite retomar un valor numérico. </li></ul></ul>Índice II
    26. 26. Imágenes <ul><li>Etiqueta <img> </li></ul><ul><ul><li>No tiene cierre. </li></ul></ul><ul><ul><li>Atributo fuente: src=“ fichero_imagen ” </li></ul></ul><ul><ul><li>Es conveniente que la imagen esté en la misma carpeta que la página o en un subdirectorio. </li></ul></ul><ul><ul><li>Texto alternativo: alt=“ texto alternativo ” </li></ul></ul><ul><ul><li>Comenta la imagen que debe aparecer para aquellos que no pueden cargarla. </li></ul></ul>
    27. 27. Imágenes: atributos. <ul><ul><li>Anchura y altura: </li></ul></ul><ul><ul><li>width=“ x ” </li></ul></ul><ul><ul><li>height=“ x ” </li></ul></ul><ul><ul><li>x en píxeles. </li></ul></ul><ul><ul><li>Borde: </li></ul></ul><ul><ul><li>border=“ x ” </li></ul></ul><ul><ul><li>x es un número; 0 para no crear borde. </li></ul></ul>
    28. 28. Imágenes: atributos. <ul><ul><li>Alineación horizontal y vertical: </li></ul></ul><ul><ul><li>align=“ xxx ” </li></ul></ul><ul><ul><li>valores: left, right, top, middle, botom </li></ul></ul><ul><ul><li>Espacio alrededor de la imagen: </li></ul></ul><ul><ul><li>hspace=“ x ” </li></ul></ul><ul><ul><li>vspace=“ x ” </li></ul></ul><ul><li>Imágenes flotantes. </li></ul>Índice II X en píxeles
    29. 29. Hipervínculos <ul><li>Etiqueta Ancla: <a>…</a> </li></ul><ul><ul><li>Atributos: href </li></ul></ul><ul><ul><li>name </li></ul></ul><ul><ul><li>Valor: url, mail,… </li></ul></ul><ul><li>Los hipervínculos pueden ser: </li></ul><ul><ul><li>Absolutos. </li></ul></ul><ul><ul><li>Relativos. </li></ul></ul><ul><ul><li>Internos. </li></ul></ul>
    30. 30. Hipervínculos II: Tipos <ul><li>Vínculo absoluto: Dirección a un servidor exterior. </li></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><li><a href=“ http://www.uah.es ”> Universidad de Alcalá </a> </li></ul></ul>
    31. 31. Hipervínculos II: Tipos <ul><li>Vínculo relativo: Vincula páginas dentro del mismo sitio web. </li></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><li><a href=“ index.html ”> Índice </a> </li></ul></ul><ul><ul><li>Vinculación recíproca. </li></ul></ul>
    32. 32. Hipervínculos II: Tipos <ul><li>Vinculación interna (marcador): en páginas extensas se vincula una parte de la página con otra. Se requiere asignar un blanco dentro de la página.(lugar a donde va a ir el vínculo). </li></ul><ul><ul><li>Principio de la página: </li></ul></ul><ul><ul><li><a href=“ #nombre ”> Ejemplos </a> </li></ul></ul><ul><ul><li>Blanco asignado: </li></ul></ul><ul><ul><ul><li><a name=“ nombre ”> Ejemplos </a> </li></ul></ul></ul>
    33. 33. Hipervínculos II: Tipos <ul><li>Vínculo de correo: mailto </li></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><li><a href=“ mailto:jgallego22@hotmail.com ”> </li></ul></ul><ul><ul><li>mi dirección de correo </a> </li></ul></ul><ul><li>Vincular imágenes: thumbnail </li></ul><ul><li>Vincular archivos </li></ul>Índice II
    34. 34. Tablas <ul><li>Etiqueta: <table>…</table> </li></ul><ul><ul><li>Etiqueta de fila: <tr>…</tr> </li></ul></ul><ul><ul><li>Etiqueta de celda (columna): <td>…</td> </li></ul></ul>
    35. 35. Tablas II <ul><li>Atributos de la etiqueta table : </li></ul><ul><ul><li>align=“ right, center, left ” </li></ul></ul><ul><ul><li>border=“ x ” x=0, 1, 2, … </li></ul></ul><ul><ul><li>width=“ x ” </li></ul></ul><ul><ul><ul><li>X = %: tablas dinámicas </li></ul></ul></ul><ul><ul><ul><li>X = px: tablas fijas </li></ul></ul></ul><ul><ul><li>cellspacing y cellspadding </li></ul></ul>
    36. 36. Tablas II <ul><li>Atributos de celda: td . </li></ul><ul><ul><li>Anchura de celda: width </li></ul></ul><ul><ul><li>Alineación horizontal: </li></ul></ul><ul><ul><li>align=“ left, middle, right ” </li></ul></ul><ul><ul><li>Alineación vertical: </li></ul></ul><ul><ul><li>valign=“ top, middle, bottom ” </li></ul></ul><ul><ul><li>Color: bgcolor </li></ul></ul><ul><ul><li>Imagen de fondo: background </li></ul></ul>
    37. 37. Tablas II <ul><li>Expandir columnas y filas: </li></ul><ul><ul><li>Expandir columnas: </li></ul></ul><ul><ul><li>colspan=“ x ” x columnas que se expanden </li></ul></ul><ul><ul><li>Expandir filas: </li></ul></ul><ul><ul><li>rowspan=“ x ” x filas que se expanden </li></ul></ul>Índice II
    38. 38. Hojas de Estilo (CSS) <ul><li>Tipos de hojas de estilo: </li></ul><ul><ul><li>Hojas vinculadas. </li></ul></ul><ul><ul><li>Hojas empotradas. </li></ul></ul><ul><ul><li>Estilo interno. </li></ul></ul>
    39. 39. Hojas de Estilo (CSS) II <ul><li>Estilo vinculado. </li></ul><ul><ul><li>Se crea una hoja de estilo y se guarda como doc.css </li></ul></ul><ul><ul><li>Se añade a la cabecera del documento <head> como: </li></ul></ul><ul><ul><li><link rel=“ stylesheet ” href=“ doc.css ” type=“ text/css ”> </li></ul></ul>
    40. 40. Hojas de Estilo (CSS) II <ul><li>Estilo interno. </li></ul><ul><ul><li>Se utiliza el atributo style sobre la etiqueta que se quiere modificar: h1, p, div, … Este atributo utiliza diferentes propiedades: font, color,… </li></ul></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><li><div style=“font: 13pt verdana ”> </li></ul></ul><ul><ul><li><div style=“font-size: 13 ; font-family: verdana ; color: #00CCCC ”> </li></ul></ul>
    41. 41. Hojas de Estilo (CSS) II <ul><li>Estilo empotrado. </li></ul><ul><ul><li>Utiliza la etiqueta <style>…</style> </li></ul></ul><ul><ul><li>Se inserta en <head> entre <!-- --> </li></ul></ul><ul><ul><li>Se compone de selectores (p, body, a, h1, b, div, …) a los que se añaden propiedades con sus valores entre llaves. </li></ul></ul><ul><ul><li>Ejemplo 1: </li></ul></ul><ul><ul><li>p { font-family: arial ; font-size: 13 ; } </li></ul></ul>
    42. 42. Hojas de Estilo (CSS) II <ul><ul><li>Ejemplo 2: </li></ul></ul><ul><ul><li>body { background-color: #00cccc ; </li></ul></ul><ul><ul><li> background-image: url( ac01.gif) ; </li></ul></ul><ul><ul><li> margin: 50, 25, 25, 100 ; </li></ul></ul><ul><ul><li> } </li></ul></ul>
    43. 43. Hojas de Estilo (CSS) II <ul><ul><li>Ejemplo 3: </li></ul></ul><ul><ul><li>p { font-family: helvetica ; </li></ul></ul><ul><ul><li> font-size: 14 ; </li></ul></ul><ul><ul><li>color: #0099cc ; </li></ul></ul><ul><ul><li>text-align: left ; </li></ul></ul><ul><ul><li>text-indent: 25 ; </li></ul></ul><ul><ul><li>} </li></ul></ul>
    44. 44. Hojas de Estilo (CSS) II <ul><ul><li>Ejemplo 4: </li></ul></ul><ul><ul><li>a:Visited { color: #00ccff;} </li></ul></ul><ul><ul><li>a:Active { color: #33ccff;} </li></ul></ul><ul><ul><li>a:Hover { color: #99ccff;} </li></ul></ul><ul><li>Trabajo con clases: Ejemplo. </li></ul><ul><ul><li>.text1 { font-family: sans-serif ; font-size: 13 pt ;} </li></ul></ul><ul><ul><li><p class=“ text1 ”> </li></ul></ul><ul><li>Agrupamiento. </li></ul>
    45. 45. Hojas de Estilo (CSS) II <ul><li>Colocación con CSSP: Capas </li></ul><ul><ul><li>Estilo interno o empotrado </li></ul></ul><ul><ul><li>Propiedad position: [ absolute, relative ] </li></ul></ul><ul><ul><li>top, left, width, height. </li></ul></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><li><div style=“position: absolute ; top: 100px ; left: 50px ; width: 200px ; height: 300px ;”> </li></ul></ul>Índice II
    46. 46. Fin

    ×