Curso HTML y CSS, parte 1

8,334 views
8,199 views

Published on

Primera parte del curso gratuito HTML y CSS, ofrecido por Fondiú.

Published in: Technology, Design
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total views
8,334
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
551
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Curso HTML y CSS, parte 1

  1. 1. Cátedras paralelasHTML y CSS 1
  2. 2. www.fondiu.cltwitter: @_fondiu
  3. 3. Cómo funcionan las páginas web Petición Servidor (URL y/o conjunto de datos) Navegador Usuario Respuesta (Usualmente HTML con referencias a archivos)
  4. 4. Qué es html • Lenguaje de marcado que contiene los elementos de una página Web • El navegador interpreta este lenguaje y muestra los resultados • HTML = Contenido
  5. 5. Qué es CSS • Lenguaje de instrucciones que determina cómo se visualiza o presenta una página Web => Estilo • Colores, posiciones, tamaños, bordes, tipografías, etc. • CSS = “Presentación”
  6. 6. html: orígenes • Antiguamente, el editor y el compositor de texto eran personas distintas • El editor no podía previsualizar el texto, y el compositor no sabía qué destacar • El editor incluía instrucciones en el texto: "esto es cursiva", "esto es título", "esto es una nota al pie".
  7. 7. html: orígenes • Hoy, el navegador (Firefox, Chrome, IE) es el "compositor" y recibe las instrucciones del autor del código para mostrarlas visualmente
  8. 8. Qué es html • HTML = Hypertext Markup Language • Hipertexto = Links • Markup = Marcado semántico (“esto es un título, esto es un párrafo, esto es un botón”)
  9. 9. Html: sintaxis • Lenguaje de etiquetas • Las etiquetas delimitan información, similar a marcar un texto con corchetes o paréntesis apertura <etiqueta> …contenido... cierre </etiqueta>
  10. 10. Html: sintaxis <strong>Esto es una negrita</strong> y esto no lo es. <em>Esto está en cursiva</em> y esto no lo está. <perro>Esto es un perro</perro> y esto no lo es.
  11. 11. Html: sintaxis <strong>Esto es Esto es negrita y esto negrita</strong> y esto no lo es. no lo es. <em>Esto está en Esto está en cursiva y cursiva</em> y esto no esto no lo está. lo está. <perro>Esto es un perro</perro> y esto no lo es. y esto no lo es.
  12. 12. Html: sintaxis <ironía> Qué bonito te queda ese vestido! </ironía>
  13. 13. Html: sintaxis • No todas las etiquetas tienen apertura y cierre: algunas son un elemento aislado • Las etiquetas que no cierran reciben un "/" al final para marcar su cierre. <p>A continuación, un salto de línea: <br/> Gracias, salto de línea.</p>
  14. 14. Html: etiquetas <p> Párrafo <a> Vínculo (ancla) <strong> Negrita <em> Cursiva <h1>…<h6> Títulos de 1 al 6
  15. 15. Html: anidación Algunas <p> etiquetas pueden Esto es un párrafo contener a <a>y esto es un vínculo otras dentro del párrafo. </a> Esto es sólo párrafo. </p> Esto no es párrafo ni vínculo.
  16. 16. Html: anidación • Y otras pueden contenerse a sí mismas, como <div>, <ul>, <ol> <div> Esto es una "div", y <div> esto es una sub "div" dentro de otra </div> </div>
  17. 17. Html: anidación • La etiqueta que está dentro de otra se llama hija (child). • La etiqueta que contiene a otra es padre (parent) de ésta. <padre>Esta etiqueta actúa como contenedor <hija>esta etiqueta está dentro de otra</hija></padre>
  18. 18. Html: anidación • No todas las etiquetas permiten anidación de otras. • Algunas no aceptan ciertos tipos de anidación: • <a> no acepta <p> o <h1>, por ejemplo.
  19. 19. Html: atributos • Algunas etiquetas necesitan atributos. • Por ejemplo, un link necesita saber dónde llevarte, y una imagen necesita saber donde está el archivo. • El atributo siempre va en la etiqueta de apertura. <etiqueta atributo="valor"> bla bla bla… </etiqueta>
  20. 20. Html: atributos Algunas etiquetas que necesitan atributos para ser útiles <a href="http://fondiu.cl"> <img src="images/foto.jpg"> <div class="menu"> <input type="button"> <form action="http://google.com">
  21. 21. Html: atributos Es usual que las etiquetas combinen dos o más atributos: <a href=http://fondiu.cl target="_blank"> <img src="images/foto.jpg" width="100" height="50" />
  22. 22. Html: página web básica • Una página Web se divide en dos secciones: <head> y <body>, encerradas por una etiqueta <html> que define el documento <html> <head>…</head> <body>…</body> </html>
  23. 23. Html: head • La sección <head> es invisible, y contiene las etiquetas que definen la página, su título y su metainformación, así como la vinculación a CSS y a JavaScript.
  24. 24. Html: etiquetas head <link> Referencia a externo (NO vínculo) <meta> Metainformación <title> Título (pestaña/Google) <style> Declaración de estilo CSS <script> Bloque de texto JavaScript FAVICON – Se muestra gracias a una etiqueta <link>
  25. 25. Html: body • La sección <body> enmarca todo el contenido visible en la página, incluyendo el fondo. • Las etiquetas en <body> tienen 2 comportamientos principales: block o inline.
  26. 26. Html: blocK • Las etiquetas block son cajas que poseen un carril "dedicado" para ellos. Además poseen dimensiones, fondo y posición. Block Block (predeterminado) Block
  27. 27. Html: etiquetas block <form> Formulario <div> División no semántica <p> Párrafo <h1>…<h6> Encabezados <blockquote> Bloque de cita <ul> y <ol> Listados <li> Elemento de lista
  28. 28. Html: INLINE • Las etiquetas inline se comportan como letras o un destacador: siguen el flujo del texto dentro de un elemento block.block { Hola, esto es un párrafo, y esto es un elemento inline dentro de este párrafo. <p>Hola, esto es un párrafo, <span> y esto es un elemento inline</span> dentro de ese párrafo.</p>
  29. 29. Html: etiquetas inline <a> Vínculo <strong> Negrita <em> Cursiva <span> Fragmento no semántico <abbr> Abreviatura <acronym> Acrónimo
  30. 30. Html: block v/s INLINE Block Inline • Contiene texto • Va junto con el texto • Es una "caja" • Es un "destacador" • Ocupa su carril • Va dentro de un propio elemento block
  31. 31. Html: clases & ids • Son atributos HTML • Aplicables a cualquier etiqueta dentro de <body> • Imprescindibles para usar CSS • En sí mismas no hacen nada más que "poner nombres" • Pueden haber ambos en un mismo elemento
  32. 32. Html: clases & ids <a class="grande">Click aquí</a> <div class="grande">Hola</div> <ul id="menu">…</ul> <span class="destacado" id="principal"> Texto importante </span>
  33. 33. Html: class & ids Class ID • Se puede usar varias • Se usa una sola vez veces en la página en la página • Sirve para agrupar • Sirve para distinguir elementos comunes un elemento único • Un elemento puede • Un elemento sólo tener varias clases puede tener un ID
  34. 34. Html: clases & ids Ejemplo ficticio
  35. 35. Html: clases & ids <animal>…</animal> <animal>…</animal> <animal>…</animal> <animal>…</animal>
  36. 36. Html: clases & ids <animal class="gato">…</animal> <animal class="gato">…</animal> <animal class="perro">…</animal> <animal class="perro">…</animal>
  37. 37. Html: clases & ids <animal class="gato" id="Benito"> …</animal> <animal class="gato" id="Demóstenes"> …</animal> <animal class="perro" id="Pulgoso"> …</animal> <animal class="perro" id="Cachupín"> …</animal>
  38. 38. Html: clases & ids <animal class="gato blanco" id="Micifuz"> …</animal> <animal class="gato gris" id="Demóstenes"> …</animal> <animal class="perro gris" id="Pulgoso"> …</animal> <animal class="perro blanco" id="Cachupín"> …</animal>
  39. 39. CSS: funcionamiento • CSS toma los elementos en <body> anteriormente mencionados y modifica su aspecto • Puede cambiar color, forma, posición, profundidad e incluso comportamiento (de inline a block y viceversa)
  40. 40. CSS: funcionamiento • El navegador tiene algunos estilos predefinidos (fondo blanco, texto negro, vínculos azules, Times New Roman…) • CSS permite cambiar completamente el aspecto de una página
  41. 41. CSS: ventajas • REUTILIZACIÓN • Permite vincular muchas páginas a un solo archivo CSS • Permite modificar muchos elementos de una sola vez • Permite separar el contenido de la presentación: cambiar diseños es fácil
  42. 42. CSS: funcionamiento Sin CSS Con CSS
  43. 43. CSS: funcionamiento
  44. 44. CSS: sintaxis selector { regla1:valor; regla2:valor2; }
  45. 45. Css: sintaxis • Selector: define qué elemento HTML será afectado (ej: <a>) • Regla: define el atributo a modificar (ej: color) • Valor: define cómo se modifica (ej: red)
  46. 46. Css: sintaxis • Esto se lee: "a todas las etiquetas <a>, dales color rojo". a { color:red; }
  47. 47. Css: sintaxis Sin CSS a { color:red; }
  48. 48. Css: selectores • CSS tiene una sintaxis de selectores • De esta forma, cada selector refleja un elemento o varios de HTML que cumplen con la condición del selector. • Por ejemplo, el selector "a" quiere decir "todas las etiquetas <a>".
  49. 49. Css: selectores Los selectores nos permiten especificar qué queremos cambiar "Dale 200px de ancho a la columna" "Haz que los vínculos sean rojos" "Pon el fondo de color negro"
  50. 50. Css: selectores CSS Equivalencia gato Etiqueta <gato> .gris class="gris" #micifuz id="micifuz" gato.gris Sólo etiquetas <gato class="gris"> gato#micifuz Sólo etiquetas <gato id="micifuz">
  51. 51. Css: selectores CSS Equivalencia ul Etiqueta <ul> .menu class="menu" #sidebar id="sidebar" ul.menu Sólo etiquetas <ul class="menu"> ul#sidebar Sólo etiquetas <ul id="sidebar">
  52. 52. Css: selectores CSS Equivalencia .red <div class="red"> <p> <strong class="red"> … </strong> </p> </div> <h1 class="red">…</h1>
  53. 53. Css: selectores CSS Equivalencia div.red <div class="red"> <p> <strong class="red"> … </strong> </p> </div> <h1 class="red">…</h1>
  54. 54. Css: selectores CSS Equivalencia strong.red <div class="red"> <p> <strong class="red"> … </strong> </p> </div> <h1 class="red">…</h1>
  55. 55. Css: selectores Un selector puede especificar un elemento que posea varias clases a la vez a.gato.blanco <a class="gato blanco">
  56. 56. Css: selectores … y también un elemento que mezcle clases y IDs a.gato#micifuz <a class="gato" id="micifuz"> a.gato.blanco#micifuz <a class="gato blanco" id="micifuz">
  57. 57. Css: selectores Selectores de anidación padre/hijo El padre siempre está a la izquierda del hijo. Sólo el elemento hijo es afectado. CSS Equivalencia ul li Etiquetas <li> que estén DENTRO de una etiqueta <ul> li ul Etiquetas <ul> que estén DENTRO de una etiqueta <li>
  58. 58. Css: selectores Selectores de anidación padre/hijo El padre siempre está a la izquierda del hijo. Sólo el elemento hijo es afectado. ul li <ul> <li>…</li> </ul> li ul <li> <ul>…</ul> </li>
  59. 59. Css: selectores CSS Equivalencia p a <p> <a href="#">…</a> </p> p strong a <p> <strong> <a href="#">…</a> </strong> </p>
  60. 60. Css: selectores CSS Equivalencia p strong a <p> <a href="#">…</a> <strong> <a href="#">…</a> </strong> </p>
  61. 61. Css: selectores CSS Equivalencia body div <body> <div> <div> <div>…</div> </div> </div> </body>
  62. 62. Css: selectores CSS Equivalencia <div> div p <p> <strong>…</strong> </p> </div> <p>…</p> <div> <div> <p>…</p> </div> </div>
  63. 63. Css: selectores CSS Equivalencia p .hola <p> <span class="hola"> … </span> <em class="hola"> … </em> </p> <span class="hola">…</span>
  64. 64. Css: selectores • En una sola declaración CSS pueden juntarse varios selectores, unidos por comas a, div, strong { color:red; }
  65. 65. Css: selectores CSS Equivalencia a, .hola <p> <span class="hola"> … </span> <a class="chao"> … </a> </p> <p class="hola">…</p>
  66. 66. Css: pseudo-clases • Las pseudo-clases definen estados especiales de HTML que no son elementos ni etiquetas propiamente tales • :hover = mouse por encima • :focus = elemento "enfocado" • :active= al hacer clic
  67. 67. Css: pseudo-clases CSS a { Hover me! color:blue; } a:hover { Hover me! color:red; }
  68. 68. Css: pseudo-clases CSS a { Click me! color:blue; } a:active { Click me! color:green; }
  69. 69. Css: pseudo-clases CSS input { background- color:white; } input:focus { background- hola color:yellow; }
  70. 70. especificaciones html • HTML es un lenguaje que evoluciona en el tiempo • Hoy en día coexisten 3 especificaciones principales: HTML 4, XHTML 1 y HTML 5
  71. 71. especificaciones: html 4 • La especificación "clásica" que usan la mayoría de las páginas • Sus 2 versiones más conocidas: Strict y Transitional
  72. 72. especificaciones: Xhtml • Combina HTML 4 con el estándar XML • Más estricto y "correcto" que HTML 4, pero muy similar en forma • Ofrece las mismas funcionalidades
  73. 73. especificaciones: HTML 5 • Lenguaje "nuevo" • Permite escribir en HTML y XHTML • Ofrece nuevas funcionalidades "nativas": video, audio, canvas • Código más semántico • Más posibilidades de interfaz • Mejor manejo de errores de usuario
  74. 74. Html 5: etiquetas Etiquetas media <canvas> Lienzo de dibujo <video> Se imaginarán :) <audio> Se imaginarán :)
  75. 75. Html 5: etiquetas Etiquetas semánticas <nav> Menú <article> Unidad de contenido (ej: post de blog) <aside> Sidebar <header> Encabezado <footer> Pie de página <section> Sí. Es una sección (grupo de unidades)
  76. 76. html: forms • Los formularios permiten a una página Web enviar y recibir datos de otras páginas, un script o base de datos. • Cada vez que envías un e-mail, comentas en un blog, te suscribes a un newsletter o cambias tu foto en Facebook estás enviando un formulario.
  77. 77. html: forms • Los formularios realizan 3 funciones básicas: 1. Ofrecen controles de interfaz para ingresar la información 2. Validan la información ingresada 3. Envían la información visible y oculta al destino especificado
  78. 78. html: forms • Un formulario SIEMPRE está envuelto por una etiqueta <form>, que define dónde será enviado. <form action="http://google.com" method="POST">
  79. 79. html: forms • El atributo action especifica el lugar donde serán recibidos y procesados los datos del formulario. • "Envíame esto a http://google.com por favor, y me procesai los datos, ñatito" <form action="http://google.com" method="POST">
  80. 80. html: forms • El atributo method especifica qué tipo de envío se hará: • GET sólo consulta datos y no modifica nada (sólo lectura) • POST lee y envía datos y espera la respuesta del servidor (lectura y escritura). <form action="http://google.com" method="POST">
  81. 81. html: forms ¿Qué datos se envían? • Todos los recopilados en elementos de "entrada" (inputs) • Esto incluye elementos que interactúan con el usuario (controles) como elementos invisibles
  82. 82. forms: etiquetas Controles de formulario <input type="text"> Campo de texto (1 línea) <input type="password"> Campo de contraseña <input type="button"> Botón genérico <input type="submit"> Botón de envío form <input type="checkbox"> Casilla de verificación <input type="radio"> Botón de radio <input type="file"> "Examinar…"
  83. 83. forms: etiquetas Controles de formulario <input type="image"> <textarea> Campo texto multilínea <select> <option> Elemento de menú select <optgroup> Grupo de imagen <fieldset> Agrupador de campos <legend> Título del fieldset
  84. 84. forms: etiquetas Controles de formulario <input type="hidden"> Muahahahaha
  85. 85. glosario HTML: Lenguaje de marcado para pags Web / Contenido CSS: Lenguaje de estilos / Presentación – Apariencia Etiqueta: Unidad estructural – delimitador de contenido Atributo: Datos complementarios para etiquetas Head: Encabezado (invisible) de página Web Meta: Información de una página acerca de sí misma Body: Sección visible de una página Web
  86. 86. glosario Anidación: Etiquetas contenidas dentro de otras Padre/Hijo: Relación entre contenedor y contenido Block: Comportamiento visual de "caja" de un elemento Inline: Comportamiento visual estilo "destacador" Regla CSS: Atributo a ser modificado por un valor (ej: color) Declaración CSS: Conjunto de reglas que modifican un elemento Selector: Definición del elemento a ser modificado
  87. 87. glosario Class: Atributo HTML que permite agrupar similares ID: Atributo HTML que permite identificar y diferenciar Pseudo-clase: Selector que permite tomar estados HTML especiales Script: Conjunto de instrucciones. En HTML, referido a JavaScript
  88. 88. próxima clase HTML CSS Tablas Reglas URLs Modelo de caja Reseña de JavaScript Posicionamiento Fondo Cascada Códigos de color

×