{"id":6354,"date":"2025-03-24T10:36:54","date_gmt":"2025-03-24T03:36:54","guid":{"rendered":"https:\/\/student-activity.binus.ac.id\/bssc\/?p=6354"},"modified":"2025-06-24T10:47:43","modified_gmt":"2025-06-24T03:47:43","slug":"languages-for-building-websites-the-tools-behind-the-internet","status":"publish","type":"post","link":"https:\/\/student-activity.binus.ac.id\/bssc\/2025\/03\/languages-for-building-websites-the-tools-behind-the-internet\/","title":{"rendered":"Languages for Building Websites: The Tools Behind the Internet"},"content":{"rendered":"<p style=\"text-align: center\"><a href=\"https:\/\/student-activity.binus.ac.id\/bssc\/2025\/03\/languages-for-building-websites-the-tools-behind-the-internet\/screenshot-2025-06-24-103811\/\" rel=\"attachment wp-att-6355\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6355\" src=\"http:\/\/student-activity.binus.ac.id\/bssc\/wp-content\/uploads\/sites\/38\/2025\/06\/Screenshot-2025-06-24-103811.png\" alt=\"\" width=\"610\" height=\"323\" \/><\/a>Source: baraka.uma.ac.id<\/p>\n<p><span style=\"font-weight: 400\">Building a website is an exciting journey that blends creativity and technology. Behind every interactive webpage or sleek design lies a collection of programming languages working together. Each language plays a specific role, much like ingredients in a recipe. Let\u2019s explore the most commonly used languages and understand their purpose in web development.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\"><b>Front-End Development<br \/>\n<a href=\"https:\/\/student-activity.binus.ac.id\/bssc\/2025\/03\/languages-for-building-websites-the-tools-behind-the-internet\/screenshot-2025-06-24-103908\/\" rel=\"attachment wp-att-6356\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6356\" src=\"http:\/\/student-activity.binus.ac.id\/bssc\/wp-content\/uploads\/sites\/38\/2025\/06\/Screenshot-2025-06-24-103908.png\" alt=\"\" width=\"605\" height=\"328\" \/><\/a><\/b><span style=\"font-weight: 400\">Source: namasteui.com<\/span><\/p>\n<p><span style=\"font-weight: 400\">The front-end of a website refers to everything that users interact with directly, including visual elements like buttons, graphics, and text. It involves the graphical user interface (GUI), which allows users to navigate and interact with a website. In technical terms, this is the Document Object Model (DOM), representing the web page\u2019s structure and content. Three main languages are used in front-end development: HTML, CSS, and JavaScript.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">HTML (Hypertext Markup Language)<\/span><\/li>\n<\/ul>\n<p>HTML is the foundation of any webpage. It defines the structure of the website and its content, such as headings, paragraphs, and links. HTML is not a programming language but a markup language that uses tags to organize content.<\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">CSS (Cascading Style Sheets)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">CSS is used to control the layout, design, and visual appearance of a website. It enables web designers to apply styles such as colors, fonts, and spacing. CSS works alongside HTML to create an aesthetically pleasing and responsive layout.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">JavaScript<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">JavaScript is a programming language that adds interactivity and dynamic features to web pages. From interactive maps to live updates, JavaScript allows websites to respond to user actions without reloading the page. It works alongside HTML and CSS, enhancing the functionality of a website.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Front-End Frameworks and Libraries<\/span>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">React.js: An open-source JavaScript library developed by Facebook, React simplifies the creation of interactive user interfaces with reusable components.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Angular: Developed and maintained by Google, Angular is a powerful framework for building large-scale, high-performance web applications. It supports dynamic content, routing, and dependency injection.<\/span><span style=\"font-weight: 400\">Vue.js: A lightweight JavaScript framework for building user interfaces, Vue.js enhances HTML, CSS, and JavaScript with a component-based model and reactivity, allowing automatic updates to the DOM when the state changes.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\"><b>Back-End Development<br \/>\n<a href=\"https:\/\/student-activity.binus.ac.id\/bssc\/2025\/03\/languages-for-building-websites-the-tools-behind-the-internet\/screenshot-2025-06-24-104108\/\" rel=\"attachment wp-att-6357\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6357\" src=\"http:\/\/student-activity.binus.ac.id\/bssc\/wp-content\/uploads\/sites\/38\/2025\/06\/Screenshot-2025-06-24-104108.png\" alt=\"\" width=\"613\" height=\"322\" \/><\/a><\/b><span style=\"font-weight: 400\">Source: ginkgoukraine.com<\/span><\/p>\n<p><span style=\"font-weight: 400\">The back-end is the server side of a website, handling data processing, storing information, and managing user requests. It interacts with databases and APIs, and it is responsible for ensuring that the front-end receives the necessary data and instructions.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">PHP (Hypertext Preprocessor)<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">PHP is a widely used, open-source server-side scripting language. It is particularly popular for building dynamic websites, such as blogs and content management systems (e.g., WordPress). PHP is compatible with many operating systems and web servers, making it versatile and beginner-friendly.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Python<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Python is a high-level, object-oriented language known for its simplicity and readability. It&#8217;s widely used for web development, particularly with frameworks like Django and Flask. Python\u2019s ease of use and vast library support make it a favorite among developers.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">ASP.NET<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">ASP.NET is an open-source framework by Microsoft for building web applications and services. It extends the .NET platform with tools like Razor syntax for dynamic web pages and MVC libraries for creating scalable and maintainable applications.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">Node.js<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">Node.js is a runtime environment that allows developers to run JavaScript on the server side. It is known for its event-driven, non-blocking architecture, which makes it ideal for building high-performance, real-time applications.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center\"><b>Databases<br \/>\n<a href=\"https:\/\/student-activity.binus.ac.id\/bssc\/2025\/03\/languages-for-building-websites-the-tools-behind-the-internet\/screenshot-2025-06-24-104256\/\" rel=\"attachment wp-att-6358\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-6358\" src=\"http:\/\/student-activity.binus.ac.id\/bssc\/wp-content\/uploads\/sites\/38\/2025\/06\/Screenshot-2025-06-24-104256.png\" alt=\"\" width=\"615\" height=\"320\" \/><\/a><\/b><span style=\"font-weight: 400\">Source: Binar Academy<\/span><\/p>\n<p><span style=\"font-weight: 400\">A database stores and organizes data for websites. Databases handle everything from user accounts to transaction records, ensuring that data is easily accessible, secure, and consistent.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">SQL Databases<\/span>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">MySQL: An open-source relational database management system that stores data in tables. It\u2019s widely used for its reliability and support for complex queries.<\/span><\/li>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">PostgreSQL: A powerful, open-source object-relational database system known for its advanced features and data integrity. It supports complex queries and large datasets.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<ul>\n<li style=\"list-style-type: none\"><\/li>\n<\/ul>\n<ul>\n<li style=\"font-weight: 400\"><span style=\"font-weight: 400\">NoSQL Databases<\/span>\n<ul>\n<li><span style=\"font-weight: 400\">MongoDB: A popular NoSQL database that stores data in flexible, JSON-like documents rather than tables. MongoDB is ideal for applications that handle large volumes of unstructured or semi-structured data.<\/span><\/li>\n<li><span style=\"font-weight: 400\">Firebase: A cloud-based platform by Google that provides real-time NoSQL database services, along with analytics, authentication, and push notifications. Firebase simplifies development by handling backend services for mobile and web apps.<\/span><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><span style=\"font-weight: 400\">From the user-friendly front end to the powerful back end and reliable databases, each layer plays a critical role in web development. Whether you&#8217;re building a simple blog or a complex web application, understanding these technologies will help you create efficient, scalable, and engaging websites. By choosing the right tools for your project, you\u2019ll be able to craft websites that come to life, delivering smooth user experiences and robust functionality.<\/span><\/p>\n<p><b>References:<\/b><\/p>\n<p><span style=\"font-weight: 400\">Imoh, William. (2024). What Front End Programming Languages Should You Learn? roadmap. <\/span><a href=\"https:\/\/roadmap.sh\/frontend\/languages\"><span style=\"font-weight: 400\">https:\/\/roadmap.sh\/frontend\/languages<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What\u2019s the Difference Between Frontend and Backend in Application Development? aws.\u00a0 <\/span><a href=\"https:\/\/aws.amazon.com\/compare\/the-difference-between-frontend-and-backend\/\"><span style=\"font-weight: 400\">https:\/\/aws.amazon.com\/compare\/the-difference-between-frontend-and-backend\/<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">S, Astari. (2023). What Is HTML? Hypertext Markup Language Basics Explained. Hostinger Tutorials. <\/span><a href=\"https:\/\/www.hostinger.com\/tutorials\/what-is-html\"><span style=\"font-weight: 400\">https:\/\/www.hostinger.com\/tutorials\/what-is-html<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Corbo, Anthony. (2022). What Is CSS?. builtin. <\/span><a href=\"https:\/\/builtin.com\/software-engineering-perspectives\/css\"><span style=\"font-weight: 400\">https:\/\/builtin.com\/software-engineering-perspectives\/css<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is JavaScript? MDN Web Docs. <\/span><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/First_steps\/What_is_JavaScript\"><span style=\"font-weight: 400\">https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/First_steps\/What_is_JavaScript<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Herbert, David. (2022). What is React.js? Uses, Examples, &amp; More. hubspot. <\/span><a href=\"https:\/\/blog.hubspot.com\/website\/react-js\"><span style=\"font-weight: 400\">https:\/\/blog.hubspot.com\/website\/react-js<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is Angular? angular.dev. <\/span><a href=\"https:\/\/angular.dev\/overview\"><span style=\"font-weight: 400\">https:\/\/angular.dev\/overview<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. Introduction. vuejs.org. <\/span><a href=\"https:\/\/vuejs.org\/guide\/introduction.html\"><span style=\"font-weight: 400\">https:\/\/vuejs.org\/guide\/introduction.html<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">S, Astari. (2024). What Is PHP: Understanding the Scripting Language. Hostinger Tutorials. <\/span><a href=\"https:\/\/www.hostinger.com\/tutorials\/what-is-php\/\"><span style=\"font-weight: 400\">https:\/\/www.hostinger.com\/tutorials\/what-is-php\/<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is Python? Executive Summary. python.org. <\/span><a href=\"https:\/\/www.python.org\/doc\/essays\/blurb\/\"><span style=\"font-weight: 400\">https:\/\/www.python.org\/doc\/essays\/blurb\/<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is ASP.NET? dotnet.microsoft. <\/span><a href=\"https:\/\/dotnet.microsoft.com\/en-us\/learn\/aspnet\/what-is-aspnet\"><span style=\"font-weight: 400\">https:\/\/dotnet.microsoft.com\/en-us\/learn\/aspnet\/what-is-aspnet<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. About Node.js\u00ae. nodejs.org. <\/span><a href=\"https:\/\/nodejs.org\/en\/about\"><span style=\"font-weight: 400\">https:\/\/nodejs.org\/en\/about<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Jain, Pulkit. 2024. What is a Database? Everything You Need to Know. simplilearn. <\/span><a href=\"https:\/\/www.simplilearn.com\/tutorials\/dbms-tutorial\/what-is-a-database\"><span style=\"font-weight: 400\">https:\/\/www.simplilearn.com\/tutorials\/dbms-tutorial\/what-is-a-database<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is SQL Database? azure.microsoft. <\/span><a href=\"https:\/\/azure.microsoft.com\/en-us\/resources\/cloud-computing-dictionary\/what-is-sql-database\"><span style=\"font-weight: 400\">https:\/\/azure.microsoft.com\/en-us\/resources\/cloud-computing-dictionary\/what-is-sql-database<\/span><\/a><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is MySQL? MySQL. <\/span><a href=\"https:\/\/dev.mysql.com\/doc\/refman\/8.4\/en\/what-is-mysql.html\"><span style=\"font-weight: 400\">https:\/\/dev.mysql.com\/doc\/refman\/8.4\/en\/what-is-mysql.html<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. About. PostgreSQL. <\/span><a href=\"https:\/\/www.postgresql.org\/about\/\"><span style=\"font-weight: 400\">https:\/\/www.postgresql.org\/about\/<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is a NoSQL database? IBM. <\/span><a href=\"https:\/\/www.ibm.com\/topics\/nosql-databases\"><span style=\"font-weight: 400\">https:\/\/www.ibm.com\/topics\/nosql-databases<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">n.d. n.d. What is MongoDB?. IBM. <\/span><a href=\"https:\/\/www.ibm.com\/topics\/mongodb\"><span style=\"font-weight: 400\">https:\/\/www.ibm.com\/topics\/mongodb<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400\">Stevenson, Doug. (2018). What is Firebase? The complete story, abridged. medium. <\/span><a href=\"https:\/\/medium.com\/firebase-developers\/what-is-firebase-the-complete-story-abridged-bcc730c5f2c0\"><span style=\"font-weight: 400\">https:\/\/medium.com\/firebase-developers\/what-is-firebase-the-complete-story-abridged-bcc730c5f2c0<\/span><\/a><span style=\"font-weight: 400\">\u00a0<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Source: baraka.uma.ac.id Building a website is an exciting journey that blends creativity and technology. Behind every interactive webpage or sleek design lies a collection of programming languages working together. Each language plays a specific role, much like ingredients in a recipe. Let\u2019s explore the most commonly used languages and understand their purpose in web development. [&hellip;]<\/p>\n","protected":false},"author":43,"featured_media":6355,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[],"class_list":["post-6354","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-article"],"_links":{"self":[{"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/posts\/6354","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/users\/43"}],"replies":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/comments?post=6354"}],"version-history":[{"count":4,"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/posts\/6354\/revisions"}],"predecessor-version":[{"id":6362,"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/posts\/6354\/revisions\/6362"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/media\/6355"}],"wp:attachment":[{"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/media?parent=6354"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/categories?post=6354"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/student-activity.binus.ac.id\/bssc\/wp-json\/wp\/v2\/tags?post=6354"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}