¿De qué material están hechas las webs? (Parte 1)

¿Quién no ha tenido alguna vez la curiosidad de, en una web, hacer clic con el botón derecho y darle a "Ver código fuente" e inmediatamente después cerrar la ventana antes de marearse con tantas palabras raras? Pues bien, dichas palabras raras, ya conocido como código fuente, es lo que hace que las páginas webs existan y funcionen. Dicho de otro modo, son los materiales y mecanismos que constituyen una página web.
Comparemos una web con, por ejemplo, un coche (que me encantan los coches, pro cierto). Un coche presenta distintas estructuras: el chasis, la carrocería, el motor, el tapizado, el sistema eléctrico, etc. Una web es igual, solo que las distintas partes se dividen en lenguajes de programación, de los cuales, explicaré los más básicos:

HTML, el chasis
La base para hacer una página web. Con HTML empezarás y con HTML terminarás. Es un lenguaje fácil de distinguir, ya que va siempre entre los caracteres "<" y ">". La mayoría de las etiquetas HTML requieren otra etiqueta de cierre. Éstas requieren simplemente de una barra "/" justo después del carácter "<" (en los ejemplos se verá muy claro). Al igual que con un chasis ya tienes algo parecido a un coche, con un poco de HTML ya tienes una web muy sencilla. Algunas etiquetas importantes son:

<b>: pone el texto en negrita → <b>Texto</b> → Texto

<i>: pone el texto en cursiva → <i>Texto</i> → Texto

<u>: subraya el texto → <u>Texto</u> → Texto

<strike>: tacha el texto → <strike>Texto</strike> → Texto

<center>: centra el texto → <center>Texto</center> →
Texto

<font>: personaliza el texto en tamaño, fuente y color:
·tamaño: "size=nº" según el número que pongas, el tamaño será mayor o menor.
·color: "color=color" puedes escribir el color en inglés o el código de color.
·fuente: "face=tipo de letra" aquí escribes el tipo de letra que más te gusta (recomendable escribirlo entre doble comillas " "). Si no sabes el nombre de la fuente que te gusta, puedes buscar en el Word o en el Bloc de notas.
·ejemplo → <font size=4 face="segoe ui" color=red>Texto</font> → Texto

<a>: permite colocar enlaces en la web, aunque combinado con más lenguajes de programación tiene otros usos. Se puede decidir si en enlace se abrirá en la misma página, en una nueva pestaña o en una ventana "pop-up" mediante la etiqueta "target". En el ejemplo, abrirá el enlace en una nueva pestaña. También se puede incluir un comentario para que al situar el cursor encima del enlace salga una pequeña descripción. Eso se consigue con la etiqueta "title" → <a href="http://atravesdelaredderedes.blogspot.com.es/" target="_blank" title="A través de la red de redes">Texto</a> → Texto
·También se puede usar imágenes en vez de texto para que haga de enlace
·Truco: puedes crear enlaces para saltar a una sección de la misma página. Ejemplo → Este será el enlace: <a href="#marca">Saltar a</a> El lugar a donde quieras saltar, pon lo siguiente: <a name="marca"></a>. El término marca puedes cambiarlo por el que quieras, siempre y cuando en ambos enlaces ponga exactamente lo mismo. Destaco bien las diferencias entre ambos enlaces, ya que el más mínimo error puede ocasionar que no funcione como esperabas → Saltar a abajo 

<img>: permite colocar imágenes o vídeos. Puedes personalizar el tamaño mediante las etiquetas "height" (altura) y "width" (anchura) → <img src="http://goo.gl/EzVTI" width=30 height=18> → 

<br>: permite hacer un salto de línea

<p>: permite hacer un salto de línea dejando un espacio en blanco

<hr>: dibuja una línea horizontal

<table>: puedes hacer una tabla. Para ello, empiezas con la etiqueta "<table>". Se puede editar el tamaño del borde con "border" y el espacio entre celdas con "cellspacing", entre otros. Después empiezas a colocar filas con "<tr>". Finalmente, en cada fila pones tantas columnas como necesites con "<td>". Las etiquetas "<td>" se pueden personalizar con "rowspan" y "colspan" para que ocupe un número determinado de filas o columnas →
<table border=3 cellspacing=0 width=30 height=60>
   <tr>
      <td> - </td><td colspan=2 rowspan=2><center> - </center></td><td> - </td>
   </tr>
   <tr>
      <td> - </td><td> - </td>
   </tr>
   <tr>
      <td> - </td><td> - </td><td> - </td><td> - </td>
   </tr>
</table> →

-	-		-
-			-
-	-	-	-

Crear listas:

·<ul>: lista desordenada

·<ol>: lista ordenada

·<li>: elemento de una lista

·Ejemplo →

<ul>

<li>Uno

<li>Dos

<li>Tres

</ul>

<hr>

<ol>

<li>Uno

<li>Dos

<li>Tres

</ol>

→

• Uno
• Dos
• Tres

---

1. Uno
2. Dos
3. Tres

<body>: todas las etiquetas anteriormente vistas se colocan dentro del body, es decir, entre las etiquetas "<body>" y "</body>". Esto no es obligatorio, sin embargo ayuda a una lectura del código más fácil. Con esta etiqueta, además, se puede cambiar el color de fondo. Basta con añadir la etiqueta "bgcolor" → <body bgcolor=red></body> →

·Nota: este cambio de color de fondo se emplea para cambiar el fondo de TODA la web. Para cambiar el fondo de una determinada sección se empleará otro lenguaje que veremos más adelante, el CSS.

Otras etiquetas: hay otras etiquetas HTML que ahora no nos van a servir para nada. Sin embargo, en los próximos lenguajes de programación que veremos, sí que nos serán realmente útiles. No las explicaré; de momento bastará con que las mencione:
<script>
<div>
<head>
<span>
<style>
...

Con esto puedes empezar ya a crear tu propia página web. Ahora te toca a ti probar suerte. Aquí puedes ver un ejemplo de una página básica (mira el código fuente para servirte de guía). En las siguientes entradas veremos otros lenguajes de programación para ponerle carrocería, motor y mucho más a nuestro chasis para que quede como un bonito coche de calle... o de carreras. La elección a gusto del consumidor.