Primero declararemos el tipo de documento y luego definiremos las etiquetas básicas de todo documento HTML.
Tras agregar el DOCTYPE del documento debemos incluir las etiquetas de apertura y de cierre de html:
<!DOCTYPE html>
<html>
...
</html>
Todo lo que se incluya entre estas dos etiquetas será interpretado como código HTML. La etiqueta <html> se usa para indicar el inicio del documento y suele situarse justo después de la declaración DOCTYPE. La etiqueta de cierre </html> se usa para indicar el último elemento HTML presente en el documento. Tal y como ya hemos visto, la etiqueta de cierre es igual que la de apertura, salvo porque contiene una barra inclinada / .
Entre las etiquetas <html> y </html> debemos definir ahora dos componentes fundamentales en todo documento HTML que son la cabecera o <head> y el cuerpo o <body>.
<!DOCTYPE html>
<html>
<head>
<!--Esta es la seccion del head del HTML -->
</head>
<body>
<!--Esta es la seccion del body del HTML -->
</body>
<script>
//Esta es la seccion del codigo JavaScript del HTML
</script>
</html>
La cabecera o head de un documento HTML se define entre la etiqueta de apertura <head> y la de cierre </head>. Esta sección es esencial a la hora de crear una página web, ya que contiene el título y ciertos recursos como las hojas de estilos o ciertos scripts. Los recursos pueden ser tanto internos como externos, pudiendo estar situados en un servidor externo o en el propio servidor o sistema local en el que reside el archivo HTML.
Muchos de los elementos que se definen en esta sección no son directamente visibles en la página.
La etiqueta <head> no debe incluir atributos en su definición. Se trata sencillamente de una etiqueta contenedora que incluye otras etiquetas en su interior, como por ejemplo las etiquetas title, script, noscript, link, style, base y meta.
Investiga que información puede añadirse en las etiquetas title, script, noscript, link, base
Procura no copiar directamente desde una IA
El cuerpo o body de un documento HTML se define entre la etiqueta de apertura <body> y la de cierre </body>. En esta sección se definen los elementos visibles de la página, siendo la sección en la que está el contenido de la misma.
Es posible agregar scripts JavaScirpt a un documento HTML mediante la etiqueta <script>. Puedes incluir código JavaScript directamente entre la etiqueta de apertura y de cierre de este elemento:
<script>
// código JavaScript
</script>
A este método de agregar código JavaScript también se le llama código JavaScript «inline».
También puedes cargar scripts externos mediante el atributo src de este elemento:
<script src="js/archivo.js"></script>
Los scripts pueden residir en cualquier parte del documento, pero lo recomendable es situarlos al final de la página.
Lo idóneo es colocar los scripts al final de la página, justo antes del cierre de la etiqueta body, de modo que la página ya se haya mostrado en el navegador y podamos hacer referencia a cualquier elemento HTML de la página desde el script sin errores en el mismo. De este modo mejoramos el rendimiento de la misma.
Puedes agregar recursos externos al documento en la sección head del documento mediante la etiqueta link. Esta etiqueta no contiene etiqueta de cierre y se suele usar cuando quieres agregar hojas de estilos CSS. En el siguiente ejemplo cargamos una hoja de estilo situada en el directorio css/estilos.css:
<!DOCTYPE html>
<html>
<head>
...
<link href="css/estilos.css" rel="stylesheet">
...
</head>
...
</html>
Mediante el atributo href especificamos la localización de la hoja de estilos, ya sea interna o externa. Mediante el atributo rel especificamos el tipo de recurso.
Ya hemos visto cómo agregar hojas de estilos externas. Sin embargo, también podemos agregar estilos en el propio documento mediante la etiqueta <style>
Codigo de Style
<style>
.ejemplo
{
color: blue;
}
</style>
<!DOCTYPE html>
<html>
<head>
<!--Esta es la seccion del head del HTML -->
<style>
.color-azul { color: blue; }
.color-rojo { color:red;}
.color-verde { color:lightgreen }
</style>
</head>
<body>
<!--Esta es la seccion del body del HTML -->
<H1 class="color-azul">Titulo en color azul</H1>
<H1 class="color-rojo">Titulo en color rojo </H1>
<H1 class="color-verde">Titulo en color verde </H1>
</body>
<script>
//Esta es la seccion del codigo JavaScript del HTML
</script>
</html>
1) Investiga como definir un color en HTML , 2) Modifica el codigo anterior en la seccion de estilos para alterar los colores.
Procura no copiar directamente desde una IA
Las meta etiquetas se agregan en la sección head de la página y sirven para llevar a cabo una gran variedad de tareas. Se representan mediante la etiqueta meta y solamente incluyen etiqueta de apertura, por lo que no incluyen otros elementos en su interior.
Las mayor parte de las meta etiquetes usan el atributo name para que así el navegador pueda identificarlas.
La meta etiqueta más utilizada es la meta etiqueta description, usada para describir el contenido de la página.
La meta etiqueta charset se usa para definir la codificación de caracteres de la página, que en la mayor parte de los casos será utf-8, que incluye un amplio abanico de caracteres, por lo que tiene un alto grado de compatibilidad:
<meta charset="utf-8">
Otra meta etiqueta muy utilizada es aquella que se usa para especificar el viewport del documento, indicando al navegador que configure el ancho de la página en base al ancho del dispositivo:
<meta name="viewport" content="width=device-width, initial-scale=1">
Investiga por que es importante especificar el viewport
Procura no copiar directamente desde una IA