Hacer una Web.

En este tutorial aprenderemos a realizar una web muy sencilla usando la herramienta gratis Notepad ++ y el plugin Emmet.El plugin Emmet ahora tiempo de escribir extensos códigos gracias a su biblioteca de texto abreviado.

Empezaremos creando un archivo html5, escribiremos html:5 y pulsaremos el comando del plugin de EMMET.

           html:5
          
            <!doctype html>
            <html>
            <head>
            <meta charset="UTF-8">
            <title>Document</title>
            </head>
            <body>
            </body>
            </html>
          

Aquí vendría el cuerpo principal de la web, se podrían hacer centenares de cosas pero vamos hacerlo muy sencillo, haciéndolo todo con la etiqueta “padre” section, este elemento tendrá dos artículos con titulo en grande y texto normal.

            <!doctype html>
            <html>
            <head>
            <meta charset="UTF-8">
            <title>Document</title>
            </head>
            <body>
            
            <header>
              <h1>Primera Web</h1>
            <header>
            
            <nav>
              <ul>
                <li><a href="">enlace 1</a></li>
                <li><a href="">enlace 2</a></li>
                <li><a href="">enlace 3</a></li>
              </ul>
            </nav>

            section>.articulo*2>h3>{titulo}^p.comentario{texto}
            
            </body>
            </html>
          
          

"section" es el nombre del elemento

">" este elemento le dice que todo lo que va después estará dentro de nav

".articulo" esto sirve para añadir un div y su clase, esto es importante para luego trabajar con css

"*2" multiplica por 2 el elemento que esta delante

">" este elemento le dice que todo lo que va después estará dentro de li

"h3" es el tamaño de letra, a menor numero más grande

"{}" lo que vaya dentro del paréntesis es texto normal

"^" sube un nivel, es lo contrario de ">"

"p.comentario" añade una clase al párrafo

"{}" lo que vaya dentro del paréntesis es texto normal

            
            <!doctype html>
            <html>
            <head>
            <meta charset="UTF-8">
            <title>Document</title>
            </head>
            <body>
            
            <header>
              <h1>Primera Web</h1>
            <header>
            
            <nav>
              <ul>
                <li><a href="">enlace 1</a></li>
                <li><a href="">enlace 2</a></li>
                <li><a href="">enlace 3</a></li>
              </ul>
            </nav>

            <section>
              <div class="articulo">
                <h3>Titulo</h3>
                <p class="comentario">texto</p>
              </div>
              <div class="articulo">
                <h3>Titulo</h3>
                <p class="comentario">texto</p>
              </div>
            </section>
            
            </body>
            </html>
          

          

Desde aquí podrás ver la web que acabamos de hacer, obviamente aun queda hacerla bonita con css, pero eso lo dejaremos para otro tutorial. Con lo aprendido solo tendrías que cambiar el texto por lo que quisieras y ya tendrías una pequeña web, con enlaces y todo.