Skip to main content

Posts

Showing posts with the label HTML

Add CSS using external CSS

>>> U just need to create a another page and save it with the name style.css >>> and then go to link that style page with your html docs how to link your css with html page ? >>> You can find code below , it will help you to link your external page with your html docs <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Divyanshu Khare || MERN Developer</title> <meta description = "description" content="Divyanshu Khare's website"> <link rel="stylesheet" type="text/css" href="style.css">   <!----------link external css page ---------> </head> <body> </body> </html>
Post a Comment
Read more

Meta data in Website

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta description ="description" = content="Hey I'm creating this website for my own practice"> <title>Divyanshu khare || MERN Developer</title> </head> <body> <form> <div> <lable = "UserName">user Name</lable>  <!--------Lable is before any box ----> <input type="text" id="UserName" >  </div> <div> <lable = "passwordFor">Password</lable>  <input type = "password" id = "passwordFor" required      placeholder = "Enter your password"> </div> <div><input type = "submit"></div> <!-----------This is submit button-----------> </form...
Post a Comment
Read more

Create a Simple form HTML

Login Form IN HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <form> <div> <lable = "UserName">user Name</lable>  <!--------Lable is before any box ----> <input type="text" id="UserName" >  </div> <div> <lable = "passwordFor">Password</lable>  <input type = "password" id = "passwordFor" required placeholder = "Enter your password"> </div> <div><input type = "submit"></div> <!-----------This is submit button-----------> </form> </body> </html> Explanation: >> for create a form we should use first form tag then will take input from user to validate da...
Post a Comment
Read more

HTML Character

 Space in paragraph: &nbsp: no break space <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <p>lorem ipsun &nbsp;        it will give u space it will give u one space if you want more space in a paragraph u need to use thing tag multiple times as per your requirement &nbsp; &nbsp; it will give you 2 space bcse I've used 2 times</p> <p>p tag is used for [paragraph]</p> </body> </html>
Post a Comment
Read more

Block vs Inline Elements In HTML

  Block: Block element always start in New Line  Block element always start in new line occupy complete width available  Example: h2, p, div Inline Element: They do not start in new line occuply width as much required  Example: img, anchor a,span There are no different between div and span, only difference is div is block element and span is Inline, it will help you to group your content or elements
Post a Comment
Read more

Adding internal links on page HTML

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <div> <main> <!--------- sementic tag navigation ---------> <nav>   <!--- this is navigation semantic tag ---> <ul> <li> <a href="General.html">General</a> </li> </ul> <a href="#comment-section">Go to Down Section</a> </nav> <!---header---> <!-------logo--------> <a href = "https://www.google.com/imgres?q=divyanshu%20khare&imgurl=https%3A%2F%2Fblogger.googleusercontent.com%2Fimg%2Fb%2FR29vZ2xl%2FAVvXsEjINEj2z5wTmwM9M9aZnhc-G6DuArG87oA_CQybljAnWj6tIw444frXFiKdQ2jmKWwn8Wix2tz3QGTNXbV77tL_9C1HpIQHy-2Dj20_GYMykciiTc2xaT-rX3T2nMl7DcghJQXVJHGOPr1XXwrjqjnEjSi9BeoJh2yo4uFbuMS3adwmPA%2Fs220%2Fmy-passport-photo.jpg...
Post a Comment
Read more

Semantic tag in HTML

 HTML semantic tags ka matlab hota hai ki tags ka use karke webpage ka structure aur uske content ka meaning dikhaya jaye. Isse browser aur developers ko content ko samajhne mein madad milti hai. Kuch common semantic tags yeh hain: 1. **`<header>`** - Webpage ke header section ko define karta hai, jisme usually navigation links, logo, ya introductory content hota hai.    ```html    <header>       <h1>Website Title</h1>       <nav>...</nav>    </header>    ``` 2. **`<nav>`** - Navigation links ka section hota hai.    ```html    <nav>       <ul>          <li><a href="#home">Home</a></li>          <li><a href="#about">About</a></li>       </ul>    </nav>    ``` 3. **`<article...
Post a Comment
Read more

Links on HTML

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <!---it will open in same page---> <a href ="https//google.com">Google.com</a> <!---- it will open in new page -----> <a href = "https//google.com" target = "_blank">google</a> </body> </html> >>>>>>>>>>>>>>> Next Adding links on List <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <!---it will open in same page---> <a href ="https//google.com">Google.com</a> <!---- it will open in new page ---...
Post a Comment
Read more

Nested List with ruler in HTML

 <!DOCTYPE html> <html lang="en">   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>Document</title>   </head>   <body>     <!-- Main Heading -->           <h1>         <u><i>My Name is DivyanshuKhare</i></u>       </h1>       <hr> <!---This is for ruler---->                   <!-- This is the first parent list -->     <ul type = "square">         <li><h2>             My favorite books         </h2></li>         <ul type = disc>                ...
Post a Comment
Read more

Nested List on HTML

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <p>Paragraph with ordered list and Un ordered List</p> <!------List-----> <p>The beauty of nature is unparalleled, offering a serene escape from the chaos of everyday life. From the towering mountains to the vast oceans, each element of nature has its own unique charm. The sound of birds chirping at dawn, the gentle rustle of leaves in the breeze, and the calming flow of rivers all create a symphony that soothes the soul. Taking time to connect with nature can provide a refreshing perspective, reminding us of the simplicity and peace that often eludes us in our busy, modern lives. </p> <ol start = "3"> <li>Always be curious</li> <p>This is another paragraph The beauty o...
Post a Comment
Read more

Ordered List

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <p>lorem ipsun</p> <!------List-----> <ol> <li>banana</li> <li>mango</li> </ol> </body> </html> this is by default you will find 1.2.3. in ordered number Like this  and Now if you want to add type of ordered list there are types It will give you A B C D type  Other type of Ordred List.. A i  -- it will give you roman numeric a I >> If you want to start from any number instead of default value 1 you can update it with tag start ="10" <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </he...
Post a Comment
Read more

Unordered List HTML

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> </head> <body> <p>lorem ipsun</p> <!------List-----> <ul type="square"> <li>Divyanshu</li> <li>another Divyanshu</li> </ul> </body> </html> There are types of bullet - >> circle >> square >> disk (this is by default) Note: ek bar <ul> Likh kar kayi paragraph ke baad bhi list bana skte ho, and last me ul tag ko close kar do
Post a Comment
Read more

Basic HTML Tags

<h1> : this is for heading  , and this tag needs closing also </h1> <br> this is for break  the line    here u can see without br tag there is no line break between paragrah now if u want to break in this paragraph u need to use can use br tag U can see changes after using br tag:   <p> Divyanshu Khare </p> : This is paragraph Tag, we want to to group sementically group things, group logical lines into one line so it makes sense that we all group all the lines belonging to one paragraph under the paragraph tag. so that later we can apply different styles using css on this paragraph and others.  &nbsp :  we cant use multiple spaces on html if I want to use multiple spaces then what we can do &nbsp , it means no break space , if u want to two spaces u need to use two  &nbsp  &nbsp
Post a Comment
Read more

HTML Page Structure

 There are 3 Sections of any HTML page -- 1) Header 2) Main Section 3) Footer Sectore  in Html need to writing opening tag before any tag < and end with closing tag > The HTML page we've 2 fix children we called them Head and body whatever part that is visible to us that is comes under body section  What is Head part ? Head part is basically meta Data part , Meta data has some information of the page, Like title of the page will write under head part  tag for head <head> </head> tag for body - <body> </body> <!DOCTYPE html>   // this is not tag this is important for the browser to interpret that this is html file and which version of html file u are using , this is actually html 5 What is a boilerplate? Boilerplate code in HTML is required to set up the basic web page structure. This web page structure is the same for all web pages in general. Body Content Automatic boilerplate generation in different Text Editors...
Post a Comment
Read more