HTML
Resumen breve
HTML viene de las siglas en inglés Hypertext Markup Language y es concretamente el lenguaje de señales que constituye una página web. Cada navegador “lee” el HTML y representa su resultado en una pantalla o dispositivo de imagen en forma de página con letras, imágenes, vídeos, gráficos o botones entre muchos otros elementos.
Resumen detallado
Quien quiera hacerse una impresión de cómo es el lenguaje HTML, no tiene más que visitar una de sus páginas web favoritas y con el botón derecho del ratón haciendo clic en “mostrar código fuente”. Así se puede ver la página web en formato puramente HTML. A primera vista este código puede parecer crítico, sin embargo, quizá con la ayuda de un editor especial, se pueden reconocer fácilmente estructuras predeterminadas. EL sistema DOM (document object model) hace que esta estructura tenga sentido, de modo que cada elemento de una página web, como puede ser un párrafo una imagen o un link pueda ser modificado con un código o lenguaje determinado como CSS o Javascript. Cada elemento puede ser formateado, ocultado animado o modificado dinámicamente gracias a estos lenguajes de programación.
Así funciona HTML
El HTML se forma de los llamados tags, que en inglés significa etiqueta y que sienta la estructura de un documento HTML. Estos tags constituyen el inicio y el final de todos los elementos del documento, de modo que para cada elemento, hay un tag de apertura y otro de cierre:
- <h1> Esto es el título principal </h1>
- <p> Esto es un párrafo </p>
La diferenciación entre el encabezado (<head>) y el cuerpo (<body>) de un documento es notorio. En el cuerpo se identifica el contenido, sobre todo el texto, las imágenes, los vídeos y los elementos de diseño. El encabezado solo para programadores y diseñadores, así como para SEO expertos. Aquí se encuentran indicaciones en lenguajes encriptados como JavaScript (<script>), formatos con lenguajes especiales de formato como CSS (<style>) e indicaciones del contenido de la página misma (<title>, <meta>, palabras clave, etc.) Por delante de todos, la entrada <title> un aspecto SEO de gran relevancia ya que no solo se mostrará su contenido en la pestaña del navegador, sino que Google lo utiliza como título en los resultados de búsqueda.
Con HTML se determina en primera instancia la estructura semántica de una página web. Todos los elementos de una página web se pueden moldear con programación HTML y a través de las múltiples plataformas de construcción de páginas web.
Del HTML 1.0 pasando por XHTML hasta HTML5
La historia del lenguaje de programación HTML es tan antigua como el World Wide Web. EN 1992, fue lanzada la primera versión de HTML (HTML 1.0) que aún estaba pensada únicamente para la configuración del texto escrito. Lo más relevante de ese sistema de programación fue el anchor text (<a>). De un modo fácil se podían entonces establecer links de una página a otra, es decir, que en un solo clic se podían alcanzar documentos situados en un servidor a miles de kilómetros de distancia. LA oportunidad de poder vincular diferentes páginas web rápidamente fue el secreto del éxito del HTML.
Después varias modificaciones en la sintaxis del lenguaje durante los 90 (HTML 2, 3, 4) el W3C (World Wide Web Consortium) lanzó en el año 2000 un nuevo desarrollo: XHTML – Extensible HTML. Esta versión de HTML se orientó claramente al metalenguaje XML. EL proyecto fue sin embargo a beneficio del futuro HTML5. HTML5 ofrece muchas facilidades para integrar contenido multimedia, como por ejemplo vídeos, datos de audio, diagramas, gráficos, efectos visuales dinámicos. La estructura completa de una página web (navegador, pie de página, artículo, etc.) puede ser explicada de un modo sencillo con HTML5.
Con el HTML5, en realidad, se reaccionó a la creciente importancia de los dispositivos móviles. Las páginas que están diseñadas según los criterios del HTML5 tienen asimismo ventajas para posicionar en los buscadores más conocidos. Google registra las diferentes versiones de HTML y CSS y da así valoraciones de la actualidad de una página web.
A continuación se puede ver los tags más importantes de HTML:
| Tag | Significado |
| <html> | Este es un tag introductorio para todos los documentos HTML |
| <head> | La “cabeza” del documento para caracterizaciones técnicas de la página |
| <body> | El documento que leen los navegadores |
| <h1>, <h2>, <h3>… | Títulos con diferente ordenación |
| <p> | Párrafo |
| <strong> | Negritas (antes <b>) |
| <em> | Cursivas (antes <i>) |
| <a> | Links |
| <table>, <tr>, <td> | Tabelas, Filas en una tabla, celdas en una tabla |
| <ol>, <ul> | Listas enumeradas, lista con viñetas |
| <li> | Un punto de la lista |
Los tags pueden llevar consigo atributos también, por ejemplo una ID (<p id=“explicación“>) o una clase (<p class=“letrasRojas“>). Sobre las IDs o las clases se puede modificar los elementos que deseemos gracias a los lenguajes JavaScript o CSS.
HTML, JavaScript, PHP & Co.
Para el diseño y la funcionalidad de una página web juegan un fundamental, principalmente, CSS, JavaScript y PHP.
- Con CS (cascading style sheets) se le da diseño al documento de HTML
- JavaScript es un lenguaje de programación que fue desarrollando especialmente para páginas web. Ajax y jQuery utilizan Javascript como base
- PHP (personal homepage tools o hypertext preprocessor) es un lenguaje de programación con muchas ventajas que actúa a nivel de Server. PHP puede engendrar documentos HTML o modificarlos. Junto con grandes bancos de datos como, por ejemplo, los de los e-commerce, es este lenguaje especialmente potente.
.
El formato de cada elemento, como hemos dicho, se realiza a través del lenguaje CSS como, por ejemplo:
- En unos datos CSS hay la siguiente orden: p { color: red; }
- Cada documento HTML, que esté indicado en el dato CSS, mostrará los párrafos (<p>) en rojo
También Google lee HTML
Los robots de los buscadores coomo Google, también analizan el código HTML. Por ejemplo, no solo analizan la frecuencia con la que una determinada palabra clave aparece, sino que también en donde esta aparece. El posicionamiento de las palabras clave juega un papel crucial para la relevancia temática de una página en Internet. Cuando la palabra clave “Flores” aparece en el título h1 (es decir un encabezado de primera importancia), es un indicio muy importante para Google que el conjunto del texto trata sobre flores.
El algoritmo de Google tiene en cuenta por tanto el código HTML. Esto es válido también para fotografías. El archivo de la fotografía misma no es relevante, pes con un atributo-meta, se puede describir una fotografía. Esto le da a Google pistas sobre qué se muestra en la fotografía.
<img src=“blume.jpg“ alt=“Eine rote Blume“>
Más contenido
Quien quiera saber más sobre el tema HTML puede encontrar este pequeño tutorial orientado a las necesidades HTML dentro de la plataforma Textbroker. Una documentación extensa, tutoriales y una introducción a la aplicación del código HTML se ofrece, entre otros lugares, también la Wiki de selfhtml, la página web de w3schools, la página de desarrolladores de Mozilla y html.net.
Resumen
Una página web, cuya programación interna esté realizada acorde con las reglas principales de la sintáctica HTML, no solo tendrá un mejor aspecto, sino que será más reconocida por los motores de búsqueda. Para la generación de textos, hay varios elementos especialmente importantes:
- <h1>Título</h1> (oder <h2>, <h3> usw.)
- <p>Párrafo</p>
- <strong>Negritas</strong>
- <em>Cursivas</em>
Si utilizan estos cuatro tags correctamente, entonces los programadores no tendrán ningún problema en integrar dichos textos en cualquier página web. El diseño final será acabado con códigos de programación como CSS o JavaScript. Quien quiera aprender HTML puede encontrar aquí un tutorial orientado a la redacción en Textbroker.