How to make a HTML website Class 10 in Notepad plus plus offline?
1.introduction of notepad++ application
Notepad++ is a text editor programs you can use it in Microsoft windows operating system software .
Notepad++ supports multiple programming languages with in single windows systems. in new version
presents tab system .Tab system provided very good features to see or do multiple code at a same
time.it is a distributed as free application software.at first the project was launched by sourcefoge.net
downloaded by 28 million times.you can downloads this application from this links
https://notepad-plus-plus.org/downloads/ and installed in your computer system.
2.Open Notepad plus plus and type HTML Code
1.open website www.google.co.in
2.type nodepad++ and search
3.open website notepad-plus-plus.org
4.download current version of notepad plus plus
5.create a folder with name web at a desktop
6.open notepad++
7.click at the file menu and click and new button
8.click at the file menu and click at the save option..
9.select desktop and choose web folder and save it with name index.html
10.Type the fallowing code and re save it .
<html>
<head>
<title>school websites template</title>
<link rel="stylesheet" href="style/mystyle.css">
</head>
<body background="img/bg.png">
<div id="main">
<div id="logou">
<CENTER><h1 style="color:pink;font-size:100;">H.R.SCHOOL</H1></CENTER>
</div>
<div id="leftsilder">
<img src="img/logo.png" alt="school logo">
<!-- NAVIGATION -->
<ul id="menu">
<li><a href="#home" >HOME</a></li>
<li><a href="#course">COURSE</a></li>
<li><a href="#projects">PROJECTS</a>
<ul>
<li><a href="#OLDPROJECT" >OLD PROJECT</a>
<ul>
<li><a href="#2018" >2018 PROJECTS</a></li>
<li><a href="#2019" >2019 PROJECTS</a></li>
<li><a href="#2020" >2020 PROJECTS</a></li>
</ul>
</li>
<li><a href="#ACTP">Active projects</a>
<ul>
<li><a href="#LACTP" >LAB PROJECT</a></li>
<li><a href="#OACTP" >MICRO PROJECTS</a></li>
<li><a href="#OTHER" >OTHER PROJECTS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#Contact">Contact</a></li>
</ul>
</div>
<div id="workspace">
<p id="home">this the h.r. school have a very nice place to eduction collecting environment<br>
you find best place in world to get eduction in you life h.r is the good and best school in india<br>
here you learn some new type of eduction we are supporting all student in same manare and geting <br>
best eduction and prepared all student to fighting all enviroment in theire lifethis the h.r. school have a very nice place to eduction collecting environment<br>
you find best place in world to get eduction in you life h.r is the good and best school in india<br>
here you learn some new type of eduction we are supporting all student in same manare and geting <br>
best eduction and prepared all student to fighting all enviroment in theire life</p>
<p align="right" id="home">this the h.r. school have a very nice place to eduction collecting environment<br>
you find best place in world to get eduction in you life h.r is the good and best school in india<br>
here you learn some new type of eduction we are supporting all student in same manare and geting <br>
best eduction and prepared all student to fighting all enviroment in theire lifethis the h.r. school have a very nice place to eduction collecting environment<br>
you find best place in world to get eduction in you life h.r is the good and best school in india<br>
here you learn some new type of eduction we are supporting all student in same manare and geting <br>
best eduction and prepared all student to fighting all enviroment in theire life</p>
<p id="course"><h1>OFFRED COURSES</H1>
<ol >
<li>MCA</li>
<li>BCA</li>
<li>MBA</li>
<li>BBA</li>
<li>MSC IT</li>
<li>MA</li>
<li>PGDMA</li>
<li>PGDCA</li>
<li>B.ED</li>
</ol>
</P>
</div>
<div id="footer">
<p id="Contact">
<center>
<b>mobno.9876787678 </b>
<h1>sitpur uttar pradesh india</h1></center>
</div>
</div>
</body>
</html>
11.open web folder and double clik at the index.html page
12.see your output at the webbrowse like chrome or internet expolarer etc.
13.create an other two sub folder with name img and style in web folder
14.reopen notepad++ and type mystyle.css and save it in style folder
/*main css*/
#main
{
height:1000px;
width:1200px;
top:-1px;
}
#logou
{
height:100px;
width:1470px;
top:0px;
background-image:img/bg.png;
position:relative;
}
#leftsilder
{
height:1000px;
width:300px;
top:108px;
left:0px;
background-image:img/bg.png;
position:fixed;
}
#workspace
{
height:1000px;
width:1170px;
top:122px;
left:300px;
background-image:img/bg.png;
position:relative;
}
#footer
{
height:100px;
width:1470px;
top:100px;
background-image:img/bg.png;
position:relative;
}
/* CSS Document */
#menu, #menu ul {
list-style:none;
padding:1;
margin:0;
}
#menu li {
position:relative;
line-height:3em;
width:10em;
}
#menu li ul {
position:absolute;
margin-top:-1em;
margin-left:.5em; /* for IE */
display:none;
}
#menu ul li ul {
margin-top:-3em;
margin-left:7em;
}
/* ******************************************************************* */
/* SHOW SUBMENU 1 */
#menu li:hover ul, #menu li.over ul {
display:block;
}
#menu li:hover ul ul, #menu li.over ul ul {
display:none;
}
/* SHOW SUBMENU 2 */
#menu ul li:hover ul, #menu ul li.over ul {
display:block;
}
/* ******************************************************************* */
/* STYLING UP THE LINKS */
#menu a {
display:block;
border-right:1px solid #fff;
background:#E0F584;
color:#3B3g7B;
text-decoration:none;
padding:0 13px;
}
#menu a:hover {
background-color:#5798B4;
color:#fff;
}
#menu ul {
border-top:1px solid #fff;
}
#menu ul a {
border-right:none;
border-right:1px solid #fff;
border-bottom:1px solid #fff;
border-left:1px solid #fff;
background:#AEC845;
}
/* ******************************************************************* */
#menu {
z-index:1;
}
#menu ul {
z-index:2;
}
#menu ul ul {
z-index:3;
}
/* ******************************************************************* */
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */
15.now open paint application anc creating two image with name bg.png and logo.png and
save it in the img folder.
(bg.png image size will be height * width is 32*32 px and logo height * width 150*150)
16.let some images in images which you put at the websites.
18.Reopen your index.html programs and make some changes and save it .
19.open web folder and duble clikc at the index.html and see output at webbrowser.
output:
0 comments:
Post a Comment