Actualmente el estándar usado para el desarrollo web es HTML5 así que nos basaremos en este para conocer sus etiquetas y su estructura.
Nuestra primer página
<!doctype html><!-- Indica el tipo de documento --><html><!-- Inicio de la página web... etiqueta de apertura -->
<head><!-- Inicia el encabezado del documento... esto no se ve en la página web -->
<meta charset="UTF-8"><!-- Definimos la codificación de nuestra página -->
<title>Nuestra Primer Página HTML</title><!-- Creamos el titulo -->
</head><!-- etiqueta de cierre de nuestro encabezado -->
<body><!-- Inicia el contenido de nuestra página, esto se vizualizara en pantalla -->
Esta es mi Primer página web que hemos echo
</body><!-- Termina nuestro contenido -->
</html><!-- Etiqueta de cierre de nuestro archivo html -->
Con este código hemos creado la estructura de una página web, ahora vamos a explicar un poco las etiquetas que usamos. Del código escrito lo único relevante es lo que esta resaltado en negrita, recordemos que todo lo demás son comentarios, los cuales ya fueron tratados en la entrada anterior y que no van a aparecer a la hora de visualizar nuestro archivo en un navegador.
Ahora esplicare las nuevas etiquetas para que las vallas reconociendo.
En primer lugar tenemos nuestro: <!doctype html> el cual lo que hace es indicar el tipo de documento que estamos creando, en este caso html, anteriormente en versiones html mas antiguas, declarar un doctype era un poco complicado por la cantidad de valores a introducir dentro de el, pero ahora con el uso del html5 muchos cambios se realizaron e hicieron más fácil y mas entendible las etiquetas, y el doctype quedo realmente fácil de usar.
La segunda etiqueta usada: <html> es la que indica nuestro inicio del documento a realizar, notaras que su etiqueta de cierre se encuentra hasta el final y que a su vez estas encierran mas etiquetas dentro de ellas.
Este punto fue saltado en la entrada sobre las etiquetas porque no era de utilidad en su momento, pero ahora es nuevo punto a tomarse en cuenta, las etiquetas pueden encerrar otras etiquetas dentro de ellas y las que se encuentren dentro tomarán las caracteristicas de las que las encierre, a esto se le llama modelo de caja, pero por ahora no será importante y no trataremos este tema sino hasta más adelante.Nuestra siguiente etiqueta es: <head> Esta etiqueta es el encabezado de nuestro documento, este contenido no se mostrará en nuestro navegador pero dentro de esta etiqueta se encerrarán otras que son de gran importacia para el navegador así como para los indexadores de contenido como google.
La siguiente etiqueta usada es: <meta> Esta etiqueta en si no dice ni hace nada y aquí empezamos a usar las propiedades, meta es una etiqueta con diversas propiedades para este caso empleamos charset y le asignamos un valor charset="UTF-8", lo que le dijimos es que a meta le asignemos una codificación UTF-8, que es el tipo de caracteres que usaremos para crear nuestros documentos, existen más codificaciones pero para emplear acentos y caracteres especiales es el que te recomiendo.
Otra cosa importante de la etiqueta <meta> es que es una etiqueta que no tiene cierre, es decir solo se declara la apertura y se agregan sus propiedades con su valor pero esta no necesita encerrar ningún contenido.La siguiente etiqueta empleada es <title> que es la etiqueta que encerrará el titulo para nuestra página web, esta etiqueta tiene apertura y cierre y su contenido será lo que muestre nuestro navegador como titulo de nuestra web.
Importante no explicare las etiquetas de cierre porque ya fueron tratadas en la entrada anterior y estas solo sirven para encerrar un bloque de texto o etiquetas, además estas etiquetas no tiene propiedades.Nuestra etiqueta <body> es donde se escribirá toda la estructura de nuestra página web y por lo tanto será dentro de ella que se escriban todas nuestras etiquetas que usemos para nuestra página.
Esta estructura será repetida cada vez que hagamos una nueva página web así que si no la conoces o no la sabes debes ir aprendiendola, es de gran importancia.
Mira como quedo nuestro ejemplo
No hay comentarios:
Publicar un comentario