HTML : learning basics,structure and application to web development

 

Web Development

Learning to code is accessible to everyone, much like learning a new language. Programming is akin to speaking a foreign language, which is why they are referred to as programming languages. Each one has its unique set of rules and syntax that must be grasped gradually. These rules serve as instructions for your computer. Specifically, in web programming, they dictate the actions of your browsers.

The aim of this post is to introduce you to the fundamentals of HTML. Before we delve into the details, let's first understand the essence of programming languages.

Programming, also known as coding, resembles solving a puzzle. Just as we use human languages like English or French to translate thoughts and ideas into actions, programming serves the same purpose – albeit directing various forms of behavior, with the computer being the recipient of these instructions.

A programming language acts as our means of interaction with software. Individuals who utilize programming languages are commonly referred to as programmers or developers. Through a programming language, we convey instructions to software, such as altering the appearance of a webpage or triggering movement of an object on the page in response to specific user actions.

When a web designer is tasked with creating a webpage that includes specific elements like a header, font, colors, images, and interactive features such as an animated unicorn, their role involves breaking down this comprehensive concept into smaller components. Subsequently, these components are translated into instructions that the computer can comprehend, ensuring the correct sequencing and syntax of these instructions.

Each webpage you encounter on the internet is constructed through a series of distinct instructions, executed one after the other. Web browsers like Chrome, Firefox, and Safari play a crucial role in translating this code into visible and interactive content on our screens. It's important to remember that code, devoid of a browser, is merely a text document – the true magic unfolds when this code is rendered by a browser. When you access a webpage, your browser retrieves and interprets the HTML and other programming languages involved.

Although HTML and CSS are not considered true programming languages, they play vital roles in defining page structure and styling. Prior to delving into JavaScript and other genuine programming languages, mastering the fundamentals of HTML and CSS is essential, given their significance in the frontend development of websites and applications.

In the early 1990s, HTML stood as the sole language utilized on the web, requiring web developers to meticulously craft static sites, page by page. Over time, the landscape has evolved significantly, with a plethora of computer programming languages now available.

Overview:

HTML establishes the fundamental structure of websites.HTML serves as the foundation of all web pages, irrespective of the site's intricacy or the array of technologies utilized. It is a fundamental skill for every web practitioner and forms the basis for individuals embarking on web content creation.

HTML stands for HyperText Markup Language. Instead of relying on a programming language for functionality, HTML utilizes tags to categorize various content types and their respective roles on a webpage.For instance, consider the article below. If tasked with identifying the content types present, you would likely recognize the header, subheader, body text, images, and additional text segments.

Markup languages function similarly to how you categorized content types, but they achieve this through code, specifically using HTML tags or "elements." These elements, such as header tags, paragraph tags, and image tags, have descriptive names and encapsulate various content types on a webpage. Each content type is encapsulated within HTML tags, defining its structure.

For instance, the text you are currently reading is part of a paragraph. In manual coding, the beginning of this paragraph would have commenced with an opening paragraph tag: <p>. The opening tag is denoted by angled brackets, with the letter "p" indicating the initiation of a paragraph element.

Once a tag is opened, all subsequent content is considered part of that tag until it is "closed." To conclude a paragraph, a closing paragraph tag like </p> is utilized. Notably, closing tags resemble opening tags, with the addition of a forward slash after the left angle bracket.

 Here's an illustration:

<p>This is a paragraph.</p>

HTML enables you to incorporate headings, format paragraphs, manage line breaks, create lists, emphasize text, incorporate special characters, embed images, establish links, construct tables, regulate certain styles, and more.

For further insights into HTML coding, visit Codecademy or W3 Schools to utilize free their resources.