TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 1

1

HTML 5 – MÓDULO 1

TABLAS

En este ejercicio vamos a ver cómo insertar una tabla en HTML. Veamos las etiquetas que aparecen. En particular,

una tabla básica puede ser declarada usando tres elementos, a saber, table (el contenedor

principal), tr (representando a las filas contenedoras de las celdas) y td (representando a las celdas).

Si bien luego en CSS vamos a darle formato a los elementos de una página web, ya que el validador del W3C

recomienda no utilizar el atributo border y en su lugar asignar bordes a los elementos en la hoja de estilo, vamos a

ver cómo colocarle bordes a la tabla en HTML.

El W3C Markup Validation Service, o Servicio de

validación de marcado del W3C es un validador creado

por el W3C que permite a los usuarios analizar

documentos HTML y XHTML bien-formados y válidos. La

validación del marcado es un paso importante para

asegurar la calidad técnica de las páginas web. Aunque

el validador de W3C es importante para verificar la

compatibilidad con navegadores y la usabilidad del sitio,

no se han confirmado los efectos que tiene en el SEO.

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 2

2

Como podemos observar se coloca el borde a la tabla y a cada una de las celdas.

En el caso de que cambiemos el valor del borde de la tabla el borde exterior de la

tabla quedaría con más grosor, no afectando a los bordes de las celdas.

Una celda de encabezado es un tipo especial de celda utilizada para organizar y categorizar otras celdas en la tabla. Dicho esto, es difícil imaginar una tabla donde una celda de encabezado no tenga utilidad. Casi cualquier tabla puede beneficiarse de un grupo de celdas de encabezado

bien ubicado.

En el siguiente ejemplo, construiremos una tabla para mostrar información acerca del clima en los próximos días. Aquí, las celdas de encabezado, representadas por el elemento th, son ubicadas en la primera fila de la tabla, encima de las celdas comunes.

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 3

3

COMBINACIÓN DE CELDAS

La unificación de celdas es un mecanismo mediante el cual un autor puede combinar o fusionar dos o más celdas adyacentes (td y th) en una tabla. Este efecto puede lograrse utilizando los atributos colspan, para unificación horizontal, y rowspan, para unificación vertical. Estos atributos pueden tomar un valor entero mayor a cero, que representa el número de celdas que participarán en la unificación.

La idea detrás de este mecanismo se explica por sí misma: cuando el atributo colspan es establecido en una celda, indica a los intérpretes que la misma debe abarcar, no solamente su propio espacio, sino también el espacio de un número de celdas contiguas hacia su derecha. Lo mismo sucede para el atributo rowspan pero hacia abajo. Debido a la estructura de las tablas en HTML, La unificación sólo puede hacerse hacia la derecha o hacia abajo. Hacerlo hacia arriba o hacia la izquierda consistiría un intento de abarcar espacio ya utilizado.

En el siguiente ejemplo, una celda de la tabla está ocupando el espacio de tres celdas, como lo indica su atributo colspan. Nota: cómo la declaración de las dos celdas a la derecha de esta celda particular han sido omitidas en el código. Esto es algo muy apropiado, ya que el espacio de estas celdas ha sido tomado por la anterior.

HIPERVÍCULOS

Analicemos el siguiente código.

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 4

4

Luego de la etiqueta BODY tenemos una etiqueta de PÁRRAFO <p>, alineado al centro, luego la etiqueta <a

href=”http://www.google.com” target=”_blank”>, en donde tenemos la dirección del sitio y luego target que nos

indica que al presionar sobre el link se abrirá la página en una nueva ventana.

Otros valores que puede tomar target son:

TARGET="_self"

Usando este valor el documento enlazado será mostrado en el mismo frame o ventana donde está el enlace.

TARGET="_parent"

Este valor provoca que el documento sea mostrado en el FRAMESET padre del frame actual.

TARGET="_top"

Fuerza a que el enlace sea mostrado usando todo el espacio de la ventana del navegador destruyendo toda estructura de frames. Este valor debe ser usado siempre que creemos un enlace a una página externa a nuestro sitio web.

En nuestro código luego tenemos la etiqueta <b> (negrita), se cierra el vínculo </a> y el párrafo </p>.

¿CÓMO CAMBIAR EL COLOR DE LOS ENLACES DE LOS HIPERVÍNCULOS?

Para cambiar el color lo hacemos desde la etiqueta body.

• Bgcolor (color de fondo)

• Link (color del link en reposo)

• Vlink (color del link cuando ya ha sido visitado)

• Alink (color del link al hacer clic sobre él)

PARA SABER EL CÓDIGO HEXADECIMAL DE UN COLOR PUEDES HACERLO DESDE ILLUSTRATOR,

PHOTOSHOP O TAMBIÉN VISITANDO EL SITIO HTTPS://HTMLCOLORCODES.COM/ES/

HIPERVÍNCULO A OTRA PÁGINA DEL MISMO SITIO

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 5

5

HIPERVÍNCULO A UN CLIENTE DE CORREO ELECTRÓNICO

Al hacer clic sobre el link se abrirá el software de correo del sistema operativo.

ANCLAS

En HTML los enlaces que hacen referencia a puntos específicos del documento se denominan enlaces ancla y se

construyen añadiendo al final de la URL una almohadilla (#) seguida del identificador del punto de destino, al que se

le llama anclaje.

Este tipo de enlace se utiliza mucho en Wikipedia.

Veamos un ejemplo.

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 6

6

Tenemos la etiqueta <a href> en donde el enlace va acompañado del signo numeral o almohadilla y luego la etiqueta

<a name> en donde colocamos el nombre del ancla.

PARA PODER VER EN FUNCIONAMIENTO ESTA HERRAMIENTA NECESITARÍAN QUE EL TEXTO SEA

LARGO O DAR VARIOS ESPACIOS EN BLANCO COMO PARA QUE SE ACTIVE LA BARRA DE

DESPLAZAMIENTO LATERAL DEL NAVEGADOR.

HIPERVÍNCULO MEDIANTE UNA IMAGEN

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 7

7

IMPORTANTE A LA HORA DE CREAR LOS VÍNCULOS.

Vamos a suponer que tenemos la siguiente estructura de carpetas y archivos.

Tenemos un archivo en la raíz del sitio, una carpeta con imágenes y otra carpeta con una página llamada proyectos.

Si deseamos crear un vínculo desde la página indice.html hasta una de las imágenes de la carpeta imágenes la ruta

quedaría de la siguiente manera:

./imágenes/imagen1.png

Ahora bien, si estaríamos en la página proyectos.html, que se encuentra dentro de la carpeta proyectos, y

desearíamos ir a la página indice.html, tendríamos que ir a la carpeta anterior para ubicar el archivo indice.html. Lo

haríamos de la siguiente manera.

../indice.html

Utilizamos 1 punto para ir hacia adelante y 2 puntos para volver a la carpeta anterior.

En el caso de que las dos páginas esten en la misma carpeta colocaríamos solo el nombre de la imagen o del archivo

html.

Como podemos ver al hacer clic sobre la imagen nos llevará a la página pagina2.html.

¿QUÉ ES EL ATRIBUTO ALT?

EL ATRIBUTO ALT O ETIQUETA ALT ES UN ATRIBUTO HTML PARA UN TEXTO QUE DESCRIBE UNA

IMAGEN. ... SI UNA IMAGEN NO SE PUEDE MOSTRAR POR ALGUNA RAZÓN, EL ATRIBUTO ALT

PROPORCIONA TEXTO ALTERNATIVO PARA MOSTRAR EN SU LUGAR.

FORMULARIOS EN HTML

Un formulario es un conjunto de controles (botones, cajas de texto, casillas de verificación, botones radio, etc) que

permiten al usuario introducir datos y enviarlos al servidor web para su procesamiento.

La etiqueta que delimita un formulario es la etiqueta <form> ...</form>. Los atributos más importantes de la etiqueta <form> son:

• action: contiene el nombre del agente que procesará los datos remitidos al servidor (por ejemplo, un script de PHP)

• method: define la manera de enviar los datos al servidor. Los valores posibles son:

o get: los valores enviados se añaden a la dirección indicada en el atributo action

o post: los valores se envían de forma separada

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 8

8

Si el atributo method no está establecido, el formulario se comporta como si el valor fuera get.

El uso de GET en formularios, salvo que el desarrollador sepa muy bien lo que hace y los datos no sean comprometidos,

no debe usarse para otras cosas diferentes a los formularios de búsqueda. El motivo es sencillo, el método GET lo que

hace es pasar las variables y sus valores por la URL, es decir, no solo queda a la vista de cualquier usuario, sino que

además la información puede quedar guardada en el historial del navegador. Imagine que se usa este método para

identificar usuarios, y el nombre de usuario y la clave se queda guardada en el historial del navegador de un ordenador,

digamos de una biblioteca pública, el fallo en la seguridad sería catastrófico.

Una de las diferencias que tiene este método con el POST, es la recarga de la página. Si pasas las variables por URL

(usando GET) cuando pulsas el botón volver atrás o actualizas la página lo haces sin más problemas. No obstante,

cuando se hace esto con el método POST te sale un mensaje que dice algo así como: “para recargar la página debe

enviar la información que ya envío antes” y te obliga a recargar la página de nuevo para ver el contenido.

Otra diferencia entre GET y POST, es que el primero no permite enviar más de 2048 caracteres

La etiqueta <form> es un elemento de bloque. En su interior puede haber cualquier elemento típico de una página web (párrafos, imágenes, divisiones, listas, tablas, etc.), además de las etiquetas que crean los controles.

Veamos un ejemplo.

Se abre la etiqueta form que contiene un action que nos indica la página que va a procesar el formulario. Los datos se van a enviar mediante el método post.

Luego tenemos la etiqueta <input> en donde se especifica el tipo de elemento de formulario (campo de texto), el nombre del campo de texto y la extensión de caracteres permitidos.

En la otra línea tenemos un salto de línea <br> y otro <input> con el tipo submit y el valor enviar.

Otros ejemplos con elementos de un formulario:

<INPUT TYPE="PASSWORD" NAME="CLAVE" SIZE="12">

La única diferencia entre este control y el cuadro de texto normal es que el texto que el usuario escribe en un cuadro de contraseña no se ve en la pantalla. En su lugar, los navegadores ocultan el texto utilizando asteriscos o círculos, por lo que es ideal para escribir contraseñas y otros datos sensibles.

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 9

9

<INPUT TYPE="RESET" VALUE="BORRAR">

Aunque su uso era muy popular hace unos años, la mayoría de formularios modernos ya no utilizan este tipo de botón. Se trata de un botón especial que borra todos los datos introducidos por el usuario y devuelve el formulario a su estado original.

<TEXTAREA NAME="COMENTARIOS" ROWS="5" COLS="60"></TEXTAREA>

Las columnas y filas pueden variar dependiendo de qué tan grande queremos el campo de texto multilínea.

<INPUT TYPE="CHECKBOX" NAME="JAVA">JAVA<BR>

Los checkbox o "casillas de verificación" son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Aunque en ocasiones se muestran varios checkbox juntos, cada uno de ellos es completamente independiente del resto. Por este motivo, se utilizan cuando el usuario puede activar y desactivar varias opciones relacionadas pero no excluyentes.

<INPUT TYPE="RADIO" NAME="ESTUDIOS" VALUE="1">SIN ESTUDIOS<BR>

Los controles de tipo radiobutton son similares a los controles de tipo checkbox, pero presentan una diferencia muy importante: son mutuamente excluyentes. Los radiobutton se utilizan cuando el usuario solamente puede escoger una opción entre las distintas opciones relacionadas que se le presentan. Cada vez que se selecciona una opción, automáticamente se deselecciona la otra opción que estaba seleccionaba.

<INPUT TYPE="FILE" NAME="ADJUNTO" />

Los formularios también permiten adjuntar archivos para subirlos al servidor. Aunque desde el punto de vista de HTML y del navegador no existe ninguna limitación sobre el número, tipo o tamaño total de los archivos que se pueden adjuntar, todos los servidores añaden restricciones por motivos de seguridad.

<INPUT TYPE="IMAGE" NAME="ENVIAR" SRC="ACCEPT.PNG"/>

El aspecto de los botones de formulario se puede personalizar por completo, ya que incluso es posible utilizar una imagen como botón.

<FORM ACTION="/REGISTRARDATOS.PHP" METHOD="POST"> INGRESE SU NOMBRE: <INPUT TYPE="TEXT" NAME="NOMBRE" SIZE="30"><BR> SELECCIONE SU PAIS: <SELECT NAME="PAIS"> <OPTION VALUE="1">ARGENTINA</OPTION> <OPTION VALUE="2">ESPAÑA</OPTION> <OPTION VALUE="3">MÉXICO</OPTION> <OPTION VALUE="4">GUATEMALA</OPTION> <OPTION VALUE="5">HONDURAS</OPTION> <OPTION VALUE="7">EL SALVADOR</OPTION> <OPTION VALUE="8">VENEZUELA</OPTION> <OPTION VALUE="9">COLOMBIA</OPTION> <OPTION VALUE="10">CUBA</OPTION>

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 10

10

<OPTION VALUE="11">BOLIVIA</OPTION> <OPTION VALUE="13">PERÚ</OPTION> <OPTION VALUE="14">ECUADOR</OPTION> <OPTION VALUE="15">PARAGUAY</OPTION> <OPTION VALUE="16">URUGUAY</OPTION> <OPTION VALUE="17">CHILE</OPTION> </SELECT> <BR>

<INPUT TYPE="SUBMIT" VALUE="ENVIAR"> </FORM>

La etiqueta <select> define la lista y encierra todas las opciones que muestra la lista. Cada una de las opciones de la lista se define mediante una etiqueta <option>. El atributo value de cada opción es obligatorio, ya que es el dato que se envía al servidor cuando el usuario envía el formulario. Para seleccionar por defecto una opción al mostrar la lista, se añade el atributo selected a la opción deseada.

ESTRUCTURA Y LAYOUT

Los temas abordados hasta el momento muestran las decenas de etiquetas HTML disponibles para marcar y estructurar cada elemento individual de las páginas web: tablas, listas, enlaces, párrafos, imágenes, etc. Aunque combinando esas etiquetas es posible crear cualquier página web, no es posible hacer que las páginas muestren estructuras complejas.

La mayoría de páginas HTML disponen de estructuras complejas formadas por varias columnas de contenidos y otro tipo de divisiones. Utilizando exclusivamente HTML no es posible crear estas estructuras complejas, ya que es

imprescindible emplear las hojas de estilos CSS.

No obstante, los estilos de CSS necesitan la ayuda de HTML/XHTML para crear los diseños más avanzados. En concreto, el código HTML se encarga de agrupar los elementos de la página en diferentes divisiones en función de su finalidad: la zona de la cabecera de la página, la zona de contenidos, una zona lateral para el menú y otras secciones menores, la zona del pie de página, etc.

La siguiente imagen muestra algunas de las zonas definidas en la página principal del sitio www.alistapart.com:

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 11

11

Para agrupar los elementos que forman cada zona o división de la página se utiliza la etiqueta <div>

Las páginas web complejas que están bien diseñadas utilizan decenas de etiquetas <div>. Los atributos más utilizados con esta etiqueta son id (para identificar la capa de forma única) y class (para aplicar a la capa estilos CSS).

Si observas el código HTML de algunas páginas web complejas, verás que la mayoría utilizan los mismos nombres para identificar sus divisiones. Los nombres más comunes, y sus equivalentes en inglés, se muestran a continuación:

• contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la página y se emplea para definir las características básicas de la página: su anchura, sus bordes, imágenes laterales, si se centra o no respecto de la ventana del navegador, etc.

• cabecera (header) que incluye todos los elementos invariantes de la parte superior de la página (logotipo,

imagen o banner, cuadro de búsqueda superior, etc.)

• contenido (content) engloba el contenido principal del sitio (la zona de noticias, la zona de artículos, la zona de productos, etc. dependiendo del tipo de sitio web)

• menu (menu) se emplea para agrupar todos los elementos del menú lateral de navegación de la página

• pie (footer) que incluye todos los elementos invariantes de la parte inferior de la página (aviso de copyright, política de privacidad, términos de uso, etc.)

• lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y secundarias de la página.

De esta forma, el esqueleto de una página HTML compleja suele ser similar al siguiente:

<div id="contenedor">

<div id="cabecera">

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 12

12

...

</div>

<div id="contenido">

<div id="menu">

..

</div>

...

</div>

<div id="pie">

...

</div>

</div>

Estas etiquetas <div> vamos a verlas con mayor detenimiento cuando abordemos la creación de hojas de estilos (css)

EJERCICIO Nº1

Determinar el código HTML necesario para crear el formulario que se muestra en la siguiente imagen:

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 13

13

1. Elegir el método más adecuado para el formulario (GET o POST) y cualquier otro atributo necesario.

2. La aplicación que se encarga de procesar el formulario se encuentra en la raíz del servidor, carpeta "php" y archivo "insertar_cv.php" .

3. El nombre puede tener 30 caracteres como máximo, los apellidos 80 caracteres y la contraseña 10 caracteres como máximo.

4. Asignar los atributos adecuados al campo del DNI.

5. Por defecto, debe estar marcada la casilla de suscripción al boletín de novedades.

EJERCICIO Nº2

1. Creamos una carpeta.

2. Crea la página index.html. Allí debe haber un link que me lleve a la página proyectos.html

3. Crea la página proyectos.html en la misma carpeta que la de index.html. En esta página debe haber tres

links: uno que me lleve a la página index.html y las otras dos a las imágenes que se encuentran en la

carpeta imágenes.

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 14

14

Estructura del sitio.

¿Cómo coloco texto falso en una página?

Coloco en Visual Studio Code Lorem y me inserta texto falso.

4. Comprimir la carpeta en rar para luego enviar el archivo por classroom.

TECNICATURA SUPERIOR EN COMUNICACIÓN MULTIMEDIAL –

PROGRAMACIÓN WEB 15

15

EJERCICIO Nº3

1. Crear la siguiente tabla en html

Su pedido

Nombre producto Precio unitario Unidades Subtotal

Reproductor MP3 (80 GB) 192.02 1 192.02

Fundas de colores 2.50 5 12.50

Reproductor de radio & control remoto 12.99 1 12.99

TOTAL - 7 207.51

RECUERDEN QUE CUANDO TRABAJAMOS CON SITIOS WEB ES IMPORTANTE ORDENAR TODOS LOS

ARCHIVOS EN CARPETAS Y SUBCARPETAS.