TechSmart

Think Technology Think Smart

Breaking

Tuesday, May 26, 2020

Basics of HTML

    Hello guys its Akash, in this post we learn about Basics of HTML and how to structured a HTML page. This HTML coding gives a basic knowledge of web designing so read carefully.

Introduction To HTML:- 


  • Hyper Text Mark-up Language (HTML) is the standard mark-up language  for creating web pages, websites and web applications.
  • First developed by Tim Berners-Lee in 1990, HTML is used to create electronic documents (called pages) that are displayed on the World Wide Web.
  • Each page contains a series of connections to other pages called hyperlinks.
  • In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and  prototypes ENQUIRE, a system for CERN researchers to use and share documents.
  • In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system. Berners-Lee specified HTML and wrote the browser and server software in late 1990.
  • HTML is the one of the most used mark-up language which our web browsers can recognize.
  • You must have heard about other web programming languages, but in fact they all are channelized through mark-up languages.
  • Mark-up languages are designed for the processing, definition and presentation of text. The language specifies code for formatting, both the layout and style, within a text file.
  • The coding used to specify the formatting is called tag. HTML is an example of a widely known and used markup language.
Are there any other languages than HTML to create web pages?
  • Standard Generalized Markup Language (SGML) - a standard pattern for mark-up languages to which HTML adhere. SGML inspired the creation of HTML and HTML inspired many others.
  • Extensible Markup Language (XML) - a newer standard pattern for mark up languages a restricted form of SGML that is intended to be compatible with it.

1. Working Of HTML


  • To understand that we need to first know how internet works. "Internet"-a short acronym of "Inter network connections". Internet is a connection of several machines via cables, wires, wireless and many other peripheral devices.
  • The files are transferred over the network from one machine to other using electronic signals. HTML files are created in such way that they can travel over the network using electronic signals.
  • The HTML files are hosted on a web server which in a machine kept at remote location which runs 24x7 and keeps rendering the data which is asked by the client machine a client machine means the computer device at the user end).
  • Once the request is processed by the web server, HTML data is sent to the requesting client. This client copies all the HTML files from the server and stores it in the computer memory temporarily.
  • The web browser (like Chrome, Firefox, Edge) then reads these files and interpret its functionality and display the Information over the browser screen.
  • Web browser is application software used to read and interpret the data received in Hyper Text form over the internet.
  • The interpretation of the functionality is understood with help of HTML Tags.

2. HTML Element 


  • HTML elements are the hidden keywords within a web page that define how the browser must format and display the content.
  • These tags have two parts, an opening and a closing part. For example, <html> is the opening tag and </html> is the closing tag.
  • The functionality of the tags is implemented to the data which is written inside the HTML tags i.e. content written between opening and closing of the tag is considered for the HTML tag functionality.
  • The web browser reads these tags and hides them and simply implements its functionality over the text.
  • HTML tags are mainly of two types:
     1. Container Tag : A Container tag is one that activates an effect specific to that tag and has a companion tag which discontinues the effect. e.g., <B>is a container tag that, together with its companion closing tag </B>, causes all text found between them to be rendered in bold. The<B> tag turns on the bold effect and the </B> tag turns it off.
     2. Standalone Tag or Empty Tag : A Standalone tag is one that does not have a companion tag. e.g., the <IMG>tag simply places an image on a page. <IMG> has no effect that was turned on and needs to be turned off, so no companion closing tag is needed.

3. Creating a HTML Document

  • To write HTML document we use a simple Notepad editor, which is readily available with every operating system with different names.
  • Like windows users can use "Notepad", Mac users can use "TextEdit" and so further. There is some special editor software also available in the market like "Notepad++" for windows.
  • You can use these raw editors and write the HTML Tags and Text and save it with the file extension as "html". e.g.: "myfirstfile.html".
  • The operating system recognizes these extensions and assigns the default application software (i.e. Web browser) to open/read the document.
Here is a screenshot of how it works
1. Write the file

2. Save the file with proper ".html" extension.

3. View the output by double clicking the saved file.

4. Structure of an HTML page

  • HTML page is a unlike other pages we use (i.e notebook, MS-Word) like every page has a Title, Header, Body, and Footer. HTML pages have the similar layout.
  • We define a HTML page with some basic structure as given bellow.
           1.   Title                  2.   Head
           3.   Body                 4.  Footer
For implementing this we have to use HTML tags.
   Title tag : <title></title>
   Head tag : <head></head>
   Body tag : <body> </body>
   Footer tag : <footer> </footer>
Note : These tags are not case sensitive so whether we write them in upper or lover case does not matter 
 

  • The structure is most important for tags . As mentioned above, every tags lies between <html></html>tags.
  • The opening and closing of the tag should be taken care of like you can refer in this image.
  • The output shall be displayed in the web browser as shown below:
  • If you can notice the output does not displayed the tags, instead it just displays its functionality. i.e the title went up on the tab, the header is above the body and footer bellow the body.
  • It all happened automatically. Thanks to our web browser who can interpret the tags and displays the output. 
Thanks for reading have a nice day

No comments:

Post a Comment