Parte 2 - Ejercicio 02 - Página ITG

Fecha de Publicación: Septiembre 9 de 2015

Cordial Saludo,

Aquí se publican los códigos de la página que estamos realizando del ITG.  Hoy miércoles completamos el index.html y terminamos el archivo simbolos.html.
Se debe COPIAR los códigos en su cuaderno de los section “principal”, “simbolos” y estilos.css, las imágenes pueden imprimirlas y pegarlas.
El próximo miércoles continuaremos el desarrollo de esta página del ITG.


Código de Section “Principal” de archivo index.html


<section id="principal">
<figure id="institucion">
      <img src="imagenes/foto2.jpg" width="300" height="200" alt="Niñas bailando" />
</figure>

<article id="art1">
           <h1>Reseña Histórica</h1>
<p>El Instituto Técnico Guaimaral, es una institución educativa de carácter oficial y de naturaleza mixta, con niveles de educación Preescolar, Básica, y Media Técnica. <br />
Fusionada por Decreto 000959 del 12 de noviembre de 2002 con los siguientes centros educativos: Instituto Técnico Comercial Guaimaral, Colegio Departamental Hermogenes Maza, Escuela Guaimaral No.21, Centro Alma Luz Vega Rangel y mediante Acuerdo # 0012 de Mayo 16 de 2006, se fusiona el Instituto La Esperanza.
            <br /> </p> <br />     
</article>
<article id="art2">
           <h1> Misión</h1>
<p> El Instituto Técnico Guaimaral , ofrece formación en Ciencia, Tecnología y valores, desarrollando competencias laborales específicas y ciudadanas a niños, niñas y jóvenes con o sin necesidades educativas especiales, visionarios, emprendedores, generadores de su proyecto de vida, en ambientes pacíficos, ecológicos y culturales hacia el fortalecimiento de una sociedad más justa y tolerante.
            </p> <br /><br /><br />
</article>
<article id="art3">
           <h1> Política de Calidad</h1>
<p> El Instituto Técnico Guaimaral en cumplimiento de su misión y los requisitos legales por los que se rige, se compromete a asumir con firmeza la implementación y mantenimiento del Sistema de Gestión de la calidad, mejorando continuamente la eficacia, eficiencia y efectividad de sus procesos académicos y administrativos, con el apoyo del talento humano competente y comprometido con la formación técnica y en valores, desarrollando programas académicos que respondan y superen las necesidades de nuestra comunidad educativa.
            </p>
</article>
</section>

<footer id="pie">
     Diseño de página - Grado 11E 2015 - crisotos@hotmail.com - @crisotos
</footer>

Código de Section “simbolos” de archivo simbolos.html


<section id="simbolos">
<article id="simbolos1y2">
      <article id="sim1">
      <figure id="bandera">
        <img src="imagenes/bandera.png" width="140" height="140" alt="Bandera ITG" />            </figure>
      <p>El 18 de Junio de 2003 se adoptó la propuesta ganadora presentada por la              Docentes Ruth Trinidad Gómez Mendoza e Isabel Teresa Folíaco Gamboa. <br />
 Azul: Simboliza los valores de armonía, sabiduría y fortaleza que existen en nuestra
 Institución. <br />
 Blanco: Simboliza la transparencia con la que el Instituto forma a sus estudiantes,
 y la paz por la cual luchamos día a día. <br />
 Rojo: Simboliza la alegría que reina en cada una de las personas de está Institución
 y el fundamento de actuar bien y en su debido momento.</p>
    </article>
 <article id="sim2">
     <figure id="escudo2">
      <img src="imagenes/escudo.jpg" width="140" height="140" alt="Escudo ITG" />
     </figure>
   <p>Diseñado en Junio 18 de 2003 en reunión de Coordinadores con base en las propuestas presentadas por cada sede. <br />La primera franja de la izquierda en la parte de arriba representa la naturaleza, al lado tenemos la ciencia, haciendo alusión al estudio y los avances tecnológicos, el libro y la antorcha del centro identifican al Colegio Hermógenes Maza, en el deporte y el saber, y la mano que señala la letra C, es la identificación del lenguaje de Señas.</p>
  </article>
</article>
  <article id="sim3">
    <figure id="himno">
      <img src="imagenes/himno.png" width="140" height="140" alt="Himno ITG" />
</figure>
<h2>Letra: José Boada. 1984 <br />
            Arreglos: Eulicer Alfonso Pedroza Rojas.</h2>
<br />
<h1>Coro</h1>
<p> Estudiar, estudiar, estudiar, practicar el deporte también, si la mente esta sana
       y alegre viviremos en dulce vaivén(bis) <br />
 Los Colores de nuestra bandera, son emblema de amor y lealtad, al igual que una raza
 valiosa un legado del indio Guaimaral (bis) <br />
 Compañeros cantemos alegres este himno que invita a estudiar son vibrantes las notas
 que salen de estudiantes que quieren triunfar no perdamos la huella que deja toda
 herencia de amor y de paz. <br />
 Compañeros que aplican la ciencia forjadores de un nuevo país importante encontrar
 un camino de constancia, civismo y valor que le trasmita amor por la vida por
 la cultura y la formación.
   </p>
</article>
</section>

Código de archivo estilos.css

/* Estilos de Section del index.html */

#principal {
width: 90%;
margin: 5px auto;
border: 2px solid #CCCCCC;
background: #CCCCCC;
}

#institucion {
margin: 5px auto;
text-align: center;
}

#institucion img {
border: 3px solid #FAAC58;
}

#art1, #art2, #art3 {
width: 30%;
margin: 5px 10px;
border: 1px solid #CCCCCC;
background: #1E6381;
border-radius: 10px;
padding: 5px;
color: #FFFFFF;
display: inline-block;
vertical-align: top;
}

#art1 h1, #art2 h1, #art3 h1 {
font: bold 24px Comic Sans MS;
color: #F60;
}

/* Estilos de Section de simbolos.html */

#simbolos {
width: 90%;
margin: 5px auto;
border: 4px solid #000000;
background: #CCCCCC;
}

#simbolos1y2 {
width: 65%;
margin: 5px 10px;
}

#sim1, #sim2, #sim3 {
background: #1E6381;
color: #FFFFFF;
border-radius: 20px;
padding: 15px;
border: 1px solid #CCCCCC;
}

#sim3 {
width:28%;
margin: 5px;
}

#simbolos1y2, #sim3 {
display:inline-block;
vertical-align:top;
}

#bandera, #escudo2, #himno {
text-align: center;
}

#sim3 p, h2 {
text-align: center;
}

#sim3 h1 {
font: bold 24px Comic Sans MS;
color: #F60;
text-align:center;
}

/* Estilos del Footer del index.html */

#pie {
width: 90%;
text-align:center;
margin: 15px auto;
padding: 10px;
border-top: 4px solid #441F05;
}


No hay comentarios:

Publicar un comentario