Page 1

Desarrollo web con HTML5, CSS3 y Javascript(JQuery)

M贸dulo1. Introducci贸n al desarrollo HTML

1


Contenido Módulo 1: Introducción al desarrollo con HTML.............................................................. 5 Presentación. ................................................................................................................ 5 Objetivos. ...................................................................................................................... 5 Características de HTML. Versiones ................................................................................. 6 Elementos de HTML.......................................................................................................... 7 Directivas vacías. ........................................................................................................... 8 Directivas delimitadoras. ............................................................................................ 10 Estructura de un documento creado con HTML ............................................................ 16 <HEAD> ....................................................................................................................... 17 <BODY> ....................................................................................................................... 17 Marcas específicas para documentar los documentos. ................................................. 18 Estilos de presentación ................................................................................................... 20 Listas. Tipo de listas ........................................................................................................ 22 Tablas. Tipos de tablas.................................................................................................... 26 Básicas. ........................................................................................................................ 26 Avanzadas ................................................................................................................... 30 Enlaces. Documentos hipertexto................................................................................... 31 ¿Qué es lo que ocurre cuando pinchamos en un enlace? .......................................... 32 Sintaxis ........................................................................................................................ 33 El atributo target ......................................................................................................... 34 Práctica........................................................................................................................ 38 Atributo name ............................................................................................................. 39 Enlace a un email ........................................................................................................ 41 Enlace desde una imagen ........................................................................................... 41

2


Marcos. ........................................................................................................................... 42 Estructura de los Marcos ............................................................................................ 42 Sintaxis. ....................................................................................................................... 43 Actividades .................................................................................................................. 50 Mรกs atributos de los <frameset> ................................................................................ 52 Mรกs atributos de los <frame> ..................................................................................... 52 Los enlaces en el Marcos. ........................................................................................... 53 Marquesinas. .................................................................................................................. 55 Sintaxis ........................................................................................................................ 56 Atributos ..................................................................................................................... 56 Formularios. Tratamiento de la informaciรณn del usuario. ............................................. 59 Sintaxis ........................................................................................................................ 59 <INPUT> ...................................................................................................................... 60 Input Text Fields .......................................................................................................... 60 Sintaxis..................................................................................................................... 60 Input Password Field .................................................................................................. 61 Sintaxis..................................................................................................................... 61 Input Radio Buttons ................................................................................................... 62 Sintaxis..................................................................................................................... 62 Input Checkboxes ....................................................................................................... 63 Sintaxis..................................................................................................................... 63 Textarea ...................................................................................................................... 64 Sintaxis..................................................................................................................... 65 Select ........................................................................................................................... 66 Sintaxis..................................................................................................................... 66

3


Checkboxes ................................................................................................................. 67 Sintaxis..................................................................................................................... 67 Input Submit Button .................................................................................................. 68 Sintaxis..................................................................................................................... 69 Mapas interactivos. Funcionamiento. Construcción. ..................................................... 70 Etiqueta <MAP> .......................................................................................................... 72 Imágenes como mapas ............................................................................................... 72 Sintaxis: ................................................................................................................... 72 Etiqueta <AREA> ......................................................................................................... 73 ¿Cómo obtener coordenadas de la imagen? .............................................................. 77 HREF ............................................................................................................................ 80 Efectos dinámicos en el documento. ............................................................................. 82

4


Módulo 1: Introducción al desarrollo con HTML

Presentación. Una de las grandes revoluciones del mundo moderno ha sido el inicio del mundo Web. Esta fuente inabarcable de conocimiento, entretenimiento, y comunicación se ha mantenido sobre unos fundamentos muy simples y accesibles, como son: el protocolo HTTP, el esquema de direcciones URL y el lenguaje HTML. En el desarrollo del curso profundizaremos en el lenguaje HTML, concretamente en su última versión.

Objetivos. Al finalizar el módulo el alumno conocerá y sabrá identificar cada una de las partes que forman parte del lenguaje HTML. Asimismo conocerá la evolución de dicho lenguaje a lo largo del tiempo y las distintas versiones. También conocerá distintos software informático para crear y editar códigos HTML.

5


Características de HTML. Versiones HTML define la estructura de las páginas webs. Todas las páginas webs que existen en la actualidad se fundamentan en el lenguaje HTML, haciendo que dicho lenguaje sea un lenguaje internacional. La sencillez de HTML hace que sea posible crear contenidos para páginas webs de calidad sin necesidad de contar con otras herramientas ni conocimientos especializados. De hecho la sencillez en su utilización es una de las claves de su éxito. Desde un principio se trató de dar a HTML una estructura formal que hiciera que el trabajo desarrollado fuera fácil de leer, por ello, el elemento básico de HTML es el texto. Para escribir el contenido de una página web en HTML basta con tener un editor de texto plano como el que acompaña a cualquier sistema operativo (bloc de notas en el caso de Windows), teniendo en cuenta que hay que almacenar el archivo con el formato adecuado, en nuestro caso ".html". También existen otras herramientas más avanzadas disponibles para construir documentos HTML, algunos son: Pipad, HTML-Kit, EditPlus, TextPad, Amaya, AceHTML 5 Freeware y muchos más cuya base de funcionamiento es la misma. Por último destacar el software Dreamweaver de Adobe. Es la aplicación más utilizada por los desarrolladores web aunque hay que tener en cuenta que no es un software gratuito. Destacar que en general estas herramientas incluyen funcionalidades para validar los códigos, comprobar la existencia de elementos auxiliares, dar formato al texto... Esta es una gran diferencia que existe entre dichas aplicaciones y los editores de texto plano. Desde su aparición, HTML ha ido evolucionando junto a los distintos navegadores, herramientas totalmente imprescindible en el mundo de internet. La elaboración de cada una de las versiones de HTML que ha ido saliendo es un proceso delicado que se encargan de definirla W3C (World Wide Web Consortium). El primer nivel existente es el 0. Dicha versión describe la estructura básica de un documento con el contenedor principal (<HTML>) y las dos secciones principales (<HEAD> y <BODY>).

6


Posteriormente se avanzó hacia el nivel 1, añadiendo estilos físicos como algunos lógicos. Esta primera versión comenzó a ser insuficiente y se hizo necesario añadirle nuevos comandos para mejorar el aspecto de las webs y funcionalidades más potentes. Esto trajo consigo la primera ruptura del estándar (HTML 1.0). A la versión 1.0 le siguió la 2.0. La principal contribución de esta versión es la incorporación de formularios, convirtiendo el uso de la web a una interfaz de servicios y no sólo de contenidos. La versión 3.0 ó HTML+ apareció como una evolución lógica del estándar, pero nunca pasó del estado experimental. Debido a la poca aceptación de ésta versión apareció la versión 3.2, mejorando las deficiencias de la versión 3.0. La culminación de éste proceso llevó a la aparición de la versión 4.0, normalizando el lenguaje e incorporando una serie de mejoras propuestas por los navegadores (en particular por el de Microsoft, Internet Explorer). Esta versión se mantuvo durante casi 10 años, dando lugar a la versión actual, HTML5. En esta nueva versión no se cambia lo esencial, se mantiene la mayoría de los elementos presentes en la versión anterior lo que se añaden medios que simplifican el trabajo con nuevas herramientas de gestión y facilita la inclusión de elementos multimedia.

Elementos de HTML

Junto con el texto, el otro elemento básico de HTML es el conjunto de directivas o elementos del lenguaje. Los elementos son palabras especiales que sirven para indicarle al navegador las acciones que debe realizar para interpretar el documento HTML. Todos los elementos responden a la misma estructura.

7


Los signos "<" (menor que) y ">" (mayor que) delimitan un elemento directiva del código HTML. El final de un elemento también puede ser "/>". Los elementos o directivas pueden ser de dos tipos: vacías, abiertas o unarias y delimitadores o contenedores. Directivas vacías. Las primeras solo necesitan aparecer una vez para que se ejecute la acción asociada. Un ejemplo de ella es la siguiente instrucción.

Con este elemento conseguimos insertar un espacio en el sentido vertical. Otro ejemplo de este tipo de directivas es la que se utiliza para insertar imágenes. Dicha directiva es la siguiente.

8


La directiva empieza con "<img". Con esta directiva indicamos que vamos a insertar una imagen. Esta directiva debe ir acompaĂąada de cierto parĂĄmetros como han podido ver. Expliquemos el significado de cada uno de ellos.

Tanto el ancho como el alto se pueden omitir en la directiva. Si se omiten la imagen se insertarĂĄ con las dimensiones originales.

9


Directivas delimitadoras. Las directivas delimitadoras siguen la siguiente sintaxis: el comienzo se expresa con el texto de la directiva entre รกngulos, como por ejemplo <p>. El final se expresa con el cierre de la directiva con el texto precedido de la barra de divisiรณn (</p>). Veรกmoslo con un ejemplo.

El contenido entre las etiquetas <p> y </p> es interpretado como texto HTML. Dentro de un bloque delimitado se pueden incluir otras directivas. Practiquemos un poco lo explicado. Para ello abrimos un documento del bloc de notas y escribimos lo siguiente.

10


Pueden observar que existen varios elementos. Aún no los hemos visto pero los iremos viendo a medida que avancemos en el curso. Como pueden apreciar se ha declarado un texto en HTML.

Para comprobar su funcionamiento en el navegador debemos almacenarlo. Para ello pulsar sobre el menú "Archivo" y seleccionar "Guardar como...". Se abrirá una ventana de diálogo donde debemos introducir el nombre del archivo, ubicación y el formato. Recordar que debemos almacenarlo con formato ".html"

Una vez almacenado, para ejecutarlo basta con hacer doble clic sobre el icono.

Se abrirá el navegador de internet con la frase que hemos escrito mostrando una apariencia similar a la que se muestra en la figura.

11


Prueben ahora a abrir con el bloc de notas el archivo que hemos creado y a cambiar el texto. Una vez realizado el cambio guardar el documento y comprobar los cambios al ejecutarlo en el navegador. Como dijimos anteriormente, dentro de un elemento o directiva podemos incluir más elementos o directivos. Veámoslo con otro ejemplo práctico. Vamos a abrir el ejemplo anterior y añadiremos la siguiente sentencia dentro del texto.

Para comprobar los cambios guardar el archivo y abrirlo con el navegador web tal y como se explicó anteriormente. Pueden apreciar que la palabra "texto" aparece ahora en negrita, concluyendo que el elemento "<b>" convierte el texto en negrita. Durante la realización del curso veremos bastantes elementos y directivas de HTML.

Ejercicio de práctica Vamos a practicar un poco lo explicado hasta el momento. Vamos a crear un documento HTML donde vamos a incluir los dos tipos de directivas que hemos

12


explicado. Se va a insertar un texto (directivas delimitadoras) y una imagen y un espacio vertical (directivas vacías). También añadiremos una directiva dentro de otra directiva como vimos en ejemplos anteriores. El resultado final será el siguiente.

Para conseguir este resultado vamos a trabajar paso por paso. Paso 1: En primer lugar vamos a abrir un documento de bloc de notas y vamos a añadir las directivas correspondientes de un documento html.

13


Paso 2: Vamos a insertar el texto entre las etiquetas <body>. El texto vamos a recordar que es una directiva delimitadora. Por tanto debemos añadir las etiquetas de apertura y de cierre de texto.

Paso 3: En la imagen donde vimos el resultado final en el navegador vimos que la palabra “directivas” está resaltada en negrita. Por tanto existe una directiva dentro de otra directiva. Vamos a añadirla.

14


Paso 4: Incluir un espacio vertical para insertar la imagen posteriormente. Como explicamos anteriormente, se trata de una directiva vacía.

Paso 5: Insertar la imagen. Para insertar la imagen necesitamos saber la ubicación del archivo, nombre del archivo, formato de la imagen y el tamaño que deseamos para la imagen. Supongamos que la imagen se encuentra en una carpeta llamada “Imágenes” que se encuentra en C: El código quedaría de la siguiente manera.

Ya hemos insertado todo el código necesario para alcanzar el resultado deseado. El siguiente paso será almacenarlo para comprobar su correcto funcionamiento. Para almacenarlo ir al menú “Archivo” y seleccionar la opción “Guardar”. Guardarlo con el nombre “Ejercicio 1.html”. Recordar que es muy importante definir el formato html.

15


Para comprobar el resultado obtenido hacer doble clic sobre el icono del archivo que hemos guardado y se abrirá en vuestro navegador web. Si colocan el cursor del ratón sobre la imagen y lo mantienen estático pueden ver que aparece el texto descriptivo que hemos añadido a la imagen. Es muy importante añadir siempre texto descriptivo a las imágenes que insertemos.

Estructura de un documento creado con HTML

Ya es momento de ver cómo está construido un documento y cuáles son sus componentes. Todo el contenido de un documento HTML debe encontrarse englobado por la directiva <html>. Es decir, la primera línea debe aparecer la directiva <html> y la última línea </html>. Todo lo que quede encerrado entre estas dos etiquetas se interpretará como documento HTML. Un documento HTML está formado por dos elementos: el <HEAD> y el <BODY>. La estructura del documento sería la siguiente.

16


Pueden apreciar cómo se abren y cierran las etiquetas de los dos elementos que hemos visto (head y body). <HEAD> El <head> de un documento HTML contiene información sobre el propio documento. La mayor parte de directivas y etiquetas que se incluyen en ésta área se utilizan para almacenar datos que ayuden a interpretar el contenido del <body>. Esta parte del documento no es visible para los usuarios que visitan nuestra web. Recalcar que el contenido que se incluya en este apartado sólo ayuda a la interpretación del contenido del <body> y a aportar información de la página. En capítulos posteriores veremos qué tipo de información se incluirá en el <head> <BODY> En este elemento se incluirá todo el contenido de la web que será visible para el usuario que visite el sitio web. El <body> se divide a su vez en 4 subsecciones más: Cabecera (header), barra de navegación (nav), contenido y pie de página (footer). Veamos cada elemento en un ejemplo de página web.

17


Marcas especĂ­ficas para documentar los documentos. En el lenguaje HTML existen directivas que se emplean para ayudar a diferenciar partes de un documento. La presentaciĂłn queda en manos del criterio del desarrollador web. Veamos de forma resumida las mĂĄs importantes.

18


Pueden observar que en muchas ocasiones el resultado final es similar. Más adelante veremos cómo cambiar la apariencia de cada uno de ellos. Aún pareciéndose el resultado final es conveniente siempre marcar los textos con las etiquetas correspondientes ya que es muy importante para que los buscadores encuentren nuestras páginas web. La utilización de estas etiquetas es exactamente idéntico que en los caso que hemos visto. Suponiendo que en la frase (en código HTML) "Esto es un texto HTML" queremos

19


añadirle, por ejemplo, a la palabra "texto" la directiva <strong>, el código quedaría de la siguiente forma. <p>Esto es un <strong>texto</strong> en HTML</p> Al igual que en el resto de los casos, tras abrir la etiqueta <strong> es necesario cerrarlo con la barra (/) al final del texto que queramos añadir la directiva </strong>.

Estilos de presentación Junto a las directivas o etiquetas podemos añadir un parámetro que definirá la presentación de dicho elemento. Veámoslo con un ejemplo práctico. Trabajaremos con el siguiente ejemplo. Copiar el siguiente código en una hoja del bloc de notas.

Ahora vamos a añadir un parámetro que definirá el estilo del texto de la frase "Ya estamos avanzando en la programación HTML. Éste parámetro debe añadirse en la directiva de apertura, en nuestro caso <p>. En este parámetro podemos añadir el color, tamaño de la fuente, color de fondo, tipo de fuente... En este caso vamos a variar el color de la fuente, color de fondo, tamaño y el tipo de fuente. Quedando el código de la siguiente forma.

20


Quedando el resultado en el navegador de la siguiente forma.

Como pueden observar dentro del parรกmetro style podemos introducir diversos estilos siempre un cuando se separen por ";". <p style="font-family:arial; color:red; font-size:20px; background-color:yellow">Ya estamos avanzando en la programaciรณn HTML</p> Veamos los mรกs importantes.

21


Esta es una forma de asignar estilos a los elementos de un documento HTML. En capítulos posteriores veremos cómo aplicar estilos pero a través de una hoja de estilos donde se almacenará toda esta información. Haciendo el código programado mucho más limpio y más eficiente a la hora de programar.

Listas. Tipo de listas

En muchas ocasiones se utilizan listas en los documentos HTML para mostrar la información de una forma más organizada. Existen 3 tipo de listas:

22


Viendo el c贸digo de los tres tipos de lista podemos extraer las siguientes conclusiones:

23


Evidentemente cada uno de los elementos se pueden mezclar entre ellas a gusto del programador según convenga. Ejercicio práctico Vamos a crear una lista en un documento HTML como el de la imagen paso por paso.

En primer lugar abrimos una hoja del bloc de notas con la estructura de un documento HTML.

Seguidamente vamos a añadir un título que será el titular de la lista que crearemos.

24


Ahora creamos la lista. Vamos a crear una lista ordenada, por tanto a単adimos las etiquetas que definen dicha lista en un documento HTML.

Con la lista creada vamos a introducir los distintos elementos que componen la lista. Recordar que deben a単adirse con la etiquete <li>

25


Para comprobar el resultado almacenar el documento con formato “.html” y comprobar el resultado obtenido haciendo doble clic sobre el archivo.

Tablas. Tipos de tablas. Las tablas son, como las listas, componentes dedicados fundamentales a mejorar la visualización de la información. En HTML las tablas es una funcionalidad muy potente. Existen dos tipos de tablas: básicas y avanzadas. Básicas. Veamos cómo se declara una tabla en HTML y los elementos que intervienen. Tengamos en cuenta que una tabla está formada por filas y columnas. Veamos como

26


declararlas.

Visto el código y cómo se vería en el navegador veamos el significado de cada una de las etiquetas que se han utilizado.

Vista esta explicación vamos a crear una tabla.

Ejercicio práctico. Vamos a crear una tabla de 3 filas y 3 columnas en un documento HTML. El resultado final será el siguiente:

27


Para comenzar abrimos una hoja del bloc de notas y escribimos las etiquetas correspondientes que definen la estructura de un documento HTML.

Seguidamente vamos a a単adir las etiquetas necesarias para a単adir una tabla dentro del <body>. En este caso la tabla tiene un grosor de 5.

28


Ya hemos definido la tabla. Ahora vamos a introducir las filas y las columnas que componen la tabla. En primer lugar definimos una fila.

Definida la fila vamos a insertar los elementos que componen la fila. Cada elemento definirĂĄ el nĂşmero de columnas.

Definida la primera fila con sus elementos vamos a repetir el proceso para aĂąadir la segunda fila.

29


Para concluir insertar la última fila tal y como hemos hecho en los pasos anteriores. Concluido todos los pasos guardar el documento HTML y comprobar el resultado. Para ello recordar que deben almacenar el documento con formato “.html”. Para abrirlo en el navegador basta con pulsar sobre el icono del archivo dos veces. Avanzadas Las tablas avanzadas utilizan habitualmente la expansión de celdas a lo largo de filas y columnas. Se trata de permitir que una celda ocupe, por ejemplo, dos filas o tres columnas o el valor que deseemos. Para ello se utilizan dos nuevos elementos dentro de las directivas <td> y <tr>, estos dos nuevos elementos son: colspan y rowspan. Veamos cómo se aplican estos elementos en una tabla y su funcionamiento.

30


Con colspan se expande la celda tantas celdas como definamos en la misma fila. En cambio, con rowspan se expande la celda tantas celdas como definamos en la misma columna.

Enlaces. Documentos hipertexto. Las siglas de URL provienen del inglĂŠs Uniform Resource Locator (Localizador Uniforme de Recursos). Es la secuencia de caracteres que alcanza un estĂĄndar y que permite denominar recursos dentro del entorno de Internet para que puedan ser localizados.

31


Cada ordenador conectado a internet tiene su dirección URL única sin la cual no puede ser alcanzado por otros equipos. Todos los archivos ( fotos, videos…) que están publicados en internet tienen por tanto una Url, mediante estas direcciones únicas podemos crear hipervínculos . También llamados enlaces o Links. Un enlace o link es una zona de nuestra web (ya sea texto o imágenes) que un usuario puede pinchar para tener acceso o conectar con otro documento. ¿Qué es lo que ocurre cuando pinchamos en un enlace? Fundamentalmente hace los siguientes pasos. Supongamos que nuestro enlace apunta a la información nuestro curso.

(Pulse aquí para mas info) Al pulsar en el enlace realmente le estamos diciendo que acceda a una URL, por lo tanto estamos solicitando a un ordenar (llamado servidor) un recurso. El servidor busca el contenido y se lo envía nuevamente al usuario. Finalmente el usuario verá la información solicita.

32


Sintaxis La etiqueta HTML para los enlaces simples es la siguiente.

Observa que tiene un atributo llamado HREF. En el indicamos la URL o el destino de ese enlace. TEXTO DEL ENLACE: No siempre tiene que ser texto puede ser tambi茅n una imagen. Ejemplo enlace simple. Para una mejor comprensi贸n le sugerimos que reproduzca el siguiente ejemplo en un bloc de notas.

33


Abra el bloc de notas Desde el botón Inicio

Programas >>

Accesorios >>Bloc de notas, hacer clic sobre él, y se arrancará el programa.

En el Bloc de notas elige "Guardar como..." del menú "Archivo" en el menú principal. 

Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.

Ahora guarda el documento como "Enlace1.htm

Una vez guardado , haz doble clic sobre el

Al pulsar sobre el enlace te llevará a la web de estudiaencasa.es El atributo target El atributo target permite decidir dónde se abrirá el enlace vinculado mediante elemento HTML . Puede ser cargado en una nueva ventana del navegador,en la misma ventana, etc.

34


Valor

DescripciĂłn

_blank

Abre el enlace en una ventana nueva o pestaĂąa

_self

Abre el documento vinculado en el mismo marco que se ha hecho

clic

(esto

es

por

defecto)

_parent

Abre el documento vinculado en el marco padre

_top

Fuerza a que el enlace sea mostrado usando todo el espacio de la ventana del navegador destruyendo toda estructura

deframes.

Este

valor debe ser usado siempre que creemos un enlace a una pĂĄgina externa a nuestro sitio web.

35


Ejemplo enlace Target _top. Para una mejor comprensión le sugerimos que reproduzca el siguiente ejemplo en un bloc de notas.

Abra el bloc de notas Desde el botón Inicio

Programas >>

Accesorios >>Bloc de notas, hacer clic sobre él, y se arrancará el programa.

En el Bloc de notas elige "Guardar como..." del menú "Archivo" en el menú principal. 

Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.

Ahora guarda el documento como "Enlace_top.htm

Una vez guardado , haz doble clic sobre el

36


Al pulsar sobre el enlace te llevará a la web de estudiaencasa.es dentro de la misma página. Ejemplo enlace Target _blank. Para una mejor comprensión le sugerimos que reproduzca el siguiente ejemplo en un bloc de notas.

Abra el bloc de notas Desde el botón Inicio

Programas >>

Accesorios >>Bloc de notas, hacer clic sobre él, y se arrancará el programa.

En el Bloc de notas elige "Guardar como..." del menú "Archivo" en el menú principal. 

Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.

Ahora guarda el documento como "Enlace_blank.htm

Una vez guardado , haz doble clic sobre el

37


Práctica Le recomendamos realizar algunas prácticas para acostumbrarse al uso de estos valores. Vamos a crear dos páginas: Una primera página llamada Inicio.htm y otra llamada Contacto.htm. Lo que pretendemos es que al pulsar en la página de Inicio en el enlace ir a contacto le lleve a su página llamada contacto y viceversa. Inicio

Vista en navegador

Contacto

Vista en navegador

38


Atributo name Mediante este atributo podrá definir una determinada ubicación dentro de una página. Con el fin de poder saltar a una parte especifica de la página. Imagine que tiene una página que contiene mucha información. Y esta tiene la siguiente estructura. 

Apartado 1 , Apartado 2 , Apartado 3. (Enlaces) o Apartado 1 (Marcador) 

Texto apartado 1

o Apartado 2 (Marcador) 

Texto apartado 2

o Apartado 3(Marcador) 

Texto apartado 3

Suponga a continuación que necesita ir a al apartado 3 . Pues pulsando sobre apartado tres podrá ir directamente.

39


A continuación explicaremos todo el proceso. Debemos diferenciar entre el marcador y el enlace. El marcador es al lugar de la página donde voy a saltar y mediante el enlace ejecuto la acción de ir a esa sección en concreto. Sintaxis Name en Link <a href="#Apartado-uno">Ir al Apartado 1</a>

Sintaxis name en Marcador <a name="Apartado-uno">Apartado 1</a> Vista código

Vista en navegador

Nota: Para una correcta ejecución debe existir bastante texto.

40


Enlace a un email Es utilizado cuando necesitamos que nuestro enlace apunte a una direcciรณn de correo electrรณnico. Cuando pulsemos sobre el enlace se abrirรก el gestor de correo instalado en su ordenador. Vista cรณdigo

Vista en navegador

El mailto: nos indica a quien va dirigido el email.

Enlace desde una imagen Muchas veces queremos usar una imagen como enlace a otro documento. Para ello debemos colocar la etiqueta <img> entre las etiquetas <a> y </a> en lugar del texto. Es muy sencillo y vistoso. Entre los tag <a> y </a> ponemos la imagen con el tag <img>

Vista cรณdigo

Vista en navegador

Nota: Observa que la estructura es exactamente igual que un enlace con texto, pero donde va el texto se pone la etiqueta de <img>

41


Marcos. Los Marcos (también llamado Frame , cuadros o paneles) nos brindan la opción de subdividir una página “maestra” en subpáginas. Cada Marco tendrá sus propios atributos como sus bordes

y barras de

desplazamiento, cargando dentro de cada marco una página distinta. El objetivo de crear marcos es simplemente definir las diferentes zonas que va a tener nuestra web. Un ejemplo sería: 

Un marco cabecera donde tendremos el logo.

Un marco izquierdo donde pondremos los enlaces.

Un marco contenido donde pondremos contenidos.

Estructura de los Marcos Antes de comenzar a crear marcos sin sentido es hacer un análisis de cómo queremos que sea la distribución de la misma. Supongamos que vamos a crear la siguiente estructura.

42


Debemos crear un documento â&#x20AC;&#x153;maestroâ&#x20AC;? en el cual definimos los distintos Marcos y posteriormente creamos tantos documentos como Marcos queremos crear. Sintaxis.

Si observamos el siguiente ejemplo.

43


Estamos indicando cada uno de los marcos que va a contener nuestra página “maestra”, en nuestro ejemplo serían tres (Izquierda, Cabecera y contenido ) Y a cada marco indicamos el nombre y el fichero html que le corresponde. Observa que no contiene la etiqueta body. Porque esta la lleva cada una de las páginas externar que crearemos a posteriori. Al igual que resto de tags de HTML, los frameset también disponen de atributos propios. Atributo

Descripción

cols

Indica nº de columnas o frame verticales así como su tamaño

rows

Indica nº de filas o frame horizontales así como su tamaño

Para una mejor comprensión vamos a ver diferentes posibilidades. Ejemplo: Dos columnas con porcentajes. Vista código

Vista en navegador (SIN COLOR)

Nota: Observa que se han creado dos columnas una ocupará el 25% y la segunda el 75%

44


Ejemplo: Dos columnas con valores absolutos. Vista código

Vista en navegador (SIN COLOR)

Nota: Observa que se han creado dos columnas una ocupará el 300px y la segunda el 900px

Ejemplo: Dos columnas con la primera con valor absoluto y la segunda le indico que coja el resto de la página. Vista código

Vista en navegador (SIN COLOR)

Nota: Observa que se han creado dos columnas una ocupará el 300px y la segunda el alcanza el valor máximo.

45


Ejemplo: Dos filas con porcentajes. Vista código

Vista en navegador (SIN COLOR)

Nota: Observa que se han creado dos filas una ocupará el 25% y la segunda el 75% de la altura de la página

Ejemplo: Dos filas con valores absolutos. Vista código

Vista en navegador (SIN COLOR)

Nota: Observa que se han creado filas columnas una ocupará el 300px y la segunda el 500px

Ejemplo: Dos filas con la primera con valor absoluto y la segunda le indico que coja el resto de la página.

46


Vista código

Vista en navegador (SIN COLOR)

Nota: Observa que se han creado dos filas una ocupará el 300px y la segunda el alcanza el valor máximo. Es viable paralelamente una división tanto en columnas como en filas, de manera que se cree una ventana dividida en varios marcos. Vista código

Vista en navegador (SIN COLOR)

Nota: Observa que se han anidado los marcos.

Una vez creada la página “maestra” debemos crear sus respectivos frame.

47


Vamos a realizar un ejercicio guíado paso a paso en el cual creará una estructura sencilla para ir afianzando los conceptos. Crea una carpeta llamada Frame en el escritorio.

Abra el bloc de notas Desde el botón Inicio

Programas >>

Accesorios >>Bloc de notas, hacer clic sobre él, y se arrancará el programa. Cree una página llamada Marcos.html que contendrá el siguiente código.

Cree una página llamada Inicio.html que contendrá el siguiente código.

48


Cree una pรกgina llamada Menu.html que contendrรก el siguiente cรณdigo.

Finalmente, acceda a la carpeta donde ha guardado todas las pรกginas y haga doble clic sobre Maestra.html

49


Actividades

Nota: Las medidas de los marcos son elegidas por ti. Guarde las actividades por separado. Posteriormente se evaluarรก.

Reproduzca la siguiente imagen haciendo uso de frame.

Reproduzca la siguiente imagen haciendo uso de frame.

Reproduzca la siguiente imagen haciendo uso de frame.

50


Reproduzca la siguiente imagen haciendo uso de frame.

Reproduzca la siguiente imagen haciendo uso de frame.

51


Más atributos de los <frameset>

Atributo

Descripción

Posibles valores

frameborder

Muestra o no los bordes de los marcos

yes no

framespacing separación entre los marcos

un número

border

un

ancho del borde

número,

acompañado

de

%

se

cuando

desee que sea en porcentaje bordercolor

color del borde

número hexadecimal

Más atributos de los <frame> Atributo

Descripción

valores

frameborder

Muestra o no el borde del marco

yes o 1 no o 0

name

nombre del marco

noresize

si

aparece,

el

cualquier valor usuario

no

podrá no puede tomar valores

redimensionar el tamaño de este marco marginwidth

anchura del margen con respecto a los un número, acompañado de bordes del marco

% cuando se desee que sea en porcentaje

marginheight altura del margen con respecto a los bordes un número, acompañado de del marco

% cuando se desee que sea en porcentaje

52


scrolling

se mostrará o no la barra de desplazamiento yes cuando la página del marco no se pueda no

src

visualizar completamente en él

auto

documento que se cargará en el marco

ruta

y

nombre

documento

Los enlaces en el Marcos. Crea una carpeta llamada FrameEnlace en el escritorio.

Abra el bloc de notas Desde el botón Inicio

Programas >>

Accesorios >>Bloc de notas, hacer clic sobre él, y se arrancará el programa. Cree una página llamada Maestra.html que contendrá el siguiente código.

Analicemos el código. Hemos creado dos frame con dos columnas. A cada frame le hemos asignado un nombre característico mediante el uso del atributo name.

53

del


Pretendemos tener en el frame de menú, los enlaces a distintas páginas y en el frame de contenido pues que cargue la página. Para conseguir este efecto debemos hacer un par de cosas: 1. Darle

un

nombre

al

frame

que

deseamos

actualizar

Dicho nombre se indica en la etiqueta <FRAME> de la definición de frames. Para ello utilizamos el atributo name, igualado al nombre que le queremos dar a dicho marco. 2. Dirigir los enlaces hacia ese frame. Para ello debemos colocar en el atributo target de los enlaces -etiqueta <A>el nombre del frame que deseamos actualizar al pulsar el enlace. Para ello cree una página llamada Menu.html que contendrá el siguiente código.

Cree una página llamada contenido1.html que contendrá el siguiente código.

54


Cree una pรกgina llamada contenido2.html que contendrรก el siguiente cรณdigo.

Finalmente, acceda a la carpeta donde ha guardado todas las pรกginas y haga doble clic sobre Maestra.html

Marquesinas. Las marquesinas son textos que se desplazan de izquierda a derecha y viceversa. Podemos poner texto en movimiento fรกcilmente gracias a las marquesinas.

55


Sintaxis Para utilizar una marquesina utilizamos el tag Marquee de la siguiente forma:

Vamos a realizar un ejercicio guíado paso a paso en el cual creará una estructura sencilla para ir afianzando los conceptos.

Crea una carpeta llamada Marquesina en el escritorio.

Abra el bloc de notas Desde el botón Inicio

Programas >>

Accesorios >>Bloc de notas, hacer clic sobre él, y se arrancará el programa. Cree una página llamada Marquesina.html que contendrá el siguiente código.

Finalmente, acceda a la carpeta donde ha guardado la página y haga doble clic sobre Marquesina.html Atributos El movimiento, la dirección de desplazamiento, la velocidad del mismo,…todo es configurable gracias a los siguientes atributos:

56


Atributo

Descripción

Código

Bgcolor

Establece color de fondo.

Height,Width Width es el ancho del

área

de

la

marquesina. Height es la altura del

área

de

la

marquesina Direction

Establece

la

dirección

del

textode

la

marquesina.

Puede

tomar

valores izquierda

los o

derecha o arriba o

En el ejemplo el texto toma la dirección hacia la derecha. Jueg las distintas opciones. Left, rigth, up y down

abajo Scrolldelay

Define la velocidad del texto. A menor numeración, mayor velocidad

57


Loop

Determinará si si el movimiento

se

repetirá o no. En nuestro

ejemplo

hemos

establecido

10 repeticiones Behavior

Puede

tomar

los

valores alternate (de lado a lado de la ventana,

como

si

rebotara

en

los

extremos), scroll (de un

lado

a

otro,

continuamente) o slide (de un lado a otro, pero una sola vez). HSPACE VSPACE

y Distancia, en píxel, de

los

márgenes

laterales (HSPACE) y superior e inferior (VSPACE) Nota: también podemos poner imágenes en movimiento.

58


Formularios. Tratamiento de la información del usuario. Los formularios en HTML recogen los datos del navegador(lado cliente) y los trata en el servidor. Los formularios HTML son adaptables a las necesidades de la información que requieras recoger. A continuación mostramos los diferentes elementos que podrá añadir en su formulario.

Sintaxis Para utilizar un form utilizamos el tag form de la siguiente forma: Observa que el tag del form va dentro del body.

59


<INPUT> La etiqueta INPUT se utiliza para definir gran variedad de tipos de campos de entrada de datos.

<

INPUT

TYPE

=

( TEXT | PASSWORD | CHECKBOX | RADIO | HIDDEN | SUBMIT | IMAGE | RESET ) NAME = "Nombre" VALUE = "Valor " >

El atributo TYPE se usa para determinar el tipo de recuadro de dialogo de entrada que se está definiendo, a continuación se explicarán por separado cada una de las opciones. El atributo NAME especifica el nombre de la variable que se define. Este nombre será pasado al programa que trata el formulario junto con el valor que le asigno el usuario del formulario. El atributo VALUE suele especificar el valor de inicialización, que será el valor por defecto.

A continuación se relatan los distintos tipos de instrucciones de entrada. Input Text Fields Establece una cajetilla de entrada de texto de una línea que un usuario puede introducir texto en ella. Sintaxis

60


Vista código

Vista en navegador

Nota: type=”text” define un campo de entrada de texto Name=”Nombe” define el nombre que le ponemos al input.

Input Password Field Establece un cajetín de texto para introducir contraseñas. Sintaxis

61


Vista código

Vista en navegador

Nota: type=”password” define un campo de entrada de contraseña Name=”pwd” define el nombre que le ponemos al input.

Input Radio Buttons Los radio buttons o botones de opción permiten al usuario seleccionar de un conjunto de opciones.

Sintaxis

62


Vista código

Vista en navegador

Nota: Si seleccionas uno se te desmarca el otro. type=”radio” define un campo de opción. Name=”sexo” define el nombre que le ponemos al input. Value=”Hombre , mujer” Valor del Input La opción CHECKED indica cual es la opción activa por defecto

Input Checkboxes Las casillas de verificación le permiten al usuario seleccionar cero o más opciones de un número limitado de opciones a la vez. Sintaxis

63


Vista código

Vista en navegador

Nota: Puedes tener marcados todos a la vez o ninguno type=”checkbox” define un campo de selección. Name=”sexo” define el nombre que le ponemos al input. Value=”Hombre , mujer” Valor del Input La opción CHECKED indica cual es la opción activa por defecto

Textarea La etiqueta textarea define un control de entrada de texto de varias líneas.

Un área de texto puede contener un número ilimitado de caracteres, y hace que el texto en una fuente de ancho fijo (normalmente Courier).

64


Sintaxis

Vista c贸digo

Vista en navegador

65


Atributo

Valor

Descripción

cols

number

Especifica el ancho visible de un área de texto

disabled

disabled

Especifica que un área de texto se debe desactivar

rows

number

Especifica el número de líneas visibles en un área de texto

Select El elemento select se utiliza para crear una lista desplegable. Las etiquetas option dentro del elemento select definen las opciones disponibles en la lista. En el tag del select podemos añadir varios atributos a la vez. (Name, size, etc.) Sintaxis

Vista código

Vista en navegador

66


Atributo

Valor

Descripción

disabled

disabled

Especifica que una lista desplegable se debe desactivar

multiple

multiple

Especifica que las múltiples opciones se pueden seleccionar a la vez

name

name

Define un nombre para la lista desplegable

size

number

Define el número de opciones visibles en una lista desplegable

Checkboxes Las casillas de verificación le permiten al usuario seleccionar cero o más opciones de un número limitado de opciones a la vez. Sintaxis

67


Vista código

Vista en navegador

Nota: Puedes tener marcados todos a la vez o ninguno type=”checkbox” define un campo de selección. Name=”sexo” define el nombre que le ponemos al input. Value=”Hombre , mujer” Valor del Input La opción CHECKED indica cual es la opción activa por defecto

Input Submit Button Un botón de enviar se utiliza para enviar los datos del formulario a otra página.

Supongamos que necesitamos enviar el nombre de una persona a otra página donde será tratada esa información. Un ejemplo sería un formulario de inscripción a un curso, de solicitud de información etc…

68


Los datos se envían a la página especificada en el atributo de ACTION del formulario.

METOTOD GET y POST son dos métodos empleados para enviar los datos desde el navegador al servidor Web, generalmente utilizados al enviar formularios, especificados mediante la directiva METHOD. La principal diferencia entre POST y GET es que GET envía los parámetros por medio de la URL del fichero que carguemos, mientras POST lo hace “oculto” del usuario, lo que lo hace más seguro al, por ejemplo, enviar información de un formulario. Sintaxis

La propiedad de name agrega un nombre interno al botón para que el programa que se ocupa de la forma no los confunda con otros botones. La propiedad de value define lo que está escrito en el botón

69


Vista código

Vista en navegador

Mapas interactivos. Funcionamiento. Construcción. Los mapas interactivos o conocidos como etiqueta map estos son usados mediante imágenes para indicar zonas dentro de esa imagen que se convertirán en enlaces. Un ejemplo lo tendríamos con las comunidades autónomas españolas. A cada zona de la imagen le pondríamos un enlace que llevara por ejemplo a su web de la comunidad autónoma.

70


Existen dos tipos de mapas: los mapas del lado del servidor y los mapas del lado del cliente. Mapas del lado del servidor Los mapas del lado del servidor hacen uso de script de CGI. Cuando se pulsa en una región del mapa manda unas coordenadas a un ordenador llamado servidor. Esto no es parte de nuestra lección. Mapas del lado del cliente Los mapas del lado del cliente no usan script para su funcionamiento pues el mapa se incluye mediante código HTML. La etiqueta que hace esta función es MAP, y es la encargada de la creación del mapa. La imagen tiene un conjunto de

coordenadas de posición mediante las cuales

podemos decir que zona son sensible para poner los hipervínculos o enlaces.

71


Etiqueta <MAP> La etiqueta <MAP> es la encargada de establecer las zonas activas de vínculos en la imagen. Su etiqueta de cierre es </MAP>.

Los

atributos

de

esta

etiqueta

pueden

ser:

NAME Define el nombre que le ponemos a nuestro mapa.. Este atributo no puede ser omitido. Imágenes como mapas Además del tag MAP debemos indicar la imagen que vamos a usar como mapa. Una vez que hemos definido el mapa que utilizaremos con una imagen debemos de utilizar el atributo USEMAP de la etiqueta <IMG> para que dicha imagen sea un mapa. Sintaxis:

72


Observa que la imagen tiene un atributo llamado USEMAP el cual indicamos el atributo NAME de la etiqueta MAP. NOTA: la # es obligatoria.

Etiqueta <AREA> Mediante este tag llamado Area definimos las zonas activas de la imagen.

Los atributos de esta etiqueta son:

73


SHAPE El atributo SHAPE define si el área tiene forma de rectángulo, circular o poligonal. Los atributos son: 

RECT.

CIRCLE.

POLYGON.

COORDS Dentro de la imagen debemos indicar las coordenadas para las regiones activas donde vamos a poner los enlaces. Por lo tanto cada área debe tener sus propias coordenadas. Cada región o tipo de forma que vayamos a delimitar tiene sus propias coordenadas. A continuación explicaremos regiones rectangulares, circulares y poligonales.

74


Regiones rectangulares Si necesitamos definir una regi贸n rectangular en el atributo SHAPE de la etiqueta AREA debemos ponerle RECT.

Sintaxis:

Las coordenadas se separan con comas y corresponden a la esquina superior izquierda (X1, Y1) e inferior derecha (X2, Y2) respectivamente.

Regiones circulares Si necesitamos definir una regi贸n rectangular en el atributo SHAPE de la etiqueta AREA debemos ponerle CIRCLE.

75


Sintaxis:

Las coordenadas se separan con comas. Los dos primeros valores corresponden al centro del circulo (X, Y) y R corresponde a la longitud del radio del circulo. Este debe ser el orden para escribirlas.

Regiones poligonales Si necesitamos definir una regi贸n rectangular en el atributo SHAPE de la etiqueta AREA debemos ponerle POLYGON.

Sintaxis:

76


Las coordenadas se separan con comas. Cada X e Y son ptos. En este ejemplo sería un triángulo.

¿Cómo obtener coordenadas de la imagen?

No necesitamos instalar nada especial, Windows posee una herramienta muy sencilla llamada PAINT. Paint (originalmente Paintbrush) es un programa editor de fotografía desarrollado por Microsoft. Paint ha acompañado al sistema operativo Microsoft Windows desde la versión 1.0. Siendo un programa básico, se incluye en todas las nuevas versiones de este sistema. Por su simplicidad, rápidamente se convirtió en una de las aplicaciones más usadas de las primeras versiones de Windows -introduciendo a varios a dibujar con la computadora por primera vez- y es todavía fuertemente asociado con la inmediata usabilidad de Windows.

77


Para abrir Paint, haga clic en el botón Inicio

, haga clic en Todos los programas,

en Accesorios y, después, en Paint. Partiendo de la imagen que mostramos a continuación suponga que necesita establecer una zona activa en la imagen en el área del cuadrado de color verde. Para ello necesitamos establecer las coordenadas X1,Y1 y X2,Y2.

Recuerda la sintaxis del tag AREA para SHAPE rectángulo.

Para obtener las coordenadas X1,Y1 y X2 ,Y2. Sitúa el puntero del ratón en la esquina superior izquierda de la figura. En la barra de estado del Paint obseva que da los valores de X1 ,Y1.

78


Realiza mismo procedimiento para la esquina inferior derecha del cuadrado. Y obtendrรก las coordenada X2,Y2

79


HREF Para que cada zona activa en el mapa sea un vínculo, debemos utilizar el atributo HREF de la etiqueta <AREA> tal y como se vio con la etiqueta <A>. Sintaxis:

Ejemplo Una vez comprendida la parte teórica vamos a meternos con un ejemplo práctico. Partiendo de la siguiente imagen , supongamos que necesitamos áreas activas sólo en el cuadrado, circulo y triángulo. Cada zona activa estará vinculada con una web.

80


Crea una carpeta llamada Mapas. En el área de recursos descargue la imagen Mapa.jpg en la carpeta Mapas creada en punto anterior.

Abra la imagen Mapa.jpg con el Paint, haga clic en el botón Inicio

, haga clic

en Todos los programas, en Accesorios y, después, en Paint. 1. Haga clic en el botón Paint

y, a continuación, haga clic en Abrir.

2. Busque la imagen Mapa.jpg en Paint, haga clic en ella y, a continuación, haga clic en Abrir. Localice las coordenadas de los dibujos.

Abra el bloc de notas Desde el botón Inicio

Programas >>

Accesorios >>Bloc de notas, hacer clic sobre él, y se arrancará el programa. Cree la estructura HTLM para la creación del mapa.

Código HTML de ejemplo:

81


NOTA: las coordenadas pueden variar. Obténgalas usted mismo mediante el procedimiento explicado en puntos anteriores.

Efectos dinámicos en el documento. Las páginas webs pueden ser de dos tipos 

Estáticas.

Dinámicas.

Las páginas web estáticas muestran la información de manera fija, permanente y sin cambios. Estas se crean mediante el lenguaje que estamos estudiando llamado HTML. Pero el HTML en sí mismo no deja mucha campo para hacer grandes funcionalidades o efectos, pero combinándola con otras tecnologías podemos producir efectos bastantes vistosos. Las páginas webs estáticas son bastante útiles para ese conjunto de páginas que simplemente necesitamos mostrar información “estática” como por ejemplo “quiénes somos”, ”dónde estamos” , “contacto” etc.. ya que esta información siempre es fija. Su principal ventaja es el precio y facilidad de creación. Sin embargo las páginas webs dinámicas es alcanzan gran vistosidad, sus presentaciones son más entretenidas que las que se consiguen utilizando únicamente HTML y son interactivas. Casi siempre al escribir una página dinámica el código de los otros lenguajes de programación se incluye embebido dentro del mismo código HTML. Un ejemplo de página dinámica sería la sección de Horóscopos de cualquier periódico, ya que las predicciones de sus horóscopos cambian.

82


Esto se conoce con DHTML (del inglés Dynamic HTML) y aporta un conjunto de métodos que le dan la posibilidad de crear webs interactivas haciendo uso de HTML estático y otros lenguajes como por ejemplo javascript y otros más. Dependiendo donde se procesa el código de la página, es decir, la computadora que cargará con el peso adicional que supone que la página realice efectos y funcionalidades, las páginas dinámicas se clasifican en: 

Páginas dinámicas de cliente.

Páginas dinámicas de servidor.

Páginas dinámicas de cliente: La interpretación de la programación y ejecución de la misma la realiza el navegador del usuario por ello se denomina Cliente. Los lenguajes que se utilizan para el mismo son el Javascript , VbScript o flash. Estos lenguajes tienen bastante limitaciones ya que no tienen acceso al ordenador del cliente ni tampoco acceso al servidor donde está alojada la página.Esta restricción tiene su lógica para evitar agujeros de seguridad. Páginas dinámicas de servidor. En este tipo de páginas la interpretación y ejecución de los script o código se realizan en el servidor. Si un usuario hace una petición de una página , los script se ejecutan en el servidor y este genera una página que se le envía al cliente. Esta nueva página sólo contiene código HTML y así puede ser interpretada por cualquier navegador.

83


Lenguajes del lado del servidor son ASP, desarrollado por Microsoft, PHP de cรณdigo libre, JSP para programar enJava, o alguna otra interfaz como CGI, que se desarrolla en lenguajes como C o Perl. En lecciones posteriores aprenderรก el manejo de pรกginas dinรกmicas cliente haciendo uso de script.

84

Módulo 1. Introducción