SlideShare une entreprise Scribd logo
1  sur  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

Contenu connexe

Tendances (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
 

En vedette

2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)larasaregune
 
4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)4.Estructura (diseño con CSS)
4.Estructura (diseño con CSS)larasaregune
 
0.Indice De Contenidos
0.Indice De Contenidos0.Indice De Contenidos
0.Indice De Contenidoslarasaregune
 
3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)3.Propiedades (diseño con CSS)
3.Propiedades (diseño con CSS)larasaregune
 
Buenas Prácticas de CSS
Buenas Prácticas de CSSBuenas Prácticas de CSS
Buenas Prácticas de CSSJavier España
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosYadith Gomez Nolasco
 
CSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y ModularCSS - Arquitectura Escalable y Modular
CSS - Arquitectura Escalable y Modularrodboc
 
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 cargaJesus Pernas Alonso
 
Formularios html
Formularios htmlFormularios html
Formularios htmlArtmio
 
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 Symfonysymfony_bcn
 
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éticosDAVID GRILLI
 
Curso Elaborando un Plan de Negocios
Curso Elaborando un Plan de NegociosCurso Elaborando un Plan de Negocios
Curso Elaborando un Plan de NegociosJulio Pari
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSSManuel Razzari
 
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 WebRebelBangarang
 
Curso de desarrollo web para principiantes
Curso de desarrollo web para principiantesCurso de desarrollo web para principiantes
Curso de desarrollo web para principiantesAlexandro Colorado
 

En vedette (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
 

Similaire à 1.Introduccion (diseño web con CSS)

Similaire à 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
 

Dernier

guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan JosephBRAYANJOSEPHPEREZGOM
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...silviayucra2
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíassuserf18419
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx241521559
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)GDGSucre
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfJulian Lamprea
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricKeyla Dolores Méndez
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxLolaBunny11
 
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 JUNITMaricarmen Sánchez Ruiz
 

Dernier (10)

guía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Josephguía de registro de slideshare por Brayan Joseph
guía de registro de slideshare por Brayan Joseph
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
POWER POINT YUCRAElabore una PRESENTACIÓN CORTA sobre el video película: La C...
 
Trabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnologíaTrabajo Mas Completo De Excel en clase tecnología
Trabajo Mas Completo De Excel en clase tecnología
 
Proyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptxProyecto integrador. Las TIC en la sociedad S4.pptx
Proyecto integrador. Las TIC en la sociedad S4.pptx
 
International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)International Women's Day Sucre 2024 (IWD)
International Women's Day Sucre 2024 (IWD)
 
Desarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdfDesarrollo Web Moderno con Svelte 2024.pdf
Desarrollo Web Moderno con Svelte 2024.pdf
 
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft FabricGlobal Azure Lima 2024 - Integración de Datos con Microsoft Fabric
Global Azure Lima 2024 - Integración de Datos con Microsoft Fabric
 
Presentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptxPresentación guía sencilla en Microsoft Excel.pptx
Presentación guía sencilla en Microsoft Excel.pptx
 
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
 

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