HTML tutorial

 

HTML Introduction

               HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. HTML is a combination of Hypertext and Markup language. Hypertext defines the link between web pages. A markup language is used to define the text document within the tag which defines the structure of web pages. This language is used to annotate (make notes for the computer) text so that a machine can understand it and manipulate text accordingly. Most markup languages (e.g. HTML) are human-readable. The language uses tags to define what manipulation has to be done on the text. 




    HTML is a markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995.

What is HTML

    HTML is an acronym which stands for Hyper Text Markup Language which is used for creating web pages and web applications. Let's see what is meant by Hypertext Markup Language, and Web page.

    Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each other.

         Markup language: 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.

      Web Page: A web page is a document which is commonly written in HTML and translated by a web browser. A web page can be identified by entering an URL. A Web page can be of the static or dynamic type. With the help of HTML only, we can create static web pages.

Hence, HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. An HTML document is made of many HTML tags and each HTML tag contains different content.

simple example of HTML         

<!DOCTYPE>  
<html>  
<head>  
<title>Web page title</title>  
</head>  
<body>  
<h1>Write Your First Heading</h1>  
<p>Write Your First Paragraph.</p>  
</body>  

Description of HTML Tags

           <!DOCTYPE>: It defines the document type or it instruct the browser about the version of HTML.

<html > :This tag informs the browser that it is an HTML document. Text between html tag describes the web document. It is a container for all other elements of HTML except <!DOCTYPE>

<head>: It should be the first element inside the <html> element, which contains the metadata(information about the document). It must be closed before the body tag opens.

<title>: As its name suggested, it is used to add title of that HTML page which appears at the top of the browser window. It must be placed inside the head tag and should close immediately. (Optional)

<body> : Text between body tag describes the body content of the page that is visible to the end user. This tag contains the main content of the HTML document
<h1> : Text between <h1> tag describes the first level heading of the webpage.

<p> : Text between <p> tag describes the paragraph of the webpage.


<p> Paragraph Tag </p>
The <p> and </p> are the HTML tags and “Paragraph Tag” is the HTML element, i.e. the on-page text. 

This tag formats any text between the opening <p> tag and the closing </p> tag as a standard paragraph or main body text. 

<h2> Heading Tag </h2>
In this example, <h2> and </h2> are the HTML tags and “Heading Tag” is the HTML element, i.e. the on-page heading. 

Using this tag will format any text between the opening <h2> tag and the closing </h2> tag as a Heading 2 (a type of subheading.) 

<b> Bold Tag </b>
Here the <b> and </b> are the HTML tags and “Bold Tag” is the HTML element, i.e. the on page text. 

This tag will format any text between the opening <b> tag and the closing </b> tag as bold.

<i> Italic Tag </i>
Here, the <i> and </i> are the HTML tags and “Italic Tag” is the HTML element (the on-page text.)

This tag will format any text between the opening <i> tag and the closing </i> tag as italic.

<u> Underline Tag</u>
Here the <u> and </u> are the HTML tags and “Underline Tag” is the HTML element, i.e. the on page text. 

This tag will format any text between the opening <u> tag and the closing </u> tag as underlined.


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 of 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.

  • The learning curve is very easy (easy to modify)
  • Creating effective presentations
  • Adding Links wherein we can add references
  • Can display documents on platforms like Mac, Windows, Linux, etc
  • Adding videos, graphics, and audios making it more attractive
  • Case insensitive language

HTML Versions

           HTML 1.0: The first version of HTML was 1.0, which was the barebones version of HTML language, and it was released in1991.

HTML 2.0: This was the next version which was released in 1995, and it was standard language version for website design. HTML 2.0 was able to support extra features such as form-based file upload, form elements such as text box, option button, etc.

HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was capable of creating tables and providing support for extra options for form elements. It can also support a web page with complex mathematical equations. It became an official standard for any browser till January 1997. Today it is practically supported by most of the browsers.

HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable version of HTML language. This version is the current official standard, and it provides added support for stylesheets (CSS) and scripting ability for various multimedia elements.

HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft of this version was announced in January 2008. There are two major organizations one is W3C (World Wide Web Consortium), and another one is WHATWG( Web Hypertext Application Technology Working Group) which are involved in the development of HTML 5 version, and still, it is under development.



Applications of HTML

  1. Web Pages Development
    HTML is famously used for creating web pages on the world wide web. Every web page contains a set of HTML tags and hyperlinks which are used to connect other pages. Every page on the internet is written using HTML.
  2. Navigating the Internet
    Navigating on the internet would have been quite a tedious task without HTML. The anchor tags of HTML allows us to link pages and navigate easily. Imagine our life without anchor tags, you would literally have to enter URL everytime. Using achor tags, you can also navigate within a webpage.
  3. Embedding Images and Videos
    HTML allows us to embed images and videos with ease and gives us features to adjust height, position and even rendering type. You can adjust controls, thumbnails, timestamps and much more for videos. Earlier this was done using Flash and HTML has made it easier with the help of <video> tag.
  4. Clinet-side storage
    HTML5 has made client-side storage possible using localStorage and IndexD due to which we no longer need to reply on Cookies. Both of these tactics have their own set of rules and characteristics. String-based hash-table storage is provided by localStorage. Its API is straightforward, with setItem, getItem, and removeItem functions available to developers. On the other hand, IndexDB is a larger and more capable client-side data store. With the user’s permission, the IndexDB database can be enlarged.
  5. Game development
    Although you cannot create complex high-end video games with HTML, the <canvas> element of HTML can be used to make 2D and 3D games using CSS and JavaScript which can be run on browsers.
  6. Data entry support
    With the usage of new HTML5 standards in all the latest browsers, developers can simply add the tags for required fields, text, data format, etc. and get the data. HTML5 now has several new attributes for data-entry and validation purposes.
  7. Interacting with Native APIs
    With the help of HTML, you can interact with your Operating system. With this feature, you can easily drag files onto a web page to upload, full-screen a video, and much more
  8. Offline Web Applications  We know, it is always necessary to have internet connectivity to view web pages. However, nowadays web applications could be accessed even when we are offline. The user will be able to access the data with the help of HTML. It uses a cache manifest file to determine which data to store while offline. 
In case you are traveling outside your Interner Service Provider’s Coverage Area, your connection is likely no more available. In this case, the user provides a manifest that lists the files which are needed for a web application to work offline. This causes the user’s browser to have a copy of the files for offline use.

9. Cutting Edge Feature
Cutting-edge is often used to describe disruptive technologies as well as the latest technological advancements. As we have looked so far, HTML5 has brought in many changes and advancements in web development. Cutting-edge web design trends include animated HTML headers, embeddable infographics, designing around illustrations with CSS, scroll-triggered call-to-action, user badges, etc.  

Google Chrome serves to be an excellent choice of browser for the use of HTML’s recent set of standards and APIs. It lets the libraries download the required packages dynamically whenever required.

10. Enrich the Website
HTML allows the use of Native APIs to enrich the website. With the many features that HTML5 has introduced, it has also introduced many tools and capabilities that were never expected before. APIs like visibility, full screen, and media capture could be used to improve the experience of applications. 

The APIs effectively allows us to do the background work independently of other UI scripts, without affecting the performance of the page. The major role of these APIs is to create custom controls and functions

Learn HTML Using Notepad or TextEdit. 

Web pages can be created and modified by using professional HTML editors.However, for learning HTML we recommend a simple text editor like Notepad (PC) or TextEdit (Mac).We believe that using a simple text editor is a good way to learn HTML.Follow the steps below to create your first web page with Notepad or TextEdit.

Step 1: Open Notepad (PC)

Windows 8 or later:

Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Windows 7 or earlier:

Open Start > Programs > Accessories > Notepad

Step 1: Open TextEdit (Mac)

Open Finder > Applications > TextEdit

Also change some preferences to get the application to save files correctly. In Preferences > Format > choose "Plain Text"

Then under "Open and Save", check the box that says "Display HTML files as HTML code instead of formatted text".

Then open a new document to place the code.

Step 2: Write Some HTML

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>



Step 3: Save the HTML Page

Save the file on your computer. Select File > Save as in the Notepad menu.

Name the file "index.htm" and set the encoding to UTF-8 (which is the preferred encoding for HTML files).





HTML Page Structure

<html>
<head>
<title>Page title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

Advantages Of HTML

  • HTML is Browser friendly: HTML upholds a heap of programs like Google Chrome, Mozilla Firefox, Opera, and so on This makes HTML very program amicable because of its quality among the top current programs.
  • Allowed to utilize: Since HTML is open-source, it’s allowed to utilize. It’s an incredible benefit for organizations and people the same as there is no compelling reason to buy the additional products for composing HTML code as it were.
  • Simple to learn: HTML is the fundamental reinforcement of web advancement. It is so natural to discover that school understudies can likewise utilize HTML to make their own fundamental site with pictures and tones.
  • Basic design: HTML is a basic language and has a proper construction with predefined labels and traits. Along these lines, in the event that you practice routinely, you’ll become accustomed to the straightforward HTML structure and will actually want to compose HTML code without any problem.
  • Lightweight and quick: HTML is a lightweight markup language. It saves time for the clients by decreasing stacking time.
  • Utilization of formats: HTML permits the utilization of formats for developers. In this way, it makes the errand of the web engineers significantly simpler by diminishing the time taken to compose the plan codes.
  • Information stockpiling: HTML upholds Data Storage. HTML web stockpiling gives two items to put away information. They are as per the following: window.sessionStorage – This stores the information for one meeting. window.localStorage – This stores the information with no termination date



Comments

Post a Comment