domingo, 21 de diciembre de 2014

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

Seguimos con esta especie de tutorial para crear nuestra propia web desde cero. En el artículo anterior vimos cómo configurar los servicios necesarios para lanzar nuestro primer proyecto web de forma local y empezar a mostrar algunos resultados a modo de texto de bienvenida. Ahora vamos a ver cómo rellenar nuestra primera página con algo más de contenido y con más elementos hasta crear nuestro primer formulario.

ATENCIÓN: Si no tienes instalado un servidor local o tuviste problemas con los pasos del artículo anterior para instalar y configurar WAMP (no te funciona Apache o PHP, etc.), puedes probar cualquier código HTML y probar sus resultados aquí:

Tryit Editor de W3Schools

Si habéis hecho los deberes y habéis practicado un poco con código HTML habréis visto que cada elemento de una web lo contienen unas etiquetas. Cada tipo de etiqueta es un elemento distinto, por ejemplo para texto, tenemos que...

<h1>Esto es un título grande</h1>
<h6>Y este es el título más pequeño, pasando por h2, h3, h4 y h5</h6>
<br>
<p>Esto es un párrafo. Y el br de arriba es un espacio en blanco</p>
<i>Esto estará en cursiva</i>
<b>Esto en negrita</b>
<u>Y esto subrayado</u>
Todo esto va junto, ya que no lo hemos encerrado en un párrafo.
<p>Y esto es un nuevo párrafo. Y bajo esto habrá una línea gracias al hr:</p>
<hr>

Podéis probar el código de arriba para ver lo que muestra. Recordad que todos los ejemplos de código que veamos aquí deben ser introducidos en el cuerpo (salvo que se diga otra cosa), es decir, entre las etiquetas <body> </body>. El ejemplo anterior mostraría lo siguiente:

Una vez dominados los elementos de texto, vamos a añadir otros elementos como botones, cuadros de texto o menús seleccionables. Estos nuevos elementos están hechos para realizar alguna acción en concreto, pero estas acciones y funciones las veremos más adelante. Por ahora sólo vamos a ver cómo añadirlas a nuestra página.

Vamos a suponer el típico ejemplo de una página de registro de usuario. Necesitamos introducir un nombre de usuario, un correo electrónico, una contraseña, elegir nuestra edad... y una vez rellenado el formulario, necesitaremos un botón para enviar esa información al servidor. Vamos a ver cada uno de estos elementos:


Los inputs son elementos que reciben alguna información, como por ejemplo un cuadro de texto, o una casilla de validación. Es algo con lo que interactuamos. Y hay de varios tipos según la versión HTML5 que estamos utilizando y que acepta nuevos modelos predefinidos, algunos de los más utilizados y que veremos son:

text: Son los clásicos cuadros de texto, donde introduciremos texto cualquiera.
number: Son cuadros de texto donde sólamente introduciremos algún número.
email: Estos cuadros de texto validarán automáticamente una dirección de correo electrónico.
password: En estos cuadros de texto se ocultarán los caracteres para introducir contraseñas.
file: Esta vez nos mostrará un botón que al pulsarlo nos permitirá seleccionar un archivo.
date: Nos mostrará un cuadro con un calendario para seleccionar una fecha.
button: Un botón cualquiera
radio: Es un botón de opción, donde sólo podemos elegir uno entre los que haya.
checkbox: Es también un botón de opción o validación, pudiendo seleccionar varios.

Ahora bien, ¿cómo hacemos en nuestro código para decidir de qué tipo queremos añadir el input, y cómo lo escribimos exactamente? Pues toca hablar de los atributos de las etiquetas. Cada etiqueta puede tener atributos para indicarle el tipo, la clase, el estilo... cosas concretas que queramos para el bloque que estamos etiquetando en ese momento. En el caso de la etiqueta <input> lo que queremos indicarle es el tipo, y así sería la manera de hacerlo:

<input type="text">

Es decir, a continuación del nombre de la etiqueta (pero siempre dentro, antes de acabar con el símbolo de cierre > ) le indicamos que el tipo será "text". Para los tipos de arriba se utiliza la palabra clave type, seguida del símbolo igual, y la palabra del tipo que queramos entre comillas. Así tendríamos también <input type="file">, <input type="button"> o lo que queramos. 

Además del tipo, hay más atributos que podemos añadir a las etiquetas. Por ejemplo, es útil y a veces necesario identificar cada elemento de manera única, para no confundirlo con otros elementos parecidos. Por ejemplo, cuando queramos rellenar un formulario, debemos identificar qué input será el que recoja el nombre, y cuál el que contenga la contraseña, etc. Para identificar cada elemento utilizamos la opción id, que como todas las opciones irá dentro de la etiqueta. Además, para que luego el servidor sepa cómo se llama cada dato que recoge, lo reconoce con la opción name, es decir, el nombre del dato. Normalmente id y name sirven para casi lo mismo, para identificar con un nombre el elemento en cuestión, la diferencia es que cada opción los identifica para un contexto distinto. Más adelante veremos en detalle estas diferencias. Por ahora vamos a ver algunos atributos que nos interesan para nuestros elementos:

type: Indica el tipo de elemento (input en este caso) como hemos visto antes.
id: Identifica un elemento con un nombre, que debe ser único en la página.
name: También identifica un elemento con un nombre único, pero esta vez es usado por el formulario para nombrar cada valor recogido. Los elementos sin nombre no serán procesados.
class: Indica que el elemento pertenece a una clase, a la que le daremos un nombre. Puede haber muchos elementos de la misma clase, útil para indicar a ese conjunto ciertas acciones o comportamientos por igual. Esto lo utilizaremos más adelante para dar estilos con CSS.
text: Podemos añadir un texto adicional al elemento.
value: Es un valor que ya predefinimos si queremos, pero que podemos modificar.
placeholder: Es un texto informativo que aparecerá sobre el cuadro de texto, pero que desaparece en cuanto escribimos.

Para ver algún ejemplo aclaratorio, veamos el siguiente código:

<input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre">
<input type="password" id="contrasena" name="contrasena">
<input type="button" id="enviar" value="Enviar datos">

Esto es lo que mostraría ese código:

Podemos ver que aparece el texto Introduce tu nombre en el primer input, esto sería el texto que pusimos en la opción placeholder. El segundo sería el de la contraseña, y si escribimos ahí, veremos los símbolos punteados que ocultan lo que escribamos, gracias a que pusimos type="password". Por último, el botón muestra el texto Enviar datos, que introdujimos en la opción value. Por otra parte vemos que los tres elementos aparecen alineados uno detrás de otro. Si queremos que aparezcan uno debajo del anterior, debemos poner cada elemento encerrado en un párrafo, o introducir espacios en blanco. También podemos añadir texto de por medio para aclarar mejor lo que vemos en pantalla. Por ejemplo:

<p>
Nombre de usuario:<br>
<input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre">
</p>
<p>
Contraseña:<br>
<input type="password" id="contrasena" name="contrasena">
</p>
<hr>
<input type="button" id="enviar" value="Enviar datos">



Vamos a ver también este elemento que utilizaremos en nuestro formulario. Los select son listados con opciones predefinidas a elegir. La forma de su código es muy sencilla:

<select id="nacionalidad" name="nacionalidad">
   <option value="0">Elije tu país</option>
   <option value="1">España</option>
   <option value="2">Resto de Europa</option>
   <option value="3">Resto del mundo</option>
</select>



Como vemos, hemos llamado e identificado a ese elemento select como nacionalidad, y dentro de las etiquetas <select></select> hemos añadido varias opciones, cada una con su etiqueta <option></option>. A su vez, estos elementos option contienen el atributo value, que indica que internamente cada opción valdrá ese valor (en este ejemplo, 0, 1, 2 y 3). Pero lo que se muestra al usuario es el texto contenido entre las etiquetas, y no esos valores numéricos. Podemos añadir el atributo selected al final de la etiqueta option que queramos, para que esa opción sea la marcada por defecto. Si no ponemos nada, la que veamos marcada al principio será la primera. Si por ejemplo queremos en el ejemplo anterior que por defecto esté marcada la opción Resto de Europa, en esa opción pondríamos:

<option value="2" selected>Resto de Europa</option>



Un elemento div es una sección de la página. Viene a ser una división por bloques de la página, como si quisiéramos trocear la web para añadir varios bloques dentro del cuerpo. Por ejemplo, nos puede interesar añadir una sección arriba que ocupe todo el ancho, para poner el título de la web. Después podemos querer tener un bloque a la izquierda que ocupe hasta abajo, para añadir un menú, y un bloque contenedor principal que ocupará el resto del cuerpo. Los divs son invisibles, son simplemente una organización de los elementos que tenemos en la página. Pero son útiles a la hora de añadir estilos con CSS, por lo que entraremos más en detalle con este elemento más adelante. Un ejemplo sería el siguiente:

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

<div class="cuerpo">
   <h2>Esto es el resto de la página</h2>
   <p>Y podemos escribir y rellenar todo el cuerpo</p>
</div>


Nótese en la figura anterior que lo marcado en rojo no se muestra, es una indicación que hago para indicar que cada una de las dos secciones div de la página contienen una parte de la página. Visualmente no se ve ni diferencia nada en este caso. Pero veremos cómo sacarle partido más adelante con los estilos.

Vamos a seguir haciendo nuestro formulario de registro. Por ahora con los elementos input y los elementos de texto que conocemos, ya tenemos para construir nuestro propio formulario. Y todo un bloque de elementos que forman un formulario deben ir a su vez en un bloque <form></form>, que lo que hará será recoger todos los datos introducidos en los inputs para enviárselos después al servidor. A esta etiqueta form también hay que pasarle algunas opciones. Por ejemplo, debemos indicarle a qué página debe dirigirse con los datos que recoja del formulario, para que el servidor trate esos datos (para guardarlos después o lo que sea). También debemos indicarle al formulario el método de recogida de datos, pudiendo ser GET o POST (más info sobre GET/POST), que son métodos del protocolo HTTP de Internet. Básicamente, GET recoge los datos por parámetros que se pasarán en la url, y POST recogerá esos parámetros de manera más oculta para el usuario. Por ejemplo, si vemos en alguna web una dirección del tipo www.ejemplo.com/enviar.php?id=1&nombre="Pepito", esto quiere decir que esa web está enviando por su página enviar.php, y a continuación envía los parámetros id y nombre con valores 1 y Pepito, respectivamente. Los parámetros se añaden tras el símbolo ? detrás de la dirección de la página, y por cada parámetro añadido, se coloca tras el símbolo &. Esto es útil a veces, pero para formularios donde introducimos información privada y contraseñas, no es recomendable, pues lo podría ver cualquiera en la barra de direcciones. Por eso en nuestro formulario utilizaremos el método POST. Esto se lo indicamos con la opción method="post" dentro de la etiqueta form

Bien, es hora de escribir un formulario completo, así que aquí tenéis el siguiente ejemplo. En algunos elementos se ha añadido el atributo required, que indica que es obligatorio introducir algún dato en ese campo antes de enviar nada. Probad por vuestra cuenta con los elementos y textos que queráis, y analizad bien lo que hace cada cosa:

<div class="encabezado">
  <h1>Mi primera web</h1>
</div>
<div class="cuerpo">
  <form id="registro" name="registro" action="registro.php" method="post">
    <h2>Registro de usuario</h2>
    <hr>
    <h3>Introduce tus datos personales:</h3>
    <p>
    Nombre de usuario:<br>
   <input type="text" id="nombre" name="nombre" placeholder="Introduce tu nombre" required>
    </p>
    <p>
    E-Mail:<br>
  <input type="email" id="email" name="email" placeholder="email@ejemplo.com" required>
    </p>
    <p>
    Contraseña:<br>
    <input type="password" id="contrasena" name="contrasena" required>
    </p>
    <p>
    Fecha de nacimiento:<br>
    <input type="date" id="fecha-nacimiento" name="fecha-nacimiento">
    </p>
    <p>
    Nacionalidad:<br>
    <select id="nacionalidad" name="nacionalidad">
      <option value="0">Elije tu país</option>
      <option value="1" selected>España</option>
      <option value="2">Resto de Europa</option>
      <option value="3">Resto del mundo</option>
    </select>
    </p>
    <p>
    Foto:<br>
    <input type="file" id="foto" name="foto">
    <p>
    <input type="checkbox" id="acepto" name="acepto" required>
    Acepto los términos y condiciones
    </p>
    <hr>
    <input type="submit" id="enviar" value="Enviar datos">
  </form>
</div>



Por ahora este formulario no hace nada. Fijaos en que el botón de enviar datos es de tipo submit, y no button. Esto hace que el elemento se convierta en un botón de envío de datos (submit en inglés), y al pulsarlo, lo que hará el formulario será dirigirse a la página registro.php que es la que hemos puesto en el atributo action de la etiqueta form, arriba. Pero aún no tenemos esa página, por lo que si pulsamos el botón nos dará un error. Más adelante veremos cómo crear una página del servidor en PHP para que recoja esos datos y haga cosas con ellos, y crearemos una pequeña base de datos para guardar esos datos.

Por ahora eso es todo. En el siguiente post veremos cómo crear estilos para que la web sea algo más bonita, y no en blanco y negro como hasta ahora. Y después veremos cómo crear una base de datos en MySQL y una página PHP que trabaje con los datos del formulario. También veremos cómo validar datos con JavaScript, pero paso a paso. Os recomiendo seguir practicando con los elementos HTML consultando la web del W3Schools y añadiendo elementos y creando plantillas o pequeñas webs de texto y otros elementos


Extra:


Prueba tu propio código HTML sin instalar nada: Tryit Editor


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