HTML - Introduction to HTML [LESSON]

Introduction to HTML

What is HyperText Markup Language?

Image showing basic HTML - <html> <title> HTML </title> This is HTML!</html>

Prior to 1991, the Internet was mainly used by universities and the military to communicate and share reports and information. It was very boring! It wasn’t anything like what you have today, it was pretty much all in Times New Roman with no color or design at all. The public didn’t use the internet and most people weren’t aware of such a thing. It started in the late 1960s and early 1970s with something called ARPANET (the US Advanced Research Projects Agency Network). Information was sent to others through phone lines using something called packet switching. In 1991, the Internet was born, it was referred to as the “Information Superhighway.”  Tim Berners-Lee played a major role in the development of the Internet. Lee developed a coding language called HyperText Markup Language. This allowed for hypertext, which is text that can be clicked on, to go to another document or another location in that document. HTML became the standard for creating documents that internet browsers can read. All websites are compiled of HTML, CSS (Cascading Style Sheets – the design language of the web) and most include JavaScript. Most websites today also include more advanced  programming languages. However, the basic setup of all web pages is the same, no matter what site you go to. If you look at the page source code, you will see that all pages are made using HTML and are set up in the same standard way. You can see the page source code by doing one of the following:Image showing how the source code comes from the website.

  • PC/Windows – right click on page, select “View Page Source”
  • Mac – navigate to the page, use the following keyboard shortcut: Option+Command+U
  • Chromebook – click the menu icon on the browser toolbar, select "More tools", then “View Source” 

There have been several versions of HTML:

  1. 1991 - HTML 1.0 invented by Tim Berners Lee.
  2. 1993 - HTML 1.0 is released, but not many developers were creating websites at that time. Basic HTML for web pages and images.
  3. 1995 – HTML 2.0 is published. This added support for tables and forms.
  4. 1997 – HTML 3.0 was invented. Expanded tables and forms were added, also allowed complex mathematical equations. It also supported many presentation-focused elements such as fonts.
  5. 1999 – HTML 4.0 was released and was widely used. This version added support for style sheets and scripting ability for multimedia elements.
  6. 2014 – HTML 5.0 was released and is used worldwide. This version is a work in progress and supports new HTML5 elements and APIs.

HTML is written in text editors. These can be plain text editors such as Notepad and TextEdit, or they can be online text editors. HTML is written using brackets and is easily understood by humans and computers. Below are some of the most common elements.

Image showing the Doctype of a web page - <!DOCTYPE html><!DOCTYPE html> This is the document type and tells the browser what version of HTML you are using. This is the Doctype for HTML5. This is the first line on every HTML webpage.

<html> This is the second HTML element on every web page. This element tells the browser this is a web page.  You can enter additional information inside this element, such as the language. This is written like this <html lang=”en”>, this tells the browser this page is written in English. The second part in this element is called an attribute, this gives additional information to the browser about the tag. They are written with the attribute name = “the value of the attribute”.   Most tags, such as the <html> tag, are written in pairs. This means they have an opening tag, something contained inside between the opening and closing tags, and a closing tag. The closing tag is written with a forward slash and the name of the tag - </html>. So, the pair is <html> additional information contained here </html>.

<head> This is the third element on a web page. The head is before the body. The head contains metadata. Metadata is information for the browser, it isn’t seen on the webpage itself.  Inside the <head> can be a lot of metadata.  The first thing inside the <head> is the <title>.  The <title> </title> is where you put the title of the page that is seen in the tab for the window in the browser. This is NOT the title that is seen on the page. This only shows up on the browser tab and cannot be styled to make it bold or bigger. So, if the name of your page is African Tree Frogs, then your head would be like this:

<head> <title>African Tree Frogs</title>

</head>

After the <head> you then have the <body> tag. The <body> tag is immediately after you close the <head> tag. It contains everything you want to be seen on your page. You don’t close the body tag until you have finished putting everything on your page. Then the last 2 tags on every page are </body> </html>, which closes the body and the web page.

Illustrates an output of a given example HTML code.

The very basic web page will have the following tags in a text editor:

Tags in a very basic web page.

For this to work in a browser, you must save the page as an html document. Typically, the name of your home page is “index.” Therefore, assuming this is your home page, you would save the document as index.html. You should always save the document and all supporting documents such as pictures, CSS files, videos, audio, and animations inside a root or site folder. This way the browser can locate all the items it needs to make your web page show up properly. 

Watch the video Basic HTML below on how to use Notepad++ to start a basic webpage.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION