Posts Tagged ‘Html’

Mi segundo PHP

marzo 7, 2009

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.

Estructura de una página html

marzo 7, 2009

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.

Etiquetas básicas de html – Parte III

marzo 7, 2009

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:

h1

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:

h2

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

marzo 7, 2009

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: