PAGINA WEB

Una página web o página electrónica,1 es un documento o información electrónica capaz de contener texto, sonido, vídeo, programas, enlaces, imágenes, y muchas otras cosas,
adaptada para la llamada World Wide Web, y que puede ser accedida mediante un navegador. Esta información se encuentra generalmente en formato HTML o XHTML, y puede proporcionar navegación (acceso) a otras páginas web mediante enlaces de hipertexto. Las páginas web frecuentemente también incluyen otros recursos como ser hojas de estilo en cascada, guiones (scripts), imágenes digitales, entre otros. Las páginas web pueden estar almacenadas en un equipo local o un servidor web remoto. El servidor web puede restringir el acceso únicamente a redes privadas, por ejemplo, en una intranet corporativa, o puede publicar las páginas en la World Wide Web. El acceso a las páginas web es realizado mediante una transferencia desde servidores, utilizando el protocolo de transferencia de hipertexto (HTTP).

CODIGO HTML POR DEFECTO

  • Un documento HTML comienza siempre con la etiqueta <HTML>, que indica que el documento en cuestión está construido con dicho lenguaje.
  • La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la acción y </...> indica el fin de dicha acción.
  • Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y </HTML>.
  • Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el cuerpo del documento (body).
    1. La cabecera contiene básicamente información destinada al browser (o navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
    2. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.
  • Ya estamos en condiciones de componer nuestra primera página web. Basta con escribir las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión *.HTML o *.HTM:
EJEMPLO 1
<HTML>
  <HEAD>
  </HEAD>
  <BODY>
  </BODY>
</HTML>
 
  • He introducido una pequeña tabulación a la hora de escribir las etiquetas de cabecera y cuerpo, simplemente para facilitar su compresión gráfica, puesto que esta cuestión es totalmente indiferente. El resultado no variaría de haber colocado las etiquetas de cualquier otra manera. Por ejemplo:
EJEMPLO 1: Variantes de escritura
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML><HEAD></HEAD><BODY></BODY></HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
 
  • Esta primera página web está, lógicamente, vacía, pero es perfectamente operativa. Para modificarla, basta con modificar sus códigos en el editor de texto. No hace falta cerrar para ello el navegador: una vez modificado –y salvado– el fichero, basta con utilizar el comando Actualizar (o Refresh) para ver los cambios.
  • Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana correspondiente sólo aparece el nombre del navegador (con Netscape) o la trayectoria completa del archivo (con Explorer). Esto sucede porque nuestro documento no posee un título propio. Para crearlo, debemos introducir una nueva etiqueta (pareada) en la cabecera: <TITLE>. Nuestro página web podría quedar, por tanto, así:
EJEMPLO 2
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
 
  • Ya sabemos crear el esqueleto de una página web. La siguiente tarea será aprender a introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas elementales.



3. El texto básico de un documento HTML

  • El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la ventana.
  • Para dominar las cuestiones de formato (de caracteres, de párrafo, etc.) es necesario utilizar las etiquetas correspondientes.

3.1. La etiqueta básica

  • La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>.
  • <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre <FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada.
  • Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT FACE="Arial">...</FONT>.
  • Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>. Para especificar los colores, conviene saber al menos lo siguiente:
    1. Cada color posee su correspondiente código.
    2. Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata de expresar las proporciones de tres colores básicos: rojo, verde y azul.
    3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
      1. Rojo: color:#ff0000;
      2. Verde: color:#00ff00;
      3. Azul: color:#0000ff;
    4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los siguientes:
      1. Rojo: color:rgb(255,0,0);
      2. Verde: color:rgb(0,255,0);
      3. Azul: color:rgb(0,0,255);
    5. Todos los colores se expresan mediante combinaciones de estos tres colores básicos. Existen muchos programas que proporcionan los valores de todos los colores que el usuario puede componer. También en internet existen muchas páginas con los Códigos de colores.
    6. Los colores más básicos pueden especificarse sin código, simplemente escribiendo la palabra correspondiente (por supuesto en inglés). Por ejemplo: <FONT COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.
  • Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>. El valor del tamaño ("?") deseado puede suministrarse de manera absoluta (un número del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).
  • Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por ejemplo, el tipo, el tamaño y el color de los caracteres: <FONT FACE="Arial" COLOR="#0000FF" SIZE="5">...</FONT>.

Con esta etiqueta hemos visto ya la sintaxis básica de las etiquetas HTML, que podíamos formalizar así: <ETIQUETA [ATRIBUTO="valor"]>.

Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevar uno o varios atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual (="arial", ="#0000FF", etc.).

Esto será válido para todas las etiquetas HTML que veamos a partir de este momento.

  • Volvamos a nuestro documento web y practiquemos con las posibilidades de la etiqueta <FONT>. Por ejemplo:
EJEMPLO 3
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.
<FONT SIZE="1">Este texto es tamaño 1.</FONT>
<FONT SIZE="2">Este texto es tamaño 2.</FONT>
<FONT SIZE="4">Este texto es tamaño 4.</FONT>
<FONT SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>
</BODY>
</HTML>
 
  • Nuestra página web, tal y como está diseñada en el Ejemplo 3, no posee ninguna especificación de líneas. A pesar de que las etiquetas están ordenadas en varias líneas, el navegador coloca todos los caracteres seguidos (sólo tiene en cuenta un único espacio entre palabras). Para corregir este problema podemos utilizar la etiqueta <BR>, que introduce un salto de línea. Nuestro página quedaría entonces así:
EJEMPLO 4
<HTML>
<HEAD>
<TITLE>Ejemplo 4</TITLE>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo visualizará según su configuración por defecto.<BR>
<FONT SIZE="1">Este texto es tamaño 1.</FONT><BR>
<FONT SIZE="2">Este texto es tamaño 2.</FONT><BR>
<FONT SIZE="4">Este texto es tamaño 4.</FONT><BR>
<FONT SIZE="+1">Este texto es tamaño +1 (que es lo mismo que tamaño 4).</FONT><BR>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto posee varias especificaciones de formato.</FONT>
</BODY>
</HTML>
 

Hay otra cuestión importante que debe saberse sobre la etiqueta <FONT>: es la etiqueta más básica, y conviene empezar a aprender por ella, pero está en desuso y desaparecerá en las versiones futuras de HTML. En su lugar, existen otras etiquetas más potentes, que iremos viendo en su momento.

3.2. Etiquetas de formato de caracteres

  • A partir de este momento, se trata simplemente de añadir más etiquetas a nuestra aún pequeña colección, de modo que vayamos teniendo cada vez más control sobre el formato de los caracteres. La tabla siguiente muestra las más comunes:
CódigoFunción
<B>...</B>Negrita
<I>...</I>Cursiva
<U>...</U>Subrayado
<SUB>...</SUB>Subíndice
<SUP>...</SUP>  Superíndice
  • Hay que realizar algunos comentarios sobre las etiquetas precedentes:
    1. Existe otra etiqueta similar a <B>, menos utilizada porque depende de las opciones de configuración del navegador: <STRONG>...</STRONG>.
    2. Existe otra etiqueta similar a <I>, menos utilizada porque depende de las opciones de configuración del navegador: <EM>...</EM>.
    3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que éste se utiliza convencionalmente para indicar los hiperenlaces, y podría por tanto resultar confuso para el usuario.
  • Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay que tener cuidado para encajarlas correctamente. Por ejemplo:
    <FONT FACE="Courier"><B><I>...</I></B></FONT> es correcto, pero
    <FONT FACE="Courier"><B><I>...</FONT><B></I> es incorrecto.

3.3. Otras etiquetas de caracteres

  • Hay muchas otras etiquetas que afectan a los caracteres. Vamos a presentar varias más, que deben manejarse con cierta precaución:
    1. La etiqueta <PRE>...</PRE> indica que el texto afectado está preformateado, de modo que el navegador sí tiene en cuenta todos los espacios y saltos de línea definidos en la pantalla.
    2. La etiqueta <BLINK>...</BLINK> indica texto parpadeante. Sólo funciona con Netscape.
    3. La etiqueta <S>...</S> genera texto tachado.
    4. La etiqueta <TT>...</TT> genera texto similar al de una máquina de escribir (fuente courier de paso fijo).
    5. La etiqueta <BIG>...</BIG> aumenta el tamaño de letra (equivale a <FONT SIZE="+1">).
    6. La etiqueta <SMALL>...</SMALL> disminuye el tamaño de letra (equivale a <FONT SIZE="-1">).

EJERCICIO 1
Ya es hora de practicar con las herramientas que hemos presentado hasta ahora. ¿Cómo? Es muy sencillo: ¡crea una página web!
Si no se te ocurre nada, te propongo que reproduzcas esta página. Para que no tengas que teclearlo todo, aquí tienes el archivo de texto, de modo que, si quieres, no tienes más que pegarlo en tu editor y colocar las etiquetas correspondientes en los lugares adecuados.
(Por cierto: las fuentes que he utilizado son Arial y Comic Sans MS.)



4. Los párrafos de un documento HTML

En el apartado anterior hemos aprendido a controlar la apariencia de los caracteres. (Recuerda, de todas maneras, que la etiqueta <FONT> está en desuso.) Vamos ahora a estudiar las etiquetas fundamentales que controlan la organización de los párrafos en un texto más complejo.

  • Ya conocemos un tag que afecta a las líneas: <BR>. Si deseamos que una línea no se parta al llegar al final de la ventana del navegador, debemos colocar al comienzo la etiqueta <NOBR>, y el navegador colocará entonces un scroll o barra de desplazamiento horizonal.
  • Por supuesto, si queremos que haya más líneas, al final sí deberá aparecer <BR>.

4.1. Los párrafos y su alineamiento

  • La etiqueta <BR> inserta un salto de línea, pero no un salto de párrafo. En cambio, la etiqueta <P>...</P> inserta una salto de línea y una línea en blanco, por lo que, en la práctica, equivale a un nuevo párrafo.
  • Por supuesto, tanto <BR> como <P>...</P> pueden repetirse varias veces seguidas para dejar más distancia entre las líneas y los párrafos.
  • De todas maneras, sólo podemos separar los párrafos con líneas completas (una, dos, etc.), pero no podemos controlar el espacio entre los párrafos con la precisión que permite, por ejemplo, el programa Word (con las opciones de espaciado anterior y posterior).
  • Un párrafo puede alinearse introduciendo los siguientes atributos en la etiqueta habitual:
CódigoFunción
<P align="left">...</P>Párrafo alineado a la izquierda  
<P align="center">...</P>  Párrafo centrado
<P align="right">...</P>Párrafo alienado a la derecha
<P align="justify">...</P>Párrafo justificado
  • Las etiquetas anteriores permiten alinear los párrafos enteros, pero siempre dejando una línea vacía delante de cada uno de ellas. ¿Hay alguna manera de alinear independientemente líneas o grupos de líneas? Sí, con las siguientes etiquetas:
CódigoFunción
<DIV align="left">...</DIV>Línea(s) alineada(s) a la izquierda  
<DIV align="center">...</DIV>  Línea(s) centrada(s)
<DIV align="right">...</DIV>Línea(s) alineada(s) a la derecha
<DIV align="justify">...</DIV>Línea(s) alineada(s) justificadas
  • En definitiva, disponemos de varias etiquetas similares para la creación y la alineación de los párrafos, que serán más o menos apropiadas dependiendo de las ocasiones. Veamos cómo funcionan en una página web:
EJEMPLO 5
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
<P align="left">Este párrafo está alineado a la izquierda. En la práctica, equivale sencillamente a la misma etiqueta sin indicación de alineación.</P>
<P align="center">Este párrafo está centrado. Hay una línea en blanco entre este párrafo y el anterior.</P>
<P>Ahora vamos a alinear tres líneas seguidas de tres maneras diferentes, pero sin dejar líneas vacías entre ellas, por medio de otras etiquetas:</P>
<DIV align="left">alineado izquierdo alineado izquierdo alineado izquierdo alineado izquierdo</DIV>
<DIV align="center">alineado centrado alineado centrado alineado centrado alineado centrado</DIV>
<DIV align="right">alineado derecho alineado derecho alineado derecho alineado derecho </DIV>
</BODY>
</HTML>
 
  • Otra etiqueta que afecta a la alineación de los párrafos es <BLOCKQUOTE>...<BLOCKQUOTE>, que introduce una doble sangría, derecha e izquierda. Pueden colocarse varias etiquetas seguidas para acentuar la sangría, como se observa en el siguiente ejemplo:
EJEMPLO 6
<HTML>
<HEAD>
<TITLE>Ejemplo 6</TITLE>
</HEAD>
<BODY>
<P>Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal Párrafo normal.</P>
<P><BLOCKQUOTE>Párrafo con una sangría izquierda-derecha Párrafo con una sangría izquierda-derecha Párrafo con una sangría izquierda-derecha Párrafo con una sangría izquierda-derecha.</BLOCKQUOTE></P>
<P><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Párrafo con tres sangrías izquierda-derecha Párrafo con tres sangrías izquierda-derecha Párrafo con tres sangrías izquierda-derecha Párrafo con tres sangrías izquierda-derecha.</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE ></P>
</BODY>
</HTML>
 

4.2. Los títulos

  • Pueden utilizarse hasta seis tipos de títulos en un documento HTML, ordenados jerárquicamente por medio de la etiqueta <Hn>...</Hn>, donde n = 1 a 6.
  • Las etiquetas de los títulos introducen una línea superior en blanco. Como lo habitual después de un título es un nuevo párrafo (<P>), que también introduce su propia línea, el resultado final suele ser que una línea de título tiene una línea en blanco antes y otra después.
  • Las etiquetas de los títulos admiten indicaciones de alineación, de la misma manera que la etiqueta de párrafo.
  • Veamos qué aspecto tienen los títulos de un documento HTML:
EJEMPLO 7
<HTML>
<HEAD>
<TITLE>Ejemplo 7</TITLE>
</HEAD>
<BODY>
<H1>Título 1</H1>
<H2>Título 2</H2>
<H3>Título 3</H3>
<H4>Título 4</H4>
<H5>Título 5</H5>
<H6>Título 6</H6>
<H7>Título 7 (como no existe, no supone ningún cambio)</H7>
<P>Además, los títulos pueden recibir indicaciones de alineación, como en los siguientes ejemplos</P>
<H3 align="center">Título centrado</H3>
<H3 align="right">Título a la derecha</H3>
</BODY>
</HTML>
 
  • Este ejemplo permite plantear el siguiente ejercicio:
EJERCICIO 2
En el EJEMPLO 7 se observa que siempre queda una línea en blanco entre un título y el párrafo siguiente (el que comienza con "Además". ¿Cómo puede suprimirse dicha línea? Elimina, por ejemplo, la que hay entre el título 7 y el párrafo siguiente.
¿Sabes solucionarlo? ¿Te parece fácil? Eso quiere decir que has entendido estupendamente todo lo expuesto hasta el momento.
¿No lo has conseguido? No pasa nada, pero tal vez deberías repasar todo lo anterior con más detalle. En cualquier caso, aquí tienes la solución.

4.3. Las listas

  • Las listas son elementos que, como los títulos, permiten presentar niveles jerarquizados de texto.
  • Los documentos HTML permiten dos tipos de listas:
    1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>.
    2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es <OL>...</OL>.
    3. Listas de definiciones (definition list): su etiqueta principal es <DL>...</DL>
      4. .
  • Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de distinta manera según el tipo:
    1. En las listas ordenadas (<OL>...</OL>) o no ordenadas (<UL>...</UL>), cada elemento de dicha lista se marca con la etiqueta <LI>...</LI> (list item).
    2. En las listas de definición (<DL>...</DL>), se utilizan dos: cada elemento que se define se marca con <DT>...</DT> y el texto de cada definición se marca con <DD>...</DD>. Esta etiqueta se puede repetir si se necesita introducir varios elementos de definición.
  • Las listas se pueden encajar unas dentro de otras, además de con el resto de las etiquetas disponibles. Vemos algún ejemplo:
EJEMPLO 8
<HTML>
<HEAD>
<TITLE>Ejemplo 8</TITLE>
</HEAD>
<BODY>
<H3>Los meses de primavera</H3>
<UL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</UL>
<BR>
<H3>Los meses de verano</H3>
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
<BR>
<H3>Los meses del año</H3>
<UL>
<LI>Los meses de primavera
<OL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</OL>
</LI>
<LI>Los meses de verano
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
</LI>
</UL>
<BR>
<H3>Refranes de los meses</H3>
<DL>
<DT>Marzo</DT>
<DD>El sol de marzo da con el mazo.</DD>
<DT>Abril</DT>
<DD>El abril, aguas mil.</DD>
<DT>Mayo</DT>
<DD>Hasta el 40 de mayo no te quites el sayo.</DD>
</DL>
</BODY>
</HTML>
 
  • Las listas admiten varios parámetros, que varían según el tipo de lista:
    1. Las tres listas admiten el parámetro COMPACT, que hace que el navegador presente la lista de la manera más compacta posible.
    2. El parámetro TYPE funciona con las dos primeras listas. Sus valores respectivos son, lógicamente, distintos:
      • En las no numeradas, controla el tipo de viñeta: con forma de disco (<UL type="disc">, la opción por defecto), de círculo (<UL type="circle">) y de cuadrado (<UL type="square">).
      • En las numeradas, controla el tipo de numeración: con números árabes (<OL type="1">, la opción por defecto), romanos (<OL type="I">), romanos en minúsculas (<OL type="i">), letras mayúsculas (<OL type="A">) y minúsculas (<OL type="a">).
    3. La etiqueta <OL start="n"> indica el número por el que empieza la lista numerada.
    4. En una lista numerada, se puede cambiar el número de un elemento –y consiguientemente de los posteriores– con la etiqueta <LI value="n">.

4.4. Las rayas horizontales

  • Las rayas horizontales son otro de los procedimientos habituales para separar los contenidos de un documento HTML. Se introducen simplemente con la etiqueta <HR>.
  • Hay una serie de características de las rayas que pueden controlarse, como siempre, por medio de parámetros añadidos a la etiqueta básica:
    1. El tamaño: la etiqueta <HR> introduce una raya que ocupa todo el ancho de la pantalla. Pueden especificarse distintas anchuras añadiendo el valor deseado, expresado en pixeles (<HR width="n">) o en términos porcentuales (<HR width="n%">).
    2. La alineación: cuando una raya ocupa sólo una parte de la pantalla, puede especificarse su alineación por medio de las etiquetas habituales:
      <HR align="left">
      <HR align="center">
      <HR align="right">
    3. La altura: se expresa en píxeles por medio de la etiqueta <HR size="n">. Puede adoptar el valor 0 (la raya más fina).
    4. El color, por medio del párametro habitual: <HR color="?">.
    5. El sombreado: la raya posee habitualmente un pequeño efecto de sombreado, que puede eliminarse con la etiqueta <HR noshade>.
  • Como siempre, lo habitual suele ser la combinación de varios parámetros en una misma etiqueta. Por ejemplo:
    <HR width="50%" size="0" align="center">
  • No queda sino practicar con las distintas posibilidades de rayas. Por ejemplo:
EJEMPLO 9
<HTML>
<HEAD>
<TITLE>Ejemplo 9</TITLE>
</HEAD>
<BODY>
Ésta es una línea normal:
<HR>
Ésta es una línea normal, sin sombreado:
<HR noshade>
Ésta es una línea que ocupa la mitad de la pantalla (si no se establece la alineación, se coloca centrada por defecto):
<HR width="50%">
Ésta es más estrecha y mucho más gorda:
<HR width="10%" size="20">
Ésta es igual pero de color rojo:
<HR width="10%" size="20" color="#FF0000">
</BODY>
</HTML>
 



5. Los enlaces de un documento HTML

  • En los apartados anteriores hemos aprendido a manejar correctamente el elemento fundamental de todo documento: el texto. Sin embargo, hay otro elemento básico en un documento HTML, que le proporciona su mayor potencial: los hiperenlaces, que estudiaremos en este apartado.
  • Un hiperenlace es un vínculo que une un elemento del documento activo (por ejemplo, una palabra) con otro, de manera que activamos ese segundo elemento simplemente con un click del ratón en el primero.
  • La sintaxis general de la etiqueta es muy simple: <A HREF="destino">...</A>. (Los puntos suspensivos representan el elemento enlazado.)
  • Para que el destino se abra en una ventana nueva, hay que indicar el siguiente atributo: <A HREF="destino" target="_blank">...</A>
  • El destino de un hiperenlace puede ser de tres tipos:
    1. Enlace externo: otro documento HTML situado en un ordenador remoto.
    2. Enlace local: otro documento HTML situado en el mismo ordenador.
    3. Ancla: otro lugar dentro del mismo documento HTML.
  • Vamos a examinar separadamente cada uno de estos tipos.

5.1. Los enlaces externos

  • Desde cualquier punto de un documento HTML puede establecerse un enlace con cualquier recurso de Internet.
  • Como es sabido, los recursos más habituales de Internet son:
    1. La WWW, es decir, las páginas web o documentos HTML. La etiqueta correspondiente es:
      <A HREF="http://servidor/camino.../fichero">...</A>
    2. El correo electrónico. La etiqueta correspondiente es:
      <A HREF="mailto:usuario@servidor">...</A>
    3. La transferencia de ficheros (servidores FTP). La etiqueta correspondiente es:
      <A HREF="ftp://servidor/camino.../fichero">...</A>
  • Veamos algunos ejemplos:
EJEMPLO 10
<HTML>
<HEAD>
<TITLE>Ejemplo 10</TITLE>
</HEAD>
<BODY>
Vamos a enlazar las palabras "pincha aquí" con algunos destinos remotos.<BR>
1.- Con la página web de la UD:<BR>
<A HREF="http://www.deusto.es" target="_blank">pincha aquí</a><BR>
2.- Con el servidor FTP de la sede de Ginebra de la OMS:<BR>
<A HREF="ftp://ftp.who.ch/" target="_blank">pincha aquí</a><BR>
3.- Con mi correo electrónico:<BR>
<A HREF="mailto:airibar@fil.deusto.es">pincha aquí</a><BR>
</BODY>
</HTML>
 

5.2. Los enlaces locales

  • La mayor parte de las "páginas web" son, en rigor, una colección de páginas, puesto que la organización clásica de los sitios web consiste en un conjunto ordenado de documentos HTML entrelazados y residentes en un mismo ordenador.
  • Dentro de un mismo ordenador, los documentos HTML pueden residir en un mismo directorio o en varios:
    1. Cuando todos los documentos residen en el mismo directorio no hay ningún problema, y la etiqueta será, simplemente: <A HREF="fichero.htm">...</A>.
    2. Cuando los ficheros residen en diferentes directorios, hay que facilitar la dirección completa del fichero, lo que puede hacerse de manera absoluta o relativa:
      • Direccionamiento absoluto: se indica la trayectoria completa del archivo en cuestión:
        <A HREF=file:///c:/directorio/subdirectorios/fichero.htm">...</A>
      • Direccionamiento relativo: no se indican los nombres de los directorios. Por ejemplo:
        <A HREF=../../..fichero.htm">...</A>
  • Aun utilizando un direccionamiento relativo, es necesario indicar los nombres de los directorios "descendentes". Por ejemplo, en una web ordenada como en la figura siguiente, un enlace desde un documento situado en el directorio <HTML> a un recurso situado en el directorio <Imágenes> debería especificarse así:
<A HREF=../../../../Componentes/Imágenes/fichero.htm">...</A>

5.3. Las anclas

  • Especialmente cuando el documento es largo, conviene utilizar enlaces que apunten hacia otro lugar dentro del mismo documento. Estos enlaces se denominan anclas, anclajes o apuntadores.
  • El procedimiento de enlace es doble:
    1. En primer lugar, hay que establecer el punto de anclaje en el lugar del documento que vaya a ser el destino del enlace. Su etiqueta es <A NAME=nombre>...</A>.
    2. Después sólo queda enlazar los caracteres deseados con el ancla anterior. Su etiqueta es <A HREF=#nombre>...</A>.
  • Algunas observaciones sobre las anclas:
    1. El nombre del ancla es arbitrario, pero lo lógico es que guarde alguna relación con el destino, especialmente cuando hay muchas en un mismo documento.
    2. Aunque la etiqueta del ancla sea pareada, lo normal es que no incluya nada entre sus dos partes (<A NAME=nombre>...</A>), puesto que lo importante es marcar el punto de inicio del ancla, no su final.
  • Vamos a practicar estas etiquetas creando una nota a pie de página como las utilizadas en este documento, que implican un doble anclaje:
EJEMPLO 11
<HTML>
<HEAD>
<TITLE>Ejemplo 11</TITLE>
</HEAD>
<BODY>
<P>Al final de este párrafo vamos a colocar una nota a pie de página, de modo que al pinchar sobre la llamada, vamos a la nota, y al pinchar sobre el número de nota en el pie de página, volvemos a la llamada. <A NAME="llamada_1"></A><A HREF="#nota1"><SUP>1</SUP></A><BR><P>
Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla, <BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,
<HR size="0">
<A NAME="nota_1"></A><A HREF="#llamada_1"><SUP>1</SUP></A><FONT SIZE="-1">Éste es el texto de la nota. Si pinchamos sobre el número, volvemos a la llamada.</FONT>
</BODY>
</HTML>
 



PHP

PHP es un lenguaje de programación de uso general de código del lado del servidor originalmente diseñado para el desarrollo web de contenido dinámico. Fue uno de los primeros lenguajes de programación del lado del servidor que se podían incorporar directamente en el documento HTML en lugar de llamar a un archivo externo que procese los datos. El código es interpretado por un servidor web con un módulo de procesador de PHP que genera la página Web resultante. PHP ha evolucionado por lo que ahora incluye también una interfaz de línea de comandos que puede ser usada en aplicaciones gráficas independientes. Puede ser usado en la mayoría de los servidores web al igual que en casi todos los sistemas operativos y plataformas sin ningún costo.

Se considera uno de los lenguajes más flexibles, potentes y de alto rendimiento conocidos hasta el día de hoy. Lo que ha atraído el interés de múltiples sitios con gran demanda de tráfico como Facebook, para optar por PHP como tecnología de servidor.

Fue creado originalmente por Rasmus Lerdorf en 1995. Actualmente el lenguaje sigue siendo desarrollado con nuevas funciones por el grupo PHP.2 Este lenguaje forma parte del software libre publicado bajo la licencia PHP, que es incompatible con la Licencia Pública General de GNU debido a las restricciones del uso del término PHP.

Etimologia

PHP es un acrónimo recursivo que significa PHP Hypertext Pre-processor (inicialmente PHP Tools, o, Personal Home Page Tools).4 Fue creado originalmente por Rasmus Lerdorf; sin embargo la implementación principal de PHP es producida ahora por The PHP Group y sirve como el estándar de facto para PHP al no haber una especificación formal. Publicado bajo la PHP License, la Free Software Foundation considera esta licencia como software libre.

Sintaxis

Programa Hola mundo con PHP embebido en código HTML:

Sintaxis[editar]

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <title> Ejemplo básico PHP</title>
    </head>
    <body>
        <?php
            echo 'Hola mundo';
        ?>
    </body>
</html>

Caracteristica

  • Orientado al desarrollo de aplicaciones web dinámicas con acceso a información almacenada en una base de datos.

  • Es considerado un lenguaje fácil de aprender, ya que en su desarrollo se simplificaron distintas especificaciones, como es el caso de la definición de las variables primitivas, ejemplo que se hace evidente en el uso de php arrays.

  • El código fuente escrito en PHP es invisible al navegador web y al cliente, ya que es el servidor el que se encarga de ejecutar el código y enviar su resultado HTML al navegador. Esto hace que la programación en PHP sea segura y confiable.

  • Capacidad de conexión con la mayoría de los motores de base de datos que se utilizan en la actualidad, destaca su conectividad con MySQL y PostgreSQL.

  • Capacidad de expandir su potencial utilizando módulos (llamados ext's o extensiones).

  • Posee una amplia documentación en su sitio web oficial, entre la cual se destaca que todas las funciones del sistema están explicadas y ejemplificadas en un único archivo de ayuda.

  • Es libre, por lo que se presenta como una alternativa de fácil acceso para todos.

  • Permite aplicar técnicas de programación orientada a objetos. Incluso aplicaciones como Zend framework, empresa que desarrolla PHP, están totalmente desarrolladas mediante esta metodología.

  • No requiere definición de tipos de variables aunque sus variables se pueden evaluar también por el tipo que estén manejando en tiempo de ejecución.

  • Tiene manejo de excepciones (desde PHP5).

  • Si bien PHP no obliga a quien lo usa a seguir una determinada metodología a la hora de programar, aún haciéndolo, el programador puede aplicar en su trabajo cualquier técnica de programación o de desarrollo que le permita escribir código ordenado, estructurado y manejable. Un ejemplo de esto son los desarrollos que en PHP se han hecho del patrón de diseño Modelo Vista Controlador (MVC), que permiten separar el tratamiento y acceso a los datos, la lógica de control y la interfaz de usuario en tres componentes independientes.

  • Debido a su flexibilidad ha tenido una gran acogida como lenguaje base para las aplicaciones WEB de manejo de contenido, y es su uso principal.

Inconvenientes

  • Como es un lenguaje que se interpreta en ejecución, para ciertos usos puede resultar un inconveniente que el código fuente no pueda ser ocultado. La ofuscación es una técnica que puede dificultar la lectura del código pero no necesariamente impide que el código sea examinado.

  • Debido a que es un lenguaje interpretado, un script en PHP suele funcionar considerablemente más lento que su equivalente en un lenguaje de bajo nivel, sin embargo este inconveniente se puede minimizar con técnicas de caché tanto en archivos como en memoria.

  • Las variables al no ser tipificadas dificulta a los diferentes IDEs para ofrecer asistencias para el tipificado del código, aunque esto no es realmente un inconveniente del lenguaje en sí. Esto es solventado por Zend Studio añadiendo un comentario con el tipo a la declaración de la variable.


XAMPP, LAMP, WAMP, MAMP, UWAMP

XAMPP es un servidor independiente de plataforma, software libre, que consiste principalmente en la base de datos MySQL, el servidor Web Apache y los intérpretes para lenguajes de script: PHP y Perl. El nombre proviene del acrónimo de X (para cualquiera de los diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El programa está liberado bajo la licencia GNU y actúa como un servidor Web libre, fácil de usar y capaz de interpretar páginas dinámicas. Actualmente XAMPP esta disponible para Microsoft Windows, GNU/Linux, Solaris, y MacOS X. LAMP presenta una funcionalidad parecida a XAMPP, pero enfocada en Linux, y WAMP lo hace enfocado en Windows.

Principales sitios desarrollados con PHP

Se utiliza PHP en millones de sitios; entre los más destacados se encuentran Wikipedia.org, Facebook.com y Wordpress.com.

Elementos basicos del lenguaje PHP

ELEMENTOS BASICOS DEL LENGUAJE PHP

TIPOS DE DATOS

Como todo lenguaje de programación, PHP puede trabajar con una serie de tipos de datos básicos. En concreto los tipos de datos admitidos son:

– Números enteros: los enteros pueden ser dados tanto en base decimal como en base octal o hexadecimal ( un 0 inicial indica que el valor esta representado en octal, un 0x indica que es hexadecimal.
– Ejemplos de números en base 10 : 45 -142 783
– Ejemplos de numero en octal: 0123 (equivale a 83)
– Ejemplos de números en hexadecimal: 0x12 (equivale a 18)

– Números reales: Los números reales se pueden dar en dos formatos; como parte entera y parte decimal, usando el punto como separador, o en notación científica.
Ejemplos: 14.67 -76.0023 1.4e3 -78.5e-4

– Cadenas de Caracteres: Las cadenas de caracteres pueden ser dadas en dos formatos usando comillas dobles o usando comillas simples. El uso de una u otra forma de delimitación afecta a la forma en la que se tratan las posibles variables que puedan haber dentro de la propia cadena.
Ejemplo: “Casablanca”, ‘cantando bajo la lluvia’

– Arrays o Matrices: Constituyen colecciones de datos que se referencian bajo un mismo nombre común. Como se verá al capítulo dedicado a estas estructuras de datos, PHP admite la posibilidad de construir dos tipos de arrays: arrays asociativos e indexados.

– Objetos: finalmente PHP admite también la posibilidad de crear objetos y realizar acción con ellos. Mediante el uso de objetos se puede entender como una misma entidad los datos y las acciones que se realizan con ellos. Esta es la base de la programación orientada a objetos.

VARIABLES

Algunas de las peculiaridades de las variables en PHP son:

– No es necesario declarar explícitamente, sino que basta con utilizarlas cuando se necesite.

– En principio las variables no tienen un tipo predefinido, puede asignarse cualquier tipo de valor.

– La asignación de valores a las variables se hace con el singo “=”.

– Los nombres de las variables en PHP siempre comienzan con el signo “$”.

– Se pueden usar nombres de variables de cualquier longitud, formados por letras, digitos y carácter de subrayado, pero nunca comenzando por un digito. Entre las letras que pueden utilizarse se encuentran los caracteres cuyo código ASCII se encuentran entre 127 y 255 por lo que se pueden utilizar letras acentuadas o ñ en los nombres de variables.

– En los nombres de variables si se distingue el uso de mayúsculas y minusculas, de manera que $area y $AREA serian variables diferentes.

– Una variable se puede utilizar asignándole a la lo largo del tiempo datos incluso de distinto tipo.

Ejemplo de nombres de variables validas

$titulo $fecha_nacimiento $año $precio

En cambio no serian validos los siguientes:

$dir-pelicula $4fila genero $dto%

Ejemplo:


<html>

<head>

<title>Variables en PHP </title>

</head>

<body>

<?php

$titulo="Buscando a Nemo";

$sala=2;

echo "En la sala $sala se proyectará la pelicula $titulo";

?>

</body>

</html>

En este caso, a la primera variable se le asigna una cadena de caracteres y a la segunda un número entero. Las dos variables se utilizan dentro de la cadena a imprimir, cuando dicha cadena está delimitada por comillas dobles como en este caso, la variables que se encuentran en su interior serán sustituidas por sus valores.

Ejemplo:


<html>

<head>

<title>Variables en PHP</title>

</head>

<body>

<?php

$x="Importe: ";

echo $x;

$x=5;

echo $x . " (precio normal) "; (el . sirve para concatenar cadenas)

//también     echo “$x (precio normal) ";

$x = $x * 0.85;

echo $x . " (precio reducido) ";

?>

</body>

</html>

Como puede observarse, en este programa se ha utilizado una única variable $x a la que inicialmente se le asigno una cadena de caracteres, después se le asigno un numero entero y finalmente, el resultado de una expresión que devuelve un numero real.

En este caso se ha utilizado el operador punto para realizar concatenaciones entre cadenas de caracteres y variables. Esto es una alternativa a la inclusión de las variables directamente dentro de las cadenas.

Ejemplo:


<html>

<head>

<title>Variables en PHP</title>

</head>

<body>

<?php

$a="10 euros";

$b= 2.25;

$c= $a - $b;

echo "Valor de c = $c<br>";

$d = (integer)$c;

echo "Valor de d = $d<br>";

$e = $d/2;

echo "Valor de e = $e<br>";

?>

</body>

</html>

La conversión de tipo explicita se puede realizar mediante el operador cast: (tipo) expresión;

O mediante la función settype();

$telef= (string) 949567894;

$x= (integer) 5.97;

$y=12.5;

settype($y,”integer”);

settype($y,”float”);

 

AMBITO DE LAS VARIABLES

El ámbito de las variables determina desde que lugares la variable es visible y, por tanto, puede ser utilizada.

Las variables por defecto tienen un ámbito global que abarcaría el documento completo en el que son definidas, a no ser que sean definidas dentro de una función, en cuyo caso solo pueden ser utilizadas dentro de la propia función (ámbito local)

Esto significa que una variable definida en un script del documento fuera de cualquier función, puede ser utilizada en cualquier otro lugar de ese script o incluso en otros posibles scripts que se encuentren en el mismo documento.


<html>

<head>

<title>Ambito de las Variables en PHP</title>

</head>

<body>

<h1>Ambito de las variables </h1>

<hr>

<?php

$fila=12;

$num=6;

?>

luego de haber declarado en un script<br>

las variables pueden ser usadas en otro script<br>

<?php

echo "fila = $fila<br>";

echo "numero = $num<br>";

?>

</body>

</html>

Una variable global puede ser utilizada dentro de cualquier función, pero para hacer referencia a ella debe declararse dentro de la función con la palabra global delante de su nombre.

Ejemplo:


$precio = 4.5;

function calcular_importe($num_entradas){

global $precio;

$i = $precio * $num_entradas;

return $i;

}

En este caso la variable $precio está definida fuera de la función y es utilizada dentro de la función calcular_importe(). Por otro lado, la variable $i está definida dentro de la función y no puede ser utilizada fuera de ella.

Funciones usadas con variables

isset() : Permite averiguar si una variable ha sido definida. Esta función es especialmente útil cuando se quiere comprobar si se han recibido los valores correspondientes a todos los campos de un formulario.

unset(): Permite eliminar una variable, no solo borra el contenido de la variable sino que también libera el espacio de memoria reservado para ella. Cualquier intento posterior de acceso a esa variable generaría un error.

gettype(): Devuelve el tipo de variable.

is_array(): determina si la variable contiene un array.

is_float(): Determina si la variable contiene un numero de coma flotante.

is_int(): Determina si la variable contiene un numero entero.

is_object(): Determina si la variable hace referencia a un objeto.

is_string(): Determina si la variable contiene una cadena de caracteres.

CONSTANTES

Una constante es un valor que permanece inalterable a lo largo de la ejecución del script y a la que se le asigna un identificador. Solo puede definirse constantes con valores escalares (números o cadenas de caracteres). Por ejemplo no podría definirse una constante cuya valor fuese un array.

La definición de constantes de realiza con la función define(), y una vez definidas su valor no puede cambiarse. En cuanto a los identificadores de las constantes, estos siguen las mismas reglas que los identificadores de las variables salvo que no comienzan con el símbolo $. Aunque no es una regla obligatoria por convenio se suele utilizar identificadores con letras mayúsculas para las constantes.

Otra diferencia con las variables está en la ausencia de cualquier restricción de ámbito en las constantes. Una constante definida en un documento será accesible desde cualquier punto de cualquier script que esté en el mismo documento.

Ejemplo:


<html>

<head>

<title>Constantes en PHP</title>

</head>

<body>

<h1>Constantes en php</h1>

<hr>

<?php

define("NOMBRE","Juan");

define("EDAD",19);

define("PESO",72.85);

echo "constantes definidas <br>";

echo "nombre : ". NOMBRE . "<BR>";

echo "edad : ". EDAD . "<BR>";

echo "peso : ". PESO . "<BR>";

?>

</body>

</html>

El uso de constantes puede resultar especialmente adecuado para definir determinados parámetros del programa que no se espera que cambien.

 

CADENAS DE CARACTERES Y VARIABLES

Las cadenas de caracteres constituyen uno de los tipos de datos básicos del lenguaje PHP. En su definición se pueden utilizar como delimitadores tanto las comillas simples como las dobles, lo que no es posible combinar ambos tipos de delimitadores, por ejemplo abriendo la cadena con comillas dobles y cerrándola con comillas simples.

La inclusión de determinados caracteres en las cadenas exige la utilización de las denominadas secuencias de escape. Entre estos caracteres especiales están las comillas, el signo dólar, la barra invertida y los caracteres de tabulación y retorno de carro. En la siguiente tabla se muestran algunas de estas secuencias de escape.

Secuencia de Escape Significado
n Nueva línea
r Retorno de Carro
t Tabulador
\ Barra invertida
’ Comillas simples
” Comillas dobles
xNum Carácter cuyo código ASCII en hexadecimal es Num
Num Carácter cuyo código ASCII en octal es Num

Ejemplo:


<html>

<head>

<title>Cadenas de caracters en PHP</title>

</head>

<body>

<h1>Cadenas de caracteres en php</h1>

<hr>

<?php

echo "Pagina creada por :n "cinemas" t xA9 2004";

?>

</body>

</html>

En la cadena anterior se utilizan dos secuencias de escape que no tienen reflejo en la pagina que sería visualizada por el navegador del cliente, pero si en el código fuente HTML: el carácter de nueva línea y el tabulador se incluirían en el código fuente HTML, pero, como todos los espacios extra, serian ignorados por el navegador.

Las otras secuencias de escape que han sido utilizadas en el ejemplo son las que permiten incluir comillas en la propia cadena y que generan el signo copyright (correspondiente al carácter de código ASCII 169 o A9 en hexadecimal).

La diferencia entre el uso de comillas dobles o simples como delimitadores de las cadenas de caracteres está en la forma en la que se tratan los posibles identificadores de variables que aparezcan dentro de la cadena:

– Con las comillas dobles, las variables dentro de la cadena se expanden, es decir, se sustituyen por su valor.

– Con las comillas simples las variables no se expanden y por tanto en la propia cadena aparecerán sus identificadores como cualquier otro carácter de la misma. Además de eso, en este caso las únicas secuencias de escape reconocidas son \ y ’.

Ejemplo:


<html>

<head>

<title>Cadenas de caracters en PHP</title>

</head>

<body>

<h1>Comillas dobles en php</h1>

<hr>

<?php

$titulo="Todo sobre mi madre";

$director="Pedro Almodovar";

$año=1999;

print "Sesion Especial : "$titulo" de $director ($año)";

?>

</body>

</html>

Observar como al utilizar las comillas dobles, los nombres de variables que aparecen dentro de la cadena son sustituidos por sus valores. Esta característica de PHP es especialmente útil y evita tener que recurrir a engorrosas operaciones de concatenación de cadenas con variables.

En cambio la sentencia

print ‘Sesion Especial : ”$titulo” de $director ($año)’;

 

Escribiría el siguiente mensaje

Sesion Especial: ”$titulo”de $director ($año)

En este caso se observa como las secuencias de escape no son reconocidas y se escriben los nombres de las variables dentro de la cadena y no sus valores.

Operador de Asignación

En diversos ejemplos previos ya se ha utilizado el operador de asignación para dar valores a las variables, este operador se representa mediante el signo “=”. Su sentido es el evidente; la variable de la izquierda del operador tomará el valor resultado de la expresión que se encuentra a la derecha.

$variable = valor o expresión;

También se puede asignar varias asignaciones en una sola sentencia.

$a = $b = $c =1;

Operadores Aritméticos

Los operadores aritméticos básicos son los habituales de cualquier lenguaje de programación

+ Suma

– Resta

* Multiplicación

/ División

% Modulo: Residuo de la división de dos números enteros.

 

Además de los operadores anteriores se dispone de los operadores de incremento y decremento que existen también en lenguajes C o C++

 

++$x Incrementa una unidad el valor de $x

$x++ Incrementa una unidad el valor de $x, pero después de evaluar el resto de la expresión.

–$x Disminuye una unidad el valor de $x

$x– Disminuye una unidad el valor de $x, pero después de evaluar el resto de la expresión


DESCARGA
VIDEOS TUTORIALES
RADIO TOP LATINO
FELIZ NAVIDAD

CALENDARIO



FELIZ NAVIDAD
Comenta

Designed by Cristian Rafael Chaparin leon.