Mostrando entradas con la etiqueta 5 Bloque - Programación en HTML. Mostrar todas las entradas
Mostrando entradas con la etiqueta 5 Bloque - Programación en HTML. Mostrar todas las entradas

miércoles, 3 de noviembre de 2021

Cómo crear tablas en el blog

Para aprender a escribir código HTML podemos ir viendo tutoriales en Internet. Aquí te muestro un PDF con un resumen de órdenes que puedes utilizar en clase:

http://www.ens.uabc.mx/desquer/dam/guia_rapida_html.pdf

Por otro lado, hay un truco, que es copiar el código ya hecho y hacer pequeñas modificaciones. Por ejemplo en la siguiente web nos explican cómo hacer una tabla similar a la que hemos usado en las fotos anteriores:

Texto o imagen 1Texto o imagen 2
Texto o imagen 3Texto o imagen 4

Necesitas un tabla para pegar tus fotos. Puedes usar la mía o aprender a crearla con las siguientes indicaciones.

Para crear una tabla semejante a ésta hay que teclear el siguiente códico en la pestaña HTML  https://avalerofer.blogspot.com/2010/03/insertar-tablas-en-el-blog.html

<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
<tr><td>Texto o imagen 3</td><td>Texto o imagen 4</td></tr>
</tbody>
</table>

El código de la tabla tiene la etiqueta <table> de apertura y </table> de cierre en forma anidada, como el resto de las etiquetas. Y esta etiqueta de tabla tiene los siguientes atributos dentro de la etiqueta de apertura, que creo que son los mínimos que puede tener para conseguir una tabla decente.
  • bgcolor: color de fondo, cuyos códigos se pueden tomar de esta página de Wikipedia sobre los colores en HTML.
  • border: el tamaño del borde en píxeles, que se puede poner en cero si no queremos borde.
  • cellpadding: el relleno dentro de la celda entre los bordes y el texto o las imágenes. Para ver cómo funciona esto, lo mejor es cambiar el número, que representa los píxeles.
  • width: es la anchura de la tabla; en este caso, el 100% para que ocupe todo lo ancho del documento, pero también podemos ponerle un número de píxeles de ancho. Para esta anchura se utiliza la etiqueta style con código de hojas de estilo CSS; no es HTML.
Las demás etiquetas son las siguientes:
  • tbody: indica el cuerpo de la tabla.
  • tr: crea una fila.
  • td: crea una celda dentro de una fila.
La forma más práctica de crear una tabla es escribir el código de una fila para después copiarla y pegarla tantas veces como filas queramos que haya. Es mejor dejar el número de celdas igual dentro de cada fila para no liarnos con más código. Es decir, primero escribimos los códigos (de apertura y de cierre) de la tabla, con los atributos de ésta:
<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">
<tbody>
<tr><td>Texto o imagen 1</td><td>Texto o imagen 2</td></tr>
</tbody>
</table>
Y después pegamos en medio el código de cada fila tantas veces como filas queramos. En forma anidada, vemos el código de la fila en color naranja, y dentro de la fila, las dos celdas o columnas en color azul y verde.

Yo practiqué con la inserción de dos filas mas.

Texto o imagen 1Texto o imagen 2
Texto o imagen 3Texto o imagen 4
Texto o imagen 3Texto o imagen 4
Texto o imagen 3Texto o imagen 4


domingo, 17 de octubre de 2021

Tarea 18-03-2020 ¿Cómo poner una imagen en la cabecera del blog?

Resultado de imagen de foto panoramica playa

Puedes buscar un tutorial en Internet o seguir éste que yo ya busqué.

Colocar y Ajustar una Imagen en la Cabecera del blog
http://www.compartidisimo.com/2011/01/colocar-y-ajustar-una-imagen-en-la.html

Tarea: coloca una foto panorámica hecha por ti o elegida de Internet (derechos libres de utilización) en la cabecera de tu blog.

Si te gusta más otra foto larga y estrecha de Internet, o una nueva panorámica que quieras hacer hoy desde la ventana de tu casa, puede valer también.

Habrá una lectura, vídeo, tarea... por cada día de clase, sigue atento al blog mirando las fechas en que pido cada tarea. Las entregas de tareas se harán de diferentes maneras, se especificará para cada una.

lunes, 14 de junio de 2021

HTML 1º Parte: Pimeros pasos con código HTML

Ana María madrugó el sábado por la mañana y después de desayunar arrancó su coche en dirección al centro comercial. Al salir del garaje se percató de que un coche la seguía.

Ana María madrugó el sábado por la mañana y después de desayunar arrancó su coche en dirección al centro comercial. Al salir del garaje se percató de que un coche la seguía.

uno dos
tres cuatro

martes, 31 de marzo de 2020

Comprar, tirar, comprar - Vídeo sobre el consumismo - Tarea 3

Resultado de imagen de comprar, tirar, comprarHola, hoy nos toca hacer la Tarea 3 de este artículo, que es entender el código html de inserción de un vídeo.

Comprar, tirar, comprar el documental que relata la historia secreta de la obsolescencia programada. Duración 1h:18m. El enlace a Youtube es  

Tarea 1  ver en clase el vídeo en 2 sesiones o 3 (ya está hecho).

Tarea 2  cuestionario sobre el audiovisual
(ya está hecho).

Tarea 3  crea un artículo en tu blog con la pantalla de vídeo que lo reproduzca. Investiga en Internet cómo se hace.

El siguiente código html te puede servir de ayuda para incrustar el audiovisual:

<iframe width="560" height="315" src="https://www.youtube.com/embed/mUaCLzbDgm0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe.....>   quiere decir que se inserta un vídeo
width="560"   es la anchura con la que queremos que se vea en el artículo
height="315"  es la altura con la que queremos que se vea en el artículo
src="https://www.youtube.com/embed/mUaCLzbDgm0"                     es la orden src="...." con la dirección URL del vídeo
frameborder="0"   es el tipo de borde que mostrará el vídeo

allow="accelerometer   supongo que es para que si se ve la web desde un móvil, se pueda utilizar el dedo sobre la pantalla (investiga tu si quieres y me lo dices)
autoplay   permite que el vídeo se inicie automáticamente

encrypted-media  
permite la reproducción sin plugins de contenido protegido (cifrado) en navegadores web, de manera que funcione perfectamente en todas las plataformas principales
gyroscope  activa el giroscopio - combinación del osciloscopio y de los acelerómetros (sensores capaces de captar la inclinación del dispositivo y la aceleración de dicho movimiento) lo que permite al smartphone saber en qué plano del espacio se encuentra, cuál es su aceleración con respecto al punto de partida y si el dispositivo está girando sobre el plano o inclinándose.
picture-in-picture"  es una función que abre el vídeo que estamos viendo en una ventana flotante de la pantalla. YouTube ya lo incorporó en su aplicación para móviles y seguro que ya lo has probado.
allowfullscreen permitir redimensionado hasta cubrir la pantalla por completo.
</iframe> es la contraorden de <iframe.....>, y la cierra.


Las preguntas del formulario que ya hiciste fueron inspiradas por el siguiente material (ya no es necesario que lo mires):
Para seguir trabajando con los contenidos de este vídeo tenemos este material hecho por el Ministerio de Educación, Cultura y Deporte (MECD): https://leer.es/documents/235507/242734/eso4_cs_his_prof_usodocumental_albaambros_ramonbreu.pdf/5d9e5579-26ad-4a85-9bdd-7050e817c5db

jueves, 26 de marzo de 2020

HTML - 2ª Parte - Texto sencillo e imagen usando código html

Cuando publicamos un artículo en un blog y usamos los iconos superiores, en ocasiones se autoescribe códico innecesario, por eso los programadores prefieren teclear ellos personalmente las instrucciones.

Ya sabes que los bogs están escritos en código de programación HTML. También sabes copiar código y pegarlo, pero quizá no lo entiendas aún. Las instrucciones más básicas son:
  • <br /> para cambiar de renglón
  • <i>Así es como se pone un texto en cursiva</i>
  • <b>Así es como se pone un texto en negrita</b>
  • <u>Así es como se pone un texto con subrayado</u> 
  • <ul> para iniciar un listado como éste con viñetas (el puntito inicial)</ul>
  • <li> para iniciar un nuevo renglón en un listado con viñeta</li>
Si queremos pegar la imagen desde una dirección web, tenemos que usar
<img src="dirección de la página">

Por ejemplo:
<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png">


Tarea de hoy:

- Prueba a hacer una lista de la compra con al menos 5 productos, en un artículo de tu blog, con título "Lista de la compra" en negrita cursiva y subrayado, con la pestaña "HTML"  activada (en el menú superior a la derecha) y pegar una imagen que venga al caso, con su dirección de internet según el ejemplo que te acabo de explicar, sin utilizar en ningún momento la pestaña "Redactar".
- Realiza una captura de lo que has tecleado.
- Pasa a la pestaña "Redactar" para ver cómo se vería en el blog y realiza otra captura de la pantalla.
- Mándame las dos capturas en un correo electrónico (a mi correo institucional, no al otro) y publica como borrador el artículo en tu blog, con título de la entrada "Lista de la compra e imagen con código HTML" y etiqueta: 5 Bloque - Programación en HTML.


P.D. Si no te contesto a tu mensaje de entrega de tarea (esta tarea o cualquiera de las anteriores), es que no la he recibido, lo digo por si hay alguien mandando cosas a alguna dirección de correo que no es la mía.

HTML - 1ª Parte

Si quiero escribir una lista de recados en código html como la siguiente:

Tareas de hoy
  • Ir al banco a las 8:30 a por una fianza.
  • Llevar las escrituras de un cliente al notario.
  • 11:30 cita con un cliente en la gestoría + café.
  • 13:00 hacer declaraciones trimestrales hasta las 14:00.
  • 16:00 recoger escrituras en notario
  • 17:00 hacer declaraciones trimestrales hasta las 20:00.
tendría que usar los siguientes trucos:

<i><u><b>Tareas de hoy</b></u></i><br />
<ul>
<li>Ir al banco a las 8:30 a por una fianza.</li>
<li>Llevar las escrituras de un cliente al notario.</li>
<li>11:30 cita con un cliente en la gestoría + café. </li>
<li>13:00 hacer declaraciones trimestrales hasta las 14:00.</li>
<li>16:00 recoger escrituras en notario </li>
<li>17:00 hacer declaraciones trimestrales hasta las 20:00.</li>
</ul>

y ahora te traduzco lo que significa cada cosa:
  • <br /> para cambiar de renglón
  • <i>Así es como se pone un texto en cursiva</i>
  • <b>Así es como se pone un texto en negrita</b>
  • <u>Así es como se pone un texto con subrayado</u> 
  • <ul> para iniciar un listado como éste con viñetas (el puntito inicial)</ul>
  • <li> para iniciar un nuevo renglón en un listado con viñeta</li> 
Tarea de hoy: intenta entender estos conceptos, para aplicarlos en la tarea que pondré el próximo día.

miércoles, 12 de febrero de 2020

Fotos por la playa

Resultado de imagen de contactos fotografia analógicaTabla de fotos capturadas en esa paseo por la playa, en el tamaño más pequeño posible, como si fueran "contactos" de la antigua fotografía analógica.

Código html utilizado en este artículo hasta el momento:

- para cambiar de renglón <br /> 

- para insertar una tabla de fondo color salmón, borde tipo 1, relleno de celdas tipo 5, anchura 100
<table bgcolor="#f4e3bc" border="1" cellpadding="5" style="width: 100%;">  y para cerrar la tabla </table>


Resultado de imagen de colores hexadecimalEl color está definido por la combinación de números, letras y símbolos contenidos entre comillas  "#f4e3bc", prueba a cambiarlo, y verás aparecer diferentes colores (mejor guíate por una tabla de equivalencias de colores y códigos, para no trabajar al tuntun).

Para iniciar el contenido de la tabla: <tbody> y para cerrarlo </tbody>

Para comenzar una línea o fila de tabla: <tr>  y para cerrarla  </tr>

Para comenzar una columna <td> y para cerrarla </td>


Foto 1: Entrada de edificio
Foto 2: Automovil
Foto 3: Fondo horizonte con edificios

Foto 4: Panorámica horizontal del paseo de la playa
Foto 5: Panorámica vertical de un edificio
Foto 6.1: imagen formato 16:9
Foto 6.2: imagen formato 4:3
Foto 6.3: imagen formato 1:1
Foto 7:
Foto 8:
Foto 9:
Foto 10: macro

miércoles, 15 de enero de 2020

Formulario con Google Drive

Resultado de imagen de forms googleTutoriales interesantes:
Comienza a diseñar un formulario con preguntas preguntas (diferente estilo de pregunta cada una) sobre el contenido de los apuntes de la Unidad que estamos estudiando estos días.:

"Arquitectura y Funcionamiento del Ordenador"

El formulario tiene que estar compartido para todo el grupo que participa en él, para que en caso de ausencia de alguno de sus miembros, los otros puedan seguir trabajando en él.

Cuando estás en el formulario le das a Enviar, arriba a la derecha y copias el código html que se te muestra tras pinchar en la opción <> (ver imagen).

Cuando termines, sube tu formulario a un artículo de tu blog. Recuerda pegarlo cuando en tu edición del artículo tengas la pestaña HTML activada, arriba del todo en la zona de la izquierda de la ventana. Etiqueta del artículo 2 Bloque - Arquitectura del Hardware, y 5 Bloque - Programación en HTML.

En el artículo saldrá en una ventana tu encuesta, y podrá ser contestado por los demás grupos de clase, o por la profesora. Recibirás las respuestas de cada persona, en un resumen en forma de hoja de cálculo de Drive.

Muestra en clase el ejercicio a la profe para que lo evalúe: preguntas y respuestas.

Yo realicé un formulario similar como demostración con preguntas de todos los tipos que permite el test, sobre la película "JOBS" sugeridas por el alumnado, vínculo copiado: https://forms.gle/78VxKEaickByuzZ79
y código html pegado:



viernes, 31 de mayo de 2019

Big Data en Educación




Hoy aprendemos a insertar vídeos en el blog. Yo usaré el del vídeo con el código a incrustar en la pertaña HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/w07yJkHbIwE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>