အဆင့္၁
note pad ကိုဖြင့္ပါ
////////////////////////////////////1-About.html///ဒီကုတ္ေတြကူးထည့္ပါ
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1></h1>
<p></p>
<footer id="foot01"></footer> <a href="Index.html">Back</a>
</div>
<script src="Script.js"></script>
</body>
</html>
//////////////////////////////About.htmlဆိုၿပီးသိမ္းလိုက္ပါ///////////////////////////////////////////////////////////////////////////////
အဆင့္၂
note pad ကိုဖြင့္ပါ
2-Index.html
////>>ဒီကုတ္ေတြကူးထည့္ပါ
<!DOCTYPE html>
<html>
<head>
<title>Our Company</title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav> <center></center>
<div id="main">
<h1>IT </h1>
<h2>Web Site</h2>
<a href="html.txt"><p>Pages (HTML)</p></a>
<a href="css.txt"><p>Style Sheets (CSS)</p></a>
<a href="js.txt"><p>Computer Code (JavaScript)</p></a>
<a href="data.txt"><p>Live Data (Files and Databases)</p></a>
<footer id="foot01"></footer>
</div><script src="Script.js">
</script>
</body>
</html>
///////////////save Index.htmlဆိုၿပီးသိမ္းလိုက္ပါ
အဆင့္၃
note pad ကိုဖြင့္ပါ/3-Coustomers.html///ဒီကုတ္ေတြကူးထည့္ပါ
//////ဒီကုတ္ေတြကူးထည့္ပါ
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="Site.css" rel="stylesheet">
</head>
<body>
<nav id="nav01"></nav>
<div id="main">
<h1></h1>
<table>
<tr>
<th></th>
<th>LEVEL</th>
<a href="course.html "><th></th></a>
</tr>
<tr>
<td>HTML</td>
<td>Basic</td>
<a href="html-b.html"><td></td></a>
</tr>
<tr>
<td>CSS</td>
<td>Basic</td>
<a href="css-b.html"><td></td></a>
</tr>
<tr>
<td>JS</td>
<td>Basic</td>
<a href="js-b.html"><td></td></a>
</tr>
<tr>
<td>HTML5</td>
<td>Basic</td>
<a href="html5-b.html"><td></td></a>
</tr>
<tr>
<td>C#</td>
<td>Basic</td>
<a href="Csharp-b.html"><td></td></a>
</tr>
<tr>
<td>PHP</td>
<td>Basic</td>
<a href="php-b.html"><td></td></a>
</tr>
<tr>
<td>ASP</td>
<td>Basic</td>
<a href="asp-b.html"><td></td></a>
</tr>
<tr>
<td>XML</td>
<td>Basic</td>
<a href="xml-b.html"><td></td></a>
</tr>
<tr>
<td>JAVA</td>
<td>Basic</td>
<a href="java-b.html"><td></td></a>
</tr>
<tr>
<td>C++</td>
<td>Basic</td>
<a href="Cplusplus-b.html"><td></td></a>
</tr>
<tr>
<td>PRACTICE</td>
<td>----</td>
<a href="practice1.html"><td></td></a>
</tr>
<tr>
<td>HTML</td>
<td>Intermediate</td>
<a href="html-i"><td></td></a>
</tr>
<tr>
<td>JS</td>
<td>Intermediate</td>
<a href=""><td></td></a>
</tr>
<tr>
<td>CSS</td>
<td>Intermediate</td>
<a href=""><td></td></a>
</tr>
<tr>
<td>TUTORIAL</td>
<td>----</td>
<a href=""><td></td></a>
</tr>
<tr>
<td>TUTORIAL2</td>
<td>-----</td>
<a href=""><td></td></a>
</tr>
<tr>
<td>CERTIFICATES</td>
<td></td>
<td></td>
</tr>
</table>
<a href="Index.html">Back</a>
<footer id="foot01"></footer>
</div>
<script src="Script.js"></script>
</body>
</html>
////save it///Coustomers.htmlဆိုၿပီးသိမ္းလိုက္ပါ
အဆင့္၄
note pad ကိုဖြင့္ပါ4-Script.js///
document.getElementById("nav01").innerHTML =
"<ul id='menu'>" +
"<li><a href='index.html'>Home</a></li>" +
"<li><a href='Customers.html'></a></li>" +
"<li><a href='About.html'></a></li>" +
"</ul>";
//////save as Script.js/
အဆင့္၅
note pad ကိုဖြင့္ပါ 5-Site.css/////
body {
font: "Trebuchet MS", Verdana, sans-serif;
font-size: 16px;
background-color: dimgrey;
color: #696969;
padding: 3px;
}
#main {
padding: 25px;
background-color: #ffffff;
border-radius: 0 0 5px 5px;
}
h1 {
font: Georgia, serif;
border-bottom: 3px solid #cc9900;
color: #996600;
font-size: 30px;
}
table {
width:100%;
}
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
th {
text-align: left;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
ul#menu {
padding: 0;
margin-bottom: 11px;
}
ul#menu li {
display: inline;
margin-right: 3px;
}
ul#menu li a {
background-color: #ffffff;
padding: 10px 20px;
text-decoration: none;
color: #696969;
border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
color: white;
background-color: black;
}
//////////////save as (Site.css)
No comments:
Post a Comment