Con los conocimientos que ya tenemos vamos a crear nuestra primera página web básica. Y vamos a descubrir el poder del CSS para cambiar la apariencia del HTML.
Lo primero que vamos a realizar es crear un archivo HTML donde vamos a juntar algunas de las partes del curso que ya hemos visto por separado.
Vamos a usar encabezados, tablas, imágenes, enlaces, parrafos, separadores y algunas etiquetas para formatear texto.
En el recuadro inferior teneis el código completo que vamos a usar en el primer paso del tutorial.
Y digo en el primer paso, porque habrá un segundo paso donde podréis comprobar como podemos transformar el "soso" resultado
que obtenemos al visualizar nuestro código en el navegador.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- esta etiqueta es necesaria para no tener problemas con los acentos -->
<title>Primera web Básica</title> <!-- Ponemos el título de nuestra web -->
</head>
<body>
<h1>bubbly´s web</h1> <!-- Normalmente en el h1 colocaremos el título de nuestra web -->
<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen de Bubbly" title="hola soy Bubbly">
<!-- ojo con el tamaño de las imágenes, si es muy grande usar el atributo width para adaptarla a vuestra resolucion de pantalla -->
<!-- para ver mi imagen necesitais estar conectados a internet -->
<p>Hola me llamo <em>bubbly</em>, y ésta es mi primera página web. <!-- fijaros en la diferencia entre em y strong -->
Todavía estoy aprendiendo, pero muy pronto me convertiré
en una <strong>ninja</strong> del web-design.
</p>
<hr> <!-- separador horizontal -->
<p> <!-- los parrafos son elementos que se disponen en bloque, ocupan todo el ancho del navegador -->
Voy a demostraros que sé como usar las listas fácilmente.<br>
Para ello os recomendaré mis juegos favoritos.
</p>
<ol title="Lista Ordenada"> <!-- Usamos una lista ordenada -->
<li>Call of Duty: Ghosts.</li>
<li>Batman.</li>
<li>Tomb Raider.</li>
</ol>
<p>También me gustan:</p>
<ul title="Lista No Ordenada"> <!-- Usamos una lista no ordenada -->
<li>Fifa 14.</li>
<li>NBA.</li>
<li>Max paine 3.</li>
</ul>
<hr>
<p>Las imágenes no tienen secretos para mí. Les doy el tamaño<br>
que me interesa.
</p>
<p>
<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen bubbly" width="150" title="Imagen con un ancho de 150 px.">
<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen bubbly" width="100" title="Imagen con un ancho de 100 px.">
<img src="https://sites.google.com/site/mybubblyweb/scripts/bubbly.png" alt="imagen bubbly" width="50" title="Imagen con un ancho de 50 px.">
<!-- fijaros que las imágenes son elementos que se disponen en la misma linea , no existe salto entre ellas -->
</p>
<hr>
<p>También conozco las tablas y los enlaces.</p>
<table> <!--creamos una tabla 4 x 2 ( 4 FILAS 2 COLUMNAS) -->
<tr title="Ejemplo de una tabla, en la cual incluimos enlaces.">
<td>Webs.</td>
<td> Dirección.</td>
</tr>
<tr>
<td>En la red.</td>
<td><a href="http://redondelasequeja.blogspot.com">Enlace a En la red.</a></td>
</tr>
<tr>
<td>Facebook</td>
<td><a href="http://facebook.com">Enlace a facebook.</a></td>
</tr>
<tr>
<td>Club Penguin</td>
<td><a href="http://www.clubpenguin.com/es/">Enlace a Penguin.</a></td>
</tr>
</table>
<hr>
<p>Como veis ya soy capaz de unir en una misma página<br>
muchas de las cosas que he aprendido durante el curso.<br>
Pero so voy a contar un secreto.
</p>
<blockquote>
Miguel me ha dicho que<br> lo <strong>bueno</strong> empieza <em>ahora.</em>
<br>
Aprenderemos a darle<br> estilos al HTML. Es decir<br> a usar colores y a colocar<br>
el contenido como<br>a nosotros nos interese.
</blockquote>
</body>
</html>
El resultado que obtendremos en el navegador será el que podeis observar en la imágen inferior.
Como se puede observar con el HTML por si solo, el resultado no es muy agradable visualmente.
Pero tenemos una herramienta super-poderosa llamada CSS ( hojas de estilo en cascada ) que consigue que un mismo código HTML se pueda ver en el navegador de formas muy diferentes. La continuación de nuestro curso se centrará en el dominio de las propiedades de CSS, que nos permiten usar colores, tipos de letras, tamaños, colocación de los elementos en la página y muchas cosas más que iremos viendo poco a poco.
Como avance del poder de estas propiedades en el cuadro inferior tenemos un código CSS.
La forma de usarlo es la siguiente:
Debéis copiar el código y lo pegaréis entre las etiquetas <head> .... </head> debajo del tìtulo de nuestra web.
<style>
*{
margin:0;
}
body{
background-color:#999;
font-size:150%;
}
h1{
text-align:center;
color:#32cd32;
background-color:#888;
margin-bottom:20px;
padding:20px;
font-size:3em;
}
img{
margin: auto;
display:block;
}
p{
width:70%;
margin:1% auto;
padding:10px;
border: 5px solid #666;
border-radius: 20%;
background-color: #888;
}
p img{
display:inline;
}
ul, ol{
width:60%;
margin:2% auto;
padding-left:60px;
}
hr{
margin: 20px auto;
width: 70%;
border-top: 1px solid #1AFF06;
border-bottom: 1px solid #F8F800;
}
table{
margin:2% auto;
border-collapse: collapse;
width:70%;
text-align: center;
}
td {
padding: 6px;
border: 1px solid #ccc;
}
tr:nth-of-type(odd) {
background: #eee;
}
blockquote{
width:20%;
margin:2% auto;
border: 5px solid #666;
border-radius: 100%;
background-color: #888;
padding:60px;
text-align: center;
}
a{
text-decoration:none;
font-variant:small-caps;
color:#006600;
padding:5px;
}
a:hover{
background-color:#C49FC7;
color:#fff;
}
</style>
No os asustéis de este código, porque aúnque ahora parezca complicado no lo es en absoluto. Simplemente quiero que lo useis para que comprbéis que lo divertido empieza ahora, y que con poca cosa podemos crear otras muy divertidas.
Tras añadir el código de CSS, nuetro archivo se verá así:
Este sólo es un ejemplo muy básico de lo que podemos lograr. A partir de ahora aprenderemos como dar una estructura consistente a nuestros proyectos.
Espero que os ilusione esta nueva etapa porque sé que os va a divertir muchísimo.
Si habeis tenido algún problema sólo tenéis que comentarlo y lo arreglaremos juntos.
Un saludo.