¿Que es HTML y para que sirve?
Definición breve: HTML (HyperText Markup Language) es el lenguaje utilizado para la creación de páginas web.
¿Que significa HTML y que es?
HTML significa "Lenguaje de Marcado de Hypertexto" por sus siglas en ingles "HyperText Markup Language", es un lenguaje que pertenece a la familia de los "lenguajes de marcado" y es utilizado para la elaboración de páginas web. El estándar HTML lo define la W3C (World Wide Web Consortium) y actualmente HTML se encuentra en su versión HTML5.
Cabe destacar que HTML no es un lenguaje de programación ya que no cuenta con funciones aritméticas, variables o estructuras de control propias de los lenguajes de programación, por lo que HTML genera únicamente páginas web estáticas, sin embargo, HTML se puede usar en conjunto con diversos lenguajes de programación para la creación de páginas web dinámicas.
¿Para que sirve HTML?
Básicamente el lenguaje HTML sirve para describir la estructura básica de una página y organizar la forma en que se mostrará su contenido, además de que HTML permite incluir enlaces (links) hacia otras páginas o documentos.
HTML es un lenguaje de marcado descriptivo que se escribe en forma de etiquetas para definir la estructura de una página web y su contenido como texto, imágenes, entre otros, de modo que HTML es el encargado de describir (hasta cierto punto) la apariencia que tendrá la página web.
¿Que son las etiquetas HTML?
Las etiquetas HTML son fragmentos de texto rodeados por corchetes angulares
< >
, que se utilizan para escribir código HTML, en HTML existen etiquetas de apertura y etiquetas de cierre, tienen la forma: <etiqueta> </etiqueta>
. Donde <etiqueta>
es la etiqueta de apertura y </etiqueta>
es la etiqueta de cierre indicada por la diagonal. HTML tiene definidas gran variedad de etiquetas para distintos usos.¿Que es un documento HTML?
Para desarrollar una página web en HTML es necesario crear un documento HTML. Básicamente un documento HTML es un archivo de texto que tienen la extensión .html o .htm, en este documento se escriben todo el texto y las etiquetas HTML necesarias para la creación de una página, al texto escrito en el documento HTML se le llama código HTML. Un documento HTML se puede generar con cualquier editor de textos simple como el bloc de notas de Windows o Gedit de Linux.
Actualmente se habla mucho de que se puede construir una página web completa y optimizada sin necesidad de saber HTML. Y es cierto, pero a la hora de diseñar te vas a encontrar con problemas en los que pensarás «si yo supiera algo de código podría solucionar este inconveniente…». Pues aquí te muestro una pequeña guía para aprender lo básico del código HTML.
Tabla de contenidos [Ocultar]
¿Qué es el código HTML?
Se trata de un lenguaje de programación que se utiliza para el desarrollo de páginas web. Las siglas HTML corresponden a HyperText Markup Language («lenguaje de marcas de hipertexto». Este lenguaje permite estructurar el texto de los documentos y se basa en etiquetas que determinan cómo debe mostrarse el texto y los atributos que pueden tomar dichas etiquetas.
Conceptos básicos del Código HTML
1. Las partes de la página web
Toda página web se divide en dos partes principales: la cabecera y el cuerpo (head y body).
La cabecera es la parte «no visible» de la página web. Esto significa que todo lo que se indique ahí no aparecerá en la página como tal, pero sin embargo es una parte importantísima: ahí se incluyen las etiquetas meta que se usan para describir la página (imprescindibles para el posicionamiento SEO), el título de la página, el idioma, información relacionada con hojas de estilo, etc.
En el body se introducen todas las etiquetas que nos permiten dar formato al documento.
Como esta guía está destinada a pequeñas modificaciones en el cuerpo de la página web, describiré las etiquetas del body y no mencionaré nada más sobre la cabecera. Pero si necesitas ahondar en el tema o en más lenguajes a parte de html, te dejo esta página web, que es excelente para pequeñas consultas que necesites.
2. Los títulos
Las etiquetas que definen los títulos se pueden utilizar para marcar el título y/o los diferentes apartados que forman el documento, o simplemente para resaltar cualquier texto. Existen seis tipos de títulos, que van de la etiqueta número 1 (la más grande) a la 6 (la más pequeña). Esto también es muy importantes para el posicionamiento en buscadores, ya que les estás indicando que lo que está entre estas etiquetas es importante y característico de tu web.
3. Los párrafos
Los párrafos se delimitan con las etiquetas <p>…</p>. Un párrafo es un bloque de texto que se muestra separado del resto por un salto de línea. Si dentro del párrafo queremos hacer un salto, pero que se siga considerando un único párrafo (dar un intro en word) escribiríamos la etiqueta <br>.
Sin embargo, si quieres escribir de manera libre y que te detecte los saltos de línea, solo tienes que escribir dentro de la etiqueta <pre>…</pre>. El único inconveniente de esto es que si copias el texto de otro documento y tiene además listas, títulos, negritas… es posible que no te lo detecte todo.
4. Las listas
Existen tres tipos de listas, las ordenadas, las no ordenadas y las listas de definiciones.
Para las listas ordenadas usamos las etiquetas <ol>…</ol> para delimitar la lista, y para las listas no ordenadas, las etiquetas <ul>…</ul>. Para insertar cada elemento de la lista se introducen las etiquetas<li>…</li>.
En las listas de definiciones, insertamos las etiquetas <dl>…</dl> para delimitar la lista, y <dt>…</dt> y <dd>…</dd> para el título y definición respectivamente.
5. Las tablas
Para realizar una tabla debemos tener en cuenta que se está realizando de izquierda a derecha y de arriba abajo. Es decir, empezamos desarrollando la primera fila, dentro de ella, las determinadas columnas que haya, y a continuación, la siguiente fila.
La tabla debe ir entre la etiqueta <table>, especificando el borde que deseamos. Los comandos que nos delimitan las filas son <tr>…</tr>, y para las columnas <td>…</td>. Para combinar varias columnas o filas utilizamos los atributos colspan o rowspan respectivamente. Si quieres destacar una fila o columna para que se comporte como título utilizamos <th>…</th>. Te muestro un ejemplo.
6. Los enlaces
Los enlaces nos permiten acceder a otras páginas, sitios web, ficheros (de música, vídeos, programas, imágenes, etc.), permiten descargar archivos de la red y acceder a otras partes o secciones dentro de un documento. Se realizan con la etiqueta <a href=»http://www.enlace.com»>…</a>. Aquí debo mencionar un atributo muy importante: target=»_blank», para que el enlace se abra en una pestaña nueva del navegador.
7. Atributos y estilos
Por último, he querido hacer una selección de los atributos y estilos más usados en html. Lo normal es que los estilos se especifiquen en el fichero css, pero como he pretendido que esta guía sirva para realizar pequeñas modificaciones esporádicas, considero que aplicar estilos directamente en una etiqueta de html es una opción recomendable y que nos permite dar solución a problemas que no podemos solventar en nuestro cms, o porque la plantilla no nos da opción.
A continuación te muestro una serie de atributos. Éstos se colocan siempre dentro de una etiqueta, por ejemplo de la siguiente manera: <body bgcolor=»blue»>…</body>
- background=«nombre-del-fichero»: Imagen de fondo
- bgcolor=«color»: Color del fondo
- border=«número»: Tamaño del borde de una imagen o tabla
- bordercolor=«color»: Color del borde
- width=«px o %»: Ancho de una imagen, tabla o bloque. Se puede especificar en píxeles o en porcentaje, siendo 100% el tamaño completo de la pantalla
- height=«px o %»: Altura de una imagen, tabla o bloque
- align=«top, middle, bottom, left, right»: Alineación de una imagen, texto, título, tabla… arriba, en medio, abajo, izquierda o derecha, respectivamente
Te adjunto una lista de los colores que reconoce html por el nombre. Para el resto de colores, deberás introducir el código en concreto, en formato hexadecimal.
Finalmente, te muestro una pequeña lista de estilos más, que en este caso son etiquetas entre las que irá el texto al cuál quieres aplicar dicho estilo:
- Negrita: <b>…</b> o <strong>…</strong>
- Cursiva: <i>…</i>, <em>…</em>, <cite>…</cite> o <dfn>…</dfn>
- Subrayado: <u>…</u>
- Tachado: <s>…</s>
- Subíndice: <sub>…</sub>
- Superíndice: <sup>…</sup>
- Letra pequeña: <small>…</small>
- Letra grande: <big>…</big>
¿Conoces más etiquetas y atributos que son importantes?
Esta es mi pequeña guía de apoyo con el código HTML. Espero que te haya servido de ayuda. Te recomiendo practicar en cualquier editor de texto con una plantilla cualquiera, en la que puedas experimentar… «¿qué pasará si cambio esta etiqueta por esta otra?», recargas la página y ves el resultado. Es la manera más sencilla y útil para aprender y descubrir nuevas etiquetas y atributos.
Con este artículo pretendía explicar lo más básico de html, pero seguro que me he dejado conceptos también básicos que debería haber incluido. Especifícalos y cuéntame tu opinión, e iré mejorando está guía.