La magia-del-html

17
Por Teresa Oliver y Fernando Val La Magia del HTML jueves 27 de diciembre de 12

description

Curso de HTML para niños

Transcript of La magia-del-html

Page 1: La magia-del-html

Por Teresa Oliver y Fernando Val

La Magia del HTML

jueves 27 de diciembre de 12

Page 2: La magia-del-html

Saber Programar te da

Poderes

La Magia del HTML

jueves 27 de diciembre de 12

Page 3: La magia-del-html

https://webmaker.org/en-US/tools/#x-ray-goggles

La Magia del HTML

1. Poder de vista rayos-x

jueves 27 de diciembre de 12

Page 4: La magia-del-html

https://webmaker.org/en-US/tools/#x-ray-goggles

La Magia del HTML

2. Poder de modificar la realidad

jueves 27 de diciembre de 12

Page 5: La magia-del-html

https://thimble.webmaker.org/en-US/

La Magia del HTML

3. Poder de CREARCualquier cosa que imaginéis.

jueves 27 de diciembre de 12

Page 6: La magia-del-html

La Magia del HTML

Hay más poderesPero no los vamos a ver hoy...

jueves 27 de diciembre de 12

Page 7: La magia-del-html

La Magia del HTML

HTML, HTML5

<etiqueta>Contenido</etiqueta>

<etiqueta />

<etiqueta class=”attr1”/>

jueves 27 de diciembre de 12

Page 8: La magia-del-html

La Magia del HTML

HTML, HTML5

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Mi Web</title></head><body></body></html>

jueves 27 de diciembre de 12

Page 9: La magia-del-html

La Magia del HTML

HTML, HTML5

H1, h2, h3, h4 , h5, h6

p, em, strong

ul, ol, li

jueves 27 de diciembre de 12

Page 10: La magia-del-html

La Magia del HTML

HTML, HTML5

img<img src=”ruta-a-la-imagen.png”/>

a<a href=”ruta-del-link”/> texto visible del link</a>

jueves 27 de diciembre de 12

Page 11: La magia-del-html

La Magia del HTML

HTML, HTML5

span, div

header, footer, aside, nav

section, article

jueves 27 de diciembre de 12

Page 12: La magia-del-html

La Magia del HTML

HTML, HTML5

table,

tr, td,

th

jueves 27 de diciembre de 12

Page 13: La magia-del-html

La Magia del HTML

CSS, CSS3

Podemos controlar:- Tipos de letra, tamaño, etc.- Colores- Fondos- Tamaños de los elementos- Y mucho más...

jueves 27 de diciembre de 12

Page 14: La magia-del-html

La Magia del HTML

CSS, CSS3

Se aplica a “selectores”:

- Etiquetas HTML, “body” por ej.- Clases, class=”cabecera”- IDs, id=”pato”

jueves 27 de diciembre de 12

Page 15: La magia-del-html

La Magia del HTML

CSS, CSS3

body { font-family: Arial; font-weight: bold; font-size: 24px; font-style: italic;}

jueves 27 de diciembre de 12

Page 16: La magia-del-html

La Magia del HTML

CSS, CSS3

body { color: red; background: yellow url(“ruta-a-la-imagen.png”) top center;}

http://www.colorpicker.com/

jueves 27 de diciembre de 12

Page 17: La magia-del-html

La Magia del HTML

Proyecto libreIDEAS:- Página personal- Página de familia- Christmas- Tu afición favorita- Cuento

jueves 27 de diciembre de 12