Introduction
To start your journey of learning web programming, it is essential to have a basic knowledge of programming.
In this guide, we will answer some of the questions that are on the mind of any beginner who intends to enter the world of website development, the first of which is: What is web development?
We will learn together about the concept of the web, then we will review the basic programming language in this field, which is HTML.
We will start by learning the basics of HTML, the language used to build and write web pages.
We will also touch on the concept of links or URLs, which represent addresses that point to other documents and sites on the Internet.
Step by step, we will reach the stage of creating your first page on the web. But first of all, let's start by understanding the basics of the web and where we should start in this broad field.
Introduction to Web Development
What is Web Development?
It is one of the most famous fields of programming and freelancing. The field of web development specializes in creating and programming websites, web applications and pages.
What are the fields of web development?
For you, learning web programming is one of the most important decisions you will make in your life if you are passionate about this field. Then you will have to choose from the three most important fields in website development:
- Front-End Development
- Back-End Development
- Fullstack Developer
All of this will be explained in separate posts. In this article, we will only take a general idea about the field without going into many details.
Anyone interested in this field should take a quick look at some basic concepts, including the definition of the web.
What is the web: how does it work and how is it built?
What is The Web
We previously learned what web development is. But now we must define the web and also know its basic structure.
The web is a set of documents written in HTML, along with other resources such as images and videos, as well as programs and services that interact with each other to produce a distinctive web page.
Everything you can access using your web browser is part of the web, and these resources are distributed across thousands of different computer systems, which is called (the server).
The web is a HyperText system, which means that web pages can contain links to other pages, and users can follow those links to access the desired information.
This is what you do every time you click on a link in a blog post or news article. We call these hyperlinks (HyperLinks), short for “link”. The ability to move from one page to another is what makes the web distinctive.
This ability is also used when embedding an image, video, or piece of code in a web page. HyperText is a very important element, as all web technologies are built around the idea of documents and data that can be linked to each other in a hypertext manner (HyperText).
That's why the web is called the "Spider Web" because pages, sites, and other resources are interconnected and interconnected like a spider's web. How exactly does that work? That's what we'll learn in this article.
What is a website?
A website is a collection of pages that provide specific content and are linked together in a specific way and were created using one of the programming languages, which is HTML.
It basically consists of a main web page and sub-pages connected to each other through web addresses (links).
A website must contain at least one web page. In this case, it is called a one-page website.
Or the most popular meaning, which is called a landing page?
HTML: The Basic Web Page Building Language and Why It's Important?
Why HTML is the foundation of every web page
HTML, without it the web as we know it today would not exist. It is the main structure for building a web page and the basis for planning and building any web page.
As we will learn about HTML tags in the future, we will discover how important these tags are in shaping the web page and designing its main structure exactly as you want. It is the first programming language that we will learn as part of the basics of web development.
HTML Evolution: How did it shape the future of web development?
HTML (HyperText Markup Language) has witnessed many developments since its inception to become the main pillar in web development. Since its beginnings, when it provided a few tags that were only enough to format texts, insert links and images, and create a simple web page,
until the latest version of it, HTML5 (version five), appeared, which brought many features such as LocalStorage, Canvas API, and SVG.
These features enabled web developers and designers to implement creative ideas that include exciting animations and interactions directly on the browser. We do not know what the future holds for us!
How the Internet Communicates: Understanding the Relationship Between Browsers and Servers
How do browsers and servers work together
What is a web server made of?
Mostly. These servers are basically computers, although not the same as the one you are using now, that run programs that respond to browser requests.
What does a server do?
A server's job is to receive and respond to browser requests. When the server finds what the user requested - whether it is a page, an image, a video, or any other item - it successfully sends the requested content. If the requested item is not available, the server responds with a special code known as a "404" code to indicate that the content was not found.
Your computer is likely connected to many servers on the Internet, including servers like YouTube or Blogger.
One of the amazing features of the web is that you can create links to files or documents hosted on different servers. For example, when you watch a video on the Fullstackee.com blog, your browser might play that video hosted on our YouTube channel.
A single web page can contain a variety of videos, images, fonts, or code from your own server or from external servers.
What is the difference between a server and a browser?
A server and a browser are two essential components of the Internet browsing process, but each has a different role.
A browser is an application that users use to access websites, such as Google Chrome or Firefox, that displays web pages and allows them to interact with them.
When a user requests a specific page, the browser sends a request to the server.
A server is a device or system that hosts a website, contains its files and data, and prepares the content and sends it to the browser upon request.
Simply put, a browser displays content to the user, while a server stores that content and serves it when requested.
HTTP vs HTTPS: The Difference and How It Affects Your Site Security
The rules that govern these requests and responses are known as the HyperText Transfer Protocol (HTTP). Website addresses typically begin with "http" or "https," which indicates how the browser communicates with the server.
To understand the difference between HTTP (HyperText Transfer Protocol) and HTTPS (HyperText Transfer Protocol Secure), we need to understand the advantages and disadvantages of each protocol.
HTTP vs HTTPS
HTTP Protocol:
Advantages:
- Simplicity and speed Ease and speed of data transfer.
- No encryption, which is an advantage here because it leads to relatively fast data transfer.
Disadvantages:
Insecurity: Due to the lack of encryption, it is easy for anyone to intercept the connection between the browser and the server and read sensitive data such as passwords or financial information.
HTTPS Protocol:
Advantages:
- Encryption: SSL/TLS (Secure Sockets Layer/Transport Layer Security) is used to encrypt data during transmission between the browser and the server, providing greater security and protection for the data.
- Authentication: HTTPS ensures that the site the user is connecting to is the correct site and not a fraudulent site (through SSL certificates issued by trusted parties).
- Data integrity: HTTPS ensures that the data sent has not been modified during transmission.
Disadvantages:
- Slightly slower than HTTP: Due to the encryption and decryption processes, HTTPS may be relatively slower than HTTP, although the difference in speed has become less noticeable as technology has evolved.
- Cost: Some sites need to purchase SSL certificates to enable HTTPS, which may add a cost.
Through the advantages and disadvantages of each protocol, we find that the difference between HTTP and HTTPS is as follows:
- Encryption: HTTP does not use any type of encryption, while HTTPS relies on SSL/TLS to encrypt data.
- Security: HTTPS provides a high level of security against attacks such as eavesdropping or Man-in-the-Middle (MITM), while HTTP is vulnerable to such attacks.
- SSL Certificate: HTTP does not require a certificate, while HTTPS requires an SSL certificate issued by trusted parties to activate the protocol.
Therefore, HTTPS should generally be used:
- On sites that deal with sensitive data such as passwords, payment information, or personal information.
- On any site that needs to provide trust and security to users.
- It is generally preferable to use HTTPS to ensure the security of the connection even on simple sites.
However, when creating a web page for the first time, you do not need to start a server or use HTTP. Instead, you can save the web page as a file on your computer and open it in your browser easily and simply.
Your browser can view documents stored locally on your computer, as well as those on the Internet. Later, when you're ready to share the web page with the world, you'll upload it to a server.
Key Web Programming Concepts: Syntax, Formalism, and Nesting
Web programming is an exciting field to explore, introducing you to fundamental concepts and providing instant visual feedback. As you progress through the lessons, you can see everything materialize in your web browser. Here are some key concepts to focus on; understanding them will greatly enhance your programming skills.
Syntax - Formalism - Nesting
The first concept is Syntax ( Syntax ):
It is the concept that refers to the rules of the language in programming. Just as natural languages like English or Arabic have grammar rules, programming languages like HTML or PHP also follow certain rules.
For example, when we say “the dog ran in the park,” we don’t say “the park the dog ran,” because that is grammatically incorrect.
This concept also applies to programming. Every programming language has a set of syntax rules that determine how its code is structured.
As you learn a new programming language, you will gradually begin to acquire these rules, which may be explicitly stated or learned through practical examples to gain a deeper understanding of them.
The second concept is formalism ( Formalism ):
This is often referred to as the “literal mindset” in programming. Computers understand code literally. Every word, letter, and symbol counts. Computers cannot infer your intentions; they simply execute your code exactly as you wrote it.
<!-- Wrong -->
<tilte></tilte>
<!-- Correct -->
<title></title>
For example, if you type the title tag incorrectly, the computer will not understand your intention and automatically correct it.
Spelling accuracy is crucial, because programming often lacks autocorrect features.
The third concept is nesting ( Nesting ):
This is the concept of how some parts of code are placed inside other parts in an organized manner. We encounter this in human language as well.
For example, in a sentence like, “Mary said that Adam told her something about her friend,” we use nested quotes.
You will come across similar nesting patterns in programming languages, which may seem strange at first but are common and essential. We will refer to these cases in our upcoming lessons.
Finally, remember that there are a wealth of resources and information available to help you on your programming journey. Many people around the world are learning to code with you.
One of the most valuable tools you have is documentation—the guides and tutorials available for the programming languages you are studying.
For example, you can find comprehensive information about HTML on the Mozilla Developer Network (MDN) website. In addition to the resources provided by YouTube.
There is a wealth of online help that you can access through your favorite search engine, including the Fullstackee blog, where we will learn most of the programming languages for web development in the upcoming lessons.
Choosing Your Tools: The Difference Between Text and Code Editors
Difference between Text Editor and Codes
HTML, like most programming languages, is written in text files. Let's take a look at this.
Text files contain letters, numbers, symbols, and spaces. They do not contain any special formatting such as bold or italic text or even color for the text itself. They also do not contain any images, icons, or any visual elements.
You can think of text as anything you can type on an old typewriter. Although text may seem very limited, it is very flexible and can be used for countless purposes.
When you look at HTML code, you think it is complex and full of strange things, but in fact it is first and foremost text. The appearance that a person sees when browsing a web page is a translation of those texts by the browser.
The browser interprets the html language
When a web page contains an image or video, such as the images in this article, it is displayed by including a text address within the page code. The browser reads this address, then loads the images or videos required to display them on the page.
<img src="path/to/image" alt="alternative text" >
When you open an HTML file in a text editor designed for programmers, you will often find it displayed with special colors and formatting; this feature is called “syntax highlighting” or “syntax highlighting.” This feature helps you understand the syntax while editing.
It is worth noting that these colors are not stored within the file itself; the editor knows the HTML format and applies the colors to guide you as you type.
It is common to use a file name that ends with the “.html” extension when working with HTML files, which helps programs, such as editors and browsers, recognize and process the file correctly.
Create your first HTML file:
Let's play around with HTML a little bit using your code editor, like Atom or VS Code, and there's also Sublime Text.
Follow the steps below to create a new file in your code editor and save it; you can name it testing.html for example,
Then start working inside it. The editor allows you to work on multiple files at once if you want, but make sure to save each file after making changes.
- Open the VS Code editor and click New File
- Name the file testing.html and save it somewhere on your computer
- Write some code inside it and click Save
- Click to open the file with a browser or double-click it
- Congratulations, you have created your first web page
1. Open the Sublime Text code editor and click New File
Create html file on sublime
2. Write some codes inside it and click save
Write some HTML codes inside the file
3. Name the file testing.html and save it somewhere on your computer
Save New HTML File
4. Click to open the file with a browser or double-click on it
Open HTML file
5. Congratulations, you have created your first web page
View html file inside browser
Conclusion
In conclusion, learning web development is an exciting step toward building new skills and unlocking endless creative possibilities.
Don’t hesitate to ask any questions or share your experience in the comments—we’re here to support you on your journey to expertise. What’s the first question that comes to mind about the world of web development? Share your thoughts with us!