neojuanma
Usuario (Argentina)
Este post contiene varias imágenes que pueden tardar en cargar dependiendo de la PC en la que se este viendo el post. Recomiendo que esperen un rato hasta que termine de cargar. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Hola a todos, soy neojuanma y hoy les traigo la 3º parte del curso de HTML que habíamos comenzado hace un tiempo atrás. La última vez nos quedamos con un tutorial de como insertar enlaces e imágenes. Entonces nos había quedado la página de esta manera Ahora vamos a hacer uso de los archivos .CSS. ¿Que es un archivo CSS? Es un archivo que añade más características a una página. Características tales como el color de fondo, el color del texto, la fuente del texto, la opacidad de los cuadros, el tamaño de cada parte de la página, etc. Además sirve para que cuando se abra la página en otra computadora con otra resolución, el sitio Web se siga viendo bien. Si nosotros no utilizamos un archivo CSS, cuando alguien con una resolución mayor a la nuestra entra a la pagina, esta se vera desordenada y mezclada, porque nosotros la hicimos en una resolución menor. ¿Como funciona? Simple, por medio de códigos tales como background-color, text-align, etc. Bien, lo primero que hacemos es crear un archivo llamado estilo.css o cualquier nombre que ustedes quieran, pero recuerden que yo lo hago con ese nombre. Para hacer un nuevo archivo vamos a hacer click derecho sobre nuestra carpeta en el workspace, luego a New y finalmente a: Create File: Entonces nos va a aparecer esto: Hacemos doble click allí y elegimos un nombre para nuestro archivo CSS, el cual va a ser estilo.css Una vez hecho esto, damos click en OK y se nos creara nuestro archivo. Hacemos doble click y se abrirá una nueva ventana que Será visualmente igual a la de index.html pero en esta habrá otro tipo de código. Lo primero que haremos Serra crear un color de fondo, entonces vamos a elegir un color verde claro. Para hacer que aparezca el color que nosotros queramos tenemos que escribir la siguiente línea: body {background-color: color elegido}; Ahora a explicar: Primero empezamos con la etiqueta: body, eso indica que estamos tomando toda la pagina. Luego abrimos corchetes y escribimos background-color, lo cual indica que estamos seleccionando un color de fondo para nuestra página Web, entonces elegimos el color y cerramos toda la línea con un punto y coma. Para nombrar el color, nosotros podemos hacerlo de dos maneras: Si elegimos un color básico, como rojo, negro, verde, amarillo, etc Nosotros tenemos que poner el color en ingles, por lo cual quedaría: body {background-color:green}; Pero entonces quedaría un color muy chillón: Entonces nosotros optamos por la segunda manera, que es introduciendo la ID del color. Seguro alguna vez en photoshop o en algún programa de edición de imágenes habrán visto que un color tiene un número #159753 por ejemplo. Ese numero, es la ID. Entonces, ¿Como hacemos para encontrar el numero correspondiente? Yo por ejemplo uso photoshop para ver que numero es, pero también hay paginas de Internet en la cual tenemos esa información. Por desgracia no conozco ninguna página de esas. Así que voy a usar photoshop para los códigos. Ahí tenemos el código del color que utilizaremos, el cual será DDFAE1 Entonces el código nos quedaría: body {background-color: DDFAE1}; No se olviden de agregar un punto y coma luego de cada línea de código en CSS. Entonces guardamos el archivo y nos vamos al index.html y damos click a preview para ver como queda nuestra pagina luego de cambiar el fondo, pero... ¡el color de fondo no se ve! No se preocupen, lo que pasa es que hay que relacionar el archivo .HTML al archivo .CSS. ¿Como hacemos eso? En nuestro archivo HTML ponemos este código entre <head> y </head>: <link rel="stylesheet" href="estilo.css" type="text/css" media="all"> Entonces ahora guardamos y damos click a preview. Bien, ahora tenemos un color de fondo, pero para ser sincero, le falta algo a la página, un poco de organización y un lugar en donde se ubique el texto. Entonces ahora vamos a hacer que el banner se centre, ¿entonces que hacemos? Vamos a usar divs. ¿Que es esto? Son divisiones que se hacen en el código HTML. Para usarlas usamos el siguiente código: <div ID="nombre_div" >Contenido de la división </div> Gracias a esto podemos ir acomodando la página a nuestro gusto. Entonces vamos a centrar el banner. Para hacerlo buscamos la línea en la cual añadimos la imagen. Entonces escribimos el código que acabo de explicar, de esta forma quedaría así: <div ID="banner"><a href="http://tallergamer.foroargentina.net/"><img alt="Imagen para tutorial" src= "imágenes/bannertallergamer.jpg" height="160px" width="700px"/></a></div> ¿Para que nos sirve tener la división? Para editarla mas fácilmente desde el archivo CSS. también puede hacerse desde el código HTML, es mas complicado pero a veces solo se puede hacer de esa forma. Con esto del banner lo que tenemos que hacer es, abrir el archivo HTML y buscar la línea de la división del banner, entonces agregamos lo siguiente: <div align="center"> de forma que nos quedara así: si no se puede ver la imagen acá se los dejo escrito : <div id="banner"> <div align="center"><a href="http://tallergamer.foroargentina.net/"><img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/></a></div> Bien ahora que tenemos la imagen centrada queda un poco mejor, pero aun se puede ver un recuadro azul alrededor de la imagen, entonces lo que hacemos para sacarlo es lo siguiente: Abrimos el archivo CSS y escribimos una nueva línea de código: img {border-style:none; } por medio de esta sentencia se declara que todas las imágenes de la página, no van a tener borde. Bien, y ahora que mas podemos hacer? Vamos a seguir con las divisiones, vamos a hacer que el texto aparezca en una caja de texto y vamos a añadir varios detalles extra. Entonces para crear la caja de texto creamos una div en la parte del párrafo. Nos quedaría: <div ID="texto"><p> Acá estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p></div> Bien, ahora nos vamos al archivo CSS y escribimos una nueva sentencia: #texto {height:500px; width: 1000px; background-color:white;} Con esto lo que hacemos es establecer una división que tenga 1000 px de ancho y 500 de alto. Y además le agregamos un fondo de color blanco para que se distinga del resto. también podemos alinear el texto dentro de esta caja, para eso tenemos que agregar una cosita mas en el código CSS #texto {height: 500px; width: 1000px; background-color: white; text-align: center; } entonces ahora tenemos el texto alineado. Pero que es una página sin titulo, lo que hacemos es escribir un encabezado antes del párrafo que ya teníamos. Escribimos dentro del HTML lo siguiente luego de que establecemos la división "texto": <h1> Bienvenidos </h1> Entonces quedaría: <div ID="texto"> <h1> Bienvenidos </h1> <p> acá estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p> </div> Si damos click en previsualizar quedaría así: Bien, ahora que tenemos la base de la página creada podemos dejar este tutorial. Voy a traerles el próximo tuto lo más rápido que pueda. El próximo va a ser: Tutorial HTML 4: Navegación y secciones. Si les gusto este post dejen puntos, comenten, agreguen a favoritos, síganme o lo que se les de la gana.
Buenas gente, bienvenidos a la segunda parte del curso de html.En la parte anterior habíamos visto como agregar texto a una página.Si no leyeron la primer parte aqui tienen el link: http://www.taringa.net/posts/hazlo-tu-mismo/13352896/Tutorial-de-HTML-Leccion-1_-Como-empezar.htmlComo prometi vamos a aprender a insertar imagenes en codigo html.La imagen que yo use fue esta: Hagan click derecho y pongan Guardar Como, y ponganle de nombre bannertallergamer.jpgPara agregar la imagen abrimos nuestro archivo guardado de html-kit.Como veran el codigo tendria que haber quedado asi:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title> Tutorial de Html </title></head><body><p> Aca estamos aprendiendo HTML de la mano de nuestro buen amigo Neojuanma. Esto es una prueba de texto.</p></body></html> Bien ahora para agregar la imagen, escribimos entre las etiquetas <body> y</body> antes del texto este codigo:<img alt="Descripcion de la imagen" src= "ubicacion de la imagen" height=" Altura de la imagen px" width="Anchura de la imagen px" />Ahora explicaremos que es cada cosa en ese codigo:Descripcion de la imagen: luego de alt= iria la descripcion de nuestra imagen por si en algunas pc no se llega a ver que imagen es.Ubicacion de la imagen: Iria luego de src= y es la direccion para encontrar a nuestra imagen. Hay 2 tipos de direcciones:La primera, es la direccion absoluta, es decir, la direccion completa, por ejemplo: C://documents&settings/Misdocumentos/Imagenes/Imagenimaginaria.pngY la otra es la direccion relativa. Esta es la mejor forma para elegir imagenes, porque no hay que poner el codigo entero, solo una pequeña parte. Yo uso esta forma pero hay que tener las cosas acomodadas, no desparramadas por toda la pc. Por eso es bueno crear una carpeta llamada "Mi pagina web de prueba" y dentro de esa carpeta, hacemos otra que sea "imagenes", en minusculas parano confundir, porque el html distingue entre mayusculas y minusculas.Una vez hecho esto ponemos todas las imagenes de nuestra pagina en esa carpeta, y, volviendo a lo de la direccion, para escribir la direccion relativa hacemos asi: escribimos: "imagenes/nombredeimagen.jpg"PD: Si quieren pueden crear un workspace para tener la carpeta con sus archivos junto a la pagina para editar, pero es solo para comdidadPara crear esto hacemos click en la pestaña Workspace en el menu de herramientas del programa y situamos el mouse en donde dice: Add Folder/FTP server y luego en Add local / Network Folder, entonces se nos va a abrir una pantalla que tiene dos campos de texto.En el primero elegimos la ubicacion de nuestra carpeta, y en el segundo elegimos un nombre para mostrar, luego hacemos click en ok y ya tenemos nuestro workspace.Recuerden poner todo en minusculas y las direcciones entre comillas, ya que es un error muy comun y muy dificil de encontrar.Altura: es la altura de nuestra imagen xDAnchura: es la anchura de nuestra imagen Ahora para editar ese codigo e insertar nuestra imagen copiamos este codigo:<img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/>Recuerden no copiar y pegar el codigo ya que la escritura ayuda al aprendizaje.Bien recuerden simpre que luego de la anchura y la altura de la imagen tienen que agregar "px" que significa pixeles.entonces si hacemos click preview ahora podremos ver la imagen:Una forma mas rapida de agregar imagenes es desde el menu de herramientas del programa, para ello hacemos click en tags y nos vamos a donde dice image y luego a insert image.En donde dice add elegimos la carpeta en la que se encuentra nuestra imagen y luego elegimos la imagen, pero antes de dar clicken "ok" modifiquen las celdas de height y width y agreguenle px justo despues del numero, y no agreguen espacio.Y bueno hasta ahi es lo de agregar imagenes perooooo tambien les enseñare a agregar un enlace a alguna pagina.Para ello antes del codigo de nuestra imagen escribimos <a y al final escribimos </a>entonces el codigo quedaria:<a href="pagina a la que queramos enlazar"><img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/></a>Entonces explicamos lo que acabamos de agregar:<a y </a> son las etiquetas que indican el inicio y el final de nuestro enlacehref="pagina a la que queramos enlazar": como bien dice, ahi escribimos la pagina a la que queremos enlazar y el href da la orden deenviarnos a esa pagina.entonces, cambiando el codigo, escribimos:<a href="http://tallergamer.foroargentina.net"><img alt="Imagen para tutorial" src= "imagenes/bannertallergamer.jpg" height="160px" width="700px"/></a>Damos click en guardar y luego en previewentonces vemos que al hacer click en la imagen, nos manda al portal de tallergamer Para quien no sepa que es tallergamer, es un grupo de creadores de videojuegos en el cual yo participo Y para la forma directa de agregar links, marcamos el codigo de la imagen y luego hacemos click en tags y luego en make link y dondedice href escribimos la URL de la pagina a la que queremos llegar.Y bueno eso es todo por hoy gente, esperen el proximo tutorial de html.
Hace un tiempo que se viene difundiendo por la web una "profecia" de Harold Camping, un hombre de 90 años que durante 54 ha estudiado la Biblia. mucha gente empezo a difundir las palabras de este señor por blogs,foros,paginas,etc para protegernos de lo que se supondria seria un superterremoto que acabaria con todas las ciudades y pueblos del mundo sin dejar huella alguna... Tampoco faltaron los videos que hablaban justamente de este tema pero le agregaban un extraño tema religioso... decian que todo aquel que quisiera sobrevivir tendria que demostrar que es una persona buena y que reparte amor... no nos enseñaron desde chicos que Dios (en mi caso porque soy catolico pero creo que se aplica a todas por igual...sepan perdonar si estoy equivocado) nos perdona a todos sin importar lo que hicimos en nuestra vida? entonces no entiendo porque hacen estos videos... Aca dejo uno de ejemplo: link: http://www.youtube.com/watch?v=lyK2HhonxBI Como esta este deben haber un monton mas... Tambien habla de que jesus volvera a la Tierra... yo creo que despues de lo que le hicieron no quiera volver link: http://www.youtube.com/watch?v=zWudqmn_QGw&feature=related Es como si la religion nos persiguiera: link: http://www.youtube.com/watch?v=4dsIbNrs8QI Bueno alejando el tema de la religion... todavia no me imagino la cara del hombre que pago como 14000 dolares para anunciar el fin del mundo que perdida de dinero... me imagino que debe ser algo asi Es una clara referencia a la ingenuidad de algunas personas... no se pueden creer todo lo que les dicen Y dejo una anecdota: Ayer estaba con unos amigos y en una parte uno dice "huy mañana es el fin del mundo" solo faltaba 30 minutos para las 12 y yo me puse re paranoico...cualquier ruido que escuchaba me daba vuelta pero no quiere decir que crea que era el fin del mundo... si tocaba morir no se puede hacer nada... Ahora dejo algo para la gente a la que le gustaria volverse millonaria en un instante sin mover ni un dedo: jaja eso es todo...espero que les haya gustado