When you open a Web browser and type "something dot something" then hit ENTER, a lot happens between the time of your keyboard press and seeing naked dog pictures on your monitor. Within milliseconds, several connected systems all over the world go to work on your request. This is how it comes together, from beginning to end.
What is a Website?
Every Website starts with a single page that holds blocks of content that are used to create a static or flexible layout. With a simple or complex navigation system, any number of these pages can be accessed from other pages. But before any of this happens, a Website requires a series of steps and technologies to make it a resource.
- Domain Name: This is the Web address that users type into their browsers to access a site (e.g., highorbit.io). A domain name is registered through a domain registrar, and both the name and the extension (.com, .shop, .org, .io, etc.) can be unique.
- Web Hosting: Web hosting is a service that provides the infrastructure and technologies for a Website to be accessible. There are various types of hosting options, including shared hosting, VPS hosting, dedicated hosting, and cloud hosting.
- Content: This includes text, images, videos, and other media that will populate a site. Ideally, and simply because it has SEO implications, content should match the site's purpose.
- Web Development Tools: Anyone with a lot of patience and knowledge can create a Website using various development tools and technologies.
- HTML: HyperText Markup Language is the basic markup language for building pages.
- CSS: Cascading Style Sheets are used for styling the layout and appearance.
- JavaScript: A programming language that adds interactivity and dynamic behavior.
- Text Editor or Integrated Development Environment (IDE): A tool that is super useful for editing coding languages. My favorite is Visual Studio Code, others include Sublime Text, Atom, and Notepad ++.
- Testing and Deployment: Before launching a Website, I test it across different browsers and devices to ensure compatibility and functionality. Once everything looks good, I'll deploy it to a hosting server.
- Domain Name System (DNS) Configuration: After a client purchases a domain name and Web hosting, I configure their DNS settings to point their domain name to their hosting server.
- Security Measures: I'll implement security measures such as SSL certificates (HTTPS) to encrypt data transmitted between a client Website and visitor browsers, and I'll even implement protection against common security threats like hacking and malware.
No matter how sophisticated a site appears, its basic structure is always a collection of connected pages.
I mentioned hosting above, and this is where thousands of Web files are stored. A Website developer like myself creates each of those files using different coding languages, the most basic being HTML (hyper-text markup language). This 'code' is what a Web browser translates into a Human-readable format to make images, text, and videos appear.
Assisting coding languages such as, Cascading Style Sheets (CSS), Hypertext Preprocessor (PHP) and JavaScript (JS) are often used to give pages more appeal and usability by showing animations, processing form submissions or filtering items based on price.
How does all of this get to my browser?
The process of showing a Website in your browser is not unlike getting in your car and driving to a physical address, except a lot faster.
- Address: Just like a physical location has an address, a Website has a unique address called a URL (Uniform Resource Locator), which you type into your Web browser.
- Request: When you type a URL or click a link, your browser sends a request to a specialized computer called a server, for files associated with that address.
- Process: The server receives the request and fetches the requested page. It may need to gather information from databases or run programs to create the page you asked for.
- Send: Once the page is ready, the server sends it back to your browser.
- Receive and Display: Your browser receives the page and reads the code (usually HTML, CSS, and JavaScript) to understand how to display it.
- Render: Your browser then converts this code into the visual layout you see on your screen, including text, images, and interactive elements.
- Interact: You can click links, fill out forms, watch videos, and more. Your browser sends additional requests to the server as needed to get more content or update the page.
- Feedback Loop: This process repeats as you interact with the site, allowing you to navigate through different pages and access various resources.
As long as the connection between all associated computers (your computer and the Web server for example) is stable, this back and forth process happens within milliseconds.
