Mayo 03 del 2017

15:48 N 0 comentarios

El día de hoy se realizó evaluación individual y escrita, mi nota fue 100 ya que tenía hecho un ejercicio dejado el fin de semana.

Se hizo la introducción al proyecto de este periodo, en el que todo el grado 10-B será un equipo.

A continuación, el ejercicio dejado el fin de semana:

El objetivo era recrear lo más parecido posible la anterior imagen.

Este es el código HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<link rel="stylesheet" type="text/css" href="estiloej2-03-05-2017.css">

<h1>Titulo</h1><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. <a class="crojo">Ut enim ad minim veniam,</a>
quis nostrud <a class="camarillo">exercitation ullamco laboris</a> nisi ut aliquip.
<br>
<h2>Subtitulo</h2>

Lorem ipsum dolor sit amet, <span class="hola">consectetur <span class="adios">adipisicing</span> elit, sed do eiusmod
tempor</span> incididunt ut labore et dolore <span class="morado">magna aliqua. Ut enim ad minim</span> veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.

<br><hr><br>

<table >
<caption>Titulo de la tabla</caption>
<tr>
<td></td>
<td class="uno">Titulo columna 1</td>
<td class="uno">Titulo columna 2</td>
</tr>

<tr>
<td class="uno">Titulo fila 1</td>
<td>Lorem ipsum dolor </td>
<td>Lorem <span>ipsum</span> dolor </td>
</tr>

<tr>
<td class="dos">Titulo fila 2</td>
<td>Lorem ipsum dolor</td>
<td>Lorem ipsum dolor </td>
</tr>

<tr>
<td></td>
<td class="dos">Titulo columna 1</td>
<td class="dos">Titulo columna 2</td>
</tr>

</table>

<br><br>

<hr>

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud <span>exercitation ullamco laboris nisi ut aliquip.</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.<br><br>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore <span class="chao">magna aliqua. Ut enim ad minim</span> veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip.</div>

</body>

</html>

El siguiente es el CSS:

h1{color:#38DB47;
text-decoration: blink}

.crojo {color:#F00;
font-weight:700;
text-decoration: none}

.camarillo{color:#EACF20;}

h2{color:#14507A;}

span.hola{color:red;
text-decoration: underline;}

span.adios{color:blue;
font-style: italic; }

.morado{color:#D03FD5;}

span{color:purple;}

table, tr, td {border: 1px solid black;
border-collapse: collapse;
padding-bottom:7px;
padding-top:7px;
padding-left:7px;
padding-right:7px; }

caption{color:blue;}

td{color:#28B73E;
font-weight: 600}

td.uno{font-weight:700;
color:#EACF20;}

td.dos{font-weight: 700;
color:red;}

td div{font-weight: 600;
color:#EACF20;}

td span{font-style: italic;
color:#28B73E;}

div{color:#ACD53F;}

div span{color:#F413DD;}

span.chao{color:#5C951B;
text-decoration: underline; }

Read more

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>

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:         <input type="text" id="a"><br>
texto:        <input type="text" id="b"><br>
email:        <input type="email" id="c"><br>
password: <input type="password" class="pass" id="d"><br>
Adios <input type="checkbox" id="check">

</body>

</html>

Abril 12 del 2017

17:29 N 0 comentarios

El día de hoy no hubo clase debido a

vacaciones de:

SEMANA SANTA

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"

Read more

Prueba css

6:57 N 0 comentarios

BUENOS DIAS

(Lo anterior fue escrito con código css)

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:

Informática Nicolás Toledo.

Mayo 03 del 2017

Abril 26 del 2017

Abril 19 del 2017

Abril 12 del 2017

El día de hoy no hubo clase debido a

vacaciones de:

SEMANA SANTA

Abril 5 del 2017

Prueba css

BUENOS DIAS

Inicio del segundo periodo. (Abril 3 del 2017)

Categories

Datos personales

Archivo del blog

Popular Posts

Link list

Categories

Tags