23 de agosto


Explicación por parte del docente como refuerzo para acumulativo del lunes en la tarde !


Se aplazó por motivos de estudio

AGOSTO 16

SALIDA A LA UIS (CONCURSO DE PIANO)

AGOSTO 9

+ EN LA CLASE DE HOY EL PROFESOR EXPLICO ANCLAS ,HIPERVINCULOS
+HICIMOS UN BONUS PREMIUM

ANCLAS

Sirve para definir posiciones dentro de un documento y se puede usar como destino de hiperenlaces.
Para crear un ancla (anchor) se procede de la siguiente manera:
<A NAME="nombre_etiqueta">Texto del elemento ancla</A>
Visualmente est elemento no tiene niun efecto, pero si lo tiene en forma interactiva con el usuario.
Para hacer referencia al ancla o posición se hace el siguiente tipo de hiperenlace:
<A HREF="#nombre_etiqueta">Texto del hiperenlace</A>
De esta manera accederemos a la posición donde hayamos puesto el ancla
Por ejemplo al final de este documento hemos puesto la siguiente ancla:
<a name="final">Este es el final del documento!!</a>
Y para acceder a esa posición usamos el siguiente hipernlace:
<A HREF="#final">Vamos al final del documento</A>
Que se vería así:
Vamos al final del documento (clicklea el hiperenlace para ver lo que sucede!!)
usando #nombre_etiqueta estamos asumiendo que el ancla esta en el documento actual, o sea estamos usando un ruta relativa al documento.
Si queremos acceder a un ancla desde fuera del documento, usamos un enlace más completo donde se incluye el nombre del documento donde se encuentra el ancla:
<A HREF="anclas.php#final">Vamos al final del documento</A>
En nuestro caso este documento se llama anclas.php. El nombre del docuemnto se coloca siempre antes del signo gato (#).

La anclas son muy buenas por ejemplo para presentar un listado inicial, y cada elemento del listado se desarrolla a lo largo del documento, pudiendo enlazar con anclas las diferentes posiciones del documento donde se desarrolla cada elemento del listado incial.

TOMADO DE :http://www.bufoland.cl/cursoweb/html/anclas.php#siguiente

EJEMPLO DE ANCLAS Y HIPERVINCULOS

Cómo insertar Anclas HTML en las Páginas

Para que los visitantes naveguen de la forma más fácil y cómoda posible, te sugerimos que hagas primero una lista de capítulos antes de redactar los Términos y Condiciones. Básicamente, es como crear un índice de un libro.

Para hacerlo más claro, crea un índice del contenido al principio de la página.

Una vez tienes el texto preparado, ve a “Fuente HTML”.

Ve a la “Fuente HTML” del editor de textos.

Para conectar los enlaces en la página, cambia el código por el siguiente:

Para el capítulo:
<a href=”#Clausulas”>1. Cláusulas</a>

Para el párrafo al que deseas llevar al lector:
<a name=”Clausulas”>Cláusulas</a>

El Código Fuente con el Ancla insertada

Después de “Guardar”, ambas partes estarán conectadas.

Nota: “Cláusulas” antes de # significa que el enlace apunta a Términos y Condiciones (URL: http://mitiendaejemplo.webnode.com/terminos-). No escribas nada antes de la almohadilla o numeral si el ancla carga la página principal (mitiendaejemplo.webnode.es).

TOMADO DE

https://www.webnode.es/blog/2013/05/23/consejo-rapido-como-crear-anclas-en-html-para-tu-pagina-web/

AGOSTO 2/2016

CREACIÓN DE TABLAS EN HTML

En HTML, una poderosa herramienta a la hora de mostrar cierto tipo de información son las tablas. Hay muchos sitios que por su naturaleza no usan tablas aunque existen algunas ocasiones en que el papel de las tablas se vuelve esencial.

El fin de las tablas es preferentemente contener datos ordenados en celdas (filas y columnas). En principio, no deben ser usadas para crear divisiones de cara a mostrar una página web, es decir, es preferible que una página web no esté dividida en distintos espacios usando tablas. Para maquetar una página web y dividirla en distintos espacios se usarán otras herramientas (capas, elementos flotantes, etc.).

Las tablas pueden ser consideradas como un grupo de filas donde cada una de ellas contiene un grupo de celdas. Una tabla puede ser insertada en un documento HTML usando tres elementos básicos: el elemento TABLE (estructura contenedora principal), el elemento TR (contenedor de fila) y el elemento TD (celda).

Cuando el contenido de una celda debe ser vacío, deberías usar una espacio en blanco (que en HTML se escribe como  ) como su contenido. Esto hará que tu página se visualice correctamente, ya que algunos navegadores tienen problemas representando celdas vacías. Ejemplo: <td> </td>

Veamos un ejemplo. Crea un archivo ejemplo.html con este código y visualízalo:

<!DOCTYPE html> <html>     <head>         <title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>     </head>     <body>         <table border="2px"> <!-- Lo cambiaremos por CSS -->            <tr>               <td>Celda 1</td>               <td>Celda 2</td>               <td>Celda 3</td>           </tr>           <tr>               <td>Celda 4</td>               <td>Celda 5</td>               <td>Celda 6</td>           </tr>         </table>     </body> </html>

Ten en cuenta que el atributo border está deprecated o not supported por las versiones más recientes de HTML. Más adelante veremos cómo reemplazarlo usando técnicas CSS.

UNIFICACIÓN DE CELDAS

En algunas ocasiones, puede ser necesario unificar dos o más celdas en una sola que pasará a ocupar el lugar de aquellas afectadas. Estas unificaciones pueden ser llevadas a cabo con los atributos “rowspan” (para unificación vertical) y “colspan” (para unificación horizontal).

UNIFICACIÓN HORIZONTAL CON COLSPAN

Como hemos comentado con anterioridad, para la unificación horizontal de celdas, utilizaremos el atributo de celda “colspan”. Crea un archivo ejemplo.html con este código y visualízalo. Recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS:

<!DOCTYPE html> <html>     <head>         <title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>     </head>     <body>         <table border="2px"> <!-- Lo cambiaremos por CSS -->             <tr>                 <td>Campo 1</td>                 <td>Campo 2</td>                 <td>Campo 3</td>             </tr>             <tr>                 <td colspan="2">Campos 4 y 5</td>                 <td>Campo 6</td>             </tr>             <tr>                 <td>Campo 7</td>                 <td>Campo 8</td>                 <td>Campo 9</td>             </tr>         </table>     </body> </html>

Gráficamente:

UNIFICACIÓN VERTICAL CON ROWSPAN

En este caso, para la unificación vertical de celdas, utilizaremos el atributo de celda “rowspan”. Crea un archivo ejemplo.html con este código y visualízalo (recuerda que el atributo border está deprecated o not supported y que más adelante veremos como reemplazarlo mediante el uso de CSS):

<!DOCTYPE html> <html>     <head>              <meta charset="utf-8">         <title>Ejemplo del uso de tablas- aprenderaprogramar.com</title>     </head>     <body>         <table border="2px"> <!-- Lo cambiaremos por CSS -->             <tr>                 <td rowspan="3">Campo unificado</td>                 <td>Campo 2</td>                 <td>Campo 3</td>             </tr>             <tr>                 <td>Campo 5</td>                 <td>Campo 6</td>             </tr>             <tr>                 <td>Campo 8</td>                 <td>Campo 9</td>             </tr>         </table>     </body> </html>

Gráficamente:

CELDAS DE ENCABEZADO

Hay dos tipos de celdas que pueden ser definidas en una tabla HTML. Una de ellas es la celda simple (elemento TD), ya definido anteriormente, y la otra es un tipo especial de celda (elemento TH ó table header, cabecera de tabla) que contiene información de encabezado para un conjunto de celdas específicas.

Los navegadores representan normalmente el contenido de las celdas especiales como texto centrado y en negrita, atributos que también pueden ser visualmente logrados con la utilización de celdas normales (elemento TD). Entonces, ¿para que son útiles estos encabezados? Cuando utilizamos th la celda queda definida como encabezado, no sólo tiene el aspecto de un encabezado. Por poner un símil, no es lo mismo vestirse de policía sin serlo, que ser policía. No es lo mismo una celda que parece un encabezado sin estar definida como tal, que una celda definida realmente como encabezado. Los navegadores para personas invidentes identifican este tipo de encabezados y le dan un tratamiento especial. Además algunos motores de búsqueda (bing, google, yahoo) dan un tratamiento distinto a este tipo de celdas, y algunos navegadores crean efectos especiales para este tipo de celdas. Finalmente, disponer de encabezados nos permitirá crear tablas con un diseño específico para los encabezados. Escribe este código con tu editor de texto y comprueba sus resultados:

<!DOCTYPE html> <html>     <head>              <meta charset="utf-8">         <title>Ejemplo del uso de tablas- aprenderaprogramar.com</title>     </head>     <body>         <table border="2px"> <!-- Lo cambiaremos por CSS -->             <tr>                 <th>Alumno</th>                 <th>Asignatura</th>                 <th>Calificación</th>             </tr>             <tr>                 <td>Juan Pérez</td>                 <td>Matemáticas</td>                           <td>9</td>             </tr>             <tr>                 <td>Rodolfo Cárdenas</td>                 <td>Francés</td>                           <td>5</td>             </tr>         </table>     </body> </html>

TÍTULO DE LAS TABLAS CON EL ELEMENTO CAPTION

Mediante el elemento caption, podemos definir el título de una tabla. Este título debería describir de una manera breve y precisa el contenido y la naturaleza de la tabla y es habitualmente representado en algún lugar cercano a la tabla (su posición puede ser establecida usando CSS). El elemento caption sólo está permitido si va justo después de la apertura de la tabla. Escribe este código y comprueba el resultado.

<!DOCTYPE html> <html>     <head>         <title>Ejemplo del uso de tablas - aprenderaprogramar.com</title>     </head>     <body>         <table border="2px"> <!-- Lo cambiaremos por CSS -->             <caption>Título de la tabla</caption>             <tr>                 <td>Contenido 1</td>                 <td>Contenido 2</td>                 <td>Contenido 3</td>             </tr>             <tr>                 <td>Contenido 4</td>                 <td>Contenido 5</td>                 <td>Contenido 6</td>             </tr>         </table>     </body> </html>

EJERCICIO

Crea un documento con una tabla HTML que tenga la apariencia de la tabla indicada a continuación. La primera fila debe estar compuesta por elementos de encabezado de tabla (th). No te preocupes por el centrado de los textos, sino únicamente por que las subdivisiones en la tabla aparezcan correctamente.

Jefe departamento	Jefe sección	Empleado	Edad empleado
Juan Alberto Chan	Martín López	Maite Suárez	55
	Luis Morales	Mateo Carralde	33
Diana Rodríguez	Carlos Hernández	Alberto Fernández	62
Luis Pérez		Diego Gutiérrez	44

 

TOMADO DE:

http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=516:crear-tablas-html-colspan-y-rowspan-unir-celdas-horizontal-y-vertical-tr-td-th-caption-o-titulo-cu00719b&catid=69:tutorial-basico-programador-web-html-desde-cero&Itemid=192

JULIO 26 /16




EVALUACION