Scribd Logo
Upload

Welcome to Scribd!

  • Iujhb

    Uploaded by

    Rafelo Santos
    34 views8 pages

    Original Title

    iujhb

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Available Formats

    TXT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    34 views8 pages

    Iujhb

    Uploaded by

    Rafelo Santos

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Download as TXT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 8

    Gua de HTML Autor: Magus (lvaro Bustos Gajardo) Bueno, finalmente me decid a hacer esta gua de HTML como

    prctica y para salvarle la vida a ms de alguno, y eso es lo que estn viendo ahora. No se me ocurre nada ms pa ra esta introduccin, as que hasta aqu no ms lo dejo (sin comentarios). Qu es HTML? Duh. HTML es, en cierto sentido, un lenguaje de programacin semejante a Pascal, B ASIC, C y otros, pero a diferencia de stos veremos que es mucho ms fcil y ms til que estos lenguajes. Al menos tiene utilidad prctica (para crear pginas 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 parntesis, yo us simplemente el Bloc de Notas y HTML, e s decir que no tengo autoridad para decir esto). Estructura bsica de un programa una pgina en HTML Bueeeno, esto es muy simple. Lo ms importante que debe haber en una pgina en HTML es lo siguiente: <html> <head> <title>Ttulo de la pgina</title> </head> <body> Texto de la pgina y todo eso </body> </html> Bueno, aqu va una pequea explicacin de lo que significa cada uno: <html> y </html> abren y cierran el cdigo, algo as como el begin y end de Pasc al e igual de intiles. 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 intil que no tengo la menor idea de para qu sirve) y o tra, importante, que es <title> y </title>. Entre stas va el ttulo de la pgina. <body> y </body> marcan el "cuerpo" de la pgina, es decir, el documento en s. En el inicial se pueden incluir diversos argumentos que cambiarn las propiedades de toda la pgina. Estas son: background="link": indica una imagen que ser el fondo de la pgina, la cual puede ser de un computador o de internet. bgmusic="link": indica un archivo (habitualmente un midi) que ser la msica de fondo de la pgina. bgcolor="color": indica el color de fondo de la pgina, que puede estar es crito como un nmero hexadecimal (por ejemplo, blanco es #FFFFFF y negro es #00000 0) o como el nombre de color en ingls (white, black, red, blue, etc.) pero como n o todos los colores pueden decirse de esta manera, y adems algunos exploradores a ntiguos no reconocen los nombres en ingls (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 pgina). 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 pgina con color de fondo negro, imagen de fondo m i logotipo (lo de arriba, que se encuentra en internet en la direccin http://i97. photobucket.com/albums/l203/Magus_02/Logo-2.gif), texto blanco y msica de fondo l a cancin boing.mid que est en la carpeta C:\Msica\, tendras que escribir: <body background="http://i97.photobucket.com/albums/l203/Magus_02/Logo-2.gif

    " bgcolor="black" text="white" bgmusic="c:\msica\boing.mid"> Texto de la pgina </b ody> Etiquetas comunes Bueno, como ya se habrn dado cuenta, en HTML se usan "etiquetas" (las cosas entre signos < y >) que marcan las propiedades de cada seccin del documento. El "rea" q ue abarcan comienza con la etiqueta entre < y > y termina con la etiqueta entre . Alguien me entendi? No creo.... Bueno, partamos con las ms comunes y simples: <b> , <i>, <u> y <s>. Texto en negrita (<b>): Para incluir texto en negrita, debemos colocarlo ent re las etiquetas <b> y </b>. Por ejemplo, <b>Tengo sueo</b> se convertir en Tengo sueo. Lo mismo se aplica para los dems. Texto en cursiva (<i>): En HTML, <i>Alturas de Macchu Picchu</i> se conviert e en Alturas de Macchu Picchu. Subrayado (<u>): Si escribimos: Eres un <u>IDIOTA</u>, al cargar la pgina ver emos: Eres un IDIOTA. Tachado (<s>): Si escribimos: Esto es una cosa <s>in</s>til, al cargar la pgin a veremos: Esto es una cosa intil. Superndice (<sup>): Equis cuadrado... Ejemplo: x<sup>2 + n</sup> se ve como x 2 + n Subndice (<sub>): Lo mismo al revs. P. ej.: H<sub>2</sub>O se ve como H2O. Bueno, supongamos que hemos hecho nuestra pgina web y luego la cargamos. La vemos en Internet Explorer Firefox y gritamos "Oh mier... coles, que pasa? Est todo junt o!", por qu? porque a los supergenios que crearon HTML se les ocurri que los saltos de lnea (enter) en el texto no importaran en el documento, es decir, si yo escri bo: Hola,

    cmo ests? es lo mismo que escribir: Hola, cmo ests? Es decir, para pasar a la siguiente lnea no nos basta con presionar Enter, sino q ue hay que escribir lo siguiente: <br>. Eso equivale a pasar a la siguiente lnea. Wow, qu gran avance! Para ordenar un texto en prrafos, podemos usar las marcas <p> y </p>. Estos nos a horran el trabajo de usar <br> dos veces para saltarnos una lnea aunque pueden jo derte la vida si no los usas bien. En el primer <p> podemos agregar el parmetro a lign="algo" que sirve para elegir la alineacin, es decir, si va a la izquierda (l eft), centrado (center), a la derecha (right) o justificado (justify). Por ejemp lo, si escribimos: <p align="right"><i>lvaro Bustos,<br>Profesor de Informtica (seguro...)</i></p> obtendremos:

    lvaro Bustos, Profesor de Informtica (seguro...) Pero, de hecho, existen marcas aparte para no tener que usar <p align="xx"> todo el tiempo. Estas son <left>, <center>, <right> y <justify>, y no tiene sentido que las explique, salvo mencionar que como todas deben cerrarse con </left>, </c enter>, </right> y </justify>. Titulares Bueno, los titulares o ttulos son... ttulos, no se me ocurre bien como explicarlo, esos textos un poco ms grandes y remarcados que van arriba de los textos (por si alguien no sabe...). Bueno, para colocar los ttulos se usan las etiquetas: <hN> y </hN> donde N es un nmero del 1 al 6. El 1 es el titular ms grande y habitualmen te se usa para el ttulo de la pgina, y el 6 es el ms pequeo. Un ejemplo: <center> <h1>Ttulo</h1> <h2>Subttulo 1</h2> <h3>Subttulo 2</h3> <h4>Subttulo 3</h4> <h5>Subttulo 4</h5> <h6>Subttulo 5</h6> </center> nos dar: Ttulo Subttulo Subttulo Subttulo Subttulo Subttulo Noten que ).

    1 2 3 4 5 la etiqueta <br> no es necesaria en los titulares (al igual que en <p>

    Imgenes y efectos visuales Como habrn visto (supongo), muchos sitios web incluyen imgenes en ellos. Cmo se ingr esan? Muy fcil, debemos usar la marca <img src="imagen">. Entre las comillas se d ebe escribir la direccin de tu computador o de una imagen en internet. Por ejempl o, vean esta imagen de To1.JPG. Si queremos que sea la imagen de nuestro sitio (n o muy recomendable), debemos hacer clic con el botn derecho en la imagen y elegir "Ver imagen". En la barra de direcciones, arriba, dir la direccin de la foto en i nternet: http://spc.fotologs.net/photo/44/10/17/tio1_jpg/1188435552_f.jpg. Ahora escribimos en nuestra pgina, lo siguiente: <center> <img src="http://spc.fotologs.net/photo/44/10/17/tio1_jpg/1188435552_f. jpg"> </center> Y obtenemos: Woah, que hermoso (sarcasmo). Bueno, si tienen una imagen mejor... Of course, tenemos ms opciones para esta marca. El comando completo es este: <img src="rutadelaimagen" align="alineacin" width="nmero" height="nmero"> El significado de cada uno de estos es lo siguiente: align="alineacin": indica si la imagen est alineada a la izquierda o a la dere cha. Puede ser "left" o "right" (oh, que gran deduccin). width="nmero" y height="nmero": indica el tamao que se le quiere asignar a la i

    magen en la pgina (en pixeles). Width es el ancho y height es la altura. Bueno, si queremos otros efectos visuales, tenemos una gran variedad para elegir (increble, no?). Podemos poner: Lneas horizontales (wow!) Marquesinas Msica y videos de YouTube ...et cetera. Bueno, partamos por lo ms fcil: cmo poner una lnea horizontal. Para poner una lnea horizontal, debemos insertar el siguiente comando: <hr> Que increble. He aqu un ejemplo: Bueno, pero hay opciones. Podemos especificar una lnea ms corta horizontalmente con width="nn", o ms ancha con size="nn". Tambin est a lign="left/right" para la alineacin. Por ejemplo: <hr width="40" size="5" align="left"> nos dar: Oh, estoy asombrado. Hay ms opciones, pero usar <hr> solamente es lo ms co mn. Bueno, otro efecto muy usado es el de las marquesinas. (Si alguien no sabe qu es una marquesina, es esto) Para poner una marquesina, usamos las etiquetas <marque e> y </marquee>. En la primera podemos indicar una direccin: <marquee direction=" direccin"> en que direccin puede ser left, right, up o down. Les recomiendo que us en solo las dos primeras. Ejemplo: <hr><marquee direction="left"><marquee direction="up">Hola</marquee></marquee><h r> Resultado: Hola Jajaja, que bonito (sarcasmo). Bueno, y ahora queda lo ltimo: el comando <embed src="nombrepgina">. Este comando nos permite poner en nuestra pgina un archivo de video (YouTube, por ejemplo) o audio. Tiene las siguientes opcion es: src="nombrearchivo: Indica la ruta del archivo de video o audio que pondremo s en la pgina. type="tipo": Indica el tipo de archivo. width="nn" y height="nn": Ancho y alto, igual que en <img src="">. autoplay="yes/no": indica si el archivo se comenzar a reproducir automticament e o hay que hacer clic en un botn Play, dependiendo del tipo de archivo (audio, v ideo, etc.) que hemos incluido. align="left/right": ya no es necesario explicarlo, supongo. Aqu hay un pequeo ejemplo: <embed src="http://www.freewebs.com/magus_02/carmina_02.mid" type="midi" autopla y="no" align="left"> Esto carga en la pgina el archivo de msica (msica MIDI, increble) carmina_02.mid, co mo vemos aqu:

    Otro ejemplo (cortesa de YouTube): <center> <embed src="http://www.youtube.com/v/3w6FxkYU9qM" type="application/x-shockwaveflash" wmode="transparent" width="425" height="350"> </center> Resultado: Fue el nico video que encontr, creo que mi estimado amigo Rubn Soto fue el que me l o pas (o Felipe Rivera? No me acuerdo); como sea, sirve de ejemplo. Ahora pueden po ner videos de YouTube en su pgina! (Creo que es lo nico ms o menos interesante de e sta gua). Personalizar el tipo de letra Mmm, sinceramente, no creo que a todos les resulte muy interesante ver en la pgin a siempre la letra Times New Roman. Cmo la cambiamos? Fcil, con el comando <font>. Se usa as: <font face="tipo de letra" size="tamao" color="color">Texto</font> El significado de cada uno es obvio, pero, de todas maneras... face="tipo de letra": Indica el tipo de letra (Times New Roman, Courier New, Comic Sans MS, etc.). size="tamao": Indica el tamao. color="color": Indica el color. Igual que en <body background="color"> puede ser el nombre del color en ingls o el cdigo hexadecimal #nnnnnn. Si vemos este cdi go y lo dividimos en tres partes, tendremos esto: #nnnnnn (3 nmeros en base 16 entr e 00-FF) en que el primero indica el nivel de rojo, el segundo el verde y el ter cero el azul. Por ejemplo: #FF0000 es rojo. Ejemplo: <center> <font face="Comic Sans MS" size="3" color="yellow"> Esto es un texto, creo. </font> </center> Resultar: Esto es un texto, creo. Enlaces (links) Los enlaces son los que le dan gracia a las pginas web. Son trozos de texto que e nlazan una pgina con otra o con un archivo. Su uso es muy simple: <a href="direccin">Texto del enlace</a> Bueno, los enlaces son los que le dan interactividad a las pginas web. Por ejempl o: aqu hay un enlace a mi gua de Pascal (que a nadie le interesa, de todos modos). Un ejemplo de enlace: <a href="http://es.wikipedia.org">Wikipedia en espaol</a>

    dar como resultado: Wikipedia en espaol Tambin podemos enlazar otras cosas adems de pginas web. Un ejemplo: Solitario. Buen o, en teora tendra que abrir el Solitario (c:\windows\system32\sol.exe), aunque a m no me funciona; de todas maneras, como ejemplo, supongo que se entiende. Lo curioso es que tambin podemos enlazar emails. Para esto, debemos colocar en la direccin: mailto:email@dominio.pais. Por ejemplo, un enlace al correo de Chuck N orris (staff@hotmail.com): aqu. XD. Lean abajo y vern la ruta, que es mailto:staff @hotmail.com Tambin podemos crear enlaces dentro de la misma pgina (como el Goto de BASIC o Pas cal), que nos llevarn a distintas partes de sta, como en Wikipedia, cuando nos sal e una tabla de contenidos al principio. Por ejemplo, este enlace nos devolver al inicio de la pgina. Para esto, necesitamos otro comando, que es <a name="nombre">. Se usa de la sigu iente manera: Primero, colocamos <a name=""> y un nombre bonito en el lugar a donde querem os volver. Por ejemplo: <a name="principio"> Luego, colocamos <a href> como en un enlace normal, pero en el destino del e nlace colocamos "#nombre" (es decir, un gato y el nombre que elegimos). En el ej emplo, sera: <a href="#principio">Volver al inicio</a> Eso es todo... no era tan difcil, o s? Tablas y listas Bueno, si queremos mostrar informacin ordenada, tenemos 2 opciones: usar tablas o usar listas. Explicar las listas primero, porque es lo ms fcil. Para poner una lis ta numerada debemos usar la siguiente estructura: <ol> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 ... </ol> Esto nos dara algo as como: Elemento 1 Elemento 2 Elemento 3 Para poner una lista con vietas es parecido, pero cambiamos <ol> por <ul>. Ejempl o: <ul> <li>Elemento 1 <li>Elemento 2 <li>Elemento 3 </ul> Lo que dejara algo as como: Elemento 1 Elemento 2 Elemento 3

    Podemos colocar listas dentro de listas. 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> Quedara: Elemento 1 Elemento 2 Sub-elemento 1 Sub-elemento 2 Sub-elemento 3 Elemento 3 Bueno, si no es suficiente con listas, tambin existen las tablas. Eso s, hacer tab las en HTML implica una enorme prdida de tiempo y una paciencia infinita. Y como tambin para m es tedioso explicarlo, lo har rpido. Estructura bsica: <table border="anchura"> <tr> <th>Elemento (1;1)</th> <th>Elemento (1;2)</th> <th>Elemento (1;3)</th> ... <th>Elemento (1;n)</th> </tr> <tr> <td>Elemento (2;1)</td> <td>Elemento (2;2)</td> <td>Elemento (2;3)</td> ... <td>Elemento (2;n)</td> </tr> ... <tr> <td>Elemento (m;1)</td> <td>Elemento (m;2)</td> <td>Elemento (m;3)</td> ... <td>Elemento (m;n)</td> </tr> </table> Bueno... qu significa esta abominacin? Paso a paso: <table border="nn"> marca el inicio de la tabla y </table> el final. Border= "nn" indica la anchura del borde. <tr> marca el inicio de una fila y </tr> el final de sta. <th> y </th> marcan cada celda en una fila, es decir, en la prctica, indican las columnas. Tambin se puede usar <td> en vez de <th>, lo que quiz sea preferible debido a que <th> habitualmente se usa para la primera fila y por lo tanto, aut

    omticamente deja el texto en negrita. Si fijamos la anchura a 3, con el cdigo anterior, obtendramos algo as como: Elemento (1;1) Elemento (1;2) Elemento (1;3) Elemento (1;4) Elemento (2;1) Elemento (2;2) Elemento (2;3) Elemento (2;4) Elemento (3;1) Elemento (3;2) Elemento (3;3) Elemento (3;4) Bueno, eso es todo. Espero que les haya servido. Si necesitan contactarse conmig o (no lo intenten) mi correo es: magus.zeroth@gmail.com. Esta pgina fue creada por Magus (lvaro Bustos Gajardo) el 17 de Septiembre de 2006 . Volver al inicio

    You might also like