Doctor Light's Lab

Publicado: 17:04 02/01/2008 · Etiquetas: Curso, Tutorial, html · Categorías: Programación
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


Doctor Light's Lab

Thomas Light
Blog de Thomas Light
Luchando por un futuro

Posts destacados por el autor:
· Como leer Spiderman - Todo lo que siempre quiso saber
· Pokemon SoulSilver - Tras 190 horas de juego...
· Mi Coleccion de Megaman
· Que hacer en caso de Troll - Manual Basico
· Que ha pasado con Marvel en todos estos años?
· Un año de Brawl! Logros y estadisticas
· Indice de todas las entradas
· Thomas Light presenta: Mi colección / N64-GC
· Grandes Historias del Flash V2: Super Mario Bros. Z



Vídeos:
· Megaman X / Rockman X



Blogs amigos:
ASTURmatr
BANJO
Fay Masters
fredpalas
gabla
Guardeja
Jaccro
Jimmytrius
Jordav
Kiriyama
Kwisatz Haderach
Neouz
Osaka_no_Kotatsu
Peibbol
pgrandio
SebaGilmour
Shino-Kun
ShintaKun
Shoot Gunner
TitoVR
Vikutoru


Categorías:
Blog
Cine/TV
Flash/ Videos
General Juegos
Manga/Anime/Comic
Programación


Archivo:
Mayo 2014
Junio 2013
Enero 2013
Diciembre 2012
Agosto 2012
Julio 2012
Mayo 2012
Abril 2012
Marzo 2012
Febrero 2012
Enero 2012
Diciembre 2011
Noviembre 2011
Octubre 2011
Septiembre 2011
Agosto 2011
Julio 2011
Junio 2011
Mayo 2011
Abril 2011
Marzo 2011
Enero 2011
Diciembre 2010
Noviembre 2010
Octubre 2010
Septiembre 2010
Julio 2010
Junio 2010
Mayo 2010
Marzo 2010
Febrero 2010
Diciembre 2009
Noviembre 2009
Octubre 2009
Septiembre 2009
Agosto 2009
Julio 2009
Junio 2009
Mayo 2009
Abril 2009
Marzo 2009
Febrero 2009
Enero 2009
Noviembre 2008
Octubre 2008
Septiembre 2008
Marzo 2008
Febrero 2008
Enero 2008
Diciembre 2007
Noviembre 2007
Octubre 2007
Septiembre 2007
Agosto 2007
Julio 2007
Junio 2007
Mayo 2007
Abril 2007
Marzo 2007
Enero 2007
Octubre 2006
Septiembre 2006
Mayo 2006


Vandal Online:
Portada
Blogs
Foro

Blogs en Vandal · Contacto · Denunciar Contenido