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