SlideShare a Scribd company logo
1 of 33
Download to read offline
HTML + CSS
Hola!
Soy Javier Herrera
UI & Frontend Expert // Fullstack Dev.
@jap_solo / javier@digitalhouse.com
http://www.javier-herrera.com
Mi Primer Website
Jugando con HTML, CSS y JavaScript
</>
ADN de un Website
¿¿¿Ciencia astrofísica??? ¡No!
¡Es más fácil de lo que creen!
¿WTF?
Hyper Text
Markup Language
Lenguaje de marcado de
hipertexto.
Compuesto de ETIQUETAS
y ATRIBUTOS quienes a su
vez forma ELEMENTOS.
Sintaxis de una Etiqueta
<h1> ... </h1>
Etiqueta de
Apertura
Etiqueta de
Clausura
Sintaxis de una Etiqueta
<h1 align=”center”> ... </h1>
Atributo Valor
Sintaxis de una Etiqueta
<h1 align=”center”>
Hola Mundo
</h1>
Elemento
<etiqueta> ELEMENTO
Sintaxis de una Etiqueta
atributo="valor"
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>
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>
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>
Tags HTML
== Listas ordenadas ==
<ol>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
</ol>
Tags HTML
== Listas desordenadas ==
<ul>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
<li>Ítem de lista</li>
</ul>
Tags HTML
== Iframe ==
<iframe src="https://www.youtube.com/embed/VY2hFkvWXTo"
width="560" height="315" frameborder="0"></iframe>
¿Y el CSS?
¿Qué es, cómo se usa y para qué sirve?
Cascading
Style Sheets
Hojas de estilo en cascada.
Compuestas de REGLAS,
SELECTORES y DECLARACIONES.
HTML
[Contenido]
CSS
[Presentación]
Simbiosis
+
sin CSS con CSS
Vinculación Interna de CSS
<style>
selector {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}
<style>
</head>
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.
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.
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.
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.
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.
Regla de CSS
== Ejemplo ==
body {
background-color: #00ff00;
font-family: sans-serif;
text-align: center;
}
JavaScript
Lenguaje de programación,
interpretado por el NAVEGADOR.
Variables, funciones, arrays,
objetos y demás.
Implementación interna de JS
<script>
// Do some stuff
<script>
</body>
Implementación interna de JS
<script>
let person = prompt('Decime tu nombre');
let tag = document.querySelector('#visitante');
tag.innerText = person;
<script>
</body>
¡Gracias por venir!
Ya sabemos "programar"
¿Consultas?

More Related Content

Similar to Html / Css / Javascript for Dummies

Similar to Html / Css / Javascript for Dummies (20)

Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
CSS-Modulo4A.pptx
CSS-Modulo4A.pptxCSS-Modulo4A.pptx
CSS-Modulo4A.pptx
 
Css posicionamiento de pag web presentacion de la semana
Css posicionamiento de pag web      presentacion de la semanaCss posicionamiento de pag web      presentacion de la semana
Css posicionamiento de pag web presentacion de la semana
 
Taller de Css
Taller de CssTaller de Css
Taller de Css
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
HTML.pdf
HTML.pdfHTML.pdf
HTML.pdf
 
Css básico
Css básicoCss básico
Css básico
 
1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)1. Introducción a las Hojas de estilo (CSS)
1. Introducción a las Hojas de estilo (CSS)
 
SEO
SEOSEO
SEO
 
CSS.3.pptx
CSS.3.pptxCSS.3.pptx
CSS.3.pptx
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Tipo
TipoTipo
Tipo
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSS
 
Programación web modelado en cajas
Programación web modelado en cajasProgramación web modelado en cajas
Programación web modelado en cajas
 
Semana 3 Maquetación CSS
Semana 3   Maquetación CSSSemana 3   Maquetación CSS
Semana 3 Maquetación CSS
 
HTML
HTMLHTML
HTML
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
Tecnologia Web - HTML
Tecnologia Web - HTMLTecnologia Web - HTML
Tecnologia Web - HTML
 
Aprendiendo PHP
Aprendiendo PHPAprendiendo PHP
Aprendiendo PHP
 

Html / Css / Javascript for Dummies

  • 2. Hola! Soy Javier Herrera UI & Frontend Expert // Fullstack Dev. @jap_solo / javier@digitalhouse.com http://www.javier-herrera.com
  • 3. Mi Primer Website Jugando con HTML, CSS y JavaScript </>
  • 4. ADN de un Website ¿¿¿Ciencia astrofísica??? ¡No! ¡Es más fácil de lo que creen!
  • 5.
  • 6.
  • 8. Hyper Text Markup Language Lenguaje de marcado de hipertexto. Compuesto de ETIQUETAS y ATRIBUTOS quienes a su vez forma ELEMENTOS.
  • 9. Sintaxis de una Etiqueta <h1> ... </h1> Etiqueta de Apertura Etiqueta de Clausura
  • 10. Sintaxis de una Etiqueta <h1 align=”center”> ... </h1> Atributo Valor
  • 11. Sintaxis de una Etiqueta <h1 align=”center”> Hola Mundo </h1> Elemento
  • 12. <etiqueta> ELEMENTO Sintaxis de una Etiqueta atributo="valor"
  • 13. 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>
  • 14. 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>
  • 15. 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>
  • 16. Tags HTML == Listas ordenadas == <ol> <li>Ítem de lista</li> <li>Ítem de lista</li> <li>Ítem de lista</li> </ol>
  • 17. Tags HTML == Listas desordenadas == <ul> <li>Ítem de lista</li> <li>Ítem de lista</li> <li>Ítem de lista</li> </ul>
  • 18. Tags HTML == Iframe == <iframe src="https://www.youtube.com/embed/VY2hFkvWXTo" width="560" height="315" frameborder="0"></iframe>
  • 19. ¿Y el CSS? ¿Qué es, cómo se usa y para qué sirve?
  • 20. Cascading Style Sheets Hojas de estilo en cascada. Compuestas de REGLAS, SELECTORES y DECLARACIONES.
  • 22. sin CSS con CSS
  • 23. Vinculación Interna de CSS <style> selector { propiedad: valor; propiedad: valor; propiedad: valor; } <style> </head>
  • 24. 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.
  • 25. 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.
  • 26. 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.
  • 27. 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.
  • 28. 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.
  • 29. Regla de CSS == Ejemplo == body { background-color: #00ff00; font-family: sans-serif; text-align: center; }
  • 30. JavaScript Lenguaje de programación, interpretado por el NAVEGADOR. Variables, funciones, arrays, objetos y demás.
  • 31. Implementación interna de JS <script> // Do some stuff <script> </body>
  • 32. Implementación interna de JS <script> let person = prompt('Decime tu nombre'); let tag = document.querySelector('#visitante'); tag.innerText = person; <script> </body>
  • 33. ¡Gracias por venir! Ya sabemos "programar" ¿Consultas?