SlideShare una empresa de Scribd logo
1 de 5
“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 3
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 4 capas que irán alineadas de manera vertical empecemos por la
primera
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 segunda capa
Como verán le agregamos nuevas propiedades:
Float: lo cual indica que la capa creada flotara al lado izquierdo (left) de nuestra capa.
Margin-top: que le asigna a la capa un margen superior en este caso de 5px.
Ahora creamos la tercera capa
Como verán le agregamos nuevas propiedades:
Padding: que le asigna a la capa un espacio de 5px.
Ahora 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.
Ejercicio 3

Más contenido relacionado

Destacado (12)

Millors fotos
Millors fotosMillors fotos
Millors fotos
 
Globo12
Globo12Globo12
Globo12
 
If
IfIf
If
 
practica 1 ing.de metodos
practica 1 ing.de metodospractica 1 ing.de metodos
practica 1 ing.de metodos
 
Recrear
RecrearRecrear
Recrear
 
Doc1
Doc1Doc1
Doc1
 
Mate2 a
Mate2 aMate2 a
Mate2 a
 
5 3B
5 3B5 3B
5 3B
 
06-12-2011 El Gobernador Guillermo Padrés Elías, acompañado del Subsecretario...
06-12-2011 El Gobernador Guillermo Padrés Elías, acompañado del Subsecretario...06-12-2011 El Gobernador Guillermo Padrés Elías, acompañado del Subsecretario...
06-12-2011 El Gobernador Guillermo Padrés Elías, acompañado del Subsecretario...
 
J339tfinalproject
J339tfinalprojectJ339tfinalproject
J339tfinalproject
 
2011 takvimi
2011 takvimi2011 takvimi
2011 takvimi
 
Final presentaion
Final presentaionFinal presentaion
Final presentaion
 

Similar a Ejercicio 3

Pagina web con maquetacion
Pagina web con maquetacionPagina web con maquetacion
Pagina web con maquetaciondhfiushj
 
Pagina web con maquetacion
Pagina web con maquetacionPagina web con maquetacion
Pagina web con maquetacionhjxbfajds
 
Scribus - Trabajando con capas
Scribus - Trabajando con capasScribus - Trabajando con capas
Scribus - Trabajando con capasMedardo Aparcana
 
Scribus - Trabajando con capas2
Scribus - Trabajando con capas2Scribus - Trabajando con capas2
Scribus - Trabajando con capas2Medardo Aparcana
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimpInnove Host
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimpinnovesoft
 
Luis eduardo mora osejo
Luis eduardo mora osejoLuis eduardo mora osejo
Luis eduardo mora osejochiikyziita
 
tutorial adriana multimedia
tutorial adriana multimedia tutorial adriana multimedia
tutorial adriana multimedia chiikyziita
 
Agregar una imagen
Agregar una imagenAgregar una imagen
Agregar una imagenEsmedc20
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Carlos Ccalla
 
Técnicas avanzadas y ajustes de capas
Técnicas avanzadas y ajustes de capasTécnicas avanzadas y ajustes de capas
Técnicas avanzadas y ajustes de capasYiixezita Molzhiitu
 
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 cardsCarlosMora267870
 
Funciones definidas por_el_usuario_y_variables_superglobales
Funciones definidas por_el_usuario_y_variables_superglobalesFunciones definidas por_el_usuario_y_variables_superglobales
Funciones definidas por_el_usuario_y_variables_superglobalesCarlosUribe93
 

Similar a Ejercicio 3 (20)

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
 
Canvas
CanvasCanvas
Canvas
 
Capas en html
Capas en htmlCapas en html
Capas en html
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
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
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimp
 
Tuto pag web_gimp
Tuto pag web_gimpTuto pag web_gimp
Tuto pag web_gimp
 
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
 
Teoria 2
Teoria 2Teoria 2
Teoria 2
 
Agregar una imagen
Agregar una imagenAgregar una imagen
Agregar una imagen
 
Canvas
CanvasCanvas
Canvas
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Técnicas avanzadas y ajustes de capas
Técnicas avanzadas y ajustes de capasTécnicas avanzadas y ajustes de capas
Técnicas avanzadas y ajustes de capas
 
tutorial retrato múltiple
tutorial retrato múltipletutorial retrato múltiple
tutorial retrato múltiple
 
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
 
Funciones definidas por_el_usuario_y_variables_superglobales
Funciones definidas por_el_usuario_y_variables_superglobalesFunciones definidas por_el_usuario_y_variables_superglobales
Funciones definidas por_el_usuario_y_variables_superglobales
 

Último

LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...JAVIER SOLIS NOYOLA
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxMaritzaRetamozoVera
 
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
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxdkmeza
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICAÁngel Encinas
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxnandoapperscabanilla
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoJosDanielEstradaHern
 
Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularMooPandrea
 
Criterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficiosCriterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficiosJonathanCovena1
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfNancyLoaa
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioELIASAURELIOCHAVEZCA1
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptxdeimerhdz21
 
plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfenelcielosiempre
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAEl Fortí
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdfDemetrio Ccesa Rayme
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 

Último (20)

Unidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la InvestigaciónUnidad 3 | Metodología de la Investigación
Unidad 3 | Metodología de la Investigación
 
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
LABERINTOS DE DISCIPLINAS DEL PENTATLÓN OLÍMPICO MODERNO. Por JAVIER SOLIS NO...
 
Sesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docxSesión de aprendizaje Planifica Textos argumentativo.docx
Sesión de aprendizaje Planifica Textos argumentativo.docx
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática4    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática4    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática4 MPG 2024 Ccesa007.pdf
 
Estrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptxEstrategias de enseñanza-aprendizaje virtual.pptx
Estrategias de enseñanza-aprendizaje virtual.pptx
 
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICABIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
BIOMETANO SÍ, PERO NO ASÍ. LA NUEVA BURBUJA ENERGÉTICA
 
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptxORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
ORGANIZACIÓN SOCIAL INCA EN EL TAHUANTINSUYO.pptx
 
actividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° gradoactividades comprensión lectora para 3° grado
actividades comprensión lectora para 3° grado
 
Ley 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circularLey 21.545 - Circular Nº 586.pdf circular
Ley 21.545 - Circular Nº 586.pdf circular
 
Criterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficiosCriterios ESG: fundamentos, aplicaciones y beneficios
Criterios ESG: fundamentos, aplicaciones y beneficios
 
Medición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptxMedición del Movimiento Online 2024.pptx
Medición del Movimiento Online 2024.pptx
 
Cuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdfCuaderno de trabajo Matemática 3 tercer grado.pdf
Cuaderno de trabajo Matemática 3 tercer grado.pdf
 
origen y desarrollo del ensayo literario
origen y desarrollo del ensayo literarioorigen y desarrollo del ensayo literario
origen y desarrollo del ensayo literario
 
INSTRUCCION PREPARATORIA DE TIRO .pptx
INSTRUCCION PREPARATORIA DE TIRO   .pptxINSTRUCCION PREPARATORIA DE TIRO   .pptx
INSTRUCCION PREPARATORIA DE TIRO .pptx
 
plande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdfplande accion dl aula de innovación pedagogica 2024.pdf
plande accion dl aula de innovación pedagogica 2024.pdf
 
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURAFORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
FORTI-MAYO 2024.pdf.CIENCIA,EDUCACION,CULTURA
 
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
Programacion Anual Matemática5    MPG 2024  Ccesa007.pdfProgramacion Anual Matemática5    MPG 2024  Ccesa007.pdf
Programacion Anual Matemática5 MPG 2024 Ccesa007.pdf
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 

Ejercicio 3

  • 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 3 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 4 capas que irán alineadas de manera vertical empecemos por la primera 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 segunda capa Como verán le agregamos nuevas propiedades: Float: lo cual indica que la capa creada flotara al lado izquierdo (left) de nuestra capa. Margin-top: que le asigna a la capa un margen superior en este caso de 5px. Ahora creamos la tercera capa
  • 4. Como verán le agregamos nuevas propiedades: Padding: que le asigna a la capa un espacio de 5px. Ahora 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.