   | |
| Moderador del foro: ZorG |
| Foro uCoz Ayuda a los webmasters Soluciones personalizadas Fundamentos de HTML |
| Fundamentos de HTML |
Anclajes en HTML y enlaces ancla A través de enlaces o links enviamos al usuario de una página a otra. Habrá ocasiones en las que tengamos una página muy grande y queramos enviar al usuario, no a otra página, sino a una parte de la misma página. Para llevar al usuario a esa parte concreta de la página se utilizará un enlace ancla poniendo al final de la url de destino una almohadilla seguida del texto del identificador de un anclaje html. Veamos los tipos de anclajes en html, como crearlos y como colocarlos en nuestra página web. Tipos de anclajes html Un ancla, o anclaje, en html sirve para definir una parte concreta de la página web dónde poder dirigir al usuario a través de un enlace utilizando sólo html, sin javascript. Los anclajes se pueden definir de dos formas: Mediante el atributo name de un enlace, sin atributo href y sin anchor: Code <a name="un_nombre"></a> Mediante el atributo id de cualquier de cualquier etiqueta html: Code <p id="una_id">.......</p> Una vez tenemos, mediante una de estas formas, una forma de referirnos a un lugar concreto de la página web, podemos crear los enlaces ancla que llevarán al usuario a esa parte específica. Veamos como crear los enlaces ancla. Crear enlaces ancla en html El enlace ancla es un enlace normal salvo que la url del atributo href tiene al final una almohadilla seguida del texto que identifica un anclaje. Esto texto es el referido en el apartado anterior como id o name. De esta forma, los enlaces que llevarían a las anclas definidas anteriormente serían: Code <a href="#un_nombre">Ir a Un Nombre</a> <a href="#una_id">Ir a una Id</a> Si solocamos estos enlaces en una página web nos llevarán a la parte específica de la misma página donde están colocados esos identificadores. Si quieremos enviar al usuario a una parte concreta, esto es, a un anclaje, pero que se encuentra en otra página distinta a donde está puesto el enlace ancla habrá que poner la url absoluta de esta modo: Code <a href="http://www.ejemplo.com/pagina.html#un_nombre">Ir a Un Nombre</a> <a href="http://www.ejemplo.com/pagina.html#una_id">Ir a una Id</a> La utilidad de los enlaces ancla, aunque discutida por algunos, es destacable en listados alfanuméricos, páginas de preguntas frecuentes (FAQs) o para crear tablas de contenido de un artículo o página web. Cabe mencionar que los motores de búsqueda son capaces de rastrear e indexar enlaces ancla para mostrar dicho enlace ancla bajo el enlace principal de un resultado de búsqueda. Fíjate como en muchas ocasiones aparece el resultado de búsqueda y otros enlaces bajo él que llevan a partes concretas de la página (ojo, no confundas con los enlaces de sitio que también puede mostrar Google bajo un resultado de búsqueda. Los enlaces de sitio llevan a distintas partes de un sitio web y no a distintas partes de la misma página). Al respecto de Google es importante crear los anclajes de forma: Code <a name="un_nombre" title="Un título"></a> Nota como se ha introducido el atributo title. Este será el texto del enlace ancla que aparezca en los resultados de búsqueda de Google. Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
El atributo placeholder en HTML5 HTML5 ha supuesto bastantes novedades en el desarrollo web. Algunas características ya se están utilizando de forma generalizada y otras muchas poco a poco se irán adoptando a medida que los navegadores las vayan soportando. Una de las nuevas características de HTML5 es el atributo placeholder para los elementos INPUT. El atributo placeholder muestra el texto en un campo hasta que el campo adquiere el foco. En ese momento, se esconde el texto. Code <input name="nombre" placeholder="Tu nombre..." type="text"> Una de las ventajas de utilizar el atributo placeholder es que nuestro código será más semántico. El problema es que este atributo no está soportado por todos los navegadores. Por ejemplo, hasta el momento no es soportado por Internet Explorer. Para que sea cross-browser podemos recurrir a Modernizr y jQuery. Se usa para comprobar si es el navegador es compatible con determinadas características de HTML5 o CSS3 y si no es compatible, ofrecer una alternativa. Code if(!Modernizr.input.placeholder){ $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function() { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function() { $(this).find('[placeholder]').each(function() { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); } El atributo placeholder funciona con los siguientes tipos de input: text, search, url, tel, email, y password. Ver ejemplo en funcionamiento » » Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
Atributo required en HTML5 Required es un nuevo atributo de HTML5 que hace obligatorio que un campo sea rellenado antes de que se envie el formulario. De momento, las últimas versiones de Firefox, Opera y Safari, ya dan soporte a este atributo. Code <form> <label for="nombre">Dime tu nombre : </label> <input name="nombre" type="text" required /> <input type="submit" value="Submit"/> </form> Ver ejemplo en funcionamiento » » Las vírgenes tienen muchas navidades pero ninguna Nochebuena.
|
ya gracias
|
| |||