Taller de HTML

3 - Profundización en etiquetas

http://sdanielf.github.io/workshops/

Sobre tamaños

  • width: ancho
  • height: alto
<img src="imagen.png" width="800px" height="600px"></img>
<table>
  <tr>
    <td width="150px">1</td>
    <td>Elemento 1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>Elemento 2</td>
  </tr>
</table>

Sobre alineaciones

<p align="left">Izquierdo</p>
<p align="center">Centrado</p>
<p align="right">Derecho</p>
<center>Centrado</center>

También se puede centrar con:

Alineaciones en tablas

<table width="100%">
  <caption>Índice</caption>
  <tr>
    <td>1.0 Introducción</td>
    <td align="right">pág. 3</td>
  </tr>
  <tr>
    <td>1.1 Desarrollo</td>
    <td align="right">pág. 25</td>
  </tr>
  <tr>
    <td>5.0 Conclusiones</td>
    <td align="right">pág. 530</td>
  </tr>
</table>

Consejos para imágenes

  • Poner la imagen dentro de una etiqueta <a> para que al hacerle click funcione como link a otro lado.
  • El formato estandarizado es el GIF. La mayoría de los navegadores soportan PNG y JPEG.
  • Para textos académicos existe la etiqueta figure:
Texto normal arriba
<figure>
  <img src="aceituna.png" width="200" height="200">
  <figcaption>Figura de una aceituna</figcaption>
</figure>
Texto normal abajo

Audio y video

  • Incluir por lo menos un formato abierto (ogg, ogv).
<h3>Video:</h3>
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  No se pueden ver videos en este navegador
</video>
<h3>Audio<h3>
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  No se puede reproducir audio en este navegador.
</audio>

Código y texto prefabricado

<h3>Hola Mundo en Java</h3>
<pre><code>
public class HolaMundo {
    public static void main(String [] args) {
        System.out.println("Hola Mundo");
    }
}
</code></pre>

Sobre identidades

Dado un documento llamado "a.html", se denomina a la url relativa "a.html#b" o simplemente "#b" al documento a.html en la posición de la etiqueta que contenga el atributo id="b".

Puede usarse para crear hipervínculos a partes del mismo documento.

Made with Slides.com