Texto Digital

Tecnología Web I 2013
TECNOLOGIA WEB
I
1
PRESENTACION
El curso de Tecnología Web I es un curso orientado al conocimiento

de implementación de sitios web usando software libre,
especialmente en el uso de la tecnología LAMP (Linux, Apache, Mysql,
PHP), configurando nuestro servidor web Apache y haciendo uso del
lenguaje PHP en el diseño de las aplicaciones. Se establecerá la
conexión con una base de datos con mysql. El curso se inicia teniendo
un conocimiento claro de la tecnología LAMP, conociendo el manejo y
uso de HTML, diseñando objetos ventanas a partir de los objetos de
control de datos básicos. Inmediatamente HTML5, javascript y css,
luego las pautas iníciales para desarrollar aplicaciones con base de
datos mysql, haciendo un estudio del servidor web Apache.
La importancia de éste curso es poder dar soluciones web a personas

que desempeñan labores en distintas organizaciones, construyendo
proyectos web acordes a sus procesos de trabajo o innovando nuevos
procesos, lo que traerá beneficios tangibles e intangibles. En la
actualidad no se puede aceptar una organización sin el uso de un
sistema de información web. Les invito a participar en las diferentes
actividades a desarrollar en el curso.
2
Descripción Pág.
Glosario de términos 3
Caso problema 4
I UNIDAD
Que es HTML 6
HTML4 7
Imágenes 19
Formularios 21
Cuestionario de la I-Unidad 34
II UNIDAD
Hojas de estilo 37
Clases 38
Los Scripts 43
Placeholder 53
Bootstrap 54
Cuestionario de la II Unidad 57
III UNIDAD
Que es PHP 59
Archivo de configuración de php 61
Tipos de variables 64
Estructuras repetitivas 68
Cuestionario III Unidad 71
Referencias bibliográficas 72
3
Glosario de términos:
Administrador de Mambo/Joomla (Administrator): El administrador de

Mambo/Joomla es una aplicación para administrar tu sitio web de Mambo/Joomla
directamente en el servidor. A veces también es conocido como 'el backend', 'sección
del admin', 'sección de la administración', o también el panel de control'.
Archivo (Archive): los ítems de contenido pueden ser archivados y manipulados

desde el administrador. El módulo del archivo provee un método para mostrar estos
ítems de contenido en el sitio Web.
Base de datos Una base de datos es un conjunto de información organizada.

Contiene una colección de los registros que usted puede buscar, clasificar y analizar
rápidamente
Categoría (category): Una categoría es un nombre genérico para un conjunto de

items que se relacionan de una cierta manera
Content Management System (CMS) o Sistema Gestor de Contenidos: CMS es un

software para el manejo de contenidos de websites directamente desde el servidor.
Espacio de trabajo (workspace): El espacio de trabajo es la sección de la sección

del administrador de Mambo/Joomla donde se realiza la práctica de la configuración y
publicación del contenido. El espacio de trabajo se actualiza dinámicamente mientras
usted selecciona las herramientas y las opciones del menú. El espacio de trabajo
puede incluir: Editor HTML, gestor de artículos y links y varias otras características
Mambots (o Mosbot): Un Mambot es una función que intercepta el contenido antes

de que sea exhibido, y lo manipula de una cierta manera (a modo de un lenguaje tipo
"macro"), generalmente agregando una nueva aplicación o funcionalidad.
Mambo/Joomla proporciona un número de Mambots en la distribución del nucleo
(Core). Ejemplo de mambot que produce una división del ítem de contenido en varias
páginas: {mospagebreak}
4
Caso Problema:
Lucia Jiménez, es estudiante del V ciclo de la escuela de Ingeniería de
Sistemas de la Uladech - Católica. Actualmente la Superintendencia Nacional de
Registros Públicos (SUNARP), ubicada en Av. José Gálvez 125-Chimbote, ha
presentado una convocatoria para cubrir una plaza para prácticas Pre-Profesionales
en el área de sistemas. Lucia, sin dudarlo, se presenta al examen de evaluación
(conocimientos, currículo vitae y entrevistas), finalmente, Lucia es seleccionada
después de un riguroso proceso de contratación para desempeñarse como diseñadora
del portal web de la institución en mención.
Lucia, en su primer día trabajo conoce a sus compañeros y a su jefe inmediato
(Juan Carlos), en su primera conversación con su Jefe aprovecha para conocer el
sistema de trabajo, la metodología, técnicas y herramientas de diseño que viene
utilizando el equipo, y se da cuenta que las herramientas que ella conoce es distinta
a la de sus nuevos compañeros, por lo tanto ella se siente en cierta manera en una
desventaja técnica, Lucia apenas tiene nociones de diseño web, mientras que el
equipo de Juan Carlos trabaja usando frameworks para el diseño, utilizan
herramientas como HTML, JavaScript, CSS, PHP, entre otras herramientas.
Finalmente, Juan Carlos se da cuenta que a Lucia hay que capacitarle para
que se nivele con los demás compareceros, le brinda un tiempo de 30 días a Lucia
para que se adapte a su nuevo sistema de trabajo y aprenda las herramientas y al
mismo tiempo le asigna una tarea que consiste en diseñar un portal web usando el
bootstrap de twitter, y a la vez que el portal permita enviar correos a sus
colaboradores, para ello Lucia deberá aprender HTML, JS, CSS y PHP, en donde
pondrá a prueba su conocimiento, dicha aplicación debe ser entregada en un mes
como plazo máximo, y le solicita cuanto antes envié un cronograma de planificación de
las actividades/acciones que debe de llevar a cabo para cumplir con éxito lo solicitado.
5
I
UNIDAD
6
Qué es HTML?
HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.
Antes de entrar de lleno en materia un poquito de historia, nunca viene mal conocer el
material de trabajo a fondo. El HTML o lenguaje de marcas de hipertexto es un
derivado de un lenguaje usado para describir documentos, el SGML. ¿Y esto que
significa? Pues muy sencillo: la estructura de las páginas web se describe en la propia
página mediante una serie de etiquetas que le dicen al navegador como debe mostrar
el documento, o sea, la página web: cuando debe cambiar de párrafo, cuando debe
mostrar el texto en negrita o en color, cuando mostrar una imagen, cuando un enlace a
otro documento, etc. Y esto se lo dice al navegador mediante unas marcas o etiquetas
en el documento. El HTML es el lenguaje que explica qué etiquetas se pueden usar en
una página y como se usan.
Como ves todo va mezclado: información y formato, algo que ha comenzado a

cambiar con la aparición de los estilos CSS, un interesante intento de separar la
información del formato de presentación.
Los inicios: HTML 2.0
Cuando internet salió del ámbito universitario y se convirtió en una herramienta de

dominio público la versión de HTML existente era la 2.0, algo limitada pero que
cualquier navegador va a ser capaz de interpretar.
A medida que la red se extendía, los documentos que circulaban por ella se hicieron
más complejos y completos, la versión 2.0 pronto se mostró demasiado limitada para
cumplir con su cometido: mostrar las páginas web en los terminales de los usuarios.
Así que los exploradores comenzaron a incluir etiquetas extras no contempladas en el
estándard. Por entonces el IETF (Intenert Enginierign Task Force) era el encargado de
normalizar todo lo relativo a la recien nacida red de redes y elaboró la versión 3.0,
versión que pretendía incorporar las nuevas etiquetas y las que estuvieran por llegar.
Este standard no terminó de cumplir lo esperado, además en esas fechas la sección

de standarización de HTML de este comité cerraba sus puertas, por lo que un grupo
de empresas, entre las que estaban Netscape, Microsoft, IBM y Sun, crearon un nuevo
comité para estandarizar internet, era el W3C, organismo que aún hoy dicta los
estándares no solo para HTML, sino también para las hojas de estilo CSS y otras
herramientas de la red. Su primer trabajo consistió en mejorar la versión 3.0 de HTML,
lo que llevó al HTML 3.2, que incluía muchas de las nuevas etiquetas que los
7
principales navegadores de la época, osea, Netscape y Explorer, ya estaban

utilizando.
HTML 4.0
El HTML 3.2 era una solución temporal que se aprobó en enero de 1997, momento en
el que el W3C comenzaba a eloborar un nuevo estandard con reformas profundas, era
la versión 4.0. En julio de 1997 se presenta el borrador de este nuevo estándar que
unifica el manejo de los marcos (frames e iframes), las hojas de estilo y los scripts. El
17 de diciembre de 1997 dicho borrador corregido fue finalmente aprobado como
HTML 4.01, y es el que aún hoy día viene usándose para la creación de las páginas
web.
Estructura interna de una página HTML.
Las instrucciones HTML están encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalización.

Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla
(dentro del navegador).
La estructura básica de una página HTML es:
<html>
<head>
</head>
<body>
Cuerpo de la página.
</body>
</html>
Una página HTML es un archivo que generalmente tiene como extensión los
caracteres html. Por ejemplo podemos llamar a nuestra primer página con el nombre:
pagina1.html
Durante este curso no necesitará utilizar otra herramienta más que este sitio. Veremos
que contamos con una ventana donde tipeará la página y en otra verá los resultados
que genera el navegador. No significa que no pueda hacerse una copia de los
ejercicios que desarrolla y almacenarlos en su computadora.
8
Estos son los elementos básicos que toda página HTML debe llevar.
Si observamos toda página comienza con la marca:<html> y finaliza con la

marca:</html>
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el
caracter /
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head> </head>
Y el cuerpo de la página:
<body> Cuerpo de la página. </body>
Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal
cual lo hayamos escrito.
Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y

minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que
dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en
una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que
modificarla en algún momento).
Ahora puede ir a la sección de problema resuelto y ver el ejemplo ejecutándose en el

navegador. Podrá ver la pantalla dividida en tres partes: primero se enuncia el
problema, la segunda parte es el editor donde tipeamos la solución al problema (en
este caso ya está resuelto por lo que aparece automáticamente) y la última sección de
la pantalla muestra la página ejecutándose en el navegador.
Por último deberá resolver un problema, es decir confeccionar una página HTML.
Recomiendo tipear las marcas HTML para aprenderlas de memoria. No es
conveniente copiar y pegar. Cuando recuerde todas las marcas, podrá copiar y pegar
trozos de páginas HTML para agilizar el desarrollo.
Salto de Linea<br>
Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no

importa si cuando tipeamos la página disponemos cada palabra en una línea distinta
(es decir un navegador no tiene en cuenta la tecla ENTER).
Para indicarle al navegador que queremos que continúe en la próxima línea debemos
hacerlo con el elemento HTML <br>.
9
Cuando aparece la marca <br> el navegador continua con el texto en la línea

siguiente. Es uno de los pocos elementos HTML que no tiene marca de cerrado como
habíamos visto hasta ahora.
Implementemos una página que muestre los nombres de distintos lenguajes de

programación uno por línea:
<html>
<head>
</head>
<body>
PHP<br>
JavaScript<br>
Java<br>
C<br>
C++
</body>
</html>
Como vemos sólo hemos agregado la marca <br> cada vez que queremos comenzar
una línea. Tengamos en cuenta que es indistinto si disponemos la marca en la misma
línea o en la siguiente:
PHP<br>
es lo mismo:
PHP
<br>
Párrafo<p>
Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo

lo que encerremos entre las marcas <p> y </p> aparecerá separado por un espacio
con respecto al próximo párrafo.
Dentro de un párrafo puede haber saltos de línea <br>. Veamos con un ejemplo como
disponer dos párrafos:
10
<html>
<head>
</head>
<body>
<p>
SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje

de programacion para trabajar con base de datos relacionales como MySQL, Oracle,
etc.<br>
MySQL es un interpretador de SQL, es un servidor de base de datos.<br>
MySQL permite crear base de datos y tablas, insertar datos, modificarlos, eliminarlos,
ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo:

administrar bases de datos.</p>
<p>
Este tutorial tiene por objetivo acercar los conceptos iniciales para
introducirse en el mundo de las bases de datos. </p>
</body>
</html>
Tenemos en esta página HTML dos párrafos, cuando el navegador interpreta esta
página, separa los contenidos de los dos párrafos con un espacio horizontal. Además
el primer párrafo contiene varios saltos de línea. Normalmente uno agrupa en párrafos
para dar más sentido a nuestro escrito.
Cuando modificamos la ventana del navegador los párrafos se acomodan
automáticamente de acuerdo al ancho de la ventana.
11
Enlaces
Las páginas web no son más que un caso particular de documentos de hipertexto, es
decir, documentos cuyo contenido no es solo el texto simple que podemos leer sino
también el contenido de otras fuentes a las que accedemos desde el documento. En el
caso de las páginas web estas otras fuentes pueden estar situadas en cualquier parte
de la red, y a ellos se accede mediante los enlaces o links: unos elementos
interactivos del documento que aparentemente son solo eso una palabra o un gráfico
que habitualmente destacan por su color o su forma. Es prácticamente imposible que
una página web no posea uno de estos enlaces.
Los enlaces que nos encontramos en cualquier página pueden ser de dos tipos:
internos a la propia página o externos a otra página. La forma de construir unos y otros
es muy similar como verás a continuación.
La etiqueta <A>
La etiqueta <A></A> nos sirve para delimitar la zona de la página que constituye el
enlace. Lo que esté encerrado en esta etiqueta será mostrado por el navegador de
forma resaltada, bien sea por el color si es texto o por un borde si es una imagen (a
menos que modifiquemos el formato), y si pulsamos con el cursor del ratón sobre esa
zona el navegador se dirigirá al lugar apuntado por ese enlace. El formato completo de
esta etiqueta es el que sigue:
<A href="dirección de destino" target="destino">Pulsar para saltar</A>
La dirección de destino será la página web especificada mediante una URL, en

formato absoluto o relativo. En ambos casos el destino puede incluso ser un elemento
concreto dentro de la página. En este caso se ha usado un texto pero igualmente
podríamos colocar una imagen.
El atributo target es una manera de decirle al navegador en que ventana debe abrir
esa nueva página. Por ahora veremos dos de sus valores posibles:
_blank Muestra la nueva página en una ventana nueva y sin nombre del navegador.
_self Muestra la nueva página en el marco donde está declarado el enlace. Este es el
destino por defecto de cualqueir enlace dentro de una página
Las URLs
12
Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro

números entre 0 y 255, algo así como 84.234.12.122, cualquier sitio de internetestá
identificado por esta dirección. Pero como quiera que recordar esos números no es
nada fácil existen unos servidores de nombre que transforman esas direcciones en
nombres más humanos como www.espaciolatino.com. A estas direcciones se les
llama Universal Resource Locator, o URL, es la forma de localizar cualquier página en
internet. En general tiene el siguiente formato:
protocolo://máquina:puerto/ruta/fichero@usuario
donde protocolo puede ser uno de los siguientes:
http
Es el protocolo para la transmisión de documentos HTML, es decir, el que

habitualmente usamos para ver las páginas en nuestro navegador.
https
Es similar al anterior pero con la particularidad de que la información viaja

codificada mediante técnicas de encriptación.
ftp
Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite

intercambiar ficheros con sitios en los que se ejecuten servidores ftp. Los
navegadores actuales permiten acceder a estos servidores FTP, pero lo más
normal es usasr unos programas al efecto denominados clientes de FTP.
mailto
Otro protocolo para la transmisión de datos, pero en este caso a través de

servidores de correo.
news
Mediante este protocolo accedemos a los denominados grupos de noticias,

listas de distribución de mensajes relativos a temas concretos. Habitualmente
se accede a estos servidores mediante el cliente de correo.
telnet
Es un terminal de acceso remoto en modo texto. Es un sistema bastante

inseguro por lo que no es habitual en servidores donde la seguridad esté bien
pensada.
13
Lo más normal en nuestras páginas será acceder a elementos de otros páginas y por
tanto lo habitual será usar URL del estilo http://servidor.dom/página.htm o similar.
En un enlace podremos usar la URL como hemos escrito más arriba, URL absoluta,
pero también podremos usar formatos como /pagina.htm, parece que faltara la primera
parte de la dirección ¿verdad? Pues no, en estos casos el navegador completa esa
parte con la correspondiente de la página en la que esté el enlace, son las URL
relativas. Por ejemplo si miras la URL de esta página verás que es
http://www.uladech.edu.pe
Pues bien si en esta página colocara un enlace en la forma
<A href="tema3.htm">Tema 3</A>
Esta dirección realmente apuntaría a
http://www.uladech.edu.pe
Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la

raiz del sitio. Así este enlace
<A href="/index.htm">Portada</A>
Estaría apuntando a http://www.uladech.edu.pe
Anclas
Como dijimos, es posible acceder a una posición dentro del documento HTML. Para
ello lo primero que tenemos que hacer es colocar marcas de destino en el documento
al que queremos acceder:
<A NAME="ancla">
A estos elementos se les llama anclas. Su uso es muy simple: en una etiqueta de
enlace colocamos el símbolo # seguido del nombre del ancla de esta manera:
<A href="#ancla">Ancla en esta página</A>
Al pulsar sobre este enlace se mostrará en la ventana la parte de la página actual que
contiene el ancla. Si queremos acceder a un ancla en otra página basta indicarlo al
final de su URL. Como en este ejemplo:
14
<A href="enlaces.html#ancla">Ancla en la página enlaces.html</A>
Tipos de Letra:
Formateo de caracteres
Cuando hablamos del formato en un tema anterior te adelantábamos que podrías dar
formato al texto a nivel de carácter, y que la cosa no se iba a quedar solo en poner
subrayados o negritas y cursivas. HTML nos permite un gran control sobre el formato
del texto mediante la etiqueta <FONT>.
El color
Podemos cambiar el color de cualquier carácter mediant el uso del

parámetro COLOR. La manera de especificarle el color es común a todas las etiquetas
HTML: o bien indicando el nombre, si es un color normal, o bien especificando los
componentes de rojo, verde y azul (código RGB) del mismo. Los colores reconocidos
son los siguientes:
<FONT color="blue">Soy azul como el mar</FONT>
El modo de indicar el color RGB es el mediante los componentes RGB para lo que se
usa un código de seis dígitos hexadecimales: 00 a FF. Por ejemplo:
<FONT COLOR="#FF0000">Código para rojo es #FF0000D</FONT>
Código para rojo es #FF0000
<FONT COLOR="#00FF00">Código para verde es #00FF00</FONT>
Código para verde es #00FF00
<FONT COLOR="#0000FF">Código para Azul es #0000FF</FONT>
Código para azul es #0000FF
<FONT COLOR="#0000FF">Y ahora mezclemos colores con #10A2FF</FONT>
Y ahora mezclemos colores con #10A2FF
Tamaño del texto
El parámetro utilizado para indicar el tamaño es SIZE. Puede utilizarse para indicar
tamaños absolutos:
15
SIZE=1 SIZE=2 SIZE=3 SIZE=4
SIZE=5 SIZE=6
SIZE=7
El tamaño por defecto es 3. También se puede utilizar los modificadores + y - para
indicar un incremento (o decremento) relativo del tamaño del tipo de letra. Así, por
ejemplo, si indicamos que queremos un tamaño de -2 estaremos pidiendo al
navegador que nos muestre el tipo de letra dos veces más pequeño.
<FONT SIZE=2><font size="2">Tamaño 2</font><FONT SIZE="+3">
<font size="2"><font size="+3">Tamaño 6</font></font></FONT></FONT>
Tipo de letra
Por último, podemos especificar el nombre del tipo de letra que queremos utilizar
gracias al parámetro FACE. Pero ojo esto no es realmente muy utilizable. El
navegador usará el tipo de letra indicado en este atributo si tiene esa fuente instalada.
Si sales de la Times New Roman, Arial, Helvética, Verdana o Courier corres el riesgo
de que el usuario no llegue a ver la página como tu la has diseñado, sino de una
manera que puede llegar a ser desastrosa para el diseño. Si el navegador no
encuentra ninguno de las fuentes indicada en este parámetro utilizará la fuente por
defecto:
<FONT FACE="Helvetica,Arial,Times">
<font face="Helvetica,Arial,Times"> No sé cómo voy a salir exactamente</font>

</FONT>
Listas
 El formato listas
 Listas desordenadas
 Listas ordenadas
 Listas de definiciones
El formato listas
16
El lenguaje HTML nos permite crear listas en las páginas web de una manera casi tan
simple y efectiva como en un procesador de textos, para ello utiliza las etiquetas de
listas, de las que existen varios tipos. Todas ellas se pueden anidar (meter unas dentro
de otras) formando árboles más o menos complejos. Todos los tipos siguen el mismo
formato:
<tipo_lista>
<LI>Primer elemento
<LI>Segundo elemento
</tipo_lista>
tipo_lista puede ser una de las siguientes: UL, OL, DL.
Listas desordenadas
La etiqueta <UL> significa unordered list, lista desordenada, y se corresponde con las
viñetas en los procesadores de texto: son listas donde cada elemento está precedido
de un símbolo como un putno o un disco. EL formato es el qeu sigue:
<UL>
<LI>Juan Pedro
<LI>Luisa
</UL>
se verá como
 Juan Pedro
 Luisa
A partir del HTML 3.2 la etiqueta <UL> admite estos parámetros:
Parámetro Significado Resultado
Indica al navegador que debe

 Primer elemento
COMPACT representar la lista de la manera más
 Segundo elemento
compacta posible.
TYPE="disc", Indica al navegador el dibujo que

 Tipo disc
"circle", precederá a cada elemento de la lista.
17
"square" Para mayor flexibilidad se admite o Tipo circle

también como parámetro de <LI>.
 Tipo square
Listas ordenadas
La etiqueta <OL> responde a Ordered List, lista ordenada, y nos permite presentar
listas como esquemas numerados de un solo nivel, o sea, que cada elemento de la
lsita lleva un número de orden. Por ejemplo,
<OL>
<LI>Primer elemento
<LI>Segundo elemento
</OL>
Se verá como
1. Primer elemento
2. Segundo elemento
El HTML 3.2 admite estos parámetros para la etiqueta <OL>:
Parámetro Significado Resultado
Indica al navegador que debe

1. Primer elemento
COMPACT representar la lista de la
2. Segundo elemento
manera más compacta posible.
Indica al navegador el tipo de 1. Tipo 1

numeración que precederá a b. Tipo a
TYPE="1", "a", cada elemento de la lista. Para
C. Tipo A
"A", "i", "I" mayor flexibilidad se admite
también como parámetro de iv. Tipo i
<LI>. V. Tipo I
Indica al navegador el número

3. Primer elemento
START="num" por el que se empezará a
4. Segundo elemento
contar los elementos de la lista.
18
1. Primer elemento
Atributo de <LI>, actúa como
VALUE="num" START pero a partir de un 4. Segundo elemento
elemento predeterminado.
5. Tercer elemento
Listas de definiciones
Este tipo de lista utiliza las etiquetas <DT>y <DD> en lugar de <LI>. En estas lista
cada elemento tiene una entrada de texto indentada respecto a dicho elemento. Es
como si tuvieramos una lista de conceptos y sus definiciones (el texto indentado). Para
entenderlo lo mejor es verlas en marcha:
<DL>
<DT>HTML<DD>Es un lenguaje de definición de páginas web.
<DT>Java<DD>Es un lenguaje de programación.
</DL>
se verá como
HTML
Es un lenguaje de definición de páginas web.
Java
Es un lenguaje de programación.
La etiqueta <DL> sólo admite como parámetro el ya conocido COMPACT, que tiene el
mismo comportamiento que con los otros dos tipos de lista anteriores. Un elemento
<DT> puede contener varios elementos <DD>.
19
Imágenes
 Insertar imágenes
 Imágenes y enlaces
 Alineación respecto al texto
Insertar imágenes
Una página web sin alguna imagen es como el mar sin sal. Para incluir gráficos e
imágenes en nuestras páginas utilizaremos la etiqueta
<IMG src="fichero_grafico" ALT="descripcion" WIDTH=88 HEIGHT=31 BORDER=0>
El parámetro SRC especifica la URL del fichero que contiene el gráfico. Los formatos
estándar en la red son el GIF, PNG y JPG. Si quieres saber más sobre imágenes e
internet debes dirigirte a esta sección dedicada al tema en la guía de diseño.
El parámetro ALT especifica el texto que se mostrará en lugar del gráfico en aquellos
navegadores que no sean capaces de mostrarlos (como el Lynx) y en el supuesto de
que el usuario los haya desactivado. Algunos navegadores lo muestran cuando
pasamos el ratón por encima de la imagen. Es por eso que, aunque algunos usuarios
no lo lleguen a ver nunca, conviene ponerlo siempre. De hecho, el estádar HTML 4.0
obliga a hacerlo. Su uso es además muy interesante cara a los robots buscadores que
de este atributo pueden sacar información del tema tratado en la página.
Los atributos WIDTH y HEIGHT indican el ancho y alto del gráfico en pixels. Su uso no
es obligatorio pero si muy aconsejable para mejorar el tiempo de carga de la iamgen:
el navegador sabe el espacio que ocupará la imagen y puede seguir colocando los
otros elementos de la página mientras se termina de descargar la imagen.
Por último vemos el atributo BORDER que como podrás adivinar tan solo coloca el
ancho del borde que rodea la imagen. Por defecto su valor es cero, salvo el caso que
vemops en el siguiente apartado.
Por ejemplo
<img src="/imgs/im_crear/pubcorreo.gif" width="30" height="32" alt="correo">
Imágenes y enlaces
Recordarás que al hablar de los enalces decíamos que en el contenido de la etiqueta

<A> podía ir texto o una imagen. En este caso el navegador destaca la imagen
colocandole un borde del color que use para señalar los enlaces de texto. Algo
20
bastante lógico pero que en la mayoría de los casos queda poco estético,
afortunadamente podemos eliminar ese borde poniendo a 0 el atributo BORDER.
<a href="tema1.htm"> <img src="/imgs/im_crear/indice2.png" alt="Tema 1" width="45"

height="30">
</a>
Se ve así:
Sin embargo, <a href="tema1.htm"> <img src="/imgs/im_crear/indice2.png"

alt="Tema 1" width="45" height="30" BORDER="0">
</a>
Se ve así:
Alineación respecto al texto
HTML nos permite controlar la disposición de las imágenes en la

página con relación al texto, para ello usamos el parámetro ALIGN:
ALIGN= Significado Muestra
Coloca el punto más alto de la imagen

TOP coincidiendo con más alto de la línea de texto
actual. Este es el texto
Alinea el punto medio (en altura) de la imagen

MIDDLE
con la base del texto. Este es el texto
Alinea el punto más bajo de la imagen con la

BOTTOM
base del texto. Este es el texto
Este es el texto y
LEFT Coloca la imagen a la izquierda del texto.
esta es otra línea
Este es el texto y
RIGHT Coloca la imagen a la derecha del texto.
esta es otra línea
21
Hay que aclarar que la base del texto es la línea donde descansan casi todas las letras
del alfabeto excepto algunas como la p, la g o la j.
Los formularios
 Formularios
 Campos de texto
 Opciones
 Botones del formulario
 Marcas de verificación
 Campos ocultos
Formularios
Las páginas webs no son solo permiten presentar documentos de forma más o menos
atractiva al destinatario final, sino que también proporcionan elementos para
interactuar con él. De esta manera el usuario final puede enviar su opinión de la
página al autor, o realizar una compra en línea. Estos elementos se conocen como
formularios y seguro que todos los habéis visto y utilizado alguna vez. Por ejemplo
este sencillo formulario
Tu nombre:
¿Estás registrado?
Si
No
<FORM ACTION="" METHOD="POST" name="formul">
Tu nombre:<BR>
<INPUT NAME="nombre" TYPE="TEXT" SIZE="32"/><BR>
¿Estás registrado?<br>
<label><input type="radio" name="Si" value="1">Si</label><br>
<label><input type="radio" name="Si" value="0">No</label><br><BR>
22
<INPUT TYPE="Submit" VALUE="Enviar">
<input name="Reset" type="reset" id="Reset" value="Borrar">
</FORM>
El formulario está formado por una serie de elementos (cajas de texto, casillas de
verificación, botones...) encerrados entre las etiquetas <FORM> </FORM>. Como
verás en esta etiqueta existen varios parámetros como son:
ACTION la acción que se ejecutará al pulsar el botón de enviar. Habitualmente será

una URL a un programa CGI encargado de procesar los datos del formulario. Puede
ser también mailto: seguido de una dirección de correo electrónico, en este caso el
formulario se enviará por correo, en cuyo es recomendable añadir el parámetro
ENCTYPE="text/plain" para que el mensaje sea fácil de leer.
METHOD indica como se enviarán losa datos del formulario al programa que los
procese: POST de forma interna (oculta) y GET añadido a la dirección URL del
programa. Si usas el formulario para un mailto: debes usr el método POST
NAME es el nombre que identifica al formulario, útil si se usan scripts dentro de la

página.
Cajas de texto
Los controles o cajas de texto permiten al usuario escribir texto en el formulario.

Pueden ser cajas de una solo línea o cuadros de texto con varias líneas. Las primeras
usan la etiqueta <INPUT> y pueden ser de texto simple (se ve lo que escribimos) o de
tipo password (lo que escribimos es visto como una serie de asteriscos).
<INPUT TYPE=TEXT>
<INPUT TYPE=PASSWORD>
Ojo, el dato escrito en el segundo campo no se ve pero eso no quiere decir que esté
codificado en ninguna manera. Ambos tipos comparten todos sus atributos que son:
23
Parámetro Significado
SIZE Tamaño en columnas de la caja de texto.
MAXLENGTH Número máximo de caracteres que se pueden teclear.
VALUE Texto por defecto que aparecerá en el campo.
Pero si necesitamos que el usuario escriba más llineas de texto pues usamos la
etiqueta <TEXTAREA></TEXTAREA>:
Comienza a escribir
<TEXTAREA>Comienza a escribir </TEXTAREA>
Si escribimos algun texto dentro de esta etiqueta, ese texto aparecerá por defecto en
ese area de texto. Admite estos parámetros:
Parámetro Utilidad
ROWS Filas que ocupará la caja de texto.
COLS Columnas que ocupará la caja de texto.
Opciones
Para que el usuario pueda marcar una de entre varias opciones podemos usar un
campo INPUT de tipo RADIO. En nuestro ejemplo lo hemos usado:
Si<INPUT NAME="Registrado" TYPE=RADIO VALUE="1"><BR> Sí
No
No<INPUT NAME="Registrado" TYPE=RADIO VALUE="0"><BR>
24
Fíjate que ambos INPUT usan el mismo atribuyto NAME, de esa manera el navegador
los reconoce como un juego de respuestas alternativas.
VALUE Este es el valor que asignará a la variable.
Si lo indicamos en una de las opciones esta será la que esté activada por
CHECKED
defecto.
Listas de opciones
Hay una alternativa al control de selección de alternativas: las listas desplegables.

Mediante este control el usuasrio puede seleccionar una opción de entre un grupo que
aparece en una lista desplegable. La lista se encierra en etiquetas
<SELECT></SELECT>, y las opciones se poenen en etiquetas
<OPTION></OPTION>:
<SELECT NAME="Idioma">
<OPTION>Español</OPTION>
<OPTION>Inglés</OPTION>
<OPTION>Francés</OPTION>
<OPTION>Alemán</OPTION>
</SELECT>
os parámetros que admite SELECT son las siguientes:
SIZE El número de opciones que podremos ver. Si es mayor que 1 veremos

una lista de selección con un scroll y, si no, veremos una lista
desplegable.
MULTIPLE Si lo indicamos podremos elegir más de una opción, para ello el usuario
25
utilizará la tecla CTRL y el botón activo del ratón.
Y OPTION estos:
VALUE Este es el valor que asignará a la variable.
SELECTED La opción con esta propiedad será la que aparezca seleccionada por
defecto.
Botones del formulario
Existen dos clases e botones: uno que se utiliza para poner en marcha la operación
indicada por ACTION (botones submit) y otro que sirve para resetear el formulario
borrando el contenido de todos los controles:
<INPUT TYPE=SUBMIT>
<INPUT TYPE=RESET>
En ambos casos su puede usar el parámetro VALUE para el texto que aparece dentro
del botón. El botón de submit puede ser una imagen, por ejemplo
<input name="imageField" type="image" src="imgs/botonel.gif" width="85" height="46"

border="0">
Que se vería
Este botón actua como un botón tipo SUBMIT, pero envía con los datos del formulario
las coordenadas X Y del punto de la imagen donde pulsó el usuario.
Marcas de verificación
Son controles parecidos a los campos de opciones pero que no van

agrupados, o sea no son excluyentes, Sirven para que el usuario coloque una marca
de si o no (verdadero o falso, marcado o no marcado). Lo podremos conseguir por
medio de controles de confirmación:
26
¿Te gusta el curso?

<INPUT NAME="Opina" TYPE=CHECKBOX>¿Te gusta el curso?
Si queremos que el control esté activado por defecto le añadiremos el parámetro

CHECKED.
Campos ocultos
Mediante un formulario podemos también enviar datos al programa encargado de

procesarlo. Esto se realiza mediante los llamados campos ocultos, que son campos
INPUT de tipo HIDDEN, y se llaman así porque no se ven en la página web, o sea, el
usuario no los ve a menos que se mete en la vista de código de la página, digo esto
poruqe no vayamos a pensar que con estos campos podemos pasar información
privada mediante los formularios. El código para este tipo de campos es algo como
esto:
<INPUT TYPE=HIDDEN NAME="Curso" VALUE="Javascript">
De esta manera si en un sitio tengo muchos formularios sabré que estos datos en
concreto vienen de la página de Javascript. Su uso realmente no lo verás hasta que no
escribas o utilices programas para gestionar los formularios
Formularios avanzados
 Controles avanzados para formularios
 Botones
 Etiquetas
 Agrupación de elementos
 Desactivación de elementos
Controles avanzados en formularios
Con lo que has visto en la sección anterior de formularios podrás perfectamente

incoiporar estos elementos de interaccón a tu página web, pero los navegadores
modernos (MSIE 5+ y Netscape 6+) permiten el uso de algunas características extras
añladidas por el estandard HTML 4.0, características que básicamente mejoran la
estética y facilitan el uso de estos elementos.
27
Botones
Una importante mejora en el HTML 4 es el nuevo control <BUTTON> que permite

enriquecer la etiqueta de texto que hasta ahora tenían los botones de formulario.
Ahora estos elementos pueden tener cualquier contenido HTML, como por ejemplo
imagen con un texto. POr ejemplo el siguiente código
<BUTTON TYPE="button">
Inicio <img src="imgs/im_crear/bolamas.gif" width="10" height="10">
</BUTTON>
Los parámetros de dicha etiqueta son TYPE, que podrá tomar los valores SUBMIT
(por defecto), RESET y BUTTON, NAME y VALUE.
Etiquetas
Los controles tipo LABEL permiten asociar etiquetas a los controles de formulario. Es
decir ahora el texto que suele acompañar a los campos que debe rellenar el usuario
son solo eso texto, pero con esta etiqueta ese texto se convierte en un elemento activo
que forma parte del campo y podemos seleccionar éste pulsando sobre la etiqueta.
Observa el uso del atributo for usado para asociar la etiqueta al campo cuyo ID tenga
el mismo valro que este for
<INPUT ID="Curso" TYPE=CHECKBOX> Me gusta este curso

<LABEL for="Curso"> Me gusta este curso
</LABEL>
Compara con este otro ejemplo aparentemente igual al anterior.
Me gusta este
<INPUT NAME="Curso" TYPE=CHECKBOX> curso
Me gusta este curso/a
28
En el primer caso el click sobre la etiqueta actua igual que sobre el control.
Agrupando elementos
HTML 4 nos presenta una forma sencilla de estructurar los formularios sin necesidad
de acudir a las socorridas tablas. Ahora podemos agrupar visualmente varios controles
encerrándolos dentro de la etiqueta FIELDSET, veremos que alrededor de ellos se ve
un rectángulo con el título que le demos mediante la etiqueta LEGEND.
<FIELDSET>
<LEGEND>Tus datos</LEGEND>
<LABEL>
Tus datos Nombre:
Nombre:
<INPUT TYPE="text" name="nombre">

Edad:
<br>Edad:
<INPUT TYPE="text" name="edad">
</LABEL>
</FIELDSET>
La posición del título (LEGEND) puede controlarse usando el parámetro ALIGN, que
por defecto es TOP (arriba), pero puede ser BOTTOM (abajo) a la LEFT (Izquierda) o
RIGHT (derecha) .
Desactivando elementos
Todos los controles de un formulario se pueden desactivar, impidiendo así al usuario

que los sobreescriba. Se seguirán mostrando en pantalla, aunque con un aspecto
distinto para indicar que no son editables. Para ello sólo tenemos que indicarle el
parámetro DISABLED:
Mapas de imágenes
 Mapas de imágenes
 Mapas lado cliente
 Usando los mapas
29
Mapas
Recordemos que los enlaces en las páginas web podían escribirse con un texto o con
una imagen. Es decir podíamos tener una imagen que al ser pulsada con el ratón nos
llevaba a otra página. Pues bien un mapa de imagen es algo parecido pero en el que l
imagen no tienen asociado un solo enlace sino varios: depende de que parte de la
imagen pises para ir a uno u otro destino. Esto se puede hacer de dos maneras:
 Gestionando el mapa en el navegador.
 Gestionando el mapa en el servidor.
Los más utilizados sin duda actualmente son los primeros, los mapas del lado del
cliente, pues no exigen ningún apoyo del servidor y por tanto los puede usar cualuier
webmaster en su propia página.
Mapas lado cliente
Un mapa no es más que una imagen en la que se definen zonas activas, o sea, zonas
que al ser pulsadas con el ratón actúan como un enlace y nos llevan a otras páginas.
Su creación tienen dos partes: una definir el mapa y otra asociar el mapa con una
imagen:
<MAP NAME="mapa_enlaces">
<AREA SHAPE=... COORDS=... ALT="Enlace a..">
...
</MAP>
La descripción del mapa es de lo más simple: le damos nombre (para luego poderle
asociar la imagen) y definimos las zonas activas (formas geométricas como verás a
continuación):
SHAPE Define la forma de la zona: rectangular, circular o poligonal.
Coordenadas (separadas por comas) que definen la zona. El número y

COORDS
significado de esas coordenadas dependerá de la forma.
30
HREF URL del enlace corespondiente a esta zona.
NOHREF Zona inactiva
ALT Texto alternativo, etiqueta idéntica al ALT de IMG
Como podemos ver, para declarar correctamente una zona necesitamos conocer
cómo se definen exactamente las formas y coordenadas:
SHAPE COORDENADAS
"x1,y1,x2,y2" siendo (x1,y1) la esquina superior izquierda y

Rectangular RECT
(x2,y2) la inferior derecha.
Circular CIRC "x,y,r" siendo (x,y) el centro del círculo y r el radio.
"x1,y1,x2,y2,x3,y3,..." definiendo cada pareja (x,y) una

Polígono
POLY esquina del polígono. La última pareja de coordenadas se
irregular
unirá a la primera para cerrar el polígono.
Toda la
DEFAULT No se necesitan
imagen
Usando los mapas
Una vez definido como es el mapa lo aisgnamos a una imagen:
<IMG src=... USEMAP="#mapa_enlaces">
Siempre tenemos que añadir al comienzo del nombre de nuestro mapa una
almohadilla (#). Vamos a ver un ejemplo:
<MAP NAME="navegadores">
<AREA SHAPE=RECT COORDS="0,0,24,31" href="http://www.apache.org"

ALT="Servidor Apache">
<AREA SHAPE=RECT COORDS="26,0,53,31" href="http://www.w3c.org" ALT="la

W3C">
<AREA SHAPE=DEFAULT NOHREF ALT="por defecto">
31
</MAP>
<IMG src="mapa.gif" WIDTH=198 HEIGHT=51 BORDER=0 USEMAP="#deinteres">
Se ve tal que así:
Hay que tener en cuenta que, cuando dos zonas se solapan, la que esté declarada
primero es la que tiene preferencia. Por eso declaramos al final una zona que no
conduce a ningún URL por si el usuario pulsa fuera de las zonas activas.
Las tablas
 Tablas
 Definición
 Definir las filas
 Definir las celdas
 Títulares
Tablas
La organización del texto en una página es posible gracias a las tablas. Muchas
páginas web son como páginas de revistas, y la forma más simple de emular las
funciones de maquetación son las tablas. Una tabla no es más que una colección de
listas y columnas a cuyas interseccinoes le vamos a llamar celdas, y es en esas celdas
donde podmeos colocar textos o imágenes. Las tablas se pueden incluso anidar y las
celdas se pueden agrupar unas con otras para lograr disposiciones de texto e imagen
prácitcamente similares a las que se podrían conseguir en páginas de revistas gracias
a los programas de maquetación.
Definir tablas
Para definir una tabla tan solo debemos definar las filas que la componen. Y dentro de
estas las características de las celdas. Por ejemplo la siguiente tabla posee 2 filas (2
<TR></TR>) y 3 columnas (3 pares <TD></TD> en cada fila) así:
<TABLE>
<TR> 1,1 1,2 1,3
2,1 2,2 2,3
<TD>1,1</TD>
32
<TD>1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD>2,1</TD>
<TD>2,2</TD>
<TD>2,3</TD>
</TR>
</TABLE>
Pero la definición va más allá, podemos poner bordes, colores de fondo a las celdas, definir
márgenes en las celdas, aumentar o disminuir el espaciado entre celdas. Resumimos todo esto
en la siguiente tabla de atributos:
WIDTH Anchura de la tabla. Puede ir en pixels o en porcentaje de la anchura total

disponible.
ALIGN Alinea la tabla a izquierda (LEFT), derecha (RIGHT) o centro (CENTER).
BORDER Especifica el grosor del borde que se dibujará alrededor de las tabla y celdas.
BORDERCOLOR Define el color de los bordes de la tabla
CELLSPACING Espacio entre celdas, en pixels.
CELLPADDING Borde interior de las celdas, en pixels.
Si ahora, por ejemplo definimos ahora la tabla anterior como <TABLE BORDER=1
WIDTH="50%" ALIGN=CENTER> veremos lo siguiente:
1,1 1,2 1,3

2,1 2,2 2,3
El contenido escrito son las coordenadas de la celda, así 1,2 indica que esa celda es la
correspondiente a la fila 1 y la columna 2.
Definiendo las filas
La definición de cada fila se inicia con la etiquete <TR> y finaliza con </TR>, entre
ellas colocaremos las celdas. Cada etiqueta TR tiene los siguientes atributos:
ALIGN
Alinea el contenido de las celdas de la fila horizontalmente a izquierda (LEFT),
derecha (RIGHT) o centro (CENTER).
VALIGN
Alinea el contenido de las celdas de la fila verticalmente arriba (TOP), abajo
(BOTTOM) o centro (MIDDLE).
33
Definiendo las celdas
Ya sólo nos queda definir cada celda para lo que disponemos de las TD y TH. Esta
última es una celda especial que se verá destacada, como un título para la columna:
en negrita y centrado. Ambas etiquetas admiten los siguientes atributos:
ALIGN Alinea el contenido de la celda horizontalmente a izquierda (LEFT), derecha

(RIGHT) o centro (CENTER).
VALIGN Alinea el contenido de la celda verticalmente arriba (TOP), abajo (BOTTOM) o
centro (MIDDLE).
WIDTH Especifica la anchura de la celda. También se puede especificar tanto en
pixels como en porcentaje, teniendo en cuenta que, en este último caso, será
un porcentaje respecto al ancho total de la tabla (no de la ventana del
navegador).
NOWRAP Impide que, en el interior de la celda, se rompa la línea en varias lineas.
COLSPAN Número de celdas de una fila agrupadas.
ROWSPAN Número de celdas de la columna agrupadas.
Los dos últimos parámetros se usan para fundir celdas de una misma fila o de una
misma columna. Por ejemplo veamos una tabla de 3x3 con una celda que se une a una
de la derecha y otra que se une a otra de debajo:
<TABLE BORDER=1>
<TR>
<TD COLSPAN=2>1,1 y 1,2</TD>
<TD>1,3</TD>
</TR>
<TR>
<TD ROWSPAN=2>2,1 y 3,1</TD> 1,1 y 1,2 1,3
<TD>2,2</TD>
<TD>2,3</TD> 2,1 y 2,2 2,3
</TR> 3,1 3,2 3,3
<TR>
<TD>3,2</TD>
<TD>3,3</TD>
</TR>
</TABLE>
Si te fijas cuando una celda con un colspan = 2 equivale a dos celdas a la hora de
calcular el número de celdas de la fila. Algo similar ocurre con el rowspan pero referido
a celdas unidas en vertical.
Titulares
Ya hemos dicho que hay un tipo de celdas utilizable como encabezamiento o titular,
pero la tabla al completo puede llevar un título, que irá en una zona fuera de cualquier
34
celda o fila. Esta es la etiqueta CAPTION. Su uso es muy simple como puedes ver en
este ejemplo:
Cuestionario
Después de presentarles el caso problema cada grupo de trabajo responderá las
preguntas siguientes:
1. Analizar e Identifique el problema en la que se encuentra Lucia.

………………………………………………………………………………………
………………………………………………………………………………………
…………
2. Determinar las causas que originan que Lucia desconozca estas técnicas
de trabajo en el equipo de Juan Carlos.
………………………………………………………………………………………
………………………………………………………………………………………
………….
3. ¿Qué le recomendaría Ud. a Lucia? ¿Que acciones debería tomar frente a
esta realidad?
………………………………………………………………………………………
………………………………………………………………………………………
………..
4. Seleccione las etiquetas básicas para construir una página web en html
Seleccione una:
a. Html, tr, td, ol, li, a
b. Html, head, title, body table
c. Html, head, php, asp, title
d. Html, ol, css, js php
e. Ninguna las anteriores
5. La sintaxis para diseñar una lista ordenada en html es:
a. li
35
b. ul
c. sort
d. ol
6. Es la primera etiqueta que debe ir en un archivo html, sin espacios o líneas

que la procedan. De esta forma, el modo estándar del navegador es
activado y las incorporaciones del HTML son interpretadas siempre que
sea posible, o ignoradas en caso contrario:
a. Ninguna las anteriores
b. Html
c. Header
d. Meta type
e. !DOCTYPE htm
7. ¿Para publicar una página web estática, necesito tener instalado un servidor
web?:
Verdadero
Falso
36
II
UNIDAD
37
Hojas de estilo
Las hojas de estilo intentan separar el contenido de un página de la forma de

presentarlo en pantalla. Esto lo hacen personificando los cambios que las etiquetas de
formato HTML realizan en nuestro texto. Por ejemplo, sabemos que
usando <P> tendremos una párrafo nuevo con una separación del anterior
determinada, etc. Con las hojas de estilo también podremos decirle a un párrafo que
todo su texto sea verde y que además va a tener un margen izquierdo de 30 pixels.
Por ejemplo.
El primer navegador en soportar hojas de estilo fue el Explorer 3.0. Utiliza la llamada
sintaxis en cascada. El Communicator acepta esa sintaxis e introduce una nueva
basada en JavaScript. Sin embargo, como el estándar más comunmente aceptado de
sintaxis de hojas de estilo es el de cascada, será este el único que veamos. Vamos a
empezar con un ejemplo:
<STYLE TYPE="text/css">
P {color: green; margin-left: 30;}
</STYLE>
Vamos a detenernos en todos los elementos. Para empezar, la etiqueta HTML con la
que deberemos englobar las hojas de estilo será <STYLE>, que sólo podrá estar
situada en la cabecera de la página. Su parámetro TYPE indica la sintaxis que
utilizaremos para definirlas. En el caso de las hojas en cascada deberá ser text/css.
Ahora examinemos la hoja de estilo propiamente dicha. Indicaremos primero la

etiqueta que deseamos personalizar. Será <P>. Después, entre llaves, pondremos una
lista de las cosas que queremos modificar. En nuestro caso son dos, el color (en el
formato habitual) y el margen, que se define en pixels.
Hay que destacar que, aunque muchas veces los navegadores tengan una cierta
manga ancha, la sintaxis CSS (Cascading Style Sheet) es sensible a la diferencia
entre mayásculas y minúsculas. Conviene tener cuidado.
El HTML 4.0 permite declarar fuera de la página las hojas de estilo, llevando de este
modo al extremo su filosofía de separar forma y contenido. Si colocamos nuestras
hojas de estilo en un fichero llamado estilos.css (solo las hojas, no la
etiqueta <STYLE>) no tendremos más que incluir la siguiente línea en la cabecera de
nuestro documento HTML para incluirlas en nuestras páginas:
38
<LINK REL="stylesheet" href="estilos.css" TYPE="text/css">
Vamos a ver cómo quedaría un párrafo que siguiese la hoja de estilo anterior
Si la cosa va bien, este párrafo estará escrito en verde y con un margen izquierdo
de 30 pixels. Precioso, ¿no? embargo, estoy convencido de que los más
avispados se habrán dado cuenta de que les estoy ocultando algo. Por lo que he
dicho hasta ahora la personalización de una etiqueta debería ser general y en
esta página sólo este párrafo está modificado. No os preocupéis demasiado,
ahora os cuento como se hace.
Clases
Hasta ahora habíamos definido estilos para una etiqueta determinada. Pero también
podemos hacerlo para una clase determinada. ¿Esto qué significa? Pues que si, por
ejemplo, definimos la hoja de estilo de la clase verde de la siguiente manera:
P.verde {color: green; margin-left: 30px;}
Sólo estarán verdes y con un margen izquierdo de 30 pixels aquellos párrafos

definidos con <P CLASS="verde">. Así de sencillo.
Ampliando un poco más las posibilidades de las clases, se pueden realizar

excepciones. Supongamos que tenemos unos párrafos que queremos que tengan
unos márgenes determinados y color verde. Y deseamos que uno solo de esos
párrafos, con los mismo márgenes, sea azul. Podríamos definir dos clases distintas,
pero hay un método mejor: usar el parámetro ID. Por ejemplo:
all.verde {color: green; margin-left: 10px;}
#ej1 { color: blue;}
Ahora todos los párrafos de clase verde serían, obviamente, verdes y con un margen
de 10 pixels. Sin embargo el párrafo definido por <P CLASS="verde" ID="ej1"> será
azul:
Este párrafo es muy verde.
Y anda que este...
Sin embargo, este no, fíjate que curioso.
39
Bloques SPAN y DIV
Puede que, a veces, no queramos modificar el comportamiento de un elemento sino

que creemos un estilo que queremos actúe sólo, un estilo completo creado de la nada.
Una etiqueta nueva y propia. Entonces, ¿qué hacemos? Utilizar las
etiqueta <SPAN> y <DIV>.
El método es simple. Definimos una clase rojo que simplemente modifique el color
(que será rojo). Ahora, si queremos que una sección de texto esté en rojo lo
encerraremos entre las etiquetas <SPAN CLASS="rojo"> y</SPAN> o entre <DIV
CLASS="rojo"> y </DIV>.
La diferencia entre ambas es que, mientras SPAN realmente no hace nada por sí
misma, DIV convierte a todo lo que encierra en un bloque aparte (poniendo un salto de
línea tanto al comienzo como al final). Veremos en el siguiente capítulo que a las
etiquetas que se comportan como bloques (<P>, <H1>, las que dijimos modifican un
párrafo entero) se les pueden definir atributos propios desde las hojas de estilo. Por
ejemplo, si definimos las siguientes hojas:
all.titulo {
margin-top: -24px;
color: blue;
font-size: 20px;
all.sombra {
margin-top: 2px;
margin-left: 2px;
color: black;
font-size: 20px;
Cuyos atributos explicaremos en la referencia de las hojas de estilo, y ponemos el

siguiente código HTML:
<DIV ALIGN="CENTER" CLASS="sombra">El maravilloso curso de HTML</DIV>
40
<DIV ALIGN="CENTER" CLASS="titulo">El maravilloso curso de HTML</DIV>
Estilos CSS
Los estilos CSS son una forma de separar el contenido de la página web de su
formato. Es decir por un lado nos preocupamos de dar contenido a la página y por otro
de definir como se deberá ver. Es una idea magnífica que nos permite, por ejemplo,
cambiar el estilo de diseño de todo un sitio web sin necesidad de reeditar todas sus
páginas: solo modificaríamos el archivo donde se desribe el formato de las páginas,
como esquemas de color, imágenes de fondo, etc. Pero no todo es perfecto: los
navegadores Explorer y Netscape no entienden los estilos exactamente igual por lo
que es conveniente probar las cosas en ambos para asegurarnos que todo se verá
como nosotros queremos.
Propiedades de bloque
ropiedad Significado Valores
margin-top, margin-right, Márgenes dntro del bloque.

Tamaño, porcentaje
margin-bottom, margin- Tanto margincomo margins() se
o auto. Por defecto es
left, margin: top right utilizan para cambiar todos
cero.
bottom left estos atributos a la vez.
padding-top, padding-
right, padding-bottom, Tamaño, porcentaje
Distancia entre el borde y el
padding-left,<br/> o auto. Por defecto es
contenido del bloque.
padding: top right bottom cero.
left
border-top-width, border-
right-width, border-
Anchura del borde de un
bottom-width, border-left- numérico
bloque.
width,<br/> border-width:
top right bottom left
none, ruged, solid,3D,...

border-style Tipo de borde de un bloque. por defecto ninguno
(none).
41
Código o nombre de
border-color Color del borde de un bloque.
color
Tamaño, porcentaje
width, height Ancho y alto del bloque. o auto, automático por
defecto.
Justificación del contenido de left, right o none, por

float
un bloque. defecto ninguna.
Permiso para que otro elemento

left, right, both onone,
clear se pueda colocar a su izquierda
por defecto ninguno.
o derecha.
Propiedades de tipo de letra
Ahora vamos a examinar las propiedades del tipo de letra que el usuario va a ver. Son
las siguientes:
Propiedad Descripción Posibles valores
Tipo de letra (que

lista de tipos, ya sean genéricos o no, separados
font-family puede ser genérico)
por comas.
que vamos a usar.
xx-small, x-small, small, medium, large, x-large, xx-

Tamaño del tipo de
font-size large, tamaño relativo o tamaño absoluto. Por
letra.
defecto medium.
font- Grosor del tipo de normal, bold, bolder, lighter o 100-900 (donde 900
weight letra (negrita). es la negrita más gruesa). Por defecto normal.
Estilo del tipo de normal, italic, italic small-caps, oblique, oblique

font-style
letra (cursiva). small-caps o small-caps. Por defecto normal.
Recordemos lo dicho al hablar del tipo de letras: no todos tus tipos tienen que estar en
los ordenadores de tus visitantes.
42
Propiedades de formato de texto
Nuestro siguiente objetivo va a ser las propiedades de formato del texto que cualquier
procesador de textos nos permite cambiar.
line-height Interlineado. Número o porcentaje.
Efectos none, underline (subrayado), overline (como subrayado,

text-
variados sobre pero por encima), line-through(tachado)
decoration
el texto. o blink (parpadeante); por defecto ninguno.
Posición baseline (normal), sub (subíndice), super (superíndice), t

vertical-
vertical del op, text-top, middle, bottom, text-bottom o un porcentaje.
align
texto. Por defecto baseline
Transforma el capitalize (pone la primera letra en

text- texto a mayúsculas), uppercase (convierte todo a
transform mayúsculas o mayúsculas), lowecase (a minúsculas) o none, por
minúsculas. defecto no hace nada.
Justificación
text-align left, right, center o justify
del texto.
text-indent
Tabulación con que aparece la primera línea del texto.
Propiedades de color y fondo
También es posible cambiar el color o la imagen de fondo de cualqueir elemento.
color Color del texto. Un color (en el formato habitual).
Modifica tanto el gráfico el Dirección del fichero que contiene la

background
color de fondo. imagen o un color.
43
Las direcciones URL (para la imagen de fondo por ejemplo) se expresan del siguiente
modo:
background: url(fondobonito.gif);
Los scripts
Un script es un programa insertado dentro del documento HTML y que es interpretado

y ejcutado por el navegador del usuario. Por tanto estos programas se ejecutan en el
ordenador del usuario bien sea directamente (al leer la página) o cuando se produce
un suceso o evento particular, como puede ser el pulsar sobre un enlace o mover el
ratón o cargar una imagen...
Estos scripts permiten crear páginas dinámicas, modificar el comportamiento normal

del navegador, validar formularios, realizar pequeños efectos visuales, etc... Sin
embargo, conviene recordar que se ejecutan en el navegador del usuario y no en la
máquina donde estén alojadas, por lo que no podrán realizar cosas como manejar
bases de datos. Esto hace que los contadores (por ejemplo) se deban realizar de otra
manera, utilizando programas CGI (escritos en lenguajes como Perl o PHP).
El primer lenguaje usado para crear scripts fue el JavaScript de Netscape. Nacido con
la versión 2.0 de este navegador y basado lejanamente en la sintaxis de Java, su
utilidad y el casi absoluto monopolio que entonces ejercía Netscape en el mercado de
navegadores permitieron que se popularizara y extendiera su uso.
Internet Explorer de Microsoft, comenzó a soportar este lenguaje en su versión 3.0,

pero al mismo tiempo introdujo otro lenguaje con las mismas funciones: el VBScript,
una derivación de BASIC. Pero este intento no llegó muy lejos, y el VBScript ha
quedado para otras aplicaciones de Microsoft, como Access o Word.
Javascript
Aunque este curso está enfocado a aprender HTML, vamos a detenernos un poco
para mostrar la utilidad de los lenguajes de script. Para ello vamos a realizar una
pequeña introducción al Javascript. Si te sientes interesado, visita Javascript Desde
Cero donde ecnontrarás bastante material para aprender este lenguaje.
Vamos a realizar nuestro primer "programa" en JavaScript. Haremos surgir una

ventana que nos muestre el tradicional mensaje "hola, mundo". Así podremos ver los
44
elementos principales del lenguaje. El siguiente código es una página Web completa
con un botón que, al pulsarlo, muestra el mensaje.
holamundo.html
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"

onClick="HolaMundo()">
</FORM>
</BODY>
</HTML>
Y aquí está nuestro ejemplo funcionando:
Ahora vamos a ver, paso por paso, que significa cada uno de los elementos extraños
que tiene la página anterior:
<SCRIPT LANGUAGE="JavaScript">
</SCRIPT>
Dentro de estos elementos será donde se puedan poner funciones en JavaScript.

Puedes poner cuantos quieras a lo largo del documento y en el lugar que más te
guste. Si un navegador no entiende la etiqueta <SCRIPT>escribirá lo que hay entre
medias de estos elementos, así que lo encerramos entre comentarios por si las
moscas.
45
function HolaMundo() {
alert("¡Hola, mundo!");
Esta es nuestra primera función en JavaScript. En el código de la misma vemos una

llamada al método alert(que pertenece al objeto window) que es la que se encarga de
mostrar el mensaje en pantalla. Por un fallo del Netscape no se pueden poner las
etiquetas HTML de caracteres especiales en una función: no los reconoce. Así que
pondremos directamente "¡" arriesgándonos a que salga de otra manera en
ordenadores con un juego de caracteres distinto al del nuestro.
<FORM>
<INPUT TYPE="button" NAME="Boton" VALUE="Pulsame"

onClick="HolaMundo()">
</FORM>
Dentro del elemento que usamos para mostrar un botón vemos una cosa
nueva: onClick. Es un evento. Cuando el usuario pulsa el botón, el evento onClick se
dispara y ejecuta el código que tenga entre comillas, en este caso la llamada a la
función HolaMundo(), que tendremos que haber definido con anterioridad.
Este ejemplo muestra una pequeña parte de las funcionalidades del JavaScript. De
hecho, su utilidad es más bien escasa, por eso te recomiendo de nuevo que eches un
vistazo a Javascript Desde Cero
Capas
Las capas son bloques con contenido HTML que ppueden posicionarse de manera
dinámica y organizables en 3D. Realmente tienen sentido dentro de los estilos CSS,
de hecho sus ventajas solo se pueden aprovechar al cien por cien utilizando estilos
CSS. Es la mejor ilustración de lo que significa separar contenido de presentación.
En realidad, el nombre de capas proviene de Netscape, que estos elementos los

implementaba como <layers>, en castellano capas. Las versiones modernas de
Netscape (de la 6 en adelante) ya no usan esta etiqueta si no que se han decantado
por la más standard <div>
46
No obstante la manipulación de estos elementos por parte de Micorsoft y Netscape

son diferentes, ambos usan algunas extensiones propias, auqnue ambos admiten los
standares de la W3C con lo que el uso de estos elementos es bastante
universalizable.
Definición
En realidad las capas no se difinen completamente mediante el lenguaje HTML, sino

necesitan del lenguaje de definición de estilos CSS. Entre ambos podemos colocar en
nuestras páginas estos elementos movibles, ocultables y en general manipulables de
forma dinámica. Por ejemplo:
.la_capa {position:absolute; top:100px; left:20px; width:300; heigth: 200}
</STYLE>
Con esto hemos definido un tipo de capa, denominda la_capa, cuya altura es de 200
px y anchura 300 px. Además está situada a 100 px de la parte superior y a 20 px del
margen izquierdo de la página. Repito que hemos definido una clase capa, pero no
hemos contruido la capa. Para construirla usamos la etiqueta <DIV> y el atributo ID
<DIV ID="micapa">
<H1>Esto es contenido</H1>
<P>Aquí sigue más contenido HTML </p>
...
</DIV>
Cualquier bloque <DIV> con ID="mi_capa" estará en esa posición y con ese tamaño.
Esta capa puede colocarse en cualquier parte de la ventana, su posición es absoluta

(absolute). Pero también podemos definir capas de posicionamiento relativo, es decir,
que más que definir las coordenadas de suposición respecto a la ventana, describimos
su posición respecto al lugar donde aparezca en el texto. En otras palabras:
describimos desplazamiento de la capa respecto de donde la ponemos. Se definen
así:
.relativa {position: relative; left: 20px; top: 100px;}
47
</STYLE>
Este ejemplo te muestra dos capas, una absoluta y otra relativa, esta última está
construida con una etiqueta <span>, para evitar el salto de línea propio de los bloques.
Propiedades
Existen varias propiedades de las capas que podemos modificar, como son la
posición, la visibilidad, el orden en que se ponen en pantalla, etc... Son estos:
Propiedad Significado Valores
Sitúan la esquina superior izquierda de la capa

respecto a la esquina superior izquierda de la capa
distancia en pixels,
left y top donde esté metida. Hay que tener en cuenta que
por defecto cero.
el documento completo también se considera una
capa.
width y height Determinan la anchura y altura de la capa. un tamaño en pixels.
Nos permite definir el área que se podrá ver dentro

de la capa. Por ejemplo, clip:rect(20px 30px
40px 10px);recortará la capa creando un
clip cuadro visible cuya esquina superior izquierda está un área.
a 10 pixels por la izquierda y 20 por arriba de la de
la capa y cuyo tamaño sería de 30-10 de ancho y
40-20 de alto.
número positivo, por

Las capas con un mayor z-index se colocarán defecto las capas
más arriba (se dibujarán al final, encima de las definidas en el
z-index
otras). Debe ser un valor positivo y único: dos código HTML más
capas no pueden tener el mismo z-index. tarde están más
arriba.
visible, hidden (o
culta)
o inherit(hereda la
visibilidad de la capa
padre). En aquellas
visibility Especifican si la capa debe verse o estar oculta. capas que
simplemente estén
dentro de la página
principal, este valor
es equivalente
a visible.
48
El HTML5 (HyperText Markup Language, versión 5) : es la quinta revisión del

lenguaje de programación “básico” de la World Wide Web, el HTML.
Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo problemas con
los que los desarrolladores web se encuentran, así como rediseñar el código
actualizandolo a nuevas necesidades que demanda la web de hoy en día.
Debido a que estos cambios afectaran la forma de desarrollar la web en un futuro

inmediato, desde The Process, plantearemos una serie de artículos donde
desvelaremos los cambios más importantes. Actualmente el HTML5 está en un estado
BETA, aunque ya algunas empresas están desarrollando sus sitios webs en esta
versión del lenguaje. A diferencia de otras versiones de HTML, los cambios en HTML5
comienzan añadiendo semántica y accesibilidad implícitas, especificando cada detalle
y borrando cualquier ambigüedad. Se tiene en cuenta el dinamismo de muchos sitios
webs (facebook, twenti, etc), donde su aspecto y funcionalidad son más semejantes a
aplicaciones webs que a documentos.
Mejor estructura
Actualmente es abusivo el uso de elementos DIV para estructurar una Web en

bloques. El HTML5 nos brinda varios elementos que perfeccionan esta estructuración
estableciendo qué es cada sección, eliminando así DIV
Innecesarios. Este cambio en la semántica hace que la estructura de la web sea más
coherente y fácil de entender por otras personas y los navegadores podrán darle más
importancia a según qué secciones de la
web facilitándole además la tarea a los buscadores, así como cualquier otra aplicación
que interprete sitios web. Las webs se dividirán en los siguientes elementos:
<section></section> - Se utiliza para representar una sección general” dentro de un

documento o aplicación, como un capítulo de un libro. Puede contener subsecciones y
si lo acompañamos de h1-h6 podemos estructurar mejor toda la página creando
jerarquías del contenido, algo muy favorable para el buen posicionamiento web.
<article></article> - El elemento de artículo representa un componente de una página

que consiste en una composición autónoma en un documento, página, aplicación, o
sitio web con la intención de que pueda ser reutilizado y repetido. Podría utilizarse en
los artículos de los foros, una revista o el artículo de periódico,
una entrada de un blog, un comentario escrito por un usuario, un widget interactivo o

gadget, o cualquier otro artículo independiente de contenido.
49
Cuando los elementos de <article> son anidados, los elementos de <article> interiores
representan los artículos que en principio son relacionados con el contenido del
artículo externo. Por ejemplo, un artículo de un blog que permite comentarios de
usuario, dichos comentarios se podrían representar con <article>.
<aside></aside> - Representa una sección de la página que abarca un contenido

tangencialmente relacionado con el contenido que lo rodea, por lo que se le puede
considerar un contenido independiente. Este elemento puede utilizarse para efectos
tipográficos, barras laterales, elementos publicitarios, para grupos de elementos de la
navegación, u otro contenido que se considere separado del contenido principal de la
página.
<header></header> - Elemento <header> representa un grupo de artículos

introductorios o de navegación.
<nav></nav> - El elemento <nav> representa una sección de una página que es un

link a otras páginas o a partes dentro de la página: una sección con links de
navegación.
No todos los grupos de enlaces en una página tienen que estar en un elemento <nav>,
sólo las secciones que consisten en bloques principales de la navegación son
apropiadas para ser utilizadas con el elemento <nav>. Puede utilizarse particularmente
en el pie de página para tener un menú con un listado de enlaces a varias páginas de
un sitio, como el Copyright; home page, política de uso
y privacidad. No obstante, el elemento <footer> es plenamente suficiente sin

necesidad de tener un elemento <nav>.
<footer></footer> - El elemento <footer> representa el pié de una sección, con

información acerca de la página/sección que poco tiene que ver con el contenido de la
página, como el autor, el copyright o el año.
Mejoras en los formularios
El elemento input adquiere gran relevancia al ampliarse los elementos

que se permitirán en el “type”.
 <input type="search"> para cajas de búsqueda.

 <input type="number"> para adicionar o restar números mediante botones.
 <input type="range"> para seleccionar un valor entre dos valores
predeterminados.
 <input type="color"> seleccionar un color.
 <input type="tel"> números telefónicos.
 <input type="url"> direcciones web.
 <input type="email"> direcciones de email.
50
 <input type="date"> para seleccionar un día en un calendario.

 <input type="month"> para meses.
 <input type="week"> para semanas.
 <input type="time"> para fechas.
 <input type="datetime"> para una fecha exacta, absoluta y tiempo.
 <input type="datetime-local"> para fechas locales y frecuencia.
Otros elementos muy interesantes
<audio> y <video> - Nuevos elementos que permitirán incrustar un contenido

multimedia de sonido o de vídeo, respectivamente. Es una de las novedades más
importantes e interesantes en este HTML5, ya que permite reproducir y controlas
vídeos y audio sin necesidad de plugins como el de Flash.
El comportamiento de estos elementos multimedia será como el de cualquier elemento

nativo, y permitirá insertar en un video, enlaces o imágenes, por ejemplo. Youtube, ya
ha anunciado que deja el Flash y comienza a proyectar con HTML5.
<embed> - Se emplea para contenido incrustado que necesita plugins como el Flash.
Es un elemento que ya reconocen los navegadores, pero ahora al formar parte de un
estándar, no habrá conflicto con <object>.
<canvas> - Este es un elemento complejo que permite que se generen gráficos al

hacer dibujos en su interior. Es utilizado en Google Maps y en un futuro permitirá a los
desarrolladores crear aplicaciones muy interesantes.
MODERNIZR, una biblioteca para detectar HTML5.
Modernizr es una librería de JavaScript con licencia MIT de código abierto que detecta
si son compatibles muchos elementos para HTML5 y CSS3. Dicha librería se irá
actualizando y para utilizarla solo hay que incluir en <head><script> de tu página.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dive Into HTML5</title>
<script src="modernizr.min.js"></script>
</head>
<body>
...
</body>
</html>
51
Modernizr se ejecuta automáticamente, no es necesario llamar a ninguna función tipo:

modernizr_init(). Cuando se ejecuta, se crea una objeto global llamado Modernizr, que
contiene un set de propiedades Boleanas para cada elemento que detecta. Por
ejemplo si su navegador soporta elementos canvas, la propiedad de la librería
Modernizr.canvas será “true”. Si tu navegador no soporta los elementos canvas, la
propiedad Modernizr.canvas será “false”.
if (Modernizr.canvas) {
// a crear formas!!
} else {
// no hay soporte para canvas, los siento
Canvas
HTML 5 define el elemento <canvas> como un rectángulo en la página donde se

puede utilizar Java Script para dibujar cualquier cosa. También determina un grupo de
funciones (canvas API) para dibujar formas, crear
gradientes y aplicar transformaciones.
Texto Canvas
Si tu navegador soporta las API de canvas no quiere decir que pueda soportar las API
para texto-canva. Las API de canva se han ido generando son el tiempo y las
funciones de texto se han añadido posteriormente por lo que algunos navegadores
puede que no tengan integrado las API para texto.
Video
El HTML5 ha definido un nuevo elemento llamado <video> para incrustar video en las
páginas de la web. Actualmente insertar un video en la web era imposible sin
determinados plugins como el QuickTime o el Flash.
El elemento <video> ha sido diseñado para utilizarlo sin la necesidad de que tenga
que detectar ningún script. Se pueden especificar múltiples ficheros de video y los
navegadores que soporten el video en HTML5 escogerán uno basado en el formato
que soporte.
Formatos de video
52
Los formatos de video son como los lenguajes escritos. Un periódico en inglés
contiene la misma información que un periódico en español, aunque solo uno le será
útil. Con los navegadores pasa lo mismo, necesitan saber en qué “idioma” está escrito
el video.
Los lenguajes de los videos se llaman “codecs” un algoritmo utilizado para compactar
un video. Existen docenas de codecs en uso en todo el mundo, aunque dos son los
más relevantes. Uno de estos codecs cuesta dinero por la licencia de la patente, y
funciona en safari y los iphones. El otro codec es gratis y de código abierto y funciona
en navegadores como Chromium y Firefox.
Aplicaciones OFFline
Leer página webs offline es relativamente sencillo. Te conectas a Internet, cargas una
web, te desconectas y puedes sentarte tranquilamente a leer. ¿Pero qué sucede
cuando son aplicaciones como Gmail o Google Docs? Gracias al HTML5 cualquiera
puede crear una aplicación web que funcione offline.
Las aplicaciones web offline se ejecutan como una aplicación online. La primera vez
que se visita una web offline que esté disponible, el servidor web le dirá a al navegador
los ficheros que necesita para poder trabajar desconectado. Estos ficheros pueden
ser, HTML, JavaScript, imágenes y hasta videos. Una vez que el navegador ha
descargado los ficheros necesarios podrás volver a visitar la web aunque no estés
conectado a Internet. El navegador reconocerá que estás desconectado de Internet y
utilizará los ficheros que había descargado con anterioridad. La próxima vez que te
conectes, si has realizado cambios en la web offline, estos se subirán al servidor
actualizándolo.
Geolocalización
La geo localización es la forma de suponer donde te encuentras en el mundo y si

quieres, compartir información con gente de confianza.
Existen muchas maneras de descubrir donde te encuentras, por tu dirección IP, la

conexión de red inalámbrica, la torre de telefonía móvil por la que habla tu teléfono
móvil (celular), o GPS específicos que reciben las coordenadas de longitud y la latitud
de satélites que están en el cielo.
PLACEHOLDER
53
En el primer capítulo de esta charla sobre HTML5, mencionamos por arriba sobre los
cambios en los formularios que incluye el HTML5.
Como norma para todos, un formulario es una etiqueta <form> y en su interior algunos
elementos <input type="text"> o <input type="password"> finalizado con un botón
<input type="submit"> y ya está. A continuación explicaremos algunas de estas
novedades.
Texto como PLACEHOLDER
Placeholder es un nuevo atributo que se utiliza dentro de los campos input. Sirve para
mostrar un texto dentro del input siempre y cuando el campo esté vacío o no esté
señalado. En cuanto se haga clic dentro del campo (o se llegue por el TAB), el texto
desaparecerá.
Seguramente ha visto la propiedad Placeholder antes. Por ejemplo, Mozilla Firefox

3.5 incluye textosplaceholder en la barra de localización.
Cuando se hace clic sobre la barra de búsqueda o se llega por un tab, el
texto preestablecido desaparece.
Irónicamente Firefox no da soporte a esta propiedad, al igual que IE y Opera, solo es

compatible (a día de hoy) con Safari y Chrome. Aquellos navegadores que no
soporten placeholder simplemente lo ignorarán y no mostrarán nada.
Aquí hay un ejemplo de cómo se puede incluir placeholder en un formulario:
Código:
<form>
<input placeholder="Buscar en la base de datos">
<input value="Buscar">
</form>
Campos con autofocus
El atributo de autofoco permite al usuario decidir y controlar qué campo de texto debe
ser enfocado (señalado, activado) en cuanto la página es cargada o se esté cargando,
permitiendo al usuario comenzar a escribir sin tener él que especificar cual es su
campo de texto principal en su página. El atributo de autofoco es un atributo boleano
(respuesta true - false) y no deberá haber más de un elemento en la página.
54
Muchos sitios utilizan JavaScript para focalizar y dirigir el cursor automáticamente al

campo de texto. Por ejemplo Google cuando comienza a cargar su página dirigirá el
cursos a su input de búsqueda automáticamente para que puedas empezar a escribir
tus palabras de búsqueda en su navegador. Esto puede ser conveniente para algunos
y para otros que pueden tener una necesidad específica no tanto. Si aprietas la barra
de espacio esperando que la página baje haciendo un scroll, esto no sucederá porque
está enfocado el input del formulario.
HTML5 introduce un atributo de control de autofoco en los formularios. El atributo

autofoco hace exactamente lo que suena, en cuanto la web se comienza a cargar,
mueve el cursor y así la atención del usuario a un campo <input> particular.
A día de hoy, Autofocus solo lo soportan Safari, Chrome y Opera. Firefox e IE, lo
ignorarán.
Código:
<form>
<input name="b" autofocus>
<input type="submit" value="Search">
</form>
Bootstrap twitter
Bootstrap es un framework que simplifica el proceso de creación de diseños web

combinando CSS y JavaScript. Ha sido desarrollado por Twitter que
recientemente liberó su versión 2.0. La mayor ventaja es que podemos crear interfaces
que se adapten a los distintos navegadores (responsive design) apoyándonos en un
framework potente con numerosos componentes webs que nos ahorrarán mucho
esfuerzo y tiempo.
Características principales de Bootstrap
Bootstrap ofrece una serie de plantillas CSS y ficheros Javascript que nos permiten
integrar el framework de forma sencilla y potente en nuestros proyectos webs.
 Permite crear interfaces que se adapten a los diferentes navegadores, tanto de

escritorio como tablets y móviles a distintas escalas y resoluciones.
 Se integra perfectamente con las principales librerías Javascript, por ejemplo

JQuery.
55
 Ofrece un diseño sólido usando LESS y estándares como CSS3/HTML5.
 Es un framework ligero que se integra de forma limpia en nuestro proyecto

actual.
 Funciona con todos los navegadores, incluido Internet Explorer

usando HTML Shim para que reconozca los tags HTML5.
 Dispone de distintos layout predefinidos con estructuras fijas a 940 píxeles de

distintas columnas o diseños fluidos.
http://twitter.github.io/bootstrap/
56
57
Cuestionario
1. Preparar el entorno de trabajo, para ello deberá realizar la siguientes acciones:
a. Deberá tener instalado un entorno de desarrollo(Netbeans, dreamweaver, u

otro editor)
b. Descargar el bootstrap de twitter: https://github.com/twbs/bootstrap
c. Elegir una plantilla del bootstrap
d. Crear el árbol de carpetas para un mejor orden
e. Referenciar todos los archivos necesario en el archivo index(archivo de inicio)
2. Con la plantilla instalada:
a. Crear un menú en la parte izquierda
b. Insertar carousel en la página de inicio(debe copar toda la página)
c. Insertar un menú horizontal en la parte superior de la página, con las

siguientes opciones ”Home, contactos, inicio de sesión”
3. cargar con contenido cada uno de las opciones, para la opción de “inicio de sesión”,
deberá diseñar un formulario con las siguientes etiquetas: Usuario y password y un
botón para enviar los datos.
58
III
UNIDAD
PHP
59
¿Qué es PHP?
PHP (acrónimo recursivo de PHP: Hypertext Preprocessor) es un lenguaje de código abierto muy
popular especialmente adecuado para el desarrollo web y que puede ser incrustado en HTML.
Bien, pero ¿qué significa realmente? Un ejemplo nos aclarará las cosas:
En lugar de usar muchos comandos para mostar HTML (como en C o en Perl), las páginas de
PHP contienen HTML con código incrustado que hace "algo" (en este caso, mostrar "Hola ¡soy un
script de PHP!). El código de PHP está encerrado entre las etiquetas especiales de comienzo y
final <?php y ?> que permiten entrar y salir del "modo PHP".
Lo que distingue a PHP de algo como Javascript del lado del cliente es que el código es ejecutado
en el servidor, generando HTML y enviándolo al cliente. El cliente recibirá el resultado de ejecutar
el script, aunque no se sabría el código subyacente que era. El servidor web puede ser incluso
configurado para que procese todos los ficheros HTML con PHP, por lo que no hay manera de
que los usuarios puedan saber qué se tiene debajo de la manga.
Lo mejor de usar PHP es que es extremadamente simple para el principiante, pero a su vez ofrece
muchas características avanzadas para los programadores profesionales. No sienta miedo de leer
la larga lista de características de PHP. En unas pocas horas podrá empezar a escribir sus
primeros scripts.
Aunque el desarrollo de PHP está centrado en programación de scripts del lado del servidor, se
puede utilizar para muchas otras cosas. Siga leyendo y descubra más sobre PHP en la sección
¿Qué se puede hacer con PHP?, o vaya directo al tutorial introductorio si solamente está
interesado en programación web.
60
A continuación te presento la Estructura Básica de un documento PHP.

<html> ----> Etiqueta de apertura de HTML
<head> ----> Etiqueta de apertura del Encabezado
<title> ----> Etiqueta de apertura del Titulo
dentro de estas etiqueta va el título de tu web
</title> ----> Etiqueta de Cierre
</head> ----> Etiqueta de Cierre de Encabezado
<body> ----> Etiqueta de Apertura del Cuerpo
El codigo php a insertar es el siguiente:
61
<?php ----> Permite abrir PHP

Aquí dentro va el código php
?> ----> Permite Cerrar PHP
</body> ----> Etiqueta de Cierre del Cuerpo

</html> ----> Etiqueta de Cierre de Hmtl
Ya Listo, ya analizaste ¡Comencemos!

Lo siguiente se debe tapearlo en el bloc de notas:
<html>
<head>
<title>
Mi primera aplicación web
</title>
</head>
<body>
<?php
echo "Hola Mundo, estoy aprendiendo php";
?>
</body>
</html>
Ahora guardamos el archivo con la extensión .php, y con el nombre de (index2.php), en la

siguiente ruta: disco C:\xampp\htdocs. Para abrir el archivo, ahora vamos a cargar el navegador
web: en la barra de dirección escribimos los siguiente: localhost/index2.php
62
Archivo de configuración php.ini
Este archivo sirve para indicar una serie de valores que determinan el comportamiento del
intérprete PHP. Lo encontramos dentro de la distribución php en el directorio raíz bajo el nombre
php.ini-recommended o php.ini-dist. Se trata de un archivo de texto, que podemos abrir con
cualquier editor que trabaje con texto simple (*.txt). Como siempre, nos será más cómodo trabajar
con un editor como html-kit que coloree sintácticamente el archivo.
Lo primero que debemos hacer es en efecto editar una de las dos versiones disponibles,
configurarla de acuerdo a nuestras necesidades, y guardarla con el nombre php.ini. ¿Cuál
escoger? las dos son el mismo archivo, con distintos valores por defecto.
Dentro de este archivo, todo lo que comienza con un punto y coma es un comentario, y es
ignorado. El texto marcado con corchetes, como [PHP] indica una cabecera de sección.
Las instrucciones se llaman directivas, y están formadas por una pareja compuesta por la clave y
su valor, por ejemplo: asp_tags = Off. Y ten cuidado, porque diferencia entre mayúsculas y
minúsculas. No es lo mismo asp_tags que Asp_tags. También verás que algunas directivas
comienzan con ; lo que quiere decir que estan comentadas ya que no son necesarias por defecto.
Debes desactivarlas sin necesitas esa funcionalidad.
Otro dato más a tener en cuenta. En Windows las rutas o paths se escriben con la barra invertida
(c:\windows) mientras que unix utiliza la barra (/usr/local/bin/...). En php.ini deberás indicar algunas
rutas. Los formatos admisibles son:
C:\directorio\directorio
\directorio\directorio
/directorio/directorio/
¿Cómo trabaja el archivo php.ini?
Antes que nada aclarar que el proceso de instalación de PHP en tu ordenador NO crea el archivo
php.ini. Una vez instalado PHP debes escoger uno de los archivos proporcionados como ejemplo
y renombrarlos a php.ini
Si tenemos PHP como módulo del servidor, el archivo php.ini se lee cada vez que se reinicia. Por
lo tanto tienes que reiniciar para que actualice los cambios. Si PHP está instalado como cgi (no
recomendado) se leerá el php.ini en cada llamada a PHP. En ambos casos, lo primero a tener en
cuenta será, pues, donde archivar php.ini. El servidor lo buscará sucesivamente -y por este orden-
en el propio directorio php (c:/php si usas la instalación por defecto). Si no lo encuentra alli lo
buscará en la ruta definida como variable de entorno y finalmente en el directorio de sistema
63
(c:/windows)
Lo aconsejado es mover php.ini a tu directorio de sistema (c:\windows si tienes W98). Cuida no

dejar ninguna versión antigua de php.ini en el directorio php, porque podría ser leida con
preferencia a la que hayas movido a /windows/. Y *recuerda* que para que cualquier cambio que
realices en el php.ini surta efecto, debes reiniciar tu servidor.
Los problemas más comunes que encontrarás con PHP pasan casi siempre por una incorrecta
configuración de php.ini, y en muchos casos, por tener el archivo mal ubicado o duplicado,
leyéndose un archivo distinto del que tu estas configurando. Si haces un cambio en php.ini y este
no se refleja en el funcionamiento de PHP, comprueba la sintaxis que has usado; que has
reiniciado el servidor correctamente y que este lee el php.ini deseado. Controla siempre tus copias
de php.ini !!
Es altamente recomendable que tengas preparada una página con la función phpinfo() para ver
cómo queda la configuración de tu php:
<?php
phpinfo();
?>
Guarda esta página como info.php, y tenla a mano para comprobar la configuración en cuanto
tengas tu php listo.
Entrando a la práctica:
Un programita más útil que "Hola Mundo"
Un problema sencillo que se nos puede presentar y que no se puede resolver empleando solo
HTML es que una página esté disponible sólo los 10 primeros días del mes.
Mostraremos un cartel que diga que el sitio se encuentra disponible si la fecha es menor o igual a
10, en caso contrario mostraremos un mensaje de sitio fuera de servicio.
Para obtener la fecha del servidor web debemos llamar a la función date y requerir sólo el día:
$dia=date("d");
A las variables en PHP se les antecede el caracter $. Si a la función date le pasamos el string "d"
retornará sólo el día (si queremos la fecha completa: $fecha=date("d/m/Y")
Para verificar si la variable $dia es menor o igual a 10, debemos emplear la instrucción if, similar a
otros lenguajes.
Entonces la página con el programa queda de la siguiente forma:
64
<html>
<head></head>
<body>
<?php
$dia=date("d");
if ($dia<=10) {
echo "sitio activo";
} else {
echo "sitio fuera de servicio";
?>
</body>
</html>
Tipos de variables
Los nombres de variables comienzan con el signo $ y son sensibles a mayúsculas y minúsculas
(no así las palabras claves del lenguaje).
En PHP no es necesario definir el tipo antes de utilizarla, las mismas se crean en el momento de
emplearlas. Las variables se declaran cuando se le asigna un valor, por ejemplo:
$dia = 24; //Se declara una variable de tipo integer.
$sueldo = 758.43; //Se declara una variable de tipo double.
$nombre = "juan"; //Se declara una variable de tipo string.
$exite = true; //Se declara una variable boolean.
También podemos hacer notar que para disponer comentarios de línea debemos utilizar dos
caracteres //
Para la impresión de variables utilizaremos inicialmente el comando echo. Un programa completo

que inicializa y muestra el contenido de cuatro variables de distinto tipo es:
<html>
<head>
65
<title>Problema</title>
</head>
<body>
<?php
$dia = 24; //Se declara una variable de tipo integer.
$sueldo = 758.43; //Se declara una variable de tipo double.
$nombre = "juan"; //Se declara una variable de tipo string.
$exite = true; //Se declara una variable boolean.
echo "Variable entera:";
echo $dia;
echo "<br>";
echo "Variable double:";
echo $sueldo;
echo "<br>";
echo "Variable string:";
echo $nombre;
echo "<br>";
echo "Variable boolean:";
echo $exite;
?>
</body>
</html>
Variables de tipo string

Una variable de este tipo puede almacenar una serie de caracteres.
$cadena1="Hola";
$cadena2="Mundo";
echo $cadena1." ".$cadena2;
66
Para concatenar string empleamos el operador .
Tengamos en cuenta que el comando echo de más arriba lo podemos hacer más largo de la
siguiente forma:
echo $cadena1;
echo " ";
echo $cadena2;
A medida que uno haga ejercicios podremos resumir en un solo comando echo la salida de
múltiples variables.
Cuando una cadena encerrada entre comillas dobles contiene una variable en su interior, ésta se
trata como tal, por lo tanto se utilizará su contenido para el almacenamiento.
$dia=10;
$fecha="Hoy es $dia";
echo $fecha;
En pantalla se muestra: Hoy es 10
Es decir, en la cadena, se sustituye el nombre de la variable $dia, con el contenido de la misma.
Una cadena se puede definir con las comillas simples (pero es importante tener en cuenta que no
se sustituyen las variables si empleamos comillas simples):
$nombre='juan carlos';
Estructura condicional (if)
Cuando se pretende que el programa, una vez llegado a un cierto punto, tome un camino concreto
en determinados casos y otro diferente si las condiciones de ejecución difieren, se utiliza el
conjunto de instrucciones:
if, else y elseif. La estructura base de este tipo de instrucciones es la siguiente:
if (Condición) {
Instrucción 1;
Instrucción 2;
67
else{
Instrucción A;
Instrucción B;
Cuando la ejecución llega al punto donde se encuentra la instrucción if, el programa verificará el
cumplimiento o no de la condición. Si la condición es verdadera se ejecutarán las instrucciones 1 y
2, de lo contrario, se ejecutarán las instrucciones A y B.
En los casos en que las condiciones sean varias, se pueden utilizar los if de un modo denominado
anidado o anillado, como se indica de la manera siguiente:
if (Condicion 1) {
Instrucción 1;
Instrucción 2;
}else{
if (Condicion 2) {
Instrucción A;
Instrucción B;
} else {
Instrucción X;
Instrucción Z;
De este modo se pueden introducir tantas condiciones como se quiera dentro de la condición
principal. Una variante de este sistema es utilizando la sentencia elseif, que permite en una sola
línea introducir una condición adicional:
if (Condicion 1) {
Instrucción 1;
Instrucción 2;
}
elseif (Condicion 2){
Instrucción A;
68
Instrucción B;
}else{
Instrucción X;
Instrucción Z;
}
Estructuras repetitivas (for - while - do/while)
Las estructuras repetitivas son similares al lenguaje C.
Estructura for:
for([Inicialización de la variable];[Condición];[Incremento o decremento de la variable])

{
[Instrucciones];
}
El primer ejemplo que haremos es mostrar en la página los números del 1 al 100:
html>
<head>
</head>
<body>
<?php
for($f=1;$f<=100;$f++){
echo $f;
echo "<br>";
?>
</body>
</html>
Quien no ha visto la estructura for en otro lenguaje pasamos a explicarla:
for($f=1;$f<=100;$f++){
echo $f;
69
echo "<br>";
El primer argumento del for es la inicialización de una variable, en este caso se inicializa la
variable $f con el valor 1. Este primer argumento del for se ejecuta solo una vez. Luego se ejecuta
el segundo argumento que es la condición. Si la misma se verifica como verdadera se ejecuta
todo el bloque comprendido entre las llaves de apertura y cerrado. Luego de haberse ejecutado el
bloque repetitivo se ejecuta el tercer argumento del for que es el incremento de la variable, en este
caso $f++ incrementa el contenido de la variable $f en 1 (también podemos poner en lugar de
$f++ la asignación $f=$f+1).
Luego del incremento de la variable se ejecuta nuevamente la condición del for (segundo
argumento), de validarse nuevamente verdadero pasa a ejecutar el bloque repetitivo.
Este ciclo se repite hasta que la condición del for se verifica falsa.
La segunda estructura repetitiva es:
while (condición){
[Instrucciones];
}
Esta estructura está en casi todos los lenguajes. El bloque se repite mientras la condición del
while sea verdadera.
La condición del while se verifica antes de ingresar al bloque a repetir. Si la misma se verifica falsa
la primera vez no se ejecutará el bloque.
Veamos un ejemplo: Generar un valor aleatorio entre 1 y 100, luego imprimir en la página desde 1
hasta el valor generado (de uno en uno):
<html>
<head>
</head>
<body>
<?php
$valor=rand(1,100);
$inicio=1;
while($inicio<=$valor){
echo $inicio;
echo "<br>";
70
$inicio++;
}
?>
</body>
</html>
La variable $inicio tiene el valor 1 antes de ingresar al while. Cada vez que se ejecuta una vez el
bloque del while se incrementa $inicio en uno. Cuando $inicio supere la variable aleatoria $valor
finalizará la estructura repetitiva y pasará a ejecutarse la instrucción inmediatamente siguiente a la
llave de cerrado.
Es importante notar que luego de la condición del while NO disponemos PUNTO y COMA.
Por último tenemos en el lenguaje una estructura repetitiva similar al while llamada do/while,
donde la condición se verifica luego de ejecutarse el bloque repetitivo.
do {
[Instrucciones];
} while (condición);
71
Cuestionario:
1. Sabiendo que la función rand nos retorna un valor aleatorio entre un rango de dos enteros:
$num=rand(1,100);
En la variable $num se almacena un valor entero que la computadora genera en forma
aleatoria entre 1 y 100.
Hacer un programa que lo muestre por pantalla al valor generado. Mostrar además si es
menor o igual a 50 o si es mayor.
Para imprimir el contenido de una variable también utilizamos el comando echo:
2. Definir una variable de cada tipo: integer, double, string y boolean. Luego imprimirlas en la
página, una por línea.
3. Definir tres variables enteras. Luego definir un string que incorpore dichas variables y las
sustituya en tiempo de ejecución.
Recordar que una variable se sustituye cuando el string está encerrado por comillas dobles:
$precio=90;
echo "La computadora tiene un precio de $precio";
4. Generar un valor aleatorio entre 1 y 3. Luego imprimir en castellano el número (Ej. si se

genera el 3 luego mostrar en la página el string "tres").
Para ver si una variable es igual a cierto valor debemos plantear una condición similar a:
if ($valor==3)
//algoritmo
5. Mostrar la tabla de multiplicar del 2. Emplear el for, luego el while y por último el do/while.
La estructura for permite incrementar una variable de 2 en 2:
for($f=2;$f<=20;$f=$f+2)
72
Referencias Bibliográficas
 Domingo A. Dirección y gestión de Proyectos
 Martin P. Willey Getting in Project management
 Universidad de Valencia. Apuntes asignatura IPI Ingeniería Informática.
 Pérez C. Mysql para Windows y Linux Editorial RA-MA
 Pérez C. Macromedia Dreamweaver Mx. Desarrollo de aplicaciones y base de datos

en la web. Editorial RA-MA
 http://www.phpya.com
 http://www.aulambra.com
 http://www.webtaller.com
Referencias bibliográficas de la biblioteca virtual de la universidad
 http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10121926&p00=di
seño%20web
Guía para el diseño y elaboración de páginas web
 http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10732631&p00=ht
ml
Aplicaciones web Sociales
 http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10433843&p00=fu
ndamento%20de%20php
Fundamento de PHP
 http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10156644&p00=p
hp
PHP y MySQL
 http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10121926&p00=di
seño%20web
Guía para el diseño y elaboración de páginas web
 http://site.ebrary.com/lib/bibliocauladechsp/docDetail.action?docID=10732631&p00=ht
ml
Aplicaciones web Sociales
73

Texto Digital

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Texto Digital

Transféré par

Droits d'auteur :

Formats disponibles

Tecnología Web I 2013

El curso de Tecnología Web I es un curso orientado al conocimiento

La importancia de éste curso es poder dar soluciones web a personas

Archivo de configuración de php 61

Cuestionario III Unidad 71

Administrador de Mambo/Joomla (Administrator): El administrador de

Archivo (Archive): los ítems de contenido pueden ser archivados y manipulados

Base de datos Una base de datos es un conjunto de información organizada.

Categoría (category): Una categoría es un nombre genérico para un conjunto de

Content Management System (CMS) o Sistema Gestor de Contenidos: CMS es un

Espacio de trabajo (workspace): El espacio de trabajo es la sección de la sección

Mambots (o Mosbot): Un Mambot es una función que intercepta el contenido antes

Sistemas de la Uladech - Católica. Actualmente la Superintendencia Nacional de

Registros Públicos (SUNARP), ubicada en Av. José Gálvez 125-Chimbote, ha

en el área de sistemas. Lucia, sin dudarlo, se presenta al examen de evaluación

(conocimientos, currículo vitae y entrevistas), finalmente, Lucia es seleccionada

después de un riguroso proceso de contratación para desempeñarse como diseñadora

del portal web de la institución en mención.

Lucia, en su primer día trabajo conoce a sus compañeros y a su jefe inmediato

(Juan Carlos), en su primera conversación con su Jefe aprovecha para conocer el

sistema de trabajo, la metodología, técnicas y herramientas de diseño que viene

equipo de Juan Carlos trabaja usando frameworks para el diseño, utilizan

herramientas como HTML, JavaScript, CSS, PHP, entre otras herramientas.

para que se adapte a su nuevo sistema de trabajo y aprenda las herramientas y al

bootstrap de twitter, y a la vez que el portal permita enviar correos a sus

pondrá a prueba su conocimiento, dicha aplicación debe ser entregada en un mes

como plazo máximo, y le solicita cuanto antes envié un cronograma de planificación de

HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.

Como ves todo va mezclado: información y formato, algo que ha comenzado a

Los inicios: HTML 2.0

Cuando internet salió del ámbito universitario y se convirtió en una herramienta de

Este standard no terminó de cumplir lo esperado, además en esas fechas la sección

principales navegadores de la época, osea, Netscape y Explorer, ya estaban

Estructura interna de una página HTML.

Muchos elementos HTML requieren una marca de comienzo y otra de finalización.

La estructura básica de una página HTML es:

Si observamos toda página comienza con la marca:<html> y finaliza con la

<body> Cuerpo de la página. </body>

Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y

Ahora puede ir a la sección de problema resuelto y ver el ejemplo ejecutándose en el

Todo el texto que disponemos en el cuerpo de la página aparece en la misma línea, no

Cuando aparece la marca <br> el navegador continua con el texto en la línea

Implementemos una página que muestre los nombres de distintos lenguajes de

Un párrafo es una oración o conjunto de oraciones referentes a un mismo tema. Todo

SQL, Structure Query Language (Lenguaje de Consulta Estructurado) es un lenguaje

MySQL es un interpretador de SQL, es un servidor de base de datos.<br>

ordenarlos, hacer consultas y realizar muchas operaciones, etc., resumiendo:

<A href="dirección de destino" target="destino">Pulsar para saltar</A>

La dirección de destino será la página web especificada mediante una URL, en

Cualquier elemento conectado a la red internet se identifica por un conjunto de cuatro

donde protocolo puede ser uno de los siguientes:

Es el protocolo para la transmisión de documentos HTML, es decir, el que

Es similar al anterior pero con la particularidad de que la información viaja

Es un protocolo para la transmisión de ficheros (File Transfer Protocol). Permite

Otro protocolo para la transmisión de datos, pero en este caso a través de

Mediante este protocolo accedemos a los denominados grupos de noticias,

Es un terminal de acceso remoto en modo texto. Es un sistema bastante

Pues bien si en esta página colocara un enlace en la forma

<A href="tema3.htm">Tema 3</A>

Esta dirección realmente apuntaría a

Como último detalle a tener en cuenta es el uso de la / como forma de referirse a la

Estaría apuntando a http://www.uladech.edu.pe

<A href="#ancla">Ancla en esta página</A>

<A href="enlaces.html#ancla">Ancla en la página enlaces.html</A>