Images CONTINUACIÓN PROYECTO

23 de agosto de 2016

Este día nos dieron otra oportunidad de terminar el proyecto a las personas que les faltaba colocar música ayudas de imagen etc. Mi nota fue 100 gracias a que yo traje en la usb este proyecto completo ya realizado.



También nos dejaron algunos ejercicios para practicar para el acumulativo:

Images SIMULACIÓN PAGINA WEB

16 Agosto 2016

Este día teníamos que hacer una simulación de una pagina web. Esto era por filas, a cada fila le tocaba hacer una pagina diferente, a mi me tocó la fila 2, es decir http://www.ladrillerasyomasa.com. Así quedaría el codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0036)http://www.ladrillerasyomasa.com.co/ -->
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Ladrilleras Yomasa</title>

<!-- == CSS == -->
<link href="./Ladrilleras Yomasa_files/reset.css" rel="stylesheet" type="text/css" media="screen, projection">
<link href="./Ladrilleras Yomasa_files/general.css" rel="stylesheet" type="text/css" media="screen, projection">

<!-- Slide -->
<link href="./Ladrilleras Yomasa_files/slide.css" rel="stylesheet" type="text/css" media="screen, projection">

<!-- Galería -->
<link href="./Ladrilleras Yomasa_files/jquery.lightbox-0.5.css" rel="stylesheet" type="text/css" media="screen, projection">

<!-- Icon -->
<link rel="shortcut icon" href="http://www.ladrillerasyomasa.com.co/favicon/favicon.ico">
<!-- == JS == -->

<!-- = JQuery = -->
<script type="text/javascript" src="./Ladrilleras Yomasa_files/jquery-1.6.2.min.js"></script>

<!-- JQuery Tools -->
<script type="text/javascript" src="./Ladrilleras Yomasa_files/jquery.tools.min.js"></script>

<!-- Slide -->
<script language="JavaScript" type="text/javascript">
$(function() {
$(".slidetabs").tabs(".images > div", {
effect: 'fade',
fadeInSpeed: 2000,
fadeOutSpeed: 2000,
rotate: true,
clickable:false,
}).slideshow({autoplay:true, interval:5000});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn-inicio, #link-inicio").addClass("seleccionado")
});
</script>
</head>

<body>
<div id="general">
<div id="header"> <a href="http://www.ladrillerasyomasa.com.co/index.php"><img name="logo" src="./Ladrilleras Yomasa_files/logo.png" width="375" height="110" border="0" id="logo" alt="Ladrilleras Yomasa - 55 años"></a>
<ul>
 <li><a id="btn-inicio" href="http://www.ladrillerasyomasa.com.co/index.php" class="seleccionado">Inicio</a></li>
<li><a id="btn-empresa" href="http://www.ladrillerasyomasa.com.co/empresa.php">Empresa</a></li>
<li><a id="btn-productos" href="http://www.ladrillerasyomasa.com.co/tradicional.php">Productos</a></li>
<li class="noespacio"><a id="btn-contactenos" href="http://www.ladrillerasyomasa.com.co/contactenos.php">Contáctenos</a></li>
</ul>
</div>
<div id="content">
<div class="content-caja">
<div class="content-caja-top negra"></div>
<div class="content-caja-center-negra">
 <div class="izquierda">
   <h1 class="inicio">Bienvenido</h1>
   <p>Somos empresas dedicadas a la explotación de arcilla a cielo abierto y a su transformación en productos de arcilla para la construcción, nos encontramos ubicados al Sur de Bogotá Nuestro posicionamiento se debe a la calidad de nuestros productos y al excelente capital humano con que contamos.</p>                
   <div class="btn-productos"><a href="http://www.sgs.com/en/Our-Company/Certified-Client-Directories/Overview.aspx" target="_blank"><img src="./Ladrilleras Yomasa_files/iso_9001.png" width="111" height="108"></a>
     <p><strong>No. Certificado: CO07/2166</strong><br>
         Somos una empresa certificada bajo la norma ISO 9001:2008 para las actividades de diseño, producción y comercialización de productos de arcilla (ladrillos, bloques, pisos, fachaletas, tejas y prefabricados).</p>
       </div>
   <div class="btn-pagos">
                  <p><strong>Nuestras formas de pago:</strong></p>
                      <img src="./Ladrilleras Yomasa_files/bt-master.png" width="64" height="43">
                      <img src="./Ladrilleras Yomasa_files/bt-visa.png" width="64" height="43">
                      <img src="./Ladrilleras Yomasa_files/bt-codensa.png" width="64" height="43">
                      <a href="https://www.psepagos.co/PSEHostingUI/ShowTicketOffice.aspx?ID=3991" target="_blank"><img src="./Ladrilleras Yomasa_files/bt-pse.png" width="64" height="43" border="0" class="link"></a>
</div>
     </div>
 <div class="derecha"> 
<!-- Galería -->
<div id="slider">
<div id="box-slider">
<div class="slidetabs"> <a href="http://www.ladrillerasyomasa.com.co/#" class="">1</a> <a href="http://www.ladrillerasyomasa.com.co/#" class="">2</a> <a href="http://www.ladrillerasyomasa.com.co/#" class="current">3</a></div>
<div class="images"> 
<!-- Slide 1 -->
<div style="display: none;"><img src="./Ladrilleras Yomasa_files/foto-1.jpg" alt="Foto 1" width="525" height="395" border="0"></div>
<!-- Slide 2 -->
<div style="display: none;"><img src="./Ladrilleras Yomasa_files/foto-2.jpg" alt="Foto 2" width="525" height="395" border="0"></div>
<!-- Slide 3 -->
<div style="display: block;"><img src="./Ladrilleras Yomasa_files/foto-3.jpg" alt="Foto 3" width="525" height="395" border="0"></div>
<!-- Slide 4 -->
<div><img src="./Ladrilleras Yomasa_files/foto-4.jpg" alt="Foto 4" width="525" height="395" border="0"></div>
</div>
</div>
</div>
</div>
</div>
<div class="content-caja-bottom negra"></div>
</div>
<div class="content-caja">
<div class="content-caja-top blanca"></div>
            
 <div class="content-caja-center-blanca">
   <h3>Comercializadores
</h3>
   <div class="caja">
<h4 class="rso">BUCARAMANGA</h4>
<ul>
 <li><strong>GRES LTDA</strong><br>
     <u><a href="mailto:gresltda@hotmail.com">gresltda@hotmail.com</a></u></li>
<li><strong>ARQUIGRES LTDA</strong><br>
   <u><a href="mailto:gregorioarquigres@hotmail.com">gregorioarquigres@hotmail.com</a></u></li>
 </ul>
   </div>
            <div class="caja">
 <h4 class="rso">BARRANQUILLA</h4>
 <ul>
   <li><strong>DISTRICERÁMICAS DEL CARIBE LTDA</strong><br>
     <a href="mailto:gerencia@districeramicas.com">gerencia@districeramicas.com</a><br>
   </li>
     </ul>
   </div>
   <div class="caja">
 <h4 class="rso">MEDELLÍN</h4>
 <ul>
   <li><strong>CASA MEDINA MEDELLÍ</strong>N<br>
       <u><a href="mailto:casamedina@une.net.co">casamedina@une.net.co</a></u>    </li>
<li><strong>CASA MEDINA DE LA CONSTRUCCÓN<br>
   RÍO NEGRO LTDA</strong><br>
 <u><a href="mailto:casamedinarionegro2009@hotmail.com">casamedinarionegro2009@hotmail.com</a></u> <br>
</li>
<li><strong>RÚSTICOS Y ARCILLAS S.A</strong><br>
   <u><a href="mailto:rusticosyarcillass.a@une.net.co">rusticosyarcillass.a@une.net.co</a></u> </li>
     </ul>
 </div>
 <div class="caja">
   <h4 class="rso">SANTA MARTA</h4>
   <ul>
     <li><strong>VITRIFICADOS Y GRES E HIJOS LTDA</strong><br>
       <u><a href="mailto:v_gres@hotmail.com">v_gres@hotmail.com</a></u>        <br>
     </li>
       </ul>
   </div>
            
            <div class="caja">
 <h4 class="rso">ECUADOR</h4>
              <ul>
   <li><strong>CIRCULO ECUADORADO</strong><br>
     <a href="mailto:multigres@vio.sanet.net">multigres@vio.sanet.net </a><br>
   </li>
     </ul>
   </div>
</div>
 <div class="content-caja-center-blanca">
   <h3>Proveedores
</h3>
   <div class="caja">
     <ul>
   <li><strong>COMPRAS</strong><br>
            <u><a href="mailto:compras@ladrillerahelios.com.co">compras@ladrillerahelios.com.co</a></u></li>
 </ul>
        </div>
</div>
<div class="content-caja-center-blanca">
   <h3>Trabaje con nosotros
</h3>
   <div class="caja">
     <ul>
   <li><strong>TALENTO HUMANO</strong><br>
       <u><a href="mailto:talentohumano@ladrillerasyomasa.com.co">talentohumano@ladrillerasyomasa.com.co</a></u></li>
 </ul>
        </div>
</div>
 <div class="content-caja-bottom blanca"></div>
</div>
</div>
<div id="push"> </div>
</div>
<div id="footer">
<div class="footer-caja">
<p>Copyright © <a href="http://xuestudio.com/" target="_blank">XUEstudio</a>. Todos los derechos reservados</p>
<ul>
<li><a id="link-inicio" href="http://www.ladrillerasyomasa.com.co/index.php" class="seleccionado">Inicio</a></li>
<li><a id="link-empresa" href="http://www.ladrillerasyomasa.com.co/empresa.php">Empresa</a></li>
<li><a id="link-productos" href="http://www.ladrillerasyomasa.com.co/tradicional.php">Productos</a></li>
<li class="nobordeespacio"><a id="link-contactenos" href="http://www.ladrillerasyomasa.com.co/contactenos.php">Contáctenos</a></li>
</ul>
</div>
</div>


</body></html>


Al abrirlo en el navegador quedaría de esta forma:

Images Anclas HTML

Agosto 9 de 2016

Este dia vimos el uso de la etiqueta <a> y como hacer anclas.

Etiqueta <a></a>

Se usa para fijar un destino o un enlace.

HREF

Se usa para ir a enlaces o archivos, Para los enlaces, estos deben llevar el protocolo de hipertexto.

Para que esta dirección se abre en otro pestaña se debe hacer esto: <a href="dirección" target="blank">

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.

Images TABLAS HTML

2 de agosto de 2016


Este día nos explicaron dudas sobre las tablas, para que sirve el ampersand, y como unir celdas.

Un ejercicio podría ser este:

<!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>

Y de esta forma quedaría al abrirlo en el navegador.

Como podemos ver, la etiqueta colspan sirve para unir filas, y la etiqueta rowspan para uir columnas.

Images EVALUACIÓN

Julio 26 de 2016

Este día resolvimos todas las dudas que teníamos sobre varias etiquetas, con ejemplos, e hicimos una evaluación. La solución de la evaluación era la siguiente.

<html>
<head><title></title></head>
<body bgcolor="00ff00" text="fff">
<table width="70%" border="1">
<tr>
<td><b>peña nelson</b></td>
<td><img src="" width="32px" height="32px"></td>
<td><ul><li>1</li><li>2</li><li>3</li></ul></td>
</tr>

<tr>
<td><u>peña nelson</u></td>
<td><marquee direction="up">divino amor</marquee></td>
<td><font color="f00"><b><h3>9a</h3></b></font></td>
</tr>

<tr>
<td><hr></td>
<td><marquee direction="down">150</marquee></td>
<td><font color="000"><b><h3>jorge</h3></b></font></td>
</tr>

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