Introduction to HTML Code

This page is for users with zero knowledge of HTML. HTML has a lot of applications in the field of web designing and web development. Nearly all web developers use HTML. All the text visible on a website page is written using HTML. HTML also has a version like Android (KitKat, LolliPop, Nougat and so on). Now the latest version of HTML is HTML5, which is used by all web developers.

Brief Explanation of HTML

HTML is an acronym for HyperText Markup Language. It is the most common language of the Internet's World Wide Web.

You are also familiar that different media files have different file extensions. Example:- .mp4, .3gp, .mkv are the most common file extensions of video files, while for audio files, they are .mp3, .m4a. Similarly, images have .jpeg, .gif, .png file extensions. In the same way, an HTML document also has its own file extension. The file extension of an HTML document is .html or .htm (these two have no difference, you can use anyone). Example:- index.html, test.htm, example.html

HTML History

It is not a far away that HTML was developed as a branch of SGML (Standard Generalized Markup Language). SGML is a high-level mark-up language which has so many applications in the field of Defense Systems. As in HTML, SGML also defines different components of a document and describes formatting and hypertext links. But HTML is easier than SGML. Besides, HTML is best suited for transmitting across the Internet to many different types of computers, whereas SGML is not suited for transmitting across the Internet to many different types of computers, users, and browser applications. Tim Berners-Lee designed the original HTML document type in 1990. In 1992, Dan Connolly wrote the HTML development type and a brief HTML specification. In 1994, Dan Connolly and Karen Olson Muldrow rewrote the HTML specification. A complete list of these contributors can be found in the HTML specifications, which is now written by Dave Raggett.

Evolution of HTML

HTML was developed in four stages:

1. Level 0: It included only the basic structural elements and assumed that all browsers supported all features of that version.
2. Level 1: It featured advanced capabilities like highlighted text and graphics, which were supported depending on the browser's specific capabilities.
3. Level 2: It introduced the World Wide Web as an interactive medium. For example, one of the features was to fill out the form on the Internet.
4. Level 3: It introduced frames, videos, sounds, etc.

Merits of knowing HTML5

Actually, HTML5 was designed to replace both HTML4.01, XHTML, and the HTML DOM Level 2. HTML5 is the latest version which is now currently used by all web developers. HTML5 has many more advantages than HTML 4.01. Beyond just formatting, HTML5 describes the contents of a web page so that both humans and computers can read it. You can define text as emphasized or as a unit of time or even legal small print. Some of these descriptions will result in appearance changes as well. For instance, most emphasized text is bold, and most small print is small. But with HTML, you have defined that text as semantically small print, and so a program could later come along and collect all the small print on your documents and compile it into a whole new document.

We should know that HTML can only make a good website. But we can't make website without HTML. Even though we can make your own website using WordPress, you can't make it in an effective way. So, it is mandatory to have knowledge of HTML. HTML can simply make layout the content of the webpages. But there are many ways that HTML can't do, such that HTML alone can make like the property float, left or right, padding property, text alignment, margin property, background-object property (which would do with CSS) and many so on. With the addition of HTML, we require CSS (Cascading Style Sheets), JS (JavaScript), PHP (HyperText PreProcessor, also called Personal Home Page) and MySQL (MyStructured Query Language). All are collectively known as AJAX. You need all this code language to make a awesome website design.

Applications of HTML5

1. Delivers rich content (graphics, movies, etc.) without the need for additional plugins (e.g., Flash).
2. Provides better semantic support for web page structure through the introduction of new structural element tags.
3. Provides a stricter parsing standard to simplify error handling, ensure more consistent cross-browser behavior, and simplify backward compatibility with documents written to older standards.
4. Provides better cross-platform support (i.e., to work well whether running on a PC, Tablet, or Smartphone).

First basic step towards Computer Programming:

The first and foremost thing you need to decide before coding is which text editor to use. If you are an absolute beginner in HTML, start with Notepad, which is already preloaded on every PC. While there are innumerable text editors available, your choice should match your experience. If you have some basic knowledge of HTML, you can use Notepad++ (it is likely the best for handling code at this stage). If you are at an intermediate level, you can use Atom, Brackets, Sublime Text, or Visual Studio Code. I personally recommend Notepad++ because it is very easy to handle and offers many advanced features. Of course, you can choose whichever one you prefer.

Basic Code of HTML5

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Title of the page
</title>
</head>
<body>
--- Content ---
</body>
</html>

Explanation of HTML Structure

1. <!DOCTYPE> declaration

   The <!DOCTYPE html> (Document Type) declaration should not be missed in your HTML document, before the <html> tag. It is the first and foremost thing to be declared in each and every HTML document. The <!DOCTYPE> declaration is not an HTML tag. It simply gives an instruction to the web browser about what version of HTML is encoding in the page because HTML also has version like 4.01 and 5. Actually, it denotes we are the coding the HTML language in the HTML5 version. Here, we are discussing only HTML5

2. <html> tag

   It defines an HTML document. We can add an extension like <html lang="en-US">. It is not compulsory to add lang (language) extension to the <html> tag if you are beginner to HTML. It denotes that the <html> is encoding in English language.

   <html lang="en-US">
   <html lang="en-GB">
   

   <html lang="en-US"> essentially means "this page is in the US style of English."
   <html lang="en-GB"> essentially means "this page is in the UK style of English."

3. <html> tag

   UTF-8 (U from Universal Character Set + Transformation Format 8-bit blocks) is a character encoding capable of encoding all possible characters (called code points) in Unicode. The encoding is variable-length and uses 8-bit code units. The <meta> tag is added to an HTML5 document to specify what the character is encoding on it.

4. <head> tag

   This <head> tag contains all the heading elements viz. <title>, <style>, <base>, <link>, <meta>, <script> and <noscript> tags. In HTML5, it is mandatory to add <head> tag to define its child in each HTML document.

5. <title> tag

   The <title> tag is included between the <head> and </head> tags. Texts within this element can be seen in the tab of the web browser. To define it, it is mandatory to have the <head> element

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
Title of the page
</title>
</head>
<body>
Hello World!
</body>
</html>

    
Hello World!

The file extension of an HTML document is .html or .htm.

Basic code of HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>
  <head>
   <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  </head>
  <body>
  </body>
 </html>