|
|
Diseño Web HTML Basico
En esta sección publicamos todos los contenidos que tienen que ver con HTML, como manual de HTML, talleres, servicios, complementos, etc.
Disponemos, tal vez, del mejor manual de HTML de la Web en español, que trata todos los temas con gran detalle y ofrece cientos de consejos para mejorar nuestras técnicas.
|
|
Las nuevas etiquetas de HTML 4 Entre el estándar del HTML 3.2 al 4.0 se introdujeron ocho
nuevas etiquetas de las cuales daremos una breve explicación.
<Q>... </Q>
Las etiquetas <Q> y
</Q> actúan de forma muy parecida a <BLOCKQUOTE> pero con la
particularidad de que añade un sangrado en párrafos más pequeños y sin necesidad
de romper el párrafo.
Según el W3C, la etiqueta <BLOCKQUOTE> es
para añadir sangrados largos y <Q>, para sangrados más pequeños, sin
necesidad de romper el párrafo.
| Nota: En el HTML 4.0 es imprescindible poner la etiqueta
de apertura y la de clausura <Q>.... </Q>.
|
<ACRONYM>... </ACRONYM>
Las etiquetas <ACRONYM>... </ACRONYM>, indican que hay un
acrónimo en el texto. Un acrónimo es un pequeño texto que ayuda a explicar la
estructura del texto una frase.
<INS>... </INS> y
<DEL>... </DEL>
Utilice < INS>...</INS>
para marcar las partes de un documento que se han agregado desde la versión
pasada del documento. <DEL>... </ DEL> marca de manera similar un
texto de un documento que se ha suprimido desde la versión anterior.
<COLGROUP>... </COLGROUP>
Se utiliza para
tener un mejor control sobre un el formato de las tablas especificando las
características que comparten como: anchura, altura y alineación. Cada tabla
debe tener por lo menos un <COLGROUP>; sin especificar ninguna
característica de < COLGROUP >. HTML 4.0 asume que una tabla contiene un
solo grupo de columnas y que este contiene todas las columnas de una tabla.
Por ejemplo, esto nos serviría para crear una tabla con una celda en la que
puede incluirse una descripción y después seguido de check boxes para
seleccionar las opciones deseadas.
Código:
<TABLE> <COLGROUP span="10" width="30"> <COLGROUP span="1"
width="0*"> <THEAD> <TR>... </ TABLE>
De
esta forma, <COLGROUP> proporciona un formato más agradable a los check
boxes sin necesidad de especificar, propiedades identicas para cada fila.
La etiqueta de inicio < COLGROUP >, requiere otra de cierre.
Con el que obtenemos: (en Nestcape sólo se verá la tabla, no el
botón).
<FIELDSET>... </FIELDSET>
Hasta
ahora, no disponíamos de ninguna manera de agrupar visualmente varios controles,
si no echábamos mano de elementos que no son del formulario, como tablas o
imagenes. Ahora, si encerramos una parte de un formulario dentro de la
etiqueta FIELDSET se mostrara un rectángulo alrededor de los mismos. Además,
podemos indicar un título por medio de la etiqueta LEGEND, que admite el
parámetro align="left / center / right / top / bottom", lo que nos permite
alinear el título horizontal y verticalmente. La única pega es que deberemos
introducir el conjunto en una celda de tabla con un ancho determinado, ya que si
no lo hacemos así el recuadro abarcara todo el ancho de pantalla disponible.
Ejemplo.- (Sólo para I. Explorer)
<form action="cgi-bin/control.exe" method="post"
enctype="text/plain" name="miform"> <table width="200">
<tr> <td> <fieldset> <legend
align="left"><font color="red">Caja de
texto</font></legend> pon tu nombre: <input type="text"
size="15"> </fieldset> </td> </tr>
<table> </form>
<LABEL>...
</LABEL>
Hasta no hace mucho los campos de entrada no estaban
asociados a ellos mismos. Por ejemplo; a la hora de pulsar sobre un campo de
confirmación, ¡ no sucedía nada! Pero ahora, sí lo pulsamos el control cambiará
de estado.
Ejemplo:
<form
action="cgi-bin/micontrol.exe" method="post" enctype="text/plain" name="un
ejemplo más"> <label> <input type="checkbox"
name="email"> Le deseamos un feliz año nuevo </label>
</form>
<BUTTON>... </BUTTON>
A partir de la implementación de los estándares HTML 4.0 contamos con
varias etiquetas nuevas para construir formularios, siendo BUTTON una de ellas,
bastante útil por cierto. La pega es que las versiones de 4 de Nestcape se
lanzaron antes de estas implementaciones, por lo que estas nuevas etiquetas sólo
se pueden visualizar correctamente con Internet Explorer 4 y superiores.
Esta etiqueta proporciona un método único para la implementación de
cualquier tipo de botón de formulario. Sus principales atributos son:
- type= " tipo ", que puede tomar los ya conocidos valores submit (por
defecto), reset y button.
- name= " nombre ", que asigna un nombre identificador único al botón.
- value= " texto ", que define el texto que va a aparecer en el botón.
La principal ventaja que aporta estas etiquetas es que ahora
vamos a poder introducir dentro de ellas cualquier elemento de HTML, como
imagenes y tablas.
Ejemplos.
<form
action="cgi-bin/control.exe" method="post" enctype="text/plain"
name="miform">
<button name="boton_1" type="button">
<table width="10" cellspacing="0" cellpadding="2" border="1">
<tr> <td>uno</td> <td>dos</td>
</tr> <tr> <td>tres</td>
<td>cuatro</td> </tr> </table>
</button> </form> |
|
|
| |
|
|