Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Diseño de páginas Web con HTML

63,802 views

Published on

Curso básico de lenguaje HTML

Published in: Education
  • Login to see the comments

Diseño de páginas Web con HTML

  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><ul><ul><li>Elementos de formato. </li></ul></ul><ul><ul><li>Estilo de texto. </li></ul></ul><ul><ul><li>Alineación y margen. </li></ul></ul><ul><ul><li>Fuente de texto. </li></ul></ul>
  3. 3. Contenidos II: <ul><li>Cuerpo del documento. </li></ul><ul><li>Cabeza del documento. </li></ul><ul><li>Listas de elementos. </li></ul><ul><li>Hipertexto. </li></ul><ul><li>Imágenes. </li></ul><ul><li>Hojas de estilo (CSS). </li></ul><ul><li>Tablas. </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>¿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>
  6. 6. 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>
  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>
  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>
  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>
  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>
  11. 11. Formato de texto: elementos. <ul><li>Romper líneas: </li></ul><ul><ul><li><br>…</br> (cierre opcional) </li></ul></ul><ul><ul><li><nbr>…</nbr> (cierre opcional) </li></ul></ul><ul><li>Formato previo: </li></ul><ul><li><pre>…</pre> </li></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> y <h> . </li></ul></ul><ul><ul><li>Valores: left , right , center y justify . </li></ul></ul><ul><li>Etiqueta <div>…</div> . </li></ul><ul><ul><li>Utiliza el atributo anterior. </li></ul></ul><ul><ul><li>Permite modificar varios párrafos a la vez. </li></ul></ul>
  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>
  18. 18. Formato: barra horizontal. <ul><li>Etiqueta <hr> (</hr>) </li></ul><ul><li>Crea una barra horizontal. </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>
  19. 19. Cuerpo del documento: body. <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><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>
  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><ul><li>Ej: <body background=“ imagen/pato.jpg ” bgcolor=“ #00FFCC ” text=“ #006666 ” link=“ #9966CC ” vlink=“ #FF6633 ” alink=“ #66CC33 ”> </li></ul>
  21. 21. Cabeza 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>
  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>
  26. 26. 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>
  27. 27. 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>
  28. 28. Hipervínculos II: Tipos <ul><li>Vínculo relativo: Vincula páginas dentro del mismo sitio web (mismo servidor). </li></ul><ul><ul><li>Ejemplo: </li></ul></ul><ul><ul><li><a href=“ index.html ”> Índice </a> </li></ul></ul><ul><li>Vinculación recíproca. </li></ul>
  29. 29. 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>
  30. 30. 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>
  31. 31. 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>
  32. 32. 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>
  33. 33. 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>
  34. 34. 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>
  35. 35. 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>
  36. 36. 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>
  37. 37. 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>
  38. 38. 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>
  39. 39. 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>
  40. 40. 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>
  41. 41. 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>
  42. 42. 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>
  43. 43. 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>
  44. 44. 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: </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>
  45. 45. 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>

×