SlideShare una empresa de Scribd logo

1.Introduccion (diseño con CSS)

•Descargar como PPTX, PDF•
•
L
larasaregune

intro

DiseñoTecnologíaEducación
1 de 8
INTRODUCCIÓNY CONTEXTO TEMA 1 www.laramarcos.com
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

Recomendados

1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)larasaregune
 
4.2. editor html
4.2. editor html4.2. editor html
4.2. editor htmlCARLOSRGUDCA
 
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
 
Diapocss
DiapocssDiapocss
DiapocssYosi Farfán Hurtado
 
Word nombres
Word nombresWord nombres
Word nombresdrake_bell
 
Tutorial word 2007 diana lopez
Tutorial word 2007 diana lopezTutorial word 2007 diana lopez
Tutorial word 2007 diana lopezdianalopezl
 
Elementos de la ventana Word.
Elementos de la ventana Word. Elementos de la ventana Word.
Elementos de la ventana Word. Alejandra Luna Lugo
 
Word nombres 1
Word nombres 1Word nombres 1
Word nombres 1drake_bell
 

Recomendados

1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)1.Introduccion (diseño web con CSS)
1.Introduccion (diseño web con CSS)larasaregune
 
4.2. editor html
4.2. editor html4.2. editor html
4.2. editor htmlCARLOSRGUDCA
 
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
 
Diapocss
DiapocssDiapocss
DiapocssYosi Farfán Hurtado
 
Word nombres
Word nombresWord nombres
Word nombresdrake_bell
 
Tutorial word 2007 diana lopez
Tutorial word 2007 diana lopezTutorial word 2007 diana lopez
Tutorial word 2007 diana lopezdianalopezl
 
Elementos de la ventana Word.
Elementos de la ventana Word. Elementos de la ventana Word.
Elementos de la ventana Word. Alejandra Luna Lugo
 
Word nombres 1
Word nombres 1Word nombres 1
Word nombres 1drake_bell
 
Trabajo práctico nº 5
Trabajo práctico nº 5Trabajo práctico nº 5
Trabajo práctico nº 5samirnasif2012
 
Marilce Ok
Marilce OkMarilce Ok
Marilce Okjtayoycmgx100pre
 
Elementos de la ventana de word
Elementos de la ventana de wordElementos de la ventana de word
Elementos de la ventana de wordAndrea Salazar Ojeda
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantallaCristhian Camelo
 
Reticulas para pantalla
Reticulas para pantallaReticulas para pantalla
Reticulas para pantallasalolaya
 
AMBIENTE DE POWER POINT
AMBIENTE DE POWER POINT AMBIENTE DE POWER POINT
AMBIENTE DE POWER POINT fernandaescalante03
 
Barras de herramientas
Barras de herramientasBarras de herramientas
Barras de herramientasKAROLINAYKATHERINE
 
ACTIVIDAD 2
ACTIVIDAD 2ACTIVIDAD 2
ACTIVIDAD 2Lupiita Riios
 
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)larasaregune
 
1A actividad 2.8 edición y formato
1A actividad 2.8 edición y formato1A actividad 2.8 edición y formato
1A actividad 2.8 edición y formatoDENIRAMIREZANDRADE
 
1B Actividad 2.8 edición y formato
1B Actividad 2.8 edición y formato1B Actividad 2.8 edición y formato
1B Actividad 2.8 edición y formatoDENIRAMIREZANDRADE
 
Similitudes
SimilitudesSimilitudes
SimilitudesYdal jhohana
 
Trabajo practico nº14
Trabajo practico nº14Trabajo practico nº14
Trabajo practico nº14germi98
 
Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Rubén Martín Moreno (鲁本)
 
Silem htmll
Silem htmllSilem htmll
Silem htmlllindasilem
 
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
 
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
 
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
 
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
 

Más contenido relacionado

La actualidad más candente

Trabajo práctico nº 5
Trabajo práctico nº 5Trabajo práctico nº 5
Trabajo práctico nº 5samirnasif2012
 
Reticulas para pantalla
Reticulas para pantallaReticulas para pantalla
Reticulas para pantallasalolaya
 
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)larasaregune
 
1A actividad 2.8 edición y formato
1A actividad 2.8 edición y formato1A actividad 2.8 edición y formato
1A actividad 2.8 edición y formatoDENIRAMIREZANDRADE
 
1B Actividad 2.8 edición y formato
1B Actividad 2.8 edición y formato1B Actividad 2.8 edición y formato
1B Actividad 2.8 edición y formatoDENIRAMIREZANDRADE
 
Trabajo practico nº14
Trabajo practico nº14Trabajo practico nº14
Trabajo practico nº14germi98
 

La actualidad más candente (15)

Trabajo práctico nº 5
Trabajo práctico nº 5Trabajo práctico nº 5
Trabajo práctico nº 5
 
Marilce Ok
Marilce OkMarilce Ok
Marilce Ok
 
Elementos de la ventana de word
Elementos de la ventana de wordElementos de la ventana de word
Elementos de la ventana de word
 
Retículas para pantalla
Retículas para pantallaRetículas para pantalla
Retículas para pantalla
 
Reticulas para pantalla
Reticulas para pantallaReticulas para pantalla
Reticulas para pantalla
 
AMBIENTE DE POWER POINT
AMBIENTE DE POWER POINT AMBIENTE DE POWER POINT
AMBIENTE DE POWER POINT
 
Barras de herramientas
Barras de herramientasBarras de herramientas
Barras de herramientas
 
ACTIVIDAD 2
ACTIVIDAD 2ACTIVIDAD 2
ACTIVIDAD 2
 
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)
 
1A actividad 2.8 edición y formato
1A actividad 2.8 edición y formato1A actividad 2.8 edición y formato
1A actividad 2.8 edición y formato
 
1B Actividad 2.8 edición y formato
1B Actividad 2.8 edición y formato1B Actividad 2.8 edición y formato
1B Actividad 2.8 edición y formato
 
Similitudes
SimilitudesSimilitudes
Similitudes
 
Trabajo practico nº14
Trabajo practico nº14Trabajo practico nº14
Trabajo practico nº14
 
Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3Taller XHTML y CSS3 - CSS3
Taller XHTML y CSS3 - CSS3
 
Silem htmll
Silem htmllSilem htmll
Silem htmll
 

Destacado

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

Destacado (20)

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
 
2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)2.Sintaxis (diseño con CSS)
2.Sintaxis (diseño con CSS)
 
El posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasosEl posicionamiento explicado en 9 pasos
El posicionamiento explicado en 9 pasos
 
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
 
Paso apaso de html
Paso apaso de htmlPaso apaso de html
Paso apaso de html
 
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
 

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

Presentación
PresentaciónPresentación
Presentaciónaynosk6
 
Conceptos básicos HTML
Conceptos básicos HTMLConceptos básicos HTML
Conceptos básicos HTMLAinhoaec01
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTMLlidiaauz
 
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 htmlLux Deray
 
Presenpabo
PresenpaboPresenpabo
Presenpabopabobdp
 
Diseño y Maquetacion
Diseño y MaquetacionDiseño y Maquetacion
Diseño y Maquetacionvictoremr
 
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 sitiossara chacon
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdfYolitaGaona
 
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 CSSssuseraf13d4
 

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

Presentación
PresentaciónPresentación
Presentación
 
Html
HtmlHtml
Html
 
Conceptos básicos HTML
Conceptos básicos HTMLConceptos básicos HTML
Conceptos básicos HTML
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
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
 
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
 
Presenpabo
PresenpaboPresenpabo
Presenpabo
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Css
CssCss
Css
 
Diseño y Maquetacion
Diseño y MaquetacionDiseño y Maquetacion
Diseño y Maquetacion
 
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
 
Css
CssCss
Css
 
Accesibilidad
Accesibilidad Accesibilidad
Accesibilidad
 
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
 
Informartica parcial 2
Informartica parcial 2Informartica parcial 2
Informartica parcial 2
 

Último

INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfBrbara57940
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
La Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráficoLa Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráficoCristianLobo10
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfoliosofiospina94
 
414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptxeldermishti
 
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfTríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfPowerRayo
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALEvaMaraMorenoLago1
 
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdfCATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdftortillasdemaizjf2
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Iirenecarmona12
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesLuis Fernando Salgado
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkksAnexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkkscristinacastro892534
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....estefaniaortizsalina
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosCristianGmez22034
 
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...chechei12040303
 

Último (20)

INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdfINICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
INICIOS DEL MOVIMIENTO MODERNO 1900-1930.pdf
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHEDIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
DIAGNOSTICO URBANO DE DE LA ISLA DE COCHE
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
La Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráficoLa Bauhaus y la nueva tipografía en el diseño gráfico
La Bauhaus y la nueva tipografía en el diseño gráfico
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Sofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design PortfolioSofia Ospina Architecture and Design Portfolio
Sofia Ospina Architecture and Design Portfolio
 
414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx414414508-Diseno-de-Coberturas-Metalicas.pptx
414414508-Diseno-de-Coberturas-Metalicas.pptx
 
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdfTríptico-en-homenaje-por-el-día-de-la-madre.pdf
Tríptico-en-homenaje-por-el-día-de-la-madre.pdf
 
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNALPOESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
POESÍA ERÓTICA DEL SIGLO XVIII - SERIA Y CARNAL
 
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdfCATALOGO 2024 DIA DE LA MADRE, presentación.pdf
CATALOGO 2024 DIA DE LA MADRE, presentación.pdf
 
tema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos Itema ilustrado 9 el inicio del reinado de juan carlos I
tema ilustrado 9 el inicio del reinado de juan carlos I
 
Fundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principalesFundamentos de la Ergonomía y sus características principales
Fundamentos de la Ergonomía y sus características principales
 
Anexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkksAnexo Nivel 3 Ficha Lectura pptjsbdkks
Anexo Nivel 3 Ficha Lectura pptjsbdkks
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
GRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivosGRUPO 1.pptx problemas oportunidades objetivos
GRUPO 1.pptx problemas oportunidades objetivos
 
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
Apuntes de criterios estrcuturales, calculo de trabes y contratrabes de concr...
 

1.Introduccion (diseño con CSS)

  • 1. INTRODUCCIÓNY CONTEXTO TEMA 1 www.laramarcos.com
  • 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