+880 1717112860

Basic HTML tutorial: Create Your Own Web Project Step by Step -Part 1 - BOSS SOLUTION

September 28, 2020


Basic HTML tutorial: create your own web project – Part 1

In this Tutorial I will discuss about a brief introduction of HTML, the basic of HTML and what software / Program we need to go forward learning HTML. So let’s learn about this.


  1. Behind the story of HTML
  2. What is HTML?
  3. What software do you need to write HTML code


Behind the story of HTML

In the late 1980s, Tim Berners-Lee developed the fundamentals of the Internet while working on an internal project at the European Organization for Nuclear Research (CERN) to allow thetransnational exchange of information in its network of laboratories, distributed throughout France. and Switzerland. As a basis for this infrastructure, the computer scientist used the hypertext language, a type of writing that transmits information through hyperlinks and is written with markup languages ​​such as theHypertext Markup Language or HTML, developed by Berners-Lee expressly for the project…

Along with other components such as the HTTP transfer protocol, the URL locator, and browsers and web servers, HTML constitutes, still three decades later, thecornerstone of the global digital interconnection. It makes learning to use this web language one of the first duties of any developer. This HTML tutorial has compiled the basics of this markup language, as well as some HTML tips for beginners so that your first steps in the world of web development are solid and your knowledge solid.

What is HTML?

Hypertext Markup Languageis part of those computer languages ​​that machines can understand and facilitate interaction with man. By marking them as such, HTML allows you to define and articulateheadlines, paragraphs, lists, tables, or graphics on a website, in such a way that any browser that can interpret the code can visually display each element. Usingmetadata, HTML can also provide additional information, such as the author. Today, and contrary to what happened in the beginning, HTML is only used to structure the page internally and not to define its visual appearance, something that languages ​​such asCSS (Cascading Style Sheets) deal with.

HTML was developed from the now almost extinctSGML (Standard Generalized Markup Language) metalanguage, a recognized ISO standard (8879: 1986) from which it inherited its writing. This writing is based on defining each element with a pair of labels or tags surrounded by angle brackets, consisting of the starting <> and the closing </>. Some elements do not require the latter, such as <br>, which alsolacks content. In addition to tags, the following HTML attributes are also reminiscent of its predecessor:

  • Document type declaration – This provides information on the version of HTML used, such as:<!DOCTYPE HTML PUBLIC “- // W3C // DTDHTML 4.01 Transitional // EN” “http://www.w3.org/TR/html4/loose.dtd”>
  • Use of HTML entities: Punctuation marks, accented characters, or special symbols are translated into HTML entities for display in the browser (e.g.,& ntilde; for “ñ” or& eacute; for “é”).
  • Comments: Comments are hidden from the browser, but visible to developers are integrated with the<! – -> tag
  • Attributes : attributes expand the definition of the elements and follow the scheme<attribute tag = “variable”>

What software do you need to write HTML code?

At the beginning of our short HTML course, it is necessary to clarify how HTML can be written and what the different options provide, since, on the one hand, since itdoes not have great requirements, it is enough to have a simple text editor such as the one found in any operating system and, on the other hand, it is true that some special applications offer some facilities when writing. That being said, what is the best alternative if you want to learn to write HTML?

Text editor

You don’t need any special software to write neat and clean HTML. A text editor like Windows Notepad or its Mac equivalent, TextEdit, in plain text, is sufficient. This program does not allow you to change the text’s appearance, a task that falls directly on the HTML code. In theory, you could also use word processors such as Microsoft Word or OpenOffice Writer, but it does not make much sense to do so if you want to learn HTML because you will not use all its functions; moreover, it could slow down the learning process. Ultimately, to learn how to write HTML, the best decision is to use a commontext editor like the one installed on any operating system.

HTML editors

An intermediate step between text editors and more complex programs are those editors with a complete functionality that includes, for example, thecolor highlighting oflabels so that it provides a very clear overview of the code that has been written and thus allows todetect syntactic errors more quickly. Another very useful standard function is the autocomplete, which proposes ways toexpand or complete the labels, even closing them automatically. Many editors also have a preview function that allows you to check the result of what has been written.

For Windows users, a highly recommended text editor isNotepad ++, open-source and distributed under the General Public License. In contrast, users of Unixoid systems can turn to the freeVim solution.

Editors with real-time visualization

A very attractive alternative, now included in almost the majority of content management and web page design systems, is to useeditors known as WYSIWYG, which allow you to write while viewing the result in real-time. The acronyms are equivalent to “What You See Is What You Get,” and it is the principle behind these programs, developed to allow you to create HTML code without knowledge of markup language. Working much like a word processor, the text is connected using thedefault functions available from the menu, without having to manually type the tags, which the editor generates in the background. This certainly has its benefits, but not when it comes to learning HTML, even though the code view can be accessed at all times.BlueGriffon or Dreamweaver from Adobe are two of the many editor options with real-time preview.

Dear visitors and learners, Please stay with us for our next series articles about HTML. Please continue reading our Next Articles where we will guide you in details.

Leave a Reply

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