tag:blogger.com,1999:blog-77787908656355012762024-02-19T13:00:00.797-03:00Programando el DestinoBlog dedicado a la Informática, específicamente a la programación web.Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.comBlogger10125tag:blogger.com,1999:blog-7778790865635501276.post-68115352437076585612011-12-21T21:39:00.002-03:002011-12-21T21:44:50.226-03:00Programación Web - CSS (I) - [ INTRODUCCIÓN ]<span style="font-size: large;"><span style="font-family: "Verdana", sans-serif;">CSS</span></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><span style="font-size: small;">Para utilizar <strong>CSS</strong> tenemos tres alternativas:</span><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">• Dentro de las </span><i><span style="font-family: "Verdana", sans-serif;">etiquetas</span></i><span style="font-family: "Verdana", sans-serif;"> mediante el atributo "</span><b><span style="font-family: "Verdana", sans-serif;">Style</span></b><span style="font-family: "Verdana", sans-serif;">" [</span><i><span style="font-family: "Verdana", sans-serif;">En Línea</span></i><span style="font-family: "Verdana", sans-serif;">]</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• En el </span><i><span style="font-family: "Verdana", sans-serif;">encabezado</span></i><span style="font-family: "Verdana", sans-serif;"> del documento </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;">, es decir, dentro de "</span><b><span style="font-family: "Verdana", sans-serif;"><head></span></b><span style="font-family: "Verdana", sans-serif;">" utilizando la etiqueta "</span><b><span style="font-family: "Verdana", sans-serif;"><style></span></b><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• En un </span><i><span style="font-family: "Verdana", sans-serif;">documento externo</span></i><span style="font-family: "Verdana", sans-serif;"> vinculándolo a nuestro </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> mediante el tag "</span><b><span style="font-family: "Verdana", sans-serif;"><link></span></b><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-size: large;"><span style="font-family: "Verdana", sans-serif;"><br />
</span></span><br />
<span style="font-family: "Verdana", sans-serif;">La primera opción es la menos recomendable, puesto que "ensucia" todo el código </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> y lo hace menos legible para la modificación, se denomina popularmente diseño en línea.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">La segunda opción es un poco mejor que la primera, sin embargo, a pesar que el código está enmarcado y separado del cuerpo de la página, al ser, muchas veces, extenso, aumenta en gran medida el tamaño del documento </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> en cuestión.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">La tercera opción es, por así decirlo, la mejor de todas por varios motivos, principalmente no "ensucia" el código </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> y por ser un archivo externo tampoco aumenta el tamaño del documento. Al margen de esto, al tener separados los estilos del </span><i><span style="font-family: "Verdana", sans-serif;">maquetado</span></i><span style="font-family: "Verdana", sans-serif;"> puro de </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> permite que dos personas estén trabajando en simultaneo, una editando </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> y otra el </span><b><span style="font-family: "Verdana", sans-serif;">CSS</span></b><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Dicho esto, comencemos con </span><b><span style="font-family: "Verdana", sans-serif;">CSS</span></b><span style="font-family: "Verdana", sans-serif;">.</span><br />
<span style="font-family: "Verdana", sans-serif;">Básicamente la sintaxis de un "</span><i><span style="font-family: "Verdana", sans-serif;">estilo</span></i><span style="font-family: "Verdana", sans-serif;">" es la siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">selector {atributo: valor;}</span></b><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Esto se lee de la siguiente manera:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• </span><b><span style="font-family: "Verdana", sans-serif;">Selector</span></b><span style="font-family: "Verdana", sans-serif;"> - Puede ser el nombre de una etiqueta, el valor de un </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;"> o el nombre de una </span><b><span style="font-family: "Verdana", sans-serif;">Clase</span></b><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• </span><b><span style="font-family: "Verdana", sans-serif;">{</span></b><span style="font-family: "Verdana", sans-serif;"> - Comienzo de estilos.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• </span><b><span style="font-family: "Verdana", sans-serif;">Atributo</span></b><span style="font-family: "Verdana", sans-serif;"> - </span><i><span style="font-family: "Verdana", sans-serif;">Propiedad</span></i><span style="font-family: "Verdana", sans-serif;"> de </span><b><span style="font-family: "Verdana", sans-serif;">CSS</span></b><span style="font-family: "Verdana", sans-serif;"> que modificaremos.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• </span><b><span style="font-family: "Verdana", sans-serif;">:</span></b><span style="font-family: "Verdana", sans-serif;"> - Separador de </span><i><span style="font-family: "Verdana", sans-serif;">Atributo</span></i><span style="font-family: "Verdana", sans-serif;"> y </span><i><span style="font-family: "Verdana", sans-serif;">Valor</span></i><span style="font-family: "Verdana", sans-serif;"> (podría considerarse como signo de asignación).</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• </span><b><span style="font-family: "Verdana", sans-serif;">(espacio)</span></b><span style="font-family: "Verdana", sans-serif;"> – No es obligatorio, se deja para mejorar la legibilidad de la instrucción.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• </span><b><span style="font-family: "Verdana", sans-serif;">Valor</span></b><span style="font-family: "Verdana", sans-serif;"> - </span><i><span style="font-family: "Verdana", sans-serif;">Valor</span></i><span style="font-family: "Verdana", sans-serif;"> que le asignamos a la propiedad inmediatamente anterior a los dos puntos (:).</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• </span><b><span style="font-family: "Verdana", sans-serif;">;</span></b><span style="font-family: "Verdana", sans-serif;"> - Fin de la modificación del atributo que acabamos de alterar.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Esto quedará más claro con el siguiente ejemplo:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">h3 {color: red;}</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">El estilo que acabamos de escribir funciona para la etiqueta </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> de </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> y el atributo que alteramos fue el que determina su color y lo colocamos en rojo.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Visualmente queda así:</span><br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr></tr>
<tr><td class="tr-caption" style="text-align: center;"></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTG-_nXBbHI5GbmtR1c5qA9RpT4hyphenhyphen83wU52Ya_-0oSw86huVjWb_H_3mFfcFcV0jAL2KOj4PGG9guarqKPwoRjbQillTTaSHn1WNtC1bMbbVKWLseGKgg3WswAGm0pbFzxzD4s_ZoQhk/s1600/css-h3-color-red.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTG-_nXBbHI5GbmtR1c5qA9RpT4hyphenhyphen83wU52Ya_-0oSw86huVjWb_H_3mFfcFcV0jAL2KOj4PGG9guarqKPwoRjbQillTTaSHn1WNtC1bMbbVKWLseGKgg3WswAGm0pbFzxzD4s_ZoQhk/s1600/css-h3-color-red.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;"> Encabezado <h3> en rojo mediante CSS </span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">En "</span><i><span style="font-family: "Verdana", sans-serif;">selector</span></i><span style="font-family: "Verdana", sans-serif;">" que utilizamos fue </span><b><span style="font-family: "Verdana", sans-serif;">h3</span></b><span style="font-family: "Verdana", sans-serif;">, esto significa que para cualquier </span><b><span style="font-family: "Verdana", sans-serif;">h3</span></b><span style="font-family: "Verdana", sans-serif;"> que este en nuestro documento </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> se le aplicara el </span><i><span style="font-family: "Verdana", sans-serif;">color rojo</span></i><span style="font-family: "Verdana", sans-serif;">, veamos el ejemplo:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9fG7v-nqxkArnFY6QByQdo2glSaGHLLiegvQDRRMi24Gli26NK0ZEjp_aRh-v5gQ2ZVTba26Ryb9YSEK6vopTlTIx_AzT2Hbcf7W5Ea-1zjV6ha4IqkIgLqvJs4U7Q2Wb-noZuwbuHM/s1600/css-varios-h3-color-red.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiw9fG7v-nqxkArnFY6QByQdo2glSaGHLLiegvQDRRMi24Gli26NK0ZEjp_aRh-v5gQ2ZVTba26Ryb9YSEK6vopTlTIx_AzT2Hbcf7W5Ea-1zjV6ha4IqkIgLqvJs4U7Q2Wb-noZuwbuHM/s1600/css-varios-h3-color-red.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Varios <h3> en rojo mediante CSS</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Ahora bien, pero ¿Dónde escribir las reglas de estilo del </span><b><span style="font-family: "Verdana", sans-serif;">CSS</span></b><span style="font-family: "Verdana", sans-serif;">?</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como mencioné al principio hay 3 lugares donde escribir las reglas de estilo, veamos dos de ellas y más adelante veremos la tercera.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Para el primer caso, es decir, </span><i><span style="font-family: "Verdana", sans-serif;">estilos en línea</span></i><span style="font-family: "Verdana", sans-serif;"> la sintaxis es la siguiente:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;"><h3 style="color: red;"></span></b><span style="font-family: "Verdana", sans-serif;">Texto</span><b><span style="font-family: "Verdana", sans-serif;"></h3></span></b><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Visualmente queda así:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv4Xt9B-Zr7Hs_5hM6iZNZSRCpWof0H40gZPNf-bJ05iLnZ986yTtasYkfWI3_E5YgKtBYEA8s0CFQy3H-Zh_dHFI1SpAw_JQxzhWaIbRZ5en2TOeXIL2fYy6FhWLjb6ClfOmTovrFisY/s1600/css-estilos-en-linea-h3-color-red.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv4Xt9B-Zr7Hs_5hM6iZNZSRCpWof0H40gZPNf-bJ05iLnZ986yTtasYkfWI3_E5YgKtBYEA8s0CFQy3H-Zh_dHFI1SpAw_JQxzhWaIbRZ5en2TOeXIL2fYy6FhWLjb6ClfOmTovrFisY/s1600/css-estilos-en-linea-h3-color-red.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Utilización de estilos en línea</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Sin embargo, pueden notar que otros </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> no han sido alterados, esto se debe a que solo se altera la etiqueta a la que se le aplica el estilo.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como puede verse, para que esto funcione utilizamos el atributo de </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> "</span><b><span style="font-family: "Verdana", sans-serif;">style</span></b><span style="font-family: "Verdana", sans-serif;">" y en la asignación de valor, escribimos el atributo de </span><b><span style="font-family: "Verdana", sans-serif;">CSS</span></b><span style="font-family: "Verdana", sans-serif;"> (</span><i><span style="font-family: "Verdana", sans-serif;">color</span></i><span style="font-family: "Verdana", sans-serif;">), </span><b><span style="font-family: "Verdana", sans-serif;">dos puntos</span></b><span style="font-family: "Verdana", sans-serif;"> (</span><b><span style="font-family: "Verdana", sans-serif;">:</span></b><span style="font-family: "Verdana", sans-serif;">) y finalmente el </span><b><span style="font-family: "Verdana", sans-serif;">valor</span></b><span style="font-family: "Verdana", sans-serif;"> que le asignamos al atributo (</span><i><span style="font-family: "Verdana", sans-serif;">red</span></i><span style="font-family: "Verdana", sans-serif;">), luego de esto punto y como (</span><b><span style="font-family: "Verdana", sans-serif;">;</span></b><span style="font-family: "Verdana", sans-serif;">) esto nos permite tanto finalizar la redacción de estilos como para escribir nuevos atributos.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">La segunda forma de hacerlo mediante </span><i><span style="font-family: "Verdana", sans-serif;">estilos en el </span></i><b><span style="font-family: "Verdana", sans-serif;"><head></span></b><span style="font-family: "Verdana", sans-serif;">, veamos un ejemplo visual similar al anterior:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqfERMNaoMIo7pXdis-JPYiWQxpqC9gu0JfD3kQ4iGmVpf-J_7wvKkv2LmxYp1FzVX2Dvi9vCjgCphyphenhyphenF_pObz5tkwWFlz8t6SEqHBYqK2xh-Qfq7jsVVG2bvsOKkfwnsUorc2SmUu-BdU/s1600/css-varios-h3-color-red.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqfERMNaoMIo7pXdis-JPYiWQxpqC9gu0JfD3kQ4iGmVpf-J_7wvKkv2LmxYp1FzVX2Dvi9vCjgCphyphenhyphenF_pObz5tkwWFlz8t6SEqHBYqK2xh-Qfq7jsVVG2bvsOKkfwnsUorc2SmUu-BdU/s1600/css-varios-h3-color-red.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">CSS en el <head> del documento</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El código de la imagen es el siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><head></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <style type="text/css"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> h3 {color: red;}</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> </style></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></head></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Este código que se acabamos de escribir dentro del "</span><b><span style="font-family: "Verdana", sans-serif;"><head></span></b><span style="font-family: "Verdana", sans-serif;">" del documento </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> aplica la regla de estilo a todos los "</span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;">" que conformen nuestro documento.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">En caso de quererlo aplicar a algunos </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> específicos debemos comenzar a utilizar "</span><b><span style="font-family: "Verdana", sans-serif;">Clases</span></b><span style="font-family: "Verdana", sans-serif;">" o en su defecto "</span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;">".</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">Utilización del Atributo CLASS de HTML</span></b><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> cuenta con un atributo que permite definir a que </span><b><span style="font-family: "Verdana", sans-serif;">Clase</span></b><span style="font-family: "Verdana", sans-serif;"> pertenecerá un elemento determinado, esto nos facilitará asignarle estilos de manera personalizada a esa </span><b><span style="font-family: "Verdana", sans-serif;">Clase</span></b><span style="font-family: "Verdana", sans-serif;">, veamos un ejemplo, en donde nuestro </span><b><span style="font-family: "Verdana", sans-serif;">Body</span></b><span style="font-family: "Verdana", sans-serif;"> tiene lo siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><body></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h2>Titulo</h2></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3>Subtitulo</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3>Subtitulo</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3>Subtitulo Extra</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></body></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El código anterior se ve de la siguiente manera:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxRxuL5L_jSkd4lps4XP6GboHzKtbPpzNYyLNGiirarLnI28aV-TDONNimByZRCoh4JZ8YWLRy4DYRsxtxCHHxtMr60cVDLQOfCD1pHztZsgS2KxBG_zbziL9bfkS0_SGyUlA2gNirvo/s1600/body-base-para-aplicar-css.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjuxRxuL5L_jSkd4lps4XP6GboHzKtbPpzNYyLNGiirarLnI28aV-TDONNimByZRCoh4JZ8YWLRy4DYRsxtxCHHxtMr60cVDLQOfCD1pHztZsgS2KxBG_zbziL9bfkS0_SGyUlA2gNirvo/s1600/body-base-para-aplicar-css.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">A este <body> le aplicaremos CSS</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Y ahora le queremos aplicar un </span><i><span style="font-family: "Verdana", sans-serif;">color azul</span></i><span style="font-family: "Verdana", sans-serif;"> solo a los dos primeros </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> para ello haremos lo siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><body></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h2>Titulo</h2></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3 class="azul">Subtitulo</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3 class="azul">Subtitulo</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3>Subtitulo Extra</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></body></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como pueden ver, en el código a los dos primeros </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> se les ha agregado el atributo "</span><b><span style="font-family: "Verdana", sans-serif;">class</span></b><span style="font-family: "Verdana", sans-serif;">", al mismo le asignamos valor con el signo igual (</span><b><span style="font-family: "Verdana", sans-serif;">=</span></b><span style="font-family: "Verdana", sans-serif;">) y entre comillas (</span><b><span style="font-family: "Verdana", sans-serif;">"</span></b><span style="font-family: "Verdana", sans-serif;">) escribimos el nombre de la </span><i><span style="font-family: "Verdana", sans-serif;">clase</span></i><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Ahora bien, para poder aplicarle a estos </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> el </span><i><span style="font-family: "Verdana", sans-serif;">color azul</span></i><span style="font-family: "Verdana", sans-serif;"> en el </span><b><span style="font-family: "Verdana", sans-serif;"><head></span></b><span style="font-family: "Verdana", sans-serif;"> tenemos que hacer lo siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><head></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <style type="text/css"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> .azul {color:blue;}</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> </style></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></head></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El resultado que obtenemos es el siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUOlbF7xCQIJ4ZnMaNOM8GQGrp6TQNbV9Nhu7JZhwY_AIq54_zJeTIid4dDUJgJipcnnhHYqcCmymv7ZdiKbUfjxq__Dudykv743uCVU9U39KtP1F-kg-iRtyq3cjhzh9_EA8FczTVZY/s1600/utilizando-atributo-class-con-css.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgeUOlbF7xCQIJ4ZnMaNOM8GQGrp6TQNbV9Nhu7JZhwY_AIq54_zJeTIid4dDUJgJipcnnhHYqcCmymv7ZdiKbUfjxq__Dudykv743uCVU9U39KtP1F-kg-iRtyq3cjhzh9_EA8FczTVZY/s1600/utilizando-atributo-class-con-css.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Utilizando el atributo CLASS del HTML para aplicar CSS</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como pueden ver, en lugar de utilizar el nombre de la etiqueta (</span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;">) utilizamos el nombre de la clase ("</span><i><span style="font-family: "Verdana", sans-serif;">azul</span></i><span style="font-family: "Verdana", sans-serif;">") precedida por un </span><i><span style="font-family: "Verdana", sans-serif;">punto</span></i><span style="font-family: "Verdana", sans-serif;"> (</span><b><span style="font-family: "Verdana", sans-serif;">.</span></b><span style="font-family: "Verdana", sans-serif;">), este punto en cuestión le dice a nuestro navegador que los estilos se aplicaran a la </span><b><span style="font-family: "Verdana", sans-serif;">clase</span></b><span style="font-family: "Verdana", sans-serif;"> con el nombre al lado del mismo (en este caso "</span><i><span style="font-family: "Verdana", sans-serif;">azul</span></i><span style="font-family: "Verdana", sans-serif;">").</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><b><span style="font-family: "Verdana", sans-serif;">Utilización del Atributo ID de HTML</span></b><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Otra posibilidad es asignarle estilos a una elemento en especifico y solo a ese elemento, a diferencia de las </span><b><span style="font-family: "Verdana", sans-serif;">clases</span></b><span style="font-family: "Verdana", sans-serif;"> que permiten aplicarlo a uno o varios elementos, la asignación de estilos mediante el atributo </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;"> es para un único elemento, puesto que el </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;"> no puede repetirse, siguiendo el ejemplo anterior, supongamos que el elemento </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> restante que no tiene clase le queremos aplicar un estilo, en este caso podríamos utilizar directamente asignación de estilo a la etiqueta </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;">, pero si en el futuro hubiese otras, estas también se verían afectadas. Para evitar este tema haremos lo siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><body></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h2>Titulo</h2></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3 class="azul">Subtitulo</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3 class="azul">Subtitulo</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <h3 id="amarillo">Subtitulo Extra</h3></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <p>Párrafo</p></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></body></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como pueden ver, en el código al último </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> se les ha agregado el </span><i><span style="font-family: "Verdana", sans-serif;">atributo</span></i><span style="font-family: "Verdana", sans-serif;"> "</span><b><span style="font-family: "Verdana", sans-serif;">id</span></b><span style="font-family: "Verdana", sans-serif;">", al mismo le asignamos valor con el signo igual (</span><b><span style="font-family: "Verdana", sans-serif;">=</span></b><span style="font-family: "Verdana", sans-serif;">) y entre comillas (</span><b><span style="font-family: "Verdana", sans-serif;">"</span></b><span style="font-family: "Verdana", sans-serif;">) escribimos el nombre del elemento (</span><i><span style="font-family: "Verdana", sans-serif;">único e irrepetible</span></i><span style="font-family: "Verdana", sans-serif;">).</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Ahora bien, para poder aplicarle a ese </span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;"> el </span><i><span style="font-family: "Verdana", sans-serif;">color amarillo</span></i><span style="font-family: "Verdana", sans-serif;"> en el </span><b><span style="font-family: "Verdana", sans-serif;"><head></span></b><span style="font-family: "Verdana", sans-serif;"> tenemos que hacer lo siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><head></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> <style type="text/css"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> .azul {color:blue;}</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> #amarillo {color:yellow;}</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> </style></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></head></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El resultado que obtenemos es el siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJhH_v7c_059LaMHqcjEgguNpx6DVBUZtmxVAM6xpHXIb44LhnMuVO3Kb-7Z-gYM3ihvNLM7qNe-UlWesPUb3d43JXx8ngvQs1eqsz9crYNBn9Qplpcnk-qh5QH84Z3eY6NNFXgtuPvU/s1600/utilizando-atributo-id-con-css.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFJhH_v7c_059LaMHqcjEgguNpx6DVBUZtmxVAM6xpHXIb44LhnMuVO3Kb-7Z-gYM3ihvNLM7qNe-UlWesPUb3d43JXx8ngvQs1eqsz9crYNBn9Qplpcnk-qh5QH84Z3eY6NNFXgtuPvU/s1600/utilizando-atributo-id-con-css.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Utilizando el atributo ID de HTML para aplicar CSS</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como pueden ver, en lugar de utilizar el nombre de la etiqueta (</span><b><span style="font-family: "Verdana", sans-serif;"><h3></span></b><span style="font-family: "Verdana", sans-serif;">) utilizamos el nombre del </span><b><span style="font-family: "Verdana", sans-serif;">id</span></b><span style="font-family: "Verdana", sans-serif;"> ("</span><i><span style="font-family: "Verdana", sans-serif;">amarillo</span></i><span style="font-family: "Verdana", sans-serif;">") precedida por el </span><i><span style="font-family: "Verdana", sans-serif;">signo numeral</span></i><span style="font-family: "Verdana", sans-serif;"> (</span><b><span style="font-family: "Verdana", sans-serif;">#</span></b><span style="font-family: "Verdana", sans-serif;">), este numeral en cuestión le dice a nuestro navegador que los estilos se aplicaran al elemento cuyo </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;"> sea el nombre al lado del mismo (en este caso "</span><i><span style="font-family: "Verdana", sans-serif;">amarillo</span></i><span style="font-family: "Verdana", sans-serif;">").</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">En caso de no haber usado amarillo y utilizado nuevamente azul, nuestra </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;"> sería "</span><i><span style="font-family: "Verdana", sans-serif;">azul</span></i><span style="font-family: "Verdana", sans-serif;">" por lo cual tanto </span><b><span style="font-family: "Verdana", sans-serif;">Class</span></b><span style="font-family: "Verdana", sans-serif;"> como </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;"> tendrían el mismo valor, lo cual esta permitido dado que son atributos distintos, sin embargo, </span><i><span style="font-family: "Verdana", sans-serif;">no puede haber más de un elemento con el mismo</span></i><span style="font-family: "Verdana", sans-serif;"> </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">Reglas para los valores de los Atributos Class e Id</span></b><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• Deben </span><b><span style="font-family: "Verdana", sans-serif;">comenzar</span></b><span style="font-family: "Verdana", sans-serif;"> con una letra: [ A-Z ] o [ a-z ].</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• Luego de la primer letra </span><b><span style="font-family: "Verdana", sans-serif;">pueden contener</span></b><span style="font-family: "Verdana", sans-serif;">: </span><i><span style="font-family: "Verdana", sans-serif;">Letras</span></i><span style="font-family: "Verdana", sans-serif;"> [A-Z , a-z ], </span><i><span style="font-family: "Verdana", sans-serif;">Números</span></i><span style="font-family: "Verdana", sans-serif;"> [ 0-9 ], </span><i><span style="font-family: "Verdana", sans-serif;">Guión Medio</span></i><span style="font-family: "Verdana", sans-serif;"> [ - ] y/o </span><i><span style="font-family: "Verdana", sans-serif;">Guión Bajo</span></i><span style="font-family: "Verdana", sans-serif;"> [ _ ].</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• En </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> los valores son sensitivos a mayúsculas y minúsculas, por ende, utilizar exactamente el nombre que fue asignado como valor de atributo, Ejemplo: Si utilizaron class="colorRojo", al utilizarlo en </span><b><span style="font-family: "Verdana", sans-serif;">CSS</span></b><span style="font-family: "Verdana", sans-serif;"> deben escribir ".colorRojo", puesto que si utilizan ".colorrojo" o ".ColorRojo" no funcionará.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Dicho todo esto nos encontramos con que tenemos tres maneras de aplicar estilos:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• Directamente nombrando las etiquetas, ejemplo: </span><b><span style="font-family: "Verdana", sans-serif;">h1</span></b><span style="font-family: "Verdana", sans-serif;">, </span><b><span style="font-family: "Verdana", sans-serif;">h3</span></b><span style="font-family: "Verdana", sans-serif;">, p, li, ul, etcétera.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• Utilizando nombre de </span><b><span style="font-family: "Verdana", sans-serif;">Clases</span></b><span style="font-family: "Verdana", sans-serif;"> ya aplicadas a elementos, para ellos utilizar el punto (</span><b><span style="font-family: "Verdana", sans-serif;">.</span></b><span style="font-family: "Verdana", sans-serif;">), ejemplos: .nombreclase, .nombre-clase, .otronombre, etcétera. [Se puede utilizar el Guión medio {"-"} y el Guión bajo {"_"} como separador de palabras]</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">• Utilizando nombres de </span><b><span style="font-family: "Verdana", sans-serif;">ID</span></b><span style="font-family: "Verdana", sans-serif;"> ya aplicados a elementos, para ello utilizar el numeral (</span><b><span style="font-family: "Verdana", sans-serif;">#</span></b><span style="font-family: "Verdana", sans-serif;">), ejemplos: #nombreid, #nombre-id, #otronombre, etcétera. [Se puede utilizar el Guión medio {"-"} y el Guión bajo {"_"} como separador de palabras]</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Más adelante veremos más especificaciones y la utilización de selectores en cascada, selectores de grupo, entre otras opciones.</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com1tag:blogger.com,1999:blog-7778790865635501276.post-65258030793420981372011-07-02T16:44:00.002-03:002011-07-02T16:45:58.582-03:00Programación Web - HTML (IX) - [ FORMULARIOS II ]<b><span style="font-size: large;"><span style="font-family: "Verdana", sans-serif;">Formularios II</span></span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Continuando con el tema anterior, es decir, Formularios hoy veremos más etiquetas y armaremos algunos modelos que son los más usuales.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">Etiqueta FIELDSET</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Una práctica que puede resultar útil es agrupar los diferentes elementos de un formulario bajo la Etiqueta </span><b><span style="font-family: "Verdana", sans-serif;">FieldSet</span></b><span style="font-family: "Verdana", sans-serif;">, esta lo que hará es generar un recuadro en todos los elementos que contenga.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Además utilizando la Etiqueta "</span><b><span style="font-family: "Verdana", sans-serif;">Legend</span></b><span style="font-family: "Verdana", sans-serif;">" podremos ponerle un Título al recuadro. La sintaxis básica de un </span><b><span style="font-family: "Verdana", sans-serif;">FieldSet</span></b><span style="font-family: "Verdana", sans-serif;"> es la siguiente:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><legend>Titulo</legen></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input ……</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input …..</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><textarea>…</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></form></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como podemos observar, </span><b><span style="font-family: "Verdana", sans-serif;">FieldSet</span></b><span style="font-family: "Verdana", sans-serif;"> contiene en primer medida a </span><b><span style="font-family: "Verdana", sans-serif;">Legend</span></b><span style="font-family: "Verdana", sans-serif;"> y luego a todos los </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;">, </span><b><span style="font-family: "Verdana", sans-serif;">TextArea</span></b><span style="font-family: "Verdana", sans-serif;">, etc. que queramos agrupar.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Veamos un ejemplo visual:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGDCfDnPN05XJgqg6Y6XKwJaqe55F3FLMmrLB88cj3bJEIeAsGLhI3wfspczAIAVgf_LhyphenhyphenuvBQRmKt_SQfEUFrFtw5mNCjMsMFh2VeOgSnml3olgMde62k1MjU43uXt8hVWlAC_E-2w4/s1600/fieldset.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGDCfDnPN05XJgqg6Y6XKwJaqe55F3FLMmrLB88cj3bJEIeAsGLhI3wfspczAIAVgf_LhyphenhyphenuvBQRmKt_SQfEUFrFtw5mNCjMsMFh2VeOgSnml3olgMde62k1MjU43uXt8hVWlAC_E-2w4/s1600/fieldset.JPG" /><span style="font-family: "Verdana", sans-serif;"></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">FieldSet</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;">El Código es el siguiente:</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><html></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><head></head></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><body></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><legend>Titulo</legend></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Nombre: <input type="text" name="nombre" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Apellido: <input type="text" name="apellido" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></form></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></body></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></html></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">En caso de no utilizar la etiqueta "</span><b><span style="font-family: "Verdana", sans-serif;">Legend</span></b><span style="font-family: "Verdana", sans-serif;">" en el navegador solo aparecerá un recuadro alrededor de los </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">Acción de Formulario [ ACTION ]</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">La etiqueta <</span><b><span style="font-family: "Verdana", sans-serif;">form</span></b><span style="font-family: "Verdana", sans-serif;">> tiene un Atributo que es "</span><b><span style="font-family: "Verdana", sans-serif;">Action</span></b><span style="font-family: "Verdana", sans-serif;">" [ </span><i><span style="font-family: "Verdana", sans-serif;">Acción</span></i><span style="font-family: "Verdana", sans-serif;"> ] que contiene, generalmente, un </span><b><span style="font-family: "Verdana", sans-serif;">Link</span></b><span style="font-family: "Verdana", sans-serif;">. Este </span><b><span style="font-family: "Verdana", sans-serif;">Link</span></b><span style="font-family: "Verdana", sans-serif;"> será al que se dirija nuestra navegador en el momento en que el usuario haga Clic en el botón "Enviar/Send", es decir, sobre el <</span><b><span style="font-family: "Verdana", sans-serif;">input type="submit" value="Enviar"</span></b><span style="font-family: "Verdana", sans-serif;"> />.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">La sintaxis es la siguiente: <</span><b><span style="font-family: "Verdana", sans-serif;">form action="pagina.extension"</span></b><span style="font-family: "Verdana", sans-serif;">>…</</span><b><span style="font-family: "Verdana", sans-serif;">form</span></b><span style="font-family: "Verdana", sans-serif;">>.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Ejemplo: <form action="login.php">….</form></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">Métodos de Formulario [ METHOD ]</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">La etiqueta <</span><b><span style="font-family: "Verdana", sans-serif;">form</span></b><span style="font-family: "Verdana", sans-serif;">> tiene un Atributo que es "</span><b><span style="font-family: "Verdana", sans-serif;">Method</span></b><span style="font-family: "Verdana", sans-serif;">", es decir, el método que utilizará para enviar los datos. Tiene dos posible valores </span><b><span style="font-family: "Verdana", sans-serif;">GET</span></b><span style="font-family: "Verdana", sans-serif;"> o </span><b><span style="font-family: "Verdana", sans-serif;">POST</span></b><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><b><span style="font-family: "Verdana", sans-serif;">El Método GET</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Este método envía el valor de las variables mediante la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;">, es decir, que todos los valores que el usuario haya ingresado quedarán visibles. Esto demuestra que es un método que carece de seguridad, puesto que, de utilizarse este método al enviar variables de </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;"> tipo </span><b><span style="font-family: "Verdana", sans-serif;">Password</span></b><span style="font-family: "Verdana", sans-serif;"> este quedará visible en la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;"> para cualquiera que la vea.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Sin embargo, y a pesar de esto, este tipo de método es el utilizado cuando se realizan búsqueda y la razón de esto es que cuando copiemos y peguemos la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;"> con las variables pasadas por </span><b><span style="font-family: "Verdana", sans-serif;">GET</span></b><span style="font-family: "Verdana", sans-serif;"> obtendremos la misma página web que teníamos después de haber hecho las búsquedas.</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">La sintaxis de un </span><b><span style="font-family: "Verdana", sans-serif;">Formulario</span></b><span style="font-family: "Verdana", sans-serif;"> cuyo </span><i><span style="font-family: "Verdana", sans-serif;">método</span></i><span style="font-family: "Verdana", sans-serif;"> es </span><b><span style="font-family: "Verdana", sans-serif;">GET</span></b><span style="font-family: "Verdana", sans-serif;"> es la siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form method="get" action="pagina.extension">…</form></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Ejemplo: </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form method="get" action="productos.html"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Nombre: <input type="text" name="nombre" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Precio: <input type="text" name="precio" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input type="submit" value="Enviar" /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></form></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Supongamos que el usuario escribe los siguientes datos:</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQRMSEarqPgQUX-v9m2sOGJjr-3gfNZD0eSimCOBkyvxWq3WYoCRrxa90y0-JT_oCrAEwKBoPLelR5dD7jZMmzfKE1WfkXt09Rm0wZ4e_vDJ0c2j4Nd8fsqV-krf2OgEQEQXdX5QJFD8/s1600/method-get.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCQRMSEarqPgQUX-v9m2sOGJjr-3gfNZD0eSimCOBkyvxWq3WYoCRrxa90y0-JT_oCrAEwKBoPLelR5dD7jZMmzfKE1WfkXt09Rm0wZ4e_vDJ0c2j4Nd8fsqV-krf2OgEQEQXdX5QJFD8/s1600/method-get.JPG" /><span style="font-family: "Verdana", sans-serif;"></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Method GET</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Una vez que el Usuario haga Clic en el botón </span><b><span style="font-family: "Verdana", sans-serif;">Submit</span></b><span style="font-family: "Verdana", sans-serif;"> [ Enviar ] obtendrá en la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;"> lo siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">www.nombreservidor.com/productos.html?nombre=papel&precio=30</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como pueden observar en la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;"> que obtuvimos vemos los siguientes datos:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Una vez enviado el Formulario el navegador cargará la pagina del </span><b><span style="font-family: "Verdana", sans-serif;">Action</span></b><span style="font-family: "Verdana", sans-serif;">, es decir, </span><i><span style="font-family: "Verdana", sans-serif;">productos.html</span></i><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">A continuación del </span><b><span style="font-family: "Verdana", sans-serif;">Link</span></b><span style="font-family: "Verdana", sans-serif;"> del </span><b><span style="font-family: "Verdana", sans-serif;">Action</span></b><span style="font-family: "Verdana", sans-serif;"> aparece un "</span><b><span style="font-family: "Verdana", sans-serif;">?</span></b><span style="font-family: "Verdana", sans-serif;">", este es el separador de </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;"> y </span><b><span style="font-family: "Verdana", sans-serif;">Variables</span></b><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Luego vemos que dice "</span><i><span style="font-family: "Verdana", sans-serif;">nombre=papel&precio=30</span></i><span style="font-family: "Verdana", sans-serif;">", aquí vemos lo siguiente:</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">"</span><i><span style="font-family: "Verdana", sans-serif;">nombre</span></i><span style="font-family: "Verdana", sans-serif;">" y "</span><i><span style="font-family: "Verdana", sans-serif;">precio</span></i><span style="font-family: "Verdana", sans-serif;">" son los nombres de los </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;">. Si se fijan en el código anterior verán que al </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;"> de Nombre le pusimos en el </span><b><span style="font-family: "Verdana", sans-serif;">Atributo</span></b><span style="font-family: "Verdana", sans-serif;"> "</span><i><span style="font-family: "Verdana", sans-serif;">Name</span></i><span style="font-family: "Verdana", sans-serif;">" el valor de "</span><i><span style="font-family: "Verdana", sans-serif;">nombre</span></i><span style="font-family: "Verdana", sans-serif;">" mientras que en el </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;"> de Precio le pusimos en el </span><b><span style="font-family: "Verdana", sans-serif;">Atributo</span></b><span style="font-family: "Verdana", sans-serif;"> "</span><i><span style="font-family: "Verdana", sans-serif;">Name</span></i><span style="font-family: "Verdana", sans-serif;">" el valor de "</span><i><span style="font-family: "Verdana", sans-serif;">precio</span></i><span style="font-family: "Verdana", sans-serif;">".</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">A continuación de estos aparece el signo "</span><b><span style="font-family: "Verdana", sans-serif;">=</span></b><span style="font-family: "Verdana", sans-serif;">" esto significa que el </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;"> de Nombre tiene el valor de "</span><i><span style="font-family: "Verdana", sans-serif;">papel</span></i><span style="font-family: "Verdana", sans-serif;">" y el </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;"> de precio tiene el valor de "</span><i><span style="font-family: "Verdana", sans-serif;">30</span></i><span style="font-family: "Verdana", sans-serif;">".</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Cada variable del </span><b><span style="font-family: "Verdana", sans-serif;">Formulario</span></b><span style="font-family: "Verdana", sans-serif;"> (en este caso, cada </span><b><span style="font-family: "Verdana", sans-serif;">Input</span></b><span style="font-family: "Verdana", sans-serif;">) esta separado por el símbolo "</span><b><span style="font-family: "Verdana", sans-serif;">&</span></b><span style="font-family: "Verdana", sans-serif;">", es decir, que si tuviésemos mas variables para pasar en el formulario obtendríamos lo siguiente:</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">www.nombreservidor.com/productos.html?nombre=papel&precio=30&otrovariable=valor1&masvariables=valor2</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como aclaración importante, este método tiene, a parte de la poca seguridad, un limitante de cantidad de información que se pasa como parámetro en la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;">, teóricamente depende de cada navegador, sin embargo, es limitada.</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<b><span style="font-family: "Verdana", sans-serif;">El Método POST</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">A diferencia del </span><b><span style="font-family: "Verdana", sans-serif;">GET</span></b><span style="font-family: "Verdana", sans-serif;">, este método codifica la información que se envía de documento a documento no siendo visible para los usuarios, es decir, no utiliza la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;"> para pasar la información.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Como pude notarse este método es mas seguro que el </span><b><span style="font-family: "Verdana", sans-serif;">GET</span></b><span style="font-family: "Verdana", sans-serif;"> y además, como otra ventaja, no tiene límites.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">La sintaxis es la siguiente: <</span><b><span style="font-family: "Verdana", sans-serif;">form method="post" action=" pagina.extension"</span></b><span style="font-family: "Verdana", sans-serif;">>…</</span><b><span style="font-family: "Verdana", sans-serif;">form</span></b><span style="font-family: "Verdana", sans-serif;">></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Utilizando el mismo código que el anterior un Formulario con información pasado con POST queda de la siguiente manera:</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form method="post" action="productos.html"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Nombre: <input type="text" name="nombre" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Precio: <input type="text" name="precio" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input type="submit" value="Enviar" /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></form></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Y al pasar de página la </span><b><span style="font-family: "Verdana", sans-serif;">URL</span></b><span style="font-family: "Verdana", sans-serif;"> no se ve afectada y queda: www.nombreservidor.com/productos.html</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Para recuperar las variables utilizaremos algún </span><i><span style="font-family: "Verdana", sans-serif;">lenguaje</span></i><span style="font-family: "Verdana", sans-serif;"> como ser </span><b><span style="font-family: "Verdana", sans-serif;">PHP</span></b><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Bien, en este punto ya saben lo necesario como para empezar a crear formularios detallados, veamos algunos ejemplos:</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<b><span style="font-family: "Verdana", sans-serif;">Formulario de "Acepto los Términos y Condiciones de uso"</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form method="post" action="acepto.html"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><textarea rows="20" cols="50" readonly="readonly">Terminos y condiciones de uso</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Esta web…</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">.</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Debe aceptar los términos y las condiciones de uso para continuar</textarea><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input type="checkbox" name="acepto" /> Acepto los términos y condiciones de uso<br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input type="submit" value="Aceptar" /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></form></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiok2cjuIJIgvRRtr2Ddn_A7u0K_wv-_44fQu7j0x0Fh-BqFaD1I16REnpNXJySkJ4G3hF_adiM7dr5ZIJrg-bLBTJx2t9J3mf5-UCfd7iMAJ58B0JLxdCk5LC59cGDlUzOZPfcj9kpcKo/s1600/acepto-condiciones-de-uso.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiok2cjuIJIgvRRtr2Ddn_A7u0K_wv-_44fQu7j0x0Fh-BqFaD1I16REnpNXJySkJ4G3hF_adiM7dr5ZIJrg-bLBTJx2t9J3mf5-UCfd7iMAJ58B0JLxdCk5LC59cGDlUzOZPfcj9kpcKo/s320/acepto-condiciones-de-uso.JPG" width="320" /><span style="font-family: "Verdana", sans-serif;"></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Formulario de Acepto los Términos y Condiciones de Uso</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<b><span style="font-family: "Verdana", sans-serif;">Formulario de Login</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form method="post" action="login.php"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><legend>Login</legend></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Usuario: <input type="text" name="usuario" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Contraseña: <input type="password" name="clave" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input type="submit" value="login" /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></form></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2cu3Pm5bPJ8UA-ZiQqJqMPfx8GxFba0Wiyxgql3yJmnQgbz2LPvD5GMW7NawtnCQsYhWiMsOBrkEW_5SNJksOd_QqMHLoQ2njWwCK2PxD2eXAc2n3CXR3cbkF1-y1bA30Z3scUlG_zE/s1600/login.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiX2cu3Pm5bPJ8UA-ZiQqJqMPfx8GxFba0Wiyxgql3yJmnQgbz2LPvD5GMW7NawtnCQsYhWiMsOBrkEW_5SNJksOd_QqMHLoQ2njWwCK2PxD2eXAc2n3CXR3cbkF1-y1bA30Z3scUlG_zE/s1600/login.JPG" /><span style="font-family: "Verdana", sans-serif;"></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Formulario de Login</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<b><span style="font-family: "Verdana", sans-serif;">Formulario de Comentarios</span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><form method="post" action="comentario.php"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><legend>Deja tu comentario</legend></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Usuario: <input type="text" name="usuario" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">EMail: <input type="text" name="email" /><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Comentario: <textarea rows="5" cols="50"></textarea><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><input type="submit" value="login" /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></fieldset></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></form></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKpA8KRIFMLauUgarNZ8FWNHXb0XY6WJf2ybG6Mf2qRnxczRfuSi-a3_bllBuQFhTUD5-sWtZc4JxgYOSBxXE76ubhL28KC8aNqiex6KdjS0EJijTQiAbvRh08hiKKDnLL-qLTalOcK0/s1600/dejar-comentario.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKpA8KRIFMLauUgarNZ8FWNHXb0XY6WJf2ybG6Mf2qRnxczRfuSi-a3_bllBuQFhTUD5-sWtZc4JxgYOSBxXE76ubhL28KC8aNqiex6KdjS0EJijTQiAbvRh08hiKKDnLL-qLTalOcK0/s320/dejar-comentario.JPG" width="320" /><span style="font-family: "Verdana", sans-serif;"></span></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;">Formulario para dejar Comentarios</span></td></tr>
</tbody></table><br />
<span style="font-family: "Verdana", sans-serif;">Bien, aquí ya tiene algunos ejemplos, claro que aun falta la parte del procesamiento de los datos, pero como actualmente estamos aprendiendo </span><b><span style="font-family: "Verdana", sans-serif;">HTML</span></b><span style="font-family: "Verdana", sans-serif;"> no cabe comenzar a explicar </span><b><span style="font-family: "Verdana", sans-serif;">PHP</span></b><span style="font-family: "Verdana", sans-serif;"> lenguaje que tal vez mas adelante veamos.</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">En la próxima entrega veremos mas etiquetas a fin de, en futuras entregas, comenzar con </span><b><span style="font-family: "Verdana", sans-serif;">HTML5</span></b><span style="font-family: "Verdana", sans-serif;"> el futuro de la Web.</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-61867624136607019802011-06-29T22:50:00.002-03:002011-06-29T23:02:02.794-03:00Programación Web - HTML (VIII) - [ FORMULARIOS ]<span style="font-family: "Verdana", sans-serif;"><b><span style="font-size: large;">Formularios</span></b><br />
<br />
Uno de los últimos temas que nos quedan por ver en cuanto a <b>HTML</b> son los <b>formularios</b>. Es más que seguro que todas las personas, al menos una vez en su vida, han visto un formulario, por ejemplo antes de obtener una cuenta de <b>mail</b> han llenado mínimamente un <b>formulario</b>.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Un <b>formulario</b> es un elemento del <b>HTML</b> que agrupa un conjunto de <i>etiquetas</i> con un fin determinado.<br />
La etiqueta más importante para un <b>formulario</b> es <form> que debe cerrarse al final con la etiqueta </form>, dentro de este bloque irán los "<i>campos</i>" que los usuarios deben llenar. Esta etiqueta es la que le indica al navegador que todo lo que este dentro de ella será un <b>formulario</b>.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Los <b>formularios</b> son muy útiles para nuestra páginas web, por ejemplo, para obtener un <i>feedback</i> con los <b>usuarios</b>, puesto que ellos podrán hacernos llegar <i>consultas</i>, <i>peticiones</i>, <i>críticas</i>, etc. mientras que nosotros podremos darles una respuesta ya sea vía <b>mail</b>, si nosotros lo requerimos y el usuario lo provee, o mismo en la pagina realizando las modificaciones pertinentes.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Ahora bien, la etiqueta <form> por sí sola no muestra nada en un documento <b>HTML</b> , solo su contenido es lo que el usuario verá y estos se crean con las siguientes etiquetas:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Etiqueta INPUT </b></span><br />
<span style="font-family: "Verdana", sans-serif;">Cuando queremos que el usuario ingrese un <i>texto</i>, un <i>número</i>, una <i>edad</i>, un <i>email</i> utilizaremos el elemento denominado "<b>Input</b>" del <i>Tipo</i> "<b>Texto</b>".</span><br />
<span style="font-family: "Verdana", sans-serif;">La etiqueta es <input type="text" /> que debe cerrarse con " />", es decir, "<input …[atributo/s=valor/es]… />". Esta etiqueta genera un cuadro de ingreso de texto.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Ejemplo visual de un <b><input type="text" </b></span><span style="font-family: "Verdana", sans-serif;">/</span><span style="font-family: "Verdana", sans-serif;"><b>></b></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbS9sGRTzOpCaY5cheVH3ZP_mC1ZJdlcwds3FbwuAaNm3SMP7h_7QDFg2nt85hHrRIgad1iXd8pYsd5f5BU6kHWfLPYIAyUsppzpXB-u7Laz6eAEmVs1q387fiP4cc0ADDaUntqplJ5KA/s1600/input-text.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbS9sGRTzOpCaY5cheVH3ZP_mC1ZJdlcwds3FbwuAaNm3SMP7h_7QDFg2nt85hHrRIgad1iXd8pYsd5f5BU6kHWfLPYIAyUsppzpXB-u7Laz6eAEmVs1q387fiP4cc0ADDaUntqplJ5KA/s1600/input-text.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Input Type Text</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Cuyo código es:</span><br />
<span style="font-family: "Verdana", sans-serif;">Nombre: <input type="text" name="nombre" /><br /><br />
Apellido: <input type="text" name="apellido" /></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
<b>Etiqueta TEXTAREA</b></span><br />
<span style="font-family: "Verdana", sans-serif;">Cuando queremos que el usuario ingrese un </span><span style="font-family: "Verdana", sans-serif;"><i>texto extenso</i></span><span style="font-family: "Verdana", sans-serif;">, como una descripción, un comentario, una crítica, es decir, elementos que tendrán gran cantidad de caracteres utilizaremos la etiqueta <textarea> que debe cerrarse con </textarea>. Esta etiqueta es similar al <input type="text" /> con la diferencia que su objetivo es almacenar un texto relativamente grande pudiendo utilizar múltiples líneas.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ejemplo visual de un <b><textarea></b><br />
</span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmafEb1ZlTmLsyyKd8w_umdaf20aQNYIRKTTuiqIWK91yu_GAKc_sHSSWjh0iW4qCd8t19lq0I96jGI4R7BoB_YgoI1cw8U2w90IskfqduDdk0kEchYxxyuVT92Zynqx_xlBJtBgZFiIY/s1600/textarea.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmafEb1ZlTmLsyyKd8w_umdaf20aQNYIRKTTuiqIWK91yu_GAKc_sHSSWjh0iW4qCd8t19lq0I96jGI4R7BoB_YgoI1cw8U2w90IskfqduDdk0kEchYxxyuVT92Zynqx_xlBJtBgZFiIY/s1600/textarea.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Textarea</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Cuyo código es:</span><br />
<span style="font-family: "Verdana", sans-serif;">Descripción: <textarea></textarea> </span> <span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Etiqueta para RADIO BUTTON</b></span><br />
<span style="font-family: "Verdana", sans-serif;">Cuando queremos que un usuario elija una opción de varias y solo pueda ser una sola utilizaremos el concepto de "<b>Radio Button</b>", un ejemplo clásico de esto es la opción de sexo, es decir, "<i>Hombre</i>" – "<i>Mujer</i>", cuando se selecciona "Hombre" se deselecciona "Mujer" y viceversa.<br />
La etiqueta base es <input> y su atributo "Type" es "Radio" es decir, <b><input type="radio" </b></span><span style="font-family: "Verdana", sans-serif;">/</span><span style="font-family: "Verdana", sans-serif;"><b>></b></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Ejemplo visual de un <input type="radio" /></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"></span><br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSHvIleLjB7oDhCyDnTVPGni4L5OeaXOipXzLib3Eu0Q4SGma-skEpS7lj0zikPvxw9bl1_3oLZKS4VYSIS9rkDuqJP5lOgOUHAj99X_IVIDJHp9b5ogEbW5bVp2Wh8DklapVAcwzj8o/s1600/radio-button.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpSHvIleLjB7oDhCyDnTVPGni4L5OeaXOipXzLib3Eu0Q4SGma-skEpS7lj0zikPvxw9bl1_3oLZKS4VYSIS9rkDuqJP5lOgOUHAj99X_IVIDJHp9b5ogEbW5bVp2Wh8DklapVAcwzj8o/s1600/radio-button.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Radio Button</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El código del ejemplo es el siguiente:<br />
<input type="radio" name="sexo" value="hombre" />Hombre<br /><br />
<input type="radio" name="sexo" value="mujer" />Mujer<br /><br />
Los atributos "name" y "value" los veremos más adelante en este mismo episodio.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Etiqueta para CHECKBOX</b></span><br />
<span style="font-family: "Verdana", sans-serif;">Cuando queremos que los usuarios elijan una o más opciones al mismo tiempo no podremos utilizar los "<b>Radio Button</b>", deberemos utilizar un nuevo concepto llamado "<b>Check Box</b>" cuya sintaxis es la siguiente:<br />
La etiqueta base es <input> y su atributo "Type" es "Check" es decir, <b><input type="check" </b></span><span style="font-family: "Verdana", sans-serif;">/</span><span style="font-family: "Verdana", sans-serif;"><b>></b></span><br />
<span style="font-family: "Verdana", sans-serif;"><b> </b></span><span style="font-family: "Verdana", sans-serif;"><br />
Ejemplo visual de un <input type=" check" /></span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnvxys1rc1sR9cAJJ3Xa93g-1isVrDSSDAIzGOleUWOo66vdv5NGszUGtRvZAy-AAJ9_BaA_KQf5E-6aj8HqcQ4og7CdCu2FFs4pVpuvSXZKw9zBmhQwksUd6KdTiJokJmtQJ6cGekn4c/s1600/checkbox.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnvxys1rc1sR9cAJJ3Xa93g-1isVrDSSDAIzGOleUWOo66vdv5NGszUGtRvZAy-AAJ9_BaA_KQf5E-6aj8HqcQ4og7CdCu2FFs4pVpuvSXZKw9zBmhQwksUd6KdTiJokJmtQJ6cGekn4c/s1600/checkbox.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Checkbox</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;">El código del ejemplo es el siguiente:<br />
<input type="checkbox" name="intereses" value="juegos" />Juegos<br /><br />
<input type="checkbox" name="intereses" value="peliculas" />Películas<br /><br />
<input type="checkbox" name="intereses" value="tv" />TV<br /></span><br />
<span style="font-family: "Verdana", sans-serif;"><input type="checkbox" name="intereses" value="otros" />Otros<br /> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Botón RESET & SUBMIT</b></span><br />
<span style="font-family: "Verdana", sans-serif;">Bien, hasta aquí tenemos la mayoría de los elementos aprendidos, a continuación veremos 2 botones esenciales para la utilización de formularios, estos son "Reset" [Restablecer] y "Submit" [Para términos prácticos "Enviar"].<br />
El primero, que restablecerá todo los elementos del formulario a "blanco" o "nada", tiene la siguiente sintaxis:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
<<b>input type="reset" value="Limpiar"</b> /></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
El segundo, que enviará los datos del formularios, tiene la siguiente sintaxis:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
<<b>input type="submit" value="Enviar"</b> /></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Visualmente ambos botones quedan de la siguiente manera:</span><span style="font-family: "Verdana", sans-serif;"><b> </b></span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykyvET9-nKv0YlKYe5sCSBKXAxk8egLohntP80fBIRlznqkDNYscXfy0auy_93lDY0KoW_l8TZ3KfF8GLmTQjBshJ1gmRHEHZg9N_6FJ3oLptDvMvh3f30wrKsp8EN0kseRp-kcBadTI/s1600/button-reset-submit.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjykyvET9-nKv0YlKYe5sCSBKXAxk8egLohntP80fBIRlznqkDNYscXfy0auy_93lDY0KoW_l8TZ3KfF8GLmTQjBshJ1gmRHEHZg9N_6FJ3oLptDvMvh3f30wrKsp8EN0kseRp-kcBadTI/s1600/button-reset-submit.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Button Reset - Submit</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><b><br />
</b></span><br />
<span style="font-family: "Verdana", sans-serif;"><b><br />
</b></span><br />
<span style="font-family: "Verdana", sans-serif;">Bien, ya nos estamos acercando al momento donde debemos empezar a perfeccionar nuestros formularios para que se vean bien, sean acordes a los estándares de la <b>W3</b> y por supuesto tenga un buen funcionamiento, es decir, veremos más etiquetas especificas para determinados elementos y comenzaremos a utilizar atributos en etiquetas que vimos recientemente para mejorar y/o perfeccionar su uso.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Etiqueta para PASSWORD</b><br />
Por ejemplo, si queremos agregar un campo en nuestro formulario para que el usuario ingrese su contraseña no podríamos utilizar el <<b>input type="text"</b> /> puesto que su contraseña quedaría expuesta a todas las personas que vean el monitor en el momento en que la escriba, por lo cual, debemos utilizar un <i>Tipo</i> de <b>Input</b> especifico para las <b>contraseñas</b>, este es "<b>Password</b>" cuya sintaxis es la siguente:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
<<b>input type="password" name="clave"</b> /></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Visualmente el <b>Input Password</b> con valor incluido queda así: </span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRc2077OUiiYWwKBdgegZoQys1qgWq0NRdp0hcd4qRbDN3mLSMKcfG_QobyuaH56ek8vGlZS5mVjgo5rjtWYToBhu4ucIFXmvPI01LpDoNemvVE5Ezp2K-q79UGJcIodAYa3puEbQbmxg/s1600/input-password.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRc2077OUiiYWwKBdgegZoQys1qgWq0NRdp0hcd4qRbDN3mLSMKcfG_QobyuaH56ek8vGlZS5mVjgo5rjtWYToBhu4ucIFXmvPI01LpDoNemvVE5Ezp2K-q79UGJcIodAYa3puEbQbmxg/s1600/input-password.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Input Password</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Bueno, hasta aquí hemos visto nuevas etiquetas de <b>HTML</b> que de seguro nos servirán, para proseguir con este capitulo comenzaré a explicar algunos atributos para empezar a hacer algunos formularios mas "útiles".</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Determinar el tamaño de un TEXTAREA</b> </span><br />
<span style="font-family: "Verdana", sans-serif;">Si se han fijado el <b>textarea</b> que hemos creado anteriormente es muy pequeño como para manipular textos muy grandes, si bien el texto entrará será muy difícil su lectura. Para arreglar este problema tenemos dos atributos específicos de <b>textarea</b> que nos resultarán muy útiles, esto son "</span> <span style="font-family: "Verdana", sans-serif;"><b>rows</b></span> <span style="font-family: "Verdana", sans-serif;">" y "</span> <span style="font-family: "Verdana", sans-serif;"><b>cols</b></span> <span style="font-family: "Verdana", sans-serif;">", es decir, columnas y filas. Veamos un ejemplo visual:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPhjK_Rv0_l1xus9ivA2S99rYcgRfK1u6_l50tfkULLNIHgARJHIsTFCNZA4TA7wjoa-2ZBK1q8r5-Me6HzVZ36BRAZhrgAzixgOBN4u_YMXC5IcHeTUmLXUL3wuGQhfMcn69VyZa0Po/s1600/text-area-2.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMPhjK_Rv0_l1xus9ivA2S99rYcgRfK1u6_l50tfkULLNIHgARJHIsTFCNZA4TA7wjoa-2ZBK1q8r5-Me6HzVZ36BRAZhrgAzixgOBN4u_YMXC5IcHeTUmLXUL3wuGQhfMcn69VyZa0Po/s1600/text-area-2.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Atributos Rows y Cols de Textarea</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El <b>TextArea</b> (1) tiene 2 filas y 20 columnas. Sintaxis: </span><br />
<span style="font-family: "Verdana", sans-serif;"><textarea rows="2" cols="20">textarea 2 filas 20 columnas</textarea></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">El <b>TextArea</b> (2) tiene 5 filas y 10 columnas. Sintaxis:</span><br />
<span style="font-family: "Verdana", sans-serif;"><textarea rows="5" cols="10">textarea 5 filas 10 columnas</textarea></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span> <br />
<span style="font-family: "Verdana", sans-serif;">Creo que con estos dos ejemplos es mas que suficiente como para entender como se manejan estos atributos. Además, como pueden ver en el código y comprobarlo en el ejemplo visual, todo texto que se escriba entre la etiqueta de apertura del <b>TextArea</b> y la etiqueta de cierre estará contenido (en la visualización por el navegador) dentro de la caja de texto.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>TEXTAREA como Solo Lectura (READONLY)</b></span><br />
<span style="font-family: "Verdana", sans-serif;">Muchas veces se habrán encontrado con <b>páginas web</b> que tienen el clásico "términos de licencia y uso" con el aún mas entrañable Checkbox "He leído y acepto los términos y condiciones de uso", si es así, se habrán dado cuenta que los términos de uso están dentro de un cuadro cuyo texto puede ser seleccionado, sin embargo, no se puede escribir en él. Bien esto se debe a que se utiliza un <b>TextArea</b> con el atributo de <i>Solo Lectura</i> cuya sintaxis es la siguiente:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><<b>textarea rows="5" cols="20" readonly="readonly">Términos de uso...</b></span><span style="font-family: "Verdana", sans-serif;"></</span><span style="font-family: "Verdana", sans-serif;"><b>textarea</b><b>></b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Podrán comprobar ustedes mismos que el texto no puede ser editado debido al atributo de solo lectura. </span><br />
<span style="font-family: "Verdana", sans-serif;">Además al igual que los Input, TextArea puede tener su atributo "<b>name</b>", ejemplo:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><<b>textarea rows="5" cols="20" name="descripcion">Descripcion<</b></span><span style="font-family: "Verdana", sans-serif;">/</span><span style="font-family: "Verdana", sans-serif;"><b>textarea</b>></span> <br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Mas adelante veremos bien para qué sirve el atributo <i>name</i>, por ahora solo diré que lo deben utilizar pues son necesarios para obtener la información que las etiquetas contienen.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Bien, sé que en este capitulo he dicho que veríamos mas cosas, pero recapitulando un poco, creo que es necesario que primero practiquen con lo aprendido hoy, y en el próximo capitulo veremos, finalmente, formularios mas completos donde les enseñare los "<b>métodos de formulario</b>", más atributos y alguna que otra etiqueta nueva.</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-65393289403126872282011-04-13T22:40:00.005-03:002011-06-29T23:01:39.240-03:00Programación Web - HTML (VII) - [ HOME ]<span style="font-family: "Verdana", sans-serif;"><span style="font-size: large;"><b>Nuestra “HOME”</b></span></span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTCjwWn1FmkMUlL3_uhoH4YYBjo40-8qfIeRthgtBtWXqVmez0Au3DHhefLwhFwh1gMfFwv5MYjLy7U1xBKgAqluD2cfT9rTVLWWKBv1HmLTAS-FDDtml5CJgeMTmbU9v2XsBQEjBuX4/s1600/home.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="316" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzTCjwWn1FmkMUlL3_uhoH4YYBjo40-8qfIeRthgtBtWXqVmez0Au3DHhefLwhFwh1gMfFwv5MYjLy7U1xBKgAqluD2cfT9rTVLWWKBv1HmLTAS-FDDtml5CJgeMTmbU9v2XsBQEjBuX4/s320/home.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">home.html</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
Empecé por el final, es decir, mostrando como quedará muestra “<i>home.html</i>”.<br />
La razón de que así sea es por que hay elementos dentro del <b>HTML</b> que aún no he explicado y es una oportunidad genial para hacerlo.<br />
<br />
Empecemos…<br />
<br />
Lo que puede verse al final de la home (la imagen que dice <b>W3C</b>) es algo muy importante y es en realidad el objetivo de este post.<br />
Esa imagen demuestra que ese documento <b>HTML</b> fue validado por la <b>W3C</b> (eso mismo puede leerse en la home, pues ahí lo aclaro).<br />
La <b>W3C</b> (<b>W</b>orld <b>W</b>ide <b>W</b>eb <b>C</b>onsortium) es el organismo que regula los estándares del <b>HTML</b>, <b>CSS</b>, entre otros.<br />
Ella es la que define como se deben abrir y cerrar las etiquetas, cuando usar el “ />” del que tanto hablamos con anterioridad. En definitiva es la entidad que nos dirá como hacer las cosas y nos informará de nuestros errores, si es que así se lo pedimos.<br />
Pero ustedes se preguntarán ¿para que validar mi web?.<br />
La respuesta es muy simple, una web aprobada por la <b>W3C</b> significa que esta cumple con todos los estándares y por ende debería funcionar igual en cualquier navegador, aunque no siempre es así por eso el “debería”.<br />
<br />
Dicho esto comencemos con las aclaraciones y agregados para este post.<br />
<br />
Comenzaré detallando las cosas que veremos a continuación que son nuevas para nosotros y en esta entrada del <b>blog</b> las aprenderemos:<br />
<br />
• La definición de tipo de documento (<<b>DOCTYPE</b>>).<br />
• Atributo “<b>width</b>” en Tablas.<br />
• La etiqueta </span><b><span style="font-family: "Verdana", sans-serif;"><meta></span></b><span style="font-family: "Verdana", sans-serif;">.<br />
• </span><span style="font-family: "Verdana", sans-serif;">La </span><span style="font-family: "Verdana", sans-serif;"><b>definición del juego de caracteres</b>.<br />
• La etiqueta </span><b><span style="font-family: "Verdana", sans-serif;"><s></span></b><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">• La etiqueta <b> </b></span><span style="font-family: "Verdana", sans-serif;"><b><acronym></b>.<br />
• La etiqueta <b><abbr></b>.<br />
• <b>Caracteres especiales en HTML</b>.<br />
<br />
No empezaré por el orden de la lista, eso solo era a modo ilustrativo, comenzaré con las mas simples para finalizar con las mas importantes.<br />
<br />
<b>El atributo “width” en las tablas</b><br />
<br />
Como ya deben imaginar es igual al atributos <b>width</b> en las imágenes y otras etiquetas por ende iré directo a su sintaxis:<br />
<br />
<table width=”800”><br />
<br />
<hr /><br />
<b>La etiqueta <s></b><br />
<br />
Esta etiqueta sirve dentro del <b>HTML</b> para tachar el texto que este contenido dentro de ella, veamos un ejemplo visual de la página home:</span><br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfTMUDVTiQQBgcxlPlnsJee-BnH8FwZZx335IpmUrra_a-blMHNqPuzOHIxja8ull9CivEByxVKpC-bCBy2cXz13yn-8q9SuEtvyWxdNCkFzDbiRyxARhGDQBs_-NWYvtfYHfE_QwQaJE/s1600/s.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="16" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfTMUDVTiQQBgcxlPlnsJee-BnH8FwZZx335IpmUrra_a-blMHNqPuzOHIxja8ull9CivEByxVKpC-bCBy2cXz13yn-8q9SuEtvyWxdNCkFzDbiRyxARhGDQBs_-NWYvtfYHfE_QwQaJE/s320/s.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Etiqueta <s></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
Así es la sintaxis:<br />
<br />
<s>si leen otros blogs especializados en el tema, tal vez, también</s><br />
<br />
<hr /><br />
<b>La etiqueta <acronym></b><br />
<br />
Esta etiqueta es muy interesante y no es muy conocida. Podría decirse que funciona como el atributo “<i>title</i>” dentro de las imágenes, por el solo hecho de desplegar un <i>tooltip</i> con información, pero en este caso la etiqueta tiene como función informarle al usuario que significan determinadas siglas. Veamos un ejemplo visual tomado de la home:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZf31-JGf-efW4_NHR-vbN20zX2a-h_TiCbgEw0QcDahy-z9BfJeXUur5BpoGZNjs_vPi8on9FJKjUQ2wsiSMg3UiH36QPswAcFBt3ThNoCm2mxNyQEUU3ue5QJlqlHpZOU06iCiNKrw/s1600/acronym.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiZf31-JGf-efW4_NHR-vbN20zX2a-h_TiCbgEw0QcDahy-z9BfJeXUur5BpoGZNjs_vPi8on9FJKjUQ2wsiSMg3UiH36QPswAcFBt3ThNoCm2mxNyQEUU3ue5QJlqlHpZOU06iCiNKrw/s1600/acronym.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Etiqueta <acronym></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
La sintaxis es la siguiente:<br />
<br />
<acronym title=”Hipertexto Markup Language”>HTML</acronym><br />
<br />
El contenido del atributo “<i>title</i>” es el que se muestra en el <i>tooltip</i>.<br />
<br />
<hr /><br />
<b>La etiqueta <abbr></b><br />
<br />
Esta etiqueta es similar a la etiqueta <b><acronym></b> puesto que también despliega un <i>tooltip</i> con la información contenida en su atributo “<i>title</i>”. La diferencia radica en que <b><abbr></b> se utiliza para aclarar abreviaturas. Veamos un ejemplo visual tomado de la home:</span><br />
<br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil7HW00eaOcW2jyEw1-ImfaYE2NV97O2z-2HDHqbqF7V7rZ6yI86lY7HMDodVt37rbViF5_dxhOxUXVAw9QcWC1J6EcOW8wXDPRugYODBzYlTt3ztDq-r5IZmbe8iW1mLnnnZtVQOtxqY/s1600/abbr.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil7HW00eaOcW2jyEw1-ImfaYE2NV97O2z-2HDHqbqF7V7rZ6yI86lY7HMDodVt37rbViF5_dxhOxUXVAw9QcWC1J6EcOW8wXDPRugYODBzYlTt3ztDq-r5IZmbe8iW1mLnnnZtVQOtxqY/s1600/abbr.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Etiqueta <abbr></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
La sintaxis es la siguiente:<br />
<br />
<abbr title=”World Wide Web Consortium”>W3C</abbr><br />
<br />
Como dijimos anteriormente el contenido del atributo “title” es el que se muestra en el tooltip.<br />
<br />
<hr /><br />
<b>La etiqueta <meta></b><br />
<br />
La etiqueta <b><meta></b> se utiliza dentro de <b>HTML</b> para proporcionar <b>meta-datos</b> que poseen cierta información relevante en muchos aspectos. Esta información no será visible para el usuario dentro de la pagina, sin embargo y dependiendo de para que sea, si será tenida en cuenta, por ejemplo, por el <i>navegador</i>, por un <i>buscador</i>, etcétera.<br />
En esta etiqueta se puede ingresar, por ejemplo, el nombre del autor de la página, las <b>keywords</b> o palabras claves, el juego de caracteres que utilizara el documento <b>HTML</b>, etcétera. Más adelante las iremos viendo a medida que las vayamos necesitando.<br />
<br />
<hr /><br />
<b>Definición del juego de caracteres</b><br />
<br />
Como será la primera vez que veamos la utilización de la etiqueta <b><meta></b> y para no extendernos demasiado en el asunto iremos directo al código y explicaremos solo lo que respecta al juego de caracteres quizás mas adelante, y en caso de necesitarlo, no extendamos mas en el asunto.<br />
Esta es la sintaxis para definir el juego de caracteres a <b>UTF-8</b>, este formato es capaz de representar cualquier carácter <b>Unicode</b> así como también incluye la especificación <b>US-ASCII</b> de 7 bits, por lo que puede representar cualquier mensaje <b>ASCII</b> sin cambios.<br />
Es la codificación “favorita” de correos electrónicos y paginas web.<br />
La sintaxis es la siguiente:<br />
<br />
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”><br />
<br />
<hr /><br />
<b>Definición del Tipo de Documento [DOCTYPE]</b><br />
<br />
El <b>DOCTYPE</b> es una etiqueta que debe escribirse antes que cualquier otra, en nuestro caso antes que la etiqueta <b><html></b>.<br />
Esta etiqueta tiene como función informarle a nuestro navegador que versión del lenguaje de marcado (HT<b>ML</b>) estamos usando, así como también proporcionarle la referencia al <b>Documento de Definición de Tipo</b> (<b>D</b>ocument <b>T</b>ype <b>D</b>efinition [<b>DTD</b>]). Este documento especifica las reglas para el lenguaje de marcado utilizado, para asé, el navegador, poder mostrar el contenido de la página correctamente.<br />
<br />
A continuación les daré los tres tipos de <b>DOCTYPE</b> para <b>HTML</b>, mas adelante veremos otros.<br />
<br />
<b>DOCTYPE para HTML 4.01 Strict</b><br />
<br />
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”><br />
<br />
<b>DOCTYPE para HTML 4.01 Transitional</b><br />
<br />
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>DOCTYPE para HTML 4.01 Frameset</b><br />
<br />
<!DOCTYPE HTML PUBLIC “-//W3C/DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”><br />
<br />
Para nuestra “home.html” utilizamos el <b>HTML 4.01 Transitional</b><br />
<br />
Ahora bien, pero ¿Por qué hay mas de uno?.<br />
La razón es muy simple, con el paso del tiempo los estándares de la <b>W3C</b> van cambiando, sin embargo, otros se mantiene.<br />
Es muy común que cosas que antes se utilizaban mucho después de un tiempo dejan de funcionar o se declaren obsoletas pero para que de pronto todas las paginas que validaban no se queden sin validar existen diferentes <b>DTD</b>.<br />
<br />
El <b>DTD</b> para <b>HTML Strict</b> es el que <b>NO</b> permite etiquetas que se hayan declarado en desuso por la <b>W3C</b>, como ejemplos de estas tenemos a <b><font></b> una etiqueta que veremos próximamente y sirve para cambiar la fuente del texto.<br />
Este tipo de etiquetas (etiquetas de estilo de párrafo) cayeron en desuso cuando la <b>W3C</b> acepto como nuevo estándar para el diseño de páginas web al <b>CSS</b>.<br />
Pero para todos aquellos que aun no habían comenzado con el <b>CSS</b> y aun poseían sus clásicas etiquetas de <b><font></b> se les recomienda utilizar el <b>DTD</b> para <b>HTML Transitional</b>. Este <b>DTD</b> lo podemos usar cuando tenemos páginas viejas y de a poco vamos introduciéndonos en los nuevos estándares, este <b>DTD</b> nos permite convivir lo nuevo con lo viejo., sin embargo no nos permite el uso de <b>Frames</b> <br />
El <b>DTD</b> para <b>HTML Frameset</b> es igual que el <b>Transitional</b> con la diferencia de que este sí permite <b>Frames</b> (<b>Marcos</b>), algo que ya es sumamente obsoleto y no gastaré tiempo en explicarlo.<br />
<br />
<hr /><br />
<b>Caracteres especiales en HTML</b><br />
<br />
En pocas palabras podemos decir que los caracteres especiales de <b>HTML</b> son aquellos que utilizamos mediante códigos.<br />
Un ejemplo de carácter especial podría ser por ejemplo “ó” (O acentuada). Parece algo trivial, sin embargo, anteriormente cuando no existían los juego de caracteres extendidos para el español debíamos utilizar los códigos específicos para <b>HTML</b> con el fin de que el navegador los entienda.<br />
Hoy mediante la utilización de <b>UTF-8</b> ya no tenemos esa clase de problemas pero de todas formas le mostraré lo siguiente:<br />
<br />
La siguiente imagen es de un <b>HTML</b> que no tiene definido el juego de caracteres a <b>UTF-8</b> vean lo que sucede cuando tratamos de utilizar acentos:</span><br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3UOk12jVyYNkRP6QJcdzbBVzSaHf3_tXBNxk4g32TPTZOXJyAcSGezoClRD23xdAq5wGczuQw6ymbmPMd9CiLRHn2YxtXF4c_litsh0sUKfHvUxObKK5iDmJDS45MkcmYEtJhuBKqWo/s1600/sincaracteres.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC3UOk12jVyYNkRP6QJcdzbBVzSaHf3_tXBNxk4g32TPTZOXJyAcSGezoClRD23xdAq5wGczuQw6ymbmPMd9CiLRHn2YxtXF4c_litsh0sUKfHvUxObKK5iDmJDS45MkcmYEtJhuBKqWo/s1600/sincaracteres.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Sin definición de caracteres<span style="font-family: "Verdana", sans-serif;"><br />
</span></td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"> Fíjense que el primer “también” sí esta acentuado mientras que el segundo y el “así” se ven de una forma extraña.<br />
<br />
Veamos el mismo ejemplo pero habiendo definido el juego de caracteres a <b>UTF-8</b></span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfHBU4K0tQKLKl6qpyDMe9C69EIMsRGUlW2leZZwq8cjIbAjgTHmNtAYOiyPOWEbKNCagtR_OKwxfn2jM4NzjXW0dRVcJmzr-alLRhMiEctp3Y3M_an-mdoCAMspCY7tX_5aQQcW274UY/s1600/concaracteres.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfHBU4K0tQKLKl6qpyDMe9C69EIMsRGUlW2leZZwq8cjIbAjgTHmNtAYOiyPOWEbKNCagtR_OKwxfn2jM4NzjXW0dRVcJmzr-alLRhMiEctp3Y3M_an-mdoCAMspCY7tX_5aQQcW274UY/s1600/concaracteres.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Con definición de caracteres</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><b> </b><br />
En este caso ambos “también” como el “así” se ven de manera correcta.<br />
<br />
Entonces ustedes me preguntarán ¿Entonces si con <b>UTF-8</b> se ven bien los acentos para que hacer este apartado?.<br />
Bueno, quizás podríamos decirle “<i>nostalgia</i>”.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Pero en fin a continuación veremos una tabla reducida, puesto que hay muchos símbolos, de los mas “populares”.<br />
Dato a tener en cuenta: cada código comienzo con “<b>&</b>” y finaliza con “<b>;</b>”.<br />
<br />
</span><br />
<table border="1"><tbody>
<tr> <th align="center">Nombre</th> <th align="center">Codigo</th> <th align="center">Simbolo</th> </tr>
<tr align="center"> <td>Copyright </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&copy; </span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">©</span> </td> </tr>
<tr align="center"> <td>Registrado</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&reg;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">®</span> </td> </tr>
<tr align="center"> <td>C Cedilla</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Ccedil;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">Ç</span> </td> </tr>
<tr align="center"> <td>c Cedilla</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&ccedil;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">ç</span> </td> </tr>
<tr align="center"> <td>A acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Aacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">Á</span> </td> </tr>
<tr align="center"> <td>a acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&aacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">á</span> </td> </tr>
<tr align="center"> <td>E acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Eacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">É</span> </td> </tr>
<tr align="center"> <td>e acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&eacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">é</span> </td> </tr>
<tr align="center"> <td>I acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Iacute</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">Í</span> </td> </tr>
<tr align="center"> <td>i acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&iacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">í</span> </td> </tr>
<tr align="center"> <td>O acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Oacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">Ó</span> </td> </tr>
<tr align="center"> <td>o acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&oacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">ó</span> </td> </tr>
<tr align="center"> <td>U acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Uacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">Ú</span> </td> </tr>
<tr align="center"> <td>u acentuada</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&uacute;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">ú</span> </td> </tr>
<tr align="center"> <td>U con diéresis</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Uuml;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">Ü</span> </td> </tr>
<tr align="center"> <td>u con diéresis</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&uuml;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">ü</span> </td> </tr>
<tr align="center"> <td>N con tilde</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&Ntilde;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">Ñ</span> </td> </tr>
<tr align="center"> <td>n con tilde</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&ntilde;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">ñ</span> </td> </tr>
<tr align="center"> <td>Menor que</td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;">&lt;</span> </td> <td><span style="font-family: "Times New Roman"; font-size: 12pt;"><</span> </td> </tr>
<tr> <td align="center">Mayor que</td> <td align="center"><span style="font-family: "Times New Roman"; font-size: 12pt;">&gt;</span> </td> <td align="center"><span style="font-family: "Times New Roman"; font-size: 12pt;">></span> </td> </tr>
</tbody></table><br />
<br />
Como pueden observar la terminación “<b>acute</b>” acentúa la vocal que este delante de ella.<br />
<br />
El “<i>Menor que</i>” y “<i>Mayor que</i>” son muy importantes puesto que si se quieren mostrar en un <b>HTML</b> no pueden usar directamente el símbolo “< ó >” por que el navegador los tomará como delimitadores de etiquetas y puede llegar a generar grandes problemas en la carga de la página, por ende, siempre que quiera utilizar el “<i>menor que</i>” o “<i>mayor que</i>” de manera tal que no funcione como delimitador de etiqueta por ejemplo “2 < 3” deben escribir en <b>HTML</b> lo siguiente:<br />
<br />
“2 &lt; 3”<br />
<br />
<br />
<hr /><br />
Y con eso llegamos al final. A continuación les daré el código fuente de la “home.html” y ustedes solos con todo lo visto anteriormente deberían ser capaces de entender.<br />
<span style="font-family: "Verdana", sans-serif;">Todo lo que explicamos hoy se utiliza dentro de el siguiente código por lo tanto si hay algo que no hayan entendido reléanlo y si aún continúan sin entender pregunten.</span><br />
<span style="font-family: "Verdana", sans-serif;"> <br />
<b>Código de “HOME”</b></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<span style="font-size: x-small;"><span style="font-family: "Verdana", sans-serif;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br />
<title>Titulo</title><br />
</head><br />
<body bgcolor="black" link="olive" vlink="red" alink="green" text="white"><br />
<table width="800" border="1"><br />
<tr><br />
<td><img src="encabezado.jpg" alt="encabezado" title="encabezado"></td> <!-- Encabezado --><br />
</tr><br />
<tr><br />
<td align="center"><p>| <a href="home.html">Home</a> | <a href="articulos.html">Art&iacute;culos</a> | <a href="yomismo.html">Quienes soy</a> | <a href="contacto.html">Contacto</a> |</p></td> <!-- Menu --><br />
</tr><br />
<tr><br />
<td><h1>Bienvenidos a Programando el Destino</h1><br><br />
<h2>El lugar donde encontraras informacion sobre el desarrollo web.</h2><br />
<p>Hemos comenzado publicando sobre <strong><acronym title="HyperText Markup Language">HTML</acronym></strong> puesto que es lo primero que se debe aprender para iniciarse en el mundo del <em>desarrollo web</em>. Sin embargo mas adelante veremos <strong><acronym title="Cascading Style Sheets">CSS</acronym></strong>, <strong><acronym title="eXtended HyperText Markup Language">XHTML</acronym></strong> y por supuerto lenguajes de programacion muy poderosos que nos permitirar agilizar tiempos de desarrollo, mejorar las prestaciones y un enorme etc de posibilidades.<br><br />
Por eso no se pierdan las futuras entradas de este <em>blog</em> por que de seguro les van a servir.<br><br />
Tambi&eacute;n he de mencionar que cualquier consulta que tenga o inconveniente en el aprendizaje con este <em>blog</em> por favor comenten puesto que así también contribuyen a mejorar este proyecto que esperemos de buenos frutos.<br><br><br />
Acompa&ntilde;ame a descubrir las maravillas del <em>desarrollo web</em> en donde el interior de "&lt;" y "&gt;" es la magia del <strong><acronym title="HyperText Markup Language">HTML</acronym></strong><br><br><br />
Y recuerden, si leen este <em>blog</em> aprender&aacute;n a dise&ntilde;ar p&aacute;ginas validadas por la <strong><abbr title="World Wide Web Consortium">W3C</abbr></strong>. <s>si leen otros blogs especializados en el tema, tal vez, tambi&eacute;n.</s><br><br><br />
Y como demostraci&oacute;n de lo que anteriormente les dije aqu&iacute; esta el "distintivo" que la w3 me di&oacute; por que mi web est&aacute; validada:<br><br><br />
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Transitional" height="31" width="88"></a><br><br></p><br />
<h4>Bueno, esto es todo por el momento. Hasta la pr&oacute;xima.<h4></td> <!-- Cuerpo --><br />
</tr><br />
<tr align="center"><br />
<td>&reg; Todos los derechos reservados - &copy; 2011</td> <!-- Pie --><br />
</tr><br />
</table><br />
</body><br />
</html></span></span><span style="font-family: "Verdana", sans-serif;"><br />
<hr /><br />
Les adjunto el código escrito en un editor de texto pues quizas, por estar tabulado, les resulte mas comodo leerlo.</span><br />
<br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7l0AvfZwiYs6QzNJywZQ4GIMeIolZabjpiDi2R3s5hy4qzchm8NOcq2yagaqq4mzVCMma6M4UrjWxY1nMBtESX6MQjiWkWCMhdgmke438vblGyMqZKtN9F7Sq9KGxOnZqsjY3OmA9kg/s1600/codigohome.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjL7l0AvfZwiYs6QzNJywZQ4GIMeIolZabjpiDi2R3s5hy4qzchm8NOcq2yagaqq4mzVCMma6M4UrjWxY1nMBtESX6MQjiWkWCMhdgmke438vblGyMqZKtN9F7Sq9KGxOnZqsjY3OmA9kg/s320/codigohome.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Código home.html</td></tr>
</tbody></table><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Por cierto antes de que me olvide, una cosita mas...</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Comentarios en HTML</b></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Para realizar un comentario en <b>HTML</b> deben utilizar la siguiente sintaxis:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><!-- Este es un comentario --></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
Es decir, para comenzar un comentario hay que utilizar "<!-- " [Menor Que - Exclamación Cerrada - Menos - Menos - Espacio ] luego todo lo que quieran que quede como comentario y finalizar de la siguiente manera " -->" [ Espacio - Menos - Menos - Mayor Que ].</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
Ahora si hasta la próxima.</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-77452716981665553862011-04-11T21:36:00.003-03:002011-06-29T23:02:12.849-03:00Programación Web - HTML (VI) - [ IMAGENES ]<span style="font-size: large;"><b><span style="font-family: "Verdana", sans-serif;">Imágenes</span></b></span><br />
<span style="font-family: "Verdana", sans-serif;"><span style="font-size: small;"><br />
Como el subtitulo lo indica el tema a tratar ahora son las <b>imágenes</b>, y buen momento elegimos para hacerlo puesto que si ya leyeron todas las entradas anteriores de este blog sobre <b>HTML</b> con esto ya pueden comenzar a hacer, casi en su totalidad, su web.</span></span><span style="font-family: "Verdana", sans-serif;">Claro que aun faltan detalles como las <b>fuentes tipográficas</b>, el tamaño, delimitar un poco mejor las tablas y un gran etc. sin embargo ya tiene bastante información como para comenzar.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Pero comencemos con lo que nos compete en este post, es decir, las <b>imágenes</b>.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Primer quiero mostrarles un ejemplo de como quedará el código que luego detallare:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIMi9tiV_POjaQ36KTENQpV0xXanRmhgy_FtF2KlkpiJ6soEp8WhjynAVe5BB5XrhDzbzM1ID8PUnNBdPt3cYqPA5WXVhanz6_lgNHhzjHDc-kf0unlmTCjgIFrzWVvY8EZDT3lj4ahk/s1600/imagenes.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="289" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWIMi9tiV_POjaQ36KTENQpV0xXanRmhgy_FtF2KlkpiJ6soEp8WhjynAVe5BB5XrhDzbzM1ID8PUnNBdPt3cYqPA5WXVhanz6_lgNHhzjHDc-kf0unlmTCjgIFrzWVvY8EZDT3lj4ahk/s320/imagenes.JPG" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Utilizando una imagen en un HTML</td></tr>
</tbody></table><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi6ZkV5L729WtygMFkjyO0rQqS1aemg4MjyhvLGqv2RpCgG-lGvDnpcpS7D34RkcYeNVUiZdnApZXArZvTlm6F6qdN6uhrvJ4ZKmtsMs-Uk8oT25PNOOYZwhF121YslWCaUmYCQlESKNeY/s1600/imagenes.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><br />
</a></div><br />
<span style="font-family: "Verdana", sans-serif;">Como pueden ver, en el documento <b>HTML</b> hemos insertado una imagen.</span><br />
<span style="font-family: "Verdana", sans-serif;">La daré a continuación la imagen utilizada por si desea practicar utilizando la misma:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQqVNze8rx0fVeeGYaYs-_Z-JdyvXhNs6TeLobQ827EZkArqX5qIJkESsM2JqxA3ayLbKzvDatGUBY_WIqyQmqx7wxIDmzjdgoCIClpkLED4qs_EArFM7BjLrm2GR4ia0tidDJEnwceQc/s1600/Dibujo.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQqVNze8rx0fVeeGYaYs-_Z-JdyvXhNs6TeLobQ827EZkArqX5qIJkESsM2JqxA3ayLbKzvDatGUBY_WIqyQmqx7wxIDmzjdgoCIClpkLED4qs_EArFM7BjLrm2GR4ia0tidDJEnwceQc/s1600/Dibujo.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Imagen de ejemplo</td></tr>
</tbody></table><br />
<span style="font-family: "Verdana", sans-serif;">Ahora si comencemos con el código del <b>HTML</b>:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para poder insertar una imagen dentro de un documento <b>HTML</b> hay que usar la etiqueta <b><img></b>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Ahora bien, solo con eso no alcanza debemos comenzar a utilizar los atributos de esa etiqueta, el primero y mas importante es "<b>src</b>" (<b>S</b>ou<b>rc</b>e/Recurso). Este <i>atributo</i> lleva como valor una ruta, ya sea <i>absoluta</i> o <i>relativa</i>, de la <b>imagen</b> en cuestión.</span><br />
<span style="font-family: "Verdana", sans-serif;">En el ejemplo de arriba utilizo una ruta relativa puesto que la <b>imagen</b> esta al lado del documento <b>HTML</b>:</span><br />
<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZ5wryqFgy6WAxHmoHppKsdRcvfSAaKR_vRoRsvg6TYX306PMAkKBASJyX8H4eUQTBr-Bs-NjNRPyvgoProiLsEOamCXpFSbD9KTvsFuo31TMuu3_P1TJ8WoVNsjYBFjcJordYSgqbuo/s1600/carpetas.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTZ5wryqFgy6WAxHmoHppKsdRcvfSAaKR_vRoRsvg6TYX306PMAkKBASJyX8H4eUQTBr-Bs-NjNRPyvgoProiLsEOamCXpFSbD9KTvsFuo31TMuu3_P1TJ8WoVNsjYBFjcJordYSgqbuo/s1600/carpetas.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">La imagen se encuentra al mismo nivel que el documento HTML</td><td class="tr-caption" style="text-align: center;"></td><td class="tr-caption" style="text-align: center;"></td><td class="tr-caption" style="text-align: center;"></td><td class="tr-caption" style="text-align: center;"></td><td class="tr-caption" style="text-align: center;"><span style="font-family: "Verdana", sans-serif;"></span></td></tr>
</tbody></table><br />
<span style="font-family: "Verdana", sans-serif;">Es decir que nuestro código queda de la siguiente manera:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><img src="Dibujo.jpg" /></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Observen la terminación de esta etiqueta, se darán cuenta que termina igual que la regla o el salto de linea, es decir, <hr /> o <br /> respectivamente.</span><br />
<span style="font-family: "Verdana", sans-serif;">Lo que me olvide de mencionar es que realmente en HTML las etiquetas son <hr>, <br> y <img>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Pero entonces ¿Por que las cierro al final?</span><br />
<span style="font-family: "Verdana", sans-serif;">La respuesta es simple, porque les estoy enseñando <b>XHTML</b> en ese caso, por que en realidad hacia allí vamos, con el paso del tiempo iré enseñándoles <b>XHTML</b> en lugar de <b>HTML</b> y todos los atributos referidos a diseño dejaran de existir para comenzar a usar <b>CSS</b>, por lo cual, les estoy enseñando de a poco hacia donde esta yendo la tecnología de desarrollo web, sin embargo, también les enseño de donde viene. Esta es la razón por la que se los enseño con " />" y cuando veamos <b>Doctype</b> veremos bien que corresponde a cada uno.</span><br />
<span style="font-family: "Verdana", sans-serif;">Por el momento acostúmbrense a usar " />" es decir [ Espacio - Barra - Mayor Que ].</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Continuemos...</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Pero no solo termina ahí nuestra linea de código, si miran con atención como se ve en el navegador notarán que la imagen tiene un recuadro negro y además su tamaño no es el original, esto se debe, a que hemos modificado la imagen mediante otros <i>atributos</i> de la etiqueta <b><img></b>.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El <b>borde</b> ya deben saber como se realiza, pero por si no lo recuerdan se los refresco, mediante el atributo "<i>border</i>", en este caso con un valor de "<i>1</i>". Por ende nuestra etiqueta queda así:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><img src="Dibujo.jpg" border="1" /></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Pero también hemos modificado el ancho y el alto de la imagen y esto se hace mediante los atributos "<b>width</b>" y "<b>height</b>", es decir, <b>ancho</b> y <b>alto</b> respectivamente.</span><br />
<span style="font-family: "Verdana", sans-serif;">En este caso hemos establecido a ambos <i>atributos</i> con un valor de "<i>200</i>" quedando nuestra etiqueta de la siguiente manera:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><img src="Dibujo.jpg" border="1" width="200" height="200" /></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ahora les enseñaré dos atributos mas que son recomendables utilizarlos siempre y estos son "<b>alt</b>" y "<b>title</b>". Veamos un ejemplo visual antes de detallarlas:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8xiyYsclethjfQFq4jSmpbajIjwBK4UsVfOIHFGzMUYppXywCLv0DYRPxGOPIuh6zxnq3nB5ueeVWNVlbqeteevcUAPRK7GLRvyR-ua2m_8ThVpc2W6FKLdPzhklG02z0o53bPwPj9M/s1600/altandtitle.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib8xiyYsclethjfQFq4jSmpbajIjwBK4UsVfOIHFGzMUYppXywCLv0DYRPxGOPIuh6zxnq3nB5ueeVWNVlbqeteevcUAPRK7GLRvyR-ua2m_8ThVpc2W6FKLdPzhklG02z0o53bPwPj9M/s1600/altandtitle.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Utilizando los atributos "alt" y "title"</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Como pueden ver, una de las imágenes no se ve y en lugar de ella hay un texto que dice "<i>descripción alternativa de la imagen</i>", en cambio, la otra imagen si se ve y tiene un <b>tooltip</b> (descripción emergente) con la leyenda "<i>es una cara feliz</i>".</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">El primer caso, es decir, la <b>imagen</b> que no se ve utiliza el atributo "<b>alt</b>" este es un <b>texto alternativo</b> que se muestra cuando la imagen no puede ser cargada o es leído por el sistema operativo en caso de que este esté configurado, por ejemplo, para personas no videntes que escucharán este texto alternativo.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Su sintaxis es la siguiente: </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><img src="imagen.jpg" alt="</span><span style="font-family: "Verdana", sans-serif;">descripción alternativa de la imagen</span><span style="font-family: "Verdana", sans-serif;">" /></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;">En el segundo caso tenemos un cuadro emergente sobre la <b>imagen</b> con un <b>texto descriptivo</b>, este aparecerá cuando el usuario pose su mouse sobre la <b>imagen</b> y lo deje sobre ella por unos segundos.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Su sintaxis es la siguiente:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><img src="Dibujo.jpg" title="</span><span style="font-family: "Verdana", sans-serif;">es una cara feliz"</span><span style="font-family: "Verdana", sans-serif;"> /></span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;">Bien, hay algunos <i>atributos</i> mas, pero los iremos viendo mas adelante en caso de necesitarlos, por el momento dejamos acá sin antes mencionar o mejor dicho recordar, si es que ya lo escribí antes, que las etiquetas <b><img></b> deben tener siempre los atributos "<b>alt</b>" y "<b>title</b>", no es una "<i>obligación</i>" pero si es una buena practica ya que los necesitaremos en un futuro para poder <b>validar</b> nuestros <b>HTML</b>.</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;">Y ahora sí hasta acá llegamos, en la próxima entrega comenzaremos a mezclar diferentes elementos del <b>HTML</b> con el objetivo de crear una "<b>home</b>".</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-84837857748491900882011-04-11T18:32:00.004-03:002011-06-29T23:02:37.589-03:00Programación Web - HTML (V) - [ ATRIBUTOS ]<div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><b><span style="font-size: large;">Atributos</span></b></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><b><span style="font-size: large;"> </span></b><br />
Como pueden leer en el titulo en esta entrada del blog nos dedicaremos exclusivamente a la aplicación de atributos a diferentes etiquetas del <b>HTML</b>.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Como anteriormente dije los atributos son "</span><span style="font-family: "Verdana", sans-serif;"><i>propiedades</i></span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> que tienen las etiquetas y al especificarle un valor distinto al por defecto podremos mejorar la estética, maquetado, diseño, etc. de una página web.<br />
Un ejemplo de atributo pueden verlo en la parte de las tablas cuando establecimos al atributo "<i>border</i>" el valor "<i>1</i>".</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Debo aclarar de antemano que muchas de las cosas que veremos a continuación han caído en desuso, sin embargo, es necesario que las conozcan puesto que servirá para que estén preparados por si algún día se enfrentan con un <b>HTML</b> que fue creado hace mucho tiempo.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Comencemos…</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
<b>Atributos para la etiqueta Body</b></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><b> </b><br />
La etiqueta <body> tiene ciertos atributos que permiten definir por ejemplo el <b>color de fondo</b>, el <b>color del texto</b> y el <b>color de los </b><b>links</b> de todo el documento.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Para definir el color de fondo del documento <b>HTML</b> que estamos editando debemos utilizar el atributo "<b>bgcolor</b>". Este atributo puede recibir valores de tres formas posibles a saber:<br />
Mediante un código de color <b>RGB</b>, mediante un código de color en <b>Hexadecimal</b> o mediante el <b>nombre de un color</b> preestablecido. Ejemplo:</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Para que el <b>color de fondo</b> del documento sea Rojo tenemos tres formas de hacerlo:</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
En <b>Hexadecimal</b>: <body bgcolor="#FF0000"><br />
En <b>RGB</b>: <body bgcolor="rgb(255,0,0)"><br />
Por el <b>Nombre</b>: <body bgcolor="red"></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Al igual que el fondo, de la misma manera se puede establecer el color que tendrá el texto dentro de documento <b>HTML</b>. Esto se hace mediante el atributo </span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"><b>text</b></span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> y su valor, al igual que en </span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"><b>bgcolor</b></span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">, se puede escribir de tres formas distintas.<br />
Supongamos que quiero que el color del texto sea blanco para qué contraste con el color rojo de fondo el código quedaría de la siguiente manera:</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
En <b>Hexadecimal</b>: <body bgcolor="</span><span style="font-family: "Verdana", sans-serif;">#FF0000</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> text=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">#FFFFFF</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">><br />
En <b>RGB</b>: <body bgcolor=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">rgb(255,0,0)</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> text=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">rgb(255,255,255)</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">><br />
Por el <b>Nombre</b>: <body bgcolor=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">red</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> text=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">white</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">></span></div><div class="MsoNormal"><br />
<span style="font-family: "Verdana", sans-serif;">Otros posibles nombre de colores:</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Red – Pink – Yellow – Gold – Purple – LightGreen – Green – Olive – Blue – DarkBlue – Navy – Brown – White – Silver – Gray – Black.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Existen muchos más, sin embargo, estos son los más utilizados.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Ejemplo visual de una página con fondo rojo y color de texto blanco:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUvbISonMTLgJ2s54TQtz3ha2kESc85dsq4z4bcGjMro5RkcncaC3R1S5PUzpJ1wP_iegAs9nMvLsG2QfylEyTvSspogpe_SXaQ7h_Qdl3GtDbSIU3pCaGNToTe3h6tZV-3CKFJHLaN4/s1600/fondotexto.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLUvbISonMTLgJ2s54TQtz3ha2kESc85dsq4z4bcGjMro5RkcncaC3R1S5PUzpJ1wP_iegAs9nMvLsG2QfylEyTvSspogpe_SXaQ7h_Qdl3GtDbSIU3pCaGNToTe3h6tZV-3CKFJHLaN4/s1600/fondotexto.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Fondo en Rojo y Texto en Blanco</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"> <hr /><b>Definición de los colores de los Links de una página web.</b></span><br />
</div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><b> </b><br />
Como ya se habrán dado cuenta, los <b>links</b> en una página web tienen varios colores dependiendo de factores como ser: <b>Link visitado</b>, <b>Link no visitado</b>, <b>Link activo</b>.<br />
Este arcoíris de colores puede ser alterado mediante tres atributos que se definen en el <body> estos son: <b>alink</b> (<b>L</b>ink <b>A</b>ctivo), <b>link</b> (<b>L</b>ink no visitado), <b>vlink</b> (<b>L</b>ink <b>V</b>isitado).<br />
Al igual que los otros dos atributos de <body> la manera de establecerle un valor a los atributos de <b>links</b> es mediante un código hexadecimal, rgb o nombre de color.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
El siguiente ejemplo establece que los links no visitados son verdes, los visitados son rojos y el activo gris. Veamos el código de esto:</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
<body link=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">green</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> vlink=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">red</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> alink=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">gray</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">><br />
<br />
Así se ve en un navegador:</span></div><div class="MsoNormal"><br />
</div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTap0_Ew9rX42U9dN80OO_hsNP55IN-oXsqA9Fz6sFdfkKly3kTX_Q-jPLrOl_JEp5eRHvphC5C4Q4t1kHedHhwcq20_27ZYBjRzNNfJ31CNngFSV-_gPHdGjs4YHKZW5VX7E1qQXmM-Q/s1600/Links.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTap0_Ew9rX42U9dN80OO_hsNP55IN-oXsqA9Fz6sFdfkKly3kTX_Q-jPLrOl_JEp5eRHvphC5C4Q4t1kHedHhwcq20_27ZYBjRzNNfJ31CNngFSV-_gPHdGjs4YHKZW5VX7E1qQXmM-Q/s1600/Links.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Utilizando los Atributos alink, vlink y link</td></tr>
</tbody></table><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><i>Pagina</i> y <i>Pagina2</i> son <b>links visitados</b>, <i>Pagina3</i> es un <b>link no visitado</b> y <i>Pagina50</i> es el <b>Link</b> en el cual el usuario esta clickeando, es decir, el <b>Link activo</b>.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
A parte de la forma que utilizamos (que es mediante el nombre de color) existen dos formas más de escribir lo mismo:</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
<b>Hexadecimal</b>: <body link=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">#008000</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> vlink=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">#FF0000</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> alink=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">#808080</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">><br />
<b>RGB</b>: <body link=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">rgb(0,128,0)</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> vlink=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">rgb(255,0,0)</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> alink=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">rgb(128,128,128)</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;">Aclaración: </span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">Link Activo</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"> se denomina cuando el usuario clickea sobre un link y mantiene presionado el botón del mouse, este se pondrá del color que se definió en vlink, sin embargo desaparecerá cuando suelte el click.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
</span></div><hr /><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><b>Imagen de fondo para un HTML</b></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><b> </b><br />
Finalmente llegamos al atributo </span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;"><i><b>background</b></i></span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">, este atributo permite definir como fondo del documento a una imagen específica.<br />
Su sintaxis es la siguiente:</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"><body background=</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">fondotexto.jpg</span><span style="font-family: "Verdana", sans-serif;">"</span><span style="font-family: "Verdana", sans-serif;">></span></div><div class="MsoNormal"><br />
</div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"></span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"></span></div><table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqvcq6FmZW9LSNCBYF94ILEe1bt6Hb4WN-T3QzeU7NwTgu_6wrXxhk94oiMrEdBHOVD9MflZno_Jqr8_mF0A8BqPPytVEHuv7n4gkrclv_w6Mo1hX1hFSfGg6wkskKSIY4EbmSKeN7U8/s1600/background.jpg" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrqvcq6FmZW9LSNCBYF94ILEe1bt6Hb4WN-T3QzeU7NwTgu_6wrXxhk94oiMrEdBHOVD9MflZno_Jqr8_mF0A8BqPPytVEHuv7n4gkrclv_w6Mo1hX1hFSfGg6wkskKSIY4EbmSKeN7U8/s1600/background.jpg" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Utilizando el Atributo Background</td></tr>
</tbody></table><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;">En este caso utilizamos como imagen de fondo a una imagen utilizada más arriba en el post.</span></div><div class="MsoNormal"><span style="font-family: "Verdana", sans-serif;"><br />
Hasta acá llegamos por ahora, en la próxima entrega seguiremos viendo mas atributos.</span><b style="mso-bidi-font-weight: normal;"><br />
</b></div>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-48285482333238403222011-04-09T21:39:00.003-03:002011-06-29T23:02:49.885-03:00Programación Web - HTML (IV) - [ LISTAS ]<span style="font-family: "Verdana", sans-serif;"><b><span style="font-size: large;">Listas ordenadas, desordenadas, etc.</span></b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">En <b>HTML</b> tenemos unas etiquetas que nos permiten definir <b>listas</b> de elementos.</span><br />
<span style="font-family: "Verdana", sans-serif;">Estas tienen un sin fin de utilidades y muchas veces se las utilizan con <b>anclas</b>, como si fuesen submenues de la misma pagina que se esta viendo, algo así como un cuadro de contenido.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Veamos un ejemplo:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtr3-VFfFeJgMAR5Xjc0ZTjrMGidkWO88bqG7kuKh6Zcm2iBGu5vEKmahlOZhKM7ZldPJthDKc2m8rO6GAtaxe-i-EWtaGTRSJ-RJjRNAM2EipQPZpEQBAyiXtjZ8_aWaozKExM0NdJY4/s1600/listas.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtr3-VFfFeJgMAR5Xjc0ZTjrMGidkWO88bqG7kuKh6Zcm2iBGu5vEKmahlOZhKM7ZldPJthDKc2m8rO6GAtaxe-i-EWtaGTRSJ-RJjRNAM2EipQPZpEQBAyiXtjZ8_aWaozKExM0NdJY4/s1600/listas.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Diferentes tipos de Listas en HTML</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Como puede observarse en la imagen existen varios tipos de <b>listas</b>.</span><br />
<span style="font-family: "Verdana", sans-serif;">La primera se denomina <b>lista sin orden</b> o <b>lista desordenadas</b>, la segunda se denomina <b>lista ordenada </b>y finalmente la tercera se denomina <b>lista de definición</b>.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">El código de la primer lista es el siguiente:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Lista Desordenada:</b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><ul></span><br />
<span style="font-family: "Verdana", sans-serif;"> <li>Elemento 1</li> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <li>Elemento 2</li></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <li>Elemento 3</li></span><br />
<span style="font-family: "Verdana", sans-serif;"></ul> </span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Como puede verse hay una etiqueta que funciona como grupo que es el <ul> (<b>U</b>nordered <b>L</b>ist) y dentro cada elemento se determina con un <li> (<b>L</b>ist <b>I</b>tem)</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">El código de la segunda lista es el siguiente:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Lista Ordenada:</b></span><br />
<br />
<br />
<span style="font-family: "Verdana", sans-serif;"><ol></span><br />
<span style="font-family: "Verdana", sans-serif;"> <li>Elemento 1</li> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <li>Elemento 2</li></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <li>Elemento 3</li></span><br />
<span style="font-family: "Verdana", sans-serif;"></ol> </span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Como puede verse hay una etiqueta que funciona como grupo que es el <ol> (<b>O</b>rdered <b>L</b>ist) y dentro cada elemento se determina con un <li> </span><span style="font-family: "Verdana", sans-serif;">(<b>L</b>ist <b>I</b>tem)</span><br />
<span style="font-family: "Verdana", sans-serif;">A diferencia de la lista desordenada esta lista posee al lado de cada elemento un numero correlativo que las mantiene ordenadas.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">El código de la tercer lista es el siguiente:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Lista de Definición:</b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><dl></span><br />
<span style="font-family: "Verdana", sans-serif;"> <dt>Termino 1</dt></span><br />
<span style="font-family: "Verdana", sans-serif;"> <dd>Definicion 1</dd></span><br />
<span style="font-family: "Verdana", sans-serif;"> <dt>Termino 2</dt> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <dd>Definicion 2</dd></span><br />
<span style="font-family: "Verdana", sans-serif;"></dt> </span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">La lista de definición es utilizada para definir diferentes términos como podría hacerlo un diccionario.</span><br />
<span style="font-family: "Verdana", sans-serif;">Para utilizarlas primero debemos agruparlas dentro de un <dl> (<b>D</b>efinition <b>L</b>ist). Cada termino a definir va dentro de un <dt> (<b>D</b>efinition <b>T</b>erm) y a su vez cada descripción va dentro de un <dd> (<b>D</b>efinition <b>D</b>escription).</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Símbolos delante de las Listas</b></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Lo que veremos a continuación ya ha caído en desuso sin embargo como aun no veremos <b>CSS</b> se los explicaré para darle mas estilo a las listas.</span><br />
<span style="font-family: "Verdana", sans-serif;">Tanto las <b>listas ordenadas</b> <ol> como las <b>listas desordenadas</b> <ul> poseen un atributo llamado "Type" que permiten determinar el símbolo que representará a cada elemento. A continuación veremos unos ejemplos para las <b>listas ordenadas</b>:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhyIfBRKO_lshwOROvECCL4LLREoOLzQlBmHiGZSUIyERRLaEjJjQGhowG6V-CV9xm4J9DpOSWzBNaRmgHa4AeRL6OcAIhkD_1BlYhPHoeuANE2bdL6zFaX3Vwe2ToJUu8IjUbIn5IUY/s1600/listasordenadas.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUhyIfBRKO_lshwOROvECCL4LLREoOLzQlBmHiGZSUIyERRLaEjJjQGhowG6V-CV9xm4J9DpOSWzBNaRmgHa4AeRL6OcAIhkD_1BlYhPHoeuANE2bdL6zFaX3Vwe2ToJUu8IjUbIn5IUY/s320/listasordenadas.JPG" width="112" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Símbolos en Listas Ordenadas</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Como puede verse hay distintos tipos de símbolos a continuación veremos los códigos respectivos:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">A la etiqueta <ol> debe anexarse el atributo "<i>type</i>" quedando de la siguiente forma:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><ol type=""></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Dentro de las comillas ("") debe escribirse el valor que tendrá el atributo a saber:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para que el orden sea dado por <b>números</b> (1,2,3...) debe usarse el valor "1" [Este es el default, de quererlo no es necesario usar el Type] .</span><br />
<span style="font-family: "Verdana", sans-serif;">Para que el orden sea dado por <b>letras mayúsculas</b> (A,B,C...) debe usarse el valor "A". </span><br />
<span style="font-family: "Verdana", sans-serif;">Para que el orden sea dado por <b>letras minúsculas</b> (a,b,c...) debe usarse el valor "a". </span><br />
<span style="font-family: "Verdana", sans-serif;">Para que el orden sea dado por <b>números romanos</b> [en mayúscula] (I,II,III...) debe usarse el valor "I". </span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;">Para que el orden sea dado por <b>números romanos</b> [en minúscula] (i,ii,iii...) debe usarse el valor "i". </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ejemplos:</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Números</b>: <ol type="1"></span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Letras Mayúsculas</b>: <ol type="A"></span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Letras Minúsculas</b>: <ol type="a"> </span><br />
<span style="font-family: "Verdana", sans-serif;"><b>N. Romanos Mayus</b>: <ol type="I"> </span><br />
<span style="font-family: "Verdana", sans-serif;"><b>N. Romanos Minus</b>: </span><span style="font-family: "Verdana", sans-serif;"> <ol type="i"></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ahora bien, las <b>l</b><b>istas desordenadas</b> también pueden tener sus propios símbolos, veamos un ejemplo visual para luego aprender el código:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOO1zu2lCBTrD0Mp1umvkUbHUPzdcw6twtCMXiJ23h17t_btZAKG1vhR5dJdi9DGEQ9P2pE1Pe0Y_bl7lqvg2zLN4B69HHb-QOzVFSEURTZIkGSR60idQd_o0guTE-wOc9NwQVV_DBAE/s1600/listasdesordenadas.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkOO1zu2lCBTrD0Mp1umvkUbHUPzdcw6twtCMXiJ23h17t_btZAKG1vhR5dJdi9DGEQ9P2pE1Pe0Y_bl7lqvg2zLN4B69HHb-QOzVFSEURTZIkGSR60idQd_o0guTE-wOc9NwQVV_DBAE/s1600/listasdesordenadas.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Símbolos en Listas Desordenadas</td></tr>
</tbody></table><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Como se puede ver las <b>listas desordenadas</b> tienen menos valores posibles sin embargo para lo que representan son bastante pintorescos.</span><br />
<span style="font-family: "Verdana", sans-serif;">Veamos el código en <b>HTML</b> para cada caso:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">A la etiqueta <ul> debe anexarse el atributo "<i>type</i>" quedando de la siguiente forma:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><ul type=""></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Dentro de las comillas ("") debe escribirse el valor que tendrá el atributo a saber:</span><br />
<span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;">Para que los símbolos sean <b>círculos llenos</b> debe usarse el valor "disc" [Este es el default, de quererlo no es necesario usar el Type] .</span><br />
<span style="font-family: "Verdana", sans-serif;">Para que </span><span style="font-family: "Verdana", sans-serif;">los símbolos sean </span><span style="font-family: "Verdana", sans-serif;"> <b>cuadrados llenos</b> debe usarse el valor "square". </span><br />
<span style="font-family: "Verdana", sans-serif;">Para que </span><span style="font-family: "Verdana", sans-serif;">los símbolos sean</span><span style="font-family: "Verdana", sans-serif;"> <b>círculos vacíos</b> debe usarse el valor "circle". </span><br />
<br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ejemplos:</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Círculos Llenos</b></span><span style="font-family: "Verdana", sans-serif;">: <ul type="disc"></span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Cuadrados Llenos</b>: <ul type="square"></span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Círculos vacíos</b></span><span style="font-family: "Verdana", sans-serif;">: <ul type="circle"> </span><br />
<span style="font-family: "Verdana", sans-serif;"><b><br />
</b></span><br />
<span style="font-family: "Verdana", sans-serif;">Bien hasta aquí llegamos con las <b>listas</b>, continuaremos la próxima entrega con nuevos y viejos temas del universo <b>HTML</b>.</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-30720674590570605372011-04-09T17:54:00.004-03:002011-06-29T23:03:00.085-03:00Programación Web - HTML (III) - [ LINKS ]<span style="font-family: "Verdana", sans-serif;"><b><span style="font-size: large;">Links y más Tablas</span></b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Como mencioné anteriormente aún queda mucho que decir con respecto a los <b>Links</b> y las Tablas y por ello dedicaré esta tercer entrega de <b>HTML</b> a este tema.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Los <b>Links</b> dentro de un <b>HTML</b> son uno de los elementos esenciales por que permiten asociar e informar al navegador a donde tiene que ir buscar el documento <b>HTML</b> para mostrar la información que el usuario requiere.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Por lo cual debemos aclarar que existen 2 formas de utilizar los <b>links</b> y esto son "<b>Links Relativos</b>" o "<b>Links Absolutos</b>".</span><br />
<span style="font-family: "Verdana", sans-serif;">Generalmente los mas usados son los relativos puesto que se utilizar para llamar a documentos <b>HTML</b> dentro del mismo servidor, mientras que los absolutos son <b>links</b> completos de direcciones de web.</span><br />
<span style="font-family: "Verdana", sans-serif;">Pero basta de palabras y vamos con ejemplos:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Supongamos que nosotros tenemos la siguiente distribución de archivos:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Así es como ustedes deberían tener su web (o al menos es lo recomendable).</span><br />
<span style="font-family: "Verdana", sans-serif;">Como pueden ver al mismo nivel que el archivo "Index" existen otros como "Empresa", "Productos", etc.</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnVE7DiFnhqVbxvON-vZWCkmdmlqmbVtyb3fDlEbtuqvR2pjVTrEfalOcgf5t2Q4vN7FvikenqnXg6snACJBmAOOzOnPh1VHe1B4YpZQrJ86rnU1ue66gx1VjXBtasBJ165Wg55faxbM/s1600/carpetas.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHnVE7DiFnhqVbxvON-vZWCkmdmlqmbVtyb3fDlEbtuqvR2pjVTrEfalOcgf5t2Q4vN7FvikenqnXg6snACJBmAOOzOnPh1VHe1B4YpZQrJ86rnU1ue66gx1VjXBtasBJ165Wg55faxbM/s320/carpetas.JPG" width="320" /></a></div><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Aclaración principal: El archivo "index.html" es el archivo que se muestra cuando uno ingresa a una página (en realidad depende del servidor en donde se "instale" la web puesto que algunos requieren de un archivo llamado "home.html". Por lo cual deben verificar que solicita su server para que la gente pueda ingresar a su web [Mas adelante detallare todo este tema, por el momento solo lo menciono]).</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Lo que haré a continuación es crear una <b>tabla</b> de <b>links</b> hacia todos los elementos de esta web:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><html></span><br />
<span style="font-family: "Verdana", sans-serif;"> <head></span><span style="font-family: "Verdana", sans-serif;"><br />
<title>Links</title> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </head> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <body></span><br />
<span style="font-family: "Verdana", sans-serif;"> <table border="1"></span><br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> <td><a href="index.html">Index</a></td> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <td><a href="empresa.html">Empresa</a></td> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><td><a href="productos.html">Productos</a></td> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><td><a href="contacto.html">Contacto</a></td> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><td><a href="http://www.programandoeldestino.blogspot.com">Programando el Futuro</a></td> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"></tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> </table></span><br />
<span style="font-family: "Verdana", sans-serif;"> </body></span><br />
<span style="font-family: "Verdana", sans-serif;"></html> </span><span style="font-family: "Verdana", sans-serif;"></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Visualmente queda así:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNG7Us-Qfqx50D0QW4vBDhJ5sFKSiCrCVa_N6vkQbiEYxP_6uHxcfC7cL5iXN7aOay0C0WTZOuNmDf7F7cm3W_SUqju2cQxU530QI_Nx2Mrskj2_bDEyRhUJR2xIY86S3WjXM0GzRvWfg/s1600/links.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="34" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNG7Us-Qfqx50D0QW4vBDhJ5sFKSiCrCVa_N6vkQbiEYxP_6uHxcfC7cL5iXN7aOay0C0WTZOuNmDf7F7cm3W_SUqju2cQxU530QI_Nx2Mrskj2_bDEyRhUJR2xIY86S3WjXM0GzRvWfg/s320/links.JPG" width="320" /></a></div><br />
<span style="font-family: "Verdana", sans-serif;">En este ejemplo vemos los dos tipos de <b>links</b>.</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Links Relativos</b>: Son los dirigidos a index.html, empresa.html, productos.html y contacto.html</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Links Absolutos</b>: Es el dirigido a http://www.programandoeldestino.blogspot.com</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Como pueden ver los <b>links</b> <b>relativos</b> son mucho mas cortos, esto se debe a que omiten el <i>protocolo</i> y el <i>servidor</i>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Esto se debe a que el navegador entiendo que se refiere a un <b>link relativo</b> cuando carece de estas características y toma automáticamente las del sitio actual. Es decir, que si estoy dentro de mi sitio "http://www.misitio.com" visualizando la pagina index.html y el <b>link</b> es hacia empresa.html y el código será <a href="empresa.html"> y el navegador tomará el <i>protocolo</i> (http) y el <i>servidor</i> (www.misitio.com) del sitio actual donde está navegando.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">En cambio al encontrarse con "</span><span style="font-family: "Verdana", sans-serif;">http://www.programandoeldestino.blogspot.com" redirige directamente al servidor determinado con el protocolo establecido en el <b>link</b>.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Los links pueden tener mas partes ademas de protocolo y servidor, estos son "<b>ruta</b>", "<b>c</b><b>onsulta/parámetro</b>" y "<b>sección</b>".</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Quizás en un comienzo no necesitemos de ellos pero esta bien mencionarlos.</span><br />
<span style="font-family: "Verdana", sans-serif;">Los links con ruta permiten especificar dentro de un sitio un archivo determinado a mostrar por ejemplo: http://www.misitio.com/empresa.html.</span><br />
<span style="font-family: "Verdana", sans-serif;">La "<b>ruta</b>" del link es "/empresa.html" puesto que si nosotros solo escribimos "</span><span style="font-family: "Verdana", sans-serif;">http://www.misitio.com" iremos a "index.html" en cambio de la manera del ejemplo iremos directamente al archivo "empresa.html", practico y simple.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">La "<b>consulta/parámetro</b>" es utilizada con lenguajes de programación mas complejos como puede ser un <b>php</b>, <b>asp</b>, etc. Un ejemplo podría ser:</span><br />
<span style="font-family: "Verdana", sans-serif;">http://www.misitio.com/productos.php?id=12</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;">Como pueden observar luego de la extensión ".php" esta escrito lo siguiente "?id=12" esto significa que la "<i>variable</i>" id tiene el valor de "12". Esto es muy utilizado en programación web pero para el <b>HTML</b> no se explota demasiado.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Por último la "<b>sección</b>" si se utiliza en <b>HTML</b> y funciona con <b>anclas</b>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Lo que permiten hacer estos <b>links</b> es dirigir al usuario a un sector determinado de un documento <b>HTML</b> en lugar de cambiar de documento.</span><br />
<span style="font-family: "Verdana", sans-serif;">Ejemplo:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><html><br />
<head><br />
<title>Links Anclas</title><br />
</head><br />
<body><br />
<a href="#ancla1">Ancla 1</a><br />
<a href="#ancla2">Ancla 2</a><br />
<a href="#ancla3">Ancla 3</a><br />
<br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><a name="ancla1"><h2>Ancla 1</h2></a><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><p>Aqui esta el Ancla 1</p><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /></span><span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><hr /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><a name="ancla2"><h2>Ancla 2</h2></a><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><p>Aqui esta el Ancla 2</p></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><hr /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><a name="ancla3"><h2>Ancla 3</h2></a><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><p>Aqui esta el Ancla 3</p><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br /><br />
</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><hr /><br />
</body><br />
</html></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Primero necesito aclarar dos nuevas etiquetas "<br />" y "<hr />"</span><br />
<span style="font-family: "Verdana", sans-serif;">"<b>BR</b>" es salto de linea mientras que "<b>HR</b>" es una regla horizontal. La terminación " />" [Espacio Barra Mayor Que] se debe a que son etiquetas únicas que no se abren y cierra, solo se utilizan una vez y se cierran cuando se las usa de esa manera, es decir, en lugar de que exista "<hr></hr>" solo se utiliza "<hr />" o sea abre y cierra.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Este ejemplo será mas visual si cuantos mas <br /> o texto haya entre cada Ancla.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ahora bien, las anclas cuentas de dos partes la primera un <b>link</b> con el nombre y por otra parte un <b>link</b> convocando al <b>ancla</b>.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">En el ejemplo el <b>link</b> </span><span style="font-family: "Verdana", sans-serif;"><a href="#ancla1"> significa para el navegador "ve al sector donde esté el ancla1" y el link </span><span style="font-family: "Verdana", sans-serif;"><a name="ancla1"> significa "acá esta el ancla1".</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">En conclusión para determinar donde esta el <b>ancla</b> se utiliza el atributo "<i>name</i>" y para llamar a un <b>ancla</b> por su nombre se utiliza el atributo "<i>href</i>" siempre iniciado con el numeral(#) continuado del nombre del <b>ancla</b> ("#nombreancla).</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Así queda visualmente las <b>anclas</b>:</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoCJQSiwWv6enyRe6CbjcTyljowfgw_T2MMyWD9jT3YB-ybqHzXFTGj8GvnfKvTaMagOQpexHKD7dTzpvijZMKnmthnuyVuQOY51dRpiiEbatjLorFjPDcmimipe6AW0y-c-tgzcx4i0/s1600/anclas.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBoCJQSiwWv6enyRe6CbjcTyljowfgw_T2MMyWD9jT3YB-ybqHzXFTGj8GvnfKvTaMagOQpexHKD7dTzpvijZMKnmthnuyVuQOY51dRpiiEbatjLorFjPDcmimipe6AW0y-c-tgzcx4i0/s320/anclas.JPG" width="207" /></a></div><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para que el efecto del <b>ancla</b> funcione utilicen mas <br /> o inserten mas texto entre cada <b>ancla</b> o en su defecto achiquen el tamaño de su navegador para que no llegue a verse toda la pagina, para así observar como se posiciona la pagina dependiendo del <b>ancla</b> que se elija.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;">Si desean <b>anclar</b> un <b>link</b>, es decir, que cuando el usuario clickee en él vaya directamente a un sector determinado de la pagina el código es el siguiente:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"><a href="empresa.html#nuestraempresa">Nuestra Empresa</a></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;">Una vez que el usuario clickee sobre "Nuestra Empresa" el navegador irá a ese archivo <b>HTML</b> y se ubicará en el sector que tenga un <b>ancla</b> cuyo valor "<i>name</i>" sea "nuestraempresa", ejemplo:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"><a name="nuestraempresa">Nuestra Empresa</a></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;">Eso es todo, hasta la próxima entrega.</span><span style="font-family: "Verdana", sans-serif;"></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-45099094494832637392011-04-09T01:48:00.002-03:002011-06-29T23:03:09.604-03:00Programación Web - HTML (II) - [ TABLAS ]<div align="left" class="separator" style="clear: both; text-align: center;"><span style="font-family: "Verdana", sans-serif;"><br />
</span></div><span style="font-family: "Verdana", sans-serif;">Continuemos con el aprendizaje...</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ahora veremos un elemento de HTML que fue fundamental en el desarrollo web y que actualmente tomo su correspondiente lugar, pequeño a comparación de su anterior utilización pero muy muy importante.</span><br />
<span style="font-family: "Verdana", sans-serif;">Estas son las Tablas que anteriormente se utilizaron para maquetar documentos HTML (hay gente que aun sigue utilizándolas) pero realmente debe ser utilizadas como un elemento de organización de información basándose en filas y columnas y no como un elemento maquetador.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Un ejemplo de una buena utilización de las tablas es para mostrar las notas de un alumno en los diferentes periodo de clase. Vamos a realizar ese ejemplo:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><b>Tablas en HTML</b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para que una tabla se muestre como tal (Conjunto de filas y columnas) se necesitan 3 etiquetas anidadas, estas son <table>, <tr> y <td> (existe otra que la veremos en el ejemplo).</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para que los navegadores entiendan que utilizaremos una tabla debemos comenzar la introducción con la etiqueta <table> y finalizarla con </table>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Para dibujar una Fila debemos utilizar las etiquetas <tr></tr>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Para dibujar una Celda debemos utilizar las etiquetas <td></td></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Dicho esto haremos el ejemplo de las notas del alumno:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><table></span><br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> <th>1 Trimestre</th></span><br />
<span style="font-family: "Verdana", sans-serif;"> <th>2 Trimestre</th> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"> <th>3 Trimestre</th></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> <td>10</td></span><br />
<span style="font-family: "Verdana", sans-serif;"> <td>08</td> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"> <td>09</td></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><br />
<span style="font-family: "Verdana", sans-serif;"></table> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">En el ejemplo puede verse una etiqueta que no fue explicada, esta es la <th> que es similar al <td> con una diferencia, la etiqueta <th> se usa como Celda de encabezado de table, esto hace que por default aparezca en negrita haciendo mas visible a los mismos.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Así quedará el código para poder verlo en un navegador:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><html></span><br />
<span style="font-family: "Verdana", sans-serif;"> <head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <title>Tablas</title></span><br />
<span style="font-family: "Verdana", sans-serif;"> </head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <body> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <h1>Tabla de Promedios</h1></span><br />
<span style="font-family: "Verdana", sans-serif;"> <h2>Alumno: NombreAlumno</h2> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"> <table></span><br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> <th>1 Trimestre</th></span><br />
<span style="font-family: "Verdana", sans-serif;"> <th>2 Trimestre</th> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"> <th>3 Trimestre</th></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> <td>10</td></span><br />
<span style="font-family: "Verdana", sans-serif;"> <td>08</td> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"> <td>09</td></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </table> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </body></span><br />
<span style="font-family: "Verdana", sans-serif;"></html> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Visualmente se ve así:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5z08DwixGrRmw4A5N67OpPeM4tjbcDJ150G51w2n9lKt3PVjBGw-NgZryMUP8Fs5r0y5AU80Wi64sk1vNkgunb51vRMhA3_olnVj9WVU-9kZWQb0ZqgUk_HmAJ66FLRww5LZeSx5AMsc/s1600/tablas.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5z08DwixGrRmw4A5N67OpPeM4tjbcDJ150G51w2n9lKt3PVjBGw-NgZryMUP8Fs5r0y5AU80Wi64sk1vNkgunb51vRMhA3_olnVj9WVU-9kZWQb0ZqgUk_HmAJ66FLRww5LZeSx5AMsc/s1600/tablas.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tabla Básica</td></tr>
</tbody></table><br />
<span style="font-family: "Verdana", sans-serif;">Ahora bien, la tabla no parece realmente una tabla puesto que faltan sus delimitadores, para ello comenzaremos a utilizar los "atributos" estos se escriben detro de las etiquetas y tiene asignado un valor.</span><br />
<span style="font-family: "Verdana", sans-serif;">A continuación estableceremos que la tabla anteriormente utilizada tendrá un borde de 1 px lo que permitirá visualizar sus limites.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Solo hay que escribir dentro de la etiqueta <table> lo siguiente:</span><br />
<span style="font-family: "Verdana", sans-serif;">border="1" </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Quedando la etiqueta de la siguiente manera:</span><br />
<span style="font-family: "Verdana", sans-serif;"><table border="1"></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Lo que aquí establecemos es que el atributo o propiedad "border" tendrá el valor "1". Los valores siempre deben escribirse entre comillas ("").</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Resultado visual:</span><br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1rEc5LTon-yNVSxUzS_81RPd3rGlozpPKCZbzftSO7iKhCQYqVlPgZ4I4ZYURMM3_gCdNww4F4rltO9FF5UrS8J9Vb_qxjHHxcMBHJuOVVTAYOSguoVZTOyAjkfaFfoPQ60cJdHD_WA/s1600/tablas2.JPG" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht1rEc5LTon-yNVSxUzS_81RPd3rGlozpPKCZbzftSO7iKhCQYqVlPgZ4I4ZYURMM3_gCdNww4F4rltO9FF5UrS8J9Vb_qxjHHxcMBHJuOVVTAYOSguoVZTOyAjkfaFfoPQ60cJdHD_WA/s1600/tablas2.JPG" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Tabla con Bordes</td></tr>
</tbody></table><br />
<span style="font-family: "Verdana", sans-serif;">Ahora si parece una tabla... </span><br />
<br />
<hr /><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;"><b>Maquetar un HTML con la manera antigua (mediante Tablas)</b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Aclaración: Esto ya no debe hacerse pero c</span><span style="font-family: "Verdana", sans-serif;">omo aún no los introduciré en el mundo de los Divs y del CSS (Cascading Style Sheet) les mostraré como maquetar un HTML de la manera tradicional, es decir, Encabezado, Menú, Cuerpo y Pie.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para poder hacer eso necesitamos una tabla con 4 filas cada una tendrá una porción del diseño.</span><br />
<span style="font-family: "Verdana", sans-serif;">Dentro del sector "Encabezado" solo pondremos el Titulo de la web, mas adelante veremos como agregar una imagen para encabezados mas bonitos.</span><br />
<span style="font-family: "Verdana", sans-serif;">En el "Menu" pondremos algunos Links, esto me permitirá explicar este tema que es la base del HT es decir HyperText. </span><br />
<span style="font-family: "Verdana", sans-serif;">El "Cuerpo" llevara la información de la página que se este consultando.</span><br />
<span style="font-family: "Verdana", sans-serif;">Y finalmente el "Pie" solo llevara un copyright o algo similar.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Manos a la obra...</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><html></span><br />
<span style="font-family: "Verdana", sans-serif;"> <head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <title>Maquetacion con Tablas</title></span><br />
<span style="font-family: "Verdana", sans-serif;"> </head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <body></span><br />
<span style="font-family: "Verdana", sans-serif;"> <table border="1"></span><br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> <td><h1>Programando el Destino</h1></span><span style="font-family: "Verdana", sans-serif;"></td></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><span style="font-family: "Verdana", sans-serif;"></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><td></span><span style="font-family: "Verdana", sans-serif;"><p><a href="#">Home</a> | </span><span style="font-family: "Verdana", sans-serif;"><a href="#"></span><span style="font-family: "Verdana", sans-serif;">Articulos</span><span style="font-family: "Verdana", sans-serif;"></a></span><span style="font-family: "Verdana", sans-serif;"> | </span><span style="font-family: "Verdana", sans-serif;"><a href="#"></span><span style="font-family: "Verdana", sans-serif;">Links</span><span style="font-family: "Verdana", sans-serif;"></a></span><span style="font-family: "Verdana", sans-serif;"></p></span><span style="font-family: "Verdana", sans-serif;"></td></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><td></span><span style="font-family: "Verdana", sans-serif;"><h2>Tablas</h2></span><br />
<span style="font-family: "Verdana", sans-serif;"> <p>Las Tablas son un elemento del HTML... bla bla bla</p></span><span style="font-family: "Verdana", sans-serif;"></td></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"> <tr></span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><td></span><span style="font-family: "Verdana", sans-serif;"><h5>2011 - Todos los Derechos...</h5></span><span style="font-family: "Verdana", sans-serif;"></td></span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </tr> </span><br />
<span style="font-family: "Verdana", sans-serif;"> </table></span><br />
<span style="font-family: "Verdana", sans-serif;"> </body></span><br />
<span style="font-family: "Verdana", sans-serif;"></html> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Este documento HTMl se verá de la siguiente manera:</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEii9tkxwoJsDVBPycO7aYfKwldRBnEOHTG07G5PEVNCJ8qsqwTQ5pKk8iUO7rPrBorI4hF1sZf67pv8pfdGnh73S6XkJVFEyRwhJkv4MProe6jAaNgvXC4usdn1kFyCI_8fpRtWQKHI/s1600/tablas3.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="159" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidEii9tkxwoJsDVBPycO7aYfKwldRBnEOHTG07G5PEVNCJ8qsqwTQ5pKk8iUO7rPrBorI4hF1sZf67pv8pfdGnh73S6XkJVFEyRwhJkv4MProe6jAaNgvXC4usdn1kFyCI_8fpRtWQKHI/s320/tablas3.JPG" width="320" /></a></div><br />
<span style="font-family: "Verdana", sans-serif;">Obviamente que la propiedad "border" debe ir en "0", solo esta en "1" para que puedan ver donde esta la tabla.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Pero antes que me olvide les explicaré el tema de los Link que pueden verlo en donde estan las palabras "Home", "Articulos" y "Links"</span><br />
<span style="font-family: "Verdana", sans-serif;">Para realizar un Hipervínculo en HTML se necesita la etiqueta <a></a> todo lo que esta etiqueta contenga dentro de ella será tomado como hipervínculo y por default aparecerá subrayado y en color azul.</span><br />
<span style="font-family: "Verdana", sans-serif;">Pero, para que el hipervínculo tenga sentido nosotros debemos determinar a donde debe dirigirse el navegador una vez que el usuario clickee sobre el mismo.</span><br />
<span style="font-family: "Verdana", sans-serif;">Para ello utilizamos el atributo "href" este significa referencia de hipervínculo, es decir, a donde esta apuntando.</span><br />
<span style="font-family: "Verdana", sans-serif;">En el ejemplo el atributo tiene el valor "#" esto no significa nada por lo cual el navegador no hará nada, pero por ejemplo podemos asignarle a Link este mismo Blog por lo cual el hipervínculo quedara de la siguiente manera:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><a href="http://www.programandoeldestino.blogspot.com/">Link</a></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Una vez que el usuario clickee sobre el Link el navegador automáticamente lo dirigirá a este Blog. </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">En próximas entregas me extenderé en el tema de los links puesto que es algo muy importante.</span><br />
<span style="font-family: "Verdana", sans-serif;">También veremos mas propiedades de las tablas que son esenciales para su optimo funcionamiento, pero creo que con esto es suficiente para comenzar a practicar.</span><br />
<span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Eso fue todo por esta segunda entrega d</span><span style="font-family: "Verdana", sans-serif;">e necesitar ayuda no tienen mas que pedirla.</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0tag:blogger.com,1999:blog-7778790865635501276.post-44580408425300098382011-04-08T23:56:00.002-03:002011-06-29T23:03:19.167-03:00Programación Web - HTML (I) - [ ETIQUETAS ]<span style="font-family: "Verdana", sans-serif;">Hoy les explicaré como crear su primer pagina web.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Omitiré que es el HTML, me es aburrido explicarlo y creo que ya existe mucha información al respecto.</span><br />
<span style="font-family: "Verdana", sans-serif;">Si quieren saber al respecto los invito a buscar en su navegador preferido la definición de HTML (HyperText Markup Language).</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Comencemos...</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para poder crear una pagina web </span><span style="font-family: "Verdana", sans-serif;">deben tener en mente que existe una estructura básica de etiquetas que nunca deben olvidar.</span><br />
<span style="font-family: "Verdana", sans-serif;">Estas son <html>, <head> y <body>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Como pueden ver cada etiqueta comienza con "<" y finaliza con ">", estos signos son los delimitadores de etiquetas HTML.</span><span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Antes de continuar debo aclarar un asunto:</span><br />
<span style="font-family: "Verdana", sans-serif;">Todo el código que se escriba en este Blog pueden escribirlo en su editor de código favorito, sin embargo, si no saben ni si quiera que es eso solo utilicen el Block de Notas de Windows o el Editor de Texto de Linux y guarden los archivos como nombredelarchivo.html </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Continuemos...</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">La etiqueta <html> (por el momento) le indica a los navegadores que el documento que interpretará es un HTML.</span><br />
<span style="font-family: "Verdana", sans-serif;">Las etiquetas <head> y <body> se escriben dentro de la etiqueta <html> en forma independiente y al igual que un ser humano primero va la cabeza (head) y luego el cuerpo (body).</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Las etiquetas (en su mayoría) se abren y cierran, digo en su mayoría puesto que mas adelante veremos etiquetas que son únicas y no tienen su compañera de cierre. </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para cerrar una etiqueta (cualquiera sea, siempre y cuando tenga su etiqueta de apertura) se utiliza antes de su tag pero luego de la apertura la "/". Ejemplo: </html>.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Estructura básica de un documento HTML.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><html></span><br />
<span style="font-family: "Verdana", sans-serif;"> <head></span><br />
<span style="font-family: "Verdana", sans-serif;"> </head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <body></span><br />
<span style="font-family: "Verdana", sans-serif;"> </body></span><br />
<span style="font-family: "Verdana", sans-serif;"></html> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Esa estructura siempre debe estar puesto que es la base para que el navegador interprete correctamente un documento HTML.</span><br />
<br />
<hr /><br />
<span style="font-family: "Verdana", sans-serif;"><b>Determinar el Titulo de una página web</b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para poder determinar el titulo que tendra nuestra pagina web (el cual se visualiza en la parte superior del navegador [ya sea la pestaña o barra superior del mismo]) se debe utilizar la etiqueta <title>, esta va dentro de la etiqueta <head></span><br />
<span style="font-family: "Verdana", sans-serif;">Ejemplo:</span><br />
<span style="font-family: "Verdana", sans-serif;"><head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <title>Nuestra primera pagina</title></span><br />
<span style="font-family: "Verdana", sans-serif;"></head> </span><br />
<br />
<hr /><br />
<span style="font-family: "Verdana", sans-serif;"><b>Agregar contenido a nuestra pagina</b></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para poder agregar contenido ya sea texto, imagenes, videos, etc debemos empezar a comprender otras etiquetas y el concepto de "atributo".</span><br />
<span style="font-family: "Verdana", sans-serif;">Los atributos (aveces llamados parametros) son utilizados para determinar algunas caracteristicas de las etiquetas para que estas funcionen de maneras particulares o tengan determinadas caracteristicas.</span><br />
<span style="font-family: "Verdana", sans-serif;">Comencemos de a poco, pero antes de hacerlo vale aclarar que todo lo que veamos a continuación se escribe siempre dentro de las etiquetas <body></body>...</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Para ingresar un párrafo necesitamos utilizar la etiqueta <p></span><br />
<span style="font-family: "Verdana", sans-serif;">Ejemplo:</span><br />
<span style="font-family: "Verdana", sans-serif;"><p>Este es un párrafo</p></span><br />
<span style="font-family: "Verdana", sans-serif;"><p>Este es otro párrafo</p></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Ahora bien, generalmente (y en realidad deberia ser siempre) las paginas web deben tener encabezados, estos son utilices no solo porque tienen pre establecido diferentes categorias sino que ademas son necesarios para mejorar el posicionamiento de nuestras web. Pero... ¿que son los encabezados?</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Al igual que un diario tiene en su portada una titular gigante y debajo del mismo un subtitulo, las paginas web deberian tener lo mismo.</span><br />
<span style="font-family: "Verdana", sans-serif;">Estos titulos y subtitulos dentro del universo del HTML se llaman encabezados y a su vez tienen distintas categorias que fueron tomando con el tiempo.</span><br />
<span style="font-family: "Verdana", sans-serif;">La etiqueta de encabezados es <hX> siendo X un numero del 1 al 6, es decir, <h1> <h2> <h3> <h4> <h5> y <h6></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">El <h1> es el denominado encabezado principal y debería haber 1 solo por cada documento HTML (puede utilizarse mas veces pero sería hacer un mal uso del mismo).</span><br />
<span style="font-family: "Verdana", sans-serif;">El <h2> es el denominado subtitulo y este al igual que todos los <hX> menores a 2 pueden ser utilizados sin limite sin embargo siempre deben respetar un orden decreciente, es decir un <h2> no debería funcionar como un subtitulo de un <h3>.</span><br />
<span style="font-family: "Verdana", sans-serif;">Dicho esto vamos con un ejemplo:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><h1>Titulo principal de la Pagina</h1> </span><br />
<span style="font-family: "Verdana", sans-serif;"><h2>Subtitulo de la pagina</h2></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><h3>Que es el HTML</h3></span><br />
<span style="font-family: "Verdana", sans-serif;"><p>texto explicativo</p></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><h3>Etiquetas</h3></span><br />
<span style="font-family: "Verdana", sans-serif;"><p>texto explicativo</p></span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Las etiquetas <hX> deben cerrarse una vez utilizadas y una no puede incluir a otra. Además como pueden observar las etiquetas <hX> están fuera de las etiquetas <p> esto se debe a que existen etiquetas de Bloque y etiquetas de Linea. Con el tiempo iremos aprendiendo las diferentes etiquetas y sus tipos, sin embargo, a grandes rasgos los que podemos decir es que las etiquetas de bloque contienen pueden contener etiquetas de linea, por el contrario y generalmente asi sucede las etiquetas de linea son contenidas por las etiquetas de bloque.</span><br />
<span style="font-family: "Verdana", sans-serif;">Y ya que las menciono daré un ejemplo practico que nos lleva al aprendizaje de 2 nuevas etiquetas. Estas permiten dar cierto "formato" al texto. Estas son:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><strong>Texto en Negrita</strong>. Anteriormente esta etiqueta era <b> pero la misma cayo en desuso y se transformo en <strong> la cual debe abrirse y cerrarse conteniendo un texto en su interior.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><em>Texto con énfasis</em>. Anteriormente esta etiqueta era <i> y se conocía como letra Itálica. </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Actualmente en HTML tanto la etiqueta <strong> como <em> son denominadas como </span><span style="font-family: "Verdana", sans-serif;">etiquetas para dar "Énfasis" a las palabras.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Estas etiquetas son de linea por lo cual deben estar dentro de una etiqueta de bloque como ser <p>. Ejemplo:</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><p>Estamos aprendiendo <strong>HTML</strong> de una manera <em>fácil y practica</em></p>.</span><span style="font-family: "Verdana", sans-serif;"> </span><br />
<br />
<hr /><br />
<span style="font-family: "Verdana", sans-serif;">Bien, creo que ya hemos visto suficiente por hoy, pero para que se vayan con un ejemplo visual y puedan practicar le voy a mostrar el código de una pagina HTML con las etiquetas que hemos aprendido hoy.</span><br />
<br />
<span style="font-family: "Verdana", sans-serif;"><html></span><br />
<span style="font-family: "Verdana", sans-serif;"> <head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <title>Programando el Destino</title></span><br />
<span style="font-family: "Verdana", sans-serif;"> </head></span><br />
<span style="font-family: "Verdana", sans-serif;"> <body> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <h1>Programando el Destino</h1></span><br />
<span style="font-family: "Verdana", sans-serif;"> <h2>Tu ayuda virtual a la hora de desarrollar</h2> </span><br />
<span style="font-family: "Verdana", sans-serif;"> <p>Hoy hemos aprendido lo <em>basico</em> del <strong>HTML</strong> pero <em>fundamental</em> para comenzar con nuestros desarrollos web. A comenzar con las prácticas y a consultar todas vuestras dudas puesto</span><span style="font-family: "Verdana", sans-serif;"> que para ello es la existencia de este <strong>Blog</strong></p></span><br />
<span style="font-family: "Verdana", sans-serif;"> </body></span><br />
<span style="font-family: "Verdana", sans-serif;"></html> </span><br />
<br />
<span style="font-family: "Verdana", sans-serif;">Resultado:</span><br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5jtf5CdeW-tTpQyp_POzP9cp3gdmGQyuKlQXKk19c_A3iuTf18kSl02ivu5-ohM5huEpKSPAbQM7Z71neHSoFT5Ha2bmHW5svue5MZy_W8PvYRE1ntReunMSinelw_qPN-dYMGWC3W7U/s1600/web1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="105" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5jtf5CdeW-tTpQyp_POzP9cp3gdmGQyuKlQXKk19c_A3iuTf18kSl02ivu5-ohM5huEpKSPAbQM7Z71neHSoFT5Ha2bmHW5svue5MZy_W8PvYRE1ntReunMSinelw_qPN-dYMGWC3W7U/s320/web1.jpg" width="320" /></a></div><br />
<span style="font-family: "Verdana", sans-serif;">Aclaración: No es necesario tabular el código, yo lo hago porque lo hace mas legible y permite editarlo con mayor facilidad pero su utilización es indistinta.</span><br />
<span style="font-family: "Verdana", sans-serif;"> </span><span style="font-family: "Verdana", sans-serif;"><br />
</span><br />
<span style="font-family: "Verdana", sans-serif;">Espero que les sirva esta primera lección y no se olviden de consultar todas su dudas para eso existe este Blog.</span>Nathanerhttp://www.blogger.com/profile/10058615400226368668noreply@blogger.com0