SlideShare una empresa de Scribd logo
1 de 8
INTRODUCCIÓNY CONTEXTO TEMA 1
RAZONES PARA DISEÑARCON CSS Páginas BUENAS Cumplen los estándares del w3c Son accesibles Prevenir PROBLEMAS futuros Páginas BONITAS Se pueden conseguir diseños muy llamativos Páginas BARATAS Es un estándar del w3c, por lo cual es GRATIS www.laramarcos.com
1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB ELEMENTOS DINÁMICOS Capas que aparecen y desaparecen Elementos que se mueven al pasar por encima Menús desplegables JAVASCRIPT www.laramarcos.com
1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB FORMA CONTENIDO Párrafos Listas Tablas Imágenes Enlaces Formularios Tipos de letra Alineación Colores Distribución Decoración en las listas CSS XHTML www.laramarcos.com
1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO Dentro de la propia etiqueta de XHTML, como un atributo más <p style= “color: red”>Hola</p> Dentro del propio documento .html 	<head> 	<styletype="text/css"> 	 p { color: red; }  	</style>  	</head> www.laramarcos.com
1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO En un archivo externo 	Su extensión será .css 	La MEJOR opción .css .html  <head> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />  </head> p { color: red; }  www.laramarcos.com
1.3 diferencias formales según navegadores El motor de los navegadores es el responsable de interpretar los lenguajes HTML y CSS Unos motores son capaces de leer todas las reglas CSS y otros no Los más avanzados son los motores de Safari y Opera En cambio, IE6 contiene decenas de errores www.laramarcos.com
1.3 diferencias formales según navegadores Información de Javier Eguíluz www.laramarcos.com

Más contenido relacionado

La actualidad más candente (15)

Tutorial word 2007 diana lopez
Tutorial word 2007   diana lopezTutorial word 2007   diana lopez
Tutorial word 2007 diana lopez
 
Procesador de textos word
Procesador de textos wordProcesador de textos word
Procesador de textos word
 
Marilce Ok
Marilce OkMarilce Ok
Marilce Ok
 
Colegio josé maría velaz sillo
Colegio  josé  maría  velaz silloColegio  josé  maría  velaz sillo
Colegio josé maría velaz sillo
 
Silem htmll
Silem htmllSilem htmll
Silem htmll
 
Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3
 
0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)0.Indice de Contenidos (diseño web con CSS)
0.Indice de Contenidos (diseño web con CSS)
 
MICROSOFT WORD - II BIMESTRE
MICROSOFT WORD - II BIMESTREMICROSOFT WORD - II BIMESTRE
MICROSOFT WORD - II BIMESTRE
 
Similitudes
SimilitudesSimilitudes
Similitudes
 
0.Indice de Contenidos
0.Indice de Contenidos0.Indice de Contenidos
0.Indice de Contenidos
 
R&d
R&dR&d
R&d
 
Paginas web
Paginas webPaginas web
Paginas web
 
Páginas web actividad uno (2)
Páginas web actividad uno (2)Páginas web actividad uno (2)
Páginas web actividad uno (2)
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
Manual de word cristina mendez
Manual de word cristina mendezManual de word cristina mendez
Manual de word cristina mendez
 

Destacado

Curso Elaborando un Plan de Negocios
Curso Elaborando un Plan de NegociosCurso Elaborando un Plan de Negocios
Curso Elaborando un Plan de Negocios
Julio Pari
 

Destacado (20)

Paso apaso de html
Paso apaso de htmlPaso apaso de html
Paso apaso de html
 
2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)
 
4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)
 
0.Indice De Contenidos
0.Indice De Contenidos0.Indice De Contenidos
0.Indice De Contenidos
 
3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)
 
Buenas Prácticas de CSS
Buenas Prácticas de CSSBuenas Prácticas de CSS
Buenas Prácticas de CSS
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasos
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modular
 
Web Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de cargaWeb Performance Optimization: Mejorando el proceso de carga
Web Performance Optimization: Mejorando el proceso de carga
 
Formularios html
Formularios htmlFormularios html
Formularios html
 
Las buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones SymfonyLas buenas prácticas oficiales para aplicaciones Symfony
Las buenas prácticas oficiales para aplicaciones Symfony
 
Haml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticosHaml y Sass: HTML y CSS dietéticos
Haml y Sass: HTML y CSS dietéticos
 
HTML y CSS
HTML y CSSHTML y CSS
HTML y CSS
 
Curso Elaborando un Plan de Negocios
Curso Elaborando un Plan de NegociosCurso Elaborando un Plan de Negocios
Curso Elaborando un Plan de Negocios
 
Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2Curso HTML y CSS, parte 2
Curso HTML y CSS, parte 2
 
Maquetación Web
Maquetación WebMaquetación Web
Maquetación Web
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
El Gran Libro de Diseño Web
El Gran Libro de Diseño WebEl Gran Libro de Diseño Web
El Gran Libro de Diseño Web
 
Curso de desarrollo web para principiantes
Curso de desarrollo web para principiantesCurso de desarrollo web para principiantes
Curso de desarrollo web para principiantes
 

Similar a 1.Introduccion (diseño web con CSS)

Buenas prácticas en la codificación html
Buenas prácticas en la codificación htmlBuenas prácticas en la codificación html
Buenas prácticas en la codificación html
Lux Deray
 
Instrucciones html
Instrucciones htmlInstrucciones html
Instrucciones html
wenorro
 
Guia de clase 1 los navegadores y estructura de sitios
Guia de clase 1 los navegadores y estructura de sitiosGuia de clase 1 los navegadores y estructura de sitios
Guia de clase 1 los navegadores y estructura de sitios
sara chacon
 

Similar a 1.Introduccion (diseño web con CSS) (20)

Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Lenguaje html y css
Lenguaje html y cssLenguaje html y css
Lenguaje html y css
 
Html
HtmlHtml
Html
 
Presentación
PresentaciónPresentación
Presentación
 
Conceptos básicos HTML
Conceptos básicos HTMLConceptos básicos HTML
Conceptos básicos HTML
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
Buenas prácticas en la codificación html
Buenas prácticas en la codificación htmlBuenas prácticas en la codificación html
Buenas prácticas en la codificación html
 
Conceptos html
Conceptos  htmlConceptos  html
Conceptos html
 
Instrucciones html
Instrucciones htmlInstrucciones html
Instrucciones html
 
Css
CssCss
Css
 
Melanie gonzález
Melanie gonzálezMelanie gonzález
Melanie gonzález
 
Guia de clase 1 los navegadores y estructura de sitios
Guia de clase 1 los navegadores y estructura de sitiosGuia de clase 1 los navegadores y estructura de sitios
Guia de clase 1 los navegadores y estructura de sitios
 
DISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTEDISEÑO WEB 2020-2021 - 1ª PARTE
DISEÑO WEB 2020-2021 - 1ª PARTE
 

Último

Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
AnnimoUno1
 

Último (11)

Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 

1.Introduccion (diseño web con CSS)

  • 2. RAZONES PARA DISEÑARCON CSS Páginas BUENAS Cumplen los estándares del w3c Son accesibles Prevenir PROBLEMAS futuros Páginas BONITAS Se pueden conseguir diseños muy llamativos Páginas BARATAS Es un estándar del w3c, por lo cual es GRATIS www.laramarcos.com
  • 3. 1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB ELEMENTOS DINÁMICOS Capas que aparecen y desaparecen Elementos que se mueven al pasar por encima Menús desplegables JAVASCRIPT www.laramarcos.com
  • 4. 1.1 ELEMENTOS QUE COMPONEN LAS PÁGINAS WEB FORMA CONTENIDO Párrafos Listas Tablas Imágenes Enlaces Formularios Tipos de letra Alineación Colores Distribución Decoración en las listas CSS XHTML www.laramarcos.com
  • 5. 1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO Dentro de la propia etiqueta de XHTML, como un atributo más <p style= “color: red”>Hola</p> Dentro del propio documento .html <head> <styletype="text/css"> p { color: red; } </style> </head> www.laramarcos.com
  • 6. 1.2 MÉTODOS PARA UNIR FORMA Y CONTENIDO En un archivo externo Su extensión será .css La MEJOR opción .css .html <head> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head> p { color: red; } www.laramarcos.com
  • 7. 1.3 diferencias formales según navegadores El motor de los navegadores es el responsable de interpretar los lenguajes HTML y CSS Unos motores son capaces de leer todas las reglas CSS y otros no Los más avanzados son los motores de Safari y Opera En cambio, IE6 contiene decenas de errores www.laramarcos.com
  • 8. 1.3 diferencias formales según navegadores Información de Javier Eguíluz www.laramarcos.com