**WED TAGS
<i>=italic
<b>=bold
<u>=underline
<mark>=mark
<sub>=subscript
<sup>=supersubscript
<center>=center of the output
<strike>=strike of the word
<br>=next line
**SYNTAX
<!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>
</body>
</html>
(for short cut press shift+1 then enter)
**for image
<img src= ------>
first save the img in ur folder where your doig the code then save the img
in the folder then ./ the img will display)
**using web tags
<h1><center> TEXT FORMAT</center></h1><hr>
<b>COMPUTERS ADDA</b><br>
<i>COMPUTERS ADDA</i><br>
<u>COPMUTERS ADDA</u><br>
<strike>COMPUTERS ADDA</strike><br>
a<sup>2</sup>+b<sup>2</sup><br>
h<sub>2</sub><sup>0</sup><br>
**two headers in one
<h1>
head1
<h2>
head 2
<h3>
learing HTML
</h3>
</h2>
</h1>
***using <section> tag
<section>
<h1>----</h1>
<p>-----</p>
</section>
<h2>----</h2>
<p>----</p>
***giving color to text
<h1 style="color: red;"> Learing HTML</h1>
<h2 style="color: blue;"> Simps n Pimps</h2>
<h3 style="color: black;">Learing HTML</h3>
*** giving diff. color
html code:
<h1>head1</h1>
<h2>head2</h2>
<h3>head3</h3>
<h4>head4</h4>
<h5>head5</h5>
<h6>head6</h6>
<title>Document</title>
<link rel="stylesheet" href="[Link]">
css code:
h1,h2,h5 {
color: rgb(248, 1, 1);
}
h2,h4,h6{
color:rgb(191, 146, 212);
}
***giving color to background
*{
color:red;
background-color: black;
}
h1,h3,h5 {
color: aqua;
color: blue;
color:pink;
background-color: brown;
}
h2,h4,h6{
color:orange;
color:black;
color:brown;
background-color:pink;
***css code color giving by using numbers
{
color:red;
background-color: black;
}
h1,h3,h5 {
color:pink;
background-color: brown;
}
h2,h4,h6{
color: yellow;
color:purple;
color:black;
color: rgb(28,37,87);
/*background-color:aliceblue; */
background-color:pink;
}
***css code giving colors by using rgb
*{
color:rgb(79,240,230);
background-color: rgb(230,230,280);
}
h1,h3,h5 {
color:pink;
background-color: rgb(27,28,32);
}
h2,h4,h6{
color: yellow;
color:purple;
color:mediumspringgreen;
color: rgb(264,244,19);
/*background-color:aliceblue; */
background-color:rgb(91,52,280);
}
***program
1 heading-> normal color
paragraph->italic
2 heading->rgb color
paragraphy ->bold
3heading-> hsl(rgb)
parag->red
*** using marquee behaviour tag(<marquee bhaviour="">)
by using this the head will move from one direction to
another direction
<section class="container">
<marquee behaviour="" direction=""><section
class="one"><h1>Heading1</h1><br></section></marquee>
<p style="color: white;"><i>Nature is an inherent character or constitution,[1]
particularly of the ecosphere or the universe as a whole. In this general sense
nature refers to the laws, elements and phenomena of the physical world, including
life. Although humans are part of nature, human activity or humans as a whole are
often described as at times at odds, or outright separate and even superior to
nature.</i></p>
<marquee behaviour="" direction=""><section
class="two"><h2>Heading2</h2><br></section></marquee>
<p style="color: white;"><b>During the advent of modern scientific method in
the last several centuries, nature became the passive reality, organized and moved
by divine laws.[3][4] With the Industrial Revolution, nature increasingly became
seen as the part of reality deprived from intentional intervention: it was hence
considered as sacred by some traditions (Rousseau, American transcendentalism) or a
mere decorum for divine providence or human history (Hegel, Marx).</b></p><br>
<marquee behaviour="" direction=""><section
class="three"><h3>Heading3</h3><br></section></marquee>
<p style="color: red;">Within the various uses of the word today, "nature"
often refers to geology and wildlife. Nature can refer to the general realm of
living beings, and in some cases to the processes associated with inanimate objects
—the way that particular types of things exist and change of their own accord, such
as the weather and geology of the Earth</p>
<link rel="stylesheet" href="[Link]">
</section>
to move the words to up-down , left-right then we should
type up down left right in direction or maye in behaviour also
**scrollamount
by using this we can scroll the text from left to right and up to down.
***in behaviour there are 3 types
1. alternate
[Link]
[Link]
*** keep head in center
text-align: center;
we can use justify also.
text align function
***text-indent:
used to set the paragraph in a order
ex=100px , 10px
***letter-spacing
this is used to give space between letters.
3px, 4px....
***word-spacing
used to give spcae b/w words.
3px,4px...
***line-height
used to adjuest the para in pixles.
***text-transform: uppercase;
used to chnage the case (lower or upper)
***text decoration properties
using these we can decorate the para
[Link]
[Link]
[Link] through
[Link]
[Link]
[Link]
[Link](dotted lines but on the words)
*** text-decoration-thickness: 10px;
usedx to increase the thinkness
***text-shadow: 5px 5px
used for shadow of decoration of the text.
***text-shadow: 2px 2px green;
x-axis y-axis color
used to give color and shodow to text.
*****font-family: sans-serif serif monospace cursive;
used to change the font
there are many fonts.
sans-serif
serif
monospace
cursive
***font changing code of html and css
html code:
<h1>sans-serif</h1>
<p class="one">Founded in autumn 1869, Nature was first circulated by Norman
Lockyer and Alexander MacMillan as a public forum for scientific innovations. The
mid-20th century facilitated an editorial expansion for the journal;</p>
<h1>monospace</h1>
<p class="twp">Since the late 2000s, dedicated editorial and current affairs
columns are created weekly, and electoral endorsements are featured. The primary
source of the journal remains, as established at its founding, research scientists;
</P>
<h1>cursive</h1>
<p class="three">Nature mostly publishes research articles. Spotlight articles
are not research papers but mostly news or magazine style papers and hence do not
count towards impact factor nor receive similar recognition as research articles.
Some spotlight articles are also paid by partners or sponsors</p>
<link rel="stylesheet" href="[Link]">
css code:
.one{
font-family: fantasy
}
.two{
font-family: sans-serif;
}
.three{
font-family: monospace;
}
***decoration of paragraph
css code:
h1{
text-align: center;
text-decoration: dotted;
}
p{
text-indent: 100px;
text-align: justify;
letter-spacing: 2px;
word-spacing: 6px;
line-height: 30px;
text-transform: uppercase;
text-decoration: underline;
text-decoration: underline overline;
text-decoration-style: solid;
text-decoration-thickness: 3px;
text-decoration-color: lavender;
text-shadow: 5px 5px blue;
text-shadow: 2px 2px green;
font-family: sans-serif;
}
***if you want fonts which are not there in vs code
in google search google fonts
select a font
click get font
click embbedded code
click @import
first cope under <style>
paste in css code on to(font is imported)
then go back to google
then select the font family whole line
then paste the text in which where u want to change the font
then font will be changed..
CODE:
@import url('[Link]
family=Over+the+Rainbow&display=swap');
@import url('[Link]
family=Over+the+Rainbow&family=Seaweed+Script&display=swap');
.one{
font-family: "Over the Rainbow";
}
.two{
font-family: "Seaweed Script";
}
.three{
font-family:"monospace";
}
***to create the form
html code:
<center>
name: <input type="text">
number: <input type="number">
date: <input type="date">
</center>
***<div> tag
use to create a box
***display: flex;
used to create the box in horizantal
***justify-content: end;
used to shift the inside boxes to end or starting
***align-items: end;
used to shitf the boxese at end of the box
***flex-direction: column;
used move the boxes in a colomun
***<ol> --> ordered list
***<ul> --> unorderd list
***to create login page on a web page
css code:
ul{
list-style-type:none;
margin: 10px;
padding: 0;
overflow:hidden ;
background-color: wheat;
}
li a{
float:left;
}
li a{
/* display:block; */
color: palevioletred;
/* text-align: center; */
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: #111111;
}
html code:
<h1>Unordered list</h1>
<ul>
<li><a href="#home">home</a></li>
<li><a href="#news">news</a></li>
<li><a href="#content">content</a></li>
<li><a href="#about">about</a></li>
</ul>
by using these tags we can create the login page
hover tage is used to make words blink.
