HTML: 2. What is HTML?

๐– HTML for Beginners                                                                                                                                                                                                                    ๐Ÿ”–HTML INTRODUCTION


What is HTML?



Today's Contents:

• Introduction to HTML
• Basic Structure of HTML Pages
• Features of HTML Files



Hi, Radiant Guys! In my last post, I said that age is not a barrier to learning to code. I think the best time to start learning is when anyone feels like he or she likes to learn something. I'm curious about your thoughts on this.

I recently started blogging. However, once I started, I began to desire to decorate the blogger to my own taste. So, while searching the Internet for related information, I came across unfamiliar terms such as HTML, CSS, JavaScript, etc. When I applied the codes left by kind people to my blogger, it really opened up a new world. That's why I wanted to study this field, even if it was at a basic level. So I started learning right away.

  I remember when I took my first HTML course. As I looked at the coding editor full of cipher-like letters and symbols, I became anxious and wondered, “Will I actually be able to learn these things?” However, after listening to HTML concepts and practicing simple exercises, I found it to be much more fun than I expected. I thought, “Why didn’t I learn this earlier? Are you ready to get into it with me, Radiant Guys?


| Introduction to HTML

HTML is an abbreviation for "Hyper Text Markup Language". A "Hypertext" includes the concept of transcending text and instantly moving to a desired location on the web(e.g., hyperlinks).

 A markup language is a language that allows you to communicate with a computer and give commands to it. In other words, when a user writes content (e.g., text, graphics, video, audio, etc.) that he or she wants to display on the web page as an HTML document, the computer reads the document through a web browser. It shows it on the monitor so that the user can view it. In particular, tags are essential elements in this process. A tag is text enclosed in angle brackets and performs its promised function. 


๐ŸŽฏ TIP

A Web Browser is software that helps you access web pages (e.g., Chrome, Safari, Opera, Firefox, and Edge etc.).


Another vital feature of markup languages is that they provide information to web crawlers, which are computer robots. Web crawlers collect web data by moving through various websites. Search engines then provide customers with the latest web data obtained through web crawlers. 

Tags also play a significant role in the above process. When interpreting information, web crawlers, unlike humans, read tags within HTML documents to analyze their structure. For example, a web crawler can at last recognize that the part marked with the <h1> tag is a “title” and interpret the part marked with the <p> tag as a “paragraph.” This feature of web crawlers can also be linked to advertising revenue because it helps bloggers' content be exposed to the right target.


| Basic Structure of HTML Pages 

The basic structure of an HTML page consists of the <!DOCTYPE html>, <html>, <head>, and <body> areas. See the image below. 


[Image: The Basic Structure of an HTML Page]


⎖ <!DOCTYPE html>

Each characteristic of the elements is as follows. The <!DOCTYPE html> tag is used at the beginning of an HTML document. This serves to declare that the document is an HTML5 document. The <!DOCTYPE html> tag, unlike other tags, does not pair with a closed tag(e.g. </!DOCTYPE html>).


<!DOCTYPE html>

⎖ <html>

The <html> tag is used immediately after using the <!DOCTYPE html> tag. It serves to mark the beginning and end of the HTML file. It is used only once in one HTML document. These tags must always be used in pairs, starting with an open tag and ending with a closed tag. The <html> tag has an attribute called lang, which sets the language of the document. As shown in the below, the en is an attribute value that means English. Additionally, the <html> tag includes the <head> tag and <body> tag.


<html lang="en">
 ⋅⋅⋅        
                                                           </html>


 <head>

The <head> tag provides overall information about the HTML document to the web browser. The entered data is not directly visible on the web browser screen. The <head> tag area includes <meta> tag, <title> tag, CSS, JavaScript, etc.

<head> 
⋅⋅⋅  
 </head>

<body>

In the <body> tag area, the content that will actually be visible in the web browser is written. For example, various tags are used, including the <h1> to the <h6> tags that specify font size, <p> tags that markup paragraphs, <br> tags that command line breaks, <hr> tags that create a horizontal line, and <div> tags to divide the sentences into chunks.

<body>
 ⋅⋅⋅   
  </body>

Features of HTML Files

A file extension is a part added to a file name to indicate the type and role of the file. It is written at the end of the file name. The extension of HTML files is the "htm" or "html", and this indication results in the action of running a web browser. For example,when writing the HTML file name, after putting the file name, enter a dot ".", and add the file extension. In addition, special characters (e.g., periods, commas, etc.) cannot be used in file names.

The ".htm" is a name created under Microsoft's operating system, which limited file extensions to no more than a three-digit string followed by a dot. In practical terms, the ".htm" and ".html" are functionally identical, but the link to the "page.htm "and the link to "page.html" are not the same, so be careful not to use the two interchangeably when linking.


Concluding Ayul's Post

Congratulations, Radiant Guys! Today, we finally succeeded in stepping into the world of HTML. So far, we have looked at the meaning of the term "HTML", the basic structure of HTML pages, and the characteristics of the extensions of HTML files. In the next post, I will show you how to install the free applications needed to create HTML documents. 

I hope this post was helpful to you all. Well, I hope to see you again very soon, Radiant Guys!

NEXT POST  What Program Do I Need to Code?



 ❄ ❄



Posted by Ayul







Post a Comment

Previous Post Next Post