Roatan Bilingual School

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Roatan Bilingual School"

Lorena Escobar Ríos
hace 5 años
Vistas:

1 Roatan Bilingual School Evaluación final de Informática Grado: Noveno Valor: 15% Primer paso: Crear una carpeta con su nombre en documentos de la computadora. Segundo paso: Copia y pega el código en el bloc de notas y guárdalo con el nombre estilos.css /* *De aquí en adelante debes seleccionar lo que vas a copiar y pegar en estilos.css */ /* *De aquí en adelante debes seleccionar lo que vas a copiar y pegar en estilos.css */ html * { margin:0; padding: 0; /* *Quitar márgenes del navegador*/ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: white; *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; body{ /* Para dar formato de texto de la pagina de inicio*/ font-family: "PT Sans", sans-serif;.h { background: #fffffa; header { /* Poner Color del encabezado*/

2 width: 100%; text-overflow: hidden; background: #0d399d; margin-bottom: 20px; /** DATOS */.bloque-og{ margin-left: 10%; margin-right: 10%; height: 100%; padding-top: 20%;.col-1,.col-2{ /*Grupo de las 2 columnas de la pagina de inicio*/ width: 50%; height: 100%; float: left; overflow: hidden; background: transparent; line-height: 1; padding-left: 2%; padding-right: 2%; text-align: justify; padding-bottom: 3%;.col-1 p,.col-2 p{ /* formato del texto de las columnas*/ font-size: 17px; font-family: "PT Sans", sans-serif;

3 margin-bottom: 0.5em; /* Separar los parrafos */ padding-top: 200px;/* bajar el texto principal del header*/ line-height: 25px; /* Separar el interlineado de texto entre linea y linea */.wrapper { /* Establece un ancho y centra el texto de la clase contenido*/ width: 80%; max-width: 1000px; margin: auto; overflow: hidden; text-align: justify; header.logo { /* Agrandar el texto del logo del encabezado*/ color: #f2f2f2; font-size: 200px; line-height: 200px; float: left; header nav { /* Alinear las opciones del menu a la derecha*/ float: right; line-height: 200px; header nav a { /* Separar las opciones del menu y cambiar el color del texto*/ display: inline-block; color:#fff; text-decoration: none; padding: 10px 20px; line-height: normal;

4 font-size: 20px; font-weight: bold; -webkit-transition:all 500ms ease; /*Poner transicion a las opciones del menu*/ -o-transition:all 500ms ease; transition:all 500ms ease ; header nav a:hover { /*Poner sombra de fondo a las opciones del menu*/ background: #f56f3a; border-radius: 5px; /* Aumentar o disminuir el border del fondo de las opciones del menu */.header2 { position: fixed; height: 100px;.header2.logo { /* Hacer mas pequeña la cabecera*/ line-height: 100px; font-size: 30px;.header2 nav { line-height: 100px;.contenido { /* Bajar el texto abajo del header*/ padding-top: 100px;.contenido p { /* Separar el contenido de la etiqueta p*/ margin-bottom: 1em; /* Separar los parrafos */

5 h3 { /*Agrandar solo una parte del contenido con la etiqueta h3 */ font-size: 16px; color: #f56f3a; text-align: center; h4 { /*Agrandar solo una parte del contenido con la etiqueta h4 */ font-size: 20px; color: #0d399d; text-align: screen and (max-width: 950px) { /* Ubicar el menu al hacer mas pequena la pantalla*/ header.logo, header nav { width: 100%; text-align: center; line-height: 100px;.header2 { height: auto;.header2.logo,.header2 nav { line-height: 50px;

6 footer { /* Poner Color del footer*/ width: 100%; font-size: 20px; background: #0d399d; margin-bottom: 0px; /* Poner el footer al pie de la pagina*/ color: #f2f2f2; height: 60px; text-align: center; /* *Hasta aquí llega lo que vas a copiar y pegar en estilos.css */ Tercer paso: Cierra el archivo estilos.css Cuarto paso: Abre nuevamente el bloc de notas y crea un nuevo documento y guárdalo con el nombre index.html Debes guardarlo en la misma carpeta donde guardaste el archivo estilos.css  <!DOCTYPE HTML> <Html lang="es"> <head> <meta charset="utf-8"> <title>evaluación Final I-BTP</title> <link rel="stylesheet" href="estilos.css"> <script src=" <script src="header.js"></script> </head>

7 <body> <header class="header2"> <div class="wrapper"> <div class="logo"> Diseño Web ESBIR 2018</div> </div> </header> <section class="contenido wrapper h3 h4">  <center> <p><h3>evaluación final de Informática realizado por: Escriba su nombre aquí</h3><br> </center> <p align="justify"> Usted de ingresar aquí la información solicitada </p> </section> </body> <br><br><br><br> <footer> <br>

8 <p> 2018 Francis Espinal.</p> </footer> </Html>  Paso cinco: Guarde y abra el index.html para verlo en el navegador web Google Chrome. La información que debes agregar a la página es un resumen de los siguientes temas: 1. La Informática 2. La realidad virtual 3. La calidad total 4. Las 5s de la calidad total 5. La nanotecnología 6. Las Tics 7. Diseño Web 8. SEO 9. Marketing digital 10. Ética profesional Un resumen de 10 a 12 líneas de contenido de cada uno de los temas y agregar con sus palabras una reflexión sobre esa información escrita en su trabajo de cada uno de los temas. Felices Vacaciones

Documentos relacionados

Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center;

Anexo B. Archivos CSS. tipografia.css. Anexos. Lourdes Fernandez Ramirez tipografia.css * { padding: 0; margin: 0; body { text-align: center; Anexo B. Archivos CSS tipografia.css /* */ Lourdes Fernandez Ramirez tipografia.css * { body { padding: 0; margin: 0; text-align: center; #Externo { width: 750px; margin-left: auto; margin-right: auto;