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

Html5 : Programación de video juegos en html5

NC > Computación > HTML

links:

1. http://juegos.canvas.ninja/
2. http://programmingheroes.blogspot.com/p/html5-css3-javascript.html

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

Inicio
Python
Html
LaTeX

Ejemplo:

• Inicio
• Python
• Html
• LaTeX

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

Html : Insertar códigos en html con SyntaxHighlighter

NC > Computación > HTML

Agregar :

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" 
  rel="stylesheet" type="text/css"></link >
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" 
  rel="stylesheet" type="text/css"></link>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" 
  type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js" 
  type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js" 
  type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js" 
  type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" 
  type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js" 
  type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js" 
  type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" 
  type="text/javascript"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js" 
  type="text/javascript"></script>

<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js" 
  type="text/javascript"></script>

Luego:

<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Ejemplo en java:

<pre class="brush: java">public class Main{
  public static void main(String arg[]){
    System.out.println("Hola mundo");
  }
}
</pre>

Y se muestra:

public class Main{
  public static void main(String arg[]){
    System.out.println("Hola mundo");
  }
}

Ejemplo en python:

<pre class="brush: python">
a = 1
suma = 0
while a <= 7
    b = b + 1
print b
</pre>

Y se muestra:

a = 1
suma = 0
while a <= 7
    b = b + 1
print b

Para agregar solo un lenguaje, por ejemplo Java:

Agregar :

<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link> <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script> <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" type="text/javascript"></script>

Luego:

<script type="text/javascript">
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

Por último, ejemplo en java:

<pre class="brush: java">public class Main{
  public static void main(String arg[]){
    System.out.println("Hola mundo");
  }
}
</pre>

Y se muestra:

public class Main{
  public static void main(String arg[]){
    System.out.println("Hola mundo");
  }
}

Links:

1. http://alexgorbatchev.com/SyntaxHighlighter/
2. http://blog.renesilva.net/tips/syntax-highlighter-para-blogger/
3. http://dasubipar.blogspot.com/2011/11/mostrar-codigo-fuente-en-entradas-de.html
4. http://stackoverflow.com/questions/10335463/how-to-setup-syntax-highlighter-on-blogger

0.14

Html : Símbolos de Notas Musicales en html

a Ejemplo:
&#9833; ♩
&#9834; ♪
&#9835; ♫

Links

1. https://es.wikipedia.org/wiki/Signos_musicales
2. http://www.alt-codes.net/music_note_alt_codes.php
3. http://fsymbols.com/es/signos/notas-musicales/

0.04