En este apartado entraremos de lleno a programar hablando una a una de las etiquetas que forman la estructura básica de una web para luego entrar en parrafos, imagenes, estilos, etc. Primeramente veremos el IDE, con el que escribiremos el código de la web y como comentar el código para hacerlo más claro si trabajamos en grupo.
Todo programador cuando empieza a desarrollar debe escoger un IDE, según lo que vaya a utilizar y la comodidad que le proporcione. La mayoría de los que empiezan a programar utilizan Notepad++, un IDE muy sencillo y liviano sin mucho diseño que recomiendo mucho para quien desee aprender a programar ya que no te muestra sugerencias de codigo ni te cierra las etiquetas automaticamente, lo que hace que estes más pendiente del código.
Esta app está escrita usando Brackets. Este es un IDE bastante sencillo lleno de funcionalidades, con un diseño elegante y minimalista realizado con JavaScript. Desde arriba donde dice Brackets.io pueden acceder a la web y desde ahí pueden documentarse si necesitan más información y descargarlo.
Realizar un comentario es HTML es sencillo y muy útil, no solo cuando trabajamos con varios programadores si no también para guiarnos entre tantas lineas de codigo. Los comentarios son omitidos por el navegador, no los interpreta, así que puedes escribir tantos como quieras y esto no afectara al rendimiento de tu web. Esta parte no necesita más explicación pues es algo realmente secillo :)
Se hacen así:
<!-- Texto -->
Ahora entremos a programar con la primera etiqueta:
<html></html>
La etiqueta que lo engloba todo se llama <html>, dentro de ella estará todo lo que formará parte de nuestra web, tanto los articulos de los blogs hasta el titulo que sale en las pestañas del navegador, es por eso que esta etiqueta es muy importante y siempre deberá ser cerrada por </html>
Hay muchas etiquetas, algunas van cerradas y otras no se cierran, por ejemplo (Aunque todavia no lo hayamos visto), la etiqueta <img> no tiene </img> si no que se cierra sola, pulsá abajo para saber por qué antes de avanzar :)
Un atributo sirve para dar ciertas características a una etiqueta (Como el ancho y el alto de una imagen)
La estructura es algo así: nombre="valor"
En la etiqueta <html>, veremos un atributo llamado lang="valor"
La etiqueta <html> deberá llevar el atributo lang="" para especificar el idioma de nuestra web. Si por ejemplo es en español escribes "es" y listo :) Claramente puedes usar el español de México o de Panamá, para ello escribiremos es-mx y es-pa, si quieres ver una lista completa de todas las posibilidades puedes visitar esta web:
Existe otro atributo para la etiqueta <html> que sirve para hacer que tu web pueda verse aunque el usuario sin conexión, esto es algo más avanzado por lo que aquí no veremos como se realiza, pero si te interesa puedes consultar como funciona en la W3Schools.
Ya hemos visto los atributos de <html> y ya esta todo aclarado respecto a esta etiqueta, tienes que recordar que es la primera etiqueta que debes de escribir y contendrá toda nuestra web. Dentro de esta etiqueta tendremos que escribir <head> y <body>, empezaremos aprendiendo la primera de las dos que es la que va antes.