In learning code: agosto 2019

lunes, 19 de agosto de 2019

Imágenes, sonidos, mapas y video en HTML5

Imágenes en HTML5

El uso de imágenes en HTML se realiza mediante la etiqueta "img", se establece las siguientes propiedades

Fuente: src=""
Alto: height=""
Ancho: width=""
Descripción: alt=""

Ejemplo:

<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"
     width="200" 
     height="50" 
     alt="logo de Blogger"/>

En este caso establecemos como fuente de la imagen el logo de Blogger mediante su URL que apunta a un archivo de imagen (pero se puede llamar archivos locales por ejemplo: src="img/foto.png"), un alto de 50px, ancho de 200 px y una descripción que indica que es el logo de Blooger y quedaría de la siguiente manera:

Nota: La descripción es muy importante hoy en día, pues permite que personas con cualquier dificultad visual mediante su navegador y las extensiones para estos casos les indiquen de que se trata aquella imagen que no puedan visualizar.

Sonidos en HTML5

El uso de sonidos mediante la etiqueta "audio" es sencillo y la interfaz viene por defecto en cada navegador que permite su uso. Tiene como atributos:

Controles: controls
Reproducción automática: autoplay
Repetición automática: loop
Pre-carga: preload, para archivos pesados, que puede tomar tres valores:

Primer caso: preload = "none", no se almacena en el Buffer el archivo.
Segundo caso: preload = "auto", almacena el archivo.
Tercer caso: preload = "metada", solo almacena metadatos.

Ejemplo:

<audio src="audio.ogg" controls autoplay loop>
   <p>Mensaje en caso no se pueda reproducir en un navegador</p>
</audio>

En este caso establecemos como fuente un archivo llamado audio.ogg con los controles, reproducción automática y repeticiones activadas.

Nota: Los formatos más comunes y soportados son ogg y mp3, pero no los únicos.

Mapas en HTML5

Su inserción es mucho más efectiva empleando servicios de terceros como Google Maps

Ejemplo:

<iframe src="https://www.google.com/maps/embed?
pb=!1m18!1m12!1m3!1d124130.9974978055!2d-72.00929001754207!3d-
13.529842657332434!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3
!1m2!1s0x916dd5d826598431%3A0x2aa996cc2318315d!2sCusco!5e0!3m2
!1ses-419!2spe!4v1566252558372!5m2!1ses-419!2spe" 
   width="600" height="450" frameborder="0" 
   style="border:0" allowfullscreen></iframe>

En este caso empleamos el servicio de Google Maps para la ciudad de Cusco:

Video en HTML5

Se pueden implementar mediante la etiqueta "video" o desde un servicio de terceros como YouTube

Ejemplos:

<video controls>
  <source src="mine.mp4" type="video/mp4">
</video>

En este caso establecemos como fuente un archivo llamado mine.mp4. Podemos emplear también Youtube.

Tablas en HTML5

La etiqueta <table>

Para la construcción de tablas en HTML se emplea el elemento HTML Table, dentro de este se crea la cabecera, el cuerpo y pie de tabla.

Cabecera: <thead>
Cuerpo: <tbody>
Pie: <tfoot>

Dentro de la cabecera de la tabla se colocan los <tr> que son las filas y dentro de estas filas las columnas de las cabeceras que son los <th>

Dentro del cuerpo y/o del pie de la tabla se colocan los <tr> que son las filas y dentro de estas filas las columnas que son los <td>, su puede optar por colocar <th> en el pie de la tabla

Modificaciones básicas

A la etiqueta Table se le agrega una propiedad que es "border" indicando el grosor del borde, si este se omite la tabla aparecerá sin borde.

Por ejemplo el siguiente código consideramos un borde de 1px:

<table border="1">
    <thead>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cuerpo 1.1</td>
            <td>Cuerpo 2.1</td>
        </tr>
        <tr>
            <td>Cuerpo 1.2</td>
            <td>Cuerpo 2.2</td>
        </tr>
        <tr>
            <td>Cuerpo 3.2</td>
            <td>Cuerpo 3.2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Pie 1</th>
            <th>Pie 2</th>
        </tr>
    </tfoot>
</table>

Generaría lo siguiente:

Titulo 1	Titulo 2
Cuerpo 1.1	Cuerpo 2.1
Cuerpo 1.2	Cuerpo 2.2
Cuerpo 3.2	Cuerpo 3.2
Pie 1	Pie 2

Se puede observar que el contenido de los <th> aparece centrado y en negrita, que es una característica de esta etiqueta.

Etiqueta <caption>

A la tabla también se le puede agregar un título general mediante la etiqueta <caption>

Por ejemplo el siguiente código consideramos un borde de 1px:

<table border="1">
    <caption>Título de la tabla</caption>
    <thead>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cuerpo 1.1</td>
            <td>Cuerpo 2.1</td>
        </tr>
        <tr>
            <td>Cuerpo 1.2</td>
            <td>Cuerpo 2.2</td>
        </tr>
        <tr>
            <td>Cuerpo 3.2</td>
            <td>Cuerpo 3.2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Pie 1</th>
            <th>Pie 2</th>
        </tr>
    </tfoot>
</table>

Generaría lo siguiente:

Título de la tabla
Titulo 1	Titulo 2
Cuerpo 1.1	Cuerpo 2.1
Cuerpo 1.2	Cuerpo 2.2
Cuerpo 3.2	Cuerpo 3.2
Pie 1	Pie 2

La propiedad colspan

Mediante esta propiedad una columna puede ocupar el espacio de más de 1 columna.

Por ejemplo el siguiente código consideramos un borde de 1px:

<table border="1">
    <caption>Título de la tabla</caption>
    <thead>
        <tr>
            <th>Titulo 1</th>
            <th>Titulo 2</th>
            <th>Titulo 3</th>
            <th>Titulo 4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cuerpo 1.1</td>
            <td>Cuerpo 2.1</td>
            <td colspan="2">Cuerpo 3</td>
        </tr>
        <tr>
            <td colspan="4">Cuerpo 2.1</td>
        </tr>
        <tr>
            <td>Cuerpo 3.1</td>
            <td colspan="3">Cuerpo 3.2</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th colspan="2">Pie 1</th>
            <th colspan="2">Pie 2</th>
        </tr>
    </tfoot>
</table>

Generaría lo siguiente:

Título de la tabla
Titulo 1	Titulo 2	Titulo 3
Cuerpo 1.1	Cuerpo 2.1	Cuerpo 3
Cuerpo 2.1
Cuerpo 3.1	Cuerpo 3.2
Pie 1		Pie 2

domingo, 18 de agosto de 2019

Caracteres especiales en HTML

Tabla de caracteres especiales en HTML

Nombre	Símbolo	Código
Signo ampersand	&	&
Comillas dobles	"	"
Signo "menor que"	<	<
Signo "mayor que"	>	>
Espacio en blanco
Apertura de exclamación	¡	¡
Apertura de interrogación	¿	¿
Signo del centavo	¢	¢
Signo de la Libra Esterlina	£	£
Signo de divisa general	¤	¤
Signo de Yen	¥	¥
Barra vertical dividida	¦	¦
Signo de sección	§	§
Diéresis	¨	¨
Signo de copyright	©	©
Indicador ordinal femenino	ª	ª
Indicador ordinal masculino	º	º
Comillas angulares de apertura	«	«
Comillas angulares de cierre	»	»
Signo de negación (angular)	¬	¬
Signo de registrado	®	®
Raya superior	¯	¯
Signo de grado	°	°
Signo de más o menos	±	&plusmm;
Superíndice uno	¹	¹
Superíndice dos - cuadrado	²	²
Superíndice tres - cubo	³	³
Acento agudo	´	´
Signo de micro	µ	µ
Signo de fin de párrafo	¶	¶
Punto medio	·	·
Cedilla	¸	¸
Un cuarto	¼	¼
Un medio	½	½
Tres cuartos	¾	¾
A mayúscula con acento grave	À	À
A minúscula con acento grave	à	à
A mayúscula con acento agudo (tilde)	Á	Á
A minúscula con acento agudo (tilde)	á	á
A mayúscula con acento circunflejo	Â	Â
A minúscula con acento circunflejo	â	â
A mayúscula con virgulilla	Ã	Ã
A minúscula con virgulilla	ã	ã
A mayúscula con diéresis	Ä	Ä
A minúscula con diéresis	ä	ä
A mayúscula con anillo	Å	Å
A minúscula con anillo	å	å
E mayúscula con acento grave	È	È
E minúscula con acento grave	è	è
E mayúscula con acento agudo (tilde)	É	É
E minúscula con acento agudo (tilde)	é	é
E mayúscula con acento circunflejo	Ê	Ê
E minúscula con acento circunflejo	ê	ê
E mayúscula con diéresis	Ë	Ë
E minúscula con diéresis	ë	ë
I mayúscula con acento grave	Ì	Ì
I minúscula con acento grave	ì	ì
I mayúscula con acento agudo (tilde)	Í	Í
I minúscula con acento agudo (tilde)	í	í
I mayúscula con acento circunflejo	Î	Î
I minúscula con acento circunflejo	î	î
I mayúscula con virgulilla	Ĩ	&Itilde;
I minúscula con virgulilla	ĩ	&itilde;
I mayúscula con diéresis	Ï	Ï
I minúscula con diéresis	ï	ï
O mayúscula con acento grave	Ò	Ò
O minúscula con acento grave	ò	ò
O mayúscula con acento agudo (tilde)	Ó	Ó
O minúscula con acento agudo (tilde)	ó	ó
O mayúscula con acento circunflejo	Ô	Ô
O minúscula con acento circunflejo	ô	ô
O mayúscula con virgulilla	Õ	Õ
O minúscula con virgulilla	õ	õ
O mayúscula con barra inclinada	Ø	Ø
O minúscula con barra inclinada	ø	ø
O mayúscula con diéresis	Ö	Ö
O minúscula con diéresis	ö	ö
U mayúscula con acento grave	Ù	Ù
U minúscula con acento grave	ù	ù
U mayúscula con acento agudo (tilde)	Ú	Ú
U minúscula con acento agudo (tilde)	ú	ú
U mayúscula con acento circunflejo	Û	Û
U minúscula con acento circunflejo	û	û
U mayúscula con diéresis	Ü	Ü
U minúscula con diéresis	ü	ü
Diptongo AE mayúscula	Æ	Æ
Diptongo AE minúscula	æ	æ
C mayúscula con cedilla	Ç	Ç
C minúscula con cedilla	ç	ç
Ñ mayúscula	Ñ	Ñ
Ñ minúscula	ñ	ñ

Páginas

lunes, 19 de agosto de 2019

Imágenes, sonidos, mapas y video en HTML5

Imágenes en HTML5

Ejemplo:

Sonidos en HTML5

Ejemplo:

Mapas en HTML5

Ejemplo:

Video en HTML5

Ejemplos:

Tablas en HTML5

La etiqueta <table>

Modificaciones básicas

Etiqueta <caption>

La propiedad colspan

domingo, 18 de agosto de 2019

Caracteres especiales en HTML

Tabla de caracteres especiales en HTML