Text Editor and Blocks of HTML

Text Editor of HTML

An HTML Text Editor could be a stand-alone application, although it is regularly a part of a bigger built-in Integrated Development Environment (IDE), which can be essentially a developer’s tool kit that delivers an area not merely for program editing, additionally, compiling, interpretation, as well as, debugging a program.

Different HTML Text Editors

Below is the different text editor in html as follows:

1. Notepad ++

Link:https://notepad-plus-plus.org/

Notepad++ is known as a preferred totally free note acquiring the application as well as, code editor. This can be a better quality version with the Notepad application you simply might discover obtainable in Windows by default. These types of enhancements produce Notepad++ a perfect decision for web-designers as well as, front-end programmers.

2. Microsoft Visual Studio Code Community

Link:https://visualstudio.microsoft.com/vs/community/

If you’re certainly not boycotting Microsoft just like Arachnophilia creator Paul Lutus, then you certainly will need to look into Microsoft Visual Studio’s free of charge “Community” edition with their IDE, which usually facilitates approximately five end-users.

3. NetBeans

Link:https://netbeans.org/

A free of charge as well as, open-source IDE, NetBeans will help you develop through HTML5, PHP, JavaScript, C++, and many additional languages. It provides program themes and generators, and also project administration tools to assist coordinate bigger projects as well as, groups. Additionally, it includes a huge plugin marketplace, as well as, developers must write and promote their particular extensions

4. Bluefish

Link:http://bluefish.openoffice.nl/index.html

Bluefish can be described as a complete-featured HTML editor tool which usually runs on the number of systems, which includes Linux, MacOS-X, Windows, and many more. The latest release (which is 2.2.10 or 2.2.10-2 for High Sierra) set a few of the bugs obtained in earlier versions. Significant features that have been in position because the 2.0 version will be code-sensitive spell examine, auto containing more numerous languages (HTML, PHP, CSS, etc.), thoughts, project administration as well as, autosave. Bluefish can be mainly a code editor, not particularly a web editor.

5. Eclipse

Link:https://www.eclipse.org/

Eclipse is known as a complicated development environment that could be ideal for people that perform a lot of code upon numerous platforms as well as distinct languages. It can be organized as plugins if you have to edit something you simply find the proper plug-in as well as, head to work. When you are creating complicated web applications, Eclipse includes a wide range of features to make the application simpler to build. You will find Java, JavaScript, as well as, PHP extensions, in addition to a tool for mobile programmers.

6. Atom

Link:https://atom.io/

  • Atom is an additional excellent HTML editor. This is the open-source text editor by simply GitHub
  • It can be one of the main WYSIWYG editors obtainable.
  • Supplies the cross-platform solution. This facilitates macOS X, Windows, as well as, Linux.
  • Intelligent auto-completion choice to provide you with quicker outcomes.
  • Simple to navigate user interface.
  • Simple data file browsing program to make available you will speedily end result.

Blocks of HTML

An HTML documents consists of it basic building block which is:

  • Tags: An HTML tags surround the contents and apply meaning to its. Its written between < and > bracket.
  • Attribute: An attributes in HTML provide extra informations about the elements, and its applied within the start tags. An HTML attributes contain two field: names & values.

Syntax

<tag name  attribute_name= " attr_value"> content
   </ tag name> 
  • Elements: An HTML elements are an individual components of an HTML files. In an HTML files, everything written within tag is termed as HTML element.

Example:

<!DOCTYPE html>  
    <html>  
    <head>  
    <title>The basic building blocks of HTML</title>  
    </head>  
    <body>  
    <h2>The building blocks</h2>  
    <p>This is a paragraph tag</p>  
    <p style="color: red">The style is attribute of
     paragraph tag</p>  
    <span>The element contains tag, attribute and 
    content</span>  
    </body>  
    </html>     

Output:

The building blocks

This is a paragraph tag

The style is attribute of paragraph tag

The element contains tag, attribute and content

Examples of HTML Blocks

Here are some examples of HTML blocks which are given below:

Example #1

In the below example, we are going to use some basic Html block elements like div, p, headings, lists element with the ordered and unordered list, etc.

Code:

 
    <html>
    <head>
    <title>HTML Block Level Elements </title>
    </head>
    <body>
    <h1>HTML Block Level Elements </h1>
    <p>This is the example of HTML block elements 
    showing multiple block level elements enclosed
    within it .Here we can also use inline elements too
    </p>
    <div>
    <h3>Example including div , p , headings elements, 
    list elements</h3>
    <p>This example shows different kind of HTML block
     elements like div, p , headings in between h1 to h6 
   </p>
    </div>
    <h2>Example of Lists</h2>
    <h4>An Unordered HTML List showing Countries </h4>
    <ul>
    <li>Meerut</li>
    <li>Mawana</li>
    <li>Modipurm</li>
    </ul>
    <h4>An Ordered HTML List showing Countries</h4>
    <ol>
    <li>Meerut</li>
    <li>Mawana</li>
    <li>Modipurm</li>
    </ol>
    </body>
    </html>
          

Output:

HTML Block Level Elements

This is the example of HTML block elements showing multiple block level elements enclosed within it .Here we can also use inline elements too

Examples including div , p , heading element,lists element

This example shows different kind of HTML block elements like div, p , headings in between h1 to h6

Example of Lists

An Unordered HTML List showing Countries

  • Meerut
  • Mawana
  • Modipurm

An Ordered HTML List showing Countries

  1. Meerut
  2. Mawana
  3. Modipurm

Example #2

Now by using HTML block element, we are going to creates an HTML form as follow:

Code:

    <!DOCTYPE html>
    <html>
    <head>
    <title>Password Input Control</title>
    </head>
    <body >
    <form >
    <h2>Welcome to HTMl Block Demo</h2>
    <h4>Please login here</h4>
    User ID : <input type = "text" name = 
    "user_id" />
    <br><br>
    Password: <input type = "password" name = 
    "password" />
    <br><br>
    <input type = "checkbox" name = "remember" 
    value = "on"> Remember Me
    <br><br>
    <input type = "submit" name = "Login" value =
     "Submit" />
    </form>
    </body>
    </html>      

Output:

Password Input Control

Welcome to HTMl Block Demo

Please login here

User ID :

Password:

Remember Me

Leave a Reply

Your email address will not be published. Required fields are marked *