Mostrando las entradas con la etiqueta HTML. Mostrar todas las entradas
Mostrando las entradas con la etiqueta HTML. Mostrar todas las entradas

Detectar que se presionó una tecla con javascript HTML

En javascript usamos el siguiente código para detectar que se presionó una tecla
// código sacado de stackoverflow

addEvent(document, "keydown", function (e) {
    console.log("Se presiono una tecla");
});

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    } else {
        element["on" + eventName] = callback;
    }
}

Links:
  1. https://es.stackoverflow.com/questions/82929/eventos-keypress-keydown-keyup

¿Cómo crear y usar un botón en HTML5?

El siguiente es un ejemplo básico de como insertar un botón:
<!DOCTYPE html>
<html>
<body>

<p> Click en el boton</p>
<button type="button" onclick="alert('Hola')">Click</button>
 
</body>
</html>
  1. https://www.w3schools.com/tags/tag_button.asp
  2. https://vinkula.com/crear-botones-personalizados-con-html5-y-css3/

¿Cómo limpiar un input de html con javascript?

Solo tenemos que identificar el elemento y en value asignar '' (un string vacio)
<!DOCTYPE html>
<html>
<body>

<p>Clear the input field when it gets focus:</p>
<input type="text" id="input1">

<button type="button" onclick="miFuncion()">Click</button>
</body>

<script>
function miFuncion(){
 x = document.getElementById('input1');
    x.value='';
}
</script>
</html>
  1. https://stackoverflow.com/questions/17237772/html-how-to-clear-input-using-javascript
  2. https://www.w3schools.com/howto/howto_html_clear_input.asp

¿Cómo obtener un elemento HTML conociendo su NAME?

Para esto usamos la funcion getElementsByName de document
<!DOCTYPE html>
<html>
<body>

<p>Puedes cambiar el texto</p>
<input name="nombre1" type="text" value="hola"><br>

<p>Click para mostar los valores.</p>

<button onclick="miFuncion()">Click</button>

<p id="salida"></p>

<script>
function miFuncion() {
    var x = document.getElementsByName("nombre1")[0];
    document.getElementById("salida").innerHTML = x.value;
}
</script>

</body>
</html>
  1. https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByName
  2. https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp
  3. http://lineadecodigo.com/javascript/getelementsbyname/

¿Cómo remplazar h3 en el título del post con h1 ?


Ingresando a Tema , Editar html buscar
 <b:includable id='post' var='post'>
...
<h3 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h3>
Y cambiar el h3 por h1
 <b:includable id='post' var='post'>
...
<h1 class='post-title entry-title' itemprop='name'>
      <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'>
        <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a>
      <b:else/>
        <data:post.title/>
      </b:if>
      </h1>
Links:
  1. https://www.bloggertipandtrick.net/change-heading-tag-better-seo-blogger/
  2. https://groups.google.com/forum/#!topic/blogger-fr/8yvy2CGS83o

HTML - Mostrar el símbolo menor en HTML

NC > Computación > HTML

Para mostrar el símbolo menor "<" en HTML se usa &lt;

  • Ejemplo
    • El código
      • 23 &lt; 45
    • Se ve:
    • 23 < 45


0.03

HTML - Diferencia entre INPUT Y BUTTON

NC > Computación > HTML
  • INPUT
    • Dentro de un FORM
  • BUTTON
    • Uso en aplicaciones
Links

HTML - Marquee

NC > Computación > HTML
  • < marquee >
      • Obsoleto : Esta funcionalidad es obsoleta. Aunque puede aún funcionar en algunos navegadores, se desalienta su uso ya que puede ser removida en cualquier momento. Evite usarla.[1]
    • Atributos

Links:

HTML - Ejemplo de anclas en HTML

NC > Computación > HTML
  • Usando id
    • <a id="ancla1"></a>
  • Anclas de ejemplo
    • Aquí ancha1
    • Aquí ancha2
    • Aquí ancha3
    • Aquí ancha4
    • Aquí ancha5
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
  • Ir a un ancla de ejemplo
Links:

0.15

Mostrar un texto en negrita y cursiva

NC > Computación > HTML

Negrita

Para mostrar un texto en negrita se usa la etiqueta <b>.

Ejemplo

Ejemplo texto normal <b>Texto en negrita</b>
Se ve:
Ejemplo texto normal Texto en negrita

Cursiva

Para mostrar un texto en cursiva se usa la etiqueta <i>.

Ejemplo

Ejemplo texto normal <i>Texto en cursiva</i>
Se ve:
Ejemplo texto normal Texto en cursiva

0.05

Html : Centrar Texto de una tabla con html

NC > Computación > HTML

Ejemplo: Centrar elementos de la tabla

<table border=1 style="width: 100%;text-align:center">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>


E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Ejemplo: Centrar elementos de la tabla

<table border=1 style="border-collapse: collapse; width: 100%;text-align:center">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>


E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

0.02

Html : Ejemplos de Tablas básicas en html

NC > Computación > HTML

Unos ejemplo simples para usar una tabla en html.

Ejemplo :

<table>
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Ejemplo :

<table border='2px'>
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>


E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Ejemplo :

<table style="width:100%">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Ejemplo :

<table border="2px" style="border-collapse: collapse;">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>


E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Ejemplo :

<table border="2px" style="border-collapse: collapse; width: 100%;">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Ejemplo:

<table border=1 style="border-collapse: collapse; width: 100%;">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Ejemplo: Centrar elementos de la tabla

<table border=1 style="border-collapse: collapse; width: 100%;text-align:center">
<tr>
    <td>E(1,1)</td>
    <td>E(1,2)</td>
    <td>E(1,3)</td>
  </tr>
<tr>
    <td>E(2,1)</td>
    <td>E(2,2)</td>
    <td>E(2,3)</td>
  </tr>
<tr>
    <td>E(3,1)</td>
    <td>E(3,2)</td>
    <td>E(3,3)</td>
  </tr>
<tr>
    <td>E(4,1)</td>
    <td>E(4,2)</td>
    <td>E(4,3)</td>
  </tr>
</table>

E(1,1) E(1,2) E(1,3)
E(2,1) E(2,2) E(2,3)
E(3,1) E(3,2) E(3,3)
E(4,1) E(4,2) E(4,3)

Links:

  1.   http://www.w3schools.com/html/html_tables.asp
  2. http://www.w3schools.com/css/css_table.asp 
  3. http://www.mclibre.org/consultar/htmlcss/css/css_tablas_modos_bordes.html
  4. http://librosweb.es/libro/xhtml/capitulo_7/tablas_basicas.html
  5. http://librosweb.es/libro/css/capitulo_10.html
0.15

CSS : Ejemplo creación de una Barra de Navegación en CSS y Html

NC > Computación > CSS

Barra de Navegación Vertical




Ejemplo:
Barra de Navegación Horizontal

Links:

  1. http://www.w3schools.com/css/css_navbar.asp
0.04

Html Establecer el ancho y alto de la etiqueta DIV

NC > Computación > HTML

Con CSS se tiene :

#elemento { 
   width:100px;
   height : 50px;
}

<div id = "elemento">
...
</div>


Modificando en la etiqueta :

<div id = "elemento" style = "width : 100px;  height : 50px">
...
</div>

0.03