Tutoriales de informática - Abrirllave.com

Abrirllave.com

Añadir páginas web

La versión 3 de la web de ejemplo –RECURINFOR (v3)– es la misma que la versión 2, pero se le ha añadido los siguientes archivos:

Caputura de pantalla de Sublime Text editando RECURINFOR v3

Archivos de RECURINFOR versión 3

En la siguiente tabla se pueden ver los archivos de la tercera versión de RECURINFOR:

RECURINFOR (v3)
Ver Descargar archivos (ZIP)
index.html Todos (*.html, css/styles.css, imágenes)
acerca-de.html
enlaces/index.html
enlaces/redes-sociales.html
css/styles.css
images/

"acerca-de.html"

El código de "acerca-de.html" es el mismo que el de "index.html" con algunos cambios, especialmente los siguientes:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="css/styles.css"/>
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <title>Acerca de RECURINFOR (v3)</title>
    <meta name="description" content="RECURINFOR es una web de ejemplo desarrollada en el Tutorial de Desarrollo Web de Abrirllave.com"/>
    <meta name="keywords" content="acerca de, recurinfor, abrirllave"/>
</head>
<body>
<header>
    <a href="." title="Logotipo de Abrirllave.com - Acceso a la página de inicio del sitio web">
        <img src="images/abrirllave-040-060.gif" width="40" height="60" alt="Recursos de informática - Abrirllave.com">
    </a>
    <a href="."><h4>RECURINFOR (v3)</h4></a>
    <nav>
        <h4>Web de ejemplo del Tutorial de Desarrollo Web de {Abrirllave.com</h4>
        <ul>
            <li><a href="enlaces/">Enlaces</a></li>
            <li><a href="#">Libros</a></li>
            <li><a href="#">Vídeos</a></li>
        </ul>
    </nav>
</header>
<nav>
    <h3>Recursos</h3>
    <ul>
        <li><a href="enlaces/">Enlaces</a></li>
        <li><a href="#">Libros</a></li>
        <li><a href="#">Vídeos</a></li>
    </ul>
</nav>
<main>
    <ul>
        <li><a href=".">Inicio</a> &raquo; Acerca de RECURINFOR</li>
    </ul>
    <article>
        <h1>Acerca de RECURINFOR</h1>
        <p>¡Bienvenido! RECURINFOR es un ejemplo de sitio web (desarrollado por <a href="http://twitter.com/CarlosPes" target="_blank">@CarlosPes</a>) que forma parte del Tutorial de Desarrollo Web de <em>Abrirllave.com</em>:</p>
        <ul>
            <li><a href="http://www.abrirllave.com/desarrollo-web/" target="_blank">http://www.abrirllave.com/desarrollo-web/</a></li>
        </ul>
    </article>
</main>
<aside>
    <h5>PUBLICIDAD</h5>
    <img src="images/banner-160-600.gif" width="160" height="600" alt="anuncio banner">
</aside>
<footer>
    <ul>
        <li><a href=".">Inicio</a></li>
        <li><a href="#">Privacidad</a></li>
        <li><a href="#">Contactar</a></li>
        <li><a href="acerca-de.html">Acerca de</a></li>
    </ul>
    <ul>
        <li><a href="https://www.facebook.com/Abrirllave" target="_blank" title="Abrirllave.com en Facebook"><img src="images/logo-facebook-20-20.gif" alt="Facebook" width="20" height="20"/></a></li>
        <li><a href="https://plus.google.com/+Abrirllavecom/about" rel="publisher" target="_blank" title="Abrirllave.com en Google+"><img src="images/logo-google-plus-20-20.gif" alt="Google+" width="20" height="20"/></a></li>
        <li><a href="http://twitter.com/Abrirllave" target="_blank" title="Abrirllave.com en Twitter"><img src="images/logo-twitter-20-20.gif" alt="Twitter" width="20" height="20"/></a></li>
    </ul>
    <p>RECURINFOR (v3) - by @CarlosPes</p>
</footer>
</body>
</html>

Asimismo, se ha modificado la siguiente línea en la etiqueta <footer> de "index.html":

<li><a href="acerca-de.html">Acerca de</a></li>

Y, tanto en la etiqueta <nav> dentro de <header>, como en el <nav> principal de la página de "index.html", también se ha indicado dónde está la página de enlaces:

<li><a href="enlaces/">Enlaces</a></li>

"enlaces/index.html"

El contenido del archivo "enlaces/index.html" es muy similar al "index.html" de la página principal del sitio web, pero con los cambios siguientes:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="../css/styles.css"/>
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <title>Enlaces | RECURINFOR (v3)</title>
    <meta name="description" content="Enlaces a sitios web interesantes con recursos de informática: blogs de tecnología, tutoriales de informática, software, etc."/>
    <meta name="keywords" content="enlaces, recurinfor"/>
</head>
<body>
<header>
    <a href=".." title="Logotipo de Abrirllave.com - Acceso a la página de inicio del sitio web">
        <img src="../images/abrirllave-040-060.gif" width="40" height="60" alt="Recursos de informática - Abrirllave.com">
    </a>
    <a href=".."><h4>RECURINFOR (v3)</h4></a>
    <nav>
        <h4>Web de ejemplo del Tutorial de Desarrollo Web de {Abrirllave.com</h4>
        <ul>
            <li><a href="../enlaces/">Enlaces</a></li>
            <li><a href="#">Libros</a></li>
            <li><a href="#">Vídeos</a></li>
        </ul>
    </nav>
</header>
<nav>
    <h3>Enlaces</h3>
    <ul>
        <li><a href="#">Blogs de tecnología</a></li>
        <li><a href="#">Directorios de tutoriales</a></li>
        <li><a href="#">Eventos de informática</a></li>
        <li><a href="#">Navegadores web</a></li>
        <li><a href="redes-sociales.html">Redes sociales</a></li>
     </ul>
</nav>
<main>
    <ul>
        <li><a href="..">Inicio</a> &raquo; Enlaces</li>
    </ul>
    <article>
        <h1>Enlaces interesantes</h1>
        <p>En esta sección se enumeran enlaces a <strong>sitios web con recursos de informática</strong> agrupados por categorías. Por ejemplo, véase:</p>
        <ul>
            <li><a href="redes-sociales.html">Redes sociales</a></li>
        </ul>
    </article>
</main>
<aside>
    <h5>PUBLICIDAD</h5>
    <img src="../images/banner-160-600.gif" width="160" height="600" alt="anuncio banner">
</aside>
<footer>
    <ul>
        <li><a href="..">Inicio</a></li>
        <li><a href="#">Privacidad</a></li>
        <li><a href="#">Contactar</a></li>
        <li><a href="../acerca-de.html">Acerca de</a></li>
    </ul>
    <ul>
        <li><a href="https://www.facebook.com/Abrirllave" target="_blank" title="Abrirllave.com en Facebook"><img src="../images/logo-facebook-20-20.gif" alt="Facebook" width="20" height="20"/></a></li>
        <li><a href="https://plus.google.com/+Abrirllavecom/about" rel="publisher" target="_blank" title="Abrirllave.com en Google+"><img src="../images/logo-google-plus-20-20.gif" alt="Google+" width="20" height="20"/></a></li>
        <li><a href="http://twitter.com/Abrirllave" target="_blank" title="Abrirllave.com en Twitter"><img src="../images/logo-twitter-20-20.gif" alt="Twitter" width="20" height="20"/></a></li>
    </ul>
    <p>RECURINFOR (v3) - by @CarlosPes</p>
</footer>
</body>
</html>

"enlaces/redes-sociales.html"

Respecto al contenido del archivo "enlaces/redes-sociales.html" es el mismo que el de "enlaces/index.html", pero con las siguientes modificaciones:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="../css/styles.css"/>
    <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <![endif]-->
    <title>Redes sociales | Enlaces | RECURINFOR (v3)</title>
    <meta name="description" content="Enlaces interesantes a redes sociales de Internet."/>
    <meta name="keywords" content="enlaces, redes sociales"/>
</head>
<body>
<header>
    <a href=".." title="Logotipo de Abrirllave.com - Acceso a la página de inicio del sitio web">
        <img src="../images/abrirllave-040-060.gif" width="40" height="60" alt="Recursos de informática - Abrirllave.com">
    </a>
    <a href=".."><h4>RECURINFOR (v3)</h4></a>
    <nav>
        <h4>Web de ejemplo del Tutorial de Desarrollo Web de {Abrirllave.com</h4>
        <ul>
            <li><a href="../enlaces/">Enlaces</a></li>
            <li><a href="#">Libros</a></li>
            <li><a href="#">Vídeos</a></li>
        </ul>
    </nav>
</header>
<nav>
    <h3>Enlaces</h3>
    <ul>
        <li><a href="#">Blogs de tecnología</a></li>
        <li><a href="#">Directorios de tutoriales</a></li>
        <li><a href="#">Eventos de informática</a></li>
        <li><a href="#">Navegadores web</a></li>
        <li><a href="redes-sociales.html">Redes sociales</a></li>
    </ul>
</nav>
<main>
    <ul>
        <li><a href="..">Inicio</a> &raquo;</li>
        <li><a href=".">Enlaces</a> &raquo; Redes sociales</li>
    </ul>
    <article>
        <h1>Redes sociales</h1>
        <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>
            <li><a href="http://www.youtube.com/" target="_blank">Youtube</a></li>
        </ul>
    </article>
</main>
<aside>
    <h5>PUBLICIDAD</h5>
    <img src="../images/banner-160-600.gif" width="160" height="600" alt="anuncio banner">
</aside>
<footer>
    <ul>
        <li><a href="..">Inicio</a></li>
        <li><a href="#">Privacidad</a></li>
        <li><a href="#">Contactar</a></li>
        <li><a href="../acerca-de.html">Acerca de</a></li>
    </ul>
    <ul>
        <li><a href="https://www.facebook.com/Abrirllave" target="_blank" title="Abrirllave.com en Facebook"><img src="../images/logo-facebook-20-20.gif" alt="Facebook" width="20" height="20"/></a></li>
        <li><a href="https://plus.google.com/+Abrirllavecom/about" rel="publisher" target="_blank" title="Abrirllave.com en Google+"><img src="../images/logo-google-plus-20-20.gif" alt="Google+" width="20" height="20"/></a></li>
        <li><a href="http://twitter.com/Abrirllave" target="_blank" title="Abrirllave.com en Twitter"><img src="../images/logo-twitter-20-20.gif" alt="Twitter" width="20" height="20"/></a></li>
    </ul>
    <p>RECURINFOR (v3) - by @CarlosPes</p>
</footer>
</body>
</html>

EJERCICIO Dentro de la carpeta "enlaces", crear otras páginas web: "blogs-de-tecnologia.html", "directorios-de-tutoriales.html", etc.