4. Conceptos de HTML

4.1. Primeros pasos

  • Etiquetas HTML relevantes
    <!DOCTYPE html> <html lang="es"> (la propiedad "lang" puede incluirse en otras etiquetas para indicar el idioma usado)
    • Dentro de la etiqueta <head>
      • <meta charset="utf-8">: codificación.
      • <meta http-equiv="X-UA-Compatible" content="IE=edge">
      • <meta name="viewport" content="width=device-width, initial-scale=1.0">: indica que el ancho de la ventana será el del dispositivo.
      • <meta name="description" content="Hola, me llamo Ricardo y ésta es mi colección de teléfonos móviles recopilada desde 2014.">
      • <meta name="keywords" content="coleccionismo, huesca, telefonía, mobile collection, mobile collectors, colección, móviles, nokia, motorola,">: palabras clave.
      • <meta name="author" content="RicardoSGZ">
      • <meta name="theme-color" content="#90caf9"/>: da color a la barra de direcciones en Android.
      • <meta http-equiv="Refresh" content="900">: Refresca la página.
      • Etiquetas Open Graph (útil para compartir páginas en Twitter o Facebook, busca las guías de ambos):
        • <meta property="og:title" content="European Travel Destinations">
        • <meta property="og:description" content="Offering tour packages for individuals or groups.">
        • <meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
          • Usa una URL completa
        • <meta property="og:url" content="http://euro-travel-example.com/index.htm">
        • <meta name="twitter:card" content="summary_large_image">
        • <meta name="twitter:title" content="Agenda Huesca">
        • <meta name="twitter:description" content="Descubre los próximos eventos que se celebrarán en Huesca: conciertos, exposiciones, deportes, y mucho más">
        • <meta name="twitter:image" content="https://agendahuesca.rs1.es/logo_og.png">
          • Usa una URL completa
        • <meta name="twitter:site" content="@HuescaAgenda">
        • <meta name="twitter:url" content="https://agendahuesca.rs1.es">
      • <link rel="stylesheet" href="/resources/css/style.css"/>
      • <link rel="icon" href="favicon.ico"/>: icono.
      • <link rel="apple-touch-icon" href="icono.png">: ícono para dispositivos móviles (como el ícono para un favorito que se añade al escritorio). Suele tener un tamaño de 57x57 píxeles.
      • <title>Titulo página</title>
      • <link rel="alternate" hreflang="en" href="enlace"/>: para indicar que es una versión de la página en otro idioma
    • <script src="ruta/archivojavascript.js"></script>: justo antes de </body> o en head si no hay problemas en el orden de ejecución.
    • <h1>,<h2>,...<h6>: títulos. Es importante añadir al menos un <h1> en cada página como título principal.
    • <p>: párrafos
    • <img src=”ruta/imagen” alt="titulo" title=""/>: es importante añadir la propiedad alt que describe la imagen. La propiedad title permite que aparezca un texto al pasar el cursor por encima de la imagen (también sirve para otros elementos).
    • <a href=”http://ejemplo.com”>Titulo del enlace</a>
      • Cuando se usa una etiqueta <a> para abrir una imagen, es importante que dicha imagen tenga la propiedad Content-Type: image/jpeg o image/png, en otro caso la imagen se descargará y no se abrirá en el navegador.
    • <noscript>Contenido para quienes tienen deshabilitado los scripts</noscript>
    • Formularios:
      • Más información en la sección de HTML 5.
        <form method=”post” id=”formulario” action=”upload” enctype=”multipart/form-data”> <input type=”text” name=”texto1”/> <input type=”submit” value=”Entrar”/> </form>
        <form> <select> <option value="opc1">Opc1</option> <option value="opc2">Opc2</option> <optgroup label="Grupo 2"> <option value="opc3">Opc3</option> </optgroup> </select> <button type="submit">Entrar</button> </form>
    • <code>...</code>: inserta código de una línea, para añadir “<” se escribe < y para añadir “>” >
    • <pre>...</pre>: Inserta código de varias líneas.
    • <iframe src=””>El navegador no soporta <code><iframe></code></iframe>
    • Tablas:
      <table>     <thead>         <tr>             <th>Cabecera 1</th> (los <th> también se pueden usar para destacar una celda)             <th>Cabecera 2</th>         </tr>     </thead>     <tbody>         <tr>             <td>Valor1</td>             <td>Valor2</td>         </tr>     </tbody>     <tfoot>         <tr>             <td></td>             <td></td>         </tr>     </tfoot> </table>
    • Listas sin orden:
      <ul>     <li>...</li>     <li>...</li> </ul>
    • Listas ordenadas:
      <ol>     <li>...</li>     <li>...</li> </ol>
    • Definiciones
      <dl>     <dt>...</dt>     <dd>...</dd> </dl>
    • <var>...</var> (Inserta texto que se interpreta como una variable)
    • <kbd>...</kbd> (Inserta texto que se interpreta como una tecla, p.ej. Ctrl, Alt,…)
    • <samp>...</samp> (Inserta salidas de un programa o comando)
    • <hr> (Implica un cambio de contenido, inserta una línea horizontal)
    • <map>: (Permite crear enlaces en partes de una imagen)

4.2. HTML 5

  • Etiquetas y propiedades nuevas
    • <article>
    • <aside> Define un contenido apartado del contenido principal de la página
    • <audio> Define contenido de audio, se puede usar con el atributo “controls” y se necesita la etiqueta <source>
      <audio controls>      <source src="horse.ogg" type="audio/ogg">      <source src="horse.mp3" type="audio/mpeg">      Your browser does not support the audio element.  </audio>
    • <bdi> Aísla una parte del texto que puede tener una dirección distinta al resto (tipografía árabe por ejemplo)
    • <canvas> Muestra gráficos hechos con Javascript
    • <details> Define un texto que el usuario puede mostrar u ocultar. Dentro de la etiqueta se usa <summary> para mostrar el título del texto que siempre se mostrará
    • <dialog> Muestra una ventana de diálogo integrada en la página, se usa con el atributo “open”
    • <figure> Se usa para contenido multimedia con pie de foto. El pie de foto se añade con la etiqueta <figcaption>
    • <footer> Define un pie de página
    • <header> Define un encabezamiento
    • <main> Define al contenido principal de la página
    • <mark> Muestra el texto marcado con subrayador
    • <menu> Muestra opciones adicionales en el menú contextual al pretar con el botón derecho. Sólo en Firefox
      <p contextmenu=”mimenu”>Preta aquí con el botón derecho</p> <menu type=”context” id=”mimenu”>     <menuitem label=”Actualizar” onclick=”window.location.reload();” icon=”refresh.png”></menuitem> </menu>
    • <meter> Muestra una barra de progreso. Se usa con los atributos “value”, “min”, “max”
    • <nav> Define una barra de navegación
    • <output> Se usa dentro de un formulario, para que muestre un cálculo
    • Formularios (propiedades nuevas y ya existentes):
      • <input type="text" placeholder=”Introduzca texto”/>
      • <input type="password"/>
      • <input type="search"/>
      • <input type="url"/>
      • <input type="email"/>
      • <input type="tel"/>
      • <input type="file" name="fileUpload"/>
      • <input type="date" disabled/>
      • <input type="time" required/>
      • <input type="color"/>
      • <input type="radio"/>
      • <input type="range" min="50" max="150"/>
      • autocomplete: propiedad de los formularios para indicar si se puede autocompletar los campos (“on” off”)
      • <datalist> etiqueta para los formularios que da opciones para completar un campo (se usa con la propiedad “list” y el id del “datalist” en el “input”)
 <input id="car" type="text" list="colors" />
<datalist id="colors">
<option value="Red">
<option value="Green">
<option value="Yellow">
</datalist>
 <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100+
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
  • <picture> Permite añadir varias versiones con diferentes resoluciones de una imagen para que se adapte a cada dispositivo, se usa con la etiqueta <source media=”” srcset=””> y la <img>:
<picture>
<source media="(min-width: 2000px)" srcset="img1_original.jpg"/>
<source media="(min-width: 1000px)" srcset="img1_2000.jpg"/>
<source media="(min-width: 500px)" srcset="img1_1000.jpg"/>
<img src="img1_500.jpg" alt="luna"/>
</picture>
  • <progress> Similar a <meter>, se usa con los atributos “value” y “max
  • <section> Define una sección en la página
  • <svg> Muestra gráficos de vectores
  • <time> Permite introducir horarios para que el navegador sepa tratarlos, se puede usar con el atributo “datetime
 <p>Abrimos el <time datetime=”2018-01-04 10:00”>4 a las 10</time><p>
  • <video> Define contenido de vídeo. La etiqueta <track> permite añadir subtítulos.
 <video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

<video src='video/tina.mp4'>
<track src="video/subtitles.vtt" kind="subtitles" srclang="en" />
</video>
  • <wbr> Permite indicar al navegador cuando se puede introducir un cambio de línea en un texto
  • async: Propiedad que se incluye en las etiquetas script que hacen referencia a código externo (con propiedad src) que permite que el script se ejecute mientras se carga la página, de forma asíncrona.
<script src="demo_async.js" async></script>

4.3. GET / POST

  • Cuando se envían datos al servidor, existen dos métodos de hacerlo:
    • GET: es más simple y rápido, ideal para cantidades muy pequeñas de datos que no tengan carácter privado (búsquedas de palabras) ya que la información aparece en la URL (después de un signo de interrogación "?").
    • POST: es el método adecuado para grandes cantidades de datos (p.e. archivos) y para pasar datos de carácter privado como las contraseñas.