Agosto 30 del 2016

15:40 N 1 comentarios

Acumulativo.

El dia de hoy se presentó la evaluación acumulativa del tercer periodo.

En la evaluación acumulativa se trabajó con temas relacionados en simular una página web, la página web a simular fue la siguiente:

http://www.comex.com.mx/CATALOGUE/Catalogue/Texturizados/Kontextura.aspx

Una de las soluciones fue con el siguiente código:

  <!DOCTYPE html>
<html>
<head>
<style>
 body{font-family:verdana;}
 pre{font-family:verdana;}
</style>
    <meta charset="UTF-8">
<title>Kontextura</title>
</head>
<body>
  <header>
    <pre>                          <img src="imagenes/logo.jpg"></pre>
  </header>
    <pre>                          <img src="imagenes/header.jpg"></pre>
   <br><br>

     <table align="center" width="75%">
       <tr>        
       <td valign="top" width="35%"><img src="imagenes/pintura1.jpg"><font color="purple"><br><h3><pre> Kontextura M</pre></h3></font><font size="2" color="grey"> 
          Ideal para crear acabados texturizados<br>         con grano medio, dejando la superficie <br>         rallada.
         <a href="https://www.google.com" target="_blank"><br>Ver detalle</a></td></font>
         

          <td valign="top"><img src="imagenes/pintura2.jpg"><font color="purple"><br><h3><pre> Kontextura R</pre></h3></font><font size="2" color="grey">
Ideal para crear acabados texturizados<br> con grano grueso, obteniendo texturas<br> profundas y pronunciadas.
       <a href="https://www.google.com" target="_blank"><br>Ver detalle</a></td></font>
        

          <td valign="top"><img src="imagenes/pintura3.jpg"><font color="purple"><br><h3><pre> Kontextura SG</pre></h3> </font><font size="2" color="grey">
Ideal para eliminar texturas antiguas,<br> obteniendo acabados sin grano.<br> Versatilidad para crear texturas<br> discretas.
            <a href="https://www.google.com"  target="_blank"><br>Ver detalle</a></td></font>
       </tr>
   
    </table>
    <br>
  <footer>
   
  <table width="100%">
    <tr>
    <td align="center" valign="bottom"><a href="http://aprendedeinforamtica.blogspot.com.co/" target="_blank" title="Blog Elkin"><font size="2" color="sky blue">Elkin Stewar Morales Prieto</a></font</td>
    <td rowspan="2" align="right"><img src="imagenes/logo.jpg"></td>
    </tr>

    <tr>
    <td align="center" valign="top"><a href="http://informaticanicot.blogspot.com.co/" target="_blank" title="Blog Nicolas"><font size="2" color="sky blue">Nicolas Hernando Toledo Parra</a></font></td>
    </tr>
   
  </table>

   </footer>
</body>
</html>

 A continuación, otra simulación pero esta vez es de esta página web:

 http://www.clinicaveterinariapequenosanimales.com/

 <!DOCTYPE html>
<html>
<head>
<style>
a:link{color:white; text-decoration:none;}
a:hover{color:white; text-decoration:none;}
a:visited{color:white; text-decoration:none;}
a:active{color:red; text-decoration:none;}
</style>
    <meta charset="UTF-8">
<title>Simulación pagina web</title>
</head>
<body> <font face="verdana" size="2px" color="white">
</head>
  <table width="100%" >
    <tr>
      <td colspan="7" bgcolor="#5CB647" align="right">Contáctenos: (57) (7) 6422431 - 630-2776 Bucaramanga, Colombia</td>
    </tr>
    <tr>
      <td align="right" rowspan="2"><img src="imagenes/logo.png"></td>
      <td colspan="6"><img src="imagenes/vet.jpg"></td>
    </tr>

    <tr>
      <td bgcolor="#5CB647" height="40px" align="center"><a href="https://www.google.com" target="_blank">Inicio</a></td>
      <td bgcolor="#3C924D" height="40px" align="center"><a href="https://www.google.com" target="_blank">Medicos veterinarios</a></td>
      <td bgcolor="#5CB647" height="40px" align="center"><a href="https://www.google.com" target="_blank">Nuestros servicios</a></td>
      <td bgcolor="#3C924D" height="40px" align="center"><a href="https://www.google.com" target="_blank">Ubicación</a></td>
      <td bgcolor="#5CB647" height="40px" align="center"><a href="https://www.google.com" target="_blank">Contáctenos</a></td>
      <td width="180px">&nbsp;</td>
    </tr>
  </table>
  <img src="imagenes/gato.jpg" width="100%" height="510px">
  <br><br>
  <table width="100%" >
    <tr>
      <td width="45%" height="30%" align="left" valign="top"><font face="verdana" color="green"><h2 align="middle">Quiénes somos</h2></font><font face="Verdana" color="black">
      <pre>                   Somos una clínica veterinaria que contamos con una experiencia de 55 años que se
                   preocupa por la salud y el bienestar de su mascota ofreciéndole una gran atención
                   y un buen trato, con los más altos rendimientos en tecnología para la atención médica
                   de su mascota contamos con los mejores médicos veterinarios que les ofrecerá la
                   mejor atención.</font></pre></td>
      
      <td  width="55%" rowspan="3"><img src="imagenes/clinicaveterinaria.png" width="500px" height="400px"></td>
    </tr>
    <tr>
      <td height="1px" bgcolor="green" align="center" valign="top"><font color="white" face="impact" size="4px"><a href="https://www.google.com" target="_blank">Conozca nuestro portafolio de servicios</a></font></td>
    </tr>
    <tr>
       <td height="170px">&nbsp;</td>
    </tr>
  </table>
  <br>
  <table width="100%" >
    <tr bgcolor="#5CB647">
       <td width="40%" align="center" valign="middle"><font color="white" face="Verdana" size="4px"><h2>Información de contacto</h2><pre>              Calle 20 # 19 - 40 Bucaramanga, Colombia.
(57) (7) 6422431 - 630-2776
      clinicaveterinariareyes@gmail.com</pre></font></td>
       <td width="60%"><img src="imagenes/clickaqui.png" width="600px"></td>
    </tr>
  </table>
  <footer>
  <pre><font color="black">El diseño predeterminado con el que fue elaborado esta página es propiedad exclusiva de Publicar Publicidad Multimedia S.A.S. propietarios de www.paginasamarillas.com.co y www.ciudadguru.com.co.
                                    Su copia sin autorización constituye una infracción a las normas legales vigentes. Copyright 2016 - AVISO LEGAL</font> </pre>
  </footer>
  
</header>
</font>

 </body>

</html>





1 comment

Publicar un comentario

Agosto 23 del 2016

15:40 N 0 comentarios

Continuación html.

El dia de hoy se aclararon algunas dudas por parte de los estudiantes.

A continuación, unos ejemplos que realicé en html, en los que también entra un poco de css.

El siguiente ejemplo son dos formas para colocar audio en una página web.


<html>
  <head>
  <title>Ejemplo Música</title>
  </head>
  <body>
     <EMBED SRC="direcciondelacancion.extensión"          AUTOSTART=true      LOOP=infinite    VOLUME="80"    WIDTH="0"    HEIGHT="0">
    <audio controls="" src="direcciondelacancion.extensión">
    
</body>
</html>

El siguiente es una prueba de la etiqueta <marquee>

<!DOCTYPE html>
 <html> 
 <head>
  <title> Clase 26 de Julio</title> 
 </head>
<body>       
   <font face="Impact" color="Scarlet">   
      <marquee behavior="scroll">Ejemplo</marquee>   
      <marquee behavior="slide">Ejemplo</marquee>    
      <marquee behavior="alternate">Ejemplo</marquee>       
      <marquee bgcolor=yellow>Ejemplo</marquee>
      <marquee direction="right">Ejemplo</marquee>
      <marquee direction="up">Ejemplo</marquee>
      <marquee direction="down">Ejemplo</marquee>
      <MARQUEE LOOP=1>Ejemplo 1 vez</MARQUEE>
      <MARQUEE SCROLLDELAY=2 SCROLLAMOUNT=500 >hola</MARQUEE>
      
      </font>  
   
   <p>HOLA <sup>como</sup> <sub>estas?</sub></p>
   
   <hr>
<table border="10px">
         <caption><font face="Impact" color="#00FF00"> Titulo de la tabla</caption>
           <tr>
              <td colspan="3">Celda 1 y 2</td>
              <td rowspan="5">Celda 3</td>
              <td>Celda 4</td>
          </tr>
          <tr>
              <td>Celda 5</td>
              <td>Celda 6</td>
              <td>Celda 7</td>
     </table>
</body
</html>

El siguiente ejercicio es un código para repasar listas y otros códigos (y un poco de css).

Ejercicio 2

<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8">
  <title>Ejercicio - Listas de enlaces</title>
  <style>   
a:link {color:red;}
a:hover {color:green; text-decoration:none;}
a:visited {color:purple;}
a:active {color:lime;}
body{background:yellow; font-family:verdana;}   
h1{color:orange; font-size:20px; text-align:center;} 
li{font-size:15px;}
  </style>
</head>
<body>
<h1>Listas de enlaces</h1>
<ul>
 <li>Buscadores</li>
  <ul>
    <li><a href="http://www.bing.com/" target="_blank">Bing</a></li>
    <li><a href="http://www.google.com/" target="_blank">Google</a></li>
  </ul>
 <li>Redes sociales</li> 
  <ul>
     <li><a href="http://www.facebook.com/" target="_blank">Facebook</a></li>
     <li><a href="http://www.twitter.com/" target="_blank">Twitter</a></li>
  </ul>
</ul> 
</body>
</html>




Publicar un comentario

Agosto 16 del 2016

14:22 N 0 comentarios
El día de hoy no hubo clase de informática a causa de una salida que nos ofreció el colegio para ir a un auditorio a escuchar la presentación de piano de varias escuelas.

Pero días antes el profesor dejó varios ejercicios en la página web del colegio, los ejercicios eran los siguientes:

EJERCICIO 1

SOLUCIÓN:

<html>
<head>
    <meta cherset="UTF-8">
<title>Tablas 12 agosto</title>
</head>
<body bgcolor="#B09A9A">
<font face="Arial">
<table border="1" bordercolor="#18420F" width="80%" align="center" cellpadding="0" cellspacing="0">

 <tr>
    <td rowspan="3" colspan="2"> <marquee behavior="alternate"><font color="#00F"> <s>Periodo III</s> <b>Ejercicio</b> <u>del Bimestre</u></font><font color="#F00"> <b>2016</b> </font></marquee></td>
    <td width="12%" height="72px" bgcolor="grey" align="center">A</td>
    <td width="12%" align="center">B</td>
    <td width="8%"  align="center">C</td>
    <td width="9%"  align="center" bgcolor="blue">D</td>
    <td width="26%" align="center" bgcolor="orange"><hr width="80%" ></td>
  </tr>

   <tr> 
    <td align="center" height="75px">E</td>
    <td align="center" bgcolor="grey">F</td>
    <td align="center" bgcolor="#00F">G</td>
    <td align="center">H</td>
    <td align="center">I</td>

   </tr>

   <tr>
    <td height="69px" align="center">J</td>
    <td align="center" bgcolor="#00F">K</td>
    <td align="center" bgcolor="grey">L</td>
    <td align="center">M</td>
    <td align="center" bgcolor="orange"><hr width="80%"></td>
  </tr>

   <tr>
    <td height="92px" width="8%" align="center">N</td>
    <td align="center" width="25%">O</td>
    <td align="center" bgcolor="#00F">P</td>
    <td align="center">Q</td>
    <td align="center">R</td>
    <td align="center"  bgcolor="grey">S</td>
    <td align="center">T</td>
  </tr> 
  <tr>
    <td rowspan="3" colspan="2" width="200px" height="275px"><marquee><img src="imagenes/lobo1.gif"></marquee></td>
    <td align="center">U</td>
    <td align="center">V</td>
    <td rowspan="3" colspan="3" width="259px" height="190px"><marquee direction="right"><img src="imagenes/lobo2.gif"></marquee>  </td>
  </tr>

   <tr>
    
    <td align="center">W</td>
    <td align="center">X</td>
  </tr>

   <tr>
    
    <td align="center"><marquee direction="up"><img src="imagenes/arrowup.png" width="100" height="97"></marquee></td>
    <td align="center"><marquee direction="down"><img src="imagenes/arrowdown.png" width="100" height="97"></marquee></td>  
     
  </tr>

 </table>
</font>

 </body>
</html>

 EJERCICIO 2:


 SOLUCIÓN:

<html>
<head>
<title>Ejercicio 2 de tablas</title>
</head>
<body>
<table width="29%" border="1" cellspacing="0">
 <tr>
  <td align="center">1</td>
  <td align="center">2</td>
  <td align="center">3</td>
  <td align="center">4</td>
 </tr>

 <tr>
  <td align="center">5</td>
  <td align="center" rowspan="2" colspan="2">6</td>
  <td align="center">7</td>
 </tr>

 <tr>
  <td align="center">8</td>
  <td align="center">9</td>
 </tr>

  <tr>
  <td align="center">10</td>
  <td align="center">11</td>
  <td align="center">12</td>
  <td align="center">13</td>
 </tr>

</table>
</body>
</html>





Publicar un comentario

Agosto 9 del 2016

16:44 N 0 comentarios




El dia de hoy, se hizo un ejercicio bonus, el cual subía las notas por debajo de 70 hasta 70, el ejercicio era decir que hacía el siguiente código:

 <html>
<head>
<title></title>
</head>
<body>
<table width="100%" border="5">
<tr>
  <td rowspan="2" colspan="2"> 1 2 <br> 4 </td>
  <td> 3 </td>
</tr>

 <tr>
  <td> 5 </td>
  <td> 6 </td>
</tr>

 <tr><td>7</td><td>8</td><td>9</td>
</tr>
</table>

 </body>
</html>

 La tabla era una 3x3 en la que el rowspan y colspan unificaban 2 celdas horizontal y verticalmente.






Etiqueta <a></a>

Esta etiqueta se usa para fijar un destino o un enlace.

HREF

<a href="Dirección URL">(Lo que se mostrará en pantalla)</a>

Esa etiqueta, se usa para ir a un enlace, a un zip, winrar, pdf, doc, etc. El enlace debe contener el protocolo de transferencia de hipertextos (http) ej: http://www.vanguardia.com/

Para abrir la url en una nueva pestaña se debe colocar:
<a href="Dirección URL" target="_blank">(Lo que se mostrará en pantalla) </a>

Para abrir la url en la misma pestaña reemplazando la página actual  (Es lo mismo que no colocar "target") se debe poner:
<a href="Dirección URL" target="_self">(Lo que se mostrará en pantalla) </a>

ANCLAS

Anclas

Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces.
Para crear un ancla (anchor) se procede de la siguiente manera:

     <A NAME="nombre_etiqueta">Texto del elemento ancla</A>

Visualmente este elemento no tiene ni un efecto, pero si lo tiene en forma interactiva con el usuario.
Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:

      <A HREF="#nombre_etiqueta">Texto del hiperenlace</A>

De esta manera accederemos a la posición donde hayamos puesto el ancla

Importante: En el <a href="#nombre_etiqueta">Texto</a>  debe ir el signo numeral.





Publicar un comentario

Agosto 2 del 2016

13:59 N 0 comentarios

Continuación HTML.

En esta clase se explicaron más ejercicios en html, con un enfoque especial en las tablas, también se puso un ejercicio que trataba de realizar una tabla y unir filas y columnas. Este era el ejercicio:



Y esta la solución:


<!DOCTYPE html>
<html>
<head>
<title>Tabla</title>
</head>
<body>
  <table border="10" bgcolor="pink" bordercolor="green" width="100%">
    <tr>
   <td colspan="5" >1  2  3  4  5</td>
   <td>6</td>
   <td>7</td>
   <td>8</td>
   <td>9</td>
   <td>10</td>
</tr>    

     <tr>
   <td rowspan="3">11<br>21<br>31</td>
   <td>12</td>
   <td>13</td>
   <td rowspan="2" colspan="2">14  15<br> 24 25 </td>
<td>16</td>
   <td>17</td>
   <td>18</td>
   <td>19</td>
   <td rowspan="3">20<br>30<br>40</td>
</tr>    

<tr>
   
   <td>22</td>
   <td>23</td>
   <td>26</td>
   <td colspan="2" rowspan="2">27 28 <br> 37 38</td>
   <td>29</td>
</tr>    

<tr>
   
   <td>32</td>
   <td>33</td>
   <td colspan="2">34 35</td>
   <td>36</td>
   <td>39</td>
</tr>    

<tr>
   <td>41</td>
   <td colspan="2">42 43</td>
   <td>44</td>
   <td colspan="2">45 46</td>
   <td colspan="2">47 48</td>
   <td colspan="2">49 50</td>
   
</tr>    
  </table>
</body>
</html>

A continuación, un corto código que hice:

<html>
<head>
<meta charset="UTF-8">
<TITLE>Fondos</TITLE>
</head>
<body background="fondo.gif">
<center>
<font face="arial" size="+2">Fondos</font>
<hr width=200>
</center>
<P align="center">Este es el primer párrafo. Está centrado y escrito en la letra por defecto del navegador. Algunas palabras estan en <B>negrita</B>, y otras en <I>cursiva.</I></P>
</body>
</html>



Publicar un comentario

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