What are web pages?

You may be wondering, what is a web page? I will answer you, it is a document consisting of a series of code written in a web language and displayed inside a dedicated application called a web browser. Web pages are mainly used to display information in various forms of text, graphics, images, videos, and links to other web pages and make them available over the Internet. A group of multiple web pages linked together constitute a website. Web pages can be written in different types of programming languages, such as HTML, CSS, JavaScript, PHP, and other languages and technologies as needed, but HTML is the basic technology for building a web page. HTML-formatted web pages are the standard for the content that an Internet browser displays. It should be noted that HTML is not a programming language in the conventional sense, but rather a markup language that relies on special symbols called tags. These tags are responsible for describing the structure of web pages and the way their contents are displayed and shown in the structure we want, such as displaying them in the form of paragraphs, tables, bullets, etc. . The HTML markup language is characterized by being understandable and expressive, as all it does is describe the way the content is displayed to the browser and the way the web page is laid out. For example, to insert a main title and a paragraph on the web page, we write: Write the title between the <h1> and <h1/> tags, and to write a text paragraph, write it between The <p> and <p/> tags are as follows: <h1> This is the paragraph heading</h1> <p>This is the content of the paragraph</p> Write the previous code in any text editor such as Notepad and save it with the extension .html or .htm and name it with any name you choose, such as example.html. You will notice that the file icon has turned into a web page and when you open it it is displayed in your default browser. Notice that the text (This is the title of the paragraph) appeared as a bold title because we enclosed it in title tags, while the text (This is the content of the paragraph) appeared as plain text because we placed it between two tags indicating that it was a paragraph of text. This page, of course, needs a lot of additional HTML code in order to look like a full-fledged web page. It also needs to add different formats of fonts, colors, and layouts to make its appearance more professional, which is what the CSS language does, which is integrated with the HTML language, as CSS codes are added in several ways to the web page, They can either be written in the .html file itself, or added in a separate text file with the css extension. With any name you choose, let it be styles.css, then link it to the .html file by writing the following code: <link rel="stylesheet" type="text/css" href="styles.css" /> <h1> This is the paragraph heading</h1> <p>This is the content of the paragraph</p> We are not going to explain CSS codes in this article, but we will write some simple formats for our page to understand the idea through which web pages work. For example, to make the title that we added to the page in red and the paragraph in blue, write the following codes in the formats file: h1 { colour: red; } p { colour: blue; } For more about designing web pages and writing CSS codes, you can read the article HTML and CSS for Beginners: How to Design Your First Web Page and the CSS Basics article. You can also learn more about linking codes to a .html file through the article How to Build a Website Using CSS. What is a web browser? In the previous paragraphs, we mentioned the word browser several times and mentioned that it is a program used to open and display web pages. You may be wondering what is the role of the browser in web pages that are essentially text documents written in text editors or code editors? Here's the answer: In order to be able to open web pages on your device, you need a web browser program, which is an application that enables you to access the information contained in web pages and display it correctly. It serves as a container that displays all the contents of the page. There are a lot of web browsers and the five most popular ones are: Google Chrome Chrome Firefox Microsoft Edge Opera Safari In order for web browsers to display web pages, they use a Rendering Engine, or the so-called Layout Engine, whose mission is to take all the content and design information contained in the code with which this page was written, interpret it, and display it in its final form to you. Each browser uses a different rendering engine from the other. For example, Firefox uses an engine called Gecko, and Chrome and Opera use an engine called Blink. Some browsers may also use their own technologies that are not available in other browsers. What is important for you in this matter is to understand the reason for the differences. How web pages are displayed from one browser to another, or why some features don't work in one browser while working perfectly in another, is why website designers are keen to address common cross-browser compatibility issues in HTML and CSS.