 |
||||||||||
|
||||||||||
|
LECCIÓN 3 Ahora vas a conocer la forma en que trabaja o responde el navegador al código html que anotas. Vamos con ejemplos... <BODY BGCOLOR="#FFFFFF"> Lo que más se te antoje ¡cualquier cosa! </BODY> <BODY BGCOLOR="#FFFFFF"> Ahora... ¿ Qué es lo que ocurre con esto? </BODY> El navegador no reconoce el formato. A menos que se lo indiques, presentará las letras y las palabras en forma normal. Si deseas comenzar con una nueva línea, debes usar la etiqueta respectiva. <BODY BGCOLOR="#FFFFFF"> Ahora...<BR> ¿Qué es<BR> lo que<BR> ocurre<BR> con esto? </BODY> <BR> indica "comenzar una nueva línea". <P> es similar a <BR>, pero da un salto de línea y ahí comienza el texto. <BODY BGCOLOR="#FFFFFF"> Ahora...<P> ¿Qué es<P> lo que<P> ocurre<P> con esto? </BODY> <P> es una de las pocas etiquetas que no requiren la de cierre. <P> no puede emplearse para obtener varias líneas en blanco, si anotas <P><P><P> no obtendrás 3 líneas en blanco, sólo proporcionará 1. ¿Cómo obtenerlas entonces? vamos a explicarlo. Observa lo siguiente... <BODY BGCOLOR="#FFFFFF"> Lo que más se te antoje </BODY> El navegador sólo reconoce 1 espacio, aunque parezca tonto, pero de esta forma permite tener mayor control en la apariencia del documento. Para dar un espacio como el de la barra espaciadora del teclado, se debe utilizar ==> Inténtalo.... <BODY BGCOLOR="#FFFFFF"> Lo que más se te antoje </BODY> El signo "&" indica que se inicia un caracter especial, mientras que el signo ";" indica que ahí termina, las letras en medio son una abreviación de lo que representa. Existen seis caracteres especiales que son muy usados. (siempre deben escribirse en minúsculas) (espacio en blanco) < (símbolo menor qué "<") > (símbolo mayor qué ">") & (signo "&") " (comilla ") ­ (guión ) No se deben utilizar todos al mismo tiempo, pero con un poco de práctica se sabrá cuándo deben ser utilizados. Sin embargo, la mayoría de los programas para hacer páginas web del tipo "WYSIWYG" ("Lo que ves es lo que obtienes") no requieren que les indiques código html. Si no consigues colocarlos bien, no te preocupes, ya que "echando a perder se aprende"  --eso
pregúntenlo a "Fatty" (mi pc) que ha recibido alrededor de 9 formateadas de disco duro--Regresemos a nuestro asunto... si se presiona la tecla "ENTER" (RETURN) del teclado al tiempo que se está escribiendo, el navegador lo interpretará como un espacio. Veamos un ejemplo más.... <BODY BGCOLOR="#FFFFFF"> Lo que más <BR>se te<BR>antoje <BR> cualquier<BR>cosa! </BODY> Ahora anota lo siguiente... <BODY BGCOLOR="#FFFFFF"> <CENTER>Lo que más se te antoje</CENTER> </BODY> Todo lo que se encuentre dentro de las etiquetas <CENTER> estará centrado en la pantalla. ¡HEY! casi olvido algo... para obtener varias líneas en blanco se debe crear un espacio en blanco " " y después colocar el corte de línea "<BR>"... <BODY BGCOLOR="#FFFFFF"> Lo que más se te<BR> <BR> <BR> <BR> <BR> <BR> antoje </BODY> Ahora vamos con la inclusión de imágenes en la página. Usaremos la siguiente (vieja página inicio de mi sitio web). Si quieres guardarla hazlo como anteriormente... clic con el botón derecho y "Save Image As..." ("Guardar Imagen Como...")  Se especifica una imagen con la etiqueta <IMG> (imagen). <BODY BGCOLOR="#FFFFFF"> <IMG> </BODY> Ahora se coloca la ruta y tamaño de la imagen. <BODY BGCOLOR="#FFFFFF"> <IMG SRC="lecci3a.jpg" WIDTH=150 HEIGHT=110> </BODY> Ten presente que la ruta no especifíca únicamente la imagen, sino también dónde se ubica. La ruta de arriba, "lecci3a.jpg", indica que el navegador buscará la imagen llamada "lecci3a.jpg" en la misma carpeta (o directorio) en que se encuentra el archivo html. Otra forma de especificar la ruta es anotando el URL completo. Por ejemplo: SRC="http://www.imeil.com.mx/imagenes/imeil.gif" Supongo que te has de estar preguntando la ventaja de usar URL's relativos (parciales) contra los URL's absolutos (completos). La respuesta es sencilla... porque tus links funcionarán en cualquier servidor o computadora que los coloques, las páginas cargarán más rápido y te evitarás el tener que editar para modificar todos los URL's o links de las páginas. Algo muy importante que debes conocer de las imágenes y su tamaño. Intenta esto... <BODY BGCOLOR="#FFFFFF"> <IMG SRC="lecci3a.jpg"> </BODY>
Como puedes notar, el navegador establece el tamaño de la imagen en forma automática. ¿Por qué preocuparse entonces por las dimensiones? Sin caer en detalles... porque ayuda al navegador a cargar las imágenes en forma más rápida. ¿Cuál es la parte importante? Checa... <BODY BGCOLOR="#FFFFFF"> <IMG SRC="lecci3a.jpg" WIDTH=200 HEIGHT=68> </BODY> <BODY BGCOLOR="#FFFFFF"> <IMG SRC="lecci3a.jpg" WIDTH=20 HEIGHT=100> </BODY> Puedes especificar las dimensiones que desees. ¿Sigues aferrado a cuál es la parte importante? Ok, observa este pequeño punto rojo->  <-.
Su tamaño es de 2x2 pixeles. Ahora fijate lo que se le puede hacer al modificar sus dimensiones...<BODY BGCOLOR="#FFFFFF"> <IMG SRC="punto.gif" WIDTH=510 HEIGHT=1><P> <IMG SRC="punto.gif" WIDTH=510 HEIGHT=2><P> <IMG SRC="punto.gif" WIDTH=510 HEIGHT=5><P> <CENTER> <IMG SRC="punto.gif" WIDTH=2 HEIGHT=200></CENTER> </BODY> ¿fue mejor explicado? |
|
[Lección 1]
[Lección 2]
[Lección 3]
[Lección 4]
[Lección 5]
[Lección 6] La reproducción de este tutorial no está permitida, por favor, lee los siguientes links para mayor información: Términos de uso / Políticas de privacidad |