SlideShare una empresa de Scribd logo
1 de 4
“Año de la Diversificación Productiva y del Fortalecimiento de la Educación"
COMPUTACIÓN E INFORMÁTICA
Gestión de Aplicaciones para Internet y Producción Multimedia
DISEÑO WEB
DOCENTE : HANCCO QUISPE, Elar E.
ESTUDIANTE : CATUNTA LARICO, Dina Carolina.
CICLO ACADÉMICO : V.
SEMESTRE : V (2015-I)
Juliaca - Puno – Perú.
EJERCICIO NUMERO 2
Empezaremos en este caso con nuestro CSS
En caso la llamaremos estilos .css
Bueno empecemos a crear nuestras capas empezaremos por la capa que contendrá
dentro de ella a todas las capas que utilizaremos en adelante:
Como ven en la anterior imagen empezamos con “#” lo cual nos indica que es una capa
de tipo ID que quiere decir esto, quiere decir que cuando tengamos q llamar a nuestro
css en html pues tendremos que utilizar la siguiente etiqueta <div id = “ ” >
Como verán utlilizamos las propiedades que tienen que estar dentro de las llaves como
las que en la imagen anterior:
 Width: que le asigna a la capa un ancho que en este caso es de 900px.
 Background: que le asigana un color de fondo a la capa.
 Margin: que establece los márgenes laterales de la capa con respecto al
navegador en este caso ponemos auto para hacer que la capa se centre.
Ahora vamos con la capa que contendrá nuestro encabezado
Bueno aquí les explicare para que sirven todas las propiedades que utilizamos en la capa
que ven en la parte superior:
Boder: que le agrega a la capa un borde solido de 3px de color negro(#000).
Height: que le asigna a la capa una altura de 200px en este caso.
Background-color: que le asigna a la capa un color de fondo.
Text-aling: que hace que todo texto que se encuentra dentro de la capa en este caso se
centre (center).
Ahora crearemos la capa que flotara a la izquierda superior de nuestro cuerpo
Como verán le agregamos nuevas propiedades:
Margin: que le asigna un margen superior en este caso un determinado margen a los
lados de la capa .
Width: que le asigna a la capa un ancho que en este caso es de 205px.
Position: que le asigna a la capa una posición determinada.
Ahora crearemos la capa que estará ubicada en la parte inferior izquierda de nuestro
cuerpo.
Como verán le agregamos nuevas propiedades:
Float: lo cual indica que la capa creada flotara al lado izquierdo (left) de nuestra capa.
Ahora creamos la capa flotara al lado derecho de nuestro cuerpo.
Aquí no utilizamos propiedades nuevas así q crearemos la capa que se situara en la parte
inferior de nuestro cuerpo que se llamara FOOTER.
Ya está terminamos nuestro css.
Ahora tendremos que digitar el siguiente código para llamar a nuestro css en html.
Una vez terminado todo esto veamos en un navegador el resultado.

Más contenido relacionado

Destacado

Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...
Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...
Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...Aurelis Rosales
 
2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draft
2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draft2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draft
2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draftMARIUS EUGEN OPRAN
 
I место команда "Шмель" БелГУ, Белгород
I место команда "Шмель"  БелГУ, БелгородI место команда "Шмель"  БелГУ, Белгород
I место команда "Шмель" БелГУ, БелгородАндрей Изюмников
 
Composicion quimica de la leche
Composicion quimica de la lecheComposicion quimica de la leche
Composicion quimica de la lecheJuaniix TQ
 
Encuesta - CADE por la Educación 2015
Encuesta - CADE por la Educación 2015Encuesta - CADE por la Educación 2015
Encuesta - CADE por la Educación 2015IPAE
 

Destacado (8)

Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...
Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...
Wiki-Propiedades de los materiales,INGENIERÍA MECÁNICA Venezuela , 2014 LUIS ...
 
2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draft
2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draft2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draft
2010.08.03 Raport catre Robert Madelin ref. Digital Agenda draft
 
I место команда "Шмель" БелГУ, Белгород
I место команда "Шмель"  БелГУ, БелгородI место команда "Шмель"  БелГУ, Белгород
I место команда "Шмель" БелГУ, Белгород
 
ijcsit2015060389
ijcsit2015060389ijcsit2015060389
ijcsit2015060389
 
Presentation for annual healthwatch conference complaints moving forward...
Presentation for annual healthwatch conference   complaints moving forward...Presentation for annual healthwatch conference   complaints moving forward...
Presentation for annual healthwatch conference complaints moving forward...
 
Composicion quimica de la leche
Composicion quimica de la lecheComposicion quimica de la leche
Composicion quimica de la leche
 
Encuesta - CADE por la Educación 2015
Encuesta - CADE por la Educación 2015Encuesta - CADE por la Educación 2015
Encuesta - CADE por la Educación 2015
 
ACCOUNTS
ACCOUNTSACCOUNTS
ACCOUNTS
 

Similar a Ejercicio2 (20)

Ejercicio 3
Ejercicio 3Ejercicio 3
Ejercicio 3
 
Pagina web con maquetacion
Pagina web con maquetacionPagina web con maquetacion
Pagina web con maquetacion
 
Pagina web con maquetacion
Pagina web con maquetacionPagina web con maquetacion
Pagina web con maquetacion
 
Uso de after y diseño de los cards
Uso de after y diseño de los cardsUso de after y diseño de los cards
Uso de after y diseño de los cards
 
Agregar una imagen
Agregar una imagenAgregar una imagen
Agregar una imagen
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
Canvas
CanvasCanvas
Canvas
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Agregar una imagen
Agregar una imagenAgregar una imagen
Agregar una imagen
 
Luis eduardo mora osejo
Luis eduardo mora osejoLuis eduardo mora osejo
Luis eduardo mora osejo
 
tutorial adriana multimedia
tutorial adriana multimedia tutorial adriana multimedia
tutorial adriana multimedia
 
Scribus - Trabajando con capas
Scribus - Trabajando con capasScribus - Trabajando con capas
Scribus - Trabajando con capas
 
Scribus - Trabajando con capas2
Scribus - Trabajando con capas2Scribus - Trabajando con capas2
Scribus - Trabajando con capas2
 
Capas en html
Capas en htmlCapas en html
Capas en html
 
Teoria 2
Teoria 2Teoria 2
Teoria 2
 
Maquetacion de pagina web
Maquetacion de pagina webMaquetacion de pagina web
Maquetacion de pagina web
 
Canvas
CanvasCanvas
Canvas
 
Como subir una_imagen_eclipse
Como subir una_imagen_eclipseComo subir una_imagen_eclipse
Como subir una_imagen_eclipse
 
Presentación 16
Presentación 16Presentación 16
Presentación 16
 

Último

programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para eventoDiegoMtsS
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoFundación YOD YOD
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxAna Fernandez
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIACarlos Campaña Montenegro
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfAngélica Soledad Vega Ramírez
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADOJosé Luis Palma
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docxAleParedes11
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSjlorentemartos
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticosisabeltrejoros
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.amayarogel
 
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleJonathanCovena1
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzprofefilete
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptELENA GALLARDO PAÚLS
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinavergarakarina022
 
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxPRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxinformacionasapespu
 

Último (20)

programa dia de las madres 10 de mayo para evento
programa dia de las madres 10 de mayo  para eventoprograma dia de las madres 10 de mayo  para evento
programa dia de las madres 10 de mayo para evento
 
Heinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativoHeinsohn Privacidad y Ciberseguridad para el sector educativo
Heinsohn Privacidad y Ciberseguridad para el sector educativo
 
RETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docxRETO MES DE ABRIL .............................docx
RETO MES DE ABRIL .............................docx
 
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIARAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
RAIZ CUADRADA Y CUBICA PARA NIÑOS DE PRIMARIA
 
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdfSELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
SELECCIÓN DE LA MUESTRA Y MUESTREO EN INVESTIGACIÓN CUALITATIVA.pdf
 
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADODECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
DECÁGOLO DEL GENERAL ELOY ALFARO DELGADO
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docxGLOSAS  Y PALABRAS ACTO 2 DE ABRIL 2024.docx
GLOSAS Y PALABRAS ACTO 2 DE ABRIL 2024.docx
 
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOSTEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
TEMA 13 ESPAÑA EN DEMOCRACIA:DISTINTOS GOBIERNOS
 
Presentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza MultigradoPresentacion Metodología de Enseñanza Multigrado
Presentacion Metodología de Enseñanza Multigrado
 
texto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticostexto argumentativo, ejemplos y ejercicios prácticos
texto argumentativo, ejemplos y ejercicios prácticos
 
La Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdfLa Trampa De La Felicidad. Russ-Harris.pdf
La Trampa De La Felicidad. Russ-Harris.pdf
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
Introducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo SostenibleIntroducción:Los objetivos de Desarrollo Sostenible
Introducción:Los objetivos de Desarrollo Sostenible
 
Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.Defendamos la verdad. La defensa es importante.
Defendamos la verdad. La defensa es importante.
 
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyzel CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
el CTE 6 DOCENTES 2 2023-2024abcdefghijoklmnñopqrstuvwxyz
 
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.pptDE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
DE LAS OLIMPIADAS GRIEGAS A LAS DEL MUNDO MODERNO.ppt
 
codigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karinacodigos HTML para blogs y paginas web Karina
codigos HTML para blogs y paginas web Karina
 
Power Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptxPower Point: "Defendamos la verdad".pptx
Power Point: "Defendamos la verdad".pptx
 
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptxPRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
PRIMER SEMESTRE 2024 ASAMBLEA DEPARTAMENTAL.pptx
 

Ejercicio2

  • 1. “Año de la Diversificación Productiva y del Fortalecimiento de la Educación" COMPUTACIÓN E INFORMÁTICA Gestión de Aplicaciones para Internet y Producción Multimedia DISEÑO WEB DOCENTE : HANCCO QUISPE, Elar E. ESTUDIANTE : CATUNTA LARICO, Dina Carolina. CICLO ACADÉMICO : V. SEMESTRE : V (2015-I) Juliaca - Puno – Perú.
  • 2. EJERCICIO NUMERO 2 Empezaremos en este caso con nuestro CSS En caso la llamaremos estilos .css Bueno empecemos a crear nuestras capas empezaremos por la capa que contendrá dentro de ella a todas las capas que utilizaremos en adelante: Como ven en la anterior imagen empezamos con “#” lo cual nos indica que es una capa de tipo ID que quiere decir esto, quiere decir que cuando tengamos q llamar a nuestro css en html pues tendremos que utilizar la siguiente etiqueta <div id = “ ” > Como verán utlilizamos las propiedades que tienen que estar dentro de las llaves como las que en la imagen anterior:  Width: que le asigna a la capa un ancho que en este caso es de 900px.  Background: que le asigana un color de fondo a la capa.  Margin: que establece los márgenes laterales de la capa con respecto al navegador en este caso ponemos auto para hacer que la capa se centre. Ahora vamos con la capa que contendrá nuestro encabezado Bueno aquí les explicare para que sirven todas las propiedades que utilizamos en la capa que ven en la parte superior: Boder: que le agrega a la capa un borde solido de 3px de color negro(#000). Height: que le asigna a la capa una altura de 200px en este caso. Background-color: que le asigna a la capa un color de fondo.
  • 3. Text-aling: que hace que todo texto que se encuentra dentro de la capa en este caso se centre (center). Ahora crearemos la capa que flotara a la izquierda superior de nuestro cuerpo Como verán le agregamos nuevas propiedades: Margin: que le asigna un margen superior en este caso un determinado margen a los lados de la capa . Width: que le asigna a la capa un ancho que en este caso es de 205px. Position: que le asigna a la capa una posición determinada. Ahora crearemos la capa que estará ubicada en la parte inferior izquierda de nuestro cuerpo. Como verán le agregamos nuevas propiedades: Float: lo cual indica que la capa creada flotara al lado izquierdo (left) de nuestra capa. Ahora creamos la capa flotara al lado derecho de nuestro cuerpo. Aquí no utilizamos propiedades nuevas así q crearemos la capa que se situara en la parte inferior de nuestro cuerpo que se llamara FOOTER.
  • 4. Ya está terminamos nuestro css. Ahora tendremos que digitar el siguiente código para llamar a nuestro css en html. Una vez terminado todo esto veamos en un navegador el resultado.