• INCLUSIÓN DE IMÁGENES EN HTML

Vamos a aprender a incluir imágenes en nuestro documeto HTML, algo muy sencillo y que guarda cierta similitud con los enlaces en su sintáxis.

La etiqueta que usaremos será <IMG SRC>, la cual no tiene etiqueta de cierre.

Es decir, si queremos incluir en nuestro documento HTML una imagen, por ejemplo, imagen1.gif (de nuevo hago uso de mi excelsa imaginación), la cual se encuentra en el mismo directorio que nuestro documento HTML, la estructura será la siguiente:

<IMG SRC=”imagen1.gif”>

Sencillo, ¿verdad?, pues como ya aprendimos en el tema de los enlaces, si queremos cargar una imagen que esté en otro directorio sólo tendremos que usar la misma estructura que con dichos enlaces, por ejemplo:

• Queremos cargar una imagen de nombre imagen2.gif que se encuentra en el directorio imagenes dentro del directorio principal:

<IMG SRC=”imagenes/imagen2.gif”>

• Queremos cargar una imagen de nombre imagen-externa.gif que se encuentra en un sitio web externo al nuestro, en la URL http://ricalco.com

<IMG SRC=”http://ricalco.com/imagen-externa.gif>

Ya lo vamos teniendo más claro…

Bien, uno de los comandos más importantes, al menos a mi parecer, al incluir una imagen es el comando ALT, usándolo, cuando nuestra imagen no se vea por cualquier circunstancia, en su lugar saldrá el texto que incluyamos en ese ALT. Un ejemplo:

<IMG SRC=”imagen1.gif” ALT=”imagen de muestra 1″>

Con esta estructura, cuando por alguna circunstancia el archivo imagen1.gif no esté disponible, se mostraría en su lugar el texto imagen de muestra 1.

• POSICIÓN DE LA IMAGEN EN EL DOCUMENTO HTML

En principio, sólo vamos a tocar las tres posiciones básicas donde colocar una imagen con respecto al texto en un documento HTML, para ello, usaremos el comando ALIGN.

El comando ALIGN lo acompañaremos de TOP, MIDDLE o BOTTOM, dependiendo si queremos que el texto del documento HTML quede por encima, en medio o por debajo de nuestra imagen. Un ejemplo:

<IMG SRC=”imagen1.gif” ALT=”imagen de muestra 1″ ALIGN=TOP> El texto estará alineado encima de la imagen.

• ENLACES E IMAGENES

Para terminar el capítulo de hoy, vamos a unirlo con el capítulo anterior, el de los enlaces y vamos a aprender a enlazar imágenes con otros documentos HTML o viceversa.

Imaginemos que queremos que, al clicar sobre la imagen (imagen1.gif) que se encuentra incluida en nuestro documento HTML, ésta nos lleve a la página oficial de google, por poner un ejemplo, la estructura sería la siguiente:

<A HREF=”http://www.google.es”><IMG SRC=”imagen1.gif”></A>

Como podéis comprobar, hemos usado la etiqueta <A HREF> con su correspondiente cierre </A> y entre ambas, en lugar de escribir un texto, hemos incluido nuestra imagen. Pues bien, no hay más misterio en enlazar imágenes y documentos HTML, seguiremos siempre el mismo esquema.

También nos puede interesar que al clicar en un texto de nuestro documento HTML, éste nos lleve a una imagen, nada más sencillo:

<A HREF=”imagen1.gif>si clicas en este texto nos enviara a la imagen 1</A>

Como comprobais, tan sólo se trata de un enlace común pero, en vez de enlazar con un documento HTML, lo hacemos con una imagen…

Por último, un detalle que quizá os interese será el eliminar el borde que aparece alrededor de las imágenes cuando la usamos para enlazar, para ello hay que usar el atributo BORDER, es decir:

<A HREF=”http://www.google.es”><IMG SRC=”imagen1.dif” BORDER=0></A>

Ya hemos terminado la lección de hoy, espero que no se os haya hecho pesada.

Como norma general, los enlaces tendrán la siguiente estructura:

<A HREF=”XXX”> YYY </A>

Es decir, XXX es el destino del enlace mientras que YYY es el texto indicativo de dicho enlace, que se mostrará con un color especial y generalmente subrayado, opciones que veremos más adelante.

En principio, vamos a distinguir cuatro tipos de enlaces:

• Enlaces dentro de la misma página.
• Enlaces con otra página de nuestro mismo “dominio”.
• Enlaces con una página exterior.
• Enlaces con un correo electrónico.

Vayamos viéndolos uno por uno:

• Enlaces dentro de la misma página:

Estos enlaces se utilizan generalmente en documentos muy extensos donde nos puede interesar crear saltos desde una posición de ese documento a otra dentro del mismo documento, un claro ejemplo puede ser la realización de un F.A.Q., donde podemos enlazar las diferentes preguntas con su respuesta dentro del documento.

Para hacer esto necesitaremos dos etiquitas, la primera será la ya nombrada <A HREF>, con la particularidad de escribir el símbolo # en el enlace, y su correspondiente cierre </A>, y la segunda será la etiqueta <A NAME> con su cierre </A>.

Es decir, el lugar desde donde queremos saltar se escribirá así:

<A HREF=”#marca”> YYY </A>

y en el lugar donde queramos ir al pulsar YYY:

<A NAME=”marca”></A>

• Enlaces con otra página de nuestro mismo “dominio”:

Lo normal es que nuestro sistema disponga de varias páginas enlazadas normalmente con una página inicial o también llamada principal así como entre ellas mismas.

Supongamos que tenemos dos páginas, pagina1.html y pagina2.html (que original ¿verdad?), y queremos colocar un enlace en pagina1.html que nos lleve a pagina2.html, pues la estructura sería la siguiente:

<A HREF=”pagina2.html”> Ir a la pagina 2 </A>

En este ejemplo suponemos que ambas páginas se encuentran en el mismo directorio, pero puede ocurrir que pagina1.html se encuentre en el directorio principal y pagina2.html se encuentre en otro, pongamos por ejemplo, el directorio subdir en otro alarde de originalidad por mi parte, tendríamos que hacer lo siguiente:

<A HREF=”subdir/pagina2.html”> Ir a la pagina 2 </A>

Pero también nos puede ocurrir a la inversa y encontrarnos en pagina2.html, dentro del directorio subdir y queremos enlazar con pagina1.html, ¿como podríamos hacerlo?, pues poniendo “../“, es decir, nuestro enlace quedaría tal que así:

<A HREF=”../pagina1.html> Ir a la pagina 1 </A>

• Enlaces con una pagina exterior:

En muchas ocasiones tendremos la necesidad de enlazar con una página que se encuentre fuera de nuestro sistema, para ello, será necesario conocer su dirección completa o URL (Uniform Resource Locator).

Conociendo este URL, sólo necesitaremos sustituir el XXX de nuestro destino de enlace por éste URL, por ejemplo, si queremos enlazar con google deberíamos poner lo siguiente:

<A HREF=”http://www.google.com“> Pulsa para ir a Google </A>

Fácil, ¿verdad?

• Enlaces con una dirección de correo electrónico:

Si queremos enlazar con una dirección de correo electrónico debemos sustituir XXX (nuestro destino de enlace) por mailto seguido de la dirección de correo electrónico de la siguiente manera:

<A HREF=”mailto: dirección de email”> Mandame un email </A>

Con esto ya hemos tocado por encima los tipos de enlace en lenguaje HTML, sin embargo, más adelante volveremos a tocar los enlaces y nos adentraremos más en ellos puesto que abarcan mucho más de lo que se ha explicado en este capítulo.

Vamos a poner en práctica todo lo aprendido hasta ahora.

Escribir en vuestro notepad lo siguiente:

<HTML>

<HEAD>

<TITLE> Mi primera pagina en HTML </TITLE>

</HEAD>

<BODY>
<H1> <CENTER> Esta sera la primera practica del curso HTML </CENTER></H1>
<HR>

<H3> Vamos a ir comprobando lo que hace cada etiqueta </H3>
<P>
Este sera un texto normal, sin tocar nada.
<P>
<B> Ahora lo ponemos en negrita </B>
<P>
<I> Y ahora en cursiva </I>
<BR><P>
<BR><P>
<BR><P>
<PRE>Hemos dejado varios espacios para mostrar este
texto preformateado que
respeta los espacios y los
retornos del carro.</PRE>
<BR><P>
<BR><P>
<TT>Y esta vez volvemos a dejar espacios
para mostrar un texto preformateado que no
respeta los espacios ni los saltos de
carro</TT>
<p>
Por ahora no sabemos hacer muchas cosas mas pero seguro que iremos aprendiendo.

</BODY>

</HTML>

Ahora sólo teneis que guardarlo como extensión HTML y, posteriormente, cuando lo abrais pulsando sobre el se os desplegará en vuestro explorador algo así:

¿Os ha salido bien?

¡¡¡Enhorabuena!!!!, ¡¡¡ya habéis creado vuestro primer documento HTML!!!!

Vamos a empezar a meternos un poco más en el lenguaje HTML una vez vista la estructura básica que debemos respetar al trabajar con este lenguaje, este segundo capítulo constará de dos entregas, una primera donde conoceremos los formatos básicos que podemos darle  a nuestro texto, y una segunda donde trataremos las listas (desordenadas, ordenadas y de definición).

Y empezaremos con los textos, elemento imprescindible de cualquier web y que debemos saber tratar al menos de una manera básica si queremos que nuestros diseños sean, como poco, decentes.

Una etiqueta importante será la <P>, que no tiene etiqueta de cierre y que servirá para separar los distintos párrafos entre sí dejando una línea en blanco entre ellos. Si queremos separar los párrafos sin dejar una línea en blanco entre ellos nuestra etiqueta será <BR> (break o romper), que tampoco tiene etiqueta de cierre, y, por último, si entre los párrafos deseamos dejar varias líneas en blanco, no bastará con repetir la etiqueta <P>, sino que habrá que combinarla con <BR>, es decir, que para dejar 3 líneas en blanco pondríamos:

<P><BR>
<P><BR>
<P><BR>

Otra etiqueta que nos puede venir bien para las prácticas será la etiqueta <HR> (Horizontal Rule), que introducirá una raya horizontal tan ancha como la pantalla que nos servirá como separador.

Por último, si dejamos varios espacios en blanco entre dos palabras observaremos que el navegador sólo reconoce uno de ellos, por lo que si queremos forzarle a que reconozca estos espácios de más debemos usar el código &nbsp (Non breaking Space).

Y una vez aclarado estos puntos, empecemos de lleno con los textos que es lo que de verdad nos interesa en este capítulo.

Para empezar, los textos pueden tener unas cabeceras, comprendidas entre las etiquetas <H1> a <H6>, con sus correspondientes etiquetas de cierre </H1> hasta </H6>, dichas etiquetas indican el tamaño del texto y están ordenadas de mayor (H1) a menor (H6).

Las etiquetas para destacar algo en negrita será <B> con su correspondiente </B>, y para la letra tipo cursiva <I> con su etiqueta de cierre </I>.

Estas son las principales etiquetas para el texto, pero a continuación os expongo algunas más:

<CENTER> y </CENTER> centrará nuestro texto en la pantalla.

<PRE> y </PRE> — Estas etiquetas preformatearan el texto que se encuentren entre ellas como si hubieras sido escrito con una máquina de escribir, con una fuete de espaciado fijo y que respetará los retornos del carro y los espacios en blanco. Algo que ya vimos que no pasaba normalmente.

<TT> y </TT>, también conseguiremos que el texto tenga la apariencia de haber sido realizado mediante una máquina de escribir, pero, a diferencia de las etiquetas anteriores, este no preformateara el texto, sólo cambiará su apariencia.

<BLOCKQUOTE> y </BLOCKQUOTE> destacará una cita textual dentro del texto general.

<SUP> y </SUP> escribirá un índice, por ejemplo para escribir m2.
<SUB> y </SUB> escribirá un subíndice, por ejemplo para vx

Con esto damos por finalizada la primera parte de este segundo capítulo, dejaremos para la segunda parte las listas, ya sean desordenadas, ordenadas o de definición.

MANUAL BÁSICO DE HTML

¿Qué es eso de HTML?

HTML son las siglas de Hypertext Markup Language (Lenguaje de macas de Hipertexto), un lenguaje mediante el cual se construyen las páginas web, el lenguaje con el que se escriben los millones de documentos que hoy existen en la World Wide Web (WWW).

Cuando accedemos a uno de estos documentos, el cliente (ya sea Netscape, Mozilla, IE…) los interpretan y los despliega, por eso, el lenguaje HTML es un estándar reconocido en todo el mundo y, como define W3C (World Wide Web Consortim -es el organismo que define las reglas del HTML), el HTML es un un lenguaje reconocido universalmente y que permite publicar información de forma global.

Un poco de historia

La historia de HTML es extensa, nos tenemos que remontar a 1980 cuando un físico de nombre Tim Berners-Lee propuso un nuevo sistema de “hipertexto” para compartir documentos, pero no fue hasta 1991 cuando, con la unión de Tim Beners-Lee y del ingeniero de sistemas Robert Cailliau publicaran el primer documento que describía HTML, de nombre HTML TAGS (Etiquetas HTML) y que aún puede ser consultada como una reliquia de la informática.

En 1993 se lanzó la primera propuesta, por parte del organismo IETF, para convertir HTML en un estándar, sin embargo, ninguna de las dos propuestas, HTML y HTML+ no consiguieron convertirse en estándar oficial.

EL primer estándar sería el HTML 2.0, publicado en 1995 por IETF, pero a partir del año siguiente, los estándares los publicaría W3C, asñi HTML 3.2 saldría a la luz en 1997 con importantes avances en el desarrollo de páginas webs como el uso de applets de java.

En 1999 se publica HTML 4.1 que no presentaría grandes novedades con respecto a su predecesor, y, debido a esta falta de novedades, Apple, Mozilla y Opera deciden unirse para crear un nuevo estándar HTML organizándose en una nueva asociación de nombre WHATWG (Web Hypertext Application Technology Working Group) y centrándose en el desarrollo de HTML 5.0

¿Que pretende este manual?

El objetivo de este manual es conseguir alcanzar un conocimiento básico para la construcción de páginas Web, HTML es muchísimo más de lo que trataremos aquí, pero eso ya lo dejaremos para un futuro.

¡¡¡Espero que lo disfruteis!!!

 Google dejo todo en manos de un bot quien elimino un blog oficial de su propia compañía: Google.

Lo que sucedio es que esre pequeñop bot lo identificó como un sitio de spam, es decir, de mensajes publicitarios invasivos.

Borrando por lo tanto el blog oficial de Google Custom Search, un programa informático para crear páginas destinadas a hacer búsquedas personalizadas en otras páginas. El cual es escrito por varios programadores de Google, para ofrecer trucos y demás sobre los programas.

Cuando el bot detecta un sitio que, potencialmente, puede contener spam, avisa a sus usuarios para que aclaren si se trata de algún tipo de malentendido. “Los usuarios pasaron por alto la notificación, y después de un periodo de tiempo, el blog fue inutilizado”, aclara Sean Carlson, portavoz de Google

Este es el mensaje que se quedo en el blog por parte de Srikanth:

“Google Custom Search es el maravilloso producto de Google que muchos webmasters han estado buscando y soñando. Permite a los webmasters crear sus propios motores de búsqueda personalizados para buscar sólo en los sitios que él/ella quiera.Además, Google Custom Search está integrado con Ad-sense, lo que significa hacer dinero mientras mantienes usuarios en tu página por un largo tiempo con motores de búsqueda personalizados.

Usaré disimuladamente esta poderosa herramienta muy pronto en mi próximo blog.

Buena suerte para todos los usuarios (??) de Búsquedas Personalizadas.

Saludos,

Srikanth”

Es por eso que decidí poner una breve explicación de todo esto.

Comencemos por saber que significa AJAX.- AJAX, acrónimo de Asynchronous JavaScript And XML (en inglés JavaScript y XML asíncronos).

AJAX es una técnica que se usa para el desarrollo de webs, sirviendonos para crear aplicaciones más interactivas, lo mejor de esto es que no necesita recargar completamente la web ya que utiliza:

• HTML con hojas de estilos (CSS) para mostrar la web.
• Document Object Model (DOM) y JavaScript interactuando más dinámicamente con los datos
• XML y XSLT sirviendo para intercambiar y manipular los datos

No es considerado un lenguaje de programación, puesto que reune diversos lenguajes para poder obtener una nueva tecnología que nos sirve para el desarrollo de aplicaciones web.

VENTAJAS

• No se necesita recargar las páginas en el envio de información´
• Permite la reconfiguracion de la página, mostrando los datos instantáneamente.

DESVENTAJAS

• Código oculto tras JavaScript, impidiendo a buscadores la indexación de los contenidos 
• Se necesitará un mapa de sitio para que no pase lo de el anterior punto.
• Los usuarios pueden no estar acostumbrados a que la página no recargue, pensando que su solicitud no ha sido enviado o que no funcione.
• Requiere de muchas librerías Javascript, haciendo lento la carga.

Un link más sobre AJAX

Hace unos minutos, me dejó intrigada un amigo que al despedirse me dijo “Estudias Jaws”. Y al menos yo no tenía idea que esa palabra existierá, me dejó tanto en la duda que me dí en la tarea de investigar que era Jaws, y por que me había dicho eso.

Ahora bien el Projecto Jaws  es un Framework y un Sistema de gestión de contenido el cual se encuentra escrito en PHP, y por lo tal nos permite de manera fácil Crear, modificar y eliminar contenido.
Más que nada Jaws es un proyecto de Software Libre, usa licencia LGPL y es totalmente GRATIS!
Se puede decir que esta destinado para 2 tipos de personas, USUARIOS Y DESARROLLADORES.

Para Usuarios:

Jaws brinda 1 forma rápida y elegante de modicar los sitios puesto que utiliza mini-programas que ayudan a agregar contenido a nuestras webs, ya sea como un organizador de fotos (phoo), blog, listas de amigos (friends), etc. Cuenta con un sistema de plugins, que aumenta considerablemente.

Entre sus ventajas podemos ver un editor WYSIWYG, soporte nativo contra el SPAM, mapeo de URLs: esto es una forma de hacer bonitas y entendibles las URLs, AJAX en la parte de administración para que sea más rápido, tenga una fácil instalación y administración.

Y no faltaba más ni menos Jaws viene en 6 idiomas: Inglés, Español, Alemán, Danés, Japonés y Rumano.

Para Desarrolladores:

Jaws nos brinda la oportunidad de conocerlo a más detalles y crear nuestros propios Gadgets. Para asi administrar facilmente nuestro sitio web, o el de nuestros clientes.

MVC
Está basado en el esquema Modelo-Vista-Controlador.  Por lo tanto tenemos mayo facilidad en:

• Crear nuevos gadgets
• Agregar acciones a un gadget
• Cambiar la forma de como un gadget es mostrado al usuario
• Cambiar toda la presentación de un sitio usando un sistema de plantillas y temas
• Controlar los gadgets

Plugins y Servicios web
Pero Jaws no solo es Gadgets y Plantillas, también pueden crearse Plugins que interactuen entre Gadgets, además de añadir Servicios web.

Piwi
Piwi es un conjunto de widgets HTML que nos ayudan a realizar paginas XHTML válidas usando clases PHP.

Jaws lo usa para crear páginas con solo un par de líneas de código, sin tener que interactuar directamente con el XHTML.

Distribuciones
Jaws se distribuye en 3 formas diferentes:

• Jaws core, parte de administración, el tema por determinado y un par de gadgets (menu y skeleton).
• Jaws Blog System,Un sistema de blog. Viene el Jaws Core con unos gadgets más (Banner, Blog, Chatbox, Navegador de Archivos, Amigos, Glosario, Menu, Organizador de Fotos, Preferencias, Busqueda, Tiempo del Servidor, Contenido Estático, Contador de Visitas, Clima, Webcam).
• Jaws Complete, Está versión incluyen todos los gadgets oficiales, todos los temas y por supuesto el jaws-core.

Me parecio bastante interesante este proyecto, aparte de que puedes aprender sobre como está realizado todo esto como programador a quienes no nada mas les interese tener un blog o una página web con un programa descargado. También es ideal para los usuarios.

Quien le haya interesado esto puede descargarlo desde su página web o quizás antes que eso Probar el demo!
Además  puedes checar esta página que es una  comunidad de usuarios de jaws en español, Jaws-user.com

Para quienes les interese saber más sobre esto. Y bueno no se puede comparar con que sea igual a wordpress.

Navegando me h encontrado este interesante SW

Se trata de un GRAN editor de texto y codigo de programacion,  permite colorear la sintaxis siendo este un programa ligero, útil y a su vez muy rápido.

Nos comentaban que una de las caracteristicas mas avanzadas que tiene es el de “buscar y remplazar”, siendo esta mas superiores a cualquier otro.

Datos de registro:

Username: ñ_ñ

Code: EC87D-124D0

Descargar Editplus

Visto en Ba-k.com

LibrosWeb

Vísto en  Kernel Source