HTML / DHTML / CSS

Teacher
Ajay Kumar Pandey
Category:
Communication
4 out of 5
4
6 reviews

What is HTML?

  • HTML stands for Hyper Text Markup Language
  • HTML is the standard markup language for creating Web pages
  • HTML describes the structure of a Web page
  • HTML consists of a series of elements
  • HTML elements tell the browser how to display the content
  • HTML elements label pieces of content such as “this is a heading”, “this is a paragraph”, “this is a link”, etc.

How Does HTML Work?

When a user visits a website, the browser sends a request to the server hosting the site. The server then retrieves the HTML document and sends it back to the browser. The browser reads the HTML code and translates it into a visual layout, allowing the user to interact with the website. 

HTML plays an essential role in this process, as it determines the structure and content of a website. Along with the programming languages CSS and JavaScript, HTML allows developers to create visually appealing and functional websites. Along with being important, HTML is quite easy for beginners to learn and use.

By understanding basic tags and attributes, even novice developers can create their own meaningful web content. Overall, HTML is an integral part of building successful websites.

Most web browsers, such as Microsoft® Internet Explorer®, Mozilla® Firefox, or Google Chrome™, can render HTML pages. Additionally, there are several free and commercial software packages available that will allow you to view HTML pages offline.

 Uses of HTML 

1. Web Pages Development

Different websites we see on the internet regularly are in some form written in HTML code. As mentioned earlier HTML is used to structure the web page in various ways. We could include different sections, insert tables, and split the web page. With the introduction of Semantic HTML elements in HTML5, HTML has made hassle free even for the developer to understand and modify his/her code better. 

 

Apart from the elements, we can style different types of web pages like the landing page, parallax pages, grid orientation pages, etc. Styling and manipulation of HTML elements are comparatively easier and more effective with CSS and JavaScript.

2. Navigating the Internet

HTML is an essential element in navigating between web pages. Navigation is possible using the hypertext concept. The linking is also simpler. From the internet user’s point of view, they click on a text which takes them to the next page. HTML facilitates navigation by hyperlinking with the help of an anchor tag.

Navigation can increase visitors to a website. It increases user activity on the website. It also helps the web user to look at the content structure and organization.

3. Responsive Designs

The integral part of a web page is for it to be interactive and responsive to the user. HTML makes it possible. Unlike static pages, responsive ones also have a better reach. Automatically resizing, hiding, shrinking, or enlarging a website to make it look good on all devices (desktops, tablets, and phones) is what a responsive web design is made of where HTML and CSS aid the purpose. 

<meta> tag is used on all pages to create a responsive website. In addition, images could be made responsive with the help of the width property in CSS. Texts can also be made responsive by setting it up with a “VW” unit, which means the “viewport width”.

4. Storage Function in the Browser

Storage of data in the browser was tedious in the past. For a user to save the data of the browser that persists between two sessions, the user’s cookies or infrastructure is to be built from the server end. This process has now been eased with HTML5. HTML5 has roped in new features. Such storage features are localStorage and IndexDB.  

The web storage objects window.localStorage and window.sessionStorage store data with no expiration date and storage for one session respectively. The localStorage object will have the data saved even when the browser is closed. setItem and removeItem are the functions commonly used to store and remove data from the storage. Also, the most important part is that these features are supported by all browsers.

  • To Store – localStorage.setItem(“sellername”, “pankaj”);
  • To Retrieve – document.getElementById(“result”).innerHTML = localStorage.getItem(“sellername”);
  • To Remove – localStorage.removeItem(“sellername”);

5. Data Entry Support

With many other features that we have been discussing, here’s another important one to be taken into account which is data entry. For so long we have stored data in dedicated files for this purpose. HTML5 paves way for data entry online, that is to obtain the data to store, from the user via forms. In this case, we have HTML tags like <form>. 

Other elements include input which may be a drop-down box, list, text box, password box, etc. On the whole, HTML makes the process of data entry easy and effective which also includes validations with the help of Javascript.

6. Creation of Web Documents

HTML is predominantly used in creating web documents on the internet. DOM (Document Object Model) is used in the creation of web documents. In addition, HTML tags are used in formatting the document. The HTML web document begins with the declaration of <!DOCTYPE html>. Further, it proceeds with the usual HTML opening and closing tags. The HTML DOM model is constructed as a tree of objects. 

The root element is the <html> which is divided into head and body. The Head contains the title of the page or document. The body consists of the content which is built using various elements such as headings, paragraphs, line breaks, anchors, etc. Further down the tree is the attributes of the elements. For instance, anchor tag <a> has an attribute say, ‘href’. 

7. Game Development

We see in recent days, from kids, and teens to adults all of them are drowned in online games. Let us get to know the role of HTML in the creation of such games. Earlier game developments were specific to platforms like Flash. However, HTML5 offers many options and features for game development. Beginners can start with HTML elements such as canvas which offers all the functionality needed for making games. 

To create a canvas:

<canvas id="canvas" width="200" height="100"> </canvas>
To draw inside the canvas:

<script>
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

Javascript could be used to draw, insert images, write, etc into the canvas. CSS3 is an advanced version of Cascading Style Sheet used in structuring, styling, and formatting. Various components, controllers, etc are added making the game lively. Thus, it is no longer a big deal to develop games.

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.

HTML tags

HTML tags are like keywords which defines that how web browser will format and display the content. With the help of tags, a web browser can distinguish between an HTML content and a simple content. HTML tags contain three main parts: opening tag, content and closing tag. But some HTML tags are unclosed tags.

When a web browser reads an HTML document, browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties.

An HTML file must have some essential tags so that web browser can differentiate between a simple text and HTML text. You can use as many tags you want as per your code requirement.

  • All HTML tags must enclosed within < > these brackets.
  • Every tag in HTML perform different tasks.
  • If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags)

HTML Tags Examples

Document structure tag: 

 
  • HTML tag: It is the root of the HTML document which is used to specify that the document is HTML.

Syntax: 

<html> Statements... </html>

Code: 

HTML
<html>
    <head>
        <title>Title of your web page</title>
    </head>
    <body>HTML web page contents </body>
</html>

Output :

  • Head tag: The head tag is used to contain all the head elements in the HTML file. It contains the title, style, meta, … etc tag.

Syntax:  

<head> Statements... </head>

Code:  

  • HTML
 
<head>Contains elements describing the document</head>

Output :

  • Body tag: It is used to define the body of an HTML document. It contains images, tables, lists, … etc.

Syntax:  

<body> Statements... </body>

Code: 

  • HTML
 
<body>The content of your HTML page</body>

Output :

  • Title tag: It is used to define the title of an HTML document.

Syntax: 

<title> Statements... </title>

Code: 

  • HTML
 
<title>tab name</title>

Output :

Content container tag: 

Heading tag: It is used to define the heading of an HTML document. 

Syntax: 

<h1> Statements... </h>
<h2> Statements... </h2>
<h3> Statements... </h3>
<h4> Statements... </h4>
<h5> Statements... </h5>
<h6> Statements... </h6>

Code: 

  • HTML
 
<h1>prathamguru</h1> 
<h2>prathamguru</h2>
<h3>prathamguru</h3>
<h4>prathamguru</h4>
<h5>prathamguru</h5>
<h6>prathamguru </h6>

Output : 

Paragraph tag: It is used to define paragraph content in an HTML document.

Syntax: 

<p> Statements... </p>

Code: 

  • HTML

<p>PRATHAM GURU: HTML DHTML CSS PORTAL</p>

Output : 

 

  • Emphasis tag: It is used to render as emphasized text.

Syntax: 

<em> Statements... </em>

Code: 

  • HTML
 
<em>PRATHAM GURU</em>

Output :

 

  • Bold tag: It is used to specify bold content in an HTML document.

Syntax: 

<b> Statements... </b>

Code: 

  • HTML
 
<b>Bold word</b>

Output :

  • Italic tag: It is used to write the content in italic format.

Syntax: 

<i> Statements... </i>

Code:  

  • HTML
 
<i>PRATHAM GURU</i>

Output :

 

  • Small (text) tag: It is used to set the small font size of the content.

Syntax: 

 
<small> Statements... </small>

Code: 

  • HTML
 
<small>Example</small>

Output :

  • Underline tag: It is used to set the content underline.

Syntax: 

<u> Statements... </u>

Code: 

  • HTML
 
<u>Pratham Guru</u>

Output :

 

  • Deleted text tag: It is used to represent deleted text. It crosses the text content.

Syntax: 

<strike> Statements... </strike>

Code: 

  • HTML
 
<strike>PRATHAM GURU</strike>pratham guru

Output :

Anchor tag: It is used to link one page to another page.

Syntax: 

<a href="..."> Statements... </a>

Code: 

 
  • HTML
 
Pratham Guru</a> for better experience.

Output :

 

  • List tag: It is used to list the content.

Syntax: 

<li> Statements... </li>

Code: 

  • HTML
 
<li>List item 1</li>
<li>List item 2</li>

Output :

  • Ordered List tag: It is used to list the content in a particular order.

Syntax: 

<ol> Statements... </ol>

Code: 

  • HTML
 
<ol>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ol>

Output :

 

  • Unordered List tag: It is used to list the content without order.

Syntax: 

<ul> Statements... </ul>

Code: 

  • HTML
 
<ul>
     <li>List item 1</li>
     <li>List item 2</li>
     <li>List item 3</li>
     <li>List item 4</li>
</ul>

Output :

 

 

  • Comment tag: It is used to set the comment in an HTML document. It is not visible on the browser.

Syntax: 

<!-- Statements... -->

Code:  

  • HTML
 
<!--Comment section-->
  • Scrolling Text tag: It is used to scroll the text or image content.

Syntax: 

<marquee> Statements... </marquee>

Code: 

  • HTML
 
<marquee bgcolor="#cccccc" loop="-1"
scrollamount="2" width="100%">
Example Marquee</marquee>

Output :

 

  • Center tag: It is used to set the content into the center.

Syntax: 

<center> Statements... </center>

Code: 

  • HTML
 
<center>Pratham Guru</center>

Output :

  • Font tag: It is used to specify the font size, font color, and font family in an HTML document.

Syntax: 

<font> Statements ... </font>

Code: 

 
  • HTML
 
<font face="Times New Roman">Example</font>

Output :

Empty (Non-Container) Tags:  

  • Line break tag: It is used to break the line.

Syntax: 

<br>

Code: 

  • HTML
 
Pratham Guru<br>HTML DHTML CSS Portal

Output :

 

  • Image tag: It is used to add image elements in HTML documents. 

Syntax: 

<img>

Code: 

  • HTML
<body bgcolor=”blue”>
<img src=”C:\Users\harsh\OneDrive\Desktop\welcome.png” alt=”Pratham guru Image”>
</body>

Output :

 

  • Link tag: It is used to link the content from an external source.

Syntax: 

<link>

Code:  

 
  • HTML
 
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
  • Horizontal rule tag: It is used to display the horizontal line in an HTML document.

Syntax: 

<hr/>
  • Code:  
  • HTML
 
<hr width="100%" size="5" />

Output :

  • Meta tag: It is used to specify the page description. For example last modifier, authors, … etc.

Syntax: 

<meta> Statements ... <meta>

Code: 

  • HTML
 
<meta name="Description"
    content="Description of your site">
<meta name="keywords"
    content="keywords describing your site">
  • Table tag: A table tag is used to create a table in an HTML document. 

Syntax: 

<table> Statements... </table>

Code: 

  • HTML
 
<table border="4" cellpadding="2" cellspacing="2" width="50%">
<tr> <td>Column 1</td>
<td>Column 2</td> </tr> </table>

Output :

 

  • Tr tag: It is used to define a row of an HTML table.

Syntax: 

<tr> Statements... </tr>

Code: 

  • HTML
 
<table>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

Output :

 

  • th tag: It defines the header cell in a table. By default, it set the content with the bold and center.

Syntax:

<th> Statements ... </th>

Code: 

  • HTML
 
<table>
 <tr>
   <th>Month</th>
   <th>Savings</th>
 </tr>
 <tr>
   <td>January</td>
   <td>$100</td>
 </tr>
</table>

Output :

  • Td tag: It defines the standard cell in an HTML document.

Syntax: 

<td> Statements ... </td>

Code: 

  • HTML
 
<table>
  <tr>
    <td>Cell A</td>
    <td>Cell B</td>
  </tr>
</table>

Output :

Input Tags:  

  • Form tag: It is used to create an HTML form for the user.

Syntax: 

<form> Statements ... </form>

Code: 

  • HTML
 
<form action="mailto:you@yourdomain.com ">
  Name: <input name="Name" value="" size="80"><br>
  Email: <input name="Email" value="" size="80"><br>
  <br><center><input type="submit"></center>
</form>

Output :

 

  • Submit input tag: It is used to take input from the user.

Syntax: 

<input type="Submit" value="Submit">

Code: 

  • HTML
 
<form method=post action="/cgibin/example.cgi">
<input type="text" style="color: #ffffff;
 font-family: Verdana; font-weight: bold;
 fontsize: 12px; background-color: #72a4d2;"
 size="10" maxlength="30">
<input type="Submit" value="Submit">
</form>

Output :

 

  • Dropdown option tag: It is used to select an option from a drop-down list.

Syntax: 

<option> Statements ... </option>

Code: 

  • HTML
 
<form method=post action="/cgibin/example.cgi">
<center> Select an option:<select>
<option>option 1</option>
<option selected>option 2</option>
<option>option 3</option>
</form>

Output :

  • Radio button tag: It is used to select only one option from the given options.

Syntax: 

<input type="radio" name="option"> option_value

Code: 

  • HTML
 
<form method=post action="/cgibin/example.cgi">
Select an option:<br>
<input type="radio" name="option"> Option 1
<input type="radio" name="option" checked> Option 2
<input type="radio" name="option"> Option 3

Output :

  • Checkbox button tag: It is used to select an option from the given options.

Syntax: 

<input type="checkbox" name="check" value="">

Code:

  • HTML
 
<form>
  Pratham Guru:<br>
  Visited<input type="checkbox" name="ch" value="like" checked><br>
  NotVisited<input type="checkbox" name="ch" value="Not visited">
 <form>

Output: 

 

Starting Course

1
Introduction to Excel
2 Hrs.
2
Engine Target Audience
3
Quiz: Mobile / Native Apps
18 questions

After Intro

1
Realistic Graphic on UE4
2
Volta GPU for optimization.
3
Deep Learning
Faq Content 1
Faq Content 2

Productivity Hacks to Get More Done in 2018

— 28 February 2017

  1. Facebook News Feed Eradicator (free chrome extension) Stay focused by removing your Facebook newsfeed and replacing it with an inspirational quote. Disable the tool anytime you want to see what friends are up to!
  2. Hide My Inbox (free chrome extension for Gmail) Stay focused by hiding your inbox. Click "show your inbox" at a scheduled time and batch processs everything one go.
  3. Habitica (free mobile + web app) Gamify your to do list. Treat your life like a game and earn gold goins for getting stuff done!


4
4 out of 5
6 Ratings

Detailed Rating

Stars 5
3
Stars 4
0
Stars 3
3
Stars 2
0
Stars 1
0

{{ review.user }}

{{ review.time }}
 

Show more
Please, login to leave a review
Add to Wishlist
Enroll course
Enrolled: 35 students
Duration: 10 hours
Lectures: 5
Video: 9 hours
Level: Advanced

Archive

Working hours

Monday 9:30 am - 6.00 pm
Tuesday 9:30 am - 6.00 pm
Wednesday 9:30 am - 6.00 pm
Thursday 9:30 am - 6.00 pm
Friday 9:30 am - 5.00 pm
Saturday Closed
Sunday Closed