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.

Curso HTML y CSS, parte 1

10,650 views

Published on

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

Published in: Technology, Design

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

×