Esta serie de tutoriales le guiará a través de la creación y posterior personalización de este sitio web utilizando HTML, el lenguaje de marcado estándar utilizado para mostrar documentos en un navegador web. No es necesario tener experiencia previa en codificación, pero le recomendamos que empiece por el principio de la serie si desea recrear el sitio web de demostración.
Al final de esta serie, debería tener un sitio web listo para desplegar en la nube y una familiaridad básica con HTML. Saber cómo escribir HTML proporcionará una base sólida para aprender habilidades adicionales de desarrollo web front-end, como CSS y JavaScript.
HTML se utiliza para marcar un documento con instrucciones que indican al navegador cómo mostrar e interpretar el contenido del documento. Por ejemplo, HTML puede indicar al navegador qué contenido de texto debe interpretarse como un título y qué contenido de texto debe interpretarse como párrafos. HTML también se utiliza para añadir imágenes y asignar enlaces a textos e imágenes. Estas instrucciones se comunican mediante etiquetas HTML, que se escriben así <tagname>. Muchas etiquetas, aunque no todas, utilizan una etiqueta de apertura y otra de cierre para envolver el contenido que se utiliza para modificar.
Para tener una idea de cómo se utilizan estas etiquetas, vamos a inspeccionar un fragmento de código HTML. El código HTML siguiente muestra cómo se utilizan las etiquetas HTML para estructurar el texto y añadir enlaces e imágenes. No te preocupes si no entiendes las etiquetas inmediatamente- las estudiaremos en el próximo tutorial.
<h1>Sammy's Sample HTML</h1><p>This code is an example of how HTML is written.</p><p>It uses HTML tags to structure the text.</p><p>It uses HTML to add a <a href="digitalocean.com/community">link</a>.</p><p>And it also uses HTML to add an image:</p><img src="https://html.sammy-codes.com/images/small-profile.jpeg"/>Este código HTML se renderiza en el navegador de la siguiente manera:
Ahora deberías entender cómo se renderiza el código HTML de ejemplo en un navegador. A continuación, aprenderemos a ver el código fuente de cualquier página web utilizando una herramienta de navegación.
Visualización del código fuente de una página web
Casi todas las páginas web con las que se encuentra utilizan HTML para estructurar y mostrar las páginas HTML. Puedes inspeccionar el código fuente de cualquier página web utilizando un navegador web como Firefox o Chrome. En Firefox, vaya a la opción de menú «Herramientas» en el menú superior y haga clic en «Desarrollador web/Fuente de la página» así:
En Firefox, también puedes usar el atajo de teclado Command-U para ver el código fuente de una página web.
En Chrome, el proceso es muy similar. Navega hasta el elemento del menú superior «Ver» y haz clic en «Desarrollador/Ver fuente». También puedes utilizar el atajo de teclado Option-Command-U.
Prueba a inspeccionar el código fuente del sitio web de demostración que construiremos en esta serie de tutoriales. Debería recibir una página con muchas más etiquetas HTML que nuestro ejemplo anterior. No se alarme si parece abrumador. Al final de esta serie de tutoriales, usted debe tener una mejor comprensión de cómo interpretar el código fuente HTML y cómo utilizar HTML para construir y personalizar sus propios sitios web.
Nota: Como se mencionó anteriormente, puedes inspeccionar el código fuente de cualquier página web utilizando herramientas del navegador web Firefox o Chrome. Intenta inspeccionar el código de algunos de tus sitios web favoritos para hacerte una idea del código subyacente que estructura los documentos web. Aunque el código fuente de estos sitios probablemente contenga más lenguajes que el HTML, aprender primero el HTML le ayudará a prepararse para aprender otros lenguajes y marcos de trabajo para crear sitios web más adelante si lo desea.