Crea tu primera web en HTML y CSS

Para un concurso o mas bien para mí, hice este tip que espero le pueda servir a quien se inicia en estos pasos y quiere hacerlo por el buen camino.

Espero que no estés nervios@ con empezar este tip, para el cual vamos a usar un texto en latín, claro que tu lo puedes cambiar por un texto de tu interés (ya sea tu cantante favorito, tu linda familia o el diccionario de groserías locales), además un pc común y corriente y por lo menos 4 tazas de café.

Nota: existen muchos editores de html. Tú vas a elegir el que más te acomode. En mi caso yo uso editplus.

Comenzando

Todo escrito tiene un título ("mi novela", "mi gato", "sitio oficial de buenona raider", etc...) y un contenido (bla bla bla bla bla). Aquí vamos a aprender a darle formato a todos estos elementos.

tomemos el siguiente texto:

Código :

Lorem ipsum dolor 
sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. 

uff que fome
Como vemos, no tiene ningún formato. Esto no lo podemos presentar en la web y esperar que nos lean.

Aplicando formato

"Lorem ipsum dolor" es el título del artículo, y el resto (sit amet, consectetuer adipiscin, etc..) es el contenido, entonces "Lorem ipsum dolor" es el encabezado, en inglés se dice "header", entonces le decimos "header".

Mejor aún, como es el encabezado más grande o principal lo llamamos "h1" y a todo el resto le llamamos "articulo". ¿Por que?, pregunta tonta me extraña, ¡por que es un artículo!. Bien no me sigan interrumpiendo por que pierdo el hilo de laaaa conversación, ¿que tal el vídeo de...? (inyaka concéntrate)...

Bien si a "h1" le decimos "<h1>" y a articulo le decimos "<articulo>" y cuando acaba la palabra o frase dentro de "<h1>" avisamos así "</h1>" a modo de cierre, y cuando acaba "articulo" lo avisamos así "</articulo>", y obtenemos lo siguiente:

Código :

<h1>Lorem ipsum dolor</h1>
<articulo>sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </articulo>

¿Que simple no? jejejejeje es muuuchooooo más complicado de lo que parece, whaaaaahaaa... Sucede que el formato html(o xhtml que es casi lo mismo) conoce ciertas etiquetas(todo lo que este entre < > es una etiqueta) y "artículos" no la conoce, no es una etiqueta de html, la inventaste tú (lo invente yo pero a tí te echo la culpa).

Creando clases

Pero yo quiero que esto se llame artículo, ¿cómo hago?
Bien las etiquetas que tu navegador conoce de html, las conoce por su nombre y sabe lo que son, por ejemplo, sabe que <h1> es un encabezado con una letra muy grande, que <h2> es un encabezado con una letra mas pequeña, también sabe que otras etiquetas pueden hacer cosas especiales, como <img> que puede traer una imagen (si, una foto jpg de tu lindo gatito), <a href> se refiere a un link y te traslada a algún sitio, en fin ¿como esta el clima en tu ciudad? en mi ciudad empieza a hacer calor estamos en primavera (inyaka concéntrate)...

En fin, estábamos en que "artículos" lo inventaste tú. Entonces, existe cierta etiqueta, especialmente hecha para llamarse artículo, o como se te venga en gana (a una etiqueta muy querida la llame pedrito), ésta etiqueta, se llama "<div>" y funciona así: "<div class="LoQueSea">" - que en humano significa: a este div le asignas el nombre de -"LoQueSea"- entonces esto quedaría así:

Código :

<h1>Lorem ipsum dolor</h1>
<div class="articulo">sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </div>

Cabe notar que cuando quiero decir algo que el navegador "internet explorer" o "firefox" ( si te gusta usar un buen navegador usa firefox) no lo tome en cuenta lo digo así:

Código :

<!-- texto que no quiero que se tome en  cuenta --> 

A esto se llama comentario. Bien seguimos con tu primera web.

Estructura de nuestra página

¿Qué sentido tiene decir que div se llame artículo?. Buena pregunta, me sorprende tu sagacidad. Sucede que ahora puedo decir que "artículos" se vea de cierta forma y esté donde yo quiera que esté, ¿cómo?, bien sucede que todos tenemos jefes, sí, piensa en el maldito que te paga el pan de cada dia, el jefe de tu html se llama "css" y si éste conoce a su empleado puede hacer lo que quiera con él (sí, escuchaste bien: "lo que quiera"). Vamos entonces a llamar a nuestro jefe, pero antes vamos a decir que nuestro texto es un html:

Código :

<!-- lo que va dentro de estas etiquetas es un comentario -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES"> 
<HTML> <!-- le decimos al navegador que esto es un archivo html para que lo interprete como tal --> 
<HEAD>
   <TITLE> Mi Primera Web</TITLE> <!-- el título que aparece arriba en tu navegador  -->
    <!-- aca se pone todo lo que debe ir antes del cuerpo de tu web, por ejemplo indicar cuál es su jefe (css) -->
</HEAD>
<BODY><!-- empieza el cuerpo (o contenido) de tu web -->   

   

</BODY><!-- termina el cuerpo de tu web -->   
</HTML><!-- termina tu web -->

Si bien aún no hemos hecho nada increíble, ten paciencia, que esto va a resultar como que me llamo inyaka (la verdad, es solo mi nick).

ahora ponemos en el cuerpo nuestro contenido:

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
   <TITLE> Mi Primera Web</TITLE>
</HEAD>
<BODY>
<h1>Lorem ipsum dolor</h1>
<div class="articulo">sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </div>
</BODY>
</HTML>

Ahora guarda esto como index.html (index es la página que el servidor abre por defecto) en la carpeta primera_web y previsualiza en tu editor o navegador. ¿Ves como empieza a tomar forma?

Aplicando estilos

Ahora vamos a decirle a nuestra web quién es su jefe (CSS), para lo cual tenemos dos métodos:

Código :

<link rel="stylesheet" media="all" type="text/css" href="tu_estilo.css" /> 

que en humano significa: tu jefe se llama "tu_estilo.css"
el estilo se llama dentro de la cabeza (<HEAD>) así:

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <link rel="stylesheet" media="all" type="text/css" href="tu_estilo.css" /> 
   <TITLE> Mi Primera Web</TITLE>
</HEAD>
<BODY>
<!-- contenido-->   
</BODY>
</HTML>

o también puedes colocarlo directamente en tu html dentro de las etiquetas

Código :

<style> </style>

¿y cómo ordena el jefe?
bien, antes de esto aclaremos que css puede ordenar a:
- clases como <div class="mi_clase"> anteponiendo un punto antes del nombre, de esta manera:

Código :

.mi_clase{/*esto es un comentario en css*/}

- id como <div id="mi_clase"> anteponiendo un gato antes del nombre de esta manera:

Código :

#mi_clase{/*acá van todas las ordenes*/}

- o a una etiqueta propia de html tal como <body>, <a>, <img> etc... simplemente así:

Código :

body{/*órdenes a seguir*/}

Para que podamos ir visualizando nuestra web vamos a usar la etiqueta <style> dentro del head.

Los colores se nombran en numeros hexadecimales del 0 al 15 (se representan del 0 al f) en 3 pares representando los paleta RGB (rojo, verde, azul) asi #ff0000 (color rojo), bien manos a la obra:

Contenido de index.html

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
   <TITLE> Mi Primera Web</TITLE>
   <style>
   body {
        background:#0080FF ;/* el fondo de todo el cuerpo*/
        padding: 20px; /*el espacio entre el borde y su contenido*/
    }
   h1 {
   color: #CAFD00;
   }
    .articulo {
   font-size: 14px; /*tamaño de la fuente en pixeles*/
   font-family: Verdana; /*tipo de fuente*/
    background: #7400E8; /*color de fondo para artículo*/
   border: 6px solid #CAFD00;/*tamaño, forma y color del borde de artículo*/ 
   color: #FFFFFF;/*color de las letras*/
   padding: 13px; /*ya lo vimos*/
    }
   </style>
</HEAD>
<BODY>
<h1>Lorem ipsum dolor</h1>
<div class="articulo">sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur rclassiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincclassunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit class, lorem. Maecenas nec odio et ante tincclassunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincclassunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. </div>
</BODY>
</HTML>

Puedes previsualizar en tu editor html o navegador y verás lo bonito que está quedando.

Generando la navegación del sitio

Ahora vamos a usar 2 nuevas etiquetas de html para continuar con esto:
- etiqueta <a> para hacer ir a otro lugar (link).

sintaxis:

Código :

<a href="direccion.html">¿dode quieres ir?</a>

- etiqueta <img> para traer una imagen a la web.

sintaxis:

Código :

<img src="ruta_de_tu_foto/imagen.jpg" border=0 alt="comentario hacerca de tu foto" />

Vamos a guardar una foto llamada mi_foto.jpg en la carpeta img, dentro de la carpeta primera_web
y vamos a crear 3 páginas mas: abc.html, cba.html, cab.html. Para que todas utilicen el mismo estilo vamos a crear un archivo de estilo mi_estilo.css para que todas las páginas estén bajo sus órdenes, y para ir a cada página vamos a crear un menú con la etiqueta <a>

Contenido de abc.html

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> abc </TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>Estas en abc </h1>
<div class="articulo">eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus etc...
</div>
</BODY>
</HTML>

Contenido de bca.html

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> bca</TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>Estas en bca </h1>
<div class="articulo">Nam eget dui. Etiam rhoncus Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. eleifend ac, enim. Curabitur ullamcorper ultricies nisi. etc...
</div>
</BODY>
</HTML>

Contenido de cab.html

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> cab </TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>Estas en cab </h1>
<div class="articulo">eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus etc...
</div>
</BODY>
</HTML>

Luego en la carpeta primera_web creamos ,mi_estilo.css :

Código :

body {
    background:#0080FF ;
    padding: 20px; 
}
h1 {
    color: #CAFD00;
}
.articulo {
   font-size: 14px;
   font-family: Verdana; 
     background: #7400E8; 
   border: 6px solid #CAFD00;
   color: #FFFFFF;
   padding: 13px;
}
/*en adelante el estilo del menu y sus botones */
.menu{
    background:#ACD700;
    padding: 10px; 
}
   A:link, A:visited {
  text-decoration: none;/* para evitar el subrayado*/
  color: #CAFD00;
  padding: 0 0.5em;
  font-size: 16px;
  border: 3px groove #003737;
  background: #7400E8;
    font-weight: bold;
} 
 
A:hover, A:active {
  text-decoration: none;/* para evitar el subrayado*/
  color: #CAFD00;
  padding: 0 0.5em;
  font-size: 16px;
  border: 3px groove #003737;
  background: #A851FF;
    font-weight: bold;
}

Ahora ya estamos terminando, para finalizar vamos a modificar nuestro index.html:

Código :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//ES">
<HTML>
<HEAD>
 <link rel="stylesheet" media="all" type="text/css" href="mi_estilo.css" /> 
 <TITLE> mi primera web </TITLE>
</HEAD>
<BODY>
 <div class="menu">
    <a href="abc.html">abc</a>
    <a href="bca.html">cba</a>
    <a href="abc.html">cab</a>
 </div>
<h1>mi primera web</h1>
<div class="articulo">Has finalizado tu primera web ahora incluso puedes poner tu linda foto en la portada (si eres mujer) si eres hombre no pierdas el tiempo y mejor coloca la foto de tu equipo favorito (de volleyball femenino)
<img src="ruta_de_tu_foto/imagen.jpg" border=0 alt="mi equipo favorito" />
</div>
</BODY>
</HTML>

Ahora tú investiga para qué sirven las etiquetas de la wc3 (es quien fija las etiquetas):
http://www.w3c.es/Divulgacion/GuiasReferencia/XHTML1/

Además visita estos links de interés que de seguro te han de servir mucho:
http://www.cssplay.co.uk/
http://www.disenorama.com/

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.