IMAGENES HTML

La etiqueta utilizada es:

TABLAS HTML

<table> </table> : indica el inicio y cierre de una tabla.

<tr> </tr> : (table row) representa una nueva fila de la tabla.

<td></td> : (table data cell) Celda dee datos.

<th></th> : (table data head) Celda de cabecera, para las primeras filas y columnas.

<thead></thead> : agrupa filas de cabecera.

<tbody></tbody> : agrupa filas de cuerpo.

<tfoot></tfoot> : agrupa las filas del pie.

Ejemplo:

<caption></caption> : añade un titulo sobre la tabla.

<td colspan="X"></colspan> : La celda  ocupa X columnas.

<td rowspan="X"></rowspan> : La celda ocupa X filas.

<colgroup></colgroup> o <col/> : 

CONSEJOS

• Utiliza tablas las tablas HTML para representar tablas no hagas el diseño de tu pagina con tablas. 
• Cuidado con la conbinación de celdas, 
• Utiliza la agrupación de filas y columnas para que el posterior trabajo de estilo sea mas facil. 

FORMULARIOS HTML

Un formulario HTML es una sección de documento, que contiene:

• Contenido normal..
• Código.
• Controles. 
• Rótulos.

En el que lo usuarios normalmente rellenan un formulario modificando sus controles, antes de enviar el formulario a un agente para que lo procese (a un servidor web, a un servidor de correo, etc).

¿ Para que se utilizan ?

Permite que el usuario envíe información al servidor, formularios e registro o acceso a sitios web, formularios de contacto, etc. 

ETIQUETAS BÁSICAS PARA FORMULARIOS:

<form>  action=" " method=" " accept-charset=" " enctype=" "</form> :

Es fundamental para que el resto de elementos puedan ser enviados, todos los campos que se quieren enviar deben estar entre estas dos etiquetas. "action" es el único atributo requerido para la etiqueta <form>, esta espera una cadena de texto que especifique la URL o ruta. "method" indica la forma de enviar la información este atributo  acepta dos valores get y post, si no se utiliza la etiqueta method el formulario se enviara  por defecto con el valor get. Accept-charset, espera una lista de juegos separados por comas. Enctype, especifica el tipo de codificación. 

• GET. es el metodo que utlizamos normalmente al navegar.
• POST, es un metodo de envio mas sensible, como pueden ser contraseñas, no tiene limite de envio y posibilita la subida de ficheros al servidor. ej: formulario de registro.

<imput> </imput>: 

Es la mas utilizada en formularios con ella podemos definir gran parte de los controles tipicos de formularios ( Entradas de  tipo texto, Casillas de verificación.Casillas de opcion (radio).ArchivosContraseñas, Campos ocultos, Botones varios). Esta etiqueta no tiene etiqueta de cierre y es importante que la cierres debidamente para cumplir con los estándares. <imput............/>.  Atributos: 

• name =" " espera una cadena de texto que indica el nombre que recibirá el campo.
• type =" " define en que se convertirá el control 
• "text" por defecto es de tipo text.
• "checkbox" casilla de verifación 
• "radio" casilla de opción.
• "file" boton que abre ventana para seleccionar un archivo.
• "pasword" campo de texto enmascarado. 
• "hidden" campo oculto.
• "button" muestra un botón. 
•  "submit" dibuja el  botón enviar 
• "image" utiliza una imagen con la opción de tipo submit. 
• "reset" borrar formulario.
• "disabled" deshabilita un campo para que no pueda ser utilizado. 
• "readonly" igual que disabled pero aplicado a tipo text seria  imposible copiar y pegar.

Consejos a la hora e hacer formularios:

• Sin form no hay envíos (pero si campos).
• <input type = "value" />
• <imput type = "submit/>
• Separa el contenido de estilos (size, cols, rows).

Ejemplod de imput:

<input type="text" maxleght=" "  sice=" " value=" ">

• maxleght = limita el numero maximo de caracteres.
• sice = limita el tamaño del hueco en caracteres. (no se acoseja).
• value = valor del campo por defecto, el usuario debera borrarlo para poner su palabra.

<imput type="checkbox" name"  "> : es importante que para esta etiqueta tengan todos el mismo nombe:

<imput type="checkbox" checked"  "> : indica que la casilla aperece marcada por defecto. 

<imput type="checkbox" value"  "> : es imprescindible aqui ira el valor a enviar al servidor. 

<imput type="radio" name"  "> : 

<imput type="radio" checked"  "> :

<imput type="radio" value"  "> :

<imput type="file"> : ofrecen la posibilidad de subir ficheros y adjuntarlos al  formulario. si quieres utilizar esta etiqueta en la etiqueta <form> tiene que estar tambien el atributo enctype="multipart/form-data" para poder subir archivos.

https://youtu.be/6oGjhVRu7cU

https://youtu.be/UVpE-tBtdvY

NUEVA ENTRADA

DHTML es el acrónimo de Dynamic HTML, un término que designa el conjunto de técnicas que permiten crear sitios web interactivos utilizando una combinación de HTML, CSS, JavaScript y DOM.

ENLACES HTML

Los enlaces son el elemento principal que confiere a la web  su carácter  de hipertexto.

Hipertexto: Documento digital que se puede  leer de forma no secuencial y que esta compuesto de nodos o secciones de enlaces o hipervinculos o hiperenlaces y de anclajes.

Los nodos son la parte del hipertexto que contiene información accesible para el usuario por otro lado los enlaces son las uniones que se establecen entre nodos y facilitan la lectura secuencial por los nodos del documento, por ultimo los anclajes son los puntos de activación de los enlaces.

En las paginas web se pueden crear dos tipos de enlaces:

• Enlace Intradocumental: Es un enlace a un punto en el mismo documento, 
• enlace : <a href="#nombre">.....</a>
• destino: <a name="nombre">......</a>    <h1 id="nombre">.........</h1>
• Enlace Extradocumental: Es un enlace a otro documento, a otra pagina web.
• <a href="pagina.html">....</a>.
• Enlace Extradocumental a un punto en otro documento. en este tipo se combinan ambos indica la url del documento y el nombre del punto en el otro documento y por otro lado en el destino se debe definir el punto al que se hace referencia.
• enlace: <a href="pagina.html#nombre">.....</a> 
• destino: <h1 name="nombre">...</h1>  <h1 id="nombre">...</h1>

Un hiperenlace puede hacer referencia en un punto determinado en la pagina que lo contiene, a otra pagina HTML o a un punto determinado de otra pagina HTML, en los dos últimos  casos la pagina destino puede residir en el mismo servidor de la pagina que contiene el hiperenlace o en un servidor distinto.

La etiqueta que se utiliza para definir un hiperenlace es <a></a> todo aquello que aparezca entre estas dos etiquetas <a>enlace</a> aparecerá en la web como un enlace, sera el objeto sensible que al ser pulsado producirá el salto al destino del enlace.  Suelen utilizarse texto o imagenes como contenido de un enlace. 

LISTAS HTML

Existen tres tipos de listas:

• Listas no ordenadas
• Listas ordenadas
• Listas de descripción.
• Listas anidadas.

los elementos de estas listas se definen de forma que, para la lista no ordenada y para la lista ordenada se emplea el elemento <li></li> para la lista de descripción se emplean los elementos 

<dt></dt> y <dd></dd>.

Ejemplo de lista no ordenada: 

<ul>

<li>Esto es un tipo de punto.</li>

<li>Este es otro.</li>

<li>Y este es otro diferente.</li>

</ul>

Ejemplo de lista ordenada:

<ol>
<li value="20">Este será el número 20. </li>
<li>Este será el 21. </li>
<li> Este será el 22. Y así sucesivamente. </li>

</ol>

En una lista ordenada se pueden usar algunos atributos que modifican su comportamiento. 

• start : permite indicar el valor inicial donde comienza la lista.
• type: (a,b,c,d.....I,II,III,VI).
• reverse: atributo bouleano, que hace que la numeración sea descendente.

Ejemplo de lista de descripcion: 

<dl>
<dt>Aquí va el término que definiremos</dt>
<dd>Y aquí dentro irá la definición propiamente dicha.</dd>
</dl>
<dl>
<dt>Aquí va la segunda definición</dt>
<dd>Y aquí dentro irá la segunda definición, separada automáticamente de la anterior.</dd>
</dl>

Ejemplo de listas anidadas: 

Ejemplo 1:

Ejemplo 2:

EL LENGUAJE HTML

El lenguaje HTML tiene muchas etiquetas, pero aplicando el Principio de Pareto (la regla del 80-20), sólo hay que conocer bien el 20% de las etiquetas, ya que con ellas se crea el 80% del contenido de las páginas web. Las etiquetas más importantes son:

WEB RECOMENDADA: http://www.w3schools.com/

ETIQUETAS: 

• <html></html> Etiqueta principal.
• <head></head> Cabecera metadatos.
• <title></title> Titulo de la pagina. 
• <body></body> Cuerpo contenido visible.
• <h1></h1>  <h2></h2> <h3></h3> Encabezados o titulos.
• <p></p> Parrafo.
• <strong> Texto negrita. 
• meta
• link
• style
• script
• a
• img
• form
• input
• select
• textarea
• table
• tr
• th
• td
• blockquote
• hr
• li
• div
• span

GRAMTICA: Algunas reglas importantes.

1. Las etiquetas siempre se tienen que cerrar.
2. Los elementos anidados deben tener un correcto orden de apertura/cierre, el que se abre ultimo debe cerrarse primero.
3. Las etiquetas deben escribirse siempre en minusculas.
4. Los valores de los atributos deben ir siempre cerrados entre comillas simples o dobles.
5. Para los nombres de los ficheros de las paginas web, limitate a utilizar letras y numeros.
6. La extensión de las paginas web es siempre .htm o .html.