SlideShare una empresa de Scribd logo
1 de 7
“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 4
Empezaremos en este caso con nuestro CSS
En caso la llamaremos estilos .css
Bueno empecemos creando nuestro encabezado
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 utilizamos 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 asigna 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.
Height: que le asigna una altura de 100px en este caso.
Text-aling: que hace que todo texto que se encuentra dentro de la capa en este caso se
centre (center).
Border: que le agrega a la capa un borde solido de 3px de color negro(#000).
Ahora vamos con la capa que contendrá una capa dentro del encabezado
Bueno aquí les explicare para que sirven todas las propiedades que utilizamos en la capa
que ven en la parte superior y que no se habían explicado anteriormente:
Height: que le asigna a la capa una altura de 200px en este caso.
Position: que le asigna a la capa una posición determinada.
Margin left y top: que le asigna a la capa márgenes a la izquierda y arriba de la capa.
Ahora crearemos una capa que flotara al lado izquierdo.
Ahora crearemos dos capas que estarán dentro de la capa anterior creemos la primera.
Ahora creemos la segunda capa estará dentro del main.
Ahora crearemos una capa que flotara al lado derecho
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 otras capas más que estarán dentro de la capa main1.
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 4

Más contenido relacionado

Similar a Ejercicio 4

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
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Carlos Ccalla
 
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
 
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
 
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
 
MAQUETACIÒN WEB-Naomy
MAQUETACIÒN WEB-NaomyMAQUETACIÒN WEB-Naomy
MAQUETACIÒN WEB-NaomyHye Sun Liu
 
Maquetacion de pagina web
Maquetacion de pagina webMaquetacion de pagina web
Maquetacion de pagina webAlejandro Gomez
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.rogelioapaza04
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.yuris666
 

Similar a Ejercicio 4 (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
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
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
 
Capas en html
Capas en htmlCapas en html
Capas en html
 
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
 
Canvas
CanvasCanvas
Canvas
 
Agregar una imagen
Agregar una imagenAgregar una imagen
Agregar una imagen
 
Imagen de fondo
Imagen de fondoImagen de fondo
Imagen de fondo
 
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
 
MAQUETACIÒN WEB-Naomy
MAQUETACIÒN WEB-NaomyMAQUETACIÒN WEB-Naomy
MAQUETACIÒN WEB-Naomy
 
MAQUETACION WEB
MAQUETACION WEBMAQUETACION WEB
MAQUETACION WEB
 
Maquetacion de pagina web
Maquetacion de pagina webMaquetacion de pagina web
Maquetacion de pagina web
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
Capas en flash
Capas en flashCapas en flash
Capas en flash
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.Ejercicio 4-maquete-utilizando-css-externo.
Ejercicio 4-maquete-utilizando-css-externo.
 

Último

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í
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdfenelcielosiempre
 
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
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdfDemetrio Ccesa Rayme
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dstEphaniiie
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptxFelicitasAsuncionDia
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesLauraColom3
 
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
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxlupitavic
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...JonathanCovena1
 
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
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Alejandrino Halire Ccahuana
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxlclcarmen
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMarjorie Burga
 
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
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Lourdes Feria
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfFrancisco158360
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSYadi Campos
 

Último (20)

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
 
plan de capacitacion docente AIP 2024 clllll.pdf
plan de capacitacion docente  AIP 2024          clllll.pdfplan de capacitacion docente  AIP 2024          clllll.pdf
plan de capacitacion docente AIP 2024 clllll.pdf
 
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
 
Neurociencias para Educadores NE24 Ccesa007.pdf
Neurociencias para Educadores  NE24  Ccesa007.pdfNeurociencias para Educadores  NE24  Ccesa007.pdf
Neurociencias para Educadores NE24 Ccesa007.pdf
 
Dinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes dDinámica florecillas a María en el mes d
Dinámica florecillas a María en el mes d
 
Registro Auxiliar - Primaria 2024 (1).pptx
Registro Auxiliar - Primaria  2024 (1).pptxRegistro Auxiliar - Primaria  2024 (1).pptx
Registro Auxiliar - Primaria 2024 (1).pptx
 
Éteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reaccionesÉteres. Química Orgánica. Propiedades y reacciones
Éteres. Química Orgánica. Propiedades y reacciones
 
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
 
PLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docxPLAN DE REFUERZO ESCOLAR primaria (1).docx
PLAN DE REFUERZO ESCOLAR primaria (1).docx
 
La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...La empresa sostenible: Principales Características, Barreras para su Avance y...
La empresa sostenible: Principales Características, Barreras para su Avance y...
 
La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.La triple Naturaleza del Hombre estudio.
La triple Naturaleza del Hombre estudio.
 
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
Lecciones 05 Esc. Sabática. Fe contra todo pronóstico.
 
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptxTIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
TIPOLOGÍA TEXTUAL- EXPOSICIÓN Y ARGUMENTACIÓN.pptx
 
MAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grandeMAYO 1 PROYECTO día de la madre el amor más grande
MAYO 1 PROYECTO día de la madre el amor más grande
 
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...
 
Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...Caja de herramientas de inteligencia artificial para la academia y la investi...
Caja de herramientas de inteligencia artificial para la academia y la investi...
 
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdfTema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
Tema 8.- PROTECCION DE LOS SISTEMAS DE INFORMACIÓN.pdf
 
Power Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptxPower Point: Fe contra todo pronóstico.pptx
Power Point: Fe contra todo pronóstico.pptx
 
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdfCurso = Metodos Tecnicas y Modelos de Enseñanza.pdf
Curso = Metodos Tecnicas y Modelos de Enseñanza.pdf
 
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VSOCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
OCTAVO SEGUNDO PERIODO. EMPRENDIEMIENTO VS
 

Ejercicio 4

  • 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 4 Empezaremos en este caso con nuestro CSS En caso la llamaremos estilos .css Bueno empecemos creando nuestro encabezado 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 utilizamos 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 asigna 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. Height: que le asigna una altura de 100px en este caso. Text-aling: que hace que todo texto que se encuentra dentro de la capa en este caso se centre (center). Border: que le agrega a la capa un borde solido de 3px de color negro(#000). Ahora vamos con la capa que contendrá una capa dentro del encabezado
  • 3. Bueno aquí les explicare para que sirven todas las propiedades que utilizamos en la capa que ven en la parte superior y que no se habían explicado anteriormente: Height: que le asigna a la capa una altura de 200px en este caso. Position: que le asigna a la capa una posición determinada. Margin left y top: que le asigna a la capa márgenes a la izquierda y arriba de la capa. Ahora crearemos una capa que flotara al lado izquierdo. Ahora crearemos dos capas que estarán dentro de la capa anterior creemos la primera. Ahora creemos la segunda capa estará dentro del main.
  • 4. Ahora crearemos una capa que flotara al lado derecho 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 otras capas más que estarán dentro de la capa main1.
  • 5.
  • 6. 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.