PMBOK

No pude subir el pmbok pero aca esta link para la descarga http://rapidshare.com/files/53511113/SPA_PMBOK3a_2004.zip.html

Mi primer JSP

Una demostración de la potencia de Java en Aplicaciones Web es la tecnología JSP. Java Server Pages te permite introducir código Java en páginas web (HTML, XML, entre otras), este código es ejecutado en uno o varios servidores (Tomcat, GlassFihs, entre otros, los cuáles veremos en otro post), de una o varias plataformas mostrando al cliente el resultado de dicha ejecución. Esto permite un amplio dinamismo en una página web, púes se puede tener secciones estáticas y dinámicas en un mismo lugar.

Esta amigable y generosa tecnología es sencilla, y si tienes algo de conocimiento en HTML se te será fácil aprenderla. Un elemento muy importante para JSP es su MOTOR, pero ¿cuál es la tarea del motor? púes este se dedica a realizar la traducción del código en un servlet. Esta traducción sólo ocurre la primera vez que se realiza la consulta. Para comenzar a utilizar JSP, debemos tener al menos un servidor instalado (Tomcat, GlassFihs, etc.) Para editar nuestro JSP podemos utilizar software completo desde Netbeans, Eclipse hasta Notepad (Windows) o Gedit (Linux). Entonces procedemos a crear nuestro nuevo archivo JSP, al cuál nombraremos primerjsp.jsp, y copiemos el siguiente código:

<%
	out.println("
<h1> Hola Mundo!!!</h1>
");
%>

Hola Mundo!!!

De esta forma vemos como el código JSP está dentro del código HTML, pero este beneficio los tiene también PHP (como vimos en un post anterior). La diferencia radica en que para poder utilizar código JSP se tiene que tener código estructurado, es decir tener tu desarrollo organizado en por ejemplo en MVC ( Modelo Vista Controlador) lo cuál es ideal para proyectos grandes; mientras que PHP no solicita eso de ahí que este lenguaje es preferido para pequeños proyectos. Más adelante iremos profundizando con JSP, este es sólo una introducción, así que tiene alguna pregunta pueden hacerla ;).

Variables en PHP

¿Qué es una variable?

Una variable es una estructuras de datos que, como su nombre indica, pueden cambiar de contenido a lo largo de la ejecución de un programa. Una variable corresponde a un área reservada en la memoria principal del ordenador con determida longitud.

Por ejemplo suponiendo que tenemos una variable llamada hora, esta variable con cada segundo que pase varía su valor.

En php como en todo lenguaje de programación podemos encontrar básicamente dos tipos de variable unas las variables de tipo global (variables globales) y las de tipo local (variables locales).

¿En que se diferencian?

Imáginemos que tenemos un código de indentificación que podemos utilizar en todos los países del mundo (Global), sin embargo en cada país nos dan un código adicional que solo lo podemos usar en ese país (Local).

Las variables funcionan igual, las globales se nos es permitido usar en todo nuestro programa es decir cualquier función puede acceder a dichas variables para leer y escribir en ellas, se declara generalmente fuera de cualquier función, las variables de tipo local solo puede ser utilizada por la función en donde fue declarada.

En php no hace falta declarar una variable antes de su uso, ni establecer su tipo (son 5 tipos: Integer, Double, String, Array y Object). Su nombre puede ser una combinacion de letras (a-Z), números y guiones bajos (nos e recomienda los acentos ni caracteres especiales, aunque pueden funcionar correctamente), precedidos con el signo $. El primer carácter no puede ser un número, y php diferencia entre mayusculas y minúsculas, además una variable no se puede llamar igual que una palabra reservada por php. ejemplo $var es una variable pero no es igual a $Var

Para utilizar una variable basta con asignarle un valor, usando para ello el operador =
Si el valor es una cadena, necesita ir entrecomillado.

Ahora bien sigamos este ejemplo:

<?php
$variable1 = "HOLA MUNDO";
echo $variable1;
?>

Esto nos mostrará lo siguiente:

HOLA MUNDO

En la línea dos hemos declarado la variable llamada variable1 a la cual le hemos asigando como valor una cadena de caracteres (tipo String), para declarar este tipo de dato se hace entre comillas de este modo: «cadena» y se termina con un; indicando que acabo la instrucción.

En la línea tres con echo lo que hacemos es motsrar la variable1 pero como la variable1 contiene el valor: HOLA MUNDO, lo qeu se muestra es su valor.

¿Pero en qué momento es variable nuestra variable?

Observemos este código

<?php
$variable1 = "España";    // el valor de nuestra variable1 es España
$variable1 = "México";    // el valor de nuestra variable1 es México
$variable1 = "Perú";      // el valor de nuestra variable1 es Perú
echo $variable1;
&#91;/sourcecode&#93;

Lo que imprimirá será: Perú, ya que este es el último valor asignado a nuestra variable fue ese valor, con esto demostramos que el contenido de una variable es cambiante.

<strong>¿Qués es lo que pasa con otros tipos de variables?</strong>

Con otros tipos de variables el meacanismo es idéntico:


<?php
$int = 1;           // integro
$doub = 1,5;        // double
$string1 = "1";     // string
$string2 = "uno";   // string
echo $int;
echo $doub;
echo $string1;
echo $string2;
?>

Tipado (casting) de variables

Como se menciono, a diferencia de otros lenguajes, al declarar una variable no tenemos que indicar a que tipo pertenece. Php lo hará por nosotros de acuerdo con su contenido y el contexto. Aunque no es necesario, podemos especificar el tipo de la variable, o forzar su conversion. Forzar un tipo de variable puede ser muy util, por ejemplo para validar la entrada de datos por usuarios desde un formulario.

<?php
$cadena="5";         //esto es una cadena
$entero=3;           //esto es un entero
echo $cadena+$entero //daria el resultado 8
$mivar = "3";        // $mivar es tipo string
$mivar = 2 + $mivar; // automaticamente se convierte a tipo integer
// $mivar ahora vale 5
$mivar = (string)123;// creamos $mivar como cadena
settype($mivar, "double"); // forzamos su cambio a tipo double
// el cambio forzado afecta al valor de la
// variable:
// $mivar = 3.5;
// $mivar = (integer)$mivar; -> valor 3
// $mivar = (boolean)$mivar; -> valor 1
?>

Averiguando el tipo de una variable

Si necesitamos saber a que tipo pertenece una variable podemos usar la función gettype():

<?php
$mivar = "123";
echo gettype($mivar); // string
$mivar = 123;echo gettype($mivar); // integer?>

Chequeando tipos concretos

Si lo que necesitamos es saber si se trata de un tipo concreto de variables, podemos usar una funcion ad hoc: Todas ellas tomas como parámetro el nombre de la función a chequear, y devuelven verdadero o falso

Un dato importante a tener en cuenta es que una variable, sea cual sea su tipo, si es pasada via GET o POST automáticamente se convierte en tipo string. Por ello no podremos utilizar is_integer, por ejemplo, sino is_numeric,, que no indaga acerca del tipo de variable, sino acerca de los caracteres que la componen.

* is_array()
* is_bool()
* is_double()
* is_float()
* is_int()
* is_integer()
* is_long()
* is_null()
* is_numeric()
* is_object()
* is_real()
* is_resource()
* is_scalar()
* is_string()

valores por referencia

A partir de php 4 ademas de pasar un valor a una variable por asignación, podemos pasarselo por referencia

Para ello creamos una nueva variable que referencia ( «se convierte en un alias de» o «apunta a») la variable original. Los cambios a la nueva variable afectan a la original, y viceversa.

Para asignar por referencia, simplemente se antepone un ampersand (&) al comienzo de la variable cuyo valor se está asignando.

<?php
$a = 5;         // $a vale 5
$b = &$a;       // $b vale 5
$b = $b + 3;    // $b vale 8. $a TAMBIEN vale 8 ahora.
/* los valores serán $a = 8 y $b = 8; */
?>

Variables constantes

Son aquellas cuyo valor no va a cambiar a lo largo de la ejecución del script. Para asignarles un valor se usa la función define()

<?php
define ("AUTOR_EMAIL","blah@miemail.com");
echo AUTOR_EMAIL; // imprime blah@miemail.com
// observa que las variables constantes
// no necesitan del signo $
// Las constantes NO pueden ir entrecomilladas.
?>

Podemos utilizar la funcion defined() para chequear si una constante esta definida o no.

Por último, PHP ofrece diversas constantes predefinidas:

<?php
echo __FILE__ ."";   // nombre del archivo
echo __LINE__ ."";   // numero de linea de codigo
echo PHP_VERSION.""; // numero de version php
echo PHP_OS ."";     // sistema operativo
echo TRUE."";        // valor verdadero (1)
echo FALSE."";       // valor falso (0 o cadena vacia)
echo NULL."";        // sin valor
?>
[/sourcecode language='php']

<strong>Variables de variables</strong>

Podemos reutilizar el valor de una variable como nombre de otra variable


<?php
$var = "ciudad";   // tenemos una variable var, valor ciudad
$$var = "madrid";  // creamos una variable llamada ciudad, con
// valor madrid.
// echo $ciudad nos daría "madrid".
?>

Debo mencionar que una gran parte de este Artículo no a sido creado por mí, lo eh copiado de ignside.net. pero eh tratado de agregar en lo que eh podido ciertos detalles.

Mi segundo PHP

Ahora pondre unos detalles más sobre php, lo que hicimos en el pasado post sobre php, fue solo mostrar una cadena de texto en el navegador, contaré que no echo no es la única instrucción que permite esto, la función print tambien lo puede hacer de estas dos formas:

<?php
print "HOLA MUNDO";
print "<br/>"; // es una etiqueta html
print ("HOLA MUNDO");
?>

Que de nuevo tenemos en este código, en la segunda línea la función print se muestra como una función es decir, ponemos el nombre de la función y luego entre paréntesis lo que queremos que se imprima.

en la tercera línea hacemos un salto de linea con la etiqueta <br/> que es una etiqueta que nos permite, para mencionar algo sobre ella, funciona como la etiqueta img, al no tener contenido no es necesario hacer esto: <br></br> sino que directamente se puede invocar como lo acabamos de hacer en el ejemplo anterior (<br/>).

En la misma línea así como en html se utilizan los tags para indicar que lo que irá dentro derá un comentarero, en php si se hará un comentareo en una sola linea basta con dos slash //, si en caso contrario se quiere comentar más de una línea se utilizan los delimitadores /* aca el comentareo*/.

En la cuarta línea la función print funciona idénticamente que echo.

Este código debe mostrar en el navegador lo siguiente:

HOLA MUNDO

HOLA MUNDO

Si eliminamos la tercera linea (la que nos permite el salto de línea), el navegador debería mostrar esto:

HOLA MUNDOHOLA MUNDO

¿Pero entonces que diferencia encontramos con hecho?

echo no es una función es solo una instrucción es decir no tiene la capacidad de devolvernos un valor (esto lo comentaré más adelante), esta capacidad si la tiene print, por otro lado echo es mucho más rápido de ejecutar y además echo esta más popularizado.

Instalando Apache, PHP, MySQL, PhpMyAdmin

Lamento no poder crear este tutorial desde cero, pero ya es bien tarde y se acerca la hora de dormir, además conseguí un par de sitios web donde describen muy bien los pasos a seguir para instalar nuestro servidor web.

Ahora bien, si queremos instalarlo en windows podemos seguir este muy buen tutorial, para windows tambien contamos con programas como WAMP (windows, apache, mysql, php) que con un doble clic y unos cuantos next dejan instalado nuestro servidor web en nuestro windows.

Si lo queremos instalar en linux (cualquier distribución) este muy compelto tutorial, si lo que queremos es instalarlo especificamente en ubuntu, podemos seguir este tutorial, para quien use opensuse encontre este tutorial (es algo antiguo pero puede servir) o este otro (algo más moderno), si deseas para fedora, Gentoo, slackware, este tutorial esta más que interesante, este tema esta algo extendido, asi que si usas cualquier otra distribución con un simple buscar en google encontrarás un sin fin de respuestas.

Yo soy usuario de Ubuntu y bueno para quién le interese hace un poco de tiempo cree un script al que solo hay que darle los permisos de ejecución, y automáticamente instalara el servidor web, (solo se tiene que configurar el archivo config.ini del phpmyadmin).

Pueden descargar el Script desde aquí. (el archivo esta en formato odt, lo pueden revisar y ver que el código es diáfano, para ejecutarlo cambien la extension .odt por la extensión .sh), acá pongo el código de instalación que también srirve a modos de pasos a seguir para instalar el servidor web.

# A continuación borramos lo que exista en el terminal,
# pedimos la introducción de la contraseña del usuario root
# y luego instalamos los paquetes necesarios
clear
echo "Ingresa la contraseña del usuario root"

#instalamos apache2 php5 y mysql-server
sudo apt-get install apache2 php5 mysql-server

# Luego instalamos los paquetes adicionales
sudo aptitude install libapache2-mod-auth-mysql php5-mysql

# Ahora descargamos phpmyadmin, lo descomprimimo y lo movemos hasta la carpeta /var/www
mkdir $HOME/phpmyadmin
cd $HOME/phpmyadmin
wget http://downloads.sourceforge.net/phpmyadmin/phpMyAdmin-2.11.9-all-languages.tar.gz
tar xvzf phpMyAdmin-2.11.9-all-languages.tar.gz
cd /
sudo mv $HOME/phpmyadmin/phpMyAdmin-2.11.9-all-languages /var/www/phpMyAdmin
rm -R $HOME/phpmyadmin

#restauramos los servicios
sudo /etc/init.d/apache2 restart
sudo /etc/init.d/mysql restart
 

Todos los archivos que queremos poner en nuestro server deben estar dentro de la carpeta www (tanto en windos como en linux, la ruta de esta carpeta en linux si se instala como mencione atrás sería /var/www, en windows se encuentra dentro de la carpeta c:/), si no se ha configurado aún el puerto por donde se mostrará apache solo es necesario un htttp://localhost, par apoder ver el archivo de bienvenida de apache: It Works!, se mostrará esto si todo estuvo bien instalado y abriendo el terminal , escribiendo solo mysql ya nos debe salir algo como esto :

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 203
Server version: 5.0.67-0ubuntu6 (Ubuntu)

Type ‘help;’ or ‘\h’ for help. Type ‘\c’ to clear the buffer.

mysql>

Si tienen alguna duda, solo comenten :D.

Mi primer PHP

Aún no hemos terminado con html pero es necesario poner algo de código de servidor, php es un lenguaje de programación interpretado, diseñado originalmente para la creación de páginas web dinámicas. Es usado principalmente en interpretación del lado del servidor (server-side scripting) pero actualmente puede ser utilizado desde una interfaz de línea de comandos o en la creación de otros tipos de programas incluyendo aplicaciones con interfaz gráfica usando las bibliotecas Qt o GTK+.(esto no es muy conocido, y menos practicado, sin embargo he probado ligeramente crear una aplicación de escritorio y me eh quedado con mucha ganas de aprender más, asi qeu quizá pronto estaré conversando sobre ello).

En fin, voy a suponer que ya tenemos instalado como mínimo un servidor apache con el motor php (en el siguiente post comentaré como instalar un servidor apache con el motor de php y el gestor de base de datos mysql).

Crearemos en nuestro editor de textos o ide favorito, recomiendo aptana y/o netbeans, o gedit que también lo pueden encontrar para windows en este enlace, (ya hablaré un poco de ellos más adelante tambien).

Creemos un archivo nuevo llamado primerphp.php y peguemosle este codigo

<?php
echo "HOLA MUNDO";
?>

En la primera línea de nuestro archivo contiene esto: <?php esto es un delimitador indica donde comienza nuestro código php y en la última línea tambien vemos algo similar: ?> esto indica donde termina nuestro código php.

Nuestro código lo que hará será mostrar el mensaje HOLA MUNDO en nuestro navegador, esto gracias a la instrucción echo (toda instrucción y/o función debe acabar con un punto y coma,excepto las sentencias de control que ya veremso más adelante ), echo imprime lo que va entre comillas como si fuera código html.

¿Que quiere decir esto?

Esto quiere decir que si en vez de colocar solo HOLA MUNDO y colocamos <p>HOLA MUNDO</p> de la siguiente manera:

<?php
echo "<p>HOLA MUNDO</p>";
?>

a la hora de verlo en el navegador se mostrará aún como un simple HOLA MUNDO, pero al ver el codigo fuente a través del navegador o al descargar la página web el código html será este:

<p>HOLA MUNDO</p>

¿Por qué sucede esto?

PHP como mencionamos es un lenguaje servidor, esto quiere decir que se ejecuta del «lado» del servidor, es decir el servidor lo interpreta y le manda al cliente (navegador) el resultado en formato html, para que este lo pueda entender y así mostrarnos la página web.

Estructura de una página html

Las etiqeutas que hemos estado viendo son solo introductorias para tener una idea de lo más básico en html; ahora esas etiquetas no van sueltas, html tiene una estructura a seguir (como todo), html tiene una estructura de árbol ¿que quiere decir esto?, haciendo una analogía con nuestro cuerpo, imaginemos que tuvieramos que escribirlo en formato de etiquetas primero tendríamos una etiqueta raíz que llamaré persona, esta raíz contendrá nuestra cabeza y cuerpo, asi mismo dentro de nuestra cabeza tendríamos ojos, boca, etc y dentro de nuestro cuerpo, podríamos considerar, extremidades, tronco, etc.  estas etiquetas tendrian atributos como puede ser capacidad de vision par alos ojos, tamaño de dientes para la boca, grosor de pecho y medida de extremidades, en codigo de etiquetas quedaría algo asi:

<persona>
          <cabeza>
                    <ojos capacidaddevision="buena">Visión</ojos>
                    <boca tamanodedientes="grandes">Dientes de nuestra Boca</boca>
          </cabeza>
          <cuerpo>
<tronco grosorpecho="40cm">pecho</tronco>
                    <extremidades largo="70cm">largo de extremidades</extremidades>
          </cuerpo>
</persona>

Bien la analogía no es del todo buena porque nosotros nos dividimos en cabeza, tronco y extremidades, pero sirve :p

en Html sucede lo mismo hay que seguir una extructura, la raiz es la etiqueta <html>, esta contiene a las etiqeutas <head> y <body> en la parte de la head (cabeza del html) irán etiquetas, que sirven para definir propiedades del archivo html como ubicación de otros archivos auxiliares como css o js, mientras que en la etiqueta body se encuentr todo lo que queremos que se muestre a través del navegador, las etiquetas básicas que hemos visto deben estar entonces dentro de body (cuerpo del html), de este modo :

<html>
          <head>
                    <title>Esto se verá en la barra de Título de nuestro navegador</title>
          </head>
          <body>
                     <h2>Titulo de nuestra Página</h2>

                     <p>Este será un primer párrafo de nuestra  página</p>
                    
                     <p>Este será el segundo párrafo de nuestra página, que lo haremos mas extenso</p>
                    <a href="http://www.ubuntu.com">este será un enlace a ubuntu</a>
                    <img src="http://www.ubuntu.com/themes/ubuntu07/images/ubuntulogo.png"/> <!--aca pondremos una imágen-->
          </body>
</html>

Copiemos esto en un nuevo archivo html (archivo.html) y en nuestro navegador se debe mostrar del siguiente modo:

Titulo de nuestra Página

Este será un primer párrafo de nuestra página

Este será el segundo párrafo de nuestra página, que lo haremos mas extenso

este será un enlace a ubuntu

Ahora si podemos decir que ta tenemos una primera página html, lo nuevo aca es la etiqeuta que creo no necesita mayor explicación, otra observación es: mientras uno edita código a veces es necesario indicar algo, para ello se utiliza estos tags: , esto es propio de cada lenguaje, en html va de el modo mostrado.

Aunque claro aún faltan algunas etiqeutas y atributos muy importantes. cabe resaltar que mi manera ade trabajar co html es desde un editor de textos o desde algún ide como eclipse que me proporcione alertas, o me muestre sugerencias, no utilizo dreamweaver por considerarlo nocivo contra el conocimiento, sin embargo el que decide el modo de aprender es uno mismo. la filosofía que sigo es aprender y divertirse haciendolo.

Ultimas versiones de los navegadores

Recientemente han salido nuevas versiones de los dos navegadores que suelo usar simultaneamente, Opera (versión 6.24) y Firefox (versión 3.07), algunos se preguntarán ¿Por qué usar dos navegadores a la vez?, la verdad es que no son dos los que suelo usar en si son tres en orden de preferencia están: (Opera, Firefox, Internet Explorer 6) pero también utilizo (Safari, Crhome, Konkeror), hay dos razones principalmente.

La primera razón de esto es simple ningún navegador es perfecto, si necesito rapidez a la hora de abrir el navegador, si necesito un buen gestor para mis descargas uso Opera, sin embargo si lo que quiero es tipear en mi barra de navegación el nombre de una página o el subdominio de esta y que me de como alternativa la página que busco, además de usar un sin fin de plugins para hacer otras cosas mientras navego, sin duda firefox es es una buena elección, sin embargo si me dieran a escoger solo a uno escogería a Opera.

La segunda razón es que siendo programador de páginas web y ultimamente también diseñador, necesito probar muchas veces que vaya bien todo es decir que se vea bien en todos los navegadores posibles, como internet explorer 6 (aunque esto requiera ingresar a windows) es el más usado aún  y es el que tiene mayores problemas con los estándares web, noq euda más que seguir con él para no llegar a crear una página que se vea bien en todo sitio menos en el navegador que tiene la mayor cantidad de usuarios.

Etiquetas básicas de html – Parte III

Ahora veremos algo muy importante en cualquier documento: Los Títulos.

Al mencionar títulos, indicamos también que html seguirá una estructura es decir : primero un título, luego un párrafo, luego otro título nuevamente un parrafvo y así susecivamente

Los títulos de sección se utilizan para delimitar el comienzo de cada sección de la página. HTML permite crear secciones de hasta seis niveles de importancia. De esta forma, aunque una página puede definir cualquier número de secciones, sólo puede incluir seis niveles jerárquicos.

Las etiquetas que definen los títulos de sección son <h1>, <h2>, <h3>, <h4>, <h5> y <h6>.

¿como usamos estas etiquetas ?

Pues bien entre las etiquetas pondremos el título que queremos mostrar, (La etiqueta <h1> es la de mayor importancia y por tanto se utiliza para definir los titulares de la página. La importancia del resto de etiquetas es descendiente, de forma que la etiqueta <h6> es la que se utiliza para delimitar las secciones menos importantes de la página.)

creemos un archivo index.html y copiemos este código:

<h1>Titular de la página</h1>
Párrafo de introducción...
<h2>La primera sub-sección</h2>
Párrafo de contenido...
<h2>Otra subsección</h2>
Más párrafos de contenido...

Si tienen algún problema con los acentos ya saben a que se debe, lo que se mostrará sera esto:

Por defecto si el nivel de titular no es alterado por un archivo css (Cascading Style Sheets, ya comentaremos más adelante sobre las hojas de estilo), el siguiente código:

<h1>Titular h1</h1>
<h2>Titular h2</h2>
<h3>Titular h3</h3>
<h4>Titular h4</h4>
<h5>Titular h5</h5>
<h6>Titular h6</h6>

deberían mostrarse así en el navegador:

Como verán es algo sencillo, las etiqeutas de título no tienen atributos específicos, por lo tanto solo es necesrio declarar el incio de la etiqueta, escribir el título a mostrar y cerrar la etiqueta. 😀

Etiquetas básicas de html – Parte II

Continuando con algo de html, ahora veremos la etiqueta <img> , esta etiqueta se usa para mostrar imagenes, un dato curioso en este tipo de etiqueta es que es una etiqueta vací, es decir que no tiene contenido entre el la etiqueta de inicio y la etiqueta de cierre, por ejemplo, lo correcto en html  sería:

<img></img>

como vemos a diferencia del post anterior no es necesario poner ningún texto entre ellas, por lo tanto también es inncesario poner dos veces la etiqueta (inicio y cierre) si no habra nada entre ellas, pero para respetar los estándares y hacer que la página html sea válida lo que se hace en estos casos es abrir y cerrar la etiqueta en la misma etiqueta de esta manera :

<img />

Ahora bien, ¿como mostramos la imágen?, de un modo muy sencillo, similar a lo que hicimos con la etiqueta <a>, lo qeu haremos será indicar mediante el atributo propio de esta etiqueta src de donde vendrá la imágen, visitemos primero la página de ubuntu, ahora lo que haremos sera mostrar la imagén que tienen en la parte superior izquierda (el logo de ubuntu con la palabra ubuntu), para ello necesitamos la url de la imagen, podemos verla segun el navegador que tengamos ubicando el puntero sobre la imágen y con el clic derecho seleccionamos la opción ver imagen (firefox, en otros navegadores es similar) la dirección de la imágen es esta: http://www.ubuntu.com/themes/ubuntu07/images/ubuntulogo.png veamos como debe quedar:

<img src="http://www.ubuntu.com/themes/ubuntu07/images/ubuntulogo.png"/>

La imágen debe verse así en su documento html: