#te doy más txt(?????)

[smileflowcr]

Sus orbes adquieren un destello similar a las luciérnagas, un efecto secundario de los experimentos y que representaba una fuerte emoción que experimentaba, tanto buena como mala, siendo en este caso la primera. Las manos alzan al gatito teniendo cuidado con sus patitas y cola, acurrucándolo entre los brazos lo mejor que podía para luego regresar la vista al mayor. "Increíble, ¿ Verdad? A veces da explicaciones largas y confusas, como de las wikipedia, con términos que jamás he escuchado y nombres extraños o en otro idioma, pero logro comprenderlo la mayoría de las veces." tener acceso a web le ayudaba a repasar lo aprendido durante el día y aún necesitaba superar su miedo a sujetar utensilios médicos por más de cinco minutos. Acepta la manzana y los halagos con timidez junto a sus mejillas levemente coloradas, poco acostumbrada a recibirlos. "Es fácil hablar contigo, súmale que me siento cómoda y segura con ustedes... estoy en casa, al fin." ella que lo perdió todo aprendió a valorar el día a día y si bien aquella tienda no parecía un hogar del todo, la presencia de Yohan y Sully, jugar a las escondidas con Wabbit, sostener a Morris como ahora... todo le transmitía paz y un sentimientos de que pertenecía ahí. Temía despertar y encontrarse otra vez encerrada y lejos de aquellos a quienes aprecia, pero en cuanto les ve recuerda que no estará sola nunca más. "No estás herido, ¿Verdad?" pregunta, de estar en lo correcto puede aplicar vendajes como el médico le enseñó. "Ah... sí, por el tiempo que ha tardado en regresar es casi seguro que está cazando, pero no te preocupes por mi. Yohan me avisa para que... no vea... cosas." suele esconderse en su habitación, aunque eso salvaba al mayor de ser juzgado con la mirada más tarde.

“Acceso  concedido.  Suyeong  pasó  un  antivirus  por  mis  sistemas  y  un  peine  por  mi  pelaje,  estoy  libre  de  cualquier  parasito  o  suciedad”  Morris  responde  forma  inmediata  ante  la  petición  de  la  muchacha,  ganándose  otra  sonrisa  por  parte  del  pirata.  No  le  gustaba  sentirse  como  una  mascota  cuando  su  coeficiente  era  superior,  pero  de  vez  en  cuando  se  daba  esos  lujos  con  personas  en  quienes  confiaba.  -  —¿Te  está  enseñando  medicina?  Estoy  sorprendido  siquiera  que  te  esté  enseñando  cualquier  cosa,  sabes  como  se  pone  cuando  hay  que  hablar  de  títulos  universitarios  —  -el  muchacho  comienza  a  sacar  algunas  latas  de  café  de  la  bolsa  de  compras,  también  unas  frutas  muy  naturales  que  eran  una  cosa  rarísima  de  ver  pero  su  jefa,  Lilith,  había  querido  enviar  algo  para  su  doctor  favorito.  Suyeong  toma  una  de  las  manzanas,  extendiéndola  a  la  otra  y  él  se  hace  de  una  fruta  igual  también.  -  —Nada  de  eso,  MeiMei  —  -se  ríe  antes  de  morder  la  comida,  negando  con  la  cabeza.  -  —Luces  sana,  te  ha  vuelto  el  color  a  la  cara  y  se  te  nota  más  habladora  que  al  comienzo  —  -el  pirata  informático  se  inclina  para  darle  la  mitad  de  su  manzana  a  Wabbit,  que  esperaba  paciente  a  sus  pies  antes  de  volver  a  su  altura  completa  y  retomar  la  conversación.  -  —He  estado  trabajando,  fuimos  a  las  afueras  a  un  deshuesadero  de  chatarra  y  desmantelamos  algunos  laboratorios  clandestinos.  He  traído  algunas  cosas  interesantes  para  Yohan,  pero  asumo  que  está  en  su  cacería  de...  material.

[mugunghwarp]

Idade: 23 anos

Gênero: Masculino

Qualidades: Determinado, gentil

Defeitos: Melancólico, teimoso

Nacionalidade/Etnia: França/Coreano

Temas de interesse: Todos

Faceclaim: Yeonjun - TXT

Twitter: MV99DM

OOC: +18 ele/dele

TW: nenhum

TW: menção ao uso de drogas ilícitas, abandono e negligencia materna, morte subtendida

— Carta 1, 20 de Abril de 2019.

“Querido Eunseo,

Às vezes, a vida nos leva a tomar decisões difíceis e injustas. Geralmente, essas decisões difíceis são a nossa última chance de reparar os nossos erros — e fazer a coisa certa, depois de causar tantos danos às outras pessoas, pode nos custar um alto preço.

Não mentirei a você, Eunseo: nunca fui uma boa pessoa. Estive quebrada desde a minha juventude e me envolvi com todo o tipo de gente má intencionada. Fiz coisas repreensíveis e puníveis com a lei. Feri a minha própria família e transformei a vida da minha mãe em um verdadeiro inferno.

A única coisa boa que eu fiz foi ter decidido ter você — mesmo com todas as circunstâncias me dizendo para desistir. Mesmo ficando sozinha no final, te dando a luz em um apartamento sujo em Seul, sem ninguém para nos ajudar em meio à imundície e à miséria.

Mas o simples fato de você ter nascido, transformou a minha vida durante os poucos minutos em que pudemos passar juntos. Você chegou tão pequeno e frágil, que tive medo de machucá-lo nos meus braços trêmulos. Seus pequenos pulmões trabalharam com força e pesar, e seu corpinho tremeu tanto contra mim… Você estava partindo, vítima do meu vício em drogas e cigarro. Fiquei com tanto medo que gritei por socorro, ainda que mal tivesse forças por nós dois.

Foi um verdadeiro milagre que o neto da nossa vizinha, aquele policialzinho incompetente e arrogante, ter arrombado a nossa porta para te socorrer. Eu nunca me esquecerei de como ele envolveu você na jaqueta azul, correndo escadaria abaixo para salvar a sua vida.

Eu já esperava que, no instante em que você desse entrada ao hospital com convulsões por abstinência, do terrível vício que herdou de mim, a assistência social seria acionada. Eu te perdi, Eunseo, antes mesmo de ter a oportunidade de te ver na UTI neonatal e pedir perdão por ter sido eu a pessoa a lhe dar à luz. De tantas famílias saudáveis e estáveis, que desejam um bebezinho para amar, você teve que nascer justamente de uma mulher desequilibrada e patética… Seria injusto e cruel, manter você comigo.

Eu simplesmente não poderia, nem mesmo se a lei me permitisse. Por isso, eu assinei os papéis para a adoção. Eu o abandonei para que qualquer outra pessoa decente pudesse encontrar você. Peço perdão, Eunseo… Mas foi a única escolha. A segunda decisão certa que tomei.

Já faz vinte anos desde que abri mão dos meus direitos sobre você. Soube que foi adotado por uma família estrangeira, e que seu nome também mudou. Dmitri. Soa como um nome de príncipe encantado. Gosto de como ele soa. Gosto de imaginar como é a sua vida, de pensar no quanto é amado e de imaginar o quão bonito e crescido está agora. Pensar em você torna os meus dias mais suaves e menos dolorosos. Pensar em você me faz ter coragem de enfrentar o fim.

Eunseo… Eu sinto muito por não ter sido a mãe que você merecia.

Estou pagando pelas consequências dos meus atos do passado, por cada uma delas. Não me resta tanto tempo de lucidez sem dor; não me resta quase nada, exceto esperar pelo dia em que não serei mais nada. Mas eu não estou lhe escrevendo para me despedir. Eu só queria te dizer que ter te dado a vida, e ter te dado a alguém que o amaria incondicionalmente, foram as duas únicas coisas boas que eu fiz por alguém. Quero me agarrar a este conforto agora, que não tenho mais nada comigo. Quero ser egoísta e pensar que alguém que eu amei se lembrará de mim.

Eu também quero te contar que, depois de tantos anos procurando e tentando me lembrar dos turbulentos momentos que vivi, descobri que você ainda tem uma família paterna em Mungunghwa.

Seu pai se casou com uma boa moça não muito depois do nosso envolvimento, então você tem irmãos com idades próximas a sua. Também tem avós e tios… E outras coisas que eu te fiz perder, quando me desconectei da minha família para sempre. Seu pai é uma boa pessoa. Sei que ele não lhe viraria as costas, se quisesse se aproximar.

Não sei como esta carta chegará a você. Aquele velho policialzinho que o socorreu, me disse que descobriria onde você vive só para me garantir que ainda está bem. Ele nunca me passou o seu endereço nem o seu novo nome completo, mas não o culpo. Eu também não confio em mim mesma. Não sei se seria capaz de me segurar e me impedir de procurá-lo — ainda mais agora, no final da minha vida.

Se você recebeu esta carta, então aquele homem cumpriu com a promessa que me fez, e eu não estarei mais neste mundo para lhe causar dor e desgosto. Eu sinto muito.

Quero que saiba que a sua vida foi a melhor decisão que tomei durante toda a minha existência.

Seja qual for a sua decisão, a partir de agora, desejo que ela o faça feliz e completo.

Nunca tenha medo de fazer o que é certo.

Perdoe-me.

Bae Borah.”

 — Carta 2, 18 de Janeiro de 2022.

“Queridos mãe e pai,

Sei que vocês não concordam com a minha decisão. Procurar a minha família biológica, após tantos anos repletos de amor, realmente soa como um puro ato de ingratidão. Mas eu não quero que pensem assim de mim. Sou profundamente agradecido por todo o amor e suporte que me deram. Sempre serei o filho de vocês, da mesma forma que nada nem ninguém deste mundo me fará parar de amá-los.

Mas… Eu preciso fazer isto. Preciso saber de onde eu vim, e qual é a minha parte que ainda vive nesse lugar chamado Mungunghwa.

Eu sei que vocês irão tomar medidas drásticas para me impedir de seguir sozinho em busca do meu passado. Talvez o pai queira cortar o meu cartão de crédito. Talvez a mãe faça um boletim de ocorrência, dizendo que fui sequestrado ou seduzido por golpistas. Talvez o meu rosto estampe cartazes de desaparecido por toda a França. Mas já estou distante há tanto tempo, pensando naquela carta há anos. Pensando além da minha origem trágica. Pensando no que resta de mim, em algum lugar do mundo. Eu preciso ir. Preciso ver e sentir.

Não irei gastar nenhum dinheiro de vocês. Tenho uma reserva secreta, que abri há dois anos. Todo o meu trabalho de meio período ao longo dos últimos meses foi para financiar esta viagem para Mungunghwa. Estou comprometido com ela.

Não sei se voltarei antes do início do semestre da faculdade… Mas eu prometo que manterei o contato, e que estou disposto a esperar que sua raiva e decepção se amenizem. Porque eu sou o seu filho, acima de tudo. Sempre serei Dmitri Blanché.

Mas agora… 

Agora, quero descobrir quem posso ser como Eunseo. Descobrir quais são as minhas origens e finalmente responder às perguntas que venho nutrindo desde muito novo. Espero que possam me entender e que não fiquem muito decepcionados comigo.

Esta é a minha decisão final. É o que eu sinto ser o certo, e o que eu desejo seguir neste exato momento.

Prometo ligar em breve.

Com amor,

Dmi.”

[almainerte-blog]

"Todavía creo en el amor" y leo los reblogs de txt y lo que pones y tu concepción de amor no es nada para decir todavía creo en el amor; amor era lo de antes, lo qie vos queres es el amor berreta de ahora. Pero, pendeja de 16, qué se puede esperar.

Para empezar, yo no reblogeo nada relacionado con el amor en el que creo yo. Me la paso reblogeando boludeces, fotos o cosas medias tristes porque es como me siento en este momento, nada más, así que no sé con qué contexto me decís esto. ¿Sabés en qué amor creo? En el que doy yo. El de esperar con una comida calentita o algún postre casero para tomar mate. El de acompañar si van a algún lugar sin que me lo pidan. En el de esperar a esa persona para ver el capítulo de una serie, película, anime, etc, por más ansiosa que esté, sólo porque a esa persona le da ilusión verlo conmigo (como a mi también). En hacer manualidades o cosas simples como regalos sorpresas que tengan valor para los dos y no una remera o algo así (aunque no niego que no viene mal hacer ese costo de vez en cuando). En el que escuchas los mambos de la otra persona mientras la abrazas. En el de llevar a una persona al lugar que te gusta o es muy importante para vos sólo para que conozca otra partecita más de vos. En el que esperás a esa persona para poder cenar, desayunar, merendar o lo que verga sea. Ese en el que escuchás a esa persona cuando te cuenta cómo le fue en su día sin pensar en alguna otra pelotudes, distrayéndote. Ese en el que no te importa si te llevan a un lugar de lo más “”“”“berreta”“”“”“ sólo porque te gusta estar con esa persona. Ese amor en el que escribís boludeces para esa persona o marcás poemas sólo porque te hacen recordar a esa persona. Ese tipo de amor en el que cuando ves que esa persona está destapada mientras duerme, lo tapás. Ese amor en el que te vas a cualquier hora a la casa sólo porque te dijo que tuvo un mal día. Ese tipo de amor en el que no podés evitar ser atento y cuidar de esa persona. Qué sé yo. En ese amor creo yo. Ese amor que no es material, ese amor que va para un lado más del compañerismo. Es el tipo de amor que yo expreso y tengo para dar, no es de palabras, ni de esos amores que quedan en Whatsapp, no, lo mío es algo más sencillo, pero, por lo menos para mí, llega más. Por mucho tiempo creí que el amor era lo que yo veía de chiquita, después, cuando crecí, me di cuenta que eso no era amor de verdad. Pongo “todavía creo en el amor” porque sé que hay más personas que tienen amor de verdad, aunque sea más probable encontrarse con personas que tienen ese “”“”“"amoorrrr”“”“”“ que me enseñaron de chiquita. Creo en el amor de verdad, por eso, a pesar de todo, todavía creo en él. Y a ver, yo puedo rebloguear todas las cosas que se me canten del culo con respecto del amor, pero nunca va a plasmar por completo el tipo de amor que yo tengo, porque de por si la palabra amor es muuuuuy grande y no abarca sólo a una pareja. El amor que le tengo a mi vieja, por ejemplo, no creo llegar a expresarlo por acá porque es algo muuuu personal, es más, es un amor tan tan grande y abstracto que ni yo puedo terminar de descifrarlo como para definirlo. Y el amor que le tengo a mis hermanos tampoco. Y a mis mascotas? Tampoco. Ni siquiera el amor que le tengo a mi novio. No puedo terminar de expresar lo que es el amor para mí, mucho menos en Tumblr, porque es una definición grandísima y una sensación que desborda. Así que, si yo misma no puedo ”“”“definir”“”“ mi amor, mucho menos vos. Y lo puse en muchas comillas porque el amor no se define, se siente y fue. Ahora, amor berreta de ahora? Dejate de joder, cada uno siente y expresa el amor de la forma en la que le sale y está bien. No existe eso del "amor berreta”. El amor es amor y listo, no le pongas etiqueta. Que vos tengas otro tipo de amor ya es otra cosa, pero no juzgues el amor de otra persona sólo porque el tuyo es diferente. Además, el amor va a seguir siendo amor siempre, las personas no son las de antes y listo, no el amor. Y qué tiene que ver mi edad? Hablás como si nunca fuiste adolescente. La edad no tiene nada que ver con la maduración. Mi edad no es una limitación para expresarme/sentir/pensar/etc. No tiene nada que ver. Es un pensamiento re contra retrógrado el que tenés, tanto en el amor como para limitar a una persona por su edad. No te creas que por ser “una pendeja” tenés el derecho de cuestionarme, como si vos te las supieras todas. Seguro sí, sabés más cosas que yo, pero no quiere decir que te las sepas todas y seas el más vivo. Y que vos en tu época de “pendejo” tuviste ciertas acciones de las cuales te arrepentís y te ves ahora y decís que eras un pelotudo inmaduro, no quiere decir que a los demás les pase lo mismo, ni tampoco que todos los adolescentes hayan sido tal cual como vos. Respetá más a los “pendejos”, que te podés llevar una re sorpresa. No somos unos pelotudos. No nos limites por nuestra edad. Ni tampoco trates de volver a definir el amor, que el amor es amor, y está para ser sentido y expresado, no para juzgarlo.

[elnegrorafy]

Querida señora

En realidad sólo quería darte las gracias por todo este tiempo que e pasado en tu casa y con su hija. No seré el mejor novio o ser humano que para su niña pero intento ser lo mejor y hacerla igual de feliz que tu. No trato de agradar mediante un regalo o alguna cosa material que pueda brindar o regalarle a usted, solo quiero decirte gracias y tome este día como una excusa para poder decirte parte de lo que nunca te e dicho. No tendré la valentía para decirte de frente lo que e querido decirle pero lo hago por medio te un txt y se que el cual quedará en mi y la carta la cual le obsequio. No tengo como pagar cada una de mis sonrisa, tiempo o momento que paso con ustedes y me divierto, no tengo como pagarle la gran bendición que me dio que fue a su hija, quiero que sepas que por ella y por ustedes decidido ser una gran persona y seguir con un cambio en mi vida e intentar llevar mis errores a un mejoramiento, que por ella cada día lucho más por alcázar mis metas y decir lo hice por que ella es mi apoyo y mi luz, la razón de seguir. Has aportado mucho más de lo que piensas a mi vida pero solo te e dado las gracias en una simple carta que no se lo que pensaras de ella. Pero yo te doy las gracias de nuevo sinceramente por permitirme entrar a tu casa, por permitirme estar en los momentos de familia, por estar con su hija y regalarme de su tiempo, escucharme y soportar cosas locas mía. No se que mas decirte porque lo único que me queda decirte una y otra vez. !Gracias por todo!

[juanestebanmarin14-blog]

Fecha:10-08-2017

Manual de HTML para principiantes

Te interesa aprender a diseñar páginas para Internet? Aquí te voy a enseñar los conocimientos fundamentales para que puedas hacerlo desde hoy. Crear una página Web es realmente fácil. Sin meternos mucho en la gran cantidad de detalles que tiene HTML (el lenguaje con el que se diseñan las páginas Web), existen algunos conceptos básicos que te pueden ayudar a hacer tu primera página y dar a conocer lo que tú quieras a la enorme cantidad de usuarios de Internet en todo el mundo. La manera de explicarte todo este asunto del diseño lo quiero hacer de la forma más sencilla posible. Y cuál es ésta? pues utilizando un lenguaje nada técnico, como si te estuviera explicando un amigo. Así para aquellas personas que nunca han estado en contacto con el argot informático, este breve manual podrá ser más que entendible. Antes de empezar Parece muy obvio, pero a veces no es así. Antes de iniciar con el diseño de tu página, debes tener en mente qué quieres poner en ella. Si tienes idea de lo que quieres hacer será mucho más fácil. Aquí te doy unos tips sobre lo que puede tratarse tu página: - Información personal. - Artista favorito. - Cualquier disciplina: Computación, artes, deportes, música, etc. - Manuales: computadoras, mecánica, recetas de cocina, etc. - Tu región: país, ciudad, etc. - Una combinación de todos. En fin, los temas son inagotales y depende de tu creatividad e imaginación el que decidas elegir. Qué necesitas... Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el Bloc de notas o Notepad, que sería lo más práctico y sencillo. No te recomiendo por ahora usar el Word o algún programa similar porque podría haber problemas con los formatos, pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto simple (extensión .txt). Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu página. Estos navegadores de Internet pueden ser Netscape Navigator o Internet Explorer. Para diseñar tu página no es necesario por el momento que dispongas de una conexión a Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo visualizando en el navegador sin tener que conectarte. Inicio Entra al editor de textos (Bloc de notas) y crea un archivo nuevo; no tienes que escribir nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo prueba, ya que es el ejemplo que se manejará en este manual. Es necesario que le pongas la extensión htm o html a ese archivo para que lo puedas visualizar en el navegador. Entonces el archivo quedará así: prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro. Para ver como está quedando tu página (cuando hayas empezado con el diseño) haz lo siguiente: Para Netscape Navigator o Communicator: Ve a File en el menú y escoge Open Page (Open File para otras versiones). Escoge Choose File y dale la dirección en la que tienes guardado tu archivo prueba.htm. Ya que tengas la dirección correcta dale Aceptar y verás tu página. Para Internet Explorer: Te vas al menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la dirección en donde se encuentra tu archivo prueba.htm. Ya que lo tengas le das Aceptar y tu archivo se visualizará en el navegador. Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a programar en html. Estructura básica de un documento en HTML El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo <TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del navegador. Las mayoría de las etiquetas necesitan cerrarse y modifican la información contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se explicará mejor el significado de éstas y otras más. Todos los documentos en html deben tener la siguiente estructura: <HTML> <HEAD> <TITLE>Mi página</TITLE> </HEAD> <BODY> Aquí va todo el contenido del programa. </BODY> </HTML> Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el contenido del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el nombre que le quieras dar a tu página. *** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de Internet. Entra al editor de textos, carga tu archivo prueba.htm (que por ahora debe estar vacío) y teclea lo siguiente: <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY> En esta página explicaremos brevemente los inicios de la red de redes. </BODY> </HTML> ***************** Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de Internet y aparece en el marco superior del navegador. Como se acaba de mencionar, dentro de las etiquetas <BODY> </BODY> desarrollaremos todo nuestro contenido. Presiona el enlace que aparece subrayado para ver como debe lucir nuestra página hasta ahora. Ver página web Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de codificar. Recuerda que ya has aprendido cómo visualizarlo. Texto Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red. A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto. <PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc. <BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse. <P> Realiza un salto de párrafo. Tampoco necesita cerrarse. <CENTER> </CENTER> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos. <Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente. Ejem: <H1>Encabezado</H1> <H2>Encabezado</H2> <H3>Encabezado</H3> <H4>Encabezado</H4> <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3. Texto en <B>Negritas</B> Texto en <I>Itálica</I> Texto <U>subrayado</U> <ADDRESS> Dirección </ADDRESS> <HR> Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le añade un color gris más fuerte. Ejem: <HR> <HR WIDTH=20% ALIGN=RIGHT SIZE=7> <HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE> *** Vamos a utilizar en nuestra página algunas de éstas etiquetas para modificar texto. Carga prueba.htm y teclea lo siguiente: <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el Departamento de Defensa de los Estados Unidos desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> </BODY> </HTML> ***************** Presiona el enlace para ver nuestra página después de agregar más información y de utilizar algunos de los modificadores de texto explicados en esta sección. Ver página web Color Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra. Para poder representar un color en html, se deben utilizar 6 números hexadecimales. Ejem: ROJO FF0000 VERDE 00FF00 AZUL 0000FF MAGENTA FF00FF VIOLETA 9900DD ROSA CLARO FFDDFF Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades. Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos colores. Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> </BODY> por ejemplo: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF"> donde: BGCOLOR es el color del fondo. TEXT es el color del texto. LINK es el color del enlace. Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#". También se puede cambiar el color sólo para un segmento deseado como: <FONT COLOR="#FF0000">Texto</FONT> *** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo siguiente: <HTML> &ltHEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED>Departamento de Defensa de los Estados Unidos</font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> </BODY> </HTML> ***************** Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta <BODY> </BODY> hemos agregado un determinado color para el fondo. También hemos especificado que sólo un segmento del texto sea de color rojo. Presiona para ver nuestro diseño: Ver página web Imágenes Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos. Para agregar una imagen en un documento se utiliza la etiqueta <IMG>. Ejem: <IMG SRC="home2.jpg" ALT="Casa azul"> Casa azul Donde: IMG indica el deseo de cargar una imagen. SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo. Ejem: <IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul"> ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen. Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos: ALIGN=left|right|top|middle|bottom Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto. BORDER=n Le agrega un borde a la imagen y "n" indica el grosor. WIDTH=n, HEIGHT=n Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels. VSPACE=n, HSPACE=n Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee. Ejem: Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de él horizontalmente 10 unidades con un borde de grosor 2. *** Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la modificación. <HTML> <HEAD> <TITLE>Historia de Internet>/TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> <center><IMG SRC="home2.jpg" ALT="Casa azul"></center> </BODY> </HTML> ***************** Se ha insertado un gráfico a nuestra página que debe aparecer centrado. Da un click al enlace para ver el archivo. Ver página web Enlaces (Links) El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios como algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un click en un segmento de texto o una imagen, es posible encontrar más información relacionada con la que originó ese click. Dicha información puede encontrarse en otras páginas dentro y fuera de nuestro servidor*, o en algún punto concreto de páginas dentro y fuera de nuestro servidor. *La computadora donde tenemos montada nuestra página. El enlace por definición aparece en nuestras páginas subrayado y de color azul. Como ya se vió anteriormente, el color del enlace puede cambiarse al gusto. La etiqueta encargada de establecer un enlace es: <A> </A>. Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde está la información a enlazar y también el tipo de protocolo* utilizado. Con HREF es posible también hacer enlaces directos hacia imágenes, sonidos, etc. *El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos hipertexto, transferencia de archivos, correo electrónico, etc. Ejem: HTTP, FTP, MAILTO, GOPHER, etc. Ejem: <A HREF="http://www.usatoday.com">Periódico USA Today</A> Periódico USA Today Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link hacia otra página fuera de la nuestra en otro servidor. Ejem: <A HREF="index.html">Página principal>/A> Página principal Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link hacia otra página dentro del mismo servidor en el que se encuentra esta página tutorial de html. También es posible crear un enlace a través de una imagen en lugar de utilizar un segmento de texto. Esto se hace de la misma manera que los ejemplos anteriores, sólo que en lugar de escribir texto entre las etiquetas se inserta una imagen como las que ya hemos visto. Ejem: <A HREF="http://www.goto.com"><IMG SRC="logo.gif"></A> www.goto.com Dale un click al enlace gráfico creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link gráfico hacia otra página web. *** Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad.<P> * Más información sobre este tema en: <A HREF="http://www.interhelp.org/historia01.html">www.interhelp.org</A> <hr> <font size=2>Documento creado en Febrero del 2000</font> <center><A HREF="index.html"><IMG SRC="home2.jpg" ALT="Casa azul"></A></center> </BODY> </HTML> *****************

[lauragallardo03-blog]

Manuales

                                       MANUALES                                                        

MANUAL DE HTML PARA PRINCIPIANTES

Antes de empezar Parece muy obvio, pero a veces no es así. Antes de iniciar con el diseño de tu página, debes tener en mente qué quieres poner en ella. Si tienes idea de lo que quieres hacer será mucho más fácil. Aquí te doy unos tips sobre lo que puede tratarse tu página: - Información personal. - Artista favorito. - Cualquier disciplina: Computación, artes, deportes, música, etc. - Manuales: computadoras, mecánica, recetas de cocina, etc. - Tu región: país, ciudad, etc. - Una combinación de todos. En fin, los temas son inagotales y depende de tu creatividad e imaginación el que decidas elegir. Qué necesitas… Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el Bloc de notas o Notepad, que sería lo más práctico y sencillo. No te recomiendo por ahora usar el Word o algún programa similar porque podría haber problemas con los formatos, pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto simple (extensión .txt). Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu página. Estos navegadores de Internet pueden ser Netscape Navigator o Internet Explorer. Para diseñar tu página no es necesario por el momento que dispongas de una conexión a Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo visualizando en el navegador sin tener que conectarte. Inicio Entra al editor de textos (Bloc de notas) y crea un archivo nuevo; no tienes que escribir nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo prueba, ya que es el ejemplo que se manejará en este manual. Es necesario que le pongas la extensión htm o html a ese archivo para que lo puedas visualizar en el navegador. Entonces el archivo quedará así: prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro. Para ver como está quedando tu página (cuando hayas empezado con el diseño) haz lo siguiente: Para Netscape Navigator o Communicator: Ve a File en el menú y escoge Open Page (Open File para otras versiones). Escoge Choose File y dale la dirección en la que tienes guardado tu archivo prueba.htm. Ya que tengas la dirección correcta dale Aceptar y verás tu página. Para Internet Explorer: Te vas al menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la dirección en donde se encuentra tu archivo prueba.htm. Ya que lo tengas le das Aceptar y tu archivo se visualizará en el navegador. Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a programar en html.

Texto Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red. A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto. <PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc. <BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse. <P> Realiza un salto de párrafo. Tampoco necesita cerrarse. <CENTER> </CENTER> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos. <Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente. Ejem: <H1>Encabezado</H1> <H2>Encabezado</H2> <H3>Encabezado</H3> <H4>Encabezado</H4> <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3. Texto en <B>Negritas</B> Texto en <I>Itálica</I> Texto <U>subrayado</U>

Color Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra. Para poder representar un color en html, se deben utilizar 6 números hexadecimales. Ejem: ROJO         FF0000 VERDE        00FF00 AZUL         0000FF MAGENTA      FF00FF VIOLETA      9900DD ROSA CLARO   FFDDFF     Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades. Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo “RED” en lugar de “FF0000”, o “BLUE” en lugar de “0000FF”, pero tiene la limitante de que solamente reconoce unos cuantos colores. Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> </BODY> por ejemplo: <BODY BGCOLOR=“#FFFFFF” TEXT=“#FF0000” LINK=“#00AEFF”> donde: BGCOLOR es el color del fondo. TEXT es el color del texto. LINK es el color del enlace. Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo “#”. También se puede cambiar el color sólo para un segmento deseado como: <FONT COLOR=“#FF0000”>Texto</FONT>

Imágenes Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos. Para agregar una imagen en un documento se utiliza la etiqueta <IMG>. Ejem: <IMG SRC=“home2.jpg” ALT=“Casa azul”> Casa azul Donde: IMG indica el deseo de cargar una imagen. SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo. Ejem: <IMG SRC=“../web/imagen/home2.jpg” ALT=“Casa azul”> ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen. Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos: ALIGN=left|right|top|middle|bottom Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto. BORDER=n Le agrega un borde a la imagen y “n” indica el grosor. WIDTH=n, HEIGHT=n Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels. VSPACE=n, HSPACE=n Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee.

PROGRAMACIÓN DE HTML DESDE CERO

rimera leccion Elementos que vamos a utilizar para trabajar: bloc de notas. Lo primero que hay que tener en cuenta es que el codigo en html se compone basicamente de “tags” o “etiquetas”. Las mismas son palabras claves que cumplen una funcion determinada, y tales palabras van encerradas entre < > (Ej; <html>, <body>, <head>, etc.). De aqui en mas las llamaremos solamente etiquetas. Veamos el primer ejemplo de codigo: <html> <body> <h1>Titulo de la pagina</h1> <p>Primer parrafo de la pagina</p> </body> </html> Ahora analizemos los elementos que hay en el ejemplo de arriba: 1) el texto entre <html> y </html> describe el contenido de la pagina. 2) el texto entre <body> y </body> describe el contenido visible de la pagina. 3) el texto entre <h1> y </h1> es el titulo o encabezado de la pagina (mas adelante veremos el uso de <h1> en profundidad) 4) el texto entre <p> y </p> es el contenido de un parrafo. **A tener en cuenta: todas las etiquetas deben abrir con <> y cerrar con </> con solo algunas excepciones. Ahora escriban el codigo del primer ejemplo en el bloc de notas. Hagan clic en “archivo”, “guardar como” y coloquenle el nombre “index.html” (sin las comillas) y en “tipo” seleccionen “todos los archivos”.  Guarden el archivo. Al abrirlo, veran en el navegador el resultado que hemos obtenido hasta el momento. Segunda leccion Primer ejemplo de codigo: <html> <body> <h1>Primer encabezado</h1> <h2>Segundo encabezado</h2> <h3>Tecer encabezado</h3> <h4>Cuarto encabezado</h4> <h5>Quinto encabezado</h5> <h6>Sexto encabezado</h6> </body> </html> Si escriben este codigo en el bloc de notas veran que el resultado es que tenemos seis titulos en orden de tamaño, desde el mas grande (<h1> hasta el mas pequeño (<h6>. Sin embargo, la funcion de esta etiquetas no es la de agrandar o achicar el tamaño de la letra, sino el de darle mayor o menor importancia a un trozo de texto. Esto en gran medida contribuye a que Google luego encuentre nuestro sitio web, ya que podemos darle mas importancia a ciertas frases claves y menos importancia a lo demas. Estas etiquetas solo van del h1 al h6. Segundo ejemplo de codigo: <html> <body> <p>Este es el primer parrafo.</p> <p>Este es el segundo parrafo.</p> </body> </html> Este ejemplo no necesita tanta explicacion. Cada porcion de texto que escribamos entre las etiquetas <p> y </p> sera un parrafo, y por ende, al abrir otra etiqueta <p>, el texto comenzara en la linea de abajo como un nuevo parrafo. **A tener en cuenta: Si al codigo de ejemplo le quitamos las etiquetas de cierre </p>, el resultado visual es el mismo. Es porque hasta html 4 esta y algunas otras etiquetas podian quedar abiertas. Aun asi xhtml y html 5, exigen el cierre de TODAS las etiquetas, por lo que es bueno que se acostumbren desde el principio a hacerlo asi. Tercer ejemplo de codigo: <html> <body> <a href="http://www.taringa.net">Este es un link a Taringa!</a> <p>Para entrar a Taringa! haz clic <a href="http://www.taringa.net">aqui.</a></p> </body> </html> Aca vemos un ejemplo de la insercion de un link. La etiqueta es <a>. Dentro de la etiqueta de apertura, se escribe el atributo “href” seguido del signo “=”, tras lo cual añadimos la url que deseemos, siempre entre comillas y con “http://” delante si se trata de un sitio web. (Esta url tambien puede ser un archivo local, por ej: pagina1.html, siempre y cuando, el archivo “pagina1.html” este en la misma carpeta o directorio donde se encuentra el archivo .html que estamos editando.) Entre ambas etiquetas <a> y </a> va el texto que contendra el link. En la segunda linea, ven que solo queda resaltada la palabra aqui y es la que contiene el link a Taringa! Cuarto ejemplo de codigo: <html> <body> <img src="foto.jpg" width="100px" height="150px" /> <img src="imagenes/foto.jpg" width="100px" height="150px" /> </body> </html> Aqui tenemos la insercion de nuestra primera imagen. La etiqueta “img” es una sola, y al final se cierra ella misma con “/>”. Dentro de la etiqueta tenemos el atributo “src” (que viene de la palabra “source” o fuente), en el cual colocamos el nombre de la imagen con su extenxion (en este caso “.jpg”, pero pueden ser otras, como .bmp, .png, etc.) siempre teniendo en cuenta que debe estar dentro de la misma carpeta donde se encuentra nuestro archivo .html. En el caso de que ademas esta en una subcarpeta, colocamos el nombre de la misma, como se muestra en la segunda linea. Tenemos tambien los atributos “width” y “height”. Ambos significan “ancho” y “alto”, en ese orden. Por lo tanto, lo que estamos indicando con estos atributos son el ancho y el alto de nuestra imagen, y lo hacemos en pixeles (px). **A tener en cuenta: Nunca olviden las comillas los valores de cada atributo. En todos los atributos, los valores deben ir encerrados entre comillas (ver los ejemplos). Ahora bien, ya tenemos un archivo llamado index.html. Creen una nueva carpeta que diga “Mi Pagina Web” y coloquen alli el archivo “index.html” y una foto. Luego editen el archivo “index.html” con el bloc de notas para que se visualize la foto que tienen en la carpeta. Vamos a hacer uso de esta carpeta para nuestro sitio, asi que ¡no la borren!

HTML es la Abreviatura de hipertext Markup Lenguaje o lenguaje de marcas de hipertexto. Html es el lenguaje con el que se escriben las páginas web.  ¿Qué se puede hacer con este lenguaje?  Por ejemplo especificar las imágenes de la página, los textos o los gráficos. También se puede dar formato a los textos (tipo, color y tamaño de la fuente).  Todos los archivos de las páginas web tienen extensión .html ó .htm. Las instrucciones (se llaman tags o etiquetas) de este lenguaje siempre empiezan con el signo < y terminan con > (la instrucción aparece entre estos dos símbolos). Las instrucciones <html> y </html> sirven para el principio y el final del documento. Todas las ordenes, etiquetas o tags (es todo lo mismo) acaban con el mismo nombre pero añadiendo la barra /.  El conjunto de instrucciones de un programa (código fuente), en este caso de una página web, se puede ver prácticamente en cualquier página que visites en internet. Si abrimos una página, debajo de la fachada de la página se esconden muchas instrucciones, que podrás ver si pinchas en ver código fuente en el navegador. Para escribir un código fuente es suficiente un sencillo editor de texto, como por ejemplo el de bloc de notas.  Para comprobar que lo escrito esta bien y lógicamente para ver la página necesitaras un navegador, y para colgarla en la red tienes que disponer de conexión a internet, de espacio en un servidor web, y del software necesario para enviarle los archivos (programa de transferencia de archivos FTP).  Pero empecemos por crear nuestra primera web muy sencillita. Para empezar abrimos el editor de textos, por ejemplo el notepad o cualquier otro que tengas. El notepad es gratis y lo tienes en tu ordenador.  Empecemos a escribir el código fuente: Ejemplo Nº1 <html> <head> <title>Esta es mi página web</title> </head> <body> ¡Muy buenas! ¡Vamos hacer una página web! </body> </html>  OJO Guardalo como ejercicio.html Un vez guardado si pinchas en el icono dos veces abrirás el archivo con el notepad. De esta forma puedes modificarlo.  Si quieres ver como se ve en el navegador tendrás que seleccionar el archivo (un solo click sobre el) y después abrir con y selecciona el navegador con el que quieras abrirlo.  Vamos analizar un poco el programa. Entre la instrucción head está la cabecera de la página, en ella se introduce información que normalmente no aparece al visualizarla (solo información para la persona que trabaje con el programa) y también entre title se pone el nombre de la página que luego aparecerá en la barra de título de la ventana del navegador.  El cuerpo de la página, es decir el texto que aparecerá en la página se pone con la orden body. Ahora guarda el documento con extensión .html en el disco duro y ábrelo. Se visualizará lo que hiciste en el navegador. Para modificarla sin que se abra el navegador, botón derecho abrir con, bloc de notas o doble click sobre el archivo. El código da igual en mayúsculas que en minúsculas.   Otras etiquetas en html: Br cuando quieras introducir un salto de línea (no hace falta /br) p delimita un párrafo. Se ocupa de que los textos mas largos se dividan automáticamente (hace los cambios de línea de un párrafo automáticamente).La longitud de la línea queda definida por el ancho de la ventana. H1 resalta titulares. El tamaño del titular se controla con el número (h3 la línea será mas pequeña. Hay hasta el 6). Hr nos pondrá una línea donde la pongamos que ocupará toda la página. No hace falta poner la instrucción final (con barra /).Si va seguido de width =30% la línea ocupará el 30%. Si le sigue size=10 especificamos el grosor. Ejemplo <hr size=10 width=50%> Align= después del igual puede ir center para centrar, right para alinear a la parte derecha y left para alinear a la izquierda. Ejemplo: <p align=center> alineará el párrafo centrándolo. <hr size=10 width=80% align=center>. Para el color de la línea font color=”green” (ver más adelante font) <font size= “2”> </font> tamaño de letra. A mayor número mayor la letra. Ul para empezar una lista de palabras. Cada palabra de la lista va con la órden li. Ejemplo: <ul> <li> manzanas <li> platanos </ul>  Con <li> haces que en cada palabra aparezca con una viñeta con apariencia de lista.  Hacer lo mismo pero poniendo <ol> en lugar de <li>. Con la orden ol en vez de ul aparecerá una lista numerada. <u> </u> lo que se ponga entre las dos órdenes aparecerá subrayado. <center> </center> texto centrado. <b> </b> texto en negrita. <i> </i> cursiva.  subíndice. Ejemplo H₂O resultado H2O. Con SUP sería superíndice.   Para tipo, tamaño y color de letra (también para las líneas) se empieza por font. Con <font face “courier”> se modifica la fuente del texto que viene a continuación hasta la orden </font>. OJO Si no se pone esta última afectará a todo el texto hasta el final del documento. Con <font color=”OOFFFF”> se cambia el color. Se puede usar un alias para cada color <font color=”red”>. El alias suele ser el nombre del color pero en ingles (black, blue, green, red, white, etc.) Con <font size=5> </font> se modifica el tamaño de la letra. <Bgcolor=”yellow”> pone el color amarillo.  Si lo ponemos dentro de body afectará al fondo de la pagina. <body bgcolor=”yellow”> pone la página con fondo amarillo.  Si queremos poner un fondo de una imagen de archivo se pone background=”archivo.jpg” dentro de body. El archivo de la imagen debe estar en la misma carpeta del archivo html.

[blogkarennavas26-blog]

MANUALES

MANUAL DE HTML PARA PRINCIPIANTES

Antes de empezar Parece muy obvio, pero a veces no es así. Antes de iniciar con el diseño de tu página, debes tener en mente qué quieres poner en ella. Si tienes idea de lo que quieres hacer será mucho más fácil. Aquí te doy unos tips sobre lo que puede tratarse tu página: - Información personal. - Artista favorito. - Cualquier disciplina: Computación, artes, deportes, música, etc. - Manuales: computadoras, mecánica, recetas de cocina, etc. - Tu región: país, ciudad, etc. - Una combinación de todos. En fin, los temas son inagotales y depende de tu creatividad e imaginación el que decidas elegir. Qué necesitas... Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el Bloc de notas o Notepad, que sería lo más práctico y sencillo. No te recomiendo por ahora usar el Word o algún programa similar porque podría haber problemas con los formatos, pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto simple (extensión .txt). Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu página. Estos navegadores de Internet pueden ser Netscape Navigator o Internet Explorer. Para diseñar tu página no es necesario por el momento que dispongas de una conexión a Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo visualizando en el navegador sin tener que conectarte. Inicio Entra al editor de textos (Bloc de notas) y crea un archivo nuevo; no tienes que escribir nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo prueba, ya que es el ejemplo que se manejará en este manual. Es necesario que le pongas la extensión htm o html a ese archivo para que lo puedas visualizar en el navegador. Entonces el archivo quedará así: prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro. Para ver como está quedando tu página (cuando hayas empezado con el diseño) haz lo siguiente: Para Netscape Navigator o Communicator: Ve a File en el menú y escoge Open Page (Open File para otras versiones). Escoge Choose File y dale la dirección en la que tienes guardado tu archivo prueba.htm. Ya que tengas la dirección correcta dale Aceptar y verás tu página. Para Internet Explorer: Te vas al menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la dirección en donde se encuentra tu archivo prueba.htm. Ya que lo tengas le das Aceptar y tu archivo se visualizará en el navegador. Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a programar en html.

Texto Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red. A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto. <PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc. <BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse. <P> Realiza un salto de párrafo. Tampoco necesita cerrarse. <CENTER> </CENTER> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos. <Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente. Ejem: <H1>Encabezado</H1> <H2>Encabezado</H2> <H3>Encabezado</H3> <H4>Encabezado</H4> <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3. Texto en <B>Negritas</B> Texto en <I>Itálica</I> Texto <U>subrayado</U>

Color Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra. Para poder representar un color en html, se deben utilizar 6 números hexadecimales. Ejem: ROJO         FF0000 VERDE        00FF00 AZUL         0000FF MAGENTA      FF00FF VIOLETA      9900DD ROSA CLARO   FFDDFF     Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades. Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos colores. Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> </BODY> por ejemplo: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF"> donde: BGCOLOR es el color del fondo. TEXT es el color del texto. LINK es el color del enlace. Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#". También se puede cambiar el color sólo para un segmento deseado como: <FONT COLOR="#FF0000">Texto</FONT>

Imágenes Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos. Para agregar una imagen en un documento se utiliza la etiqueta <IMG>. Ejem: <IMG SRC="home2.jpg" ALT="Casa azul"> Casa azul Donde: IMG indica el deseo de cargar una imagen. SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo. Ejem: <IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul"> ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen. Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos: ALIGN=left|right|top|middle|bottom Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto. BORDER=n Le agrega un borde a la imagen y "n" indica el grosor. WIDTH=n, HEIGHT=n Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels. VSPACE=n, HSPACE=n Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee.

PROGRAMACIÓN DE HTML DESDE CERO

rimera leccion Elementos que vamos a utilizar para trabajar: bloc de notas. Lo primero que hay que tener en cuenta es que el codigo en html se compone basicamente de "tags" o "etiquetas". Las mismas son palabras claves que cumplen una funcion determinada, y tales palabras van encerradas entre < > (Ej; <html>, <body>, <head>, etc.). De aqui en mas las llamaremos solamente etiquetas. Veamos el primer ejemplo de codigo: <html> <body> <h1>Titulo de la pagina</h1> <p>Primer parrafo de la pagina</p> </body> </html> Ahora analizemos los elementos que hay en el ejemplo de arriba: 1) el texto entre <html> y </html> describe el contenido de la pagina. 2) el texto entre <body> y </body> describe el contenido visible de la pagina. 3) el texto entre <h1> y </h1> es el titulo o encabezado de la pagina (mas adelante veremos el uso de <h1> en profundidad) 4) el texto entre <p> y </p> es el contenido de un parrafo. **A tener en cuenta: todas las etiquetas deben abrir con <> y cerrar con </> con solo algunas excepciones. Ahora escriban el codigo del primer ejemplo en el bloc de notas. Hagan clic en "archivo", "guardar como" y coloquenle el nombre "index.html" (sin las comillas) y en "tipo" seleccionen "todos los archivos".  Guarden el archivo. Al abrirlo, veran en el navegador el resultado que hemos obtenido hasta el momento. Segunda leccion Primer ejemplo de codigo: <html> <body> <h1>Primer encabezado</h1> <h2>Segundo encabezado</h2> <h3>Tecer encabezado</h3> <h4>Cuarto encabezado</h4> <h5>Quinto encabezado</h5> <h6>Sexto encabezado</h6> </body> </html> Si escriben este codigo en el bloc de notas veran que el resultado es que tenemos seis titulos en orden de tamaño, desde el mas grande (<h1> hasta el mas pequeño (<h6>. Sin embargo, la funcion de esta etiquetas no es la de agrandar o achicar el tamaño de la letra, sino el de darle mayor o menor importancia a un trozo de texto. Esto en gran medida contribuye a que Google luego encuentre nuestro sitio web, ya que podemos darle mas importancia a ciertas frases claves y menos importancia a lo demas. Estas etiquetas solo van del h1 al h6. Segundo ejemplo de codigo: <html> <body> <p>Este es el primer parrafo.</p> <p>Este es el segundo parrafo.</p> </body> </html> Este ejemplo no necesita tanta explicacion. Cada porcion de texto que escribamos entre las etiquetas <p> y </p> sera un parrafo, y por ende, al abrir otra etiqueta <p>, el texto comenzara en la linea de abajo como un nuevo parrafo. **A tener en cuenta: Si al codigo de ejemplo le quitamos las etiquetas de cierre </p>, el resultado visual es el mismo. Es porque hasta html 4 esta y algunas otras etiquetas podian quedar abiertas. Aun asi xhtml y html 5, exigen el cierre de TODAS las etiquetas, por lo que es bueno que se acostumbren desde el principio a hacerlo asi. Tercer ejemplo de codigo: <html> <body> <a href="http://www.taringa.net">Este es un link a Taringa!</a> <p>Para entrar a Taringa! haz clic <a href="http://www.taringa.net">aqui.</a></p> </body> </html> Aca vemos un ejemplo de la insercion de un link. La etiqueta es <a>. Dentro de la etiqueta de apertura, se escribe el atributo "href" seguido del signo "=", tras lo cual añadimos la url que deseemos, siempre entre comillas y con "http://" delante si se trata de un sitio web. (Esta url tambien puede ser un archivo local, por ej: pagina1.html, siempre y cuando, el archivo "pagina1.html" este en la misma carpeta o directorio donde se encuentra el archivo .html que estamos editando.) Entre ambas etiquetas <a> y </a> va el texto que contendra el link. En la segunda linea, ven que solo queda resaltada la palabra aqui y es la que contiene el link a Taringa! Cuarto ejemplo de codigo: <html> <body> <img src="foto.jpg" width="100px" height="150px" /> <img src="imagenes/foto.jpg" width="100px" height="150px" /> </body> </html> Aqui tenemos la insercion de nuestra primera imagen. La etiqueta "img" es una sola, y al final se cierra ella misma con "/>". Dentro de la etiqueta tenemos el atributo "src" (que viene de la palabra "source" o fuente), en el cual colocamos el nombre de la imagen con su extenxion (en este caso ".jpg", pero pueden ser otras, como .bmp, .png, etc.) siempre teniendo en cuenta que debe estar dentro de la misma carpeta donde se encuentra nuestro archivo .html. En el caso de que ademas esta en una subcarpeta, colocamos el nombre de la misma, como se muestra en la segunda linea. Tenemos tambien los atributos "width" y "height". Ambos significan "ancho" y "alto", en ese orden. Por lo tanto, lo que estamos indicando con estos atributos son el ancho y el alto de nuestra imagen, y lo hacemos en pixeles (px). **A tener en cuenta: Nunca olviden las comillas los valores de cada atributo. En todos los atributos, los valores deben ir encerrados entre comillas (ver los ejemplos). Ahora bien, ya tenemos un archivo llamado index.html. Creen una nueva carpeta que diga "Mi Pagina Web" y coloquen alli el archivo "index.html" y una foto. Luego editen el archivo "index.html" con el bloc de notas para que se visualize la foto que tienen en la carpeta. Vamos a hacer uso de esta carpeta para nuestro sitio, asi que ¡no la borren!

HTML es la Abreviatura de hipertext Markup Lenguaje o lenguaje de marcas de hipertexto. Html es el lenguaje con el que se escriben las páginas web.  ¿Qué se puede hacer con este lenguaje?  Por ejemplo especificar las imágenes de la página, los textos o los gráficos. También se puede dar formato a los textos (tipo, color y tamaño de la fuente).  Todos los archivos de las páginas web tienen extensión .html ó .htm. Las instrucciones (se llaman tags o etiquetas) de este lenguaje siempre empiezan con el signo < y terminan con > (la instrucción aparece entre estos dos símbolos). Las instrucciones <html> y </html> sirven para el principio y el final del documento. Todas las ordenes, etiquetas o tags (es todo lo mismo) acaban con el mismo nombre pero añadiendo la barra /.  El conjunto de instrucciones de un programa (código fuente), en este caso de una página web, se puede ver prácticamente en cualquier página que visites en internet. Si abrimos una página, debajo de la fachada de la página se esconden muchas instrucciones, que podrás ver si pinchas en ver código fuente en el navegador. Para escribir un código fuente es suficiente un sencillo editor de texto, como por ejemplo el de bloc de notas.  Para comprobar que lo escrito esta bien y lógicamente para ver la página necesitaras un navegador, y para colgarla en la red tienes que disponer de conexión a internet, de espacio en un servidor web, y del software necesario para enviarle los archivos (programa de transferencia de archivos FTP).  Pero empecemos por crear nuestra primera web muy sencillita. Para empezar abrimos el editor de textos, por ejemplo el notepad o cualquier otro que tengas. El notepad es gratis y lo tienes en tu ordenador.  Empecemos a escribir el código fuente: Ejemplo Nº1 <html> <head> <title>Esta es mi página web</title> </head> <body> ¡Muy buenas! ¡Vamos hacer una página web! </body> </html>  OJO Guardalo como ejercicio.html Un vez guardado si pinchas en el icono dos veces abrirás el archivo con el notepad. De esta forma puedes modificarlo.  Si quieres ver como se ve en el navegador tendrás que seleccionar el archivo (un solo click sobre el) y después abrir con y selecciona el navegador con el que quieras abrirlo.  Vamos analizar un poco el programa. Entre la instrucción head está la cabecera de la página, en ella se introduce información que normalmente no aparece al visualizarla (solo información para la persona que trabaje con el programa) y también entre title se pone el nombre de la página que luego aparecerá en la barra de título de la ventana del navegador.  El cuerpo de la página, es decir el texto que aparecerá en la página se pone con la orden body. Ahora guarda el documento con extensión .html en el disco duro y ábrelo. Se visualizará lo que hiciste en el navegador. Para modificarla sin que se abra el navegador, botón derecho abrir con, bloc de notas o doble click sobre el archivo. El código da igual en mayúsculas que en minúsculas.   Otras etiquetas en html: Br cuando quieras introducir un salto de línea (no hace falta /br) p delimita un párrafo. Se ocupa de que los textos mas largos se dividan automáticamente (hace los cambios de línea de un párrafo automáticamente).La longitud de la línea queda definida por el ancho de la ventana. H1 resalta titulares. El tamaño del titular se controla con el número (h3 la línea será mas pequeña. Hay hasta el 6). Hr nos pondrá una línea donde la pongamos que ocupará toda la página. No hace falta poner la instrucción final (con barra /).Si va seguido de width =30% la línea ocupará el 30%. Si le sigue size=10 especificamos el grosor. Ejemplo <hr size=10 width=50%> Align= después del igual puede ir center para centrar, right para alinear a la parte derecha y left para alinear a la izquierda. Ejemplo: <p align=center> alineará el párrafo centrándolo. <hr size=10 width=80% align=center>. Para el color de la línea font color=”green” (ver más adelante font) <font size= “2”> </font> tamaño de letra. A mayor número mayor la letra. Ul para empezar una lista de palabras. Cada palabra de la lista va con la órden li. Ejemplo: <ul> <li> manzanas <li> platanos </ul>  Con <li> haces que en cada palabra aparezca con una viñeta con apariencia de lista.  Hacer lo mismo pero poniendo <ol> en lugar de <li>. Con la orden ol en vez de ul aparecerá una lista numerada. <u> </u> lo que se ponga entre las dos órdenes aparecerá subrayado. <center> </center> texto centrado. <b> </b> texto en negrita. <i> </i> cursiva.  subíndice. Ejemplo H₂O resultado H2O. Con SUP sería superíndice.   Para tipo, tamaño y color de letra (también para las líneas) se empieza por font. Con <font face “courier”> se modifica la fuente del texto que viene a continuación hasta la orden </font>. OJO Si no se pone esta última afectará a todo el texto hasta el final del documento. Con <font color=”OOFFFF”> se cambia el color. Se puede usar un alias para cada color <font color=”red”>. El alias suele ser el nombre del color pero en ingles (black, blue, green, red, white, etc.) Con <font size=5> </font> se modifica el tamaño de la letra. <Bgcolor=”yellow”> pone el color amarillo.  Si lo ponemos dentro de body afectará al fondo de la pagina. <body bgcolor=”yellow”> pone la página con fondo amarillo.  Si queremos poner un fondo de una imagen de archivo se pone background=”archivo.jpg” dentro de body. El archivo de la imagen debe estar en la misma carpeta del archivo html.

[josecaro2002-blog]

27/07/2017

e interesa aprender a diseñar páginas para Internet? Aquí te voy a enseñar los conocimientos fundamentales para que puedas hacerlo desde hoy. Crear una página Web es realmente fácil. Sin meternos mucho en la gran cantidad de detalles que tiene HTML (el lenguaje con el que se diseñan las páginas Web), existen algunos conceptos básicos que te pueden ayudar a hacer tu primera página y dar a conocer lo que tú quieras a la enorme cantidad de usuarios de Internet en todo el mundo. La manera de explicarte todo este asunto del diseño lo quiero hacer de la forma más sencilla posible. Y cuál es ésta? pues utilizando un lenguaje nada técnico, como si te estuviera explicando un amigo. Así para aquellas personas que nunca han estado en contacto con el argot informático, este breve manual podrá ser más que entendible. Antes de empezar Parece muy obvio, pero a veces no es así. Antes de iniciar con el diseño de tu página, debes tener en mente qué quieres poner en ella. Si tienes idea de lo que quieres hacer será mucho más fácil. Aquí te doy unos tips sobre lo que puede tratarse tu página: - Información personal. - Artista favorito. - Cualquier disciplina: Computación, artes, deportes, música, etc. - Manuales: computadoras, mecánica, recetas de cocina, etc. - Tu región: país, ciudad, etc. - Una combinación de todos. En fin, los temas son inagotales y depende de tu creatividad e imaginación el que decidas elegir. Qué necesitas... Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el Bloc de notas o Notepad, que sería lo más práctico y sencillo. No te recomiendo por ahora usar el Word o algún programa similar porque podría haber problemas con los formatos, pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto simple (extensión .txt). Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu página. Estos navegadores de Internet pueden ser Netscape Navigator o Internet Explorer. Para diseñar tu página no es necesario por el momento que dispongas de una conexión a Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo visualizando en el navegador sin tener que conectarte. Inicio Entra al editor de textos (Bloc de notas) y crea un archivo nuevo; no tienes que escribir nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo prueba, ya que es el ejemplo que se manejará en este manual. Es necesario que le pongas la extensión htm o html a ese archivo para que lo puedas visualizar en el navegador. Entonces el archivo quedará así: prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro. Para ver como está quedando tu página (cuando hayas empezado con el diseño) haz lo siguiente: Para Netscape Navigator o Communicator: Ve a File en el menú y escoge Open Page (Open File para otras versiones). Escoge Choose File y dale la dirección en la que tienes guardado tu archivo prueba.htm. Ya que tengas la dirección correcta dale Aceptar y verás tu página. Para Internet Explorer: Te vas al menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la dirección en donde se encuentra tu archivo prueba.htm. Ya que lo tengas le das Aceptar y tu archivo se visualizará en el navegador. Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a programar en html. Estructura básica de un documento en HTML El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo <TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del navegador. Las mayoría de las etiquetas necesitan cerrarse y modifican la información contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se explicará mejor el significado de éstas y otras más. Todos los documentos en html deben tener la siguiente estructura: <HTML> <HEAD> <TITLE>Mi página</TITLE> </HEAD> <BODY> Aquí va todo el contenido del programa. </BODY> </HTML> Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el contenido del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el nombre que le quieras dar a tu página. *** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de Internet. Entra al editor de textos, carga tu archivo prueba.htm (que por ahora debe estar vacío) y teclea lo siguiente: <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY> En esta página explicaremos brevemente los inicios de la red de redes. </BODY> </HTML> ***************** Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de Internet y aparece en el marco superior del navegador. Como se acaba de mencionar, dentro de las etiquetas <BODY> </BODY> desarrollaremos todo nuestro contenido. Presiona el enlace que aparece subrayado para ver como debe lucir nuestra página hasta ahora. Ver página web Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de codificar. Recuerda que ya has aprendido cómo visualizarlo. Texto Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red. A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto. <PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc. <BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse. <P> Realiza un salto de párrafo. Tampoco necesita cerrarse. <CENTER> </CENTER> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos. <Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente. Ejem: <H1>Encabezado</H1> <H2>Encabezado</H2> <H3>Encabezado</H3> <H4>Encabezado</H4> <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3. Texto en <B>Negritas</B> Texto en <I>Itálica</I> Texto <U>subrayado</U> <ADDRESS> Dirección </ADDRESS> <HR> Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le añade un color gris más fuerte. Ejem: <HR> <HR WIDTH=20% ALIGN=RIGHT SIZE=7> <HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE> *** Vamos a utilizar en nuestra página algunas de éstas etiquetas para modificar texto. Carga prueba.htm y teclea lo siguiente: <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el Departamento de Defensa de los Estados Unidos desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> </BODY> </HTML> ***************** Presiona el enlace para ver nuestra página después de agregar más información y de utilizar algunos de los modificadores de texto explicados en esta sección. Ver página web Color Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra. Para poder representar un color en html, se deben utilizar 6 números hexadecimales. Ejem: ROJO FF0000 VERDE 00FF00 AZUL 0000FF MAGENTA FF00FF VIOLETA 9900DD ROSA CLARO FFDDFF Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades. Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos colores. Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> </BODY> por ejemplo: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF"> donde: BGCOLOR es el color del fondo. TEXT es el color del texto. LINK es el color del enlace. Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#". También se puede cambiar el color sólo para un segmento deseado como: <FONT COLOR="#FF0000">Texto</FONT> *** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo siguiente: <HTML> &ltHEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED>Departamento de Defensa de los Estados Unidos</font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> </BODY> </HTML> ***************** Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta <BODY> </BODY> hemos agregado un determinado color para el fondo. También hemos especificado que sólo un segmento del texto sea de color rojo. Presiona para ver nuestro diseño: Ver página web Imágenes Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos. Para agregar una imagen en un documento se utiliza la etiqueta <IMG>. Ejem: <IMG SRC="home2.jpg" ALT="Casa azul"> Casa azul Donde: IMG indica el deseo de cargar una imagen. SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo. Ejem: <IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul"> ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen. Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos: ALIGN=left|right|top|middle|bottom Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto. BORDER=n Le agrega un borde a la imagen y "n" indica el grosor. WIDTH=n, HEIGHT=n Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels. VSPACE=n, HSPACE=n Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee. Ejem: Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de él horizontalmente 10 unidades con un borde de grosor 2. *** Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la modificación. <HTML> <HEAD> <TITLE>Historia de Internet>/TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> <center><IMG SRC="home2.jpg" ALT="Casa azul"></center> </BODY> </HTML> ***************** Se ha insertado un gráfico a nuestra página que debe aparecer centrado. Da un click al enlace para ver el archivo. Ver página web Enlaces (Links) El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios como algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un click en un segmento de texto o una imagen, es posible encontrar más información relacionada con la que originó ese click. Dicha información puede encontrarse en otras páginas dentro y fuera de nuestro servidor*, o en algún punto concreto de páginas dentro y fuera de nuestro servidor. *La computadora donde tenemos montada nuestra página. El enlace por definición aparece en nuestras páginas subrayado y de color azul. Como ya se vió anteriormente, el color del enlace puede cambiarse al gusto. La etiqueta encargada de establecer un enlace es: <A> </A>. Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde está la información a enlazar y también el tipo de protocolo* utilizado. Con HREF es posible también hacer enlaces directos hacia imágenes, sonidos, etc. *El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos hipertexto, transferencia de archivos, correo electrónico, etc. Ejem: HTTP, FTP, MAILTO, GOPHER, etc. Ejem: <A HREF="http://www.usatoday.com">Periódico USA Today</A> Periódico USA Today Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link hacia otra página fuera de la nuestra en otro servidor. Ejem: <A HREF="index.html">Página principal>/A> Página principal Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link hacia otra página dentro del mismo servidor en el que se encuentra esta página tutorial de html. También es posible crear un enlace a través de una imagen en lugar de utilizar un segmento de texto. Esto se hace de la misma manera que los ejemplos anteriores, sólo que en lugar de escribir texto entre las etiquetas se inserta una imagen como las que ya hemos visto. Ejem: <A HREF="http://www.goto.com"><IMG SRC="logo.gif"></A> www.goto.com Dale un click al enlace gráfico creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link gráfico hacia otra página web. *** Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad.<P> * Más información sobre este tema en: <A HREF="http://www.interhelp.org/historia01.html">www.interhelp.org</A> <hr> <font size=2>Documento creado en Febrero del 2000</font> <center><A HREF="index.html"><IMG SRC="home2.jpg" ALT="Casa azul"></A></center> </BODY> </HTML> ***************** Donde coloco mi página? Ahora que ya tienes lista tu página hay que saber en qué servidor montarla para que todos puedan verla. Si dispones de una conexión a Internet en tu casa o negocio, tu proveedor tiene la obligación de proporcionarte espacio en su servidor para tu página. Si no dispones de una conexión a Internet existen algunas compañías que ofrecen este servicio de manera gratuita. Ahí te va una lista de algunas de estas compañías en Internet: www.geocities.com www.tripod.com www.starmedia.com

[maria-morelo-blog]

MANUALES

Manual de HTML para principiantes

Antes de empezar Parece muy obvio, pero a veces no es así. Antes de iniciar con el diseño de tu página, debes tener en mente qué quieres poner en ella. Si tienes idea de lo que quieres hacer será mucho más fácil. Aquí te doy unos tips sobre lo que puede tratarse tu página: - Información personal. - Artista favorito. - Cualquier disciplina: Computación, artes, deportes, música, etc. - Manuales: computadoras, mecánica, recetas de cocina, etc. - Tu región: país, ciudad, etc. - Una combinación de todos. En fin, los temas son inagotales y depende de tu creatividad e imaginación el que decidas elegir. Qué necesitas... Para empezar a crear tu página necesitas un editor de textos, o sea, un programa en el que puedas teclear el código de tu página. Si tienes Windows en tu computadora puedes usar el Bloc de notas o Notepad, que sería lo más práctico y sencillo. No te recomiendo por ahora usar el Word o algún programa similar porque podría haber problemas con los formatos, pero si de todas maneras decides utilizarlo, recuerda guardar la información sólo como texto simple (extensión .txt). Otra cosa que necesitas es un navegador de Internet para poder ver como está quedando tu página. Estos navegadores de Internet pueden ser Netscape Navigator o Internet Explorer. Para diseñar tu página no es necesario por el momento que dispongas de una conexión a Internet. Puedes estar modificando el código de tu archivo en el editor de textos y estarlo visualizando en el navegador sin tener que conectarte. Inicio Entra al editor de textos (Bloc de notas) y crea un archivo nuevo; no tienes que escribir nada todavía en él. Puedes llamarlo como quieras pero de preferencia nómbralo prueba, ya que es el ejemplo que se manejará en este manual. Es necesario que le pongas la extensión htm o html a ese archivo para que lo puedas visualizar en el navegador. Entonces el archivo quedará así: prueba.htm y deberá estar guardado en alguna carpeta de tu disco duro. Para ver como está quedando tu página (cuando hayas empezado con el diseño) haz lo siguiente: Para Netscape Navigator o Communicator: Ve a File en el menú y escoge Open Page (Open File para otras versiones). Escoge Choose File y dale la dirección en la que tienes guardado tu archivo prueba.htm. Ya que tengas la dirección correcta dale Aceptar y verás tu página. Para Internet Explorer: Te vas al menú y selecciona Archivo, luego Abrir y pulsa Examinar para darle la dirección en donde se encuentra tu archivo prueba.htm. Ya que lo tengas le das Aceptar y tu archivo se visualizará en el navegador. Ahora sí, que ya tienes tu archivo listo y sabes como visualizarlo, lo que sigue es empezar a programar en html. Estructura básica de un documento en HTML El lenguaje html trabaja con etiquetas (tags) que tienen diferentes usos. Por ejemplo <TITLE> </TITLE> sirve para colocar el nombre de la página en el marco superior del navegador. Las mayoría de las etiquetas necesitan cerrarse y modifican la información contenida dentro de ellas. Algunas como <BR> no necesitan cerrarse. Después se explicará mejor el significado de éstas y otras más. Todos los documentos en html deben tener la siguiente estructura: <HTML> <HEAD> <TITLE>Mi página</TITLE> </HEAD> <BODY> Aquí va todo el contenido del programa. </BODY> </HTML> Este formato debe seguirse siempre como una regla. El uso de las demás etiquetas y el contenido del programa irá dentro de la etiqueta <BODY> </BODY>. El título va a ser el nombre que le quieras dar a tu página. *** Ahora comienza lo interesante, vamos a empezar a construir nuestra página de Internet. Entra al editor de textos, carga tu archivo prueba.htm (que por ahora debe estar vacío) y teclea lo siguiente: <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY> En esta página explicaremos brevemente los inicios de la red de redes. </BODY> </HTML> ***************** Lo que estamos haciendo aquí es generando el esqueleto de nuestra página. Estas son las etiquetas básicas para cualquier diseño. El título de esta página-ejemplo es Historia de Internet y aparece en el marco superior del navegador. Como se acaba de mencionar, dentro de las etiquetas <BODY> </BODY> desarrollaremos todo nuestro contenido. Presiona el enlace que aparece subrayado para ver como debe lucir nuestra página hasta ahora. Ver página web Pulsa Guardar en el editor de textos para grabar en prueba.htm lo que acabamos de codificar. Recuerda que ya has aprendido cómo visualizarlo. Texto Ya sabemos cómo es la estructura de un documento en html. Es el momento de empezar a manipular los elementos de nuestra página. El elemento fundamental en Internet es el texto. Aunque el auge de los últimos años se ha debido principalmente al contenido multimedia, (gráficos, sonido y video) el texto sigue siendo la base de todo documento en la red. A diferencia de los procesadores de texto comerciales (Word, WordPerfect, etc.), la manipulación de texto en html está un tanto limitada y es necesario utilizar ciertas etiquetas para modificar el texto a nuestro gusto. Enseguida se muestran algunas de las etiquetas más populares en el manejo de texto. <PRE> </PRE> Permite que el texto que se encuentre dentro de ella se visualice tal como se creó en la página origen, respetando espaciado, salto de línea, salto de párrafo, tabulación, etc. <BR> Realiza un salto de línea. Esta etiqueta no necesita cerrarse. <P> Realiza un salto de párrafo. Tampoco necesita cerrarse. <CENTER> </CENTER> Posiciona el texto seleccionado en el centro de la página. También puede aplicarse a gráficos. <Hx> </Hx> Se utiliza para resaltar encabezados. La x son números que van del 1 al 6, siendo el 1 el encabezado más grande y resaltado, el 2 un poco menos y así sucesivamente. Ejem: <H1>Encabezado</H1> <H2>Encabezado</H2> <H3>Encabezado</H3> <H4>Encabezado</H4> <FONT SIZE=x> </FONT> Sirve para cambiar el tamaño de las letras. La x es un número que indica el tamaño de la letra y va del 1 al 7. El número predeterminado es el 3. Texto en <B>Negritas</B> Texto en <I>Itálica</I> Texto <U>subrayado</U> <ADDRESS> Dirección </ADDRESS> <HR> Se utiliza como línea separadora. Tiene algunos atributos que la modifican. WIDTH indica la longitud, SIZE indica la altura, ALIGN la colocación de la línea y NOSHADE que no tenga relieve y además le añade un color gris más fuerte. Ejem: <HR> <HR WIDTH=20% ALIGN=RIGHT SIZE=7> <HR WIDTH=250 ALIGN=CENTER SIZE=5 NOSHADE> *** Vamos a utilizar en nuestra página algunas de éstas etiquetas para modificar texto. Carga prueba.htm y teclea lo siguiente: <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el Departamento de Defensa de los Estados Unidos desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> </BODY> </HTML> Color Con el fin de hacer un documento más agradable y atractivo a la vista, es necesario en algunas ocasiones resaltarlo con un color diferente. Esto se puede aplicar al fondo, a un enlace, al texto, a una palabra o a una letra. Para poder representar un color en html, se deben utilizar 6 números hexadecimales. Ejem: ROJO FF0000 VERDE 00FF00 AZUL 0000FF MAGENTA FF00FF VIOLETA 9900DD ROSA CLARO FFDDFF Aunque se ve un poco complicado en realidad no lo es. Lo que te recomiendo hacer es jugar con las combinaciones hasta que encuentres la que te gusta. Tomando los colores básicos de la tabla anterior puedes variar los números (0-9) o las letras (A-F) y ver cómo cambian las tonalidades. Html también acepta los nombres de los colores en lugar de los números hexadecimales, por ejemplo "RED" en lugar de "FF0000", o "BLUE" en lugar de "0000FF", pero tiene la limitante de que solamente reconoce unos cuantos colores. Se pueden seleccionar los colores deseados desde el inicio del documento en la etiqueta <BODY> </BODY> por ejemplo: <BODY BGCOLOR="#FFFFFF" TEXT="#FF0000" LINK="#00AEFF"> donde: BGCOLOR es el color del fondo. TEXT es el color del texto. LINK es el color del enlace. Ojo: En este ejemplo se ve que antes del color siempre se coloca un signo "#". También se puede cambiar el color sólo para un segmento deseado como: <FONT COLOR="#FF0000">Texto</FONT> *** Sigamos con nuestro ejemplo; cargamos el archivo prueba.htm y le agregamos lo siguiente: <HTML> &ltHEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED>Departamento de Defensa de los Estados Unidos</font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> </BODY> </HTML> ***************** Las modificaciones hechas a nuestro archivo deben ser evidentes. En la etiqueta <BODY> </BODY> hemos agregado un determinado color para el fondo. También hemos especificado que sólo un segmento del texto sea de color rojo. Presiona para ver nuestro diseño: Ver página web Imágenes Una característica muy importante en las páginas de Internet son los gráficos o imágenes. Estos elementos contribuyen a hacer más completa una página proporcionando mayor realce. Las imágenes se pueden usar como fondo de nuestra página, como complemento y apoyo visual para cierta información, vínculos hacia otras páginas, etc. Los formatos de imágenes más comunes en Internet son los .gif y .jpg, así que si queremos introducir un gráfico, éste tiene que cumplir con estos formatos. Para agregar una imagen en un documento se utiliza la etiqueta <IMG>. Ejem: <IMG SRC="home2.jpg" ALT="Casa azul"> Casa azul Donde: IMG indica el deseo de cargar una imagen. SRC indica la ruta en la que se encuentra nuestro gráfico. Este puede estar en el mismo directorio de nuestra página, en otro directorio, o incluso en un servidor en algún lugar del mundo. Ejem: <IMG SRC="../web/imagen/home2.jpg" ALT="Casa azul"> ALT asigna un nombre a la imagen para que cuando alguien cargue nuestra página desde un navegador que no despliegue gráficos, pueda saber que en ese lugar existe una imagen. Existen una serie de atributos que modifican las imágenes de diferente forma, aquí están algunos: ALIGN=left|right|top|middle|bottom Las opciones para ALIGN sitúan al gráfico en diferentes posiciones con respecto al texto. BORDER=n Le agrega un borde a la imagen y "n" indica el grosor. WIDTH=n, HEIGHT=n Especifican la altura y la anchura de la imagen, cuyas unidades se dan en pixels. VSPACE=n, HSPACE=n Se utiliza para dejar espacio tanto vertical como horizontal entre la imagen y el texto que la rodee. Ejem: Este ejemplo mostrará una imagen alineada a la izquierda del texto y separada de él horizontalmente 10 unidades con un borde de grosor 2. *** Agreguemos ahora una imagen a nuestro diseño. Carga prueba.htm y realiza la modificación. <HTML> <HEAD> <TITLE>Historia de Internet>/TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad. <hr> <font size=2>Documento creado en Febrero del 2000</font> <center><IMG SRC="home2.jpg" ALT="Casa azul"></center> </BODY> </HTML> ***************** Se ha insertado un gráfico a nuestra página que debe aparecer centrado. Da un click al enlace para ver el archivo. Ver página web Enlaces (Links) El poder verdadero de html radica en la capacidad de manejar hipertexto o hipermedios como algunos le llaman, y se logra por medio de enlaces o links. Esto es, a través de un click en un segmento de texto o una imagen, es posible encontrar más información relacionada con la que originó ese click. Dicha información puede encontrarse en otras páginas dentro y fuera de nuestro servidor*, o en algún punto concreto de páginas dentro y fuera de nuestro servidor. *La computadora donde tenemos montada nuestra página. El enlace por definición aparece en nuestras páginas subrayado y de color azul. Como ya se vió anteriormente, el color del enlace puede cambiarse al gusto. La etiqueta encargada de establecer un enlace es: <A> </A>. Dentro de esta etiqueta está la función HREF en la cual se debe indicar la dirección donde está la información a enlazar y también el tipo de protocolo* utilizado. Con HREF es posible también hacer enlaces directos hacia imágenes, sonidos, etc. *El protocolo son las normas o reglas utilizadas para diferentes tipos de servicios como documentos hipertexto, transferencia de archivos, correo electrónico, etc. Ejem: HTTP, FTP, MAILTO, GOPHER, etc. Ejem: <A HREF="http://www.usatoday.com">Periódico USA Today</A> Periódico USA Today Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link hacia otra página fuera de la nuestra en otro servidor. Ejem: <A HREF="index.html">Página principal>/A> Página principal Dale un click al enlace creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link hacia otra página dentro del mismo servidor en el que se encuentra esta página tutorial de html. También es posible crear un enlace a través de una imagen en lugar de utilizar un segmento de texto. Esto se hace de la misma manera que los ejemplos anteriores, sólo que en lugar de escribir texto entre las etiquetas se inserta una imagen como las que ya hemos visto. Ejem: <A HREF="http://www.goto.com"><IMG SRC="logo.gif"></A> www.goto.com Dale un click al enlace gráfico creado y después pulsa "Back" o "Atrás" para regresar. Este ejemplo muestra un link gráfico hacia otra página web. *** Vamos ahora a aplicar enlaces en nuestro ejemplo. Carga prueba.htm <HTML> <HEAD> <TITLE>Historia de Internet</TITLE> </HEAD> <BODY BGCOLOR="#0FF0FF"> <h2>En esta página explicaremos brevemente los inicios de la red de redes.</h2><br> <h3>Introducción</h3><p> El mundo de las telecomunicaciones ha tenido un crecimiento acelerado en los últimos años, en el que <b>Internet</b> ha sido pieza clave. Hace unas décadas atrás, cuando el <font color=RED> Departamento de Defensa de los Estados Unidos </font> desarrollaba una red de comunicaciones que fuera capaz de soportar un ataque externo durante la guerra fría, nadie se imaginó que después de transferir el control de esa red llamada <u>ARPANET</u> a los investigadores universitarios, ésta crecería exponencialmente involucrando significativamente a toda la sociedad.<P>

Programacion en html desde cero 

Primera leccion Elementos que vamos a utilizar para trabajar: bloc de notas. Lo primero que hay que tener en cuenta es que el codigo en html se compone basicamente de "tags" o "etiquetas". Las mismas son palabras claves que cumplen una funcion determinada, y tales palabras van encerradas entre < > (Ej; <html>, <body>, <head>, etc.). De aqui en mas las llamaremos solamente etiquetas.  Veamos el primer ejemplo de codigo:

<html> <body> <h1>Titulo de la pagina</h1> <p>Primer parrafo de la pagina</p> </body> </html>

Ahora analizemos los elementos que hay en el ejemplo de arriba: 1) el texto entre <html> y </html> describe el contenido de la pagina. 2) el texto entre <body> y </body> describe el contenido visible de la pagina. 3) el texto entre <h1> y </h1> es el titulo o encabezado de la pagina (mas adelante veremos el uso de <h1> en profundidad) 4) el texto entre <p> y </p> es el contenido de un parrafo. **A tener en cuenta: todas las etiquetas deben abrir con <> y cerrar con </> con solo algunas excepciones. Ahora escriban el codigo del primer ejemplo en el bloc de notas. Hagan clic en "archivo", "guardar como" y coloquenle el nombre "index.html" (sin las comillas) y en "tipo" seleccionen "todos los archivos". Guarden el archivo.  Al abrirlo, veran en el navegador el resultado que hemos obtenido hasta el momento. Segunda leccion Primer ejemplo de codigo: <html> <body> <h1>Primer encabezado</h1> <h2>Segundo encabezado</h2> <h3>Tecer encabezado</h3> <h4>Cuarto encabezado</h4> <h5>Quinto encabezado</h5> <h6>Sexto encabezado</h6> </body> </html> Si escriben este codigo en el bloc de notas veran que el resultado es que tenemos seis titulos en orden de tamaño, desde el mas grande (<h1> hasta el mas pequeño (<h6>. Sin embargo, la funcion de esta etiquetas no es la de agrandar o achicar el tamaño de la letra, sino el de darle mayor o menor importancia a un trozo de texto. Esto en gran medida contribuye a que Google luego encuentre nuestro sitio web, ya que podemos darle mas importancia a ciertas frases claves y menos importancia a lo demas. Estas etiquetas solo van del h1 al h6.  Segundo ejemplo de codigo: <html> <body> <p>Este es el primer parrafo.</p> <p>Este es el segundo parrafo.</p> </body> </html> Este ejemplo no necesita tanta explicacion. Cada porcion de texto que escribamos entre las etiquetas <p> y </p> sera un parrafo, y por ende, al abrir otra etiqueta <p>, el texto comenzara en la linea de abajo como un nuevo parrafo.  **A tener en cuenta: Si al codigo de ejemplo le quitamos las etiquetas de cierre </p>, el resultado visual es el mismo. Es porque hasta html 4 esta y algunas otras etiquetas podian quedar abiertas. Aun asi xhtml y html 5, exigen el cierre de TODAS las etiquetas, por lo que es bueno que se acostumbren desde el principio a hacerlo asi. Tercer ejemplo de codigo:  <html> <body> <a href="http://www.taringa.net">Este es un link a��Taringa!</a> <p>Para entrar a Taringa! haz clic <a href="http://www.taringa.net">aqui.</a></p> </body> </html> Aca vemos un ejemplo de la insercion de un link. La etiqueta es <a>. Dentro de la etiqueta de apertura, se escribe el atributo "href" seguido del signo "=", tras lo cual añadimos la url que deseemos, siempre entre comillas y con "http://" delante si se trata de un sitio web. (Esta url tambien puede ser un archivo local, por ej: pagina1.html, siempre y cuando, el archivo "pagina1.html" este en la misma carpeta o directorio donde se encuentra el archivo .html que estamos editando.) Entre ambas etiquetas <a> y </a> va el texto que contendra el link. En la segunda linea, ven que solo queda resaltada la palabra aqui y es la que contiene el link a Taringa! Cuarto ejemplo de codigo: <html> <body> <img src="foto.jpg" width="100px" height="150px" /> <img src="imagenes/foto.jpg" width="100px" height="150px" /> </body> </html> Aqui tenemos la insercion de nuestra primera imagen. La etiqueta "img" es una sola, y al final se cierra ella misma con "/>".  Dentro de la etiqueta tenemos el atributo "src" (que viene de la palabra "source" o fuente), en el cual colocamos el nombre de la imagen con su extenxion (en este caso ".jpg", pero pueden ser otras, como .bmp, .png, etc.) siempre teniendo en cuenta que debe estar dentro de la misma carpeta donde se encuentra nuestro archivo .html. En el caso de que ademas esta en una subcarpeta, colocamos el nombre de la misma, como se muestra en la segunda linea.  Tenemos tambien los atributos "width" y "height". Ambos significan "ancho" y "alto", en ese orden. Por lo tanto, lo que estamos indicando con estos atributos son el ancho y el alto de nuestra imagen, y lo hacemos en pixeles (px).  **A tener en cuenta: Nunca olviden las comillas los valores de cada atributo. En todos los atributos, los valores deben ir encerrados entre comillas (ver los ejemplos).  Ahora bien, ya tenemos un archivo llamado index.html. Creen una nueva carpeta que diga "Mi Pagina Web" y coloquen alli el archivo "index.html" y una foto. Luego editen el archivo "index.html" con el bloc de notas para que se visualize la foto que tienen en la carpeta. Vamos a hacer uso de esta carpeta para nuestro sitio, asi que ¡no la borren!   Tercera leccion Veamos algunos problemas que podemos encontrar con el formato de nuestro texto y como solucionarlos.  Primer ejemplo de codigo: <html> <body> <p>Los invisibles átomos del aire  en derredor palpitan y se inflaman;  el cielo se deshace en rayos de oro;  la tierra se estremece alborozada; Oigo flotando en olas de armonía  rumor de besos y batir de alas;  mis párpados se cierran... ¿Qué sucede?  - ¡Es el amor que pasa!</p> </body> </html> En este ejemplo vemos un poema de Gustavo Adolfo Becquer. Para que el poema se lea de forma correcta es necesario que cada verso este en una linea diferente. Ahora bien, si copiamos este codigo en nuestro bloc de notas, lo guardamos y vemos el resultado en nuestro navegador, ¿cual es el resultado? Que en el navegador no se van a respetar los saltos de linea que hemos escrito. Nuestro texto no quedara con el formato de un poema, sino con el formato de un parrafo comun y corriente. Veamos 2 formas de solucionar este problema.  El primer metodo seran los saltos de linea. Segundo ejemplo de codigo: <html> <body> <p>Los invisibles átomos del aire<br />  en derredor palpitan y se inflaman;<br />  el cielo se deshace en rayos de oro;<br />  la tierra se estremece alborozada;<br /> Oigo flotando en olas de armonía<br />  rumor de besos y batir de alas;<br />  mis párpados se cierran... ¿Qué sucede?<br />  - ¡Es el amor que pasa!</p> </body> </html> Lo que vemos en este ejemplo es el uso de la etiqueta <br />. Esta es la etiqueta de salto de linea. Con ella ordenamos al texto para que continue en la linea de abajo desde el punto donde colocamos la etiqueta. Si copiamos el codigo y lo vemos en el navegador veremos que nuestro poema ahora si conserva el formato deseado.  El segundo metodo es el preformateado. Tercer ejemplo de codigo: <html> <body> <pre> Los invisibles átomos del aire  en derredor palpitan y se inflaman;  el cielo se deshace en rayos de oro;  la tierra se estremece alborozada; Oigo flotando en olas de armonía  rumor de besos y batir de alas;  mis párpados se cierran... ¿Qué sucede?  - ¡Es el amor que pasa! </pre> </body> </html> La etiqueta <pre> significa preformateado. El texto que se encuentre dentro de estas etiquetas tendra exactamente el mismo formato que el que tiene cuando lo escribimos en el bloc de notas.  Para que lo entendamos mejor: en html, si en el editor de texto dejo 20 espacios, sera interpretado como 1 espacio. Esa es la razon por la que no conserva el formato del poema. Pero la etiqueta <pre> cambia ese comportamiento. Mientras el texto sea preformateado, si yo dejo 15, 23 o 78 espacios, van a ser 15, 23 y 78 espacios tal cual. De esta forma con este metodo tambien logramos obtener el formato deseado para nuestro poema.  Estos han sido los metodos para solucionar el problema del formato del texto. Cada uno vera en su momento cual de los 2 metodos le conviene mas utilizar en determinada circunstancia.  Cuarto ejemplo de codigo: <html> <body> <p>Este es el primer parrafo</p> <hr /> <p>Este es el segundo parrafo</p> <hr/> <p>Este es el tercer parrafo</p> </body> </html> La etiqueta <hr /> que ven en este ejemplo inserta una linea horizontal en nuestra pagina. Puede servir para dividir diferentes partes de la misma como se ve en el ejemplo. Quinto ejemplo de codigo: <html> <body> <p>Este es el primer parrafo</p><!-- Esto es un parrafo --> <hr /><!-- Esto es una linea horizontal --> </body> </html> El texto que ven encerrado entre !-- y --> es un comentario. No tiene ningun efecto visual en lo que programemos. Los comentarios nos sirven para hacer mas legible el codigo. Podemos escribir para que sirve cierta linea que hayamos escrito y de esa forma hacer mas facil la lectura del codigo de nuestra pagina.  Cuarta leccion Hoy vamos a analizar como podemos darle diferentes formatos al texto en html. No vamos a profundizar mucho en esto, ya que solamente son una lista de etiquetas que produciran diferentes resultados visuales en nuestro texto. Veremos en ejemplos cuales son estas etiquetas y luego dejare un lista de ellas con sus respectivas funciones, en caso de que las quisieran memorizar (aunque no es imprescindible que las memorizen todas ahora).  Primer ejemplo de codigo:  <html> <body> <p><i>Texto en cursiva</i></p> <p><em>Texto enfatizado</em></p> <p><b>Texto en negrita</b></p> <p><strong>Texto remarcado</strong></p> <p><small>Texto pequeño</small></p> <p><big>Texto grande</big></p> <p>Esto es texto en _subindice y esto es texto en ^superindice</p> <p><ins>Texto subrayada</ins></p> <p><del>Texto tachado</del></p> </body> </html> Este ejemplo se veria asi en el navegador: Como pueden ver, el texto tomara el formato que le asignemos mediante estas etiquetas. Asi la etiqueta <i> (de italica) pondra el texto en cursiva, y la etiqueta <big> (de "grande" en español) pondra el texto grande. Asi de sencillo. En realidad, es poco probable que hagan uso de todas estas etiquetas, ya que para hacer el texto grande lo hacen con el atributo "font-size" (que veremos mas adelante) y le asignan el tamaño que quieran. Pero es bueno conocer estas etiquetas si aprenderan a programar en html. Algo interesante es que la etiqueta <i> produce el mismo resultado que la etiqueta <em>. Eso es porque el navegador interpreta que para enfatizar el texto hay que ponerlo en cursiva. Lo mismo sucede con las etiquetas <b> y <strong>. Pero tambien se puede dar el caso en algun navegador, que al poner <em> el texto este en negrita, igual que <b>. Todo depende de como lo interprete el navegador.  A continuacion les voy a dejar una lista de algunas etiquetas que dan formato al texto.  <b> / Texto en negrita <i> / Texto en cursiva <big> / Texto grande <small> / Texto pequeño <em> / Texto enfatizado <strong> / Texto resaltado <del> / Texto tachado <ins> / Texto subrayado <code> / Texto de codigo (esta etiqueta la utilizo yo para poner los ejemplos de codigo) <sub> / Texto en subindice <sup> / Texto en superindice <tt> / Texto tipo maquina de escribir <kbd> / Texto de teclado (produce el mismo efecto que <code>

<samp> / Texto de muestra (produce el mismo efecto que <code>

<var> / Texto de variable (al igual que <code> se suele utilizar para representar codigo) <dfn> / Representa definiciones <cite> / Representa citas <q> / Texto entre comillas (mas correcto es decir que es una cita corta) <blockquote> / Y esta seria una cita larga **A tener en cuenta: ¡Recuerden que siempre tienen que encerrar el texto a dar formato entre la etiqueta de apertura <etiqueta> y la de cierre </etiqueta>! Segundo ejemplo de codigo: <html> <body> Mejor visitare al <abbr title="doctor">dr.</abbr> mañana. Ayer me compre mi nuevo <acronym title="Light Amplification by Stimulated Emission of Radiation">laser</acronym> </body> </html> Este es un ejemplo de abreviaciones. La abreviacion, en este caso dr., va entre las etiquetas <abbr> y </abbr>. El atributo "title" lleva la palabra completa. El efecto que esto tendra es que cuando coloquemos el cursor sobre la abreviacion, veremos en un pequeño mensaje emergente, lo que hayamos escrito en el atributo "title". Recordar que los valores de los atributos van entre comillas.  La etiqueta <acronym> tiene el mismo efecto y se utiliza exactamente de la misma forma.  La diferencia entre abreviacion y acronimo, es que la abreviacion no siempre sera pronunciable vocalmente, como sucede con la abreviacion "dr."; en cambio el acronimo son siglas que forman otra palabra que si podemos pronunciar, como sucede con el acronimo "laser". En la practica no encontraremos diferencia entre usar una <abbr> o <acronym>, pero semanticamente lo correcto seria respetar esta sintaxis. Tercer ejemplo de codigo: <html> <body> <address> Escrito por Gabriel Moreyra<br /> Direccion: Inteligencia Colectiva 75, Taringa<br /> Telefono: 34 987 156 789<br /> </address> </body> </html> La etiqueta <address> vista en este ejemplo nos servira para introducir nuestros datos. Se podria decir que es como un sello que introducimos en nuestra pagina. Esto se suele utilizar o bien en el encabezado de la pagina, o bien al pie de la misma. **A tener en cuenta: Si prueban este codigo en el bloc de notas y lo ven en el navegador, veran que lo que hace la etiqueta <address> es poner el texto en cursiva. Sin embargo, no es correcto utilizar la etiqueta <i> en reemplzao de <address>. Obtendremos el mismo resultado visual, pero la sintaxis no es correcta. Es bueno acostumbrarse a desarrollar una "buena ortografia", por decirlo asi, en el lenguaje html. Quinta leccion Veamos un poco las fuentes tipograficas. Primer ejemplo de codigo: <html> <body> <p style=font-family:verdana>Texto en Verdana</p> <p style=font-family:courier>Texto en Courier</p> <p style=font-family:comic sans MS>Texto en Comic Sans</p> </body> </html> En el ejemplo de arriba vemos tres ejemplos de fuentes tipograficas. Aca vemos algo nuevo: los estilos. Para poder asignar estilos, necesitamos una etiqueta previa al texto que escribimos (en este caso <p>, pero pueden ser otras como <h1>, <b>, <i> y asi por el estilo). Como se puede notar, el estilo se asigna dentro de la etiqueta de apertura, y la misma se cierra al final de los atributos. Recordamos que los atributos siempre van en comillas. Aqui el atributo es "font-family". Luego de los dos puntos ( : ) colocamos la fuente tipografica q tendra el texto. Seria conveniente mencionar 2 puntos: 1) que podemos colocar cualquier fuente que tengamos instalada en nuestra computadora, pero 2) que solamente sera visible en nuestro sitio web para las personas que tambien la tenga instalada. Por ej: si yo uso la fuente "colonial" pero la persona que abre la pagina no la tiene instalada, quiza vea el texto en arial, verdana o similar. Por lo tanto, lo ideal en principio es utilizar fuentes comunes para obtener el resultado deseado.  Si tienen dudas sobre como se llaman las diferentes fuentes tipograficas, abran el word y vean en la lista de fuentes. Tienen que escribirlas tal como aparecen alli.  **A tener en cuenta: Cabe aclarar que esta no es la unica ni la mejor forma de asignar estilos; lo mejor es hacerlo con hojas de estilo (CSS). Pero eso es algo que veremos mas adelante. Por ahora nos concentramos en hacerlo asi. De hecho vamos a encontrar situaciones esporadicas en las que tendremos que hacer uso del sistema que estmos viendo ahora.  Segundo ejemplo de codigo: <html> <body> <p style=font-size:200%>Texto de ejemplo</p> <p style=font-size:45px>Texto de ejemplo</p> <p style=font-size:1.6em>Texto de ejemplo</p> </body> </html> En este ejemplo vemos como cambiar el tamaño de las fuentes. Muy parecido al anterior, el atributo ahora se llama "font-size". El formato es exactamente el mismo.  Veran que muestro tres formas de asignar las medidas. Las tres funcionan bien y pueden usar cualquiera. Aun asi, la que mejores resultados suele dar es "em". Esta medida puede asignarse en decimales para ser mas precisa. Por ejemplo, podemos asignar 2em, 1.2em, o 3.154em. Ademas no van a notar diferencias de resultados entre navegadores diferentes (Explorer, Mozilla, Opera, etc.), como si pudiera suceder usando % o px. Tercer ejemplo de codigo: <html> <body> <p style=color:red>Texto en color rojo</p> <p style=color:blue>Texto en color azul</p> <p style=color:#FF0000>Texto en color rojo</p> </body> </html> Este ejemplo muestra que cambiar el color del texto es muy sencillo. El atributo es "color", y luego colocamos el nombre del color en ingles, o bien el codigo en notacion hexadecimal. Ese es el caso de #FF0000. Aqui les dejo un link de una pagina donde pueden seleccionar el color, y les da el codigo hexadecimal.  http://html-color-codes.info/codigos-de-colores-hexadecimales/  **A tener en cuenta: Siempre el codigo hexadecimal va antecedido de un #. Cuarto ejemplo de codigo: <html> <body> <p style=color:green;font-family:arial;font-size:0.75em>Texto de ejemplo</p> </body> </html>

APRENDE A CREAR UNA WEB DESDE CERO EN HTML

HTML es la Abreviatura de hipertext Markup Lenguaje o lenguaje de marcas de hipertexto. Html es el lenguaje con el que se escriben las páginas web.    ¿Qué se puede hacer con este lenguaje?   Por ejemplo especificar las imágenes de la página, los textos o los gráficos. También se puede dar formato a los textos (tipo, color y tamaño de la fuente).    Todos los archivos de las páginas web tienen extensión .html ó .htm. Las instrucciones (se llaman tags o etiquetas) de este lenguaje siempre empiezan con el signo < y terminan con > (la instrucción aparece entre estos dos símbolos). Las instrucciones <html> y </html> sirven para el principio y el final del documento. Todas las ordenes, etiquetas o tags (es todo lo mismo) acaban con el mismo nombre pero añadiendo la barra /.    El conjunto de instrucciones de un programa (código fuente), en este caso de una página web, se puede ver prácticamente en cualquier página que visites en internet. Si abrimos una página, debajo de la fachada de la página se esconden muchas instrucciones, que podrás ver si pinchas en ver código fuente en el navegador. Para escribir un código fuente es suficiente un sencillo editor de texto, como por ejemplo el de bloc de notas.    Para comprobar que lo escrito esta bien y lógicamente para ver la página necesitaras un navegador, y para colgarla en la red tienes que disponer de conexión a internet, de espacio en un servidor web, y del software necesario para enviarle los archivos (programa de transferencia de archivos FTP).   Pero empecemos por crear nuestra primera web muy sencillita. Para empezar abrimos el editor de textos, por ejemplo el notepad o cualquier otro que tengas. El notepad es gratis y lo tienes en tu ordenador.  Empecemos a escribir el código fuente: Ejemplo Nº1 <html> <head> <title>Esta es mi página web</title> </head> <body> ¡Muy buenas! ¡Vamos hacer una página web! </body> </html>   OJO Guardalo como ejercicio.html Un vez guardado si pinchas en el icono dos veces abrirás el archivo con el notepad. De esta forma puedes modificarlo.   Si quieres ver como se ve en el navegador tendrás que seleccionar el archivo (un solo click sobre el) y después abrir con y selecciona el navegador con el que quieras abrirlo.   Vamos analizar un poco el programa. Entre la instrucción head está la cabecera de la página, en ella se introduce información que normalmente no aparece al visualizarla (solo información para la persona que trabaje con el programa) y también entre title se pone el nombre de la página que luego aparecerá en la barra de título de la ventana del navegador.    El cuerpo de la página, es decir el texto que aparecerá en la página se pone con la orden body. Ahora guarda el documento con extensión .html en el disco duro y ábrelo. Se visualizará lo que hiciste en el navegador. Para modificarla sin que se abra el navegador, botón derecho abrir con, bloc de notas o doble click sobre el archivo. El código da igual en mayúsculas que en minúsculas.   Otras etiquetas en html: Br cuando quieras introducir un salto de línea (no hace falta /br) p delimita un párrafo. Se ocupa de que los textos mas largos se dividan automáticamente (hace los cambios de línea de un párrafo automáticamente).La longitud de la línea queda definida por el ancho de la ventana. H1 resalta titulares. El tamaño del titular se controla con el número (h3 la línea será mas pequeña. Hay hasta el 6). Hr nos pondrá una línea donde la pongamos que ocupará toda la página. No hace falta poner la instrucción final (con barra /).Si va seguido de width =30% la línea ocupará el 30%. Si le sigue size=10 especificamos el grosor. Ejemplo <hr size=10 width=50%> Align= después del igual puede ir center para centrar, right para alinear a la parte derecha y left para alinear a la izquierda. Ejemplo: <p align=center> alineará el párrafo centrándolo. <hr size=10 width=80% align=center>. Para el color de la línea font color=”green” (ver más adelante font) <font size= “2”> </font> tamaño de letra. A mayor número mayor la letra. Ul para empezar una lista de palabras. Cada palabra de la lista va con la órden li. Ejemplo: <ul>  <li> manzanas  <li> platanos  </ul>   Con <li> haces que en cada palabra aparezca con una viñeta con apariencia de lista.   Hacer lo mismo pero poniendo <ol> en lugar de <li>. Con la orden ol en vez de ul aparecerá una lista numerada. <u> </u> lo que se ponga entre las dos órdenes aparecerá subrayado. <center> </center> texto centrado. <b> </b> texto en negrita.  <i> </i> cursiva.  subíndice. Ejemplo H₂O resultado H2O. Con SUP sería superíndice.   Para tipo, tamaño y color de letra (también para las líneas) se empieza por font. Con <font face “courier”> se modifica la fuente del texto que viene a continuación hasta la orden </font>. OJO Si no se pone esta última afectará a todo el texto hasta el final del documento.  Con <font color=”OOFFFF”> se cambia el color. Se puede usar un alias para cada color <font color=”red”>. El alias suele ser el nombre del color pero en ingles (black, blue, green, red, white, etc.) Con <font size=5> </font> se modifica el tamaño de la letra. <Bgcolor=”yellow”> pone el color amarillo.    Si lo ponemos dentro de body afectará al fondo de la pagina. <body bgcolor=”yellow”> pone la página con fondo amarillo.    Si queremos poner un fondo de una imagen de archivo se pone background=”archivo.jpg” dentro de body. El archivo de la imagen debe estar en la misma carpeta del archivo html.   Imágenes en html (solo .jpg y .gif)   Antes de insertar las imágenes debemos de tenerlas guardadas en la misma carpeta donde esta el resto de la página (es lo más cómodo).    La etiqueta es: <img src=”imagen1.jpg”>  el img indica al navegador que se cargará una imagen, y src=” “ determina donde se encuentra la imagen. Si no se especifica nada más que el nombre del archivo considera que está en la misma carpeta que el resto. Para que el texto recorra las imágenes (alrededor de la imagen), en vez de dejar espacios en blanco a su lado, pon detrás del nombre del archivo align=right. En este caso el texto queda demasiado pegado a la imagen, si pones hspace=7 lo separa de la imagen (el número marca la distancia, mayor número más distancia).  Todo junto quedará: <img src=”imagen1.jpg” align=left hspace=7>. Inserta una imagen en la página.   También se puede modificar el tamaño de la imagen. Se pone detrás del nombre del archivo height=150 determinando así la altura. La anchura la pone el para que quede proporcionada. Suponemos width=120 se especifica el ancho (el alto automáticamente).   Para hacer que la imagen cambie cuando pasamos el cursor del ratón sobre ella, se tiene que hacer un rollovers.    Dentro de la instrucción de la imagen y a continuación de la ultima orden debemos de escribir onmouseover= “this.src=‘nuevoarchivo.jpg’” para decirle la nueva imagen. Fíjate doble comilla para todo y comilla simple para el nombre de la imagen. Para sacar la comilla simple desde el teclado pulsa la tecla de la interrogación ? pero sin apretar la tecla mayúsculas. Además debes poner onmouseout="this.src='una.jpg'" para decirle la imagen que estará en reposo. Un Ejemplo: <img src="una.jpg" onmouseover="this.src='dos.jpg' " onmouseout="this.src='una.jpg' " height=100 align=left hspace=34>   Realiza un cambio en la imagen de la página para que consigamos este efecto.   Hipervínculos en html (enlaces a otros sitios)    Los hipervínculos suelen mostrarse en azul, pero como a veces el color del fondo no deja que se vea bien se puede modificar con link=color, del mismo modo si ponemos alink=color tiene como efecto que al hacer clic en el, aparezca en el,  el color puesto, y si ponemos vlink=color le indica el color con el que se queda después de a ver pinchado en el link para saber que ya hemos pulsado y hemos ido a ese sitio.    Todas estas órdenes se ponen dentro de body para que afecte a todos los links de nuestra página.    La etiqueta para poner un link es <a> y la dirección se pone detrás de href.= y entre comillas. Entre esto y </a> se pone el texto que aparecerá en el link. Practica y  coloca este link en la página <a href=http://www.areatecnologia.com>pagina de tecnologia</a>.    Pon las ordenes de colores del link dentro de body y comprueba los colores.    Si quieres centrar el link pon antes de <a> la etiqueta <center>   Si queremos poner un vínculo a la página archivo.html de nuestro sitio web (ojo la página deberá estar en la misma carpeta que la que tiene el vínculo), sería: <a href="archivo.htm">Texto de referencia</a>  Esto es para hacer un vinculo a otra página dentro de nuestro sitio web (deben de estar todas las páginas en la misma carpeta).  Vamos hacer una web completa: Ejemplo Nº2:  <html> <head> <title>Esta es mi página web</title> </head> <body bgcolor="green"> <font size="5"> ¡Muy buenas! ¡ Vamos hacer una página web!</body> </font> <hr size=10 width=80% align=center font color="red"> <br> <p>Estamo empezando a realizar nuestra página web por eso practicamos para poner color de fondo, cambiar el tamaño de la letra y poner líneas divisorias</p> <p align="right">Este párrafo lo alineamos a la derecha</p> <p align="left" font face="courier"> Este está alineado a la izquierda y letra courier</p> <p align="center"> Y este está centrado</p> <br><br><br><br> Vamos a poner viñetas y en negrita <b> <ul>  <li> primero de la lista  <li> segundo de la lista </b></ul> <font face="vivaldi" size="10" color="red"> Estas letras son diferentes y de color rojo</font> </body> </html>   Ves que facil es hacer una página web.   Insertar música en la página con html   Se recomienda solo archivos .mid (MIDI de menos de 60KB mejor. Tambien se pueden meter WAVE y MP3). Imaginemos que queremos insertar el archivo imagine.mid: <BGSOUND SRC="imagine.mid" LOOP=INFINITE>   Esta etiqueta se puede poner en cualquier sitio pero es preferible dentro de body.   Loop le dice que el archivo se repita indefinidamente.   OJO el archivo debe estar en el mismo sitio que la página, en caso de no ser así hay que especificar la ruta completa.  Ahora es el momento de practicar lo aprendido con este juego interactivo: Etiquetas HTML