Weblogs Código

RecorteX

» html
73 usuarios y 243 recortes de código
Usuario

Contraseña
Crear cuenta
Estás viendo los recortes de la etiqueta html

RSS
Recortes: 25

Etiquetas relacionadas:
css
javascript
xhtml
php
xml
rss
forma
texto
input
entidades
button
web
progreso
formularios
dieresis
tildes
favicon
checkbox
provincias
forumularios
diseño
acentos
vacio
letras
feeds
convertir
radio
imagen
div
atom
validar
países
form
correo
youtube
imprimir
electronico
barra
w3c

HTML de ejemplo

Un HTML de ejemplo que prueba distintas etiquetas. Sirve para probar nuestro CSS con contenido variado. Cogido de snipprl:

 
<!-- Sample Content to Plugin to Template -->
<h1>CSS Basic Elements</h1>
 
<p>The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.</p>
 
<hr />
 
<h1 id="headings">Headings</h1>
 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
 
<h1 id="paragraph">Paragraph</h1>
 
<img style="width:250px;height:125px;float:right" src="images/css_gods_language.png" alt="CSS | God's Language" />
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
 
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="list_types">List Types</h1>
 
<h3>Definition List</h3>
<dl>
	<dt>Definition List Title</dt>
	<dd>This is a definition list division.</dd>
</dl>
 
<h3>Ordered List</h3>
<ol>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
</ol>
 
<h3>Unordered List</h3>
<ul>
	<li>List Item 1</li>
	<li>List Item 2</li>
	<li>List Item 3</li>
</ul>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>
 
<fieldset>
	<legend>Legend</legend>
	
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
	
	<form>
		<h2>Form Element</h2>
		
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
		
		<p><label for="text_field">Text Field:</label><br />
		<input type="text" id="text_field" /></p>
		
		<p><label for="text_area">Text Area:</label><br />
		<textarea id="text_area"></textarea></p>
		
		<p><label for="select_element">Select Element:</label><br />
			<select name="select_element">
			<optgroup label="Option Group 1">
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
			</optgroup>
			<optgroup label="Option Group 2">
				<option value="1">Option 1</option>
				<option value="2">Option 2</option>
				<option value="3">Option 3</option>
			</optgroup>
		</select></p>
		
		<p><label for="radio_buttons">Radio Buttons:</label><br />
			<input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
				<input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
				<input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
		</p>
		
		<p><label for="checkboxes">Checkboxes:</label><br />
			<input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
				<input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
				<input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
		</p>
		
		<p><label for="password">Password:</label><br />
			<input type="password" class="password" name="password" />
		</p>
		
		<p><label for="file">File Input:</label><br />
			<input type="file" class="file" name="file" />
		</p>
		
		
		<p><input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" />
		</p>
		
 
		
	</form>
	
</fieldset>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="tables">Tables</h1>
 
<table cellspacing="0" cellpadding="0">
	<tr>
		<th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
	</tr>
	<tr>
		<td>Division 1</td><td>Division 2</td><td>Division 3</td>
	</tr>
	<tr class="even">
		<td>Division 1</td><td>Division 2</td><td>Division 3</td>
	</tr>
	<tr>
		<td>Division 1</td><td>Division 2</td><td>Division 3</td>
	</tr>
 
</table>
 
<small><a href="#wrapper">[top]</a></small>
<hr />
 
<h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
 
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>
 
<pre><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p></pre>
 
<blockquote>
	"This stylesheet is going to help so freaking much." <br />-Blockquote
</blockquote>
 
<small><a href="#wrapper">[top]</a></small>
<!-- End of Sample Content -->
 

Incrustar videos de youtube como XHTML 1.0 válido

Para introducir un video de youtube, manteniendo el código de la página como xhtml válido debemos modificar el código que nos presenta youtube de la forma…

 
<object width="425" height="350">
<param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U">
</param>
<embed src="http://www.youtube.com/v/7_6B6vwE83U" type="application/x-shockwave-flash" width="425" height="350">
</embed>
</object>
 

A esta otra

 
<object type="application/x-shockwave-flash" style="width:425px; height:350px;" data="http://www.youtube.com/v/7_6B6vwE83U">
<param name="movie" value="http://www.youtube.com/v/7_6B6vwE83U" /><
/object>
 

Generar funciones de accesibilidad de manera rapida en un formulario

El codigo que posteo es uno que yo uso, tal vez no sea la mejor solucion mas quiero compartirla con Uds., para mi se ha vuelto una manera muy efectiva y rapida de dar cierta usabilidad a mis formularios sin tanta complicacion ademas de aplicar javascript no intrusivo

 
  function prepararFormulario()
{		
	var txts=document.getElementsByTagName("INPUT");
	for(var i=0;i<txts.length;i++)
	{	var txt=txts[i];
	
		txt.onfocus=function()
		{	this.className='focused'; 
			if(this.type=="text")
			{
				/*aun me falta terminar la implementacion, estoy buscando un 
codigo crossbrowser que al obtener el foco 
seleccione el texto de la caja de texto*/
			}
		}
		
		txt.onblur=function()
		{	this.className=''; }
		
		/////////////////////////////////////////
		//Los navegadores basados en estandares automaticamente crean el Objeto Event
		//, a pesar que este no sea definido de manera explicita
		//asi en esta funcion, al enviar e, FF automaticamente genera un objeto Event.
		txt.onkeypress=function(e)
		{ 						
				if(!e)var e=window.event;			
				var xId=new String;
				xId=this.id;
				//(!document.all) ? alert(e.srcElement) : alert(e.target);
				switch(xId.substring(0,3))
				{	
					case 'txt':					
						return soloCadenas(e);
						break;				
					case 'num':
						return soloNumeros(e);					
						break;
					case 'fec':
						return soloFechas(e);					
						break;
					case 'fic':
						return soloFechas_Input(e);					
						break;		
				}
		}
			
 
	}
	
	var sels=document.getElementsByTagName("SELECT");
	for(var i=0;i<sels.length;i++)
	{	var sel=sels[i];
		sel.onfocus=function()
		{	this.className='focused'; }
		
		sel.onblur=function()
		{	this.className=''; }
	}	
}
 

Barra de progreso con CSS

Para poder hacer una barra de progreso, solo es cuestion de que pongan los vvalores dinamicos con ajax o php o asp… ;)



<style>
    .graph { 
        position: relative; /* IE is dumb */
        width: 200px; 
        border: 1px solid #000000; 
        padding: 2px; 
    }
    .graph .bar { 
        display: block;
        position: relative;
        background: #B1D632; 
        text-align: center; 
        color: #333; 
        height: 2em; 
        line-height: 2em;            
    }
    .graph .bar span { position: absolute; left: 1em; }
</style>
<div class="graph">
    <strong class="bar" style="width: 30%;">30%</strong>
</div>

Convertir letras con acentos, tildes, ... a entidades HTML

Si se quiere convertir, por ejemplo á por &aacute; y todas las demás, con esta simple función ya vale. Su funcionamiento:

1. Convierte TODOS los caracteres especiales a entidades.

2. Como los caracteres <, & y > no nos interesa que queden codificados, se vuelven a descodificar (sólo estos).

 
  function caracteres_html($texto){
      $texto = htmlentities($texto, ENT_NOQUOTES, 'UTF-8'); // Convertir caracteres especiales a entidades
      $texto = htmlspecialchars_decode($texto, ENT_NOQUOTES); // Dejar <, & y > como estaban
      return $texto;
  }
 

Si no se dispone de PHP 5 o posterior, se necesita también agregar el siguente código:

 
  if ( !function_exists('htmlspecialchars_decode') )
  {
      function htmlspecialchars_decode($text)
      {
          return strtr($text, array_flip(get_html_translation_table(HTML_SPECIALCHARS)));
      }
  }
 

A disfrutarlo!

Eliminar elementos al imprimir una página web

Se puede utilizar CSS para indicar que determinados elementos no se deben mostrar al emplear una página web (por ejemplo menúes de enlaces que no tienen sentido al imprimir).

Para ello añadimos un css especial para impresión dentro del HEAD:

 
<link rel="stylesheet" href="impresora.css" media="print">
 

Luego sólo tenemos que eliminar determinados elementos dentro de impresora.css:

 
#menu {
  display: none;
}
 

Imagen en vez de boton de SUBMIT

PAra todos aquellos que no quieran un simple boton en su forma al crear HTML, pueden incluir esto
 
<input type="image" src="__Direccion de la imagen__" value="About submit buttons" alt="__Texto alterno__" name="submit" style="border:0px"/>
 

Validar una Forma con Javascript

Con esto podremos validar una forma en Javascript lo pongo de forma rapida, despues le pongo mas formato y explicacion, disculpen las molestias
 
    function validate(nombreForma) {
    var theMessage = "Please complete the following:\n-----------------------------------\n";
    var noErrors = theMessage
 
    // No vacio
    if (document.nombreForma.name.value=="") {
    theMessage = theMessage + "\n --> Your name";
    }
 
    // Validar un correo electronico
    if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,4})+$/.test(document.form1.email.value)){
    theMessage = theMessage + "\n --> Enter a valid e-mail address";
    }
 
    // Entrada de cierta cantidad de letras
    var lengthCheck = document.nombreForma.code.value
    if (lengthCheck.length < 4) {
    theMessage = theMessage + "\n --> Enter 4 character code";
    }
 
    // radio button seleccionado
    var radioCheck = false;
    for (i = 0; i < document.nombreForma.gender.length; i++) {
    if (document.nombreForma.gender[i].checked)
    radioCheck = true; }
    if (!radioCheck) {
    theMessage = theMessage + "\n --> Choose your gender";
    }
 
    // Al menos un check box
    var multiCheckbox = false;
    for (i = 0; i < document.nombreForma.session.length; i++) {
    if (document.nombreForma.session[i].checked)
    multiCheckbox = true; }
    if (!multiCheckbox) {
    theMessage = theMessage + "\n --> Choose which session(s)";
    }
 
    // Select List Usar
    var listCheck = document.form1.location.selectedIndex;
    if (document.nombreForma.location.options[listCheck].value=="none") {
    theMessage = theMessage + "\n --> Choose a location";
    }
 
    // Checkbox Activado
    var boxCheck = false;
    if (document.nombreForma.confirm.checked) {
    boxCheck = true; }
    if (!boxCheck) {
    theMessage = theMessage + "\n --> Agree to the terms";
    }
 
    // No hubo errores
    if (theMessage == noErrors) {
    return true;
 
    } else {
 
    // Errores encontrados
    alert(theMessage);
    return false;
    }
}
 

Limpiar HTML de una cadena

Limpia de HTML una cadena via Expresiones Regulares
 
// Limpiar HTML de una cadena
// $opcion define si la cadena de salida usara previamente un htmlentities();
function limpiarHTML($cadena,$opcion) {
   $expresion = "<[^>]+>?([^>|^<]*)<?\/[^>]*>";
 
    while (ereg($expresion,$cadena) == true) {
        $cadena = ereg_replace($expresion,'\\1',$cadena);
    }
 
    if ($opcion) {
        return htmlentities($cadena);
    } else {
        return $cadena;
    }
}
 

Firefox + RSS

Para que Firefox reconozca automaticamente que el site tiene live bookmarks (o feeds o RSS o...)
solo hay que añadir la línea de código (convenientemente rectificada para quen apunte a nuestro fichero XML

<link rel="alternate" type="application/rss+xml" title="Título RSS" href="http://host/ruta/a/fichero.rss" />
Proyecto: Juanjo Navarro, 2006 - Diseño: Albin