Abril 26 del 2017

16:51 N 0 comentarios
Hoy no hubo clase de informática debido a la prueba saber del segundo periodo.

 A continuación un ejercicio en css:

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Botón</title>
</head>
   <style>

      input.button{border:5px solid #256323;
                  font-size:50px;
                  font-family: Arial
                  padding-left: 20px;
                  padding-right: 20px;
                  padding-top: 20px;
                  padding-bottom: 100px;
                  border-radius: 60px;
                  background:#D1A454; 
                  background: linear-gradient(left, #D1A454, #FF0);
                  background: -moz-linear-gradient(left, #D1A454, #FF0);
                  background: -webkit-linear-gradient(left, #D1A454, #FF0);
                  background: -o-linear-gradient(left, #D1A454, #FF0);
                  color:#000; 

                  }

       input.button:hover
        {background: #365D9D;
         color: #FFFFFF;
         border-color: #FBFFAD;
         border-radius: 10px;
        }

       input.button:focus{
      background: #0F0;
      background: linear-gradient(left, #0F0, #FF0);
         background: -moz-linear-gradient(left, #0F0, #FF0);
         background: -webkit-linear-gradient(left, #0F0, #FF0);
         background: -o-linear-gradient(left, #0F0, #0F0);
         color: #FFFFFF;
         border-color: #F00;
         border-radius: 30px;}

  /* ___________________________________________________________________________________________________________________________ */
            input.asd
  {
  border: 1px solid #DBE1EB;
  font-size: 18px;
  font-family: Arial, Verdana;
  padding-left: 7px;
  padding-right: 7px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -o-border-radius: 4px;
  background: #4972B5;
  background: linear-gradient(left, #4972B5, #618ACB);
  background: -moz-linear-gradient(left, #4972B5, #618ACB);
  background: -webkit-linear-gradient(left, #4972B5, #618ACB);
  background: -o-linear-gradient(left, #4972B5, #618ACB);
  color: #FFFFFF;
  }
  
  input.asd:hover
  {
  background: #365D9D;
  background: linear-gradient(left, #365D9D, #436CAD);
  background: -moz-linear-gradient(left, #365D9D, #436CAD);
  background: -webkit-linear-gradient(left, #365D9D, #436CAD);
  background: -o-linear-gradient(left, #365D9D, #);
  color: #FFFFFF;
  border-color: #FBFFAD;
  }

    </style>
     
     
<body>

 <center><input type="button" class="button" value="HOLA"><hr></center>

 <input type="button" class="asd" value="HOLA">

 </body>

</html>



Publicar un comentario

Abril 19 del 2017

17:21 N 0 comentarios
El día de hoy, se continuó con la explicación de CSS.

 Hoy se enseñó la función del punto ( . ), la cual se utiliza para "enfocarse" exclusivamente en algo. Para esto hay que utilizar class="ejemplo".

 Ejemplo:

 h1{color:#F00;
     font-size:30px;}

 Lo anterior, cambia el texto de los h1 a rojo, y también cambia el tamaño de la letra dentro de los <h1>

 h1.hola{color:#FF0;}

 <h1 class="hola">Este es un ejemplo</h1>

 Ahora, todos los h1 con la class "hola" tendran el color del texto amarillo.

 A continuación, otro ejemplo en donde se cambia el estilo de la etiqueta <a>

 <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<style>

     body{background-color:#a0c7e2 }

      hr{color:#ff2b09;}

      a{color:#dfbc0f;
       font-family: arial}

      a:hover{color:#000;
             font-size:30px;
             background-color:#8d38c1;
             font-family: arial;
             text-transform: uppercase;}

      a:focus{color:#0F0;
             }

   .teclado{color:#537232;
           font-family: impact;
           font-size:40px;}

     a.dos{color:#d82e13;
             font-family: arial;
             text-transform: uppercase;}

              a.dos:hover{color:#000;
             font-family: arial;}

     a.uno:hover{color:#000;
             font-size:30px;         
             font-family: arial;
             text-transform: uppercase;}

    a.uno{color:#233d94}

    input{
          background: linear-gradient(left, #e62222, #9bb64d);
                background: -moz-linear-gradient(left, #e62222, #9bb64d);
                background: -webkit-linear-gradient(left, #e62222, #9bb64d);
                background: -o-linear-gradient(left, #e62222, #9bb64d);}

    input.pass{
          background: linear-gradient(left, #ffe000, #0d1599);
                background: -moz-linear-gradient(left, #ffe000, #0d1599);
                background: -webkit-linear-gradient(left, #ffe000, #0d1599);
                background: -o-linear-gradient(left, #ffe000, #0d1599);}

    input[type="email"]{
          background: linear-gradient(left, #ff00ae, #00ffd4);
                background: -moz-linear-gradient(left, #ff00ae, #00ffd4);
                background: -webkit-linear-gradient(left, #ff00ae, #00ffd4);
                background: -o-linear-gradient(left, #ff00ae, #00ffd4);}

              /*_________________________________________________________________________________________________________*/

 </style>

 <a href="http://htmlcolorcodes.com/es/" target="_blank">HOLAAAAAA</a>
<hr>
<a href="http://htmlcolorcodes.com/es/" class="uno" target="_blank">HOLAAAAAA</a>
<hr>
<a href="http://htmlcolorcodes.com/es/" class="dos" target="_blank">HOLAAAAAA</a>
<br><br><br>
Bucaramanga <span class="teclado"> Ciudad</span> Bonita

 <hr><hr><hr><hr>

 texto:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;      <input type="text" id="a"><br>
texto:   &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;               <input type="text" id="b"><br>
email:    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;              <input type="email" id="c"><br>
password:                                                   <input type="password" class="pass" id="d"><br>
Adios                                                       <input type="checkbox" id="check">

</body>

</html>



Publicar un comentario

Abril 12 del 2017

17:29 N 0 comentarios

El día de hoy no hubo clase debido a 

vacaciones de:

SEMANA SANTA





Publicar un comentario

Abril 5 del 2017

16:07 N 0 comentarios
Hoy fue la primer clase del segundo periodo, en la cual comenzamos a ver programación CSS, este consiste en el diseño de la página web. CSS tiene las tres siguientes reglas:

 - La del punto (.)

 - La del #

 - Reutilización del HTML

 La estructura básica es la siguiente:


Imágenes tomadas de: http://www.mclibre.org/consultar/amaya/css/css_quees.html

 Hay que recordar digitar el punto y coma al final de cada "elemento", esto es importante, ya que si no se pone, el siguiente "elemento" no funcionará.

 A continuación, un ejemplo de CSS:

 Este es el código HTML:
(Con la etiqueta <link rel="stylesheet"> llama al código css) 

 <!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<link rel="stylesheet" type="text/css" href="estiloej1.css">
<body bgcolor="#F00" text="#FF0">

      <h1>HOLAAAAAAAAAAAAAAAAAA</h1>

   
    <h1 class="jaja">ADIOOOS</h1>
          <br><hr>
      <h2><p><span>A B C<span><p></h2>
      

 </body>
</html>

 Este es el código CSS:

 body{color:#fff;
     background-color: #d0dc81 ;
     }

 h1{font-family: "Helvetica";
   font-size:"8px";
   color: #225e2a ;
   text-transform: lowercase;
   background-color: #6a94b7;
   text-shadow: 3px 3px #000; }

 h1.jaja{color:#F00;
       background-color:#66c292;}
   
h2 p span{font-family: "arial";
  font-size:"8px";
  color: #225e2a ;
  text-transform: lowercase;
  background-color: #6a94b7;
  text-shadow: 60px 30px #999;}

   hr{border-color: #F00;}
En el "h1.jaja" la función del punto ( .jaja ) es para que ese estilo CSS que está a continuación sea aplicado solamente a los h1 con clase .jaja, como por ejemplo, este h1

  <h1 class="jaja">ADIOOOS</h1>

 Ese h1 tiene la class="jaja"




Publicar un comentario

Prueba css

6:57 N 0 comentarios

BUENOS DIAS


(Lo anterior fue escrito con código css)


Publicar un comentario

Inicio del segundo periodo. (Abril 3 del 2017)

11:54 N 0 comentarios
El lunes 3 de abril se da inicio al segundo periodo, el cronograma es el siguiente:

Publicar un comentario

Page 1 of 26123»
Suscribirse a: Entradas (Atom)