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