All HTML Codes (Waqar Bin Abrar)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Waqar-Codes</title>
</head>
<body style="background-color: aqua;">
<header>
<br><br><br>
<center>
<nav>
 
<a href="[Link]" target="_blank">Home</a>
 
<a href="[Link]" target="_blank">About</a>
 
<a href="[Link]" target="_blank">Image</a>
 
<a href="[Link]" target="_blank">Audio</a>
 
<a href="[Link]" target="_blank">Video</a>
 
<a href="[Link]" target="_blank">List</a>
 
<a href="[Link]" target="_blank">Table</a>
 
<a href="[Link]" target="_blank">Contact</a>
 
</nav>
</center>
<br><br><br>
<center>
<h1 style="user-select: none;">Waqar Bin Abrar</h1>
</center>
</header>
<hr>
<div class="square"></div>
<div class="circle"></div>
<br>
<hr>
<header>
<div class="container">
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">About</a>
<a href="[Link]">Contact</a>
</nav>
</div>
</header>
<br>
<hr>
<main>
<br>
<h1>Heading 1</h1>
<p>Heading 1 is made by h1 tag</p>
<h2>Heading 2</h2>
<p>Heading 2 is made by h2 tag</p>
<h3>Heading 3</h3>
<p>Heading 3 is made by h3 tag</p>
<h4>Heading 4</h4>
<p>Heading 4 is made by h4 tag</p>
<h5>Heading 5</h5>
<p>Heading 5 is made by h5 tag</p>
<h6>Heading 6</h6>
<p>Heading 6 is made by h6 tag</p>
<br><br>
<hr>
<br>
<h1><i><u>Paragraph</u></i></h1>
<p>Lorem, ipsum dolor sit amet <font
color="blue">consectetur</font> adipisicing elit. Quod voluptates
ullam
voluptas ad ipsa aliquam,
sequi dolore <font color="red">eligendi</font> animi dicta ea
similique laborum impedit officia ab
doloremque, in amet error! Id,
earum. Illum nemo deserunt a, voluptatibus tempore amet
distinctio sapiente architecto eaque cupiditate.
Iure velit saepe hic labore sed dolorum.<b><i><u>Cumque
exercitationem asperiores assumenda molestias
nostrum?
Mollitia esse repudiandae tenetur repellendus sit
dignissimos quia aperiam quibusdam molestias
eligendi,
incidunt, ipsa earum ut iste facilis illum sint accusamus
dolorum fuga excepturi?</u></i></b>
Deleniti labore reiciendis
natus rem consectetur ipsa <font
color="pink">explicabo</font> saepe nobis voluptate expedita quam
dignissimos voluptatem recusandae
minima, ea neque.</p>
<br><br>
<hr>
<br>
<p>This text is <b>blod</b>.</p>
<p>This text is <strong>strong</strong>.</p>
<p>This text is <i>italic</i>.</p>
<p>This text is <em>emphasis</em>.</p>
<p>This text is <u>underline</u>.</p>
<p><b>Bold Text</b> <i>Italic Text</i> <u>Underline Text</u></p>
<br><br>
<hr>
<br>
<p>The formula of Sulfuric acid is H
<sub>2</sub>SO<sub>4</sub></p>
<p>Mathematics formula (a+b) <sup>2</sup>= a <sup>2</sup>+
b <sup>2</sup>+2ab</p>
<br><br>
<hr>
<br>
<p>Price: <del> $60 </del> <ins> $40 </ins> </p>
<p>Ticket Available: <s>50</s></p>
<p><s>Mistaken word</s> Correct word</p>
<p><small>This is a small paragraph</small></p>
<p>We are learning " Web and Mobile App Development
"
<abbr title="Saylani Mass IT Training Program"> SMIT</abbr>
Lab.
</p> <br>
<address>123, Block A, Street 456, City, Province, Country.
38000. </address>
<p><code><Waqar-Codes></code></p>
<pre>
This is a paragraph.
</pre>
<br><br>
<hr>
<br>
<p><cite>Quaid e Azam</cite> said: <q>Anything is
achievable</q></p>
<blockquote>"Anything is achievable" - <cite>Quaid e
Azam</cite></blockquote>
<br><br>
<hr>
<br>
<hr>
<p>Absolute Path</p>
<a href="[Link]
<p>Relative Path</p>
<a href="[Link]">Home</a>
<br><br>
<hr>
<br>
<ul>
<li>Link 1</li>
<li> Link 2</li>
<li>Link 3</li>
</ul>
<ol>
<li>Link 1</li>
<li>Link 2</li>
<li> Link3</li>
</ol>
<br><br>
<hr>
<br>
<dl>
<dt>Mango</dt>
<dd>
A mango is a sweet tropical fruit, and it's also the name of
the trees on which the fruit grows. Ripe
mangoes are juicy, fleshy, and delicious. Like peaches and
plums, mangoes have an inedible pit at the
center. Unlike these other fruits, the skin of a mango is very
tough and also inedible.
</dd>
<dt>Orange</dt>
<dd>
Orange, any of several species of small trees or shrubs of
the genus Citrus of the family Rutaceae and
their nearly round fruits, which have leathery and oily rinds
and edible, juicy inner flesh.
</dd>
<dt>Apple</dt>
<dd>
Apple, (Malus domestica), domesticated tree and fruit of the
rose family (Rosaceae), one of the most
widely cultivated tree fruits. Apples are predominantly
grown for sale as fresh fruit, though apples are
also used commercially for vinegar, juice, jelly, applesauce,
and apple butter and are canned as pie
stock.
</dd>
</dl>
<br><br>
<hr>
<br>
<figure>
<img
src="[Link]
[Link]?auto=compress&cs=tinysrgb&w=600"
alt="Wonderful Nature" width="200px">
<figcaption>Picture</figcaption>
</figure>
<hr>
<br>
<audio src="Assets/Audios/audio.mp3" controls></audio>
<hr>
<br>
<video src="Assets/Videos/video.mp4" width="300"
controls></video>
<br>
<hr>
<iframe
src="[Link]
17897.62046143698!2d72.92448580884746!3d31.42375904202356!2m3!
1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x392242a895a55ca9
%3A0xdec58f88932671c6!2sFaisalabad%2C%20Punjab%2C%20Pakist
an!5e0!3m2!1sen!2s!4v1704213361283!5m2!1sen!2s"
width="600" height="450" style="border:0;" allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe>
<br><br>
<hr>
<br>
& <br>
< <br>
> <br>
" <br>
© <br>
1 space : <br>
2 space:   <br>
4 space:   <br>
<br><br>
<hr>
<br>
<table border="1" style="border-collapse: collapse;">
<caption><strong>Simple Table</strong></caption>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll no</th>
</tr>
</thead>
<tbody>
<tr>
<td>ALi</td>
<td>One</td>
<td>12</td>
</tr>
<tr>
<td>Abdullah</td>
<td>Two</td>
<td>44</td>
</tr>
<tr>
<td>Hamza</td>
<td>Three</td>
<td>21</td>
</tr>
<tr>
<td>Numan</td>
<td>Four</td>
<td>15</td>
</tr>
<tr>
<td>Subhan</td>
<td>Five</td>
<td>62</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Total students</th>
<th>Total classes</th>
<th>Total roll no</th>
</tr>
</tfoot>
</table>
<br><br>
<hr>
<br><br>
<table border="1">
<caption><strong>Rowspan & Colspan
Table</strong></caption>
<tr>
<th rowspan="2"></th>
<th colspan="2">Average</th>
<th rowspan="2">Red eyes</th>
</tr>
<tr>
<th>Height</th>
<th>Width</th>
</tr>
<tr>
<th>Male</th>
<td>1.9</td>
<td>0.003</td>
<td>40%</td>
</tr>
<tr>
<th>Female</th>
<td>1.7</td>
<td>0.002</td>
<td>43%</td>
</tr>
</table>
<br>
<hr>
<br>
<h2>My feedback form</h2>
<form method="post">
<div>
<label for="firstname">First Name:</label>
<input type="text" placeholder="First Name" name="firstName"
id="firstname" required><br /><br />
</div>
<div>
<label for="lastname">Last Name:</label>
<input type="text" placeholder="Last Name" name="lastName"
id="lastname" required><br /><br />
</div>
<div>
<label for="email">Email:</label>
<input type="email" placeholder="Enter your email" name="email"
id="email" required>
</div>
<br>
<div>
<label for="password">Password:</label>
<input type="password" placeholder="Enter your password"
name="password" id="password" required>
</div>
<br>
<div>
<label for="city">City:</label>
<input type="text" placeholder="City" name="city" id="city"
required><br /><br />
</div>
<input type="submit">
</form>
<h5>Please select all the emotions that apply to you:</h5>
<input type="checkbox" name="emotion-angry" id="emotion-angry">
<label for="emotion-angry">Angry</label>
<br>
<input type="checkbox" name="emotion-sad" id="emotion-sad">
<label for="emotion-sad">Sad</label>
<br>
<input type="checkbox" name="emotion-happy"
id="emotion-happy"> <label for="emotion-happy">Happy</label>
</div>
<div>
<br>
<h5>How satisfied were you with our services?</h5>
<label for="very-satisfied">Very satisfied</label>
<input type="radio" name="services" value="very-satisfied"
id="very-satisfied"> <br>
<label for="satisfied">Satisfied</label>
<input type="radio" name="services" value="satisfied"
id="satisfied">
<br>
<label for="dissatisfied">Disatisfied</label>
<input type="radio" name="services" value="dissatisfied"
id="dissatisfied">
</div>
<div>
<h5>Gender?</h5>
<label for="male">Male:</label>
<input type="radio" name="gender" value="male" id="male">
<label for="female">Female:</label>
<input type="radio" name="gender" value="female" id="female">
</div>
<div>
<label for="comments">Further Comments:</label>
<textarea name="comments" id="comments" cols="20"
rows="2"></textarea>
</div>
<br>
<div>
<label for="bio-photo">Bio Photo:</label>
<input type="file" name="bio-photo" id="bio-photo">
</div>
<br>
<div>
<label for="location-visited">Location Visited</label>
<select name="location-visited" id="location-visited">
<option value="">Select</option>
<option value="Faisalabad">FSD</option>
<option value="Lahore">LHR</option>
<option value="Islamabad">ISB</option>
<option value="Karachi">KHI</option>
</select>
</div>
<div>
<br>
<input type="submit">
</div>
</form>
<hr>
<form>
<div>
<input type="range"> <br><br>
<input type="reset"> <br><br>
<input type="search"> <br><br>
<input type="submit"> <br><br>
<input type="tel"> <br><br>
<input type="time"> <br><br>
<input type="url"> <br><br>
<input type="week"> <br><br>
<input type="file"> <br><br>
<input type="hidden"> <br><br>
<input type="image"> <br><br>
<input type="month"> <br><br>
<input type="number"> <br><br>
<input type="password"> <br><br>
<input type="radio"> <br><br>
<input type="text"> <br><br>
<input type="button"> <br><br>
<input type="checkbox"> <br><br>
<input type="color"> <br><br>
<input type="date"> <br><br>
<input type="datetime-local"> <br><br>
<input type="email"> <br><br>
</div>
</form>
<hr>
<hr>
<h1>This is Gallery page</h1>
<h1 style="border: ridge;">H</h1>
<table>
<tr>
<th style="border: ridge;">H</th>
<th style="border: ridge; border-color: red;">Heading</th>
</tr>
</table>
<hr>
<br>
<var>x+5=10</var>
<br>
<hr>
<br>
<p>Please press <kbd>Ctrl</kbd> +<kbd> P </kbd> = Print</p>
<br>
<hr>
<br>
<summary>
Pakistan is
<details>
Islamic Republic of Pakistan
</details>
</summary>
<br>
<hr>
<br>
<fieldset style="width: 200px; text-align: center; margin: 0 auto;">
<legend>Login Form</legend>
<form>
<input type="email" placeholder="Email" name="email"><br><br>
<input type="password" placeholder="Password" name="password"
minlength="8" maxlength="16" required><br><br>
<input type="submit" value="Login">
</form>
</fieldset>
<br>
<hr>
<strong>
<p> I was born on <time
datetime="2002-12-14T12:00:00">December 14, 0000</time>, at
<time>12:00</time>. </p>
</strong>
<hr>
<br>
<!-- "Area Tag"
<body bgcolor="black">
<img src="[Link]" usemap="#universe">
<map name="universe"> <area shape="ract"
coords="55,48,216,208" href="[Link]"
title="Click here to see info">
</map> -->
</body>
</main>
<footer style="text-align: center;">
<center>
© 2024. All Rights Reserved. Design by Waqar-Codes
</center>
</footer>
<br><br><br>
</body>
</html>
------------------------------------------
All CSS Codes (Waqar Bin Abrar)
Highlights
1: Colors 2: Background 3: Borders 4: Margin 5: Padding
6: Height & 7: Box 8: Outline 9: Text Color 10: Text
Width Alignment
11: Text 12: Text 13: Text 14: Text 15: Fonts
Decoration Transformation Spacing Shadow
16: Icons 17: Links 18: Lists 19: Tables 20: Layout
Display
Must Apply in CSS:
*{
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
Comments
/* This is a single-line comment */
p {
color: red;
}
p {
color: red; /* Set text color to red */
}
p {
color: /*red*/blue;
}
------------------------------------------
1:Colors
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
1: Name=By name
2: RGB= value= 0 to 255 / RGBa= “a” mean alpha= auto
3: Hex= value= 0123456789 to ABCDEF
------------------------------------------
2:Background
body {
background-color: lightblue;
}
● Background-color: ;
● Background-image: ;
● Background-repeat: ;
● Background-attachment: ;
● Background-position: ;
● background (shorthand property)
------------------------------------------
3:Borders
Border-style: ; >
Border-width-style: ;
Border-color-style: ;
Border-sides-style: ;
Border-radius: ;
p {
border: 5px solid red;
● dotted - Defines a dotted border
● dashed - Defines a dashed border
● solid - Defines a solid border
● double - Defines a double border
● groove - Defines a 3D grooved border. The effect
depends on the border-color value
● ridge - Defines a 3D ridged border. The effect depends
on the border-color value
● inset - Defines a 3D inset border. The effect depends
on the border-color value
● outset - Defines a 3D outset border. The effect
depends on the border-color value
● none - Defines no border
● hidden - Defines a hidden border
------------------------------------------
4:Margin
h1 {
margin: 0 0 50px 0;
h2 {
margin: 20px 0 0 0;
● margin-top
● margin-right
● margin-bottom
● Margin-left
------------------------------------------
5:Padding
div {
padding-top: 50px;
padding-right: 30px; (Clock-wise)
padding-bottom: 50px;
padding-left: 80px;
Padding-top & border-top = height
Pading-bottom & border-bottom = height
Pading-right & border-right = width
Pading-left & border-left = width
value 1= All sides
value 2= first:top-bottom & Second:right-left
Value 3= first:top & second:right-left & third:bottom
Value 4= first:top & second:right & third:bottom &
forth:left
------------------------------------------
6:Height & Width
div {
height: 200px;
width: 50%;
background-color: powderblue;
------------------------------------------
7:Box
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
------------------------------------------
8:Outline
Outline-width: ;
Outline-color: ;
Outline-offset: ;
[Link] {outline-style: dotted;}
[Link] {outline-style: dashed;}
[Link] {outline-style: solid;}
[Link] {outline-style: double;}
[Link] {outline-style: groove;}
[Link] {outline-style: ridge;}
[Link] {outline-style: inset;}
[Link] {outline-style: outset;}
------------------------------------------
9:Text Color
body {
background-color: lightgrey;
color: blue;
h1 {
background-color: black;
color: white;
div {
background-color: blue;
color: white;
}
header a {
text-decoration: none;
color: yellowgreen;
font-weight: bold;
#google-link {
background-color: black;
color: green;
text-align: center;
display: block;
------------------------------------------
10:Text Alignment
h1 {
text-align: center;
h2 {
text-align: left;
h3 {
text-align: right;
------------------------------------------
11:Text Decoration
h1 {
text-decoration-line: overline;
h2 {
text-decoration-line: line-through;
h3 {
text-decoration-line: underline;
p {
text-decoration-line: overline underline;
------------------------------------------
12:Text Transformation
[Link] {
text-transform: uppercase;
}
[Link] {
text-transform: lowercase;
}
[Link] {
text-transform: capitalize;
}
------------------------------------------
13:Text Spacing
h1 {
letter-spacing: 5px;
}
[Link] {
line-height: 0.8;
}
[Link] {
word-spacing: 10px;
}
------------------------------------------
14:Text Shadow
h1 {
text-shadow: 2px 2px;
}
h1 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
------------------------------------------
15:Fonts
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New",
monospace;
}
------------------------------------------
16:Icons
<body>
<i class="fas fa-cloud"></i>
<i class="fas fa-heart"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file"></i>
<i class="fas fa-bars"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-remove"></i>
<i class="glyphicon glyphicon-user"></i>
<i class="glyphicon glyphicon-envelope"></i>
<i class="glyphicon glyphicon-thumbs-up"></i>
<i class="material-icons">cloud</i>
<i class="material-icons">favorite</i>
<i class="material-icons">attachment</i>
<i class="material-icons">computer</i>
<i class="material-icons">traffic</i>
</body>
------------------------------------------
17:Links
a {
color: hotpink;
background-color: yellow;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
------------------------------------------
18:Lists
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
------------------------------------------
19:Tables
table, th, td {
border: 1px solid;
}
table {
width: 100%;
border-collapse: collapse;
border: 1px solid;
}
------------------------------------------
20:Layout-Display
li {
display: inline;
}
span {
display: block;
}
[Link] {
display: none;
}
[Link] {
visibility: hidden;
}
------------------------------------------