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.

Html / Css / Javascript for Dummies

229 views

Published on

Learning a little bit about html, css and javascript. Campus Party 2018 - Digital House

Published in: Internet
  • Login to see the comments

Html / Css / Javascript for Dummies

  1. 1. HTML + CSS
  2. 2. Hola! Soy Javier Herrera UI & Frontend Expert // Fullstack Dev. @jap_solo / javier@digitalhouse.com http://www.javier-herrera.com
  3. 3. Mi Primer Website Jugando con HTML, CSS y JavaScript </>
  4. 4. ADN de un Website ¿¿¿Ciencia astrofísica??? ¡No! ¡Es más fácil de lo que creen!
  5. 5. ¿WTF?
  6. 6. Hyper Text Markup Language Lenguaje de marcado de hipertexto. Compuesto de ETIQUETAS y ATRIBUTOS quienes a su vez forma ELEMENTOS.
  7. 7. Sintaxis de una Etiqueta <h1> ... </h1> Etiqueta de Apertura Etiqueta de Clausura
  8. 8. Sintaxis de una Etiqueta <h1 align=”center”> ... </h1> Atributo Valor
  9. 9. Sintaxis de una Etiqueta <h1 align=”center”> Hola Mundo </h1> Elemento
  10. 10. <etiqueta> ELEMENTO Sintaxis de una Etiqueta atributo="valor"
  11. 11. Estructura básica de un documento HTML <!doctype html> <html> <head> <meta charset="utf-8"> <title>Mi sitio</title> </head> <body> Mamá, papá estoy programando :D </body> </html>
  12. 12. Tags HTML == Encabezados == <h1>Título principal</h1> <h2>Subtítulo</h2> <h3>Otro subtítulo</h3> <h4>Uno más</h4> <h5>Otro ¿por qué no?</h5> <h6>El último</h6>
  13. 13. Tags HTML == Párrafos == <p>Lord Vader. You may take Captain Solo to Jabba the Hut after I have Skywalker.</p> <p>No. Good. It would be unfortunate if I had to leave a garrison here. This deal's getting worse all the time.</p>
  14. 14. Tags HTML == Listas ordenadas == <ol> <li>Ítem de lista</li> <li>Ítem de lista</li> <li>Ítem de lista</li> </ol>
  15. 15. Tags HTML == Listas desordenadas == <ul> <li>Ítem de lista</li> <li>Ítem de lista</li> <li>Ítem de lista</li> </ul>
  16. 16. Tags HTML == Iframe == <iframe src="https://www.youtube.com/embed/VY2hFkvWXTo" width="560" height="315" frameborder="0"></iframe>
  17. 17. ¿Y el CSS? ¿Qué es, cómo se usa y para qué sirve?
  18. 18. Cascading Style Sheets Hojas de estilo en cascada. Compuestas de REGLAS, SELECTORES y DECLARACIONES.
  19. 19. HTML [Contenido] CSS [Presentación] Simbiosis +
  20. 20. sin CSS con CSS
  21. 21. Vinculación Interna de CSS <style> selector { propiedad: valor; propiedad: valor; propiedad: valor; } <style> </head>
  22. 22. Regla de CSS == Sintaxis == selector { propiedad: valor; propiedad: valor; propiedad: valor; } Definición: una regla de CSS es un conjunto de “órdenes” que se aplican a un tag determinado para estilizar el mismo.
  23. 23. Regla de CSS == Sintaxis == selector { propiedad: valor; propiedad: valor; propiedad: valor; } Define a qué elemento aplicamos la regla Definición: una regla de CSS es un conjunto de “órdenes” que se aplican a un tag determinado para estilizar el mismo.
  24. 24. Regla de CSS == Sintaxis == selector { propiedad: valor; propiedad: valor; propiedad: valor; } Define la propiedad que queremos modificar Definición: una regla de CSS es un conjunto de “órdenes” que se aplican a un tag determinado para estilizar el mismo.
  25. 25. Regla de CSS == Sintaxis == selector { propiedad: valor; propiedad: valor; propiedad: valor; } Especifica el comportamiento de la propiedad Definición: una regla de CSS es un conjunto de “órdenes” que se aplican a un tag determinado para estilizar el mismo.
  26. 26. Regla de CSS == Sintaxis == selector { propiedad: valor; propiedad: valor; propiedad: valor; } Al conjunto de: propiedad + valor Lo llamamos DECLARACIÓN Definición: una regla de CSS es un conjunto de “órdenes” que se aplican a un tag determinado para estilizar el mismo.
  27. 27. Regla de CSS == Ejemplo == body { background-color: #00ff00; font-family: sans-serif; text-align: center; }
  28. 28. JavaScript Lenguaje de programación, interpretado por el NAVEGADOR. Variables, funciones, arrays, objetos y demás.
  29. 29. Implementación interna de JS <script> // Do some stuff <script> </body>
  30. 30. Implementación interna de JS <script> let person = prompt('Decime tu nombre'); let tag = document.querySelector('#visitante'); tag.innerText = person; <script> </body>
  31. 31. ¡Gracias por venir! Ya sabemos "programar" ¿Consultas?

×