Html / Css / Javascript for Dummies
356 views
33 slides
Apr 27, 2018
Slide 1 of 33
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
About This Presentation
Learning a little bit about html, css and javascript. Campus Party 2018 - Digital House
Slide Content
HTML + CSS
Hola!
Soy Javier Herrera
UI & Frontend Expert // Fullstack Dev.
@jap_solo / [email protected]
http://www.javier-herrera.com
Soy Javier Herrera
UI & Frontend Expert // Fullstack Dev.
@jap_solo / [email protected]
http://www.javier-herrera.com
Mi Primer Website
Jugando con HTML, CSS y JavaScript
</>
Jugando con HTML, CSS y JavaScript
</>
ADN de un Website
¿¿¿Ciencia astrofísica??? ¡No!
¡Es más fácil de lo que creen!
¿¿¿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.
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
<h1> ... </h1>
Etiqueta de
Apertura
Etiqueta de
Clausura
Sintaxis de una Etiqueta
<h1 align=”center”> ... </h1>
Atributo Valor
<h1 align=”center”> ... </h1>
Atributo Valor
Sintaxis de una Etiqueta
<h1 align=”center”>
Hola Mundo
</h1>
Elemento
<h1 align=”center”>
Hola Mundo
</h1>
Elemento
<etiqueta> ELEMENTO
Sintaxis de una Etiqueta
atributo="valor"
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>
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>
== 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>
== 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>
== 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>
== 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>
== 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?
¿Qué es, cómo se usa y para qué sirve?
Cascading
Style Sheets
Hojas de estilo en cascada.
Compuestas de REGLAS,
SELECTORES y DECLARACIONES.
Style Sheets
Hojas de estilo en cascada.
Compuestas de REGLAS,
SELECTORES y DECLARACIONES.
HTML
[Contenido]
CSS
[Presentación]
Simbiosis
+
[Contenido]
CSS
[Presentación]
Simbiosis
+
sin CSS con CSS
Vinculación Interna de CSS
<style>
selector {
propiedad: valor;
propiedad: valor;
propiedad: valor;
}
<style>
</head>
<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.
== 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.
== 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.
== 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.
== 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.
== 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;
}
== 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.
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>
<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>
<script>
let person = prompt('Decime tu nombre');
let tag = document.querySelector('#visitante') ;
tag.innerText = person;
<script>
</body>
¡Gracias por venir!
Ya sabemos "programar"
¿Consultas?
Ya sabemos "programar"
¿Consultas?
Tags
Categories
DesignDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 356
- Slides 33
- Favorites 4
- Age 2778 days
Related Slideshows
1
MGV Residential Design projects for different clients, including a New Mexico Adobe project-1-.pdf
mannyvesa
27 views
16
EUNITED_Advocacy and Public Engagement through Visual Media
GeorgeDiamandis11
32 views
31
DESIGN THINKINGGG PPT 2 TOPIC IDEATION.pptx
HibaZaidi2
26 views
36
DESIGN THINKING CHAPTER 1 PPTT PPT 1.pptx
HibaZaidi2
29 views
112
Hinduism and Its History - PowerPoint Slides.pptx
ConorMcCormack10
25 views
20
Service Attributes of Manufactured Parts.pptx
MustafaEnesKrmac
25 views