Html, hypertext markup lenguaje, lenguaje de marcado de hipertexto, es un lenguaje que sirve para describir documentos, específicamente páginas web. Es parte del un lenguaje más extenso y general XML o XHTML (la X viene de eXtendido) que sirve para describir todo tipo de documentos.
En html un documento está formado por elementos. Cada elemento se escribe mediante etiquetas (o marcas, de ahí lo de lenguaje de marcado).
Etiquetas html (tags)
Las etiquetas constan de una o más palabras rodeadas por corchetes angulares(<,>). Pueden ser de apertura o de cierre. Las de cierre comienzan por una barra / dentro de los corchetes angulares.Ejemplo:
Etiqueta de apertura:
<html> Etiqueta de cierre:
</html>
Elementos html
Hay 2 tipos de elementos en cuanto al número de etiquetas:- Elementos con 2 etiquetas, una de apertura y otra de cierre.
- Elementos con 1 etiqueta. El ejemplo más claro es <br>, que sirve para marcar un salto de linea.
- atributos: suelen seguir al identificador del tipo de etiqueta y proporcionan información adicional acerca del elemento. Vienen en forma de pares nombre_de_atributo = "valor"
- contenido: Es lo que queda entre las etiquetas de apertura y cierre.
<a href="http://www.w3schools.com"> buena página para aprender html</a>
Cómo se vé en un navegador web: buena página para aprender html
En este ejemplo tenemos un elemento html que es un hipervinculo o enlace. Los enlaces se marcan con la etiqueta <a>. El hipervínculo tiene un atributo href que se utiliza para especificar la página a la que apunta el hipervinculo. Este hipervinculo apunta a http://www.w3schools.com. El enlace tiene un contenido, que es el texto: buena página para aprender html. El enlace termina con una etiqueta de cierre de hipervínculo: </a>
Hay elementos y etiquetas html para marcar todo tipo de elementos que pueden incluirse en un documento:
distintos niveles de encabezado: h1, h2, h3, h4...
hipervinculos: <a>
saltos de linea: <br>
párrafos: <p>
imágenes: <im>
párrafos pre-formateados: <pre>
y una larga lista más, que no tiene sentido repetir aquí.
Algunas particularidades del html
- El html no es sensible al caso: las etiquetas, atributos, etc se pueden escribir en mayúsculas, minúsculas o cualquier combinación de las mismas. A pesar de ello conviene seguir un estilo consistente por claridad. En particular yo prefiero escribir todo en minúsculas.
- En un documento html el formato viene especificado en el propio documento, da igual el formato que se le dé al archivo en si. Por ejemplo:
<p> Esto es un párrafo con una primera linea y una segunda linea, y una tercera, pero como no se han especificado los saltos de linea con etiquetas, el texto sale todo seguido en un navegador web, ocupando el espacio que tenga que ocupar. </p>
En un navegador web eso se ve:
Esto es un párrafo con una primera linea y una segunda linea, y una tercera, pero como no se han especificado los saltos de linea con etiquetas, el texto sale todo seguido en un navegador web, ocupando el espacio que tenga que ocupar.
Para especificar los saltos de linea habría que haberlos marcado con etiquetas <br>:
<p> Esto es un párrafo con una primera linea <br> y una segunda linea, <br> y una tercera, pero como no se han especificado los saltos de linea con etiquetas, el texto sale todo seguido en un navegador web, ocupando el espacio que tenga que ocupar. </p>
o bien haber usado la etiqueta <pre> en lugar de <p>, que sirve para marcar texto preformateado, que es texto que se mostrará tal cual está escrito en el archivo html.
<pre> Esto es un párrafo con una primera linea y una segunda linea, y una tercera, pero como no se han especificado los saltos de linea con etiquetas, el texto sale todo seguido en un navegador web, ocupando el espacio que tenga que ocupar. </pre>
- Los caracteres barra de espacio consecutivos se eliminan, hasta dejar sólo uno. Así:
esto es un texto con muchos espacios en blanco en el medio
Si no se usa la etiqueta <pre> se vé en un navegador como:
esto es un texto con muchos espacios en blanco en el medio
- Los comentarios (notas explicativas o similar que se escriben en un archivo pero que no se quiere que interprete el navegador web y que es como si no estuvieran escritas) se abren con <!-- y se cierran con -->
Orden y colocación de elementos
Cómo se ordenan y colocan los elementos en una página es un tema complicado y daría para un curso en sí mismo. Como sólo pretendemos dar unas nociones muy básicas de html se aconseja ir a una buena página para aprender html para esa y otras cuestiones.Un documento html5 mínimo
A continuación se presenta el esqueleto mínimo de documento html. Estrictamente podría tener menos elementos, pero lo más común es que tenga al menos un elemento<html> y dentro de ellos un elemento <head> y un elmento <body>. Además el elemento <!DOCTYPE html> especifica que se trata de un documento html5. Para el elemento DOCTYPE es el único para el que me salto la norma de escribir las etiquetas en minúscula.<!DOCTYPE html> <html> <head> </head> <body> </body> </html>
Eso es un documento html válido. Si se escribe en un archivo en un editor de texto y se guarda con extensión .html o .htm y luego se abre ese archivo con un navegador web se vé..... nada :D porque aparte de declarar los elementos básicos no hemos incluido ningún contenido en ellos. Lo normal será incluir un <title> en el <head> y algún encabezado y texto en el <body>. Por ejemplo:
<!DOCTYPE html> <html> <head> <title> El título de la página sale en la pestaña del navegador </title> </head> <body> <h1> Encabezado de primer nivel <h1> <p> Texto.....................</p> </body> </html>
Para trastear con html
Un par de opciones sencillas:- usar un editor de texto y crear un archivo con extensión .htm o .html y abrirlo con un navegador web.
- usar el editor interactivo de w3schools. En un lado se escribe y en el otro aparece el resultado tras presionar el botón "Submit code".
No hay comentarios:
Publicar un comentario