Doctor Light's Lab

Categoría: Programación

Mini Cursillo de Html - 02: Fuentes, Links e Imagenes
Publicado @ 17:04 - 2/1/2008
Etiquetas: Curso, Tutorial, html

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 "" y "".

: 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: Esto es texto en la derecha
Y se vería así:

Esto es texto en la derecha

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

:
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:
"
Este texto es de tamaño 2 y fuente Verdana
o bien:

Este texto es de tamaño 2 y fuente Verdana

Dando el mismo resultado. Dos atributos de la misma etiqueta, se pueden poner juntos, como en el ejemplo.

También existen otras etiquetas como ""(que deja el texto en negrita), ""(cursiva), ""(subrayado), etc. Estas junto a la etiqueta simple " "(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 ;)

0 comentarios :: Enlace permanente :: Enviar
Categorías: Programación

Mini Cursillo de Html - 01: Que puedo hacer en el Head
Publicado @ 16:59 - 24/12/2007
Etiquetas: Curso, Tutorial, html

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 :P). 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!

1 comentarios :: Enlace permanente :: Enviar
Categorías: Programación

Mini Cursillo de Html - 00: Como crear un archivo html
Publicado @ 16:26 - 9/12/2007
Etiquetas: Curso, Tutorial, html

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" :P

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.