Etiquetas

Etiquetas

    Etiqueta para imagenes

La etiqueta <IMG> te servirá para situar imágenes en una página. Es una etiqueta "verdadera", pues no tiene etiqueta de

cierre:

<IMG>

La etiqueta <IMG> requiere un origen de datos obligatorio dado por el atributo SRC=. Indica la imagen en cuestión:

<IMG>

Tan sólo el código anterior es necesario para añadir una imagen a tu página, mostrando la imagen situada en el mismo

directorio del documento HTML[1].

- Atributos de la etiqueta IMG

A la etiqueta <IMG> se le pueden añadir varios atributos para controlar la manera en que un navegador administra una

imagen. Estos atributos son los siguientes:

- width="x" Permite al navegador predeterminar el ancho, en pixles, que tendrá tu imagen.
- height="x" Junto con el atributo width, el navegador puede preparar el espacio necesario para tu imagen antes de que se

muestre.

- border="x" Para añadir o eliminar un borde, donde la x será un valor numérico.
- align="left" Puedes alinear una imagen horizontalmente al lado izquierdo.
- align="right" Puedes alinear una imagen horizontalmente al lado derecho.

Nota: Para centrar  una imagen se utliza la etiqueta

- hspace="x" horizontal space, se usa para añadir espacio vacío, con un valor numérico, en la coordenada horizontal de una

imagen.
- vspace="x" vertical space, controla el espacio de la imagen en las coordenadas verticales.[1].

Video de  la etiqueta <IMG>

Cargado desde: https://www.youtube.com/watch?v=BzHD1uRw5tg 

Etiquetas para tablas

Primero mostraré las etiquetas necesarias para la manipulación de tablas.

<table> – encargada de abrir una tabla
<thead> – cabecera de la tabla
<tbody> – cuerpo de la tabla
<tfoot> – pie de la tabla
<tr> – un registro o fila
<th> – una celda o columna perteneciente a la cabecera o al pie de la tabla
<td> – una celda o columna perteneciente a un registro
<caption> – define el titulo de la tabla
<colgroup> – agrupar columnas
<col> – especifica las propiedades y estilos de las columnas de un colgroup[2].

- Atributos de la etiqueta
 

* <border="1": Coloca el tamaño del borde de la tabla.

* <align="left">: alinea la tabla al lado izquierdo de la página

* <align="center">: alinea la tabla en el centro de la página

* <align="right">: alinea la tabla al lado derecho de la página

* <bgcolor="nombre del color">:  con este atributo se le da un color al fondo de la tabla utilizando los colores primarios

* <bgcolor=rgb"12,255,255">: con este atributo se le da un color al fondo de la tabla utilizando la combinacion de colores[2].

Video de la etiqueta tabla

Cargado desde: https://www.youtube.com/watch?v=ndeSzark6rI
 

- Etiqueta lista

Con HTML se pueden crear dos tipos de listas y en estas listas se pueden agregar tambien sublistas,existen listas ordenadas y listas NO ordenadas.

Listas no numeradas.Tambien llamadas listas no ordenadas o listas de viñetas, estas se anuncian mediante las etiquetas <UL>....</UL>,y cada uno de los elementos que conformaran este tipo de lista se coloca dentro de de la etiqueta <LI>....</LI>.
El resultado que estas etiquetas dan es una pequeña sangria.

Listas numeradas.Tambien llamadas listas ordenadas se establecen mediante la etiqueta <OL>....</OL>al igual que las listas de viñetas su contenido se realiza mediante las etiquetas <LI>....</LI>, esta etiqueta contiene parametros interesantes como lo son :

Atributos:

- <ol START="numero">:Define con que numero comenzara la lista.

- <ul TYPE=A/a/I/i/1 "circle","square","disc">:Determina el tipo de numeracion o letra o viñeta que se utilizara[3].

- <li type="circle">: Muestra un tipo de viñeta en circulo sin relleno

- <li type="square">: Muestra un tipo de viñeta en cuadro  
 
- <li type="disc">: Muestra un tipo de viñeta en circulo con relleno

- <dl>: Lista de definiciones muy utlizada para crear glosarios y se utliza con las siguientes etiquetas:
    
    - <dt>: Se utliza para añadir el término.

    - <dd>: Se utiliza para añadir las definiciones.

 

Video de la etiqueta lista

Cargado desde: https://www.youtube.com/watch?v=q2thvWkdmtc

 

Etiqueta para formularios

Se utliza la etiqueta <form> con su respectivo cierre.

Las etiquetas de control de un formularios son:

<INPUT>: Define el tipo de control de entrada.
 
<LABEL> : es una etiqueta que sirve para colocar un nombre a un objeto

<TEXTAREA>: define un área de texto multilinea

<SELECT>: crea un menú desplegable.

<OPTION>: define una opción en los menús desplegables.

<OPTGROUP>: permite agrupar opciones logicamente.

<BUTTON>: define a un botón

<FIELDSET>: dibuja un recuadro alrededor de los elementos.

<LEGENT>: permite a los autores asignar un título a un fielsect.

La etiqueta <input />, se utilizara para definir la mayoría de los campos utilizados dentro de los formularios, como cajas de texto, cajas de password, campos ocultos, radio button, etc, esta etiqueta es una de las más importantes en el uso de formularios HTML, los atributos de la etiqueta input son:

*text: como su nombre los indica se utilizara para captura de texto dentro del formulario.

*password: es una caja de texto solo que el texto introducido será sustituido por asterisos.

*hidden: es utilizado cuando queremos pasar una constante y no deseamos que se visualicé para los usuarios.

*radio: este es usado cuando deseamos que el usuario nos indique solo un valor por ejemplo si solicitamos el sexo del usuario masculino o femenino.

*checkbox: son cajas de selección, cuando deseamos que el usuario seleccione mas de dos opciones dentro de nuestro formulario HTML.

*submit: es un botón el cual se encargara de enviar la información este como este el formulario, es decir si el usuario a capturado información o si el usuario no la ha capturado.

*button: es un botón dentro de nuestro formulario solo que para la activación de este formulario se podrá hacer a través de eventos.

*reset: borra toda información capturada dentro del formulario.

*file: hoy en día este atributo es el más usado por todos los usuarios que usan una red social ya que les permite subir sus archivos al servidor web[4].


Etiqueta enlaces o link

Se utliza la etiqueta <a> con su respectivo cierre.

* Para definir un enlace hacia otra página o sitio Web utilizamos el atributo href.
    
* Para definir un enlace dentro de la misma página en la que nos encontramos usamos el atributo name.


[1] https://www.duiops.net/curso/atribimg.htm

[2] https://sourcezilla.com/articulos/tecnologia/trabajar-con-tablas-en-html.html

[3] https://www.taringa.net/posts/ciencia-educacion/15439528/Curso-de-HTML-etiquetas-para-crear-LISTAS.html

[4] https://alfatips.com/temas/FormulariosHTML