membuat web login dengan html
Assalammualaikum wr.wb
saya akan menjelaskan tentang dan bagaimana tentang membuat login portal dengan html.
beri nama index.html
<html lang="en">
<head>
<title>:::membuat tampilan website:::</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="download.jpg" height="222" width="1200">
</div>
<div class ="header">
<ul>
<li><a href="lepas.html?page:Home">Home</a></li>
<li><a href="lepas.html?page:News">News</a></li>
<li><a href="lepas.html?page:Contact">Contact</a></li>
<li><a href="lepas.html?page:Tentang">Tentang</a></li>
<li><a href="lepas.html?page:Lokasi">Lokasi</a></li>
<li><a href="lepas.html?page:Grup">Grup</a></li>
<li><a href="lepas.html?page:Books">Books</a></li>
<li><a href="lepas.html?page:Download">Download</a></li>
<li><a href="lepas.html?page:Sekitar">Sekitar</a></li>
<li><a href="lepas.html?page:About">About</a></li>
<li><a href="lepas.html?page:About">About</a></li>
</ul>
</div><br>
<div class="teks">
<table width="405" height="169" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#00CCFF">
<td height="37" colspan="2"><div align="center"><strong>HARAP LOGIN</strong></div></td>
</tr>
<div class="makan">
<tr>
<td width="95" height="32">Username</td>
<td width="304"><label>:
<input name="username" type="text" id="username" />
</label></td>
</tr>
<tr>
<td height="26">Password</td>
<td><label>:
<input name="password" type="password" id="password" />
</label></td>
</tr>
<tr>
<td height="48"> </td>
<td><input name="Login" type="submit" id="Login" value="Login" />
<input name="Batal" type="submit" id="Batal" value="Batal" /></td>
</tr></div>
</table>
</div>
<div class="aku">
<center><img src="tb.jpeg" ></center><hr>
</div>
</div><br><br><br><br>
<div class="footer">
</marrquee>Muhammad Aldilo Sebayang</marquee>
</div>
</body>
</html>
ini contoh gambarnya
saya akan menjelaskan tentang dan bagaimana tentang membuat login portal dengan html.
beri nama index.html
<html lang="en">
<head>
<title>:::membuat tampilan website:::</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<img src="download.jpg" height="222" width="1200">
</div>
<div class ="header">
<ul>
<li><a href="lepas.html?page:Home">Home</a></li>
<li><a href="lepas.html?page:News">News</a></li>
<li><a href="lepas.html?page:Contact">Contact</a></li>
<li><a href="lepas.html?page:Tentang">Tentang</a></li>
<li><a href="lepas.html?page:Lokasi">Lokasi</a></li>
<li><a href="lepas.html?page:Grup">Grup</a></li>
<li><a href="lepas.html?page:Books">Books</a></li>
<li><a href="lepas.html?page:Download">Download</a></li>
<li><a href="lepas.html?page:Sekitar">Sekitar</a></li>
<li><a href="lepas.html?page:About">About</a></li>
<li><a href="lepas.html?page:About">About</a></li>
</ul>
</div><br>
<div class="teks">
<table width="405" height="169" border="0" cellpadding="0" cellspacing="0">
<tr bgcolor="#00CCFF">
<td height="37" colspan="2"><div align="center"><strong>HARAP LOGIN</strong></div></td>
</tr>
<div class="makan">
<tr>
<td width="95" height="32">Username</td>
<td width="304"><label>:
<input name="username" type="text" id="username" />
</label></td>
</tr>
<tr>
<td height="26">Password</td>
<td><label>:
<input name="password" type="password" id="password" />
</label></td>
</tr>
<tr>
<td height="48"> </td>
<td><input name="Login" type="submit" id="Login" value="Login" />
<input name="Batal" type="submit" id="Batal" value="Batal" /></td>
</tr></div>
</table>
</div>
<div class="aku">
<center><img src="tb.jpeg" ></center><hr>
</div>
</div><br><br><br><br>
<div class="footer">
</marrquee>Muhammad Aldilo Sebayang</marquee>
</div>
</body>
</html>
ini contoh gambarnya
dan kemudian style cssnya
beri nama style.css
.header{
background-color:#00FFFF;
color:black;
text-align:center;
padding:2px;
padding-left:400px;
}
.section{
width:350px;
float:left;
padding:10px;
}
.footer{
background-color:#00FFFF;
color:black;
clear:both;
text-align:center;
padding:5px;
}
.teks{
background-color:#000000;
height:20px;
width:20px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 100px;
font-weight: bold;
color: black;
background-color:#00FFFF;
text-align: center;
padding: 5px;
text-decoration: none;
text-transform: uppercase;
}dan
a:hover, a:active {
background-color:#000000;
}
jalankan webnya
localhost/web/index.html
dan hasilnya akan seperti gambar di bawah ini.
DILARANG COPAS" CLUB MOHON IZIN SEBELUM MENGCOPASNYA!!!!
TERIMAKASIH SEMOGA BERMANFAAT:)
Comments
Post a Comment