In HTML, H – Hyper, T – Text, M – Markup, L – Language. Therefore, HTML is the markup language for creating web pages. Basically, it describes the structures of a web page. The content on web pages is displayed according to the elements of HTML that is used.
Hypertext is the text that is displayed on web pages. It contains lists, images, forms, and many other elements.
Markup language uses markup tags to characterize text elements within a document, which gives instructions to the web browser on how that document should appear.
You can do a lot of things with HTML in Hindi. That is:
- You can collect user information like name, email id, contact number, etc by creating forms.
- You can create an offline version of your website.
- You can publish documents online like images, lists and many more things.
- You can find the current location of User who visits your website.
Till now we learnt what is HTML and What can be done by learning it. Now, let’s dive into the topic HTML. To know more about it, you can visit the sites like Great learning for html in hindi.
To create the HTML file, open any simple text editor like Notepad and after writing some code format of html, Save the file with .html extension or you can also use .htm extension.
Starting with the basic format of HTML in Hindi:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
Here, <!DOCTYPE html> is the declaration that defines that the document is an HTML5 document.
<html>, <head>, <title>, <body>, <h1>, <p> all are elements and every element is defined by tags that are opening and closing tag and in between it contain some content.
Normally, the format of writing any tag is-
<tagname>Content…</tagname>
Here, <tagname> is opening tag and </tagname> is closing tag.
Comments in HTML –
Comments are not displayed on the webpage. It is added just to make the code more readable and understandable.
Comment in code is done with <!– in beginning and ending with –>
<!– This is the line which will not be visible on the webpage. –>
Brief description of Basic elements:
- <html> – It is the root element of an HTML page. It is defined by tags i.e., start tag and an end tag.
- <head> – It contains meta information i.e., data about data, related to documents. That information includes the title of the document, scripts, links, and CSS files.
- <title> – It contains the title for HTML page.
- <body> – It is the body of the document. All the content that should be visible on a web page is written inside it using heading tag, paragraph tag, image tag and many more.
HTML elements are of two types –
- Block level element – These elements occupy 100% of available width and rendered with line break before and after.
e.g. <div>, <p>, <h1>, <ol>, <ul>, <li> and so on.
- Inline level element – These elements will take up only the needed space.
e.g. <img>, <a>, <strong>, <b>, <i>, <span>, <input> and so on.
- Headings – All the important heading are written inside heading tags .i.e.,
<h1> most important heading </h1>
<h2> ………………………. </h2>
. .
. .
<h6> least important heading </h6>
- Paragraph – All the paragraphs are written inside paragraph tag .i.e.,
<p>It contains a paragraph.</p>
Some empty elements which don’t require closing tag are:
<br> – This element tag used to break any line.
<p>This page is <br> all about HTML.</p>
Output – This page is
all about HTML.
<hr> – This element tag is used to draw horizontal lines.
And many others are <img>, <input> etc. we will read about these also in this lesson.
Before moving on to other elements, let’s talk about Attributes also.
Attributes define additional properties of an element like width, height. They are always specified in the start tag and are written like name = “value”. Many other attributes are also there like src (source), alt(alternate) attribute used in image tag i.e., <img> , href attribute for storing links in <a> tag.
- Links – In HTML, Links are defined with <a> tag.
<a href = “https://www.greatlearning.in/” target = “_blank”> link is created </a>
Here, href is the attribute used for writing links and target attribute specifies exactly where the linked document is to be opened.
- Images – This element is to show images on webpages. We use the <img> tag.
<img src = “image.jpg” alt = “greatlearning.in” width = “150” height = “150”>
Here, src, alt, width, height are attributes describing how an image should be visible to the viewer.
Style Attribute – This attribute allows you to add styles to the elements like color, size, font etc.
Syntax – <tagname style = “property: value ;”>
Here, property and value are CSS property and value respectively.
e.g. <body style=”background-color: powderblue ;”>
<h1 style=”color: powderblue ;”> This is a heading. </h1>
<p style=”font-family: verdana ;”> This is a paragraph. </p>
<h2 style=”text-align: center ;”> This is a heading. </h2>
So, style attribute is used for styling HTML elements.
Text align is used for text alignment in center , left or right.
Font-size is used for giving size to text.
Font-family is used to change the font of text.
Color is used to change color of text.
Background color is used to change the color of background.
Let’s have a look on how you can make some texts look different on web pages.
<p> This is <b>bold text</b>. </p>
<p> This is <strong>strongly important text</strong>. </p>
<p> This is <i>italic text</i>. </p>
<p> This is <em>emphasized text</em>. </p>
<p> This is <mark>highlighted text</mark>. </p>
<p> This is <code>computer code</code>. </p>
<p> This is <small>smaller text</small>. </p>
<p> This is <sub>subscript</sub> and <sup>superscript</sup> text. </p>
<p> This is <del>deleted text</del>. </p>
<p> This is <ins>inserted text</ins>. </p>
In this, tags <b>, <strong>, <i> … these all are inline level elements. These are used to change the text style to represent on webpages.
- Table – This tag will help in creating tables.
In the <table> element, <tr> tag is used to define the table row.
<th> tag is used to define table header. And by default, they are written in centre and bold.
and <td> is used to define table data of table. And By default, they are left-aligned.
e.g. of creating table:
<table style=”width:100%”>
<tr>
<th> Firstname </th>
<th> Lastname </th>
<th> Contact no. </th>
</tr>
<tr>
<td> Xyz </td>
<td> Abc </td>
<td> 1234567890 </td>
</tr>
</table>
- Lists – It allows to group a set of related items in lists.
Lists are mainly of two types:
Unordered list – <ul> tag is used in it. And by default list items are marked with small black circle bullets.
e.g. <ul>
<li>Kashmir</li>
<li>Chandigarh</li>
<li>Rajasthan</li>
</ul>
Output –
- Kashmir
- Chandigarh
- Rajasthan
Ordered list – <ol> tag is used in it. And by default list items are marked with numbers.
e.g. <ol>
<li>Kashmir</li>
<li>Chandigarh</li>
<li>Rajasthan</li>
</ol>
Output –
- Kashmir
- Chandigarh
- Rajasthan
- Forms – This element is used to collect user information by creating form in which they fill their information.
In this, <input> element is used to collect information in different types:
| <input type=”text”> | Displays a single-line text input field |
| <input type=”radio”> | Displays a radio button (for selecting one from many choices) |
| <input type=”checkbox”> | Displays a checkbox (for selecting zero or more than one choices) |
| <input type=”submit”> | Displays a submit button (for submitting the form) |
| <input type=”button”> | Displays a clickable button |
In forms, one more element is used i.e., <label> It is used to define a label that is useful for screen reader users.
Format:
<form>
<label for=”fname”>First name:</label><br>
<input type=”text” id=”fname” name=”fname”><br>
<label for=”lname”>Last name:</label><br>
<input type=”text” id=”lname” name=”lname”>
</form> Hope, you understood the concept of HTML in Hindi very well. If you want to know more about HTML in Hindi, take up the HTML in Hindi Course
