INTRODUCTION TO HTML AND CSS

INTRODUCTION TO HTML - FRONT-END WEB DEVELOPMENT

HTML stands for hyper text markup language, it is used to create web pages and applications on the internet. In Fact it is the most widely used language on the web and can be used to create a simple static site without any interactivity. It is very important to note that HTML is a markup language and not a programming language like python, java etc.

A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic

A markup language is a computer language that is used to apply layout and formatting conventions to a text document. Markup language makes text more interactive and dynamic. It can turn text into images, tables, links, etc.

This article is the first part of the introductory series to html and css for building web pages and applications. The aim of this article is to enable you to understand html, what it does on the internet, its hierarchy and to enable you to build your own webpages. 

Let us look at the objectives and then the topics to be covered in this particular article in order to understand completely.

LEARNING OBJECTIVES

1. To understand HTML and its history.
2. To understand how it structures webpages and hierarchy.
3. To build a simple webpage with images and hyperlinks.

TOPICS

1. History of html.
2. The web 1.0 without css.
3. Basic html tags.
4. Build a simple webpage with all html tags learnt.

HISTORY OF HTML

HTML as said earlier stands for hyper- text transfer protocol, the first version was written by TIm Berners-Lee in 1993 and since then there have been more versions from 1 through 5. The most widely used version throughout the 2000s was HTML 4.01  and it became the standard in December 1999.

HTML was developed specifically to support linking among online resources. Compared with other digital formats used for primarily textual document-like content, the HTML format has been extended to support embedded audio and video and development of interactive applications.

Html gives structure and hierarchy to all web pages from the text to the images and every single element, it is in control of all text in all web pages and applications. Without html web pages would be completely without order and disorganized.

One can describe html as a web skeleton in other words and this is still technically correct.

Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a document called “HTML Tags” proposed by Tim in late 1991. The latest version of HTML is HTML5, which we learn later in this tutorial.

WEB WITHOUT CSS (WEB 1.0)

Like every other part of technology, the web has passed through stages to be where it is today, they are:

1. Web 1.0
2. Web 2.0
3. Web 3.0

Let's talk about the web 1.0, it is described as the earliest version of the internet with majorly hyperlinks, no additional visuals and control forms that were not interactive in any way. It was passive and most of the user input took place offline, the web pages were built majorly with HTML. 

The websites were plain and were not interactive in any way, look at a sample of the early web below.

You can see from the above image that it could be defined as the virgin unexposed version of the web with majorly text and links for resource sharing and other useful functions.

In the next section we are going to be looking at html tags and how they can be used to build web pages.

FEATURES OF HTML

1.  It is a very easy and simple language, It can be easily understood and modified.
2.  It is very easy to make an effective presentation with HTML because it has a lot of formatting tags.
3.  It is a markup language, so it provides a flexible way to design web pages along with the text.
4.  It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances the interest of browsing the user.
5.  It is platform-independent because it can be displayed on any platform like Windows, Linux, and Macintosh, etc.
6.  It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which makes it more attractive and interactive.
7.  HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-case.

BASIC HTML TAGS

A html tag is a keyword which defines and displays how the web browser will format and display the content of a web page. With the help of tags, a web browser can distinguish between an HTML content and a simple content. 

HTML tags contain three main parts namely:

1. The opening tag “<”.
2. The content of the tag.
3. The closing tag “>”.

Example :tag

Even though some html tags are unclosed, most of the tags follow this general format. When a browser reads an HTML document, it starts from top to bottom to read it. All html tags have their different properties. For every html page, there are compulsory tags that must be present for the browser to read the pages properly at all.

Enough talk let us look at the tags necessary for a web page to actually load with html.

From  the above diagrams you can see basic code required for a web page to be displayed by a browser and the output of the code. Let us look at each element and explain what they all do on the web page one by one. This particular exercise will enable you to understand why everything is and guide you to build your very own web page.

They are as follows:

1. - This is always the first line of code in every html page, that specifies the version of html the webpage is written in which is html version 5.
2. - This specifies the language of the text content on the web which is english.

• - It contains metadata about the script and webpage, the information is not displayed but it helps browsers and search engines. All the data contained in the head tag never gets displayed on the webpage.

• - The meta tags are contained within the head tag and contain information about character set, page description and viewport settings.