Formularios HTML (1)

0 comentarios
El código para generar, por ejemplo un formulario de comentarios, es el siguiente:

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="user_name" />
  </li>
  <li>
    <label for="mail">Correo electrónico:</label>
    <input type="email" id="mail" name="user_email" />
  </li>
  <li>
    <label for="msg">Mensaje:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
  </ul>
</form>
<button>Enviar</button>

Lo cual tendría el siguiente aspecto:


En HTML5 no obstante tenemos un método mas practico en el que no es necesario recurrir a las etiquetas de lista para generar orden en los elementos de un formulario HTML.

<form>
    <fieldset>
        <legend>Datos del formulario</legend>
        <label for="namefor">Nombre</label>
            <input type="text" id="namefor"><br>
        <label for="emailfor">Email</label>
            <input type="email" id="emailfor"><br>
        <label for="comentariofor">Comentario</label>
            <textarea name="comentariofor"></textarea>
        <button type="sumit">Enviar</button>
    </fieldset>
</form>

Código que debería pintarlo así el navegador:

Datos del formulario


La etiqueta <legend> crea un marco con titulo para toda el área del formulario. Para cada etiqueta <label> corresponde un <imput>, indicando esta correspondencia con atributos del mismo nombre: <label for="namefor"> y <imput id="namefor">. Este contenido lo agrupamos con la etiqueta <fieldset>.

Con esto tenemos un buen comienzo para entender los formularios, que es una de las funcionalidades mas potentes de HTML5.

Tablas en HTML (1)

0 comentarios

 La estructura básicas para generar una tabla con HTML es la siguiente:

<table>

    <thead>

        <tr>

            <th>dato1</th>

            <th>dato2</th>

            <th>dato3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>dato1</td>

            <td>dato2</td>

            <td>dato3</td>

        </tr>

        <tr>

            <td>dato4</td>

            <td>dato5</td>

            <td>dato6</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>dato7</td>

            <td>dato8</td>

            <td>dato9</td>

        </tr>

    </tfoot>

    <caption>Aquí debería ir una descripción de los datos de esta tabla</caption>

<table/>

El resultado de estas lineas de HTML es:

dato1 dato2 dato3
dato1 dato2 dato3
dato4 dato5 dato6
dato7 dato8 dato9
Aquí debería ir una descripción de los datos de esta tabla

Aplicando un poco de estilo en la etiqueta table podemos agregar los bordes.
<table border="1">...
Dejando nuestra tabla con este aspecto básico:

dato1 dato2 dato3
dato1 dato2 dato3
dato4 dato5 dato6
dato7 dato8 dato9
Aquí debería ir una descripción de los datos de esta tabla

El resultado es básico y debemos hacer mejoras a través de CSS, por ejemplo:

Encabezado 1 Encabezado 2 Encabezado 3
dato1 dato2 dato3 con más contenido
dato4 con más contenido  dato5 con más contenido dato6
dato7 dato8 dato9 con más contenido
Aquí debería ir una descripción de los datos de esta tabla

Todas las ETIQUETAS en HTML

0 comentarios
  • <!--...-->
  • <!DOCTYPE>
  • <a>
  • <abbr>
  • <address>
  • <area>
  • <article>
  • <aside>
  • <audio>
  • <b>
  • <base>
  • <bdi>
  • <bdo>
  • <blockquote>
  • <body>
  • <br>
  • <button>
  • <canvas>
  • <caption>
  • <cite>
  • <code>
  • <col>
  • <colgroup>
  • <data>
  • <datalist>
  • <dd>
  • <del>
  • <details>
  • <dfn>
  • <dialog>
  • <div>
  • <dl>
  • <dt>
  • <em>
  • <embed>
  • <fieldset>
  • <figcaption>
  • <figure>
  • <footer>
  • <form>
  • <h1>
  • <h2>
  • <h3>
  • <h4>
  • <h5>
  • <h6>
  • <head>
  • <header>
  • <hgroup>
  • <hr>
  • <html>
  • <i>
  • <iframe>
  • <img>
  • <input>
  • <ins>
  • <kbd>
  • <label>
  • <legend>
  • <li>
  • <link>
  • <main>
  • <map>
  • <mark>
  • <menu>
  • <meta>
  • <meter>
  • <nav>
  • <noscript>
  • <object>
  • <ol>
  • <optgroup>
  • <option>
  • <output>
  • <p>
  • <param>
  • <picture>
  • <pre>
  • <progress>
  • <q>
  • <rb>
  • <rp>
  • <rt>
  • <rtc>
  • <ruby>
  • <s>
  • <samp>
  • <script>
  • <section>
  • <select>
  • <slot>
  • <small>
  • <source>
  • <span>
  • <strong>
  • <style>
  • <sub>
  • <summary>
  • <sup>
  • <table>
  • <tbody>
  • <td>
  • <template>
  • <textarea>
  • <tfoot>
  • <th>
  • <thead>
  • <time>
  • <title>
  • <tr>
  • <track>
  • <u>
  • <ul>
  • <var>
  • <video>
  • <wbr>

vía Quackit (aquí podrás encontrar una definición de cada una)

Otro sitio que contiene una excelente compilación de definiciones (en español) del lenguaje html es mclibre.org (ademas de CSS y JavaScript.)

Acentos y caracteres especiales HTML

0 comentarios
En el idioma español existen caracteres que no se usan en idiomas anglosajones. La letra ñ y las vocales acentuadas mayúsculas y minúsculas, son caracteres únicos del idioma castellano y por ello se les conocen como caracteres especiales HTML.

Aunque hoy esto está resuelto con los juegos de caracteres, la etiqueta meta charset que va en el head en HTML, conviene conocer los códigos que nos permiten insertar estas entidades especiales en HTML.

La estructura de estos códigos puede redactarse de dos maneras: indicando el nombre de la entidad dentro del código o indicando el valor numérico de la entidad.

Etiquetas H o encabezados en HTML

0 comentarios
Para mostrar títulos en el contenido de nuestro sitio web o blog HTML nos provee seis etiquetas para hacerlo. Estas son las etiquetas h1, h2, h3, h4, h5, y h6.

La letra H de la etiqueta abrevia el término heading o encabezado. Cada uno de estas etiquetas eta seguida de un número que representa su nivel de jerarquía, el cual va decreciendo a partir del h1.

<h1>Este es un título de nivel 1<h1>
<h2> Este es un título de nivel 2<h2>
<h3> Este es un título de nivel 3<h3>
<h4> Este es un título de nivel 4<h4>
<h5> Este es un título de nivel 5<h5>
<h6> Este es un título de nivel 6<h6>

Lo cual se verá así:

Formato de texto en HTML

0 comentarios
En la mayoría de sitios web, el contenido principal consiste en texto. Los elementos que enriqueces un sitio, como imágenes e iconos, suelen girar en torno a este contenido. Por ello es fundamental para nuestro sitio web o blog saber cómo presentar el texto adecuadamente en HTML.

Como ya hemos visto, la etiqueta <p> nos permite diferenciar párrafos. No obstante para presentar algunos formatos de texto, como texto en negrita o en cursiva, es necesario usar otras etiquetas.

Las etiquetas que permiten dar forma al texto en HTML se dividen en dos. Etiquetas de estilo físico y de estilo lógico.

Etiquetas básicas HTML

0 comentarios
Etiquetas.
El lenguaje HTML se construye con etiquetas o tags. Una etiqueta html es un comando descriptivo usado para indicarle a los navegadores una orden. La estructura básica de una etiqueta es la siguiente:

<nombre_etiqueta> Contenido</nombre_etiqueta>

Algunas etiquetas no tienen etiqueta de cierre. En este caso la estructura se simplifica.