Basic of HTML (Code structure)

 

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.

42

Let's see a simple example of HTML.

 

1.     <!DOCTYPE  html>  

2.     <html>  

3.     <head>  

4.     <title>Web page title</title>  

5.     </head>  

6.     <body>  

7.     <h1>Write Your First Heading</h1>  

8.     <p>Write Your First Paragraph.</p>  

9.     </body>  

10.    </html>  

Description of HTML Example

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

Brief History of HTML

In the late 1980's , a physicist, Tim Berners-Lee who was a contractor at CERN, proposed a system for CERN researchers. In 1989, he wrote a memo proposing an internet based hypertext system.

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 will learn later in this tutorial.

HTML Versions

Since the time HTML was invented there are lots of HTML versions in market, the brief introduction about the HTML version is given below:

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.

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.

 

HTML Head

The HTML <head> element is used as a container for metadata (data about data). It is used between <html> tag and <body> tag. whose content is not displayed in the browser on page loading. It just contains metadata about the HTML document which specifies data about the HTML document.

Metadata defines the document title, character set, styles, links, scripts, and other meta information.

Following is a list of tags used in metadata:

  • <title>
  • <style>
  • <meta>
  • <link>
  • <script>
  • <base>

HTML <title> Element

The HTML <title> element is used to define the title of the document. It is used in all HTML/XHTML documents. The <title> element must be placed between <head> element, and one document can only have one title element.

What does <title> element do?

1.     It defines a title in the browser tab.

2.     It provides a title for the page when it is added to favorites.

3.     It displays a title for the page in search engine results.

Note: The title element must be specific about the document and its recommended length is 65 to 70 characters including spaces.

Example:

HTML <style> Element

The HTML <style> element is used to style the HTML page. The <style> element can have CSS properties for that HTML page only. If we want to apply CSS for multiple pages then we should use separate CSS file.

Example:

1.     <!DOCTYPE html>  

2.     <html>  

3.     <head>  

4.       <title>This is Page Title</title>  

5.       <style>  

6.         body {background-color: pink;}  

7.         h1 {color: red;}      

8.         p {color: blue;}  

9.       </style>  

10.                        </head>    

11.                        <body>  

12.                        <h1>This is a Heading</h1>  

13.                        <p>This is a paragraph.</p>  

14.                        </body>  

15.                        </html>  

HTML <link> Element

The HTML <link> element is used to link an external style sheet to your webpage. The <link> element contains main two attributes which are "rel" and "href". The rel attribute indicates that it is a stylesheet, and href gives the path to that external file.

Example:

1.     <!DOCTYPE html>  

2.      <html>  

3.      <head>  

4.         <title>This is title</title>  

5.         <link rel="stylesheet" href="style.css">  

6.        </head>  

7.        <body>  

8.         <h2>Web-page with external CSS</h2>  

9.         <p>This is looking a cool page</p>  

10.                           </body>  

11.                         </html>  

HTML <meta> Element

The HTML <meta> element is used to specify the character set, page description, keywords, authors and other metadata on the webpage.

Metadata is mainly used by browsers, search engines, and other web services to rank your webpage better.

Let's see how to use metadata:

To define a character set:

1.     <meta charset="UTF-8">  

The charset attribute specifies the character encoding. In this example we have set it to "UTF-8" which means it can handle to display any language.

Example:

1.     <!DOCTYPE html>  

2.     <html>  

3.     <head>  

4.     <meta charset="UTF-8">    

5.     </head>  

6.     <body>  

 

 

To define a description of your webpage:

1.     <meta name="description" content="Free Web tutorials">  

If you give a meta description then it will be useful for the relevant search to perform by search engines.

To define keywords for search engines:

1.     <meta name="keywords" content="HTML, CSS, XML, JavaScript">  

The keyword value is also used to provide keywords for a search engine, but it may ignore by browser due to spammers.

To define author of the webpage:

1.     <meta name="author" content="Akon">  

The author value specifies the name of the person who wrote the page content, and it is useful to automatically extract author information by some content management systems.

To refresh document every 30 seconds:

1.     <meta http-equiv="refresh" content="30">  

Meta refresh is used to provide instructions to the browser to automatically refresh the page after the given time interval. As in above example it will automatically refresh after 30 sec

1.     <meta http-equiv="refresh" content="10; url=https://www.javatpoint.com/html-head>  

If you add an URL with content value, then it will redirect to that page after the time limit will over.

Example:

1.     <!DOCTYPE html>  

2.     <html>  

3.      <head>  

4.        <meta http-equiv="refresh" content="5; url=https://www.javatpoint.com/html-head">  

5.      </head>  

6.        <body>  

7.         <h2>Meta element Example</h2>  

8.        <p style="color: green;">Kindly wait for 5 seconds and after 5 seconds it will automatically redirect to URL specified in meta tag</p>  

9.      </body>  

10.                        </html>  

HTML <base> Tag

Example

Specify a default URL and a default target for all links on a page:

<head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

Definition and Usage

The <base> tag specifies the base URL and/or target for all relative URLs in a document.

The <base> tag must have either an href or a target attribute present, or both.

There can only be one single <base> element in a document, and it must be inside the <head> element.

Attributes

Href:  Specifies the base URL for all relative URLs int the page.

Target: _Blank--Opens the link in a new window or tab.

          _Parent-à Default. Opens the link in the same frame as it was clicked.

          _SelfàOpens the link in the parent frame

          _topàOpens the link in the full body of the window.

    Example:    

    < head>
  <base href="https://www.w3schools.com/" target="_blank">
</head>

<body>
<img src="images/stickman.gif" width="24" height="39" alt="Stickman">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>

 

Comments

Post a Comment

Popular posts from this blog

Msc(IT)_Unit_1(Introduction to Web)_Internet and web Technology(1310505)

Image
  What is computer networking? Computer networking refers to interconnected computing devices that can exchange data and share resources with each other. These networked devices use a system of rules, called communications protocols, to transmit information over physical or wireless technologies. Network computer devices that originate, route and terminate the data are called  network nodes . [1] Nodes can include  hosts  such as  personal computers ,  phones , servers  as well as  networking hardware . Two such devices can be said to be networked together when one device is able to exchange information with the other device, whether or not they have a direct connection to each other. Computer networks differ in the  transmission medium  used to carry their signals, the  communications protocols  to organize network traffic, the network’s size,  topology  and organizational intent. Computer networks support an enormous number of  applications  and  services  such as access to t
Read more

MSC(IT)_Sem_I_WT(1310505)_PracticalList_Assignment/QustionBank

SHREE SWAMI ATMANAND SARASWATI INSTITUTE OF TECHNOLOGY MSc.(IT) DEPARTMENT                                                                   Assignment-1 Faculty Name: Mr. Chirag R. Patel Subject: Internet and Web Technolog y (1310505)      Year: 1 st Year - 23 (1 st  Semester)    Unit:03 Q-1   What is HTML? Explain Hypertext and Markup Language terms. Q-2 What is Web Page? Explain structure of any web page using any website. Q-3 Explain Basic structure of HTML code with example. Q-4 What is the building block of HTML? Explain container and non-container tags. Q-5 Explain following tags with its sub tag and all attributes with example: ·         Font tag, List tag ·         Image tag, audio tag, Table tag ·         Marquee tag, Form tag, frame/frameset /iframe tag ·        
Read more

HTML_CSS_BOOK for subjectcode:1310505(M.sc.IT)_By_GTU

Table of Contents  (Hide) 1.  Introduction to HTML/CSS 2.  Introduction to HTML 3.  HTML By Examples 3.1  Example 1: Basic Layout of an HTML Document 3.2  Example 2: Lists and Hyperlinks 3.3  Example 3: Tables and Images 3.4  HTML Template 3.5  HTML Document Validator 3.6  Debugging HTML 4.  HTML Basics 4.1  HTML Tags, Attributes and Elements 4.2  The Basic Document Skeleton 4.3  HTML Comment  <!-- ... --> 4.4  Block Elements vs. Inline Elements 4.5  Block Elements 4.6  HTML5's New Semantic Block Elements 4.7  Inline Elements - Logical Style vs. Physical Style 4.8  HTML5's New Semantic Inline Elements 4.9  Entity References for Reserved & Special Characters 4.10  Lists 4.11  Tables 4.12  Anchors and Hyperlinks 4.13  Images 5.  Introduction to CSS 6.  CSS By Examples 6.1  CSS Example 1: CSS Syntax and Tag-Selectors 6.2  CSS Example 2: CSS Class-Selector, ID-Selector with  <div>  and  <span> 6.3  Validating CSS 6.4  Inspecting
Read more