Gracias a HTML hemos podido definir una estructura del contenido de la web, pero el estilo que lleva por defecto es horrible, es el momento de utilizar CSS (Cascading Style Sheets) que le va a decir al explorador como debe presentar esa información.
Para añadir estilo, deberemos añadir una nueva etiqueta: <style> </style>
Volvemos con el ejemplo del capítulo anterior:
<html>
<head>
<title>Menu de la Cafeteria de mi abuela</title>
<style type="text/css">
</style>
</head>
<body>
<h1>Cafes</h1>
<h2>Cafe largo, 0.70$</h2>
<p>Los lunes y martes a mitad de precio</p>
<h2>Cafe expresso, 1$</h2>
<p>Los viernes no hay</p>
</body>
</html>
Vemos que la etiqueta <style> tiene un atributo extra llamado type, que le dice al explorador el tipo de estilo que estamos usando. Es lógico, ya que si usamos CSS es para que seamos nosotros los que elijamos el tipo de estilo. *¿A que se referirá con "tipo de estilo"?
Vale, ahora a modo de ejemplo y como todavía no se absolutamente nada de CSS voy a poner un ejemplo ya hecho, por ahora no hace falta entenderlo. Ya mas adelante iré viendo que significa cada cosa:
<style type="text/css">
body {
background-color: #d2b48c;
margin-left: 20%;
margin-right: 20%;
border: 2px dotted black;
padding: 10px 10px 10px 10px;
font-family: sans-serif;
}
</style>
Vamos a guardar los cambios y volvemos a abrir el archivo .html
%2B17.56.02.png)
*Vaya, ahora se ve mucho mejor.
Es hora de dar el siguiente paso, vamos a comenzar con los enlaces hacia nuevas páginas, porque con un simple menú de cafés no será suficiente, quizás el cliente quiera un menú de bocadillos... o de bebidas en general.
Vale, ahora vamos a hacer algo más complejo.
*Antes de seguir, un dato que he estado mirando sobre los acentos: Los acentos aparecen con la codificación UTF-8, si lo tenemos codificado de otra forma no aparecerán.
también podemos conseguir las tildes de la siguiente forma:
á = á
é = é
í = í
ó = ó
ú = ú
ñ = ñ
é = é
í = í
ó = ó
ú = ú
ñ = ñ
€= &euro
colocando esto nos aparece la tilde.
también, podríamos intentar colocando esta linea de código a todos los archivos html (Justo debajo de la etiqueta <head> pegamos esto:
Pero de esto último no lo he probado aún.
1) Vamos a descargar la carpeta que he preparado para este ejemplo del siguiente enlace: Descargar
2) Abrimos la carpeta y localizamos el archivo: "Menu.html" . Lo abrimos en el blog de notas.
El archivo Menu.html contiene lo siguiente:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Menú del dia </title>
</head>
<body>
<h1> Hamburguesas especiales del día </h1>
<img src="imagenes/menu.png">
<p>
Con nuestros menús del día podrás disfrutar de
todo el sabor de los mejores ingredientes locales
así como de una carne de exelente calidad.
Para acceder solo tienes que hacer clic <a href="hamburguesa/hamburguesa.html">aquí</a>
</p>
<h2>Encuéntranos</h2>
<p>
Nos encontrarás en la localidad de Telde, para más información haz clic
<a href="direccion.html">aquí también</a>.
Te esperamos!
</p>
</body>
</html>
El archivo Menu.html contiene lo siguiente:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title> Menú del dia </title>
</head>
<body>
<h1> Hamburguesas especiales del día </h1>
<img src="imagenes/menu.png">
<p>
Con nuestros menús del día podrás disfrutar de
todo el sabor de los mejores ingredientes locales
así como de una carne de exelente calidad.
Para acceder solo tienes que hacer clic <a href="hamburguesa/hamburguesa.html">aquí</a>
</p>
<h2>Encuéntranos</h2>
<p>
Nos encontrarás en la localidad de Telde, para más información haz clic
<a href="direccion.html">aquí también</a>.
Te esperamos!
</p>
</body>
</html>
Vale, aquí la novedad es lo que está coloreado:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
Nos permitirá cambiar el formato del archivo a UTF-8 con lo que podremos mostrar las tildes, las ñ, etc, sin ningún problema.
<a href="hamburguesa.html">aquí</a>
<a href="hamburguesa.html">aquí</a>
De esta forma vamos a poder añadir ENLACES a otros archivos .html que tengamos.
Todos sabemos lo que es un enlace, haces click y te manda a otra página.
Lo que hacemos aquí es crear un menú de hamburguesa (un poco cutre, si) en el cual nos dirige a otras dos páginas más, una llama hamburguesa.html y otra llama direccion.html .
*No sé exactamente donde tienen que estar localizados los archivos .html para que tu los puedas usar (crear un enlace), no se si basta con que estén dentro de tu disco duro o tienen que estar en la misma carpeta que el archivo desde el que se hace la "llamada"
Es importante ver la estructura del <a> </a> tenemos que poner href="nombreDelArchivoAlQueQueremosDirigirnos.html"
Lo que se encuentra dentro del <a> </a> es el texto que contendrá el enlace (el texto que se pone de color azulito).
Pero ¿Que demonios es eso que meten dentro de los simbolos < Etiqueta yAlgoMas>?!!! Vale, eso se llama ATRIBUTOS y sirven para especificar mucho más el contenido que va dentro de la etiqueta. Por ejemplo, imaginate que tenemos una etiqueta llama <casa></casa> (no existe, solo es un ejemplo) pues así, a secas, sería: <casa>miCasa </casa>
Pero si yo quiero ser más específico, podría usar atributos, entonces podría decir:
<casa hacer="apartamento" color="azul" tamaño="mediana"> miCasa </casa>
¿Pillas la idea? Vamos siendo más específicos a la hora de definir el contenido de mi etiqueta.
En el caso de <a href="hamburguesa.html">aquí</a>
el atributo href quiere decir "enlace" mas o menos.
Por otro lado tenemos:
<img src="menu.png">
Con lo que podremos poner una imagen. (Importante poner la extensión del archivo, si es .jpeg, o .png o .gif etc...
Bueno, abrimos el archivo Menu.html y si tenemos los demás archivos (imágenes y .html) en la misma carpeta veremos un ejemplo de una web muy simple. Donde al hacer clic en los enlaces nos dirigimos a otras páginas.
%2B12.51.38.png)
Organización:
Seamos ordenados, así que a partir de ahora vamos a organizar los proyectos web de esta manera:
- Creamos una carpeta General con el nombre del proyecto ejemplo: WebMenu
- Dentro de esta carpeta vamos a guardar nuestro archivo principal (Menu.html) además vamos a crear una carpeta por cada archivo HTML extra que tengamos (hamburguesa.html y direccion.html) con el mismo nombre que el archivo (sin la terminación .html lógicamente).
- Vamos a introducir en cada carpeta, el correspondiente archivo HTML
- Además de estas carpetas, vamos a crear otra carpeta llamada "imagenes" donde efectivamente, vamos a meter las imágenes.
%2B13.28.06.png)
%2B13.28.14.png)
Pero hay un pequeñito problema (esta era la duda que tenía antes)
Aparece un error muy feo:
%2B13.18.46.png)
El explorador no encuentra los archivos que NO estén en la misma carpeta. ¿Esto por qué ocurre?
Bueno, ocurre porque el explorador piensa que los archivos están en la misma carpeta que el archivo original... Esto es debido a que cuando escribimos:
<a href="hamburguesa.html">aquí</a>
Le decimos al explorador "busca en mi misma carpeta otro archivo llamado hamburguesa.html"
que deberíamos hacer?, fácil, modificamos el código con la ruta del archivo. Es decir,
- ¿Donde estamos? Estamos en el archivo Menu.html
- ¿Donde queremos ir? Queremos entrar en la carpeta hamburguesa y abrir el archivo hamburguesa.html
por lo tanto modificamos nuestro código así:
<a href="hamburguesa/hamburguesa.html">aquí</a>
<img src="imagenes/menu.png">
Todo perfecto!!! pero, un momento... Si hacemos clic en el enlace del archivo hamburgesa.html vemos el archivo html PERO SIN IMÁGENES!
En fin, continuaré con este tema más adelante, ahora toca seguir repasando Java que la tengo muy abandonada.
Un saludo!
Todos sabemos lo que es un enlace, haces click y te manda a otra página.
Lo que hacemos aquí es crear un menú de hamburguesa (un poco cutre, si) en el cual nos dirige a otras dos páginas más, una llama hamburguesa.html y otra llama direccion.html .
*No sé exactamente donde tienen que estar localizados los archivos .html para que tu los puedas usar (crear un enlace), no se si basta con que estén dentro de tu disco duro o tienen que estar en la misma carpeta que el archivo desde el que se hace la "llamada"
Es importante ver la estructura del <a> </a> tenemos que poner href="nombreDelArchivoAlQueQueremosDirigirnos.html"
Lo que se encuentra dentro del <a> </a> es el texto que contendrá el enlace (el texto que se pone de color azulito).
Pero ¿Que demonios es eso que meten dentro de los simbolos < Etiqueta yAlgoMas>?!!! Vale, eso se llama ATRIBUTOS y sirven para especificar mucho más el contenido que va dentro de la etiqueta. Por ejemplo, imaginate que tenemos una etiqueta llama <casa></casa> (no existe, solo es un ejemplo) pues así, a secas, sería: <casa>miCasa </casa>
Pero si yo quiero ser más específico, podría usar atributos, entonces podría decir:
<casa hacer="apartamento" color="azul" tamaño="mediana"> miCasa </casa>
¿Pillas la idea? Vamos siendo más específicos a la hora de definir el contenido de mi etiqueta.
En el caso de <a href="hamburguesa.html">aquí</a>
el atributo href quiere decir "enlace" mas o menos.
Por otro lado tenemos:
<img src="menu.png">
Con lo que podremos poner una imagen. (Importante poner la extensión del archivo, si es .jpeg, o .png o .gif etc...
Bueno, abrimos el archivo Menu.html y si tenemos los demás archivos (imágenes y .html) en la misma carpeta veremos un ejemplo de una web muy simple. Donde al hacer clic en los enlaces nos dirigimos a otras páginas.
Organización:
Seamos ordenados, así que a partir de ahora vamos a organizar los proyectos web de esta manera:
- Creamos una carpeta General con el nombre del proyecto ejemplo: WebMenu
- Dentro de esta carpeta vamos a guardar nuestro archivo principal (Menu.html) además vamos a crear una carpeta por cada archivo HTML extra que tengamos (hamburguesa.html y direccion.html) con el mismo nombre que el archivo (sin la terminación .html lógicamente).
- Vamos a introducir en cada carpeta, el correspondiente archivo HTML
- Además de estas carpetas, vamos a crear otra carpeta llamada "imagenes" donde efectivamente, vamos a meter las imágenes.
Aparece un error muy feo:
El explorador no encuentra los archivos que NO estén en la misma carpeta. ¿Esto por qué ocurre?
Bueno, ocurre porque el explorador piensa que los archivos están en la misma carpeta que el archivo original... Esto es debido a que cuando escribimos:
<a href="hamburguesa.html">aquí</a>
Le decimos al explorador "busca en mi misma carpeta otro archivo llamado hamburguesa.html"
que deberíamos hacer?, fácil, modificamos el código con la ruta del archivo. Es decir,
- ¿Donde estamos? Estamos en el archivo Menu.html
- ¿Donde queremos ir? Queremos entrar en la carpeta hamburguesa y abrir el archivo hamburguesa.html
por lo tanto modificamos nuestro código así:
<a href="hamburguesa/hamburguesa.html">aquí</a>
<img src="imagenes/menu.png">
Todo perfecto!!! pero, un momento... Si hacemos clic en el enlace del archivo hamburgesa.html vemos el archivo html PERO SIN IMÁGENES!
En fin, continuaré con este tema más adelante, ahora toca seguir repasando Java que la tengo muy abandonada.
Un saludo!
No hay comentarios:
Publicar un comentario