To start your journey of learning web programming, it is essential to have a basic understanding of programming.
In this guide, we will answer some of the questions that come to mind for any beginner who intends to enter the world of web development, the first of which is: What is web development?
Together we will learn about the concept of the web, then we will review the basic structuring 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 discuss 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.
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, applications and web 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 web development:
- Front-End Development
- Back-End Development
- Fullstack Developer
All of this will be explained in separate posts. In this article, we will just 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?
We previously knew 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 called servers.
The web is a hypertext system, which means that web pages can contain links to other pages, and users can follow those links to get to the information they want.
That’s what you do every time you click on a link in a blog post or news article. We call these hyperlinks, short for “link.” The ability to navigate from one page to another is what makes the web special.
This ability is also used when you embed 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.
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.
HTML: The basic language for building web pages and why it matters.
HTML is not a programming language, but 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 website.
As we will learn in the future about HTML tags, 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 language that we will learn as part of the basics of web development.
HTML Evolution: How did it shape the future of web development?
The HTML (HyperText Markup Language) 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 animated and interactive graphics 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
What does a web server consist of?
Mostly. These servers are basically computers, although not the ones you're 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 has requested - whether it's a page, an image, a video, or any other item - it successfully sends the requested content. If the requested item isn't 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 may play that video hosted on our YouTube channel.
A single web page can contain a variety of videos, images, fonts, or code from your server or from external servers.
HTTP vs HTTPS: The Difference and How It Affects Your Site's 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 pros and cons of each protocol.
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: Structures, Formalism, and Interleaving
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.
The first concept is syntax ( Syntax ):
This concept refers to the rules of language in programming. Just as natural languages such as English or Arabic have grammatical rules, programming languages such as HTML or PHP also follow certain rules.
For example, when we say "the dog ran in the park", not "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 presented explicitly 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 matters. Computers cannot infer your intentions; they execute the code exactly as you type 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 pieces of code are placed inside other pieces in an organized way. 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 help online 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
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.
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 important to note 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 Sublime Text and click on File > New File
- Write some code inside it and click Save
- Name the file testing.html and save it somewhere on your device
- Click to open the file with a browser or double click on it
- Congratulations, you have created your first web page
1. Open Sublime Text and click on New File
2. Write some codes inside it and press save
3. Name the file testing.html and save it somewhere on your computer
4. Click to open the file with a browser or double click on it
5. Congratulations, you have created your first web page
Conclusion
Finally, learning web programming is an exciting step towards building new skills and opening up limitless creative horizons.
Feel free to ask any questions or share your experience with us in the comments – we are here to help you on your journey to professionalism. What is the first question that comes to your mind about the world of web development? Share your opinion with us!
Frequently Asked Questions
What is the job of a web developer?
He is the person who specializes in creating and programming websites, applications and web pages.
What is a website?
A website is a group of pages that provide specific content and are linked to each other 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 single-page website. Or the most popular meaning is what is called a landing page?
What is the difference between a server and a browser?
The server and the browser are two essential elements in the process of browsing the Internet, but each has a different role.
The browser is the application that users use to access websites, such as Google Chrome or Firefox, and it displays web pages and allows interaction with them.
When a user requests a specific page, the browser sends a request to the server.
The server is the device or system that hosts the website and contains its files and data, and prepares the content and sends it to the browser upon request.
Simply put, the browser displays the content to the user, while the server stores this content and serves it when requested.