In this tutorial we will learn HTML For Beginner part 1.
Introduction to HTML
Although I’m sure most of you already know what HTML is or have already made some HTML code, it doesn’t hurt us to briefly discuss the definition of HTML.
HTML is an abbreviation of Hypertext Markup Language. This abbreviation consists of 3-word components, namely: Hypertext, Markup, and Language.
The word Hypertext from HTML emphasizes understanding: the text is more than just text (‘hyper’- text). That is, in addition to functioning as plain text, a text in HTML can also function as a link to another page or known as a link. Later we will also see that not only text can be used as a link, but it can be an image. This link is the core of HTML.
The second word for the abbreviation HTML is Markup. Markup can be translated as a sign or marker. In HTML, we will use special signs such as <p>, <a>, or <li> . This sign is needed to format and structure web pages.
The last part of HTML is Language. Especially for those of you who have become acquainted with computer programming languages, HTML here does not use ‘Programming Language’, but only ‘Language’.
This implies that HTML is not a programming language. HTML does not have a basic structure like variables, IF conditions, functions, or classes like a computer programming language.
Summarizing the above explanation, it can be concluded that HTML is a special language written using signs (mark) to create web pages.
“HTML or HyperText Markup Language is the standard markup language used to create web pages.”HTML definition of wikipedia
As we know that HTML is used to create web pages. But what exactly is the function of HTML?
In the process of web development (the process of making a web), HTML functions to create the structure of a website. HTML is used to mark which part will be the title of the article, which part serves as the contents of the article, or which parts need to be presented in tabular form.
Regarding the appearance of the website (for example, whether to use a blue or red background color), submitted to another web technology known as CSS (Cascading Style Sheet).
Some questions that often arise when you first learn HTML are how to display a frame (border) of an image or how to make a menu bar that appears itself when the mouse is above it (rollover menu)?
HTML at a glance
The trick, please run a web browser (Google Chrome or Mozilla Firefox), open a website, then right-click on the site page and select View page source. For example, in the image below you can see the codes used to create a home page from wikipedia.org site.
Know the Types of Web Programming Languages
Although this tutorial will only discuss HTML, I also want to introduce you to the programming technologies needed to create a website.
I think this information is quite important especially if you are new to HTML, and want to focus on being a web programmer.
As you can see from the wikipedia.org source code above, mastering HTML alone is not enough. I honestly say that if you have finished reading this tutorial, that is just the beginning of various web programming technologies that must be mastered.
For example, later in this tutorial, I will discuss how to create forms with HTML. Forms are usually used for the registration process on a site.
When the form is finished inputting, to be able to process the contents of the form, we must use a programming language (for example, PHP). As a final step, we want to save the contents of the form into a MySQL database to be accessed again at a later time.
History and Development of HTML
HTML also determines the direction of the Internet. Various technologies took turns changing until finally HTML5 is known today. In this chapter I try to bring you to know the history of HTML, starting from the beginning of its appearance, as well as various aspects of technology that accompany HTML development. It will also be discussed about the development of web browsers and the era of ‘browser war’ which is quite phenomenal.
The history of HTML I have written is quite long and detailed. If you can’t wait to write HTML, please continue to the next chapter. However, from this story, we can get to know the technical terms that accompany the development of HTML, such as SGML, XML, XHTML, W3C ,and WHATWG.
Tim Berners-Lee and CERN
HTML was first designed in 1989 by Tim Berners-Lee. He was an English scientist who was working at CERN at the time. CERN itself is not a technology company or organization related to the internet.
CERN is an abbreviation of French: Conseil Européen pour la Recherche Nucléaire, or free translation: European Commission for Nuclear Physics Research. CERN is located on the border of Switzerland and France, which was formed in 1954 as a joint European research institute for Nuclear Physics.
The idea of HTML was developed by Tim Berners-Lee to make it easier for fellow CERN scientists to share research results. CERN researchers involve various universities in many countries, so it needs a way so that research results from a university can be seen easily by other universities.
Beginning of the birth of HTML
At the end of 1991, Tim Berners-Lee published a document entitled: HTML Tags. In this document, the Team made a simple concept of HTML consisting of 18 elements. Instead of creating new language standards, Tim Berners-Lee designed HTML based on the concept of a markup language known as SGML (Standard Generalized Markup Language).
Writing HTML tags with square brackets comes from this SGML concept. In other words, HTML is an implementation of SGML. SGML is an international standard for creating documents with markings such as paragraphs, lists, headings, and so on. HTML tags like <title>, <p>, <li>, and <h1> to <h6> come from SGML.
But not all features in HTML come from SGML, one of which is: hypertext link. The href attribute in the tag <a> is purely the result of the thinking of Tim Berners-Lee. This is what distinguishes HTML from SGML.
To run HTML, Tim Berners-Lee developed the first web browser called WorldWideWeb which later changed its name to Nexus. The idea of HTML was published in a mailing list and immediately caught the attention of various computer scientists around the world.
In 1993, other web browsers used to display HTML began to appear. Some of them are Lynx, Mosaic ,and Arena. But because there is not yet a standard for how HTML rules are written, each web browser defines its HTML version.
To overcome this, Tim Berners-Lee and his partner Dave Raggett, submitted a proposal entitled: Hypertext Markup Language, Ver 1.0 to IEFT (Internet Engineering Task Force). IEFT is an international standard institution that handles internet architecture. This proposal is HTML version 1.0.
However, this HTML 1.0 draft failed to become a standard because it passed the time limit specified by IEFT. Therefore, HTML version 1.0 has never been an official standard.
Because the HTML 1.0 draft encountered problems, in early 1994 IEFT formed the HTML Working Group (abbreviated as HTMLWG). HTMLWG aims to perfect the HTML previously proposed by Tim Berners-Lee and Dave Raggett.
In July 1994, HTML 2.0 officially became the first HTML standard authorized by IEFT. HTML 2.0 has specifications based on the HTML 1.0 draft with the addition of several new features that have been widely used in web browsers at the time.
For example, the Mosaic web browser, which is the most widely used adds tags <img> to display images. This tag <img> then becomes part of the HTML 2.0 standard.
In the same year, Tim Berners-Lee formed the World Wide Web Consortium (W3C), with the mission of popularizing the use of HTML. W3C and HTMLWG are 2 separate organizations that work together with HTML standards. The two institutions initially tried to work together.
Browser War 1
In November 1994, Marc Andreessen, one of Mosaic’s web browser programmers, left NCSA and founded Mosaic Communications, which later changed its name to Netscape Communications Corp.
Netscape Communications Corp released the Netscape web browser which became the web browser market leader at the time. Unlike now, where web browser applications can be obtained free of charge, web browser applications such as Netscape are paid applications, so that many software manufacturers compete to be the best.
An era called browser war began in mid-1995 when Microsoft released the IE 1.0 (Internet Explorer 1.0).
This era of ‘browser war’ complicates the process of making a web with HTML, because programmers have to make 2 pieces of program code for each web browser. This is necessary because an HTML tag that runs in Netscape, may not be available in IE, and vice versa. HTML Standard Version 2.0 needs changes!
Seeing the need for a new HTML standard, in the middle of 1995, Dave Raggett, who was then working as a researcher at the Hewlett-Packard (HP) computer company, tried to submit a draft HTML 3.0 to IETF.
However, because the HTML 3.0 draft has a lot of debate (about what features should be there, and which features to be removed, etc.) HTML 3.0 finally failed to become standard.
This problem was again handled by HTMLWG who tried to reformulate HTML 3.0 (same as in the case of HTML 1.0). However, HTMLWG also experienced a deadlock and ended with the dissolution of this institution in late 1996.
Then, the development of HTML was determined by the World Wide Web Consortium (W3C) which was founded by Tim Berners-Lee. W3C tried to improve the HTML 3.0 draft and finally in January 1997, the HTML 3.2 standard was officially released by W3C (not via IETF as the previous HTML 2.0 standard).
HTML 3.2 adds new features such as <table>, and has supported the separation of content and appearance. To create a website display design, W3C ‘takes it out’ from HTML and the functionality is left to another web technology known as CSS.
Also in 1997, the ‘browser war’ map changed dramatically. In October 1997, Microsoft released Internet Explorer 4.0, which was packaged into the entire Windows operating system for free. This marked the start of Microsoft’s monopoly in the web browser market. So, slowly but surely, Netscape suffered a setback.
HTML 4.0 and HTML 4.01
The rapid development of the internet and HTML made W3C immediately submit a draft HTML version 4.0 at the end of 1997.
In December 1998, the HTML 4.0 standard was officially released by W3C. HTML 4.0 enhances tag writing, full support for CSS, and adds multimedia features. HTML 4.0 also comes with 3 variations: Strict, Transitional, and Frameset.
A year later, on December 1999, HTML 4.01 was released to improve some of the errors contained in HTML 4.0.
The Netscape vs. IE web browser war continues to grow, both competing to add new features in addition to the HTML 4.01 standard. Nonstandard writing tags are also widely used by both web browsers.
Seeing this, W3C has again developed an improved version of HTML 4.01. However, due to limitations in HTML, W3C tried to switch to another markup language concept, called XML. 1999 was the year that HTML experienced ‘apparent death’, because the development of HTML subsequently turned to XHTML.
XHTML is an abbreviation of (eXtensible HyperText Markup Language). If you remember that HTML uses SGML as the basis for writing, then XHTML tries to get out of SGML to adopt a markup language that is more ‘strict’, namely XML (eXtensible Markup Language). In other words, XHTML is the HTML version of XML.
Both SGML and XML both originate from markup language groups whose writing uses tags with square brackets, but XML has more stringent rules. In XML, all tags must be written in lowercase, each tag must be closed, and each attribute value must be written in quotation marks.
W3C believes that XHTML is the web language of the future and as the successor to HTML. W3C officially published the XHTML 1.0 standard in January 2000.
There are no new tags or features added in XHTML 1.0. The XHTML 1.0 standard is only an XML version of HTML 4.01. All tags in HTML 4.01 are also available in XHTML 1.0.
As soon as XHTML 1.0 was published, W3C released the XHTML 1.1 standard in May 2001. This XHTML 1.1 version introduced modules to separate sections of the XHTML page. The writing rules and tags supported are also stricter than XHTML 1.0. Tags and attributes that function for display are no longer supported because this should be made with CSS.
At this time, the combination of XHTML and CSS is the ‘best’ HTML writing rule. Various books and references recommend the use of XHTML rather than HTML because it is considered neater and ‘standard’.
The End Result of the Browser War 1
The browser war has also died down with Netscape’s defeat. In 2002, almost 96% of the web browser market was owned by Microsoft with Internet Explorer. This era marks the end of the first browser war won by Microsoft.
This also results in the cessation of adding new features to the web browser. For 5 years (2001 – 2006), Microsoft only released one version of IE, IE version 6 which became the default web browser on Windows XP.
After being defeated by Microsoft, Netscape then released its web browser program code and gave it to a non-profit body: the Mozilla Foundation.
Continuing the development of the XHTML standard, during August 2002 to July 2006, W3C tried to make a draft for the next generation of XHTML, namely XHTML 2.0.
XHTML 2.0 is a completely new version and is trying to break the chain with HTML. XHTML 2.0 no longer supports features that were previously in HTML.
This makes the majority of web programmers protest. According to them, XHTML 2.0 does not see the needs of web developers and only focuses on standards that will be difficult to implement. This problem makes the discussion about XHTML 2.0 deadlocked.
On the web browser side, after a few years Internet Explorer has no competitors, the successor to Netscape, Mozilla Firefox 1.0 was released in 2004 for free. Firefox is slowly starting to become an alternative web browser from IE. Social media sites like Digg, Facebook and Twitter have also begun to appear.
WHATWG dan HTML5
Looking at XHTML’s unclear direction and ‘stopping’ on the XHTML 2.0 draft, several programmers from Apple, Mozilla Foundation and Opera Software established the Web Hypertext Application Technology Working Group, which was shortened to WHATWG in 2004.
WHATWG wants to create HTML standards that are based on the needs of programmers and web browsers. Instead of using the concepts of XML and XHTML, WHATWG decided to ‘revive’ HTML 4.01 which had long been abandoned.
WHATWG then designed the draft Web Forms 2.0 and Web Apps 1.0 which were later merged into HTML5. WHATWG itself is not a competing organization of W3C, they plan to complete the HTML5 proposal and then submit it to the W3C.
While WHATWG developed HTML5, W3C continued XHTML 2.0. But in October 2006, Tim Berners-Lee acknowledged the move from HTML to XHTML did not work as expected. A few months later, W3C formed a special team in developing HTML 5 using the basics of HTML5 from WHATWG.
Up to this point, the development of HTML is a little confusing, because there are 3 sequel versions of HTML. The first and second are XHTML 2.0 and HTML 5 developed by the W3C team, and the third is HTML5 developed by WHATWG (note that HTML5 and HTML 5 are 2 different versions, and the writing of the two is only distinguished by a space!)
In 2009 W3C finally decided to stop the development of XHTML 2.0 and co-developed HTML5 with WHATWG.
The development of web browsers has also become something interesting. At that time Mozilla Firefox shared market share with IE. Mozilla Firefox is gaining in popularity because it has a variety of features than IE (mainly because it has a plugin feature). Even in December 2009, StatCounter (an internet technology survey site) stated that Mozilla Firefox had become the most popular web browser in the world, defeating IE.
On December 11, 2008, Google decided to release the Google Chrome web browser. Together with IE and Mozilla Firefox, the second browser war era begins.
HTML5 as Living Standard
Regarding the continuation of HTML5, WHATWG and W3C work together to develop the future of HTML. In July 2012, the two agreed to ‘share the task’. W3C developed a single HTML 5 standard, while WHATWG worked on what is called the HTML5 Living Standard.
The concept of Living Standard is that this standard will never be finished and is always updated and refined. Thus new features can be implemented immediately without waiting for authorization from W3C.
From the web programmer’s side, Living Standards HTML5 is a challenge. Because it requires us to always be updated with the latest HTML5 features, and find out which web browsers have supported these features.
Finally after a long wait, on October 28, 2014, the HTML5 standard was officially released by W3C.
New Technologies and Features in HTML5
In addition to perfecting the previous version, HTML5 also brings new features into HTML. If all this time HTML was only used to create web structures, HTML5 brought various new technologies to make the web more powerful. We will see at a glance what the new features brought by HTML5.
The HTML5 standard consists of 3 parts: HTML5 markup, HTML5 API, and technology related to HTML5.
- HTML5 markup is an HTML concept that has existed so far, namely the code used to structure web pages. For this feature, HTML5 adds various new tags such as <header>, <footer>, <aside>, <figure>, <article>, <audio> and <video>.
- Several technologies are often considered to be part of HTML5. Such technologies as CSS3, SVG, and MathML. Although completely separate, this technology is used in conjunction with HTML, so it is often considered part of HTML5.
You can see various technologies surrounding HTML5 in the following image:
Preparing a Web Browser
To run HTML, we need a web browser. The web browser is a program that will translate HTML codes and display them into web pages.
I’m sure the web browser application is installed on your computer, whether it’s Google Chrome or Mozilla Firefox. Both of these web browsers are the best web browsers for web development. Both of them also always follow the latest HTML standards and features (as long as you are diligently updating them).
Besides Google Chrome and Mozilla Firefox, there are still other web browsers that can be used, such as Internet Explorer, Opera ,and Apple Safari.
Although it doesn’t have to be, I recommend you to install these five web browsers. The goal, to see how the HTML code that we make is displayed on each web browser.
Web browser support for HTML5
In this tutorial, we will discuss a lot of material about HTML to the latest features in HTML5. Especially for this, the ‘legacy’ web browser cannot understand HTML5.
If you use a web browser such as Internet Explorer 6 or 7 to open a web page created with HTML5, it is possible that the web page is displayed ‘different ‘, and even fails to appear at all.
For consideration, here are general web browser support for HTML5:
- The Google Chrome and Mozilla Firefox web browsers have long supported HTML5. Both of these web browsers also regularly issue updates and have features for automatic updates. If there are users who are still using the old version, instructions will usually be displayed to download the latest version immediately. Broadly speaking, both of these web browsers fully support HTML5.
- Although not very widely used, Apple Safari and Opera web browsers also have long supported HTML5. Older versions of these two web browsers are relatively rare, making it safe for HTML5.
- The default web browser on a smartphone or tablet may have limitations in HTML5 features. But because this device continues to grow and by application makers (Google and Apple) also always keeps abreast of developments. Slowly this web browser also supports full HTML5.
- Internet Explorer (IE) web browser might be a problem. IE version 9 and below do not support most HTML5 features. This problem is compounded because the “old” version of IE is still widely installed on Windows computers. Plus on some Windows operating systems, IE cannot be updated to the latest version. For example, Windows XP carries IE version 6, and can only be upgraded to version 8.
Get to know the Developer Tools Menu
Although we can see HTML codes from a website by right-clicking and selecting the view source menu, modern web browsers also include a special menu for browsing HTML codes. This menu is often referred to as Developer Tools.
The fastest way to access it is to press the CTRL + Shift + i key combination. Please look around for features. This feature is specifically designed for web programmers to be able to view website code more easily. We can even edit HTML code directly from the developer tools menu.
Choose Text Editor
As we will learn later, basically HTML files are just plain text files. To create an HTML code, we can use a text editor application.
The text editor is an application that functions to create and edit text files. One example of a text editor is the default Windows Notepad application. However, Notepad is not suitable for programming.
There are many special programming text editor applications available on the internet and the majority can be obtained free of charge. One of them is Notepad ++ which I will use throughout the discussion of this tutorial. I chose Notepad ++ because it is light and small (only about 5MB). This application is more than enough to create HTML files
Text Editor vs HTML Editor
You might be wondering why we use Text Editor, not HTML Editor. HTML Editor is an application that can make HTML easily even without the need to understand the codes in it. Examples of HTML Editor are Adobe Dreamweaver or Microsoft Frontpage / Microsoft Expression Web (not developed anymore).
Just like Adobe Dreamweaver, this application is not ‘right’ to learn, because it will generate HTML codes instantly. The HTML editor is more suitable if you already know HTML codes and want to quickly build a website.
If you don’t understand HTML, this application will even make you confused if something goes wrong or if you want to add new features to a web page.
Running Your First HTML File
Before closing this chapter, we will immediately try writing and running an HTML file. The text editor that I use is Notepad ++. If you have not installed this application, please download it at http://notepad-plus-plus.org/download.
The installation process of Notepad ++ is almost the same as other programs. Please follow the installation process and leave the default settings. When finished, the initial appearance of Notepad ++ will look like the image below.
The next step is to prepare a folder where HTML files will be placed. This folder location is free and does not have to be in a special folder. To be easily accessed, I created a learn_html folder on drive D, so the address is D:\learn_html.
Next, back to the Notepad ++ application, create a new file, select the File menu-> New type the following code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Learn HTML</title> </head> <body> <h1>Learn HTML</h1> <p class=first> This is the first paragraph </p> <p>Hello World…</p> </body> </html>
At this stage you don’t need to understand the program code above, we will discuss it in detail throughout this tutorial. Simply save by pressing the CTRL + S button, or select the File menu-> Save. Locate the learn_html folder, then rename the file to hello_world.html and click Save.
Shortly after you save the file, the codes in Notepad ++ will be colored. This is one of the standard features of a special text editor programming application.
This code coloring is known as syntax highlighting. This makes it very easy for us to make HTML commands. If there are colors that don’t fit or are different, there’s a good chance there is something wrong.
To run this HTML file, you can directly open the learn_html folder using Windows Explorer, then double-click the hello_world.html file. The results will be displayed in a web browser.
If you find a different appearance or even a blank page, make sure the program code is the same again. In computer programming, just one character is wrong, whether it’s a period, a comma, or the ‘>’ sign, the program won’t work.
As an alternative, you can open a web browser first, for example, Mozilla Firefox, then in the address bar please type the address D:\learn_html\hello_world.html and press Enter.
Congratulations! You have successfully run your first HTML file!
From this experiment, we can see that every HTML page must end with a .html extension. You might also find some HTML files that end in .htm. This suffix is an HTML extension for older versions of Windows.
To be accessible from a web browser, an HTML file must be written without spaces. As a word separator, spaces can be replaced by underscores (_), or hyphen (-).
In this chapter, we have prepared the tools needed to create and run HTML, namely the web browser and Text Editor. Now we can start learning HTML codes.
In the next chapter, we will discuss the basic structure of HTML pages.
HTML Tutorial List
- Learn HTML For Beginner (Part 1 : Introduction HTML)
- Learn HTML For Beginner (Part 2 : Basic Structure of HTML)
- Learn HTML For Beginner (Part 3 : Head Element)
- Learn HTML For Beginner (Part 4 : Text Formatting Element)
- Learn HTML For Beginner (Part 5 : List Element)
- Learn HTML For Beginner (Part 6 : Image Related Element)
- Learn HTML For Beginner (Part 7 : Audio dan Video Element)
- Learn HTML For Beginner (Part 8 : Table Element)
- Learn HTML For Beginner (Part 9 : Form Element
- Learn HTML For Beginner (Part 10 : HTML5 Form Element)
- Learn HTML For Beginner (Part 11 : Embed, Object dan Iframe Element)
- Learn HTML For Beginner (Part 12 : HTML5 Canvas Element)
- Learn HTML For Beginner (Part 13 : Scalable Vector Graphics (SVG))
- Learn HTML For Beginner (Part 14 : HTML5 Semantic Tag (Layout))