![Te enseño a hacer una pagina en HTML5 desde 0 Parte [1/?]](https://storage.posteamelo.com/assets-adonis/assets/2014/06/27/207387508-9Q_AMf8yzPF.webp)
Hola amigos, hoy les traigo un curso para que puedan crear sus paginas web con HTML5 desde 0.
En estos post no voy a enseñar los conceptos de HTML si no, que nos vamos a enfocar en una pagina web pero si quieren aprender los conceptos, valga la redundancia, pueden ir al siguiente enlace: http://ht]ht tp://ju stpaste.it /d8 7j (eliminen los espacios)
Primero les recomiendo que descarguen sublime text, es bastante buen editor de texto
Link: http://www.sublimetext.com/2
Bien, una vez instalado sublime, podemos comenzar!
Primero haremos la estructura básica de HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Acá ira el nombre de nuestra pagina</title>
</head>
<body>
</body>
<footer></footer>
</html>
(Recuerden guardarlo como index.html)
Listo, con esto ya tendremos la estructura básica, solamente nos faltara agregar el contenido y otros tipos de etiquetas para embellecer nuestra página.
Por el momento, no le daremos estilo a la pagina. Mas adelante lo haremos con un StyleSheet.css
Que carajo es un StyleSheet?
Stylesheets u (hojas de estilo) son una novedosa facilidad de HTML, similar a la que poseen los procesadores de texto, que permite definir un parámetro de diseño que se repite en todas las páginas de un sitio.
Bue, sigamos con nuestra página.
Vamos a proceder a agregarle contenido, por ejemplo un texto
<!DOCTYPE HTML>
<html>
<head>
<title>Acá ira el nombre de nuestra pagina</title>
</head>
<body>
<h1> Texto muy grande</h1> <!-- estos serían los encabezados -->
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
<p>Hola mundo</p> <!-- Esto sería un párrafo normal -->
</body>
<footer> <p>En el footer o pie de página, también podemos poner parrafos</p> </footer>
</html>
Nos quedará algo así
Bastante feo no? es por que aun no agregamos los estilos, eso lo veremos en el siguiente post.
Ahora vamos a agregar el Nav, el nav será nuestra barra de navegación, algo como lo siguiente:
<!DOCTYPE HTML>
<html>
<head> <!-- debajo de nuestro head, agregaremos la etiqueta <header> -->
<title>Acá ira el nombre de nuestra pagina</title>
</head>
<header>
<div id="contenido"> <!-- Agregamos un DIV con una ID llamada contenido, esto nos servirá para cuando queramos agregar los estilos-->
<hgroup>
<h1> Mi pagina</h1> <!--ponemos el título de la pagina en al etiqueta <hgroup> -->
</hgroup>
<nav> <!-- abrimos la etiqueta nav -->
<ul>
<li><a href="#">Inicio</a></li> <!--- El en el Href debemos poner la seccion a la que nos lleva el botón, por ejemplo, index.html, pero todavía no agregaremos eso --->
<li><a href="#">Fotos</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Archivos</a></li>
</ul>
</nav>
</header>
<body>
<h1> Texto muy grande</h1> <!-- estos serían los encabezados -->
<h2>Texto grande</h2>
<h3>Texto algo más grande de lo normal</h3>
<h4>Texto normal</h4>
<h5>Texto pequeño</h5>
<h6>Texto muy pequeño</h6>
<p>Hola mundo</p> <!-- Esto sería un párrafo normal -->
</body>
<footer> <p>En el footer o pie de página, también podemos poner párrafos</p> </footer>
</html>
Nos queda algo así:
![Te enseño a hacer una pagina en HTML5 desde 0 Parte [1/?]](https://storage.posteamelo.com/assets-adonis/assets/2013/10/02/4EC.jpg-u82qQ1h02wg.webp)
Como verán, ya tenemos la navegación de nuestra pagina. No se preocupen, se la puede poner de forma horizontal, pero eso se hace en el StyleSheet.
Esto fue todo por hoy!
Espero que lo hayan disfrutado, pronto se viene el segundo post donde vamos a ver el StyleSheet y otras cositas mas
@OscarJulioNqn
Si quieren leer algo más acerca de hacer paginas web recomiendo:
www.aulaclic.es
Allí también enseñan a usar Dreamweaver, Photoshop, Flash, Illustrator, Corel y mucho más
