Bienvenida a el diplomado
-
Upload
luis-jhoham-venegas-tobar -
Category
Documents
-
view
232 -
download
2
description
Transcript of Bienvenida a el diplomado
![Page 1: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/1.jpg)
![Page 2: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/2.jpg)
HTML5 Y CSS3Aplicaciones y optimización para web
![Page 3: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/3.jpg)
• El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fué concebido para otros usos (científicos sobretodo), distinto a los actuales, mucho más amplios.
• Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de tablas imagenes transparentes para ajustarlas, utilización de etiquetas que no son estádares del HTML y otras. Estas "trampas" han causado a menudo problemas en las páginas a la hora de su visualización en distintas plataformas.
INTRODUCCIÓN
![Page 4: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/4.jpg)
Diseños antiguos
![Page 5: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/5.jpg)
![Page 6: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/6.jpg)
Diseños Nuevos
![Page 7: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/7.jpg)
Ejemplo 1
![Page 8: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/8.jpg)
Ejemplo2
![Page 9: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/9.jpg)
• Para definir un estilo se utilizan atributos como font-size,text-decoration... seguidos de dos puntos y el valor que le deseemos asignar. Podemos definir un estilo a base de definir muchos atributos separados por punto y coma
Ejemplo:font-size: 10pt; text-decoration: underline; color: black
Sintaxis CSS
![Page 10: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/10.jpg)
• Para definir el estilo de una etiqueta se escribe la etiqueta seguida de la lista de atributos encerrados entre llaves.
Ejemplo:
H1{text-align: center; color:black}
Como escribir un Style
![Page 11: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/11.jpg)
body {
margin:0;
padding:0;
text-align:center;
font-family:Verdana, Geneva, sans-serif;
background-image:url(../images/bg_main.jpg);
background-repeat:repeat-x;
}
div#wrapper{
width:960px;
margin:0 auto;
text-align:left;
}
div#header{
margin:0;
padding:0;
}
div#header div#general{
height:25px;
margin:0;
padding:10px 0;
}
Ejemplos
![Page 12: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/12.jpg)
http://www.blooberry.com/indexdot/css/propindex/all.htm
Listado de propiedades
![Page 13: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/13.jpg)
Primeros acercamientos
Para ver esta película, debedisponer de QuickTime™ y de
un descompresor .
![Page 14: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/14.jpg)
• Realice los siguientes figuras con 3 imágenes de su carpeta de imágenes y css
Ejercicios
![Page 15: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/15.jpg)
![Page 16: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/16.jpg)
![Page 17: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/17.jpg)
![Page 18: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/18.jpg)
Proyecto personal
![Page 19: Bienvenida a el diplomado](https://reader030.fdocumento.com/reader030/viewer/2022020200/568bef4c1a28ab89338bb16c/html5/thumbnails/19.jpg)