Conozcamos HTML: agosto 2012

Instrucciones:

En esta ocación haremos nuestra primera página web completa y la estructuraremos con html y la maquetaremos con CSS, la página al final debe verse así:

Las medidas que utilizaremos son las siguiente:

capa header- ancho: 100% - alto: 100px
capa contenedor - ancho: 1000px- alto: 850px
capa cabecera - ancho 1000px- alto: 245px
capa seccion1: ancho: 615px - alto: 260px
capa seccion2: ancho: 290px - alto: 260px
capa misblogs: ancho: 260px - alto: 225px
capa video: ancho: 300px - alto: 225px
capa enlaces: ancho: 290px - alto: 225px
capa footer: ancho: 100% - alto: 100px

En la capa superior (header) debemos colocar el logotipo y la barra de navegación, el color de esta capa será: #212121 (color negro un poco degradado).

Al igual que la capa header, la capa footer tendrá el mismo color y en ella colocaremos la leyenda "2012 derechos reservados" y a la derecha el nombre del webmaster y su correo electrónico.

En la capa cabecera colocaremos una imagen con el mismo tamaño de la capa.

En la capa seccion1 coloremos un texto explicativo del sitio web, podemos escribir aquí la misión y la visión de la institución a la que pertenece el sitio.

En la capa seccion2 colocaremos una imagen o banner publictario.

En la capa misglogs haremos una vinculación hacia los blogs más interesantes con temas relacionados al curso.

En la capa video vamos a colocar un videotutorial sobre html, html5 o cualquier tema relacionado con el curso.

Por último en la capa footer colocaremos una serie de enlaces a páginas interesantes sobre temas de computación.

Para escribir el código de esta página debemos iniciar con la estructura HTML y luego escribimos la maquetación CSS.

Estructura HTML

Nombre del archivo: index.html
ubicación del archivo: carpeta del sitio
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Tutoriales Lima</title>
    <meta name="description" content="Diferentes recursos didácticos de apoyo para los
               cibernautas interesados en ampliar sus horizontes informáticos. =)" />
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="css/estilos.css" />
    <script type='text/javascript' src='js/jquery.js'></script>
    <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script>
    <script type='text/javascript' src='js/jquery.aviaSlider.min.js'></script>
    <script type='text/javascript' src='js/custom.min.js'></script>
</head>

<body>

<div id="header">
    <div id="nombre">
       <img src="img/logo.png">
       Tutoriales <span class="estilo1">Lima</span>
    </div>
    <div id="nav">
       <a href="#">Portada   </a>
        <a href="#">Tutoriales   </a>
        <a href="#">Videos   </a>
        <a href="#">Descargas   </a>
        <a href="#">Comentarios</a>
    </div>
</div>

<div id="contenedor">
    <div id="cabecera" align="center">
       <ul class='aviaslider' id="frontpage-slider">
           <li><a href="img/moto_portada.jpg" title="" ><img src="img/moto_portada.jpg" /></a></li>
           <li><a href="img/explo_portada.jpg" title=""><img src="img/explo_portada.jpg" /></a></li>
           <li><a href="img/photo_portada.jpg" title=""><img src="img/photo_portada.jpg" /></a></li>
           <li><a href="img/php_portada.jpg" title=""><img src="img/php_portada.jpg" /></a></li>
       </ul>
    </div>
    <div id="seccion1">
       <span class="titulo_sec1">Te damos la bienvenida</span><br><br>
       <p class="texto_sec1">En nuestro sitio encontrarás una variedad de herramientas utiles que te
        ayudarán con el diseño de páginas web, hojas de trabajo, imagenes en Photoshop y más.
       En la sección de descargas bajate las presentaciones sobre los cursos de programación, diseño e         información general sobre la computación.<br>
       En los tutoriales te damos instrucciones paso a paso con ayuda de imagenes y su
        respectivo ejemplo.   También en los videos encontrarás videotutoriales que te ayudarán
        con esas tareas que a veces se complican un poquito, podrás descargarlos y verlos
        cuantas veces quieras en casa.
        <br>
       <b>Recuerda dejar tus comentarios.</b> </p>
    </div>
    <div id="seccion2" align="center">
       
        <div class="inline-ad">
        <script type="text/javascript"></script>
        <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
        </script><ins style="display:inline-table;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><ins id="aswift_0_anchor" style="display:block;border:none;height:250px;margin:0;padding:0;position:relative;visibility:visible;width:300px"><iframe allowtransparency="true" hspace="0" marginwidth="0" marginheight="0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&&s.handlers,h=H&&H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&&d&&(!d.body||!d.body.firstChild)){if(h.call){i+='.call';setTimeout(h,0)}else if(h.match){i+='.nav';w.location.replace(h)}s.log&&s.log.push(i)}" vspace="0" id="aswift_0" name="aswift_0" style="left:0;position:absolute;top:0;" frameborder="0" height="250" scrolling="no" width="300"></iframe></ins></ins>
        </div>
        
    </div>

    <div id="misblogs">
       <span class="titulom">Mis Blogs</span><br><br>
       <table width="100%">
              <tr valign="middle" height="40">
                  <td>
                      <a href="http://www.conozcamosphp.blogspot.com"><i>Conozcamos PHP</i></a>
                </td>
            </tr>
            <tr valign="middle" height="40">
                 <td>
                      <a href="http://www.aprendamoscss.blogspot.com"><i>Aprendamos CSS</i></a>
                </td>
            </tr>
            <tr valign="middle" height="40">
                  <td>
                     <a href="http://www.conozcamoshtml5.blogspot.com"><i>Conozcamos HTML5</i></a>
                </td>
            </tr>
            <tr valign="middle" height="40">
                  <td>
                      <a href="http://www.conozcamosaccess.blogspot.com"><i>Conozcamos Access</i></a>
                  </td>
            </tr>
        </table>
    </div>

    <div id="video">
       <span class="titulov">Videotutorial recomendado</span><br><br>
        <iframe width="285" height="185"
        src="http://www.youtube.com/embed/Rpx0COTfokI"
        frameborder="0" allowfullscreen></iframe>
    </div>

    <div id="enlaces">
       <span class="tituloe">Enlaces de Interés</span><br><br>
       <table width="100%">
              <tr valign="middle" height="40">
                  <td>
                      <a href="#"><i>Solo Photoshop</i></a>
                </td>
                <td align="right">
                      <a href="#"><i>Photo-Design</i></a>
                </td>
            </tr>
            <tr valign="middle" height="40">
                 <td>
                      <a href="#"><i>Flash Facilito</i></a>
                </td>
                <td align="right">
                      <a href="#"><i>Tutorial Lab</i></a>
                </td>
            </tr>
            <tr valign="middle" height="40">
                  <td>
                     <a href="#"><i>Video Tutoriales</i></a>
                </td>
                <td align="right">
                     <a href="#"><i>Tutoriales Photoshop</i></a>
                </td>
            </tr>
            <tr valign="middle" height="40">
                  <td>
                      <a href="#"><i>Todo Photoshop</i></a>
                  </td>
                <td align="right">
                      <a href="#"><i>Colegio IPTCE</i></a>
                  </td>
            </tr>
        </table>
    </div>

</div>

<div id="footer">
       <div id="footer_derechos">
           2012 Derechos Reservados
        </div>
    <div id="footer_webmaster">
           <br>
              Webmaster: <span class="estilo3">Juan Carlos Lima Cruz</span><br>
           E-mail: <span class="estilo3">limacruzjuancarlos@gmail.com</span>
    </div>
</div>
</body>
</html>

Maquetación CSS

Nombre del archivo: estilos.css
ubicación del archivo: carpeta css dentro de la carpeta del sitio

@charset "utf-8";
/* CSS Document */

* {
    padding:0;
    margin:0;
}

#header {
    background:#212121;
    width:100%;
    height:100px;
}

#nombre {
    color:#FFF;
    height:100px;
    line-height:100px;
    font-family:Georgia;
    font-size: 2.5em;
    margin-left:10%;
    position:absolute;
    width:40%;
}

#nombre .estilo1 {
    color:#FF9900;
}

#nombre img {
    float:left;
}

#nav {
    height:100px;
    line-height:110px;
    margin-left:50%;
    position:absolute;
    width:65%;
}

#nav a {
    color:#FFF;
    font-family:Arial;
    font-size:1.2em;
    text-decoration:none;
}

#nav a:hover {
    color:#F60;
}

#contenedor {
    height:850px;
    margin-top: 5px;
    margin-left:auto;
    margin-right:auto;
    width:1000px;
}

#cabecera {
    border-color:#000;
    border-bottom:solid 2px;
    border-radius:2em;
    height:245px;
    position:absolute;
    width:1000px;
}

#seccion1 {
    height:260px;
    border-color:#000;
    border-bottom:solid 2px;
    border-top:solid 2px;
    border-radius:2em;
    margin-top:255px;
    margin-left: 0px;
    padding: 20px;
    position:absolute;
    width:615px;
}

#seccion1 .titulo_sec1 {
    color:#212121;
    font-family:Verdana;
    font-size:1.5em;
}

#seccion1 .texto_sec1 {
    color:#212121;
    font-family:Verdana;
}

#seccion2 {
    height:260px;
    border-color:#000;
    border-bottom:solid 2px;
    border-top:solid 2px;
    border-radius:2em;
    margin-top:255px;
    margin-left:670px;
    padding: 20px;
    position:absolute;
    width:290px;
}

#misblogs {
    border-color:#000;
    border-bottom:solid 2px;
    border-top:solid 2px;
    border-radius:2em;
    height:225px;
    margin-top:570px;
    padding: 20px;
    position:absolute;
    width:260px;
}

#misblogs .titulom {
    color:#212121;
    font-family:helvetica;
    font-size:1.8em;
}

#misblogs a {
    color:#212121;
    font-family:helvetica;
    font-size:1em;
    text-decoration:none;
}

#misblogs a:hover {
    color:#036;
    font-family:helvetica;
    font-size:1em;
    text-decoration:underline;
}

#video {
    border-color:#000;
    border-bottom:solid 2px;
    border-top:solid 2px;
    border-radius:2em;
    height:225px;
    margin-left:315px;
    margin-top:570px;
    padding: 20px;
    position:absolute;
    width:300px;
}

#video .titulov {
    color:#212121;
    font-family:helvetica;
    font-size:1.8em;
}

#enlaces {
    border-color:#000;
    border-bottom:solid 2px;
    border-top:solid 2px;
    border-radius:2em;
    height:225px;
    margin-left:670px;;
    margin-top:570px;
    padding: 20px;
    position:absolute;
    width:290px;
}

#enlaces .tituloe {
    color:#212121;
    font-family:helvetica;
    font-size:1.8em;
}

#enlaces a {
    color:#212121;
    font-family:helvetica;
    font-size:1em;
    text-decoration:none;
}

#enlaces a:hover {
    color:#036;
    font-family:helvetica;
    font-size:1em;
    text-decoration:underline;
}

#footer {
    background:#212121;
    width:100%;
    height:100px;
}

#footer_derechos {
    color:#666;
    height:100px;
    line-height:100px;
    font-family:Georgia;
    font-size: 0.8em;
    margin-left:20%;
    position:absolute;
    width:30%;
}

#footer_webmaster {
    color:#FFFFCC;
    height:100px;
    font-family:Georgia;
    font-size: 0.8em;
    margin-left:60%;
    position:absolute;
    width:60%;
}

#footer_webmaster .estilo3{
    color:#F60;
}

Es necesario aclarar que en el código HTML incluí un video, para lo cual use la opción compartir de youtube.com, si desea hacer lo mismo, omita el código de este video que dejaré de color rojo y substituyalo por su propio código. Con color azúl marino deje el código que corresponde a un anuncio de GoogleAddSense, este anuncio puede sustituirlo por uno creado en flash u otro programa.

jueves, 30 de agosto de 2012

Diseño y Maquetación de una Página Web con HTML y CSS

lunes, 27 de agosto de 2012

Diseño de una Página Web

viernes, 17 de agosto de 2012

¿Qué es HTML?