What is HTML And how do you use it to design a web page?
1-What is HTML coding?
The letters are hyperText Markup Language, which is not a code in traditional sense of programming languages, but a language or method to describe the contents of the web page for browsers, as anythe web browser program needs to know the contents of the page of titles, texts, images, links and other components of the web page so that you can view it correctly, and HTML coding language, is the main language that makes up any website or web page.
The web page consists of a set of tags or tags, each tag is written between angle brackets or is called a sign that is smaller than > and a sign larger than The browser does not display these tags, but it displays its contents, and there are two types of tags.
2-?What are tags
Type 1: A hashtag whos showed directly on a web page, such as "IMG/> and input/>
Type II: A hashtag that describes the texts inside of the <p>text inside the hashtag</p>, this hashtag may contain another hashtag as a sub-item of this hashtag and example <p>text <i>tilt</i></p> and you will notice in this type that each hashtag consists of two parts (start tag) and (end tag) and between them the content that is displayed in the browser.
The following format explains a detailed explanation of the components of a web page item (e.g. Hyperlink)
You will notice from this example that each element (type II) of HTML language consists of the tag of the beginning and the end marking and the name of the end tag must be the same name as the initial tag but preceded by the mark (/) or known as forwarding slash, and between them, the contents of the item appearing in the internet browser, and you will also notice that we used the description (attribute) of the tag, and each description contains two parts name and value and between them The name of the description is href and the value of a website address and all of the above commands (except for the content of the hashtag) do not appear in the internet browser but are commands for the internet browser to create a hyperlink (Link) with the values found in the content of the tag, and when pressed the browser converts the page to the address of the site located in the value of the description (between the text marks), and the URL can be replaced by another page.
Important note, Microsoft Word or WordPad cannot be used to write HTML codes, but you must use a program that supports writing text in the plain text way or using a text editor (code writing software) Text Editor and you can read the text editor blog (Text Editor) that supports Arabic to choose a suitable program, but to simplify it we will use the notepad software in the Windows operating system.
3-How to create a web page
We start first by opening the notepad program and then through the file menu we save the file by selecting save as, and then a window will appear we write in the box (file name - File Name) any name of your choice let it be for example test.html and must write the file name with the extension of the file and to write HTML codes must be the extension of the file either (.html or .htm) and in the window of the box Save as type we will choose All Files and in the box (Encoding) we will choose UTF-8 to support the file writing Arabic then press Save, and the following figure explains the steps in detail.
HTML
<!DOCTYPE html><html lang="ar"><head><meta charset="UTF-8" /><title>عنوان الصفحة</title></head><body dir="rtl"><img src="https://abuelfateh.com/imgs/logo_115x96.png" alt="Abuelfateh's Logo" /><h1>هذا عنوان رئيسي</h1><p>هذا محتوى لصفحة HTML بسيطة</p><a href="https://abuelfateh.com/">إضغط هنا لزيارة موقع أبوالفتح</a></body></html>
You'll notice the command is used <!DOCTYPE html> This is the job of selecting the HTML version so that the internet browser can translate and display commands correctly (the version used in the example is HTML5).
Then we used the hashtag #html lang="en"> and its job is to describe to the browser that the code used is in HTML language, and the lang description is its job to describe to the browser that the contents of the web page will be in Arabic, because we have chosen the value ar but if the content in English can be the value of the description en. We put the opening tag at the first codes and at the end of the code we wrote the tag tag (Closing Tag), and then we will divide the page into two main sections <head>the content of this tag does not appear in the browser, but contains information about the page and how to view the contents of the page using the elements of the data /> and <title>, and the second section of the web page is using the hashtag <body>And all that is written inside this hashtag is what is displayed and formated through the browser.
After viewing the result of the previous example you will notice that the browser displayed the contents of the page along the right side, not to the left as is customary in most web pages, as a result of the description of the hashtag "body dir="rtl"> We have identified the description dir and its function to determine the direction of the content of the page and has been named by this name for the word (direction) and we have identified the value rtl which is the initials of the sentence (right to left) The refore the browser displayed the contents of the hashtag <body>direction from right to left, and here <body> you can deduce the value that displays the contents from left to right which is ltr short for (left to right <body>).
In the previous example, we used the hashtag "img/> to display an image, which is a type i that has no end mark, so the content of the tag is described to the browser by describing the hashtag (attributes), we have used the description src, which is a telly for the word source and its function is to locate the image to be displayed in the browser, so that the value can be a path for the image from the computer or the value can be an electronic address in the image path as in the example. We also used the alt description, which is a telly of the word alternative, and its function is to write an alternative word for the image in case it cannot be accessed or read the sentence written in exchange for the image in the case of those with special needs of visually impaired people.
We also used the hashtag which is a shorthand for the <h1>word Header and its function is to display its content in large and heavy font (Bold) and is used to display titles which is a marking of the second type that must be marked beginning and marking the end of the same name and there are of this tag 6 types the largest in the size of the font <h1>....... And the <h6>youngest.
We have also used the hashtag <p>which is a telly of the word Paragraph and is used to display and coordinate texts, which is also the second type where text content must be placed between the start and end markings.
We have used the hashtag <a>which is a shortcut to anchor point and uses this hashtag to create a hyperlink which is an important hashtag as no website does not have links because it is the way to navigate between pages of the site or to another, and we have used a description of this hashtag which is href which is a shortcut to Hypertext Reference and writes the special value of describing this hashtag the address of the page to be visited. In the example we used a website address, and we could also use the name of another page as we created a file under the name (test.html) that could create another file and name it for example (test2.html) note: the two files must be in the same path (Folder).
You will notice that we have used the hashtag "meta/> which is used to give instructions to the browser on how to view the contents of the page, and use it with the description charset is to determine that the contents of the web page use UTF-8 encryption, the type that can read Arabic texts, which is mandatory in this example until the contents of the page are displayed in Arabic.
Due to the importance of the hashtag #meta/meta, I've dedicated a separate article to the meta tag and examples of meta hashtag salvia.
The hashtag <title>as shown from the previous format, it identifies a browser address.
From the above we will conclude that HTML is a tree and the tags are branched out and this can be explained as follows:
Post a Comment