Esta es una guía básica y rápida del universo de etiquetas de HTML5, pero que es un buen punto de partida para empezar a diseñar nuestras páginas con diversos elementos.

Etiqueta <a>

Define el inicio y cierre de un texto que contiene un enlace a un hipervínculo, su propiedad principal es HREF que le permite definir la ruta a la que apunta. Especialmente útil para que los menús, botones u otros puedan ir a otra dirección web o a un bloque con determinado identificador

Ejemplos:

<a href="#">Yo soy un anchor sin enlace</a>

Yo soy un anchor sin href

<a href=https://inlearningcode.blogspot.com/>Yo soy un anchor con enlace</a>

Yo soy un anchor con href

Etiqueta <p>

Define el inicio y cierre de un párrafo de texto. Antes de HTML5 tenían una propiedad llamada ALIGN que permitía definir la alineación del parrafo, en HTML5 ya no es soportada esa propiedad, reemplazándose por el uso de CSS

Ejemplos:

<p>Yo soy un párrafo...</p>

Yo soy un párrafo:"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

Etiquetas <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Permiten definir encabezados en las páginas web, donde el tamaño y algunas características como el uso de negrita son sus principales propiedades, los h1 son más grandes que los h2 y así sucesivamente.

Ejemplos:

<h1>Yo soy un h1</h1>

Yo soy un h1

<h3>Yo soy un h3</h3>

Yo soy un h3

<h5>Yo soy un h5</h5>

Yo soy un h5

Etiqueta <span>

Define el inicio y cierre de un texto que se puede encontrar dentro de otro texto, permite hacer diversas cosas como modificar características de parte de un texto de un párrafo

Ejemplos:

<p>Texto <span style="color:blue;">span</span> común y corriente</p>

Texto span común y corriente

Etiqueta <pre>

Define el inicio y cierre de un texto que mantiene saltos de línea y espacios, en las otras etiquetas de texto, solo se puede dar un salto de línea con la etiqueta </br>

Ejemplos:

<pre>Yo soy un
texto que mantiene
los    saltos de línea
y espacios</pre>

Yo soy un 
texto que mantiene
los    saltos de línea 
       y espacios

Etiqueta <code>

Define el inicio y cierre de un texto que contiene código de computadora, no es una etiqueta obsoleta, pero se puede obtener efectos visualmente más atractivos utilizando CSS

Ejemplos:

<code>Yo soy un pedazo de código</code>

Yo soy un pedazo de código

Etiqueta <div>

Define el inicio y cierre de una sección del documento HTML, extremadamente usado como contenedor de otras etiquetas y de mucho apoyo para diseño de páginas con Responsive Desing una vez que se emplea propiedades de CSS sobre estos contenedores

Ejemplos:

<div style="width:200px; color: green; background-color:#dedede;">
   Yo soy un contenedor DIV
</div>

Yo soy un contenedor DIV

Etiqueta <iframe>

Define el inicio y cierre de un bloque que contiene un elemento HTML como vídeo embebido, otra página web, plugins de redes sociales, etc. Mediante el uso de su propiedad SRC

Ejemplos:

<iframe src="https://inlearningcode.blogspot.com/"></iframe>

Etiqueta <img>

Permite insertar una imagen en el documento HTML, mediante la propiedad SRC

Ejemplos:

<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"/>

Etiqueta <map>

Permite definir áreas de una imagen que al recibir un click realizarán acciones como cambiar la imágen

Ejemplos:

<img src="https://www.blogger.com/img/blogger-logotype-color-black-1x.png"
 width="112" height="27"
usemap="#mapa">
<map name="mapa">
  <area shape="rect" coords="0,0,60,27" href="#zona1">
  <area shape="rect" coords="60,0,112,27" href="#zon2">
</map>

Nota: observa la parte baja del navegador y dependiendo donde coloquemos el puntero sobre la imagen aparece una dirección u otra

Etiquetas <table>, <thead>, <tbody>, <tfoot>, <tr>, <th>, <td>

Permite crear una tabla, pero debe ir acompañada de sus diversos elementos, tendresmos un encabezado de tabla, un cuerpo de la tabla y un pie de tabla: thead, tbody y tfoot, estas secciones de la tabla contienen filas y columnas, en HTML se declara primero las filas que son los tr, luego las columnas que los componen que pueden ser td o th

Ejemplos:

<table>
   <thead>
      <tr>
         <th>Columna1</th>
         <th>Columna2</th>
         <th>Columna3</th>
         <th>Columna4</th>
      </tr>
   </thead>
   <tbody>
         <td>Columna1</td>
         <td>Columna2</td>
         <td>Columna3</td>
         <td>Columna4</td>
   </tbody>
   <tfoot>
         <td>Columna1</td>
         <td>Columna2</td>
         <td>Columna3</td>
         <td>Columna4</td>
   </tfoot>
</table>

Columna1	Columna2	Columna3	Columna4
Columna1	Columna2	Columna3	Columna4
Columna1	Columna2	Columna3	Columna4

Etiquetas <form>, <fieldset>, <legend>, <input>, <button>, <select>, <option>, <textarea>, <label>

Son las etiqeutas para generar formularios que envían información mediante el método POST o GET, tenemos la etiqueta del formulario en sí : FORM, luego sus campos o FIELDSET y dentro de ellos colocamos los elementos como cajas de texto o botones.

Ejemplos:

<form>
   <fieldset>
      <legend>Leyenda</legend><br/>
      <label>Campo texto<label><br/>
      <input type="text" value="caja de texto"/><br/><br/>
      <label>Campo texto<label><br/>
      <input type="text" placeholder="escribe texto aquí"/><br/><br/>
      <button>Boton</button>
   </fieldset>
</form>

Etiquetas <canvas>, <svg>, <circle>, <rect>, <polygon>, <lineargradient>, <ellipse>, <text>

Permiten realizar gráficos en el documento HTML, sin recurrir a imágenes externas. HTML5 provee de dos formas de realizar estos gráficos, la primera es mediante la etiqueta CANVAS que es un contenedor rectangular y donde se dibujan las formas aplicando código en JavaScript, y la segunda mediante SVG que actúa como un contenedor rectangular dentro del cual se colocan las diversas formas que uno desea

Ejemplos:

Usando canvas

<canvas id="myCanvas" 
width="200" height="100" style="border:1px solid black;">
</canvas>

Y su código JavaScript

<script>
   var c = document.getElementById("myCanvas");
   var ctx = c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95, 50, 40, 0, 2 * Math.PI);
   ctx.stroke();
</script>

Usando SVG

<svg width="200" height="100"
style="border:1px solid black;">
     <circle cx="50" cy="50" r="40" 
        stroke="green" stroke-width="4" 
        fill="yellow" />
</svg>

Etiquetas <ul>, <li>, <ol>, <dl>, <dt>, <dd>

Estas etiquetas permiten crear listados ordenados, su potencial se ve incrementado al construir menús con CSS y la etiqueta <a>. Mientras UL hace listado sin orden, OL realiza listados ordenados.

Ejemplos:

<ul>
    <li>Hola</li>
    <li>Chau</li>
</ul>

Hola
Chau

<ol>
    <li>Hola</li>
    <li>Chau</li>
</ol>

Hola
Chau

Etiquetas <header>, <footer>, <main>, <section>, <article>

Define contenedores similares al DIV con la diferencia que estos tienen ya usos estandarizado en el diseño HTML en general. Por ejemplo, el HEADER se usa para colocar el logo, y menú, el FOOTER para el pie de página donde se pone mapa del sitio u otros.

Etiqueta <script>

Define el inicio y cierre de un bloque de código JavaScript que puede ejecutar diversas operaciones.

Principales Etiquetas de bloque:

Principales Etiquetas de línea:

In learning code

Páginas

jueves, 25 de abril de 2019

Etiquetas de HTML5