P. 1
iujhb

iujhb

|Views: 6|Likes:
Publicado porRafelo Santos

More info:

Published by: Rafelo Santos on May 28, 2012
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as TXT, PDF, TXT or read online from Scribd
See more
See less

02/11/2014

pdf

text

original

Guía de HTML Autor: Magus (Álvaro Bustos Gajardo) Bueno, finalmente me decidí a hacer esta guía de HTML como

práctica y para salvarle la vida a más de alguno, y eso es lo que están viendo ahora. No se me ocurre nada más pa ra esta introducción, así que hasta aquí no más lo dejo (sin comentarios). ¿Qué es HTML? Duh. HTML es, en cierto sentido, un lenguaje de programación semejante a Pascal, B ASIC, C y otros, pero a diferencia de éstos veremos que es mucho más fácil y más útil que estos lenguajes. Al menos tiene utilidad práctica (para crear páginas web), aunque s iempre es mejor simplemente usar FrontPage o Word para ahorrarnos el trabajo de hacer esta cosa. Bueno, empecemos a aprender como malgastar nuestra paciencia oc upando ocupar HTML. (Entre paréntesis, yo usé simplemente el Bloc de Notas y HTML, e s decir que no tengo autoridad para decir esto). Estructura básica de un programa una página en HTML Bueeeno, esto es muy simple. Lo más importante que debe haber en una página en HTML es lo siguiente: <html> <head> <title>Título de la página</title> </head> <body> Texto de la página y todo eso </body> </html> Bueno, aquí va una pequeña explicación de lo que significa cada uno: <html> y </html> abren y cierran el código, algo así como el begin y end de Pasc al e igual de inútiles. Todo lo que queremos que se vea debe ir entre estas marcas . <head> y </head> marcan la cabecera. Entre éstas van casi siempre 2 marcas, un a llamada <meta name> (cosa inútil que no tengo la menor idea de para qué sirve) y o tra, importante, que es <title> y </title>. Entre éstas va el título de la página. <body> y </body> marcan el "cuerpo" de la página, es decir, el documento en sí. En el inicial se pueden incluir diversos argumentos que cambiarán las propiedades de toda la página. Estas son: background="link": indica una imagen que será el fondo de la página, la cual puede ser de un computador o de internet. bgmusic="link": indica un archivo (habitualmente un midi) que será la música de fondo de la página. bgcolor="color": indica el color de fondo de la página, que puede estar es crito como un número hexadecimal (por ejemplo, blanco es #FFFFFF y negro es #00000 0) o como el nombre de color en inglés (white, black, red, blue, etc.) pero como n o todos los colores pueden decirse de esta manera, y además algunos exploradores a ntiguos no reconocen los nombres en inglés (aunque no creo que nadie use Internet Explorer anterior al 4.0 aunque no creo que nadie use Internet Explorer). text="color": idem, pero indica el color del texto. link="color": idem, pero indica el color de los enlaces (esas cosas azul es subrayadas que te llevan a otra página). alink="color": el color de los enlaces cuando la flecha del mouse está enc ima. vlink="color": el color de los enlaces en los que ya has hecho clic. Por ejemplo, si quieres una página con color de fondo negro, imagen de fondo m i logotipo (lo de arriba, que se encuentra en internet en la dirección http://i97. photobucket.com/albums/l203/Magus_02/Logo-2.gif), texto blanco y música de fondo l a canción boing.mid que está en la carpeta C:\Música\, tendrías que escribir: <body background="http://i97.photobucket.com/albums/l203/Magus_02/Logo-2.gif

para pasar a la siguiente línea no nos basta con presionar Enter.<br>Profesor de Informática (seguro." bgcolor="black" text="white" bgmusic="c:\música\boing. partamos con las más comunes y simples: <b> . Superíndice (<sup>): Equis cuadrado. <i>Alturas de Macchu Picchu</i> se conviert e en Alturas de Macchu Picchu.. Eso equivale a pasar a la siguiente línea. Bueno.. como ya se habrán dado cuenta.: H<sub>2</sub>O se ve como H2O. El "área" q ue abarcan comienza con la etiqueta entre < y > y termina con la etiqueta entre . en HTML se usan "etiquetas" (las cosas entre signos < y >) que marcan las propiedades de cada sección del documento. a la derecha (right) o justificado (justify). En el primer <p> podemos agregar el parámetro a lign="algo" que sirve para elegir la alineación.. Por ejemp lo. ej.. sino q ue hay que escribir lo siguiente: <br>. centrado (center).. es decir. si escribimos: <p align="right"><i>Álvaro Bustos. qué gran avance! Para ordenar un texto en párrafos. <u> y <s>. Texto en cursiva (<i>): En HTML. ¿cómo estás? es lo mismo que escribir: Hola. La vemos en Internet Explorer Firefox y gritamos "Oh mier. <i>..mid"> Texto de la página </b ody> Etiquetas comunes Bueno. es decir.. Lo mismo se aplica para los demás. Tachado (<s>): Si escribimos: Esto es una cosa <s>in</s>útil. si yo escri bo: Hola. ¿por qué? porque a los supergenios que crearon HTML se les ocurrió que los saltos de línea (enter) en el texto no importaran en el documento. al cargar la página ver emos: Eres un IDIOTA. Ejemplo: x<sup>2 + n</sup> se ve como x 2 + n Subíndice (<sub>): Lo mismo al revés. <b>Tengo sueño</b> se convertirá en Tengo sueño. ¿cómo estás? Es decir.. Bueno. podemos usar las marcas <p> y </p>. supongamos que hemos hecho nuestra página web y luego la cargamos. coles. P. ¡Wow. Texto en negrita (<b>): Para incluir texto en negrita.)</i></p> obtendremos: .. Por ejemplo. si va a la izquierda (l eft). Subrayado (<u>): Si escribimos: Eres un <u>IDIOTA</u>. ¿que pasa? ¡Está todo junt o!". Estos nos a horran el trabajo de usar <br> dos veces para saltarnos una línea aunque pueden jo derte la vida si no los usas bien. al cargar la págin a veremos: Esto es una cosa inútil. debemos colocarlo ent re las etiquetas <b> y </b>. ¿Alguien me entendió? No creo.

) Pero. El comando completo es este: <img src="rutadelaimagen" align="alineación" width="número" height="número"> El significado de cada uno de estos es lo siguiente: align="alineación": indica si la imagen está alineada a la izquierda o a la dere cha.. Puede ser "left" o "right" (oh. de hecho. y no tiene sentido que las explique. width="número" y height="número": indica el tamaño que se le quiere asignar a la i .. que gran deducción).. </c enter>. muchos sitios web incluyen imágenes en ellos.. Titulares Bueno. Entre las comillas se d ebe escribir la dirección de tu computador o de una imagen en internet.Álvaro Bustos.). En la barra de direcciones. </right> y </justify>.fotologs. <right> y <justify>. debemos usar la marca <img src="imagen">. arriba.fotologs. dirá la dirección de la foto en i nternet: http://spc. los titulares o títulos son.. lo siguiente: <center> <img src="http://spc. debemos hacer clic con el botón derecho en la imagen y elegir "Ver imagen". tenemos más opciones para esta marca. no se me ocurre bien como explicarlo. El 1 es el titular más grande y habitualmen te se usa para el título de la página. Un ejemplo: <center> <h1>Título</h1> <h2>Subtítulo 1</h2> <h3>Subtítulo 2</h3> <h4>Subtítulo 3</h4> <h5>Subtítulo 4</h5> <h6>Subtítulo 5</h6> </center> nos dará: Título Subtítulo Subtítulo Subtítulo Subtítulo Subtítulo Noten que ). 1 2 3 4 5 la etiqueta <br> no es necesaria en los titulares (al igual que en <p> Imágenes y efectos visuales Como habrán visto (supongo).net/photo/44/10/17/tio1_jpg/1188435552_f. <center>. que hermoso (sarcasmo).net/photo/44/10/17/tio1_jpg/1188435552_f. para colocar los títulos se usan las etiquetas: <hN> y </hN> donde N es un número del 1 al 6. existen marcas aparte para no tener que usar <p align="xx"> todo el tiempo. Profesor de Informática (seguro. y el 6 es el más pequeño. títulos. salvo mencionar que como todas deben cerrarse con </left>. Ahora escribimos en nuestra página. Si queremos que sea la imagen de nuestro sitio (n o muy recomendable).. Bueno. ¿Cómo se ingr esan? Muy fácil. Of course.jpg. Por ejempl o. Estas son <left>. vean esta imagen de Tío1..JPG. jpg"> </center> Y obtenemos: Woah. si tienen una imagen mejor.. Bueno. esos textos un poco más grandes y remarcados que van arriba de los textos (por si alguien no sabe.

que bonito (sarcasmo). align="left/right": ya no es necesario explicarlo. Les recomiendo que us en solo las dos primeras. width="nn" y height="nn": Ancho y alto. En la primera podemos indicar una dirección: <marquee direction=" dirección"> en que dirección puede ser left. partamos por lo más fácil: cómo poner una línea horizontal.mid. pero hay opciones. right. Hay más opciones. autoplay="yes/no": indica si el archivo se comenzará a reproducir automáticament e o hay que hacer clic en un botón Play. usamos las etiquetas <marque e> y </marquee>. tenemos una gran variedad para elegir (increíble. Bueno. y ahora queda lo último: el comando <embed src="nombrepágina">. type="tipo": Indica el tipo de archivo. co mo vemos aquí: . debemos insertar el siguiente comando: <hr> Que increíble. supongo. Bueno. Width es el ancho y height es la altura. v ideo. Tiene las siguientes opcion es: src="nombrearchivo: Indica la ruta del archivo de video o audio que pondremo s en la página. pero usar <hr> solamente es lo más co mún. Para poner una línea horizontal. Este comando nos permite poner en nuestra página un archivo de video (YouTube.com/magus_02/carmina_02. up o down. es esto) Para poner una marquesina. etc. (Si alguien no sabe qué es una marquesina. Podemos poner: Líneas horizontales (¡wow!) Marquesinas Música y videos de YouTube .et cetera. ¿no?). o más ancha con size="nn". He aquí un ejemplo: Bueno. dependiendo del tipo de archivo (audio. otro efecto muy usado es el de las marquesinas.) que hemos incluido. por ejemplo) o audio. si queremos otros efectos visuales. igual que en <img src="">. estoy asombrado. increíble) carmina_02. También está a lign="left/right" para la alineación.. Por ejemplo: <hr width="40" size="5" align="left"> nos dará: Oh. Ejemplo: <hr><marquee direction="left"><marquee direction="up">Hola</marquee></marquee><h r> Resultado: Hola Jajaja. Aquí hay un pequeño ejemplo: <embed src="http://www. Podemos especificar una línea más corta horizontalmente con width="nn".freewebs.magen en la página (en pixeles).. Bueno. Bueno.mid" type="midi" autopla y="no" align="left"> Esto carga en la página el archivo de música (música MIDI.

tendremos esto: #nn·nn·nn (3 números en base 16 entr e 00-FF) en que el primero indica el nivel de rojo. Por ejempl o: aquí hay un enlace a mi guía de Pascal (que a nadie le interesa. Comic Sans MS. color="color": Indica el color. Igual que en <body background="color"> puede ser el nombre del color en inglés o el código hexadecimal #nnnnnn. ¡Ahora pueden po ner videos de YouTube en su página! (Creo que es lo único más o menos interesante de e sta guía). ¿Cómo la cambiamos? Fácil.youtube. Ejemplo: <center> <font face="Comic Sans MS" size="3" color="yellow"> Esto es un texto. creo que mi estimado amigo Rubén Soto fue el que me l o pasó (¿o Felipe Rivera? No me acuerdo). los enlaces son los que le dan interactividad a las páginas web. como sea. Personalizar el tipo de letra Mmm. el segundo el verde y el ter cero el azul. sinceramente. Su uso es muy simple: <a href="dirección">Texto del enlace</a> Bueno. face="tipo de letra": Indica el tipo de letra (Times New Roman.com/v/3w6FxkYU9qM" type="application/x-shockwaveflash" wmode="transparent" width="425" height="350"> </center> Resultado: Fue el único video que encontré. Son trozos de texto que e nlazan una página con otra o con un archivo.. de todos modos).wikipedia. etc.). </font> </center> Resultará: Esto es un texto. sirve de ejemplo. creo. Se usa así: <font face="tipo de letra" size="tamaño" color="color">Texto</font> El significado de cada uno es obvio. Enlaces (links) Los enlaces son los que le dan gracia a las páginas web. con el comando <font>. no creo que a todos les resulte muy interesante ver en la págin a siempre la letra Times New Roman. de todas maneras. size="tamaño": Indica el tamaño. Por ejemplo: #FF0000 es rojo.org">Wikipedia en español</a> .. Courier New. Un ejemplo de enlace: <a href="http://es. creo.Otro ejemplo (cortesía de YouTube): <center> <embed src="http://www. Si vemos este códi go y lo dividimos en tres partes. pero.

colocamos <a href> como en un enlace normal. que nos llevarán a distintas partes de ésta. que es <a name="nombre">. En el ej emplo.dará como resultado: Wikipedia en español También podemos enlazar otras cosas además de páginas web. Explicaré las listas primero. como en Wikipedia. pero cambiamos <ol> por <ul>. Para esto. XD. Lo curioso es que también podemos enlazar emails. Por ejemplo..pais. Ejempl o: <ul> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 </ul> Lo que dejaría algo así como: Elemento 1 Elemento 2 Elemento 3 .. supongo que se entiende. Lean abajo y verán la ruta.. un enlace al correo de Chuck N orris (staff@hotmail. en teoría tendría que abrir el Solitario (c:\windows\system32\sol. Se usa de la sigu iente manera: Primero. Buen o. porque es lo más fácil. aunque a mí no me funciona. que es mailto:staff @hotmail. este enlace nos devolverá al inicio de la página. ¿o sí? Tablas y listas Bueno. debemos colocar en la dirección: mailto:email@dominio. necesitamos otro comando.com): aquí. Un ejemplo: Solitario. Por ejemplo: <a name="principio"> Luego. si queremos mostrar información ordenada. un gato y el nombre que elegimos). pero en el destino del e nlace colocamos "#nombre" (es decir. Para poner una lis ta numerada debemos usar la siguiente estructura: <ol> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 . como ejemplo.. colocamos <a name=""> y un nombre bonito en el lugar a donde querem os volver.com También podemos crear enlaces dentro de la misma página (como el Goto de BASIC o Pas cal). de todas maneras. cuando nos sal e una tabla de contenidos al principio. </ol> Esto nos daría algo así como: Elemento 1 Elemento 2 Elemento 3 Para poner una lista con viñetas es parecido. Para esto. no era tan difícil. sería: <a href="#principio">Volver al inicio</a> Eso es todo. Por ejemplo. tenemos 2 opciones: usar tablas o usar listas.exe).

3)</td> . en la práctica. Así: <ul> <li>Elemento 1 <li>Elemento 2 <ul> <li>Sub-elemento 1 <li>Sub-elemento 2 <li>Sub-elemento 3 </ul> <li>Elemento 3 </ul> Quedaría: Elemento 1 Elemento 2 Sub-elemento 1 Sub-elemento 2 Sub-elemento 3 Elemento 3 Bueno.. <tr> <td>Elemento (m. aut .. lo que quizá sea preferible debido a que <th> habitualmente se usa para la primera fila y por lo tanto. Y como también para mí es tedioso explicarlo. es decir.. Estructura básica: <table border="anchura"> <tr> <th>Elemento (1..1)</td> <td>Elemento (m.. <tr> marca el inicio de una fila y </tr> el final de ésta.2)</td> <td>Elemento (m. <td>Elemento (m. si no es suficiente con listas. hacer tab las en HTML implica una enorme pérdida de tiempo y una paciencia infinita.n)</td> </tr> </table> Bueno.n)</td> </tr> .3)</th> . <th> y </th> marcan cada celda en una fila...3)</td> . ¿qué significa esta abominación? Paso a paso: <table border="nn"> marca el inicio de la tabla y </table> el final. <th>Elemento (1. lo haré rápido. También se puede usar <td> en vez de <th>. también existen las tablas.Podemos colocar listas dentro de listas. <td>Elemento (2.2)</td> <td>Elemento (2.n)</th> </tr> <tr> <td>Elemento (2.. indican las columnas.. Border= "nn" indica la anchura del borde.1)</th> <th>Elemento (1.2)</th> <th>Elemento (1. Eso sí..1)</td> <td>Elemento (2.

Volver al inicio .3) Elemento (3.2) Elemento (2.com.omáticamente deja el texto en negrita.zeroth@gmail. Si necesitan contactarse conmig o (no lo intenten) mi correo es: magus.1) Elemento (2. Si fijamos la anchura a 3.4) Bueno. eso es todo.1) Elemento (1.4) Elemento (3. obtendríamos algo así como: Elemento (1.2) Elemento (3. Esta página fue creada por Magus (Álvaro Bustos Gajardo) el 17 de Septiembre de 2006 .2) Elemento (1.4) Elemento (2.1) Elemento (3.3) Elemento (2. Espero que les haya servido. con el código anterior.3) Elemento (1.

You're Reading a Free Preview

Descarga
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->