tabla

INICIO

Códigos HTML básicos

  • : define el inicio del documento HTML, le indica al navegador que lo que viene a continuación debe ser interpretado como código HTML. Esto es así de facto, ya que en teoría lo que define el tipo de documento es el DOCTYPE, que significa la palabra justo tras DOCTYPE el tag de raíz, por ejemplo:
  
  • : define la cabecera del documento HTML; esta cabecera suele contener información sobre el documento que no se muestra directamente al usuario como, por ejemplo, el título de la ventana del navegador. Dentro de la cabecera 
     es posible encontrar:
Un ejemplo de código HTML con coloreado de sintaxis.
  • : define el título de la página. Por lo general, el título aparece en la barra de título encima de la ventana.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><link>: para vincular el sitio a <a href="http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada" title="Hojas de estilo en cascada">hojas de estilo</a> o iconos. Por ejemplo:<link rel="stylesheet" href="/style.css" type="text/css">.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><style>: para colocar el estilo interno de la página; ya sea usando <a href="http://es.wikipedia.org/wiki/Hojas_de_estilo_en_cascada" title="Hojas de estilo en cascada">CSS</a> u otros lenguajes similares. No es necesario colocarlo si se va a vincular a un archivo externo usando la etiqueta <link>.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><meta>: para metadatos como la autoría o la licencia, incluso para indicar parámetros http (mediante http-equiv="") cuando no se pueden modificar por no estar disponible la configuración o por dificultades con server-side scripting.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <ul> <li><body>: define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta pueden definirse propiedades comunes a toda la página, como <a href="http://es.wikipedia.org/wiki/HTML_(colores)" title="HTML (colores)">color</a> de fondo y márgenes. Dentro del cuerpo<body> es posible encontrar numerosas etiquetas. A continuación se indican algunas a modo de ejemplo:</li> </ul> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><h1> a <h6>: encabezados o títulos del documento con diferente relevancia.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><table>: define una tabla.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <dl> <dd> <ul> <li><tr>: fila de una tabla.</li> </ul> </dd> </dl> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <dl> <dd> <ul> <li><td>: celda de una tabla (debe estar dentro de una fila).</li> </ul> </dd> </dl> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><a>: <a href="http://es.wikipedia.org/wiki/Hiperv%C3%ADnculo" title="Hipervínculo">hipervínculo</a> o enlace, dentro o fuera del <a href="http://es.wikipedia.org/wiki/Sitio_web" title="Sitio web">sitio web</a>. Debe definirse el parámetro de pasada por medio del atributo <em>href</em>. Por ejemplo: <a href="http://www.wikipedia.org" title="Wikipedia" target="_blank" tabindex="1">Wikipedia</a> se representa como <a href="http://www.wikipedia.org/">Wikipedia</a>).</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><div>: división de la página. Se recomienda, junto con css, en vez de <table> cuando se desea alinear contenido.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><img>: imagen. Requiere del atributo <em>src</em>, que indica la ruta en la que se encuentra la imagen. Por ejemplo: <img src="./imágenes/mifoto.jpg" />. Es conveniente, por accesibilidad, poner un atributo alt="texto alternativo".</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><li><ol><ul>: etiquetas para listas.</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><b>: texto en negrita (<em>etiqueta desaprobada. Se recomienda usar la etiqueta <strong></em>).</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><i>: texto en cursiva (<em>etiqueta desaprobada. Se recomienda usar la etiqueta <em></em>).</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><s>: texto tachado (<em>etiqueta desaprobada. Se recomienda usar la etiqueta <del></em>).</li> </ul> </dd> </dl> </dd> </dl> <dl> <dd> <dl> <dd> <ul> <li><u>: Antes texto subrayado. A partir de HTML 5 define porciones de texto diferenciadas o destacadas del resto, para indicar correcciones por ejemplo. (etiqueta desaprobada en HTML 4.01 y redefinida en HTML 5)<a href="http://es.wikipedia.org/wiki/HTML#cite_note-12">13</a> <a href="http://es.wikipedia.org/wiki/HTML#cite_note-13">14</a></li> </ul> </dd> </dl> </dd> </dl> <p>La mayoría de etiquetas deben cerrarse como se abren, pero con una barra («/») tal como se muestra en los siguientes ejemplos:</p> <dl> <dd> <ul> <li><table><tr><td>Contenido de una celda</td></tr></table>.</li> </ul> </dd> </dl> <dl> <dd> <ul> <li><script>Código de un [[script]] integrado en la página</script>.</li> </ul> </dd> </dl> <h2><span id="Nociones_b.C3.A1sicas_de_HTML">Nociones básicas de HTML</span></h2> <p>El lenguaje HTML puede ser creado y editado con cualquier <a href="http://es.wikipedia.org/wiki/Editor_de_texto" title="Editor de texto">editor de textos</a> básico, como puede ser <a href="http://es.wikipedia.org/wiki/Gedit" title="Gedit">Gedit</a> en <a href="http://es.wikipedia.org/wiki/Linux" title="Linux">Linux</a>, el <a href="http://es.wikipedia.org/wiki/Bloc_de_notas" title="Bloc de notas">Bloc de notas</a>de Windows, o cualquier otro editor que admita texto sin formato como <a href="http://es.wikipedia.org/wiki/GNU_Emacs" title="GNU Emacs">GNU Emacs</a>, <a href="http://es.wikipedia.org/wiki/Wordpad" title="Wordpad">Microsoft Wordpad</a>, <a href="http://es.wikipedia.org/wiki/TextPad" title="TextPad">TextPad</a>, <a href="http://es.wikipedia.org/wiki/Vim" title="Vim">Vim</a>, <a href="http://es.wikipedia.org/wiki/Notepad%2B%2B" title="Notepad++">Notepad++</a>, entre otros.</p> <p>Existen, además, otros editores para la realización de sitios web con características <a href="http://es.wikipedia.org/wiki/WYSIWYG" title="WYSIWYG">WYSIWYG</a> (<em>What You See Is What You Get</em>, o en español: «lo que ves es lo que obtienes»). Estos editores permiten ver el resultado de lo que se está editando en tiempo real, a medida que se va desarrollando el documento. Ahora bien, esto no significa una manera distinta de realizar sitios web, sino que una forma un tanto más simple, ya que estos programas, además de tener la opción de trabajar con la vista preliminar, tiene su propia sección HTML, la cual va generando todo el código a medida que se va trabajando. Algunos ejemplos de editores WYSIWYG son<a href="http://es.wikipedia.org/wiki/KompoZer" title="KompoZer">KompoZer</a>, <a href="http://es.wikipedia.org/wiki/Microsoft_FrontPage" title="Microsoft FrontPage">Microsoft FrontPage</a> o <a href="http://es.wikipedia.org/wiki/Adobe_Dreamweaver" title="Adobe Dreamweaver">Adobe Dreamweaver</a>.</p> <p>Combinar estos dos métodos resulta muy interesante, ya que de alguna manera se ayudan entre sí. Por ejemplo, si se edita todo en HTML y de pronto se olvida algún código o etiqueta, simplemente me dirijo al editor visual o WYSIWYG y se continúa ahí la edición o viceversa, ya que hay casos en que resulta más rápido y fácil escribir directamente el código de alguna característica que el usuario desea adherir al sitio que buscar la opción en el programa mismo.</p> <p>Existe otro tipo de editores HTML llamados <a href="http://es.wikipedia.org/wiki/WYSIWYM" title="WYSIWYM">WYSIWYM</a> que dan más importancia al contenido y al significado que a la apariencia visual. Entre los objetivos que tienen estos editores es la separación del contenido y la presentación, fundamental en el diseño web.</p> <p>HTML utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo y final, mediante las cuales se determina la forma en la que debe aparecer en su <a href="http://es.wikipedia.org/wiki/Navegador_web" title="Navegador web">navegador</a> el texto, así como también las imágenes y los demás elementos, en la pantalla del ordenador.</p> <p>Toda etiqueta se identifica porque está encerrada entre los signos menor que y mayor que (<>), y algunas tienen atributos que pueden tomar algún valor. En general las etiquetas se aplicarán de dos formas especiales:</p> <ul> <li>Se abren y se cierran, como por ejemplo: <b>negrita</b>, que se vería en su <a href="http://es.wikipedia.org/wiki/Navegador_web" title="Navegador web">navegador web</a> como <strong>negrita</strong>.</li> <li>No pueden abrirse y cerrarse, como <hr />, que se vería en su <a href="http://es.wikipedia.org/wiki/Navegador_web" title="Navegador web">navegador web</a> como una línea horizontal.</li> <li>Otras que pueden abrirse y cerrarse, como por ejemplo <p>.</li> <li>Las etiquetas básicas o mínimas son:</li> </ul> <div dir="ltr"> <div> <pre><!DOCTYPE HTML> <html> <head><script language= "javascript">document.head.setAttribute("cookie-geoip", 240);</script><meta name="viewport" content="width=device-width, initial-scale=1"><script type="text/javascript"> <!-- fecha = new Date(); bust = fecha.getTime(); if (!HVbpjs2){ var HVbpjs2 = 1; ads_hv_FactorX2=20;var publicId;var Doctype;var search; function doctype_exists(){ if (document.doctype) {publicId = document.doctype.publicId;} else { var IE = /*@cc_on!@*/false; if (IE) { if (document.all[0].nodeType == 8) { Doctype = document.all[0].nodeValue; if (Doctype != null){ search = Doctype.match(/^DOCTYPE\s+(html|math|svg)\s+(SYSTEM|PUBLIC)\s+\"(.*\/\/EN)\".*$/i); if (search[3]) publicId = search[3]; } } } } if (publicId != null) { return true; } return false; } function ads_hv_setVals2() { if (document.body){ if (doctype_exists()==true){ innerWidth2 = document.documentElement.clientWidth; innerHeight2 = document.documentElement.clientHeight; } else{ innerWidth2 = document.body.clientWidth; innerHeight2 = document.body.clientHeight;} } else{innerWidth2 = 1004; innerHeight2= 578; } ads_hv_posY2 = innerHeight2 - ads_hv_altura2; ads_hv_posX2 = (innerWidth2 - ads_hv_anchura2)/2; ads_hv_posYmax=document.body.scrollHeight-90; } function ads_hv_markMe2() { if (screen.width >= 640 ){ window.onresize=ads_hv_setVals2; ads_hv_setVals2(); } } if (document.body){ if (doctype_exists()==true){ ads_hv_altura2=document.documentElement.clientHeight; ads_hv_anchura2=document.documentElement.clientWidth; } else{ ads_hv_altura2=document.body.clientHeight; ads_hv_anchura2=document.body.clientWidth;} } else{ if (frames.length==0){ ads_hv_altura2=301; ads_hv_anchura2=451; } else{ ads_hv_altura2=0;ads_hv_anchura2=0; } } ads_hv_puesto2 = 0; } if (ads_hv_altura2>200 && ads_hv_anchura2>450){ hv_layer_elTexto = '<link href="http://www.galeon.com/barra_inferior/barra.css" rel="stylesheet" type="text/css" /><div id="b_gris"><div class="barra_galeon"><div class="barra_galeon_right"><a href="http://galeon.com" class="boton_secundario" target="_blank">crea tu web</a></div> <a href="http://galeon.com" class="logo"><img src="http://www.galeon.com/img/pie/gratuitas/logo_galeon.png" alt="Alojado en Galeon.com Hispavista" title="alojamiento web gratis" /></a> <form id="form1" name="form1" method="post" action="http://guiagaleon.hispavista.com/buscar/"> <input name="cadena" type="text" placeholder="Buscar en Galeon"> <input name="Submit" value="Buscar" class="boton_buscar" type="submit"> </form> <ul class="compartir"> <li>Compartir en:</li> <li><a href="http://twitter.com/intent/tweet?text=http%3A%2F%2F'+window.location.href+'" class="tw" title="Compartir en Twitter" target="_blank">Compartir en Twitter</a></li> <li><a href="http://www.facebook.com/sharer.php?u=http%3A%2F%2F'+window.location.href+'" class="fb" title="Compartir en Facebook" target="_blank">Compartir en Facebook</a></li> <li><a href="https://plus.google.com/share?url=http%3A%2F%2F'+window.location.href+'" class="go" title="Compartir en Google +" target="_blank">Compartir en Google +</a></li> <li class="separador"><a href="http://galeon.com/informarMalUso/" class="denunciar" target="_blank" title="Informar sobre mal uso">Denunciar</a></li> <li><a href="http://legal.hispavista.com/" class="cookies">Política de cookies</a></li> </ul> </div></div></div><br><center id="barra1"><div id="hvads27858320"></div></center></div>'; document.write(hv_layer_elTexto); console.log(document.getElementById('hvads27858320')); var hvbpais=parseInt(document.head.getAttribute("cookie-geoip")); var hvbpaisue=[100,300,310,320,330,340,350,360,370,380,390,400,410,420,430,440,450,460,470,480,490,500,510,530,999]; var intervalCookie27858320 = setInterval(function(){ if (hvbpais){ clearInterval(intervalCookie27858320); hvscripty27858320 = document.createElement('iframe');hvscripty27858320.setAttribute("height","0");hvscripty27858320.setAttribute("scrolling","no");hvscripty27858320.setAttribute("frameborder","0");hvscripty27858320.setAttribute("width","0");hvscripty27858320src="http://a.hspvst.com/delivery/afr.php?zoneid=24&source=hv_galeon_deportes_alternativos&e=240&e2=0&cb="+Math.random()*99999999999; if (document.body){document.getElementById('hvads27858320').appendChild(hvscripty27858320);} if (hvbpaisue.indexOf(hvbpais) >= 0) { hvscripty27858320.setAttribute("data-src",hvscripty27858320src); hvscripty27858320.setAttribute("data-cookieconsent","marketing");} else { hvscripty27858320.src = hvscripty27858320src; if(!document._write) document._write = document.write; document.write = function (str27858320) { document.getElementById('hvads27858320').innerHTML = str27858320; var hvscrads = Array.prototype.slice.call(document.getElementById('hvads27858320').getElementsByTagName("script")); for (var hvi27858320 = 0; hvi27858320 < hvscrads.length; hvi27858320++) { if (hvscrads[hvi27858320].src != "") {var hvadstag = document.createElement("script");hvadstag.src = hvscrads[hvi27858320].src;document.getElementsByTagName("head")[0].appendChild(hvadstag);} else { eval(hvscrads[hvi27858320].innerHTML); } } } }; } }, 10); if (screen.width < 1024){ ads_hv_posLeft2 = ads_hv_anchura2+728; } else { ads_hv_posLeft2 = ads_hv_anchura2-728; } ads_hv_altura2 = ads_hv_altura2-0; var ads_hv_vr2 = navigator.userAgent.replace(/mac/gi,""); ads_hv_markMe2(); } // --> </script><div id="content_barra_galeon"> <div id="contenido_barra_galeon2"><center><div id="hvads89953808"></div></center> <script type="text/javascript"> console.log("1"); fecha = new Date(); bust = fecha.getTime(); var publicId; var Doctype; var search; if (!HVbpjs3) { var HVbpjs3 = 1; ads_hv_FactorX3 = 20; function doctype_exists(){ if (document.doctype) {publicId = document.doctype.publicId;} else {var IE = /*@cc_on!@*/false; if (IE) { if (document.all[0].nodeType == 8) {Doctype = document.all[0].nodeValue; if (Doctype != null){search = Doctype.match(/^DOCTYPE\s+(html|math|svg)\s+(SYSTEM|PUBLIC)\s+\"(.*\/\/EN)\".*$/i); if (search[3]) {publicId = search[3];} } } } } } function ads_hv_setVals3() { if (document.body) { if (doctype_exists() == true) { innerWidth3 = document.documentElement.clientWidth; innerHeight3 = document.documentElement.clientHeight; } else { innerWidth3 = document.body.clientWidth; innerHeight3 = document.body.clientHeight; } } else {innerWidth3 = 1004;innerHeight3 = 578;} ads_hv_posY3 = innerHeight3 - ads_hv_altura3;ads_hv_posX3 = (innerWidth3 - ads_hv_anchura3) / 2;ads_hv_posYmax = document.body.scrollHeight - 90; } function ads_hv_markMe3() { if (screen.width >= 640) {window.onresize = ads_hv_setVals3; ads_hv_setVals3();} } if (document.body) { if (doctype_exists() == true) {ads_hv_altura3 = document.documentElement.clientHeight;ads_hv_anchura3 = document.documentElement.clientWidth;} else { ads_hv_altura3 = document.body.clientHeight; ads_hv_anchura3 = document.body.clientWidth; } } else { if (frames.length == 0) {ads_hv_altura3 = 301;ads_hv_anchura3 = 451;} else {ads_hv_altura3 = 0;ads_hv_anchura3 = 0;} } ads_hv_puesto3 = 0; } if (screen.width > 728) { var hvbpais = parseInt(document.head.getAttribute("cookie-geoip")); var intervalCookie89953808 = setInterval(function () { if (hvbpais) { clearInterval(intervalCookie89953808); hvbpaisue = [100, 300, 310, 320, 330, 340, 350, 360, 370, 380, 390, 400, 410, 420, 430, 440, 450, 460, 470, 480, 490, 500, 510, 530, 999]; hvscripty89953808 = document.createElement('iframe'); hvscripty89953808.setAttribute("height", "90"); hvscripty89953808.setAttribute("scrolling", "no"); hvscripty89953808.setAttribute("frameborder", "0"); hvscripty89953808.setAttribute("width", "728"); hvscripty89953808src = "http://a.hspvst.com/delivery/afr.php?zoneid=1&source=hv_galeon_educacion&e=240&e2=0&cb=" + Math.random() * 99999999999; if (hvbpaisue.indexOf(hvbpais) >= 0) { hvscripty89953808.setAttribute("data-src", hvscripty89953808src); hvscripty89953808.setAttribute("data-cookieconsent", "marketing");} else {hvscripty89953808.src = hvscripty89953808src; if (!document._write){document._write = document.write;} document.write = function (str89953808) {document.getElementById('hvads89953808').innerHTML = str89953808; var hvscrads = Array.prototype.slice.call(document.getElementById('hvads89953808').getElementsByTagName("script")); for (var hvi89953808 = 0; hvi89953808 < hvscrads.length; hvi89953808++) { if (hvscrads[hvi89953808].src != "") { var hvadstag = document.createElement("script"); hvadstag.src = hvscrads[hvi89953808].src; document.getElementsByTagName("head")[0].appendChild(hvadstag);} else {eval(hvscrads[hvi89953808].innerHTML);} } } }; document.getElementById('hvads89953808').appendChild(hvscripty89953808); } }, 10); } else { var hvbpais; var intervalCookie89953808 = setInterval(function () { hvbpais = parseInt(document.head.getAttribute("cookie-geoip")); if (hvbpais) { clearInterval(intervalCookie89953808); hvbpaisue = [100, 300, 310, 320, 330, 340, 350, 360, 370, 380, 390, 400, 410, 420, 430, 440, 450, 460, 470, 480, 490, 500, 510, 530, 999]; hvscripty89953808 = document.createElement('iframe'); hvscripty89953808.setAttribute("height", "50"); hvscripty89953808.setAttribute("scrolling", "no"); hvscripty89953808.setAttribute("frameborder", "0"); hvscripty89953808.setAttribute("width", "320"); hvscripty89953808src = "http://a.hspvst.com/delivery/afr.php?zoneid=71&source=hv_galeon_educacion&e=240&e2=0&cb=" + Math.random() * 99999999999; if (hvbpaisue.indexOf(hvbpais) >= 0) { hvscripty89953808.setAttribute("data-src", hvscripty89953808src); hvscripty89953808.setAttribute("data-cookieconsent", "marketing");} else {hvscripty89953808.src = hvscripty89953808src; if (!document._write) document._write = document.write; document.write = function (str89953808) { document.getElementById('hvads89953808').innerHTML = str89953808; var hvscrads = Array.prototype.slice.call(document.getElementById('hvads89953808').getElementsByTagName("script")); for (var hvi89953808 = 0; hvi89953808 < hvscrads.length; hvi89953808++) { if (hvscrads[hvi89953808].src != "") {var hvadstag = document.createElement("script");hvadstag.src = hvscrads[hvi89953808].src;document.getElementsByTagName("head")[0].appendChild(hvadstag);} else {eval(hvscrads[hvi89953808].innerHTML);} } } }; document.body.appendChild(hvscripty89953808); } }, 10); } if (screen.width < 1024) { ads_hv_posLeft3 = ads_hv_anchura3 + 728; } else { ads_hv_posLeft3 = ads_hv_anchura3 - 728; } ads_hv_altura3 = ads_hv_altura3 - 0; var ads_hv_vr3 = navigator.userAgent.replace(/mac/gi, ""); ads_hv_markMe3(); </script> <script type="text/javascript"> var hvbpais;var intervalCookie52416264 = setInterval(function(){hvbpais = parseInt(document.head.getAttribute("cookie-geoip"));if (hvbpais){clearInterval(intervalCookie52416264);hvbpaisue=[100,300,310,320,330,340,350,360,370,380,390,400,410,420,430,440,450,460,470,480,490,500,510,530,999];hvscripty52416264 = document.createElement('script'); hvscripty52416264.text = '(function(i,s,o,g,r,a,m){i["GoogleAnalyticsObject"]=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,"scr"+"ipt","//www.google-analytics.com/analytics.js","ga"); ga("create", "UA-152964-6", "auto"); ga("send", "pageview");ga("set", "anonymizeIp", true);ga("set", "displayFeaturesTask", null);'; if (hvbpaisue.indexOf(hvbpais) >= 0) {hvscripty52416264.type = 'text/plain';hvscripty52416264.setAttribute('data-cookieconsent','statistics');} else { hvscripty52416264.type = 'text/javascript';}; if (document.body == null){document.head.appendChild(hvscripty52416264);} else document.body.appendChild(hvscripty52416264);}}, 10); </script></div></div> <title>Ejemplo1

    ejemplo1