Curso HTML y CSS, parte 1

1. Cátedras paralelasHTML y CSS 1

2. www.fondiu.cltwitter: @_fondiu

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. 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. 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. 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. 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. 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. 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. 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. 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. Html: sintaxis <ironía> Qué bonito te queda ese vestido! </ironía>

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. Html: etiquetas <p> Párrafo <a> Vínculo (ancla) <strong> Negrita <em> Cursiva <h1>…<h6> Títulos de 1 al 6

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Html: etiquetas inline <a> Vínculo <strong> Negrita <em> Cursiva <span> Fragmento no semántico <abbr> Abreviatura <acronym> Acrónimo

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. 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. 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. 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. Html: clases & ids Ejemplo ficticio

35. Html: clases & ids <animal>…</animal> <animal>…</animal> <animal>…</animal> <animal>…</animal>

36. Html: clases & ids <animal class="gato">…</animal> <animal class="gato">…</animal> <animal class="perro">…</animal> <animal class="perro">…</animal>

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. 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. 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. 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. 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. CSS: funcionamiento Sin CSS Con CSS

43. CSS: funcionamiento

44. CSS: sintaxis selector { regla1:valor; regla2:valor2; }

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. Css: sintaxis • Esto se lee: "a todas las etiquetas <a>, dales color rojo". a { color:red; }

47. Css: sintaxis Sin CSS a { color:red; }

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. 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. 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. 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. Css: selectores CSS Equivalencia .red <div class="red"> <p> <strong class="red"> … </strong> </p> </div> <h1 class="red">…</h1>

53. Css: selectores CSS Equivalencia div.red <div class="red"> <p> <strong class="red"> … </strong> </p> </div> <h1 class="red">…</h1>

54. Css: selectores CSS Equivalencia strong.red <div class="red"> <p> <strong class="red"> … </strong> </p> </div> <h1 class="red">…</h1>

55. Css: selectores Un selector puede especificar un elemento que posea varias clases a la vez a.gato.blanco <a class="gato blanco">

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. 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. 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. Css: selectores CSS Equivalencia p a <p> <a href="#">…</a> </p> p strong a <p> <strong> <a href="#">…</a> </strong> </p>

60. Css: selectores CSS Equivalencia p strong a <p> <a href="#">…</a> <strong> <a href="#">…</a> </strong> </p>

61. Css: selectores CSS Equivalencia body div <body> <div> <div> <div>…</div> </div> </div> </body>

62. Css: selectores CSS Equivalencia <div> div p <p> <strong>…</strong> </p> </div> <p>…</p> <div> <div> <p>…</p> </div> </div>

63. Css: selectores CSS Equivalencia p .hola <p> <span class="hola"> … </span> <em class="hola"> … </em> </p> <span class="hola">…</span>

64. Css: selectores • En una sola declaración CSS pueden juntarse varios selectores, unidos por comas a, div, strong { color:red; }

65. Css: selectores CSS Equivalencia a, .hola <p> <span class="hola"> … </span> <a class="chao"> … </a> </p> <p class="hola">…</p>

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. Css: pseudo-clases CSS a { Hover me! color:blue; } a:hover { Hover me! color:red; }

68. Css: pseudo-clases CSS a { Click me! color:blue; } a:active { Click me! color:green; }

69. Css: pseudo-clases CSS input { background- color:white; } input:focus { background- hola color:yellow; }

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. 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. 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. 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. Html 5: etiquetas Etiquetas media <canvas> Lienzo de dibujo <video> Se imaginarán :) <audio> Se imaginarán :)

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. 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. 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. 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. 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. 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. 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. 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. 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. forms: etiquetas Controles de formulario <input type="hidden"> Muahahahaha

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. 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. 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. próxima clase HTML CSS Tablas Reglas URLs Modelo de caja Reseña de JavaScript Posicionamiento Fondo Cascada Códigos de color