Introducción al lenguaje HTML

Óscar Bustos

Frontend Developer & UI/UX Designer

@elchiconube

oscar.bustos@u-tad.com

649131791

 

Introducción

  • Es un lenguaje de marcado para la creación de páginas web
  • No necesita ser compilado
  • Mantenido por la W3C
  • Su principal característica es que es estructurado.
  • Su quinta y última versión se lanzó en 2014

HTML5

  • Surgen las etiquetas semánticas
  • Los navegadores y los buscadores interpretan mejor
  • Mayor legibilidad del código
  • Componentes multimedia en navegadores

Sintaxis

<etiqueta>Lorem ipsum</etiqueta>

Sintaxis

<titulo>Lorem <negrita>ipsum</negrita> dolor</titulo>

Atributos

<etiqueta atributo="valor">Lorem ipsum</etiqueta>
<etiqueta atributo1="valor1 valor2" atributo2="valor3">Lorem ipsum</etiqueta>

Normas

La calidad va ligada a la profesionalidad y es nuestra responsabilidad trasladar nuestro buen hacer al código

Normas

  1. Uso exclusivo de minúsculas
  2. Todas las etiquetas deben de cerrarse siempre*
  3. Los valores de los atributos siempre irán entre comillas dobles
  4. El código anidado siempre debe de estar sangrado correctamente
  5. Todo el contenido debe de estar englobado siempre por al menos una etiqueta

Documento HTML

Vamos a crear nuestro primer documento HTML!!

Documento HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>   
  </body>
</html>

Comentarios HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- Esto es un comentario HTML -->
  </body>
</html>

Etiquetas de texto

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <h1>…</h1>
   …
   <h4>…</h4>
  </body>
</html>

Las más importantes en cuanto a posicionamiento

Menor importancia si incrementamos el número de la etiqueta

Etiquetas de texto

La más utilizada a la hora de introducir contenido

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <p>…</p>
  </body>
</html>

Etiquetas de texto

Enfatizar contenido

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <em>…</em>
  </body>
</html>

Etiquetas de texto

Realza la importancia del texto. Esta etiqueta marca mayor importancia la anterior

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <strong>…</strong>
  </body>
</html>

Etiquetas de texto

Habitual en textos periodísticos

 

Incluye un atributo que nos ayudará a indicar la dirección de la página web original donde extrajimos la cita, en el caso de que exista.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <blockquote cite="url">…</blockquote>
  </body>
</html>

Etiquetas de texto

Esta etiqueta sirve para etiquetar una cita o referencia a otras fuentes. En ocasiones es complicado de diferenciar con <blockquote>.

 

Para ello podemos ayudarnos utilizando la siguiente regla. La etiqueta <cite> englobará al autor, mientras que <blockquote> contendrá lo que dijo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <cite>…</cite>
  </body>
</html>

Etiquetas de texto

Esta etiqueta nos ayudar a señalar la información de contacto en una página. Podría ser usado, por ejemplo, para dar información acerca de la empresa, el autor de un artículo específico o el autor de la página web. El contenido pues, puede incluir nombres, nombres de empresa, números de teléfono, códigos postales, direcciones de e-m ail, etc. 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <address>…</address>
  </body>
</html>

Etiquetas de texto

En esta etiqueta podremos añadir fechas y horas. Por ejemplo, la fecha en la que fue publicada una nota de prensa.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <time>…</time>
  </body>
</html>

Etiquetas de texto

Esta etiqueta nos servirá para etiquetar abreviaturas en el texto. En el atributo incluiremos el significado de esa abreviatura.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <abbr title="texto">…</abbr>
  </body>
</html>

Etiquetas de texto

Esta etiqueta es muy similar a la anterior, sin embargo, en este caso servirá para etiquetar siglas o acrónimos. En el atributo escribiremos su significado.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <acronym title="texto">…</acronym>
  </body>
</html>

Etiquetas de texto

Esta etiqueta la utilizaremos para etiquetar palabras que necesiten ser definidas. Como puedes imaginar dicha definición irá en el atributo.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <dfn title="texto">…</dfn>
  </body>
</html>

Etiquetas de texto

Esta etiqueta nos ayuda a marcar subíndices y superíndices.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <sub>…</sub> 
   …
   <sup>…</sup>
  </body>
</html>

Etiquetas de texto

Mientras que la etiqueta <del> enmarca texto que hemos eliminado, <ins> indica lo contrario. Esto sirve para señalar correcciones en el propio contenido.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <del>…</del>
   …
   <ins>…</ins>
  </body>
</html>

Etiquetas de texto

Esta etiqueta nos ayuda a marcar bloques de código que no queremos que interprete el navegador. Si estuviéramos escribiendo un artículo sobre el uso de una etiqueta HTML podríamos marcar ejemplos de código con estas etiquetas sin que sean interpretadas como código.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <code>…</code>
  </body>
</html>

Etiquetas de texto

En esta etiqueta podremos incluir texto que carece de importancia y que solo sirve de apoyo para comprender el contenido. Un ejemplo típico sería para añadir una nota de derechos de autoría

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <small>…</small>
  </body>
</html>

Etiquetas de texto

En HTML existen muchas etiquetas sin embargo a veces es complicado encontrar la que realmente se ajusta a nuestro contenido. Por ello la W3C nos proporciona diferentes etiquetas comodín. Esta es una de ellas.

 

¡Pero ojo! La usaremos de forma eventual, si utilizamos esta etiqueta muy a menudo seguramente no estaremos haciéndolo lo mejor posible.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <span>…</span>
  </body>
</html>

Etiquetas para listados

Listado de elementos ordenados

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <ol>
    <li>…</li>
   </ol>
  </body>
</html>

Etiquetas para listados

Listado de elementos desordenados

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
   <ul>
    <li>…</li>
   </ul>
  </body>
</html>

Etiquetas para listados

Listado de definición

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <dl>
     <dt>…</dt>
     <dd>…</dd>
    </dl>
  </body>
</html>

Etiqueta para enlazar

URL Absoluta

 

Dirección completa para acceder a un contenido

http://u-tad.com

Etiqueta para enlazar

URL Relativa

 

Sirven para navegar por el mismo sitio. Podemos eliminar el servidor y el protocolo

img/logo.png

 

Etiqueta para enlazar

.
├── about
│   ├── about.html
├── img
│   ├── cc_logo.png
├── works
│   ├── works.html
└── index.html

Etiqueta para enlazar

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <a href="url" title="texto" target="_blank">texto enlazado</a>
    <a href="mailto:oscar.bustos@u-tad.com" title="texto" >Correo electrónico</a>
  </body>
</html>

Imágenes

  • JPG: Sin transparencias. La mejor calidad Vs compresión
  • PNG: Mejor compresión que JPG y ofrece transparencias
  • GIF: Límite de 256 colores, problemas de carga, gran peso
  • SVG: Grandes posibilidades, poco peso, permite animaciones​

Imágenes

Etiquetas para imágenes

<figure>
  <img src="url" alt="Descripción" />
  <figcaption>Descripción</figcaption>
</figure>

<picture>
 <source srcset="logo-wide.png" media="(min-width: 600px)"/>
 <img src="logo.png" alt="Logo"/>
</picture>

Etiquetas para objetos

<iframe src="url" width="250" height="250" scrolling="no" />

Etiquetas para objetos

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4" />
  <source src="video.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
<audio src="musica.oga" controls>
  <a href="musica.oga">Descargar canción</a>
</audio>

Etiquetas para tablas

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <table border="1">  
      <tr>
        <th>Título</th>
      </tr>
      <tr>
        <td>Celda</td>
      </tr>
    </table>
  </body>
</html>

Atributos para tablas

<table border="1">
<tr>
  <td colspan="2">A</td>
</tr>
<tr>
  <td>B</td>
  <td>C</td>
</tr>
</table>

<table border="1">
<tr>
  <td>A</td>
  <td rowspan="2">B</td>
</tr>
<tr>
  <td>C</td>
</tr>
</table>

Etiquetas para formularios

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <form method="post" action"url">
     …
    </form>
  </body>
</html>
  • Constituyen una parte esencial de la web ya que es donde el usuario puede interactuar
  • method: Especifica tipo de petición HTTP
  • action: URL donde se procesan los datos

Etiquetas para formularios

<label for="usuario">Nombre</label>
<input type="text" id="usuario" />

<label>
  Nombre
  <input type="text" />
</label>

Etiquetas para formularios

<input type="text" name="texto" />
  • type: Podemos utilizar text, password, checkbox, radio, submit, reset, file, button, etc.
  • name: Identificador del campo

Etiquetas para formularios

<p>¿Qué animal de compañía prefieres?</p>
<form>
    <label>
      Gatos
      <input name="mascota" type="radio" />
    </label>
    <label>
      Perros
      <input name="mascota" type="radio" />
    </label>
    <input type="submit" value="Enviar"/>
</form>

Etiquetas para formularios

<textarea>…</textarea>

Etiquetas para formularios

<select>
  <option>…</option>
  …
  <option>…</option>
</select>

Etiquetas para formularios

<fieldset>…</fieldset>
<legend>…</legend>

Validación de formularios

<form>
    <label>
      Usuario
      <input type="text" required />
    </label>
    <label>
      Contraseña  
      <input type="password" required />
    </label>
  <input type="submit" value="Enviar" />
</form>

Etiquetas layout

<header>…</header>

Engloba todo lo que pueda considerarse una cabecera en diferentes niveles de la web

Etiquetas layout

<header>
  <h1>Nombre de la página web</h1>
  <p>Información complementaria</p>
</header>

<article>
  <header>
    <h1>Titular principal</h1>
    <p>Información adicional</p>
  </header>
  <p>Lorem Ipsum dolor set amet....</p>
</article>

Etiquetas layout

<footer>…</footer>
<footer>
  <ul>
     <li>Copyright</li>
     <li>Contacto</li>
  </ul>
</footer>

Etiquetas layout

<main>…</main>
<body>
  <header>…</header>
  <main>…</main>
  <footer>…</footer>
</body>

Etiquetas layout

<nav>…</nav>
<nav>
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="/about/">About</a></li>
    <li><a href="/blog/">Blog</a></li>
  </ul>
</nav>

Etiquetas layout

<section>…</section>
<section>
  <h1>Titular de nivel 1</h1>
  <section>
    <h2>Titular de nivel 2</h2>
    <section>
      <h3>Titular de nivel 3</h3>
    </section>
  </section>
</section>

Etiquetas layout

<article>…</article>
<article>
  <h1>Titular</h1>
  <p>…</p>
</article>

Etiquetas layout

<aside>…</aside>
<aside>
  <h2>Blogs amigos</h2>
  <ul>
    <li><a href="#">Blog amigo 1</a></li>
    <li><a href="#">Blog amigo 2</a></li>
    <li><a href="#">Blog amigo 3</a></li>
  </ul>
</aside>

Etiquetas layout

<div>…</div>

Validador de código HTML

Microdatos

<article itemscope itemtype="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</article>

Microdatos

<article itemscope itemtype ="http://schema.org/Movie">
  <h1 itemprop="name">Avatar</h1>
  <div itemprop="director" itemscope itemtype="http://schema.org/Person">
  Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954</span>)
  </div>
  <span itemprop="genre">Science fiction</span>
  <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</article>

Microdatos

<meta property="og:url" content="url" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Lorem ipsum" />
<meta property="og:description" content="Lorem ipsum dolor sit amet" />
<meta property="og:image" content="url" />

Testeo al compartir URL

Documentación

Q&A

oscar.bustos@live.u-tad.com

Introducción HTML

By Oscar Bustos

Made with Slides.com

Introducción HTML

Introducción al Lenguaje HTML

  • 247

More from Oscar Bustos