Link merupakan suatu kata, sederetan kata (kalimat) atau gambar dalam suatu web yang tehubung dengan suatu halaman web, baik itu halaman web dari dalam web itu sendiri atau pun halaman web pihak lain.
Web artinya Suatu sistem di internet yang memungkinkan siapapun agar bisa menyediakan informasi. Dengan menggunakan teknologi tersebut, informasi dapat diakses selama 24 jam dalam satu hari dan dikelola oleh mesin. Untuk mengakses informasi yang disediakan web ini, diperlukan berbagai perangkat lunak, yang disebut dengan web browser.
sekarang kita akan mencoba untuk memebuat beberapa program LINK untuk formula
Program 1
<html>
<head>
<style type="text/css">
#navcontainer ul
margin: 0;
padding: 0;
list-style-type: none;}
h1{color:black ; font-family:algerian }
#navcontainer li { margin: 0 0 .2em 0; }
#navcontainer a
{ display: block;
color: black;
background-color: blue;
width: 9em;
padding: .2em .8em;
text-decoration: none;
font-family:algerian
}
#navcontainer a:hover
{ background-color: yellow;
color: black;}
</style>
</head>
<body>
<div id="navcontainer">
<ul><h1> Menu : </h1>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul></div>
</body>
</html>
Program 2
<html>
<head>
<style type="text/css">
#navcontainer ul{
margin:0;
padding:0;
list-style-type:none;
font-family:algerian;}
}
#navcontainer a{
display:block;
color:red;
background-color:blue;
width:9em;
padding:3px 12px 3px 8px;
text-decoration:none;
border-bottom:1px solid red;
font-weight:bold;}
#navcontainer a:hover{
background-color:green;
color:red;}
#navcontainer li li a{
display:block;
color: red;
background-color:purple;
width:9em;
padding:3px 3px 3px 17px;
text-decoration:none;
border-bottom:1px solid red;
font-weight:normal;}
</style>
<head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a>
<ul>
<li><a href="#">Goat</a></li>
<li><a href="#">Cow</a></li>
</ul>
</li>
<li><a href="#">Eggs</a>
<ul>
<li><a href="#">Free-range</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
<li><a href="#">Cheese</a>
<ul>
<li><a href="#">Smelly</a></li>
<li><a href="#">Extra smelly</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
Program 3
<html>
<head>
<style type="text/css">
#navcontainer ul{
margin:0;
padding:0;
list-style-type:none;
text-align:center;
font-family:algerian;}
#navcontainer ul li {
display:inline;}
#navcontainer ul li a{
text-decoration:none;
padding:.2em 1em;
color:red;
background-color:blue;}
#navcontainer ul li a:hover{
color:red;
background-color:green;}
</style>
<head>
<body>
<div id="navcontainer">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
</body>
</html>
Program 4
<html>
<head>
<style type="text/css">
ul#navigation{
list-style-type: none;
margin: 0;
padding: .5em 0;
border-top: 1px solid green;
font-family:algerian;}
ul#navigation li a{
display: block;
width: 5em;
color: blue;
background-color: green;
padding: .2em 0;
text-align: center;
text-decoration: none;}
ul#navigation li a:hover{
color:blue;
background-color: red;}
ul#navigation .left { float: left; }
ul#navigation .right { float: right; }
</style>
<head>
<body>
<p>We will start with a paragraph of text and a simple list, The UL is styled with n ID selector(id="navigation"), and the two LI's are styled with class selectors(class="left" and class="right"). for this tutorial, obvious names have been used. However, it is better to name classes and id's based on their meaning, rather than their appearance.</p>
<ul id="navigation">
<li class="left"><a href="#">Back</a></li>
<li class="right"><a href="#">Next</a></li>
</ul>
</body>
</html>
Program 5
<html>
<head>
<style type="text/css">
ul#navlist{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 100%;
color: #fff;
background-color: blue;
font-family:algerian;}
ul#navlist li{display: inline;}
ul#navlist li a{
float: left;
width: 5em;
color: red;
background-color: blue;
padding: 0.2em 1em;
text-decoration: none;
border-right: 1px solid green;}
ul#navlist li a:hover{
background-color: yellow;
color: blue;}
</style>
<head>
<body>
<ul id="navlist">
<li><a href="#">Persib</a></li>
<li><a href="#">Persebaya</a></li>
<li><a href="#">PSIM</a></li>
</ul>
</body>
</html>
ini hanya beberapa contoh dari pembuatan WEB hehhe,, masih banyak lagi contoh lainnya,
saya hanya bisa memberikan beberapa contoh saja ...
wasalam
Tidak ada komentar:
Posting Komentar