jueves, 28 de octubre de 2021

MANEJO DEL VIDEO



Hasta el momento hemos visto los conceptos básicos de HTML para el diseño de páginas WEB, las páginas cobran vida cuando insertamos en ella elementos multimedia como el video, en esta oportunidad vamos a mirar como insertar un video desde Youtube utilizando únicamente el código de inserción suministrado por la misma página, observa el siguiente ejemplo:

<HTML>

<HEAD><BODY bgcolor="yellow">

</HEAD>

<BODY>

<CENTER><H1>PRIMER VIDEO</H><BR><BR>

<iframe width="853" height="480"src="https://www.youtube.com/embed/XQIzTAHDxn8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</CENTER>

</BODY>

</HTML>

Colocar video en una página WEB es un proceso muy simple, solo debes ingresar a YouTube, buscar el video de tu preferencia, dar clic derecho sobre el video y seleccionar la opción COPIAR CÓDIGO DE INSERCIÓN (en el ejemplo se muestra de color azul) desde el menú contextual; luego pega este código dentro del cuerpo o BODY de tu código general en el blog de notas tal como se muestra en el ejemplo anterior.

ACTIVIDADES

1. Construye una página web con cualquier tema de tu preferencia y en ella inserta 4 videos dentro de una tabla de 2 filas por 2 columnas, envía tu trabajo al correo habitual hasta el 2 de Noviembre de 2021.


jueves, 21 de octubre de 2021

ENLACES

 Vamos a ver qué son los hiperenlaces, para qué sirven y cómo crearlos. Son un elemento muy común en cualquier página web, de hecho, podríamos decir que el hiperenlace o hipertexto es la instrucción o etiqueta más importante del lenguaje HTML como se desprende del propio nombre (Hyper Text Markup Lenguage).

En este vídeo puedes ver hiperenlaces, primera parte:Videotutorial

En este vídeo puedes ver hiperenlaces, segunda parte:Videotutorial

Hiperenlaces. Definición

Un hiperenlace se escribe con la etiqueta <a> y permite ir (navegar) a un recurso de internet designado por su dirección de internet (URL). El recurso más usual es una página web pero también puede ser un archivo de imagen, vídeo, dirección email, dirección ftp, punto de ancla, ...

Un hiperenlace tiene dos partes fundamentales, el destino y el elemento que activa el enlace. Vamos a explicarlo sobre el siguiente ejemplo.

La forma más usual de utilizar la etiqueta <a> es para enlazar con otra página web mediante un texto:

Visita aulaClic

El código correspondiente es este:

<a href="http://www.aulaclic.es">Visita aulaClic</a>

El elemento que activa el enlace es el texto Visita aulaClic que al ser pulsado nos lleva al destino del hiperenlace. El destino se indica con el atributo href que en este caso es una dirección de internet (URL). Al colocar el cursor en el texto del hiperenlace el cursor toma la forma de una mano para indicarnos que se trata de un hiperenlace. Si hacemos clic con el botón derecho aparecerá un menú contextual con varias opciones (Abrir en una pestaña nuevaGuardar enlace, ...). En los dispositivos táctiles, al no existir cursor, el comportamiento es diferente. No hay forma de saber si un texto contiene un enlace hasta que demos una pulsación corta, con lo cual se activará; o demos una pulsación larga para que aparezca el menú contextual.

También es frecuente que el elemento que activa el enlace sea una imagen, como en el siguiente ejemplo:

El código correspondiente es este:

<a href="http://www.aulaclic.es"><img src="comunes/logo_ac1_50.gif"/></a>

El elemento que activa el enlace se escribe entre las etiquetas <a> y </a> y puede ser una etiqueta de texto (párrafoh1, ..), una imagen y también otros elementos (sectionlista, ...); incluso podemos colocar más de un elemento, por ejemplo una imagen y un texto.

Otra forma de nombrar un hiperenlace es hipervínculo o hipertexto, y si estamos en un contexto que se habla de Internet también se les puede llamar simplemente enlace o vínculo.

EJEMPLO: En el siguiente ejemplo se presenta una tabla con 3 hiperenlaces que conllevan a paginas cuyas url fueron copiadas de la barra del navegador y se despliegan desde una imágen cada uno.

<HTML>
    <HEAD>
        <BODY BGCOLOR="BLUE">
    </HEAD>

<BODY>
        <CENTER><h1>AUTOS ALEMANES</h1><br><br>
        
        <TABLE border="1">
        <TR>
        <TD>
        <a href="https://www.mercedes-benz.com.co/"><img src="mercedes.png"></a>
        </TD>
        </TR>
        
        <TR>
        <TD>
        <a href="https://bmwshop.autogermana.com.co/"><img src="bmw.jfif"></a>
        </TD>
        </TR>

        <TR>
        <TD><a href="https://www.audi.com.co/"><img src="audi.jfif"></a>
        </TD>
        </TR>
        </TABLE>

</CENTER>
</BODY>
</HTML>

ACTIVIDADES

1. Observa con atención los videos planteados en esta guía.
2.Realiza en el blog de notas un ejercicio similar al ejemplo presentado, puedes utilizar cualquier otro tema de tu preferencia.
3. Envia tus trabajos al correo habitual hasta el 28 de Octubre de 2021





miércoles, 6 de octubre de 2021

ETIQUETAS PARA TABLAS

 Etiqueta <th>

Dado que es muy común que las tablas tengan una primera fila de cabecera se creó la etiqueta <th>. Esta etiqueta se aplica a las celdas de cabecera en lugar de la etiqueta td y el efecto fundamental es que tiene un formato diferente, normalmente letra negrita y alineación centrada. Como ya sabemos, este formato se puede cambiar con las hojas de estilo. La etiqueta <th> se puede colocar tanto en las filas como en las columnas, por ejemplo:

<table>
 <tr>
  <th>Marcas</th>
  <th>Seat</th>
  <th>Ford</th>
  <th>BMW</th>
</tr> <tr> <th>2016</th> <td>23900</td> <td>21500</td> <td>11500</td> </tr> <tr> <th>2017</th> <td>24600</td> <td>23500</td> <td>13400</td> </tr> </table>

Produce este resultado:

MarcasSeatFordBMW
2016239002150011500
20172460023500
13400

También se pueden utilizar las propiedades de formato en la propia tabla para colocar bordes, por ejemplo, para poner borde y color de fondo rojo, podemos escribir el siguiente código <table border="1" bgcolor="red">

Unir celdas con colspan y rowspan

Con los atributos colspan y rowspan podemos unir o fusionar celdas adyacentes, así obtendremos celdas de mayor tamaño, el resultado siempre será un rectángulo. 

 El atributo colspan extiende la celda tantas celdas a la derecha como le indiquemos, contando la celda actual. Por ejemplo colspan="2" ocupa su celda y una más a la derecha. Veamos este código aplicado a una tabla:

<table border="1">
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="2">Celda cs2</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="3">Celda cs3</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td colspan="4">Celda cs4</td>
 </tr>
</table>

Produce este resultado:

CeldaCeldaCeldaCelda
Celda cs2CeldaCelda
Celda cs3Celda
Celda cs4

Observa que al expandir la celda, en la fila ponemos menos etiquetas <td>.

 El atributo rowspan expande la celda tantas celdas hacia abajo como le indiquemos, contando la celda actual.

<table border="1">
 <tr>
<td>Celda</td> <td rowspan="2">Celda rs2</td> <td rowspan="3">Celda rs3</td> <td rowspan="4">Celda rs3</td> </tr> <tr> <td>Celda</td> </tr> <tr> <td>Celda</td> <td>Celda</td> </tr> <tr> <td>Celda</td> <td>Celda</td> <td>Celda</td> </tr> </table>

CeldaCelda rs2Celda rs3Celda rs3
Celda
CeldaCelda
CeldaCeldaCelda

Observa que al aplicar rowspan a una celda, "cogemos" una celda de la siguiente fila, por lo que la siguiente celda tendrá una celda menos.

Y en cualquier caso podemos combinar estos dos atributos en la misma celda:

<table border="1">
 <tr>
  <td colspan="2" rowspan="2">Celda cs2 rs2</td>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
 </tr>
 <tr>
  <td>Celda</td>
  <td>Celda</td>
  <td>Celda</td>
 </tr>
</table>

Produce este resultado

Celda cs2 rs2Celda
Celda
CeldaCeldaCelda



ACTIVIDADES

1. Realiza los ejercicios planteados en esta entrada de blog.

2. Elabora una página web cuyo título sea , CUADRO DE HONOR y que contenga una tabla con bordes con la siguiente información, utiliza las etiquetas colspan y rowspan, envía el desarrollo de tu trabajo al correo habitual hasta el día 8 de Octubre de 2021.




TRABAJO FINAL