Sitio Web básico con HTML5 y CSS3 - Instalando Wamp Server

Para iniciar un proyecto de desarrollo web necesitamos un sistema de infraestructura de internet, pueden usar el que sea de su agrado, mi recomendación es que utilicen WAMP Server ya que no necesita muchas configuraciones ya todo viene pre-configurado. WAMP es un sistema de infraestructura de internet que utiliza las herramientas necesarias para desarrollar aplicaciones y sitios web, Wamp permite la comunicación de estas de forma local para poder probar tu sitio web sin tener que subirlo a un servidor online, para hacer pruebas basta con tu servidor local, las herramientas que utiliza WAMP por sus siglas son:

Windows, como sistema operativo;

Apache, como servidor web;

MySQL, como gestor de bases de datos;

PHP (generalmente)

CSS es el acrónimo de CascadingStyle Sheets (hojas de estilo en cascada). Es el lenguaje de estilo que define el estilo de la presentación de los documentos HTML en los exploradores, es decir se puede definir el color de fondo, imágenes la posición de gráficos efectos de sombreado, altura y anchura de las secciones y muchas otras cosas.

1. Para iniciar descargaremos Wamp Server del sitio oficial www.wampserver.com/

2. Seleccionamos descargas. y descargamos el que mas se ajuste a nuestro sistema operativo ya sea de 32 o 64 bits.

3. Al seleccionar el que deseamos descargar se abre una ventana donde nos muestra el link de descarga y otros links para descargar el Visual Studio 2012 x86 o x64 ya que es necesario para el funcionamiento de Wamp Server, si aun no lo tienen deberan descargarlo antes e instalarlo y posteriormente se instala Wamp.

4. cuando abrimos el link de wamp server nos redirecciona a la pagina de descarga donde podemos ejecutar el programa o guardarlo para después ejecutarlo.

5. una vez descargado el programa lo ejecutamos y iniciamos la instalación de una manera sencilla presionamos "Next" o "Siguiente" 

6. En algún momento de la instalación se abre una ventana para seleccionar la aplicación de Explorer, la podemos buscar si no la encuentra automáticamente, y presionamos "Abrir".

7. por ultimo especificamos los parámetros para el servidor, podemos dejarlos como vienen por defecto como se muestra en la imagen.

8. una ves terminada la instalacion damos "Finish"

9. Una vez instalado al ejecutar nos pedirá permisos el firewall para la comunicación con la redes publicas y privadas y aceptamos (si ya lo han tenido antes puede que no les pida este permiso), continuamos ejecutando el programa podemos hacer una prueba bucando el icono verde en la barra de notificaciones de windows y seleccionando localhost y podremos ver una descripción de la configuración del servidor Wamp server, las características de php y mysql.

10. En la parte posterior de la pagina podremos ver los proyectos que estemos desarrollando en este casi nosotros tenemos un proyecto llamado "Sitioprueba" que es con el que estaremos trabajando (ustedes no veran esta carpeta porque yo ya la tenia, la crearemos en el paso 13).

11. vamos a dirigirnos a la carpeta de instalación de Wamp server para ver donde se encuentran los proyectos de instalación para eso nos dirigimos a la ubicación que seleccionamos para instalarlo, si lo dejamos por defectos se instalara en en disco local C, nos trasportamos a la dirección C:\wamp\www

12. en esta ubicacion es donde tenemos nuestros proyectos, cada carpeta es un proyecto  al momento de instalar solo contendrá estos 3 archivos, Index, Testbase, Testmysql, si utilizaran algún diseñador para código html pueden hacerlo si no con el bloc de notas también podrán editar los archivos y guardarlos con la extensión ".htlm", en nuestro caso utilizaremos Notepad ++ o Sublime text 2 que son unos simples editores de texto como pude aber utilizado un block de notas pero me gusta mas la interfaz de estos dos.

Notepad ++ : https://notepad-plus-plus.org/download/v6.8.html

Sublime text 2: http://www.sublimetext.com/2

13. creamos una carpeta para nuestro sitio nos vamos a la ruta  C:\wamp\www aqui creamos una carpeta con el nombre "Sitioprueba".

14. Abrimos nuestro Editor de Texto (yo usare Notepad)  y en un archivo nuevo escribimos lo siguiente usando HTML5.  (<!DOCTYPE html> la cual es la única etiqueta que va fuera de de las etiquetas <html> de la pagina y siempre debe ser el primer elemento que debe incluir una pagina web ya que declara al servidor web que tipo de documento visualizado.)

<!--las etiquetas "< !--" y  "-- >" se utilizan para hacer comentarios dentro de html -->

<!DOCTYPE html> <!--Encabezado del documento-->
<html> <!--Etiqueta html-->

 <head> <!--Cabecera -->
            <!--El tipo de codificación-->
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

     <!--Titulo de la página-->
    <title>Untitled2</title> 
 
 </head>
 
 <body>
         <!--Este es el cuerpo del documento-->
  <!--Entre estas etiquetas estará todo el contenido-->
 </body>

 

</html> <!--Etiqueta final y cierre del documento-->

la siguiente etiqueta es la <html>y al final cierra la </html> que es la principal donde todo el contenido de la pagina web estará entre estas dos etiquetas, casi todas las etiquetas tienen una que abre y otra que cierra al final, estas con la misma estructura solo con la diferencia de una diagonal en la etiqueta de cierre.

la segunda etiqueta del documento es de la cabecera o head en esta etiqueta siempre se pone la información que no se muestra directamente al usuario si no que se utiliza para la configuración del documento u otros archivos como estilo o codificación del texto.

entre estas etiquetas de head esta la de meta que indica que este archivo es de tipo texto html y la codificación de caracteres para el explorador.

15. Para poderla ver en el archivo en el explorador. podemos guardarladamos click derecho y guardar, elegimos la ubicación donde nos encontramos en la carpeta de Sitioprueba y le ponemos el nombre index.html

El index es la pagina principal de cualquier sitio web, cuando accedemos a un dominio sea cual sea el servidor web siempre busca el archivo llamado index el cual es identificado como la pagina web principal.

16. Una vez que nuestro archivo index ya esta guardado en la carpeta de Sitioprueba podemos visualizarla en el explorador, abrimos en la barra de direcciones localhost/sitioprueba, claro que antes asegurarse de que este ejecutando Wamp y este en estado "Onlinne" o "en linea"

17. ahora podemos ver en el explorador el index, debido a que nuestro archivo aun no le hemos puesto contenido solo cargara una pagina vacía y con el titulo Untitled2 porque estaba especificado ese titulo en el archivo que guardamos, pero si utilizan Chrome, pueden dar click derecho sobre la pagina y en el meno seleccionar la opción inspeccionar elemento.

 y se nos abrirá una ventana adjunta al navegador como la siguiente donde podremos ver la estructura de nuestro documento, así poder visualizar como esta compuesto, en lo personal esta ventana me ayuda mucho cuando quiero buscar elementos que no puedo ver normalmente o editarlos en tipo de diseño así como poder ver sus cambios al momento y posteriormente copiar esos cambios a mi código y guardarlos.

18. ahora vamos a ponerle algo de contenido a nuestra pagina, en esta ocasión solo le pondremos texto. así que en nuestro editor remplazamos el contenido por este.

<!DOCTYPE html> 
<html> <!--Etiqueta html-->

 <head> 
          
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">

     <!--Cabíamos el titulo de la página-->
    <title>Este es el titulo</title>

         Esta es la cabecera de la pagina
         <br> <!--esta etiqueta es para hacer saltos de linea en html-->
         <br> <!--esta etiqueta es para hacer saltos de linea en html-->

 </head>
 
 <body>
  <!--Agregamos un contenido en el body -->
                Este es el cuerpo del la pagina
 </body>

</html>

22. Ahora  abrimos nuestro explorador y entramos a localhost/sitioprueba

23 Conoscamos en HTML5  las nuevas etiquetas para la cabecera y pie de pagina.

<!DOCTYPE html> 
<html>

 <head> 
          
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">    
    <title>Este es el titulo</title>

 </head>
 
 <body>
         <header> <!--esta es la nueva etiqueta para cabeceras en ella puedes 
                            poner el titulo de la pagina, logos etc-->
              <h1> Esta es la cabecera del documento </h1> 
                  <!--la etiqueta h1 siempre se utiliza para el titulo del contenido de la pagina, no del sitio
                            h2 para subsecciones, h3 apartados, h4 puede ser texto normal, h5 y h6 son textos mas pequeños-->
         </header> 
                <br> 
                <br> 
                Este es el cuerpo del documento
                <br> 
                <br> 

         <footer> <!--esta es la nueva etiqueta para el pie en ella puedes poner información de la pagina, 
                          creadores, correo, telefono etc.-->
              <h5> Esta el pie del documento </h5> 
         </footer> 

 </body>

</html>

24. por ultimo  vamos a la barra de direcciones y entramos a localhost/sitioprueba para ver como quedo nuestra pagina web y este es el resultado.

esto es solo una pequeña prueba básica de lo que podemos realizar con HTML5, en los próximos tutoriales veremos como podemos ponerle estilo a nuestras paginas, fondos, maquetado, y efectos como sombreado etc. con CSS, espero este tutorial les allá ayudado mucho, les agradezco sus comentarios y preguntas.