Etiquetas básicas de HTML

Vamos a hacer una revisión de una serie de etiquetas que pueden ser consideradas básicas en HTML. Obviamente, en un único post no vamos a realizar un curso HTML completo, pero sí que podemos echarle un vistazo a aquellas etiquetas que mayor utilidad van a tener a la hora de elaborar una página web. A partir de aquí, podremos hacernos una idea de las posibilidades de HTML y así, en el futuro, tendremos un punto de partida para ir incrementando paulatinamnete nuestro conocimiento sobre este mundo. Como ya sabemos, los primeros pasos son los más difíciles.

 

 

Etiquetas básicas de HTML

Vamos, sin más preámbulos, a ir enumerando aquellas etiquetas que podrían ser consideradas como las más importantes a la hora de crear la estructura de nuestra página web. Por supuesto, al ser un post de tamaño limitado, soy consciente de que siempre nos acabarán faltando algunas de ellas. Pero bueno, por algún grupo hay que empezar. Son las siguientes.

Etiquetas de acción

 

🌐 Tag <a>    : Enlaces de hipertexto a otras páginas web.

 

    <a href="https://pluralsight.com">Aprender en Pluralsight</a>

 

 

🌐 Tag <br>    : Salto de línea en el texto del documento.

 

    <br>

 

 

🌐 Tag <button>    : Botón clickeable.

 

    <button type="button">Boton</button>

 

 

🌐 Tag <form>    : Formularios. Esta etiqueta está formada por una serie de elementos asociados al formulario. Lo más característico del tag es que los valores de los elementos pueden ser enviados a un Servidor para su procesamiento.

 

            <form action="http://localhost:5500/api/post" method="POST">

                <div class="input-group">

                    <div><label for="first-name">First Name</label></div>

                    <div><input type="text" name="first-name" id="first-name"></div>

                </div>

                <div class="input-group">

                    <div><label for="last-name">Last Name</label></div>

                    <div><input type="text" name="last-name" id="first-name"></div>

                </div>

                <div class="input-group">

                    <div><label for="address">Address</label></div>

                    <div><input type="text" name="address" id="address"></div>

                </div>

                <input type="reset" value="Reset"/>

                <input type="submit" value="Order"/>

            </form>

 

 

🌐 Tag <h1>    : Sirve para mostrar un Título en la página.

 

    <h1>Elemento titulo</h1>

 

 

🌐 Tag <img>    : Presenta una imagen en el documento.

    <img src="cuadro.jpg" width="640" height="364" alt="Texto Alternativo"  

         title="Descripcion">

 

🌐 Tag <input>    :  Elemento usado para crear entrada de datos.

 

   <input type="text" id="localizacion" name="localizacion">

 

 

🌐 Tag <ol>    : Lista ordenada

• <li>    Elementos de la lista 

 

    <ol>

        <li>Primera fila</li>

        <li>Segunda fila</li>

        <li>Tercera fila</li>

    </ol>

 

 

🌐 Tag <ul>    : De forma similar al tag anterior, aquí se muestra una lista desordenada de elementos.

•  <li>    Elementos de la lista 

 

            <ul>

                <li><a href="/">Home</a></li>

                <li><a href="tartas.html">Tartas</a></li>

                <li><a href="contacto.html">Contacto</a></li>

            </ul>

 

 

🌐 Tag <p>    : Inclusión de texto en párrafo.

 

    <p class="clase">Cada elemento tiene una funcion</p>

 

 

🌐 Tag <script>    : Esta etiqueta nos permite la inclusión de contenido JavaScript dentro de nuestra página HTML.

 

<script>

    window.addEventListener("DOMContentLoaded", function(e) {

        const orderButtons = document.querySelectorAll("button[data-order]");

    })

</script>

 

🌐 Tag <span>    : Sirve para aplicar estilo a un texto. 

 

<h1>Bienvenido a <span style="color:blue">Casa Tartelli</span> de Melilla</h1>

 

🌐 Tag <table>    : Tabla 

• <thead>
• <th> : Celda de Fila de Cabecera
  
• <tbody>
• <tr> : Fila de Tabla
  
• <td> : Celda de Fila de Tabla
  

 

    <table>

        <thead>

            <tr>

                <th>Autor</th>

                <th>Titulo</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>Craig Shoemaker</td>

                <td>Construccion de Webs con HTML, CSS y JavaScript</td>

            </tr>

            <tr>

                <td>John Papa</td>

                <td>Vue: Como empezar</td>

            </tr>

        </tbody>

    </table>

 

🌐 Tag <textarea>    : Area de texto.

 

    <textarea cols="30" rows="1">

        Area de texto

    </textarea>

 

 

🌐 Tag <select>    : Etiqueta que nos permite seleccionar un único elemento dentro de una lista de opciones disponibles.

 

                   <select name="provincia" id="provincia">

                        <option value="" selected>[ Seleccione una ]</option>

                        <option value="Alicante">Alicante</option>

                        <option value="Castellon">Castellon</option>

                        <option value="Valencia">Valencia</option>

                    </select>

 

 

Etiquetas de estructura

🌐 Tag <div>    : División dentro del contenido, que podrá ser identificable posteriormente. La identificación se podrá realizar mediante el "id" específico o mediante la "class" asociada.

 

    <div id="identificador" class="clase">

        Division dentro del contenido de la pagina

    </div>

 

 

🌐 Tag <header>    : Etiqueta informativa que indica que su contenido formará parte de la cabecera de la página.

 

    <header>

       <p>Cabecera de la pagina</p>

    </header>

 

 

🌐 Tag <main>    : Etiqueta informativa que indica que su contenido formará parte del cuerpo principal de la página HTML.

 

    <main>

       <p>Cuerpo principal de la pagina</p>

    </main>

 

 

🌐 Tag <footer>    : Etiqueta informativa que indica que su contenido formará parte del pie de la página HTML.

 

    <footer>

       <p>Pie de la pagina</p>

    </footer>

 

 

🌐 Tag <section>    : Etiqueta informativa que indica que los elementos de su contenido están lo suficientemente relacionados como para formar parte de una misma sección.

 

 

           <section class="columns-desktop" id="columns1">

              <img src="images/tarta-manzana.png" alt="Tarta Manzana" />

               <p class="desc">Nuestra famosa tarta de manzana</p>

               <button data-order="tarta-manzana">Pedir</button>

           </section>

 

 

🌐 Tag <nav>    : Nos indica que sus elementos formarán parte de una sección que contendrá links de navegación hacia otras páginas HTML.

 

       <nav>

            <ul>

                <li><a href="/">Home</a></li>

                <li><a href="tartas.html">Tartas</a></li>

                <li><a href="contacto.html">Contacto</a></li>

            </ul>

        </nav>

 

 

🌐 Tag <article>    : Nos indica que el contenido de esta sección es totalmente autónomo del resto de la página y que forma una unidad de información por sí mismo.

 

       <article>

            <p class="historia">Historia de la tarta de manzana</p>

       </article>

 

 

🌐 Tag <aside>    : Nos indica que el contenido de esta sección sólo está relacionado tangencialmente con el contenido principal de la página. Por tanto, se trata de contenido de menor relevancia en el contexto general de la web.

 

       <aside>

            <img src="images/logo.png" alt="La Casa de las Tartas">

        </aside>

 

 

Pues nada, en principio con las etiquetas que acabamos de ver ya deberíamos tener los ladrillos básicos para empezar a construir nuestra página web. Aunque HTML es algo mucho más extenso que lo que hemos visto aquí, las etiquetas anteriores nos bastarán para empezar a defendernos. Y, lo más importante, nos servirán para dar los primeros pasos. Una vez que hemos comenzado a rodar, ya tendremos menos dificultades para ir investigando por nuestra cuenta sobre otro tipo de etiquetas. Eso nos permitirá ir incrementando nuestro conocimiento poco a poco, que es la mejor forma de absorber algo nuevo si queremos que permanezca en nuestra mente a largo plazo...

 

Saludos.