Este documento habla sobre los poderes que da saber programar en HTML. Explica que HTML permite tener un poder de vista de rayos X para inspeccionar páginas web y el poder de modificar la realidad. También da el poder de crear cualquier cosa que se imagine usando herramientas como Thimble. Luego explica conceptos básicos de HTML como etiquetas, cabeceras y listas, y cómo agregar imágenes e hipervínculos. También cubre conceptos de CSS para controlar aspectos de diseño como tipos de letra, colores y tamaños.
1. La Magia del HTML
Por Teresa Oliver y Fernando Val
jueves 27 de diciembre de 12
2. La Magia del HTML
Saber Programar te da
Poderes
jueves 27 de diciembre de 12
3. La Magia del HTML
1. Poder de vista rayos-x
https://webmaker.org/en-US/tools/#x-ray-goggles
jueves 27 de diciembre de 12
4. La Magia del HTML
2. Poder de modificar la
realidad
https://webmaker.org/en-US/tools/#x-ray-goggles
jueves 27 de diciembre de 12
5. La Magia del HTML
3. Poder de CREAR
Cualquier cosa que imaginéis.
https://thimble.webmaker.org/en-US/
jueves 27 de diciembre de 12
6. La Magia del HTML
Hay más poderes
Pero no los vamos a ver hoy...
jueves 27 de diciembre de 12
7. La Magia del HTML
HTML, HTML5
<etiqueta>Contenido</etiqueta>
<etiqueta />
<etiqueta class=”attr1”/>
jueves 27 de diciembre de 12
8. 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
9. La Magia del HTML
HTML, HTML5
H1, h2, h3, h4 , h5, h6
p, em, strong
ul, ol, li
jueves 27 de diciembre de 12
10. 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
11. La Magia del HTML
HTML, HTML5
span, div
header, footer, aside, nav
section, article
jueves 27 de diciembre de 12
12. La Magia del HTML
HTML, HTML5
table,
tr, td,
th
jueves 27 de diciembre de 12
13. 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
14. 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
15. 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
16. 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
17. La Magia del HTML
Proyecto libre
IDEAS:
- Página personal
- Página de familia
- Christmas
- Tu afición favorita
- Cuento
jueves 27 de diciembre de 12