lunes, 1 de abril de 2019
martes, 26 de marzo de 2019
Listas y tablas en HTML
Esto es una lista numerada:
Y esto es una lista con viñetas:
- Perro
- Gato
- Periquito
- Canario
- Hámster
- Peces
Y esto es una lista con viñetas:
- Patatas
- Legumbres
- Fruta
- Verdura
- Leche
- Huevos
- Pan
- Azúcar
Definición de las etiquetas
<ol>: define una lista ordenada. Una lista ordenada puede ser numérica o alfabética.
<ul>: define una lista con viñetas.
<li>: define los elementos de la lista. Se usa junto con las etiquetas anteriores.
La etiqueta <dd> se utiliza para describir un término / nombre en una lista de descripción y en cuanto a la etiqueta <dt> define un término / nombre en una lista de descripción.
La etiqueta <dt> se utiliza en conjunción con <dl> (define una lista de descripción) y <dd> (describe cada término / nombre). La etiqueta <dt> (nombre de un término) es de menor rango que <dl> (lista de términos) y de mayor rango que <dd> (descripción de un término). Por ese motivo, la descripción del término (<dd>) queda indentada respecto del nombre de dicho término (<dt>).
La etiqueta <dd> se utiliza para describir un término / nombre en una lista de descripción y en cuanto a la etiqueta <dt> define un término / nombre en una lista de descripción.
La etiqueta <dt> se utiliza en conjunción con <dl> (define una lista de descripción) y <dd> (describe cada término / nombre). La etiqueta <dt> (nombre de un término) es de menor rango que <dl> (lista de términos) y de mayor rango que <dd> (descripción de un término). Por ese motivo, la descripción del término (<dd>) queda indentada respecto del nombre de dicho término (<dt>).
Etiquetas y atributos de tablas
Insertamos una tabla desde Writer:
Verbos
|
Nombres
|
Adjetivos
|
andar
|
niño
|
alto
|
leer
|
globo
|
enorme
|
comer
|
selva
|
discreto
|
vivir
|
casa
|
amarillo
|
Si observamos la pestaña HTML, veremos varias etiquetas y atributos relacionados con las tablas:
<table>: define una tabla en HTML
y sus atributos:
cellpadding="4": especifica el espacio entre la pared de la celda y el contenido de la celda.
cellspacing="0": especifica el espacio entre celdas. Ninguno de estos atributos son compatibles con HTML5.
<tr>:define una fila de la tabla
y su atributo: valign="top": atributo que alinea verticalmente el contenido en una fila de la tabla, en este caso, en la zona superior de la fila. Este atributo no es compatible con HTML5.
<td>: define una celda de tabla
y su atributo: width="33%": especifica el ancho de una celda respecto del total de la tabla, es decir, cada celda ocupa un tercio de la tabla. Este atributo tampoco es compatible con HTML5.
Otra etiqueta, <th>, que no aparece en esta tabla, define un encabezado de tabla.
y sus atributos:
cellpadding="4": especifica el espacio entre la pared de la celda y el contenido de la celda.
cellspacing="0": especifica el espacio entre celdas. Ninguno de estos atributos son compatibles con HTML5.
<tr>:define una fila de la tabla
y su atributo: valign="top": atributo que alinea verticalmente el contenido en una fila de la tabla, en este caso, en la zona superior de la fila. Este atributo no es compatible con HTML5.
y su atributo: width="33%": especifica el ancho de una celda respecto del total de la tabla, es decir, cada celda ocupa un tercio de la tabla. Este atributo tampoco es compatible con HTML5.
martes, 19 de marzo de 2019
Atributos de hipervínculos en HTML
Un enlace en HTML tiene la estructura:
Pero de esta forma, el enlace se abrirá en la misma pestaña en la que nos encontremos.
Para cambiar esto y abrir el enlace en una nueva pestaña hay que incluir un target, que en HTML consistiría en añadir el comando target=”_blank” justo después de la URL (para ser exactos, después de las comillas inglesas y un espacio).<a href =”URL” target=”_blank”>Texto</a>.
En una entrada anterior, tenemos un ejemplo de este tipo:
Cómo "embeber" / insertar contenidos multimedia en blogger
Si observamos el resultado en la pestaña HTML, tenemos esto:
<a href="https://www.slideshare.net/rafaelballesteros1/cmo-embeber-insertar-contenidos-multimedia-en-blogger-28834549" target="_blank" title="Cómo "embeber" / insertar contenidos multimedia en blogger">Cómo "embeber" / insertar contenidos multimedia en blogger</a>
Esta etiqueta nos indica que la URL de destino es https://www.slideshare.net/rafaelballesteros1/cmo-embeber-insertar-contenidos-multimedia-en-blogger-28834549 y el texto que aparece en el link es Cómo "embeber" / insertar contenidos multimedia en blogger. Este enlace se abrirá en una nueva pestaña porque usamos el atributo target=”_blank” justo después de la URL. En esta etiqueta en concreto aparece otro atributo: title. Este atributo hace que, al colocarnos con el ratón encima del enlace, podamos leer un texto informativo (el que aparece entre comillas) sobre el link. En este ejemplo concreto, el texto es Cómo "embeber"; / insertar contenidos multimedia en blogger.
Vamos a probar el atributo target y vamos a cambiar el texto del hipervínculo, manteniendo el enlace:
Cómo insertar contenidos embebidos
Otro uso interesante es la forma de enlazar una imagen a un enlace en HTML. Lo hacemos así:
<a href="URL DESTINO"><img src="URL DE LA IMAGEN"></a>
Siendo URL DESTINO la dirección a la que queremos que nos lleve la imagen y URL DE LA IMAGEN, la imagen en la que pincharemos para ir a la dirección.
Para finalizar esta entrada, hablaremos de la etiqueta <br />: la etiqueta <br /> inserta un salto de línea, lo cual es útil a la hora de dar formato a los contenidos.
miércoles, 13 de marzo de 2019
Atributos de imagen en HTML
En la primera entrada de este blog inserté una imagen de Robbie. Buscando entre el código HTML de esa entrada, he encontrado la etiqueta img, El código es este:
<img border="0" data-original-height="278" data-original-width="259" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOPH7KFXWrKlK9neiZkAjmrxpXYpY3tQMGs0iy6TZbPvE4kd8voP18w1S0phYbiMJzF_utWHqQHArszLda9sQ6ASYXnz5rZLxywRj6b5uuXULtPpvW5ZQGjAkMmHqn9ibFuiPC7UxXGwg/s200/Google+-+icono+robot+gracioso.PNG" width="186" />
Podemos ver que la imagen contiene varios atributos: border, data-original-height, data-original-width, height, src, width.
Vamos a insertar la imagen de nuevo y le vamos a cambiar algunos atributos, como border, height y width.
El nuevo código es:
<img border="5" data-original-height="278" data-original-width="259" height="300" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhklspM7OvXZ3ojZkiUahSTreDyV4wVF4Xvn4k4sKRqcS47cttOH6QSXysdVQ6NdAhv-AH8onY3r1JOonDsml3z4gX6BsGqS97HKtlb44CiO47WNKWodqX0oBYbKKMTtXglTyy9f5cgWYk/s200/Google+-+icono+robot+gracioso.PNG" width="279" />
Es decir, hemos pasado de border="0" a border="5" y de height="200" width="186" a height="300" width="279", o sea, un 50% más grande, lo cual se corresponde con la imagen obtenida (aunque, por ejemplo, el borde no se aprecia arriba, por eso inserto un recorte de la misma a continuación).
Etiqueta PRE
La etiqueta <pre> define el texto preformateado.
El texto en un elemento <pre> se muestra en una fuente de ancho fijo (generalmente Courier) y conserva espacios y saltos de línea.
Ejemplo
martes, 12 de marzo de 2019
Alineaciones en HTML5
En esta segunda ficha, hemos practicado con las alineaciones. Vemos que si decidimos alinear el encabezado al centro, nos aparece dentro de la etiqueta h2 <h2 style="text-align: center;">, es decir, un atributo style que permite alinear el texto (text align), en este caso al centro. Ese atributo cambiará en función de que alineemos a la izquierda (left), a la derecha (right) o justificado (justify).
Si decidimos copiar esa etiqueta en la pestaña HTML, lo que ocurre es que no se produce ningún cambio, salvo que intercalemos algo en esa etiqueta (ver ejemplo 2).
Ejemplo 1
Si decidimos copiar esa etiqueta en la pestaña HTML, lo que ocurre es que no se produce ningún cambio, salvo que intercalemos algo en esa etiqueta (ver ejemplo 2).
Ejemplo 1
Encabezado
Ejemplo 2
Encabezado
En este segundo ejemplo, hemos intercalado la palabra Encabezado entre las etiquetas h2 que contienen el atributo de alineación y así sí que se produce el cambio:
<h2 style="text-align: center;">
Encabezado
</h2>
lunes, 11 de marzo de 2019
API’s interesantes para HTML
La interfaz de programación de aplicaciones, conocida también por las siglas API, en inglés, Application Programming Interface, es un conjunto de subrutinas, funciones y procedimientos (o métodos, en la programación orientada a objetos) que ofrece una biblioteca para ser utilizado por otro software como una capa de abstracción. Son usadas generalmente en las bibliotecas de programación.
Características
Una API representa la capacidad de comunicación entre componentes de software. Se trata del conjunto de llamadas a ciertas bibliotecas que ofrecen acceso a ciertos servicios desde los procesos y representa un método para conseguir abstracción en la programación, generalmente entre los niveles o capas inferiores y los superiores del software. Uno de los principales propósitos de una API consiste en proporcionar un conjunto de funciones de uso general, por ejemplo, para dibujar ventanas o iconos en la pantalla. De esta forma, los programadores se benefician de las ventajas del API haciendo uso de su funcionalidad, evitándose el trabajo de programar todo desde el principio.
Referencias
https://es.wikipedia.org/wiki/Interfaz_de_programación_de_aplicaciones
En www.w3schools.com, en la sección References, encontramos la etiqueta <b> generada en la entrada anterior y se nos indica que sirve para establecer fuentes de tipo negrita, como pudimos observar.
Nota: De acuerdo con la especificación HTML 5, la etiqueta <b> se debe usar como ÚLTIMO recurso cuando ninguna otra etiqueta es más apropiada. La especificación de HTML 5 establece que los encabezados se deben denotar con las etiquetas <h1> a <h6>, el texto enfatizado se debe denotar con la etiqueta <em>, el texto importante se debe denotar con la etiqueta <strong> y el texto marcado / resaltado debe usar la etiqueta <mark>.
En www.quackit.com, en la sección Etiquetas, encontramos que la etiqueta <h2> de la entrada anterior representa un encabezado de nivel 2 en un documento HTML, dentro de los 6 niveles de encabezado que existen en HTML. También nos indica que no existen atributos específicos para esta etiqueta.
Características
Una API representa la capacidad de comunicación entre componentes de software. Se trata del conjunto de llamadas a ciertas bibliotecas que ofrecen acceso a ciertos servicios desde los procesos y representa un método para conseguir abstracción en la programación, generalmente entre los niveles o capas inferiores y los superiores del software. Uno de los principales propósitos de una API consiste en proporcionar un conjunto de funciones de uso general, por ejemplo, para dibujar ventanas o iconos en la pantalla. De esta forma, los programadores se benefician de las ventajas del API haciendo uso de su funcionalidad, evitándose el trabajo de programar todo desde el principio.
Referencias
https://es.wikipedia.org/wiki/Interfaz_de_programación_de_aplicaciones
En www.w3schools.com, en la sección References, encontramos la etiqueta <b> generada en la entrada anterior y se nos indica que sirve para establecer fuentes de tipo negrita, como pudimos observar.
Nota: De acuerdo con la especificación HTML 5, la etiqueta <b> se debe usar como ÚLTIMO recurso cuando ninguna otra etiqueta es más apropiada. La especificación de HTML 5 establece que los encabezados se deben denotar con las etiquetas <h1> a <h6>, el texto enfatizado se debe denotar con la etiqueta <em>, el texto importante se debe denotar con la etiqueta <strong> y el texto marcado / resaltado debe usar la etiqueta <mark>.
En www.quackit.com, en la sección Etiquetas, encontramos que la etiqueta <h2> de la entrada anterior representa un encabezado de nivel 2 en un documento HTML, dentro de los 6 niveles de encabezado que existen en HTML. También nos indica que no existen atributos específicos para esta etiqueta.
Suscribirse a:
Entradas (Atom)