Ejemplo de lo aprendido hasta el momento

Antes de seguir con más código Html, quiero enseñarte un ejemplo el que aplicamos todo lo que hemos visto hasta el momento. Revísalo a fondo y pregunta todo lo que no entiendas en el foro antes de continuar para ir más suelto con el resto de las explicaciones que iré colocando, oki?

El restultado del ejemplo es de lo más sencillo y muy muy poco vistoso. No te preocupes por eso, pues como te he dicho antes, el darle un aspecto más profesional, con márgenes adecuados, colores de fondo y todo tipo de adornos, lo veremos en el curso de CSS. Así que todos los ejemplos que veamos del curso de Html van a ser así de sosos. Eso no significa que estemos aprendiendo muy poco o que lo aprendido no sirva de mucho, de veras. Estamos colocando solo el contenido y en el curso de CSS aprenderemos a adornarlo hasta obtener un aspecto totalmente profesional, sin nada que envidiar a cualquiera otra página web. Ten fe!

El resultado de este ejemplo cuyo código te coloco más abajo es este:

Ver resultado del ejemplo.

y este es su código:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>Mi Nueva Web</title>
  <!-- Insertar aquí mas Metatags-->
</head>
<body>
    <a name="arriba"></a>
    <img src="imagenes/logotipo.gif" alt="En ComoCrearTuWeb puedes aprender a diseñar páginas web" width="270px" height="80px" />

    <h1>Menú de Contenidos</h1>
        <a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
        <a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
        <a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
    <h2>Título Uno</h2>
        <a name="titulouno"></a>
        <p>Este es el <u>texto correspondiente</u> al título uno, aunque debería ser más largo para que se note el efecto.</p>
        <p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
        <p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que se note el efecto.</p>
        <h2>Título Dos</h2>
        <a name="titulodos"></a>
        <p>Este es el <i>texto correspondiente</i> al título dos, aunque debería ser más largo para que se note el efecto.</p>
        <p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
        <p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que se note el efecto.</p>
        <h2>Título Tres</h2>
        <a name="titulotres"></a>
        <p>Este es el <b>texto correspondiente</b> al título tres, aunque debería ser más largo para que se note el efecto.</p>
        <p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
        <p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que se note el efecto.</p>
        <a href="http://www.comocreartuweb.com" target="_blank" title="Como hacer páginas web">ComoCrearTuWeb</a>
    <p>Adios <b>Amigos</b>!</p><!-- Enlace tipo ancla hacia la parte superior -->
    <a href="#arriba" title="Ir Arriba">Ir Arriba</a>

</body>
</html>
Comparte este artículo en tu red Twitter Comparte este artículo en tu red Facebook Comparte este artículo en tu red Google Enviar '' a Meneame.net