Updated : Ene 29, 2020 in Desarrollo web

Curso básico de HTML #3 Lista, Tablas y Formularios

Hoy aprenderemos a estructurar listas de datos , tablas y formularios en html y no morir en el proceso.

Lista

Una lista es como bien indica su nombre una forma de listar nuestro contenido de diferente maneras. Hay dos tipos de formas de lista en html una se llama lista ordenada y la otra es justamente los opuesto y se le conoce como Lista desordenada.

Lista Ordenada

La lista ordenada enumerada del elemento 1 a x dependido de la cantidad ingresada y lo mostrara en pantalla.

Ejemplo

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3
  4. ETC

Sintaxis

<lista ordenada>
    <elemento 1>Contenido</elemento 1>
    <elemento 2>Contenido 2</elemento 2>
</lista ordenada>

Expresión dentro de un documento HTML

<ol>
   <li>Elemento 1</li>
   <li>Elemento 2 </li>
</ol>

Lista desordenada

La lista desordenada no enumera los elemento solo lo resaltara con un ítem sin importar el orden de los elementos

Ejemplo

  • Elemento 1
  • Elemento 2
  • Elemento 3
  • ETC

Sintaxis

<lista desordenada>
    <elemento 1>Contenido</elemento 1>
    <elemento 2>Contenido 2</elemento 2>
</lista desordenada>

Expresión dentro de un documento HTML

<ul>
   <li>Elemento 1</li>
   <li>Elemento 2 </li>
</ul>

Tabla

Las tabla es una forma de organizar datos que esta disponible.

Ejemplo

InventarioCantidad
Manzanas50
Sandias 35
Cantidad Total75

Sintaxis

<tabla>
<descripción>Contenido</descripción>
       <Contenedor>
             <elemento>Contenido</elemento>
             <elemento>Contenido</elemento>
        </Contenedor>
        <Contenedor>
             <elemento>Contenido</elemento>
             <elemento>Contenido</elemento>
        </Contenedor>
</tabla>

Expresión dentro de un documento HTML

<table>
  <caption>Registro</caption>
  <tr>
    <th>Invetario</th>
    <th >Cantidad</th>
  </tr>
  <tr>
    <td>Manzanas</td>
    <td>50</td>
  </tr>
   <tr>
    <td>Sandias</td>
    <td>35</td>
  </tr>
</table>

Para mas ejemplo puede visitar la W3shools ellos son unos de los encargado de impartir documentación oficial.

Formularios

Los formulario recolectaran información ingresada por el usuario la cual luego nosotros podremos recolectar por diferente lenguaje de programación como javascript o php. Actualmente los formulario a comenzar lo puede parecer algo obsoleto ya que para explotar su potencial necesitamos aprender un lenguaje de programación, mas es importante tenerlo siempre presente ya que el futuro sera fundamental .

Antes de empezar quiero recordarte que todo lo que te explicare aquí es su principio básico por ende me saltare algunos ejemplo que puede ocasionarte confusión.

Atributos Descripción
textEstablecemos que el contenido va a ser de tipo texto
radioEstablecemos que el contenido va a ser de tipo radio (select)
checkedestablece un elemento seleccionado
valueEstablece valor dentro del el formulario
SubmitVamos a enviar los datos
action acción a realizar una enviado los datos
name Nombre del elemento

Sintaxis

<Formulario>
Nombre:<espacio>
<rellenar atributo="valor" atributo="valor"/>
Apellido:<espacio>
<rellenar atributo="valor" atributo="valor"/>
</Formulario>

Expresión dentro de un documento HTML


<form>
  Nombre:<br>
  <input type="text" name="nombre" value="Francisco"/>
  <br>
  Apellido:<br>
  <input type="text" name="apellido" value="Banegas" />
  
  <input type="submit" value="Submit">
</form>

<!--otro ejemplo utilizando capo radio -->

<form>
  <input type="radio" name="conexion" value="Masculino" checked> Masculino<br>
  <input type="radio" name="conexion" value="Femenino"> Femenino<br>
  <input type="radio" name="conexion" value="otro"> Sin defenir  
</form> 

Mas Ejemplos en https://www.w3schools.com/html/html_forms.asp

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.