DivBytes

Posts

Showing posts from October, 2024

Basic rules of using CSS

if you are using inline CSS then paragraph color should be red if you're using external CSS then paragraph color should be orange if you're using internal CSS then paragraph color should be blue.

>>> 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">  </head> <body> </body> </html>

CSS Introduction

CSS stands for cascading style sheet, it makes html docs to presentable. To make page to looks better we need to use CSS.

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>  <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>  </form

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>  <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>  </form> </body> </html> Explanation: >> for create a form we should use first form tag then will take input from user to validate da

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   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     it will give you 2 space bcse I've used 2 times</p> <p>p tag is used for [paragraph]</p> </body> </html>

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

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>  <nav>  <ul> <li> <a href="General.html">General</a> </li> </ul> <a href="#comment-section">Go to Down Section</a> </nav>   <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&

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>`** - Independent aur self-contained content ko define karta hai, jaise ki ek blog post ya news article. ```html <article> <h2>Article Title</h2&

Link another page in list like category

<ul> <li> <a href="General.html">General</a> </li> </ul>

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>  <a href ="https//google.com">Google.com</a>  <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>  <a href ="https//google.com">Google.com</a> <!---- it will open in new page ---

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>  <h1> <u><i>My Name is DivyanshuKhare</i></u> </h1> <hr>   <ul type = "square"> <li><h2> My favorite books </h2></li> <ul type = disc> <li>Harry Potter</li> <li>The God of Small Things</li> <li>The Prophet</li> </ul> </ul> <ul type="square"> <li><h2> My favorite writers

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

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

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