Mostrando entradas con la etiqueta index. Mostrar todas las entradas
Mostrando entradas con la etiqueta index. Mostrar todas las entradas

sábado, 31 de enero de 2015

Crea tu propia página web desde cero (V)

En el capítulo anterior vimos cómo crear nuestra base de datos de ejemplo para empezar a meter datos desde la web. Ahora vamos a ver por fin cómo hacer que desde nuestro formulario web, esos datos que metíamos se guarden en esa BD, y cómo hacer para consultarlos desde la web a modo de listado de usuarios.

Lo primero de todo, crearemos una carpeta llamada protected en la raíz de nuestro proyecto, de modo que ahora tendremos las carpetas bootstrap, css, img y protected, además del fichero index.html. En esa carpeta protected meteremos los códigos PHP que serán invisibles al usuario. Estos códigos tendrán extensión .php, y serán la programación interna desde el servidor para gestionar los datos de la web entre el navegador que ve el usuario, y la base de datos. Atención: es recomendable tener nociones de programación para entender bien este capítulo, aunque se explicará cada código en la medida de lo posible, el usuario debería analizar cada línea para entender lo que hace.

En esa carpeta protected creamos un fichero llamado bd.php que contendrá la información de acceso a nuestra base de datos. Tendrá el código siguiente:

<?php
if(!defined("HOST")) define("HOST", "localhost");
if(!defined("USER")) define("USER", "root");
if(!defined("PASS")) define("PASS", "");
if(!defined("BD")) define("BD", "ejemplo");
$mysqli = new mysqli(HOST, USER, PASS, BD);
$mysqli->set_charset("utf8");
?>

Al ser código PHP, todo irá incluido entre las etiquetas <?php y ?>. Lo que hacemos en este código es decirle en qué servidor se encuentra la BD (en localhost), qué usuario y contraseña accederá a la BD (root y sin contraseña, a no ser que queramos poner más usuarios y contraseñas, lo dejamos así), el nombre de la BD (ejemplo), y se crea la base de datos con esos parámetros, además de decirle que le ponga un cotejamiento utf8 que nos será útil para poder escribir caracteres como acentos y eñes. A nivel de programación, primero comprueba "si no existe la clave HOST, define la variable HOST con el valor localhost", y así con los cuatro parámetros. Luego se crea la variable $mysqli y se le asigna un objeto mysqli (objeto de BD) con esos cuatro parámetros, y después se le asigna la codificación utf8.

Tendremos que modificar un poco nuestro formulario en el fichero index.html para que podamos elegir la asignatura y país de algún desplegable, que se deberán cargar con los datos de asignaturas y países existentes en la BD. Pero para ello crearemos antes un par de páginas nuevas desde las cuales podremos añadir a mano las asignaturas y países.

Empezamos por crear un fichero paises.php en la raíz de la web, junto a index.html. Copiamos el código entero de index.html y lo pegamos en paises.php, cambiando lo que hay en el interior del bloque <div class="cuerpo"> </div>, que será lo único que cambie, y añadimos en ese bloque el código siguiente:

<form class="form-group" id="nuevo-pais" name="nuevo-pais" action="protected/nuevo_pais.php" method="post">
<h2>Crear nuevo país</h2>
<hr>
<div class="form-group">
Nombre del país:<br>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre del país">
</div>
<hr>
<input class="btn btn-primary" class="form-control" type="submit" id="enviar" value="Guardar">
</form>
<hr/>
<h3>Países creados:</h3>
<?php
include("protected/paises.php");
?>
<a href="index.html"><-- Volver</a>

Ya tenemos un formulario para añadir países por su nombre, y un enlace para volver a la página anterior. También deberíamos añadir a index.html el código <a href="paises.php">Crear país</a> justo debajo del formulario, para poder acceder a la página de países desde el index. Además hemos incluido un fragmento de código PHP, en donde le estamos indicando que incluya el código del fichero protected/paises.php. Esto servirá para cargar aquí mismo el listado de países que vayamos creando. Esta carga de países realizada desde protected/paises.php tendrá el siguiente código:

<?php
include("bd.php");

$query = "SELECT * FROM pais";
if($result = $mysqli->query($query))
{
$resultado = "";

if(mysqli_num_rows($result) == 0)
{
$resultado = "No existen países";
}
else
{
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$nombre_pais = $linea['nombre'];
$resultado .= $nombre_pais . "<br/>";
}
}
echo $resultado . "<br>";
}
else
{
echo "ERROR al cargar los países: " . $mysqli->error;
}
?>

Lo que hace este código en la primera línea es incluir el código de bd.php, que contiene la información sobre la BD que vamos a manipular. Después crea una sentencia SQL para seleccionar toda la información de la tabla país (se recomienda buscar en Google más información sobre sentencias SQL, en concreto las SELECT, INSERT y UPDATE). Si el resultado de ejecutar esa selección de países es correcta, crea una variable $resultado por ahora vacía, que contendrá el texto a devolver. Si el resultado de países es vacío, el texto resultado dirá que no existen países. Si no, si hubiera países, lo que hace es mientras se crea una línea por cada país, se obtiene su nombre y se añade al texto resultado. Por último, imprime el resultado con echo. Si hubiera algún error previamente al cargar los datos de la BD, imprimirá un mensaje de error.

Si nos fijamos en el formulario de países, el action del form apunta a protected/nuevo_pais.php. Así que tenemos que crear un fichero llamado nuevo_pais.php dentro de la carpeta protected. Su código incluirá lo siguiente:

<?php
include("bd.php");

if(isset($_POST['nombre']))
{
$nombre_pais = $_POST['nombre'];
$query = "INSERT INTO pais (nombre) VALUES ('$nombre_pais')";

if($result = $mysqli->query($query))
{
header("Location: ../paises.php?ok=1");
}
else
{
header("Location: ../paises.php?error=1");
}
}
else
{
header("Location: ../paises.php?error=2");
}
?>

Analicemos un poco el código. En primer lugar está incluyendo el código del fichero bd.php que creamos anteriormente, ya que es necesario saber qué base de datos vamos a manipular. Después hay una condición if, que podemos traducir en si se ha enviado el atributo nombre por POST, es decir, si se envió correctamente el nombre del país desde el formulario anterior. Si esta condición se cumple, ejecuta el bloque encerrado entre llaves: crea una variable $nombre_pais con el nombre enviado por POST, crea una variable $post con el código que inserta por SQL un país cuyo valor para su nombre será el contenido en $nombre_pais, es decir, el nombre que enviamos desde el formulario. Ojo, en esta sentencia, el nombre debe ir entre comillas, ya que se trata de tipo texto (varchar), así tenemos ('$nombre_pais'). Si quisiéramos insertar números, serían sin comillas, pero los textos y fechas van entre comillas. Después, si el resultado de ejecutar esa sentencia es correcto, volvemos a la página paises.php con un atributo ok puesto a 1. Si no, volvemos igualmente a paises.php, pero con un código de error igual a 1. Si no se cumplía la condición de haber recibido el nombre por POST, entonces vuelve a la página paises.php con otro código de error puesto a 2. Estos códigos servirán para mostrar mensajes informativos en la página de creación de países. Para mostrarlos, añadimos el siguiente código justo encima de la etiqueta <form del fichero paises.php:

<?php
if(isset($_GET['ok']))
{
echo '<p style="color: green">País añadido correctamente</p>';
}
if(isset($_GET['error']))
{
$error = $_GET['error'];

if($error == 1)
{
echo '<p style="color: red">ERROR: Hubo un problema con la base de datos</p>';
}
else if($error == 2)
{
echo '<p style="color: green">ERROR: No se envió correctamente el país</p>';
}
}
?>

Si hemos escrito bien los códigos, al acceder a localhost/Ejemplo/paises.php veremos el formulario para crear nuevos países. Podemos probar a crear varios, y comprobar el mensaje de confirmación o los mensajes de error si hubiera algún problema:


Ahora vamos a modificar el código del index.html para poder obtener los países y enviar bien todos los datos. Para empezar, hay que renombrar index.html a index.php, es decir, cambiarle la extensión, pues vamos a manipular PHP. Después, donde teníamos el bloque <select> de la nacionalidad, debemos dejarlo así:

Nacionalidad:<br>
<select id="nacionalidad" class="form-control" name="nacionalidad">
<option value="0">Elije tu país</option>
<?php
include("protected/bd.php");
$query = "SELECT * FROM pais";
$result = $mysqli->query($query);
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$id_pais = $linea['id'];
$nombre_pais = $linea['nombre'];
echo '<option value="' . $id_pais . '">' . $nombre_pais . '</option>';
}
?>
</select>

Se podría hacer más eficiente utilizando el fichero protected/paises.php, que ya nos devolvían los países, y utilizar plantillas para añadir esos países como opciones del desplegable, pero no vamos a entrar en más complicaciones. Si todo funciona bien, ahora nuestra página principal index.php debe mostrar algo así:


Ahora vemos como en el desplegable aparecen los países que hemos creado desde la página de creación de países. Por ahora lo de las asignaturas lo vamos a dejar, os lo dejo como deberes, pues se haría igual que con los países, aunque en el formulario de registro sería interesante que se pudieran elegir varias asignaturas. Lo dejaremos como está, sólo con el nombre de usuario, email, contraseña, fecha de nacimiento y foto, aunque lo de la foto lo dejaremos para otro capítulo, ya que sería interesante hacer copias de foto y obtenerlo por su ruta, etc.

Vamos por fin a crear el fichero protected/registro.php que tendrá el código que procese los datos del usuario registrado. Contendrá lo siguiente:

<?php
if(isset($_POST['nombre']) && isset($_POST['email']) && isset($_POST['password']) && isset($_POST['pais']))
{
$nombre = $_POST['nombre'];
$email = $_POST['email'];
$password = sha1($_POST['password']);
$pais = $_POST['pais'];
$fecha_nac = "";
if(isset($_POST['fecha-nacimiento'])) $fecha_nac = $_POST['fecha-nacimiento'];
include ("bd.php");
$query = "INSERT INTO usuario (nombre, email, password, pais, fecha_nac) VALUES ('$nombre', '$email', '$password', $pais, '$fecha_nac')";
if($result = $mysqli->query($query))
{
header("Location: ../index.php?ok=1");
}
else
{
header("Location: ../index.php?error=1");
}
}
else
{
header("Location: ../index.php?error=2");
}
?>

Este código es similiar al de creación de países, pero para usuarios, y con sus atributos. Notad que para el password se ha utilizado una función sha1 hacia el password enviado, esto lo que hace es encriptarlo para que no se pueda ver desde la BD. Y la fecha de nacimiento, como no es obligatoria, depende de si se ha enviado o no, el incluirla.

Por último, vamos a crear un fichero protected/usuarios.php para obtener los datos de los usuarios, con el siguiente código, igual que para países, pero con usuarios:

<?php
include("bd.php");

$query = "SELECT * FROM usuario";
if($result = $mysqli->query($query))
{
$resultado = "";

if(mysqli_num_rows($result) == 0)
{
$resultado = "No existen usuarios";
}
else
{
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$nombre = $linea['nombre'];
$email = $linea['email'];
$resultado .= $nombre . " - " . $email . "<br/>";
}
}
echo $resultado . "<br>";
}
else
{
echo "ERROR al cargar los usuarios: " . $mysqli->error;
}
?>

Dentro del bloque while sólo hemos incluido el nombre y email, pero podríamos poner el resto, y añadirlo al resultado con el formato y estilo que queramos (por ejemplo en bloques <p> o en una tabla, etc.)

Finalmente, vamos a ver cómo quedaría el index.php definitivo para que funcione todo el trasvase de datos y presentación de la web (sólo se incluye el contenido de su bloque <body>):

<div class="encabezado">
<h1>Mi primera web</h1>
</div>

<div class="cuerpo">
<?php
if(isset($_GET['ok']))
{
echo '<p style="color: green">Usuario creado correctamente</p>';
}
if(isset($_GET['error']))
{
$error = $_GET['error'];

if($error == 1)
{
echo '<p style="color: red">ERROR: Hubo un problema con la base de datos</p>';
}
else if($error == 2)
{
echo '<p style="color: red">ERROR: No se envió correctamente el usuario</p>';
}
}
?>
<form class="form-group" id="registro" name="registro" action="protected/registro.php" method="post">
<h2>Registro de usuario</h2>
<hr>
<h3>Introduce tus datos personales:</h3>
<div class="form-group">
Nombre de usuario:<br>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Introduce tu nombre">
</div>
<div class="form-group">
E-Mail:<br>
<input type="email" class="form-control" id="email" name="email" placeholder="email@ejemplo.com">
</div>
<div class="form-group">
Contraseña:<br>
<input type="password" class="form-control" id="password" name="password">
</div>
<div class="form-group">
Fecha de nacimiento:<br>
<input type="date" class="form-control" id="fecha-nacimiento" name="fecha-nacimiento">
</div>
<div class="form-group">
Nacionalidad:<br>
<select id="pais" class="form-control" name="pais">
<option value="0">Elije tu país</option>
<?php
include("protected/bd.php");
$query = "SELECT * FROM pais";
$result = $mysqli->query($query);
while($linea = mysqli_fetch_array($result, MYSQLI_ASSOC))
{
$id_pais = $linea['id'];
$nombre_pais = $linea['nombre'];
echo '<option value="' . $id_pais . '">' . $nombre_pais . '</option>';
}
?>
</select>
</div>
<div class="form-group">
Foto:<br>
</div>
<input type="file" id="foto" name="foto">
<div class="form-group">
<input type="checkbox" id="acepto" name="acepto" required>
Acepto los términos y condiciones
</div>
<hr>
<input class="btn btn-primary" class="form-control" type="submit" id="enviar" value="Enviar datos">
</form>
<hr/>
<h3>Usuarios registrados:</h3>
<?php
include("protected/usuarios.php");
?>
<hr/>
<a href="paises.php">Crear país</a>
</div>

Si todo lo habéis hecho correctamente, nuestra página principal será así:



Vemos como en la parte superior aparece el mensaje de que el usuario fue añadido correctamente. Y abajo del todo aparece el listado de usuarios, que por ahora sólo es uno.

Y eso es todo por ahora. Os animo a practicar con nuevos datos, clases y atributos, así como presentar a vuestro gusto los datos que vayáis cargando. En el próximo capítulo veremos cómo subir imágenes, y cómo presentar el listado de usuarios de manera más elegante con todos sus datos y fotos.

Extra:

Crea tu propia página web desde cero (I)

viernes, 19 de diciembre de 2014

Crea tu propia página web desde cero (I)

A continuación vamos a ver cómo crear una página web desde cero, es decir, sin utilizar ninguna herramienta predefinida, ni Wordpress ni nada por el estilo. Bastará con tener instalado un servidor local al principio, para poder probar en nuestra máquina antes de tener terminada la web, y un editor de textos para escribir el código. Paso a paso veremos cómo ir construyendo nuestra web, de manera que en cada momento sabremos lo que estamos haciendo y cómo funcionan los entresijos y el código que hay detrás, que con otras herramientas no sería posible.

Vamos a trabajar en Windows, con un servidor Apache, un motor de base de datos MySQL y PHP para la programación del lado del servidor. Si juntamos todas esas iniciales tenemos WAMP, que es precisamente la herramienta que nos vamos a instalar y que reúne todos estos servicios necesarios para construir nuestra web. 

1. Descargar WAMP. Así pues, lo primero que haremos será descargarnos el WAMP de su página oficial eligiendo la versión de 32 o 64 bits según nuestro sistema operativo. El equivalente para Linux sería el XAMP. En esa misma página se explica con un vídeo-tutorial cómo instalarlo. Es muy sencillo, como en casi cualquier instalador, hay que seguir los pasos.

2. Instalar WAMP. Cuando veamos la pantalla en la que nos pide introducir la ruta de instalación, es recomendable dejarlo como está, en c:\wamp. En esta ruta será donde se alojen las páginas webs que vayamos a crear más adelante. Si vemos alguna pantalla que nos pida algún dato más, simplemente le damos a siguiente todo el rato, dejando las cosas por defecto.


Una vez instalado, confirmamos que queremos lanzar WAMP Server en nuestra máquina. Comprobamos que las versiones de cada tecnología es la correcta (al menos que sean las versiones que aparecen en la siguiente captura).


3. Configurar WAMP. Idealmente todo arrancaría correctamente, mostrando un icono verde de WAMP en la barra de tareas de Windows. Pero muchas veces el icono es rojo, lo que significa que hay algún error de configuración de Apache o PHP generalmente. Si tu icono es verde, puedes saltarte las siguientes dos secciones y escribir directamente la dirección localhost en el navegador, y si ves la pantalla principal de WAMP (ver captura más adelante en la sección 4), es que todo funciona correctamente. Si no, puedes configurar Apache y PHP:

3.1 Apache: Es el servidor que hará que nuestra web se muestre en nuestro navegador. Inicialmente vamos a trabajar en nuestra máquina local, por lo que en el navegador la url que usaremos será localhost (o la IP privada que tengamos configurada en nuestra red local). 

Cuando la web esté acabada ya veremos cómo migrarla a un servidor remoto con un nombre de dominio tipo www.ejemplo.com. Pero para que Apache funcione, debe estar configurado. En principio, lo básico es su número de puerto y directorio raíz. Si hemos instalado WAMP en c:\wamp, el directorio raíz debería estar ya bien configurado y puesto en c:\wamp\www, y el puerto por defecto es el 80. Esto significa que por ejemplo el proyecto web Ejemplo estará ubicado físicamente en c:\wamp\www\Ejemplo, y para ver nuestra web accederíamos desde el navegador a localhost:80/Ejemplo, aunque al ser el puerto 80 el predeterminado para la navegación web, no haría falta poner el número de puerto, bastaría con localhost/Ejemplo. El problema viene si anteriormente ya teníamos reservado ese puerto 80 para otro servidor, como por ejemplo el IIS de Windows. En ese caso tendremos que decirle a Apache que utilice otro número, normalmente por tradición se suele usar el 8080 por similitud con el 80. 

Para configurar tanto el directorio raíz como el número de puerto, hay que hacer click en el icono de WAMP de nuestra barra de tareas de Windows. Hay una sección por cada servicio, y en Apache vemos un apartado que dice httpd.conf. Ese es el nombre del fichero de configuración de Apache, por lo que pinchamos en él y accedemos al fichero de texto con toda su configuración. Hay que andarse con cuidado de no trastear indebidamente, pues cualquier configuración errónea hará que no funcione el servidor, así que es aconsejable guardarse una copia del fichero original, que se encuentra en c:\wamp\bin\apache\apache2.4.2\conf\httpd.conf. Puedes encontrar mucha información y ayuda sobre cómo configurar este archivo, pero en principio basta con asegurarse de que el directorio raíz es el c:\wamp\www (suponiendo que instalamos ahí el WAMP), y que el puerto es el 80, o el que vayamos a utilizar. En la siguiente captura vemos en qué líneas se encuentran estas configuraciones:


La sección DocumentRoot nos indica entre comillas la ruta donde tenemos el directorio raíz, y para el número de puerto hay que buscar la línea Listen 80, donde 80 será el número de puerto que usemos. También podemos configurar más cosas, como la privacidad de cada uno de los directorios de nuestra web, para decidir si se puede entrar a ellos desde otras máquinas remotas, etc. pero no vamos a entrar en más detalles por ahora. Para más información, consultar en Google. Una vez hechos los cambios, guardamos ese fichero de texto y reiniciamos el servidor, haciendo click en el icono de WAMP y pulsando en Restart All Services.

3.2 PHP: también es necesario configurar PHP, y en ocasiones una mala configuración puede suponer un quebradero de cabeza, pero en principio debería bastar con configurar la variable de entorno Path. Esto le sirve a Windows para saber en cada momento en qué ruta está instalado PHP, para cuando lo tenga que utilizar. Para configurarlo, hay que hacer click derecho en Este equipo del escritorio (el clásico Mi PC) y pinchar en Propiedades. En la pestaña Opciones avanzadas, hacemos click en el botón Variables de entorno, y en la nueva ventana veremos la sección de variables del usuario y las variables del sistema, que es donde tenemos la variable Path. Hacemos doble click en este valor (o un click y después en Editar), y podremos escribir un valor para la ruta. Debería haber ya rutas de otras aplicaciones, por lo que no debemos borrar nada. Simplemente hay que añadir la nueva ruta, separada por punto y coma, como se muestra en la siguiente captura. En este ejemplo, PHP está instalado en C:\wamp\bin\php\php5.4.3, por lo que añadimos esa ruta tal cual al final del todo (asegúrate de cuál es tu ruta exacta dentro de la carpeta de WAMP, comprobando tu versión de PHP), siempre separado por un punto y coma del resto de rutas. Posteriormente se podrían añadir más rutas de otras aplicaciones.


Pero además de esta configuración para PHP, se pueden configurar más cosas, al igual que con Apache, desde un fichero de texto. En este caso se encuentra haciendo click en el icono de WAMP, y después en la sección PHP, el fichero php.ini. De nuevo, hay que tener cuidado al configurar este archivo, y se puede encontrar mucha información en internet, dependiendo de los errores que tengamos o lo que queramos configurar. Al finalizar de guardar los cambios de PHP, hay que reiniciar los servicios de WAMP para que los cambios en la configuración hagan efecto. 


4. ¿Todo correcto? Para ver por fin si todo funciona correctamente, lo primero es comprobar que el icono de WAMP de la barra de tareas es de color verde. Si es así, podemos abrir nuestro navegador y escribir la dirección localhost, o localhost:8080 o el número de puerto que tuviéramos configurado. Si todo es correcto, deberíamos ver la página de inicio de nuestro servidor:


En la sección phpinfo() podemos ver la información y versión de nuestro PHP. En phpmyadmin podremos acceder al sistema de gestión de bases de datos, que veremos próximamente para crear nuestra propia base de datos con MySQL para utilizar en nuestra web. Y en la sección Your projects podemos ver nuestros proyectos web, que inicialmente estarán vacíos.

5. Nuestra primera web. Ahora, por fin, vamos a crear nuestro primer proyecto web. Para ello basta con ir a nuestro directorio raíz c:\wamp\www, y aquí crear una nueva carpeta con el nombre que queramos dar a la web. En nuestro caso será Ejemplo. Y la primera página de la web será por defecto un archivo index.html, que es por donde suelen empezar las webs cuando un usuario entra. Así pues, en nuestra carpeta c:\wamp\www\Ejemplo creamos un archivo HTML llamado index.html, y lo editamos. Recomiendo un editor razonable que permita editar código con comodidad, y no el bloc de notas de Windows. Personalmente recomiendo Notepad++, aunque hay muchos más, pero siempre editores de texto sin formato, nada de procesadores de texto tipo Word o LibreOffice, etc. Si usamos Notepad++, podemos crear ahí un nuevo documento, escribir código y guardar como tipo HTML:


Ahora es donde entra en juego los conocimientos de HTML, que veremos en siguientes posts. Pero por ahora basta con que sepamos que una página web es un fichero con un código que interpreta el navegador para visualizarlo con una estructura y diseño determinados. La página entera debe estar contenida entre las etiquetas <html> y </html>, y dentro suele haber dos secciones importantes, el encabezado, contenido entre <head> y </head>, que contendrá información acerca de la página, como su título (<title>Título</title>), autor, o la codificación del texto. La sección head puede estar vacía por el momento, aunque basta con copiar el código siguiente y servirá (al igual que la primera línea <!DOCTYPE html>, que indica que estamos trabajando con HTML5). Y el cuerpo principal de la web, entre <body> y </body>, que será lo que veamos realmente en la página. Por ejemplo, si escribimos el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="author">
<link rel="icon" href="images/favicon.ico">
<title>Ejemplo</title>
</head>

<body>
<h1>¡Hola mundo!</h1>
</body>
</html>

y guardamos los cambios, al acceder a localhost/Ejemplo nos mostrará esta página principal index.html, de la siguiente manera:


Como vemos, por ahora la web es un simple mensaje de bienvenida. Ese ¡Hola mundo! está contenido dentro del cuerpo, y es lo único que hay. Y además, está entre las etiquetas <h1></h1>, lo que significa que tendrán un estilo de título grande. Existen también etiquetas h2, h3, h4, h5 y h6, a cada cual un poco más pequeña que la anterior. Y si queremos escribir un párrafo normal y corriente, lo haríamos con la etiqueta p. En el siguiente ejemplo vemos algo un poco más elaborado (sólo se incluye la sección del cuerpo):

<body>
<h1>¡Hola mundo!</h1>
<h2>Esta es mi primera web</h2>
<p>
He estado siguiendo los pasos del post que hay en el blog <i>consejosinformaticos.blogspot.com</i> y he llegado hasta aquí. 
<b>¡Un saludo a todos!</b>
</p>
<h3>Alberto</h3>
</body>

y el resultado es el siguiente:


Vemos como cada línea tiene un estilo distinto. La primera está entre h1, lo que le da el aspecto de título grande, siguiendo la tradición de los periódicos. La segunda es un h2, que viene a ser un subtítulo. La tercera es un simple párrafo, contenido entre la etiqueta p. Pero además en esta misma línea vemos una parte en cursiva y otra en negrita. Para ello, lo que queramos resaltar como tal debemos encerrarlo entre las etiquetas i para cursiva y b para negrita, tal y como se ve más arriba en el código ejemplo. Y por último, la última línea es un h3.


6. Continuará. Por ahora esto es todo. Lo más complicado y pesado son los primeros pasos, configurar el servidor, corregir posibles errores y configurar cosas. Aquí hemos comentado lo típico que se debe tocar antes de empezar a usar WAMP, pero es posible que a cada usuario le aparezcan distintos errores que ahora mismo no he contemplado. Siempre se puede buscar en internet, o preguntar aquí en comentarios para solucionarlos. Y el primer ejemplo de web que hemos visto es muy sencillo, únicamente texto y sin formato. Más adelante veremos cómo añadir más elementos, como botones o cuadros de texto, y cómo darles otro aspecto más atractivo. También veremos cómo crear nuestra propia base de datos para poder introducir y manejar datos desde nuestra web.

ATENCIÓN: Si has tenido problemas con la instalación de WAMP, o no te funciona el servidor Apache o PHP y no sabes qué hacer y no te quieres complicar la vida, puedes probar cualquier código HTML que veamos sin necesidad de instalar nada, gracias al editor de W3Schools:

Tryit Editor

Si tienes todo bien instalado en tu equipo, para probar los códigos basta con que los guardes en un fichero .html, y tras guardar cada cambio, cargues de nuevo la dirección localhost en tu navegador. Pero el editor anterior te sirve para probar códigos online, sin instalarte nada. No podrás decir que tengas un proyecto web, pero al menos te servirá para probar código.


Extra:

WAMP Server
Configuración de Apache
Configuración de PHP
Notepad++
Notación HTML