html - RecorteX - Recortes de código útiles.

HTML de ejemplo

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

descargar 
<!-- 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 -->

por juanjo en css html | Comentarios

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…

descargar 
<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

descargar 
<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>

por manolo en html w3c web xhtml youtube | Comentarios

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

descargar 
  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=''; }
	}	
}

por AndiXTRM en html javascript | Comentarios

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… ;)

descargar

<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>

por josuebasurto en barra css html progreso | Comentarios

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

Si se quiere convertir, por ejemplo á por á 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).

descargar 
  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:

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

A disfrutarlo!

por xoneca en acentos convertir dieresis entidades HTML letras PHP tildes | Comentarios

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:

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

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

descargar 
#menu {
  display: none;
}

por juanjo en css html imprimir | Comentarios (1)

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

descargar 
<input type="image" src="__Direccion de la imagen__" value="About submit buttons" alt="__Texto alterno__" name="submit" style="border:0px"/>

por josuebasurto en form html imagen | Comentarios

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

descargar 
    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;
    }
}

por josuebasurto en button checkbox correo electronico forma html javascript radio texto vacio validar | Comentarios

Limpiar HTML de una cadena

Limpia de HTML una cadena via Expresiones Regulares

descargar 
// 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;
    }
}

por melkorcete en html php | Comentarios (1)

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

descargar
<link rel="alternate" type="application/rss+xml" title="Título RSS" href="http://host/ruta/a/fichero.rss" />

por mate en html rss xml | Comentarios