HTML, a frontend language.

Hello everyone, Beauty James here again with another intriguing topic. Since I talked about Frontend development in my previous article, I figured it would be beneficial to include topics about frontend languages on this blog.
So, today we will be considering HTML, a frontend language. We’re going to start with the basics as we discuss the following;
• What is html?
• Basic concepts in HTML
• What is an html editor?
• Features of an html text editor
• When do you need an html editor?
• Examples of html editors
• How to write html codes?
• Basic text formatting in HTML
• Uses of html
What is HTML?
HTML (Hypertext Markup Language) is the code that is used to structure the web and it’s content. Structuring contents could be within a set of paragraphs, a list of bulleted point or using images and data tables. It tells the web browsers how to structure the web pages you visit. It could be complicated or really basic, depending on how the developer wants it to be.
Basic concepts in HTML
 The program you need: HTML is written in plain text. All you need is a simple text editor that is already in your system. For Macintosh, you could use a simple text editor and for Windows, that will be Notepad.
 Rules in HTML: In HTML, the rules are fairly simple. For example, HTML tags are always surrounded by angles (< >).
 Case sensitivity: HTML tags are not case sensitive. This means that you can use either uppercase or lowercase. For instance, is the same as .
 Elements; HTML consists of a series of elements which you use to enclose, wrap or markup different parts of a content to make it appear or act in a certain way. They are the building blocks of HTML pages. Elements are indicated in the documents by tags enclosed in angle brackets for example

. The extent of an element could also be indicated by a pair of tags: a start tag

and an end tag

. The text content of any element is placed within these tags. Note that the browsers do not display the tags but only use them to interpret the content of the page
For example, consider the text below
My dog has a temper.
If you want to make the text stand by itself, you could specify that it is a paragraph by enclosing it in a paragraph

element.

My dog has a temper

In the text above, we can denote that the opening tag is

, while the closing tag is

. The sentence “My dog has a temper”, becomes the content while the element here becomes the opening tag followed by the content and the closing tag. To understand this better, we will further look into the anatomy of an element.
i. The opening tag; This consist of the name of the tag wrapped in opening and closing angle brackets but it marks where the element begins.
ii. The content; This is simply the content of an element. In this example, it is the paragraph text “My dog has a temper”.
iii. The closing tag; This is the same as the opening tag except that it has a forward slash before the tag ends. It marks where the element ends.
It should be noted that although the terms Element and Tag could be used interchangeably, they are not exactly the same. An element consists of an opening tag, the content and the closing tag while a tag simply marks the beginning or the end of an element.
 Empty elements: Empty elements consists of a single tag which is usually used to insert something in the document. It doesn’t follow the anatomy of a regular element (the opening tag, the content and the closing tag) as mentioned above.
 Attributes: These are special codes placed within the html elements that describe how the element should look like. They contain extra information about the element that won’t appear in the content.
An attribute should always have:
i. The attribute name followed by an equality sign
ii. Space between it and the element (in cases of multiple attributes, the attributes should also be separated by spaces)
iii. The attribute value wrapped around opening and closing tags
Examples of attributes are the color attribute which changes the color of the webpage and outline attribute which aligns the text either to the left or right.
 HTML structure: All html document are divided into two main parts; The head and the body as shown below;

-----the head
………

-----the body


 Nesting: Nesting is the act of enclosing text and graphics using tags. Example, .
What is an HTML editor?
An HTML editor is a specialized piece of software that assists in the creation of HTML and quite possibly CSS codes. It includes features that help streamline your coding workflow and of course allows users to enter raw text. Whether you’re new to HTML or a seasoned professional, a good HTML editor will help you code faster thanks to it’s many helpful features.
Features of an HTML text editor
A good HTML editor should have a few or all of the following features:
o Code Validation: Code Validation simply means making sure that your code’s syntax is error free. This is a basic feature made available to most html text editors. It doesn’t necessarily check for complex errors like a debugging tool would, but it definitely helps to save time and is comparable to a debugging tool.
o A Quick Search Of code: This feature allows you to search for a code instead of going through hundreds of lines of codes for just a single component.
o Auto Completion: This feature automatically inserts components like closing tags when they’re logically supposed to appear, saving you time in the process.
o Syntax Highlighter: Syntax Highlighter makes it possible to visually differentiate between elements so you can quickly determine what you need to write next by emphasizing key elements in different colors.
o Debugging: HTML text editors can sometimes save you from having to scan through line after line of code trying to see and fix tiny errors that are easy to miss. This feature that checks your codes for errors and reports them back to you is known as Debugging
o Insert common HTML Elements: You can easily add HTML element with one click without constantly having to type them in every time you want to use them, saving you time.
o Search and replace: This feature helps you to search your code and replace all instances of your keyword to something else. You only have to type the code once instead of multiple times.
When do you need an HTML editor?
Sometimes you may need an HTML editor, a word processor or an IDE (Integrated Development Environment). Below are general guidelines that will help you to determine what type of software you need.
An HTML editor is helpful when ;
 You’re learning how to write html codes
 You need a professional tool that will reduce errors in your code
 A basic word processor or text editor just isn’t cutting it for you anymore.
 You need to edit an HTML or CSS file.
 It’s essential to efficiently write HTML or other design-based code like CSS.
Examples of HTML editors
Using a word processor or basic text editor will most likely fill your work with errors. This could be prevented by simply using an html editor. With a wide range of HTML editors you could use, the following are the most reliable and efficient ones:
• Brackets.io; This kind of editor works well with html, CSS, LESS, SCSS, and JavaScript, making it perfect for frontend development. Brackets.io provides a professional experience and is an easy-to-use text editor for html, making it one of the best editors used by web developers.
• Atoms; This kind of editor supports multiple panes which helps you to edit multiple files at the same time especially for apple and Linux users. This is especially useful if you’re working on interrelated files. Its user interface is customizable and it has both Git and GitHub. Atom offers professional experience and is intuitive to use.
• Notepad++; Notepad++ is a free html editor that supports CSS, JavaScript, PHP and other programming languages. It has not just the basic features of an html editor, but some advanced features without being overly complicated. Notepad++ is the best option for an html editor that’s great for transitioning out of beginner or intermediate-level web development. It is also great for advanced users who love the idea of a distraction-free interface.
• Komodo edit; This is a free html editor that supports Perl, Ruby, Python, HTML/CSS and more programming languages. Komodo edit is a professional program with great, advanced features, and also includes project management. Although the free version is often perfect on its own for most developers and beginners, it is preferable to upgrade to komodo IDE if professional features are needed, such as for business or enterprise level project.
• Visual studio code; This is a type of html editor that is well maintained by Microsoft and open-source community. Visual studio code supports HTML, CSS, LESS, CASS, PHP, C++, c#, Ruby, Perl, SQL, XML, JSON, Python, and many more languages. It consists of both basic features like syntax Highlighting and advanced features like debugging and Git commands built-in, and tons of other extensions available. The user interface (UI) is Clean and well-organized.
• Dreamweaver; Dreamweaver is one of the best html editors because it supports many web standards including HTML and CSS. It is easier to spot and correct issues in Dreamweaver because it has Error Underlining. With Dreamweaver you don’t have to keep saving your working file and uploading it to your server to check your progress because there’s a live preview editing area built right into the UI so you can streamline your workflow.
• Vim; Due to it’s great advanced features such as error highlighting, and search and replace tool, Vim is sometimes considered as an IDE than a mere HTML text editor. It enables users to undo their actions in an unlimited number of times and it is also customizable.
• Sublime text 3; Sublime text 3 is an excellent option for an HTML editor that is also customizable. It has a clean interface that’s uncluttered and allows users to focus more on their code. Sublime text 3 has features such as syntax Highlighting and a split-pane UI capability as well, which allows users search and find elements quickly thereby, saving time.
Other examples include;
• TinyMCE Editor, and
• Froala.
How to write HTML codes
Writing HTML codes is simply creating your own webpage. We will explain the process of creating a web page through the steps listed below:
STEP 1; Open a text editor
 Open Notepad for Windows
For Windows 8 or later, open the start screen, on the window symbol at the bottom left of your screen, type Notepad.
For Windows 7 or earlier, open Start>Programs>Accessories>Notepad>
 Open TextEdit for Mac
Open Finder>Application>TextEdit
Also change some preferences to get the application to change files correctly. In preferences, Format>Plain text. Then under “Open and Save”, check the box that says “Display html files as html codes instead of formatted text”.
STEP 2; Write or copy the following code into Notepad or TextEdit


This is my first web page

Hello world. This is my first webpage. There is more to come so make sure you don’t miss out ..

STEP 3: Save the file on the computer. A file can be saved as either ‘htm’ or ‘html’.
STEP 4: View the html file in your browser. To preview your document, open it with your browser.
Basic Text Formatting
The following headline, paragraph, line break and horizontal rule tags will make our current web page a lot more exciting:
• Headline tag; In html, you can create text with bold copies by using the headline ranging from

………..

to

………

. The code of all these headline sizes will be written as

Level 1 headlines

Level 2 headlines

Level 3 headlines

Level 4 headlines

Level 5 headlines

Level 6 headlines

To add the headline to your webpage, follow the steps listed above but instead, your code should look like this

This is my first webpage

Hello world.

This is my first webpage. There is more to come.


Save the file and open it in your web browser to view it.
• Paragraph and Line breaks; To add space between paragraphs, you use a paragraph tag

………

.
To add a single blank line or space, you use a break tag
. This is an empty element and therefore stands alone.
To apply paragraphs and line breaks to your web page, follow the same steps listed above, but your code should look like this


This is my first webpage

Hello world.

.This is my first webpage. There’s more to come

I am learning how to use the horizontal rule, headline, paragraph and line break tags. Writing html isn’t as hard as it seems.

Here is a list of my favorites fruits:
Apple
Banana
Watermelon
But most of all, Grapes

• List items; Most websites users don’t like to read a lot of text so putting your information in form of a list (

……

)either in numbers or bullets will be helpful. The numbered list are called ordered list (

……..

), while the bulleted list are called unordered list (

……..

). An ordered list goes like this.

1. my first item on the list
2. my second item on the list
3. my third item on the list
4. my fourth item on the list

In the browser, it will appear like this;

1. my first item on the list.
2. my second item on the list.
3. my third item on the list.
4. my fourth item on the list. An unordered list or bulleted list goes like this;
   • my first item on the list
   • my second item on the list
   • my third item on the list
   • my fourth item on the list
   In the browser, it should appear like this;
5. my first item on the list.
6. my second item on the list.
7. my third item on the list.
8. my fourth item on the list. Uses of HTML • Client-side storage: With HTML5, Client-side storage is feasible Using local storage and index DB. Index DB is a better and larger client-side data store. It can be expanded with the user’s permission. • Web document creation: Html is used to design and create documents on the web(including the head, the title and the body). • Web page development: HTML is mainly used for creating pages on the World wide web. Every page on the web is written using a version of html code and contains a set of html tags including hyperlinks which connects users to other pages. • Data entry support with html: Html5 is used to support data entry. Html5 has developed new attributes to drive on-screen keyboards, validations and other data-experiences to enable users to have a better data entry. • Internet navigation: This is one of the most important uses of html, which is made possible by utilizing the concept of Hypertext. This is a text that enables users to navigate webpages and between websites located on different servers. Other uses of html includes: • Cutting edge feature • Game development usage • Responsive images on webpages • Offline capabilities usage • Native APIs usage to enrich a website CONCLUSION You have successfully made it to the end of this article! At this point, you should be able to understand what html looks like and how it works. If you are able to understand these basics concepts of html, you are off to a great start because usage of html is widespread and has become more sophisticated than ever before. It is your responsibility as a developer to put applications of html concepts in real time usage.