Que en paz descanse. Este discurso me llego en un momento dificil de mi vida.

Probablemente conoceras esta historia: en los tiempos en donde los cheat codes aun eran comunes (tanto de uso para el programador, como para desbloquear cosas rapido) Konami hizo algo bien curioso.
Hizo propia una secuencia de botones y la repitio en un conjunto de juegos. La misma secuencia podia darte muchas vidas en el Contra, transformar a un arbitro en perro o desbloquearte todas las fases.

La secuencia es: Arriba Arriba Abajo Abajo Izquierda Derecha Izquierda Derecha B A
Y como generalmente tenias que ingresarla en la pantalla del titulo, en ciertas paginas le han agregado un START al final. Ese el codigo Konami.

Pues bien, ayer supe que esta famosa secuencia es aplicable en Facebook; en el home o en el perfil tienes que seguir la secuencia con la cruceta y las letras del teclado, y en vez de START hay que darle al ENTER.

No es la gran cosa el efecto, pero siempre me han gustado estos detalles frikis

Saludos

En esta ocasión veremos los tres elementos más básicos de una página; la escritura, los links y las imagenes. Las tres, combinadas de buena manera, y con algo de imaginacion, ya pueden hacer una web sencilla pero resultona.

Fuentes:

Como ya vimos en la primera parte del cursillo, la escritura en las webs se puede hacer simplemente escribiendo el texto entre las etiquetas de "body". Como se pudieron dar cuenta, este es sin formato, para lo cual introduciremos las etiquetas "<p></p>" y "<font></font>".

<p>: Es de Parrafo. Esta, junto con el atributo align crea los distintos efectos de texto izquierdo, derecho, centrado o justificado.
Esto sería en código: <p align="right">Esto es texto en la derecha</p>
Y se vería así:

Esto es texto en la derecha

Lo mismo para "center", "left" y "justify".

<font>:
Los atributos de esta etiqueta le pueden dar fuente, tamaño y color a tu texto.
"size" es para el tamaño, y recibe números naturales.
"face" recibe el nombre de la fuente.
"color" recibe tanto como el nombre en ingles o su codificacion en hexagesimal (super sencillo ¬¬)

Un ejemplo sería:
"<font size="2" face="Verdana">
Este texto es de tamaño 2 y fuente Verdana</font>
o bien:
<font size="2"><font face="Verdana">
Este texto es de tamaño 2 y fuente Verdana
</font></font>
Dando el mismo resultado. Dos atributos de la misma etiqueta, se pueden poner juntos, como en el ejemplo.

También existen otras etiquetas como "<strong></strong>"(que deja el texto en negrita), "<em></em>"(cursiva), "<u></u>"(subrayado), etc. Estas junto a la etiqueta simple "<br/>"(salto de linea) las mas comunes en un texto.

Links:

"<a></a>" es la etiqueta de los links. Estos, por si solos no funcionan, ya que hay que darles del atributo href para hacerlos funcionales.

Esto sería algo asi:
<a href="http://www.vandal.net">Vandal Online</a>
Sería igual es esto: Vandal Online

También puedes usar el atributo name para crear un link dirigido.
<a name="here"></a>
Aqui, un link del tipo http://www.vandal.net#here te llevaría al home de Vandal, a la altura de donde existiese el blanco "here". Si existiese, claro está.

Imagenes

No hay mucha ciencia, asi que iremos de inmediato a los ejemplos:
<img src="http://i187.photobucket.com/albums/x206/Nosgoroth/megaman1w7ce.jpg"></img>
Es lo mismo que esto:

Y como atributos tenemos:
"width": re-dimensiona el ancho de la imagen. Recibe tanto numeros naturales (que son pixeles), tanto como porcentajes (ej:"50%"), que estira o contrae la imagen según el tamaño de tu pantalla.
"height": Lo mismo pero con la altura.
"title": Es el texto que aparece cuando dejas el mouse sobre la imagen durante unos segundos.
"alt": El texto que aparece cuando el explorador no puede cargar correctamente la imagen.

Por último, si combinas los atributos <a> y <img> en ese orden (o sea algo como <a href=URL1><img src=URL2></img></a>, puedes crear una imagen-link, que se puede usar como un botón.

--------------------------------------

Fin de esta parte. Es harto que leer e interiorizar, pero habra un tiempo hasta el siguiente cursillo. Como siempre les digo, practiquen y practiquen, y cualquier duda exponganla en los comentarios. Hasta luego

Lo que hoy veremos no es mucho, pero aprovecho igualmente de subirlo, para que vean que el cursillo aún esta vivo, pero por distintos motivos no he podido retomarlo.

Como dice el título, veremos algunas de las cosillas que he aprendido que se pueden colocar entre las etiquetas <head> que dejamos pendientes la vez pasada.

Si recordamos, dijimos que los que va entre <head></head> eran los atributos que tenía nuestro documento.

Veremos el día de hoy 3:

"<title></title>": Lo que coloques aquí, seá el título de tu página, que es, lo ves en la parte superior del navegador, o cuando guardas la página en favoritos. Por ejemplo, el de este blog es "<title>Doctor Light's Lab</title>"

"<link rel="SHORTCUT ICON" href="URL"></link>": Esta etiqueta, es en donde colocas el ícono que tenga tu página cuando lo guardes en favoritos( o siempre visible en las pestañas de Firefox). Es cosa que en donde dice URL coloques la dirección en donde tienes el ícono, que tiene que ser un archivo de extensión ".ico" y de dimensiones 18x18 (sí, menos que el avatar de Vandal).

Por último, y para mí inutil hasta el momento, es el "<meta name="keywords" content="palabra">", que es donde guardas las palabras clave que usan los buscadores para encontrar páginas, pero hay que hacer el previo registro (por eso inutil, ya que no lo he hecho ). En donde dice palabra, colocas todas las palabras claves que identificaran a tu página. Recuerda que deberán ir separadas por comas.

A falta de imagenes en esta ocasión, cree un archivo html en donde vienen aplicadas estas tres etiquetas.

Página de Prueba

El código de este ejemplo es el siguiente:

<head>
<title>Doctor Light's Lab: Head</title>
<link rel="SHORTCUT ICON" href="http://www.cec.uchile.cl/~nperez/images/7.ico"></link>
<meta name="keywords" content="Thomas Light, Megaman">

</head>

Bueno, esto sería todo por esta vez. Nuevamente les recuerdo que prueben, que investiguen y experimenten... y felices Fiestas!

Ya que en los últimos meses he aprendido algo de Html, he decidido retribuirle algo al foro con un mini tutorial que permitirá hacer bastantes cosas interesantes con html. Partirá de lo más básico, y dependiendo de su aceptación será su duración.

Hoy partiremos con lo más básico: crear un archivo html. Todo contará con imagenes para que no haya ninguna duda.

Primero, creamos una carpeta donde crearemos todos nuestros proyectos en html. Para no ser original, a la del ejemplo le pondré "Html"



Luego abrimos un block de notas en el menú de programas de Windows



Aquí, escribiremos lo más básico: Como se ve en la imagen todo nuestro código debe estar entre dos "etiquetas" que dicen html. Como verán, es muy parecido a los códigos de Vandal, así que no debería ser mucho problema.



Luego escribiremos las etiquetas "head" y "body". La primerá servirá para poner el nombre que se verá en nuestro navegador, el ícono de favoritos, las palabras clave para el buscador, y otras cosas que dejaremos para otra ocasión. El "body", como su nombre lo dice, será el cuerpo de nuestro documento. Está etiqueta, como otras, pueden recibir algunos parametros que modificarán el actuar de lo que esté entre el par, pero eso también lo veremos en otra ocasión.



Ahora escribiremos lo que se nos ocurra entre las etiquetas de "body".



Ahora, guardamos nuestro archivo en nuestra carpeta(yo le pondré "Bamdal") y cambiamos su nombre de "Bamdal.txt" a "Bamdal.html".



Si no podemos hacer esto directamente, habrá que hacer un paso extra: Vamos a Herramientas/Opciones de Carpeta...



.../Ver, y aquí le quitamos la marca a "Ocultar las extensiones de archivo para tipos de archivo conocido"



La otra manera de hacerlo, es al momento de guardar el archivo colocar el nombre con la extensión todo entre comillas, así se creará directamente el documento deseado.



Por último abrimos el archivo con cualquier explorador de internet (en el ejemplo Internet Explorer).



Y listo! Tenemos nuestra primera página web.



Ahora es cosa de buscar un servidor en la web y colgarlo, y experimentar, hasta una siguiente clase