Estructura interna de una página HTML.
Las instrucciones HTML están encerradas entre los caracteres: < y >.
Muchos elementos HTML requieren una marca de comienzo y otra de finalización. Todo aquello que está fuera de las marcas del lenguaje se imprime en la pantalla (dentro del navegador).
La estructura básica de una página HTML es:
<!DOCTYPE html> <html> <head> <title>Título de la página</title> <meta charset="UTF-8"> </head> <body> Cuerpo de la página. </body> </html>
Una página HTML es un archivo que generalmente tiene como extensión los caracteres html. Por ejemplo podemos llamar a nuestra primer página con el nombre: pagina1.html
Durante este curso no necesitará utilizar otra herramienta más que este sitio. Veremos que contamos con una ventana donde tipeará la página y en otra verá los resultados que genera el navegador. No significa que no pueda hacerse una copia de los ejercicios que desarrolla y almacenarlos en su computadora para probarlo (más adelante veremos como hacer esto)
Estos son los elementos básicos que toda página HTML debe llevar:
Lo primero es el DOCTYPE que informa al navegador que el contenido siguiente se trata de un archivo HTML (todos los navegadores modernos analizan la presencia del DOCTYPE)
Luego continúa con la marca:<html> y finaliza con la marca:</html> al final del archivo.
Los fines de marcas tienen el mismo nombre que el comienzo de marca, más el caracter /
Una página HTML tiene dos secciones muy bien definidas que son la cabecera:
<head> </head>
Y el cuerpo de la página:
<body> Cuerpo de la página. </body>
En la cabecera es común inicializar el título de la página dentro de las marcas <title></title> (normalmente aparece en la barra superior de nuestro navegador y es utilizado por los motores de búsqueda como Google para indexar la página) El título debe hacer referencia al contenido en sí de la página.
Dentro de la cabecera disponemos la etiqueta meta donde definimos la propiedad charset con el valor UTF-8 que es un formato de caracteres ampliamente empleado en internet (si no disponemos este formato no podemos disponer caracteres acentuados por ejemplo, más adelante veremos en profundidad la etiqueta meta):
<meta charset="UTF-8">
Todo el texto que dispongamos dentro del <body> aparece dentro del navegador tal cual lo hayamos escrito.
Todas las páginas tiene como mínimo esta estructura: cabecera y cuerpo.
Otra cosa importante es que el lenguaje HTML no es sensible a mayúsculas y minúsculas, es decir podemos escribirlo como más nos guste, además no requiere que dispongamos cada marca en una línea (podríamos inclusive escribir toda la página en una sola línea! cosa que no conviene ya que somos nosotros quienes tendremos que modificarla en algún momento).
Ahora puede ir a la sección de problema resuelto y ver el ejemplo ejecutándose en el navegador. Podrá ver la pantalla dividida en tres partes: primero se enuncia el problema, la segunda parte es el editor donde tipeamos la solución al problema (en este caso ya está resuelto por lo que aparece automáticamente) y la última sección de la pantalla muestra la página ejecutándose en el navegador.
Por último deberá resolver un problema, es decir confeccionar una página HTML. Recomiendo tipear las marcas HTML para aprenderlas de memoria. No es conveniente copiar y pegar. Cuando recuerde todas las marcas, podrá copiar y pegar trozos de páginas HTML para agilizar el desarrollo.
