Belajar Membuat Hyperlink Pada Website

Assalamualaikum teman-teman, kali ini saya akan membagikan tutorial cara membuat hyperlink pada sebuah website

Hyperlink adalah menggabungkan halaman web satu dengan yang lainnya agar saling terhubung dan terkait.

Aplikasi yang dipakai :

1. Notepad ++

2. XAMPP

3. Browser

Cekidot

Pertama kita membuat tampilan halaman utamanya yang akan kita beri nama

index.php

<html>
<head>
<title>dashboard</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class ="container">
<header>
<h2><span style="color:#333;">Template</span> Simple</h2>
<h3>Selamat Datang</h3>
<ul>
<p>Main Navigation</p>
<li><a href ="index.php">Dashboard</a></li>
<li><a href ="index.php?hal=user">User</a></li>
<li><a href ="#">About</a></li>
</ul>
</header>
<content>
<div class ="garis"></div>
<?php
if (isset($_GET["hal"])) {
if(@$_GET['hal'] == "user") {
require_once "user.php";
}
}
?>
</content>
</div>
</body>
</html>

Jika sudah di simpan dengan nama index.php. Disimpan di C:xampp/localhost/htdocs/pwpb/index.php

Kemudian kita harus membuat file CSS nya

style.css

* {margin:0; padding:0;box-sizing:border-box;list-style-type:none;text-decoration:none;color:#111;}

body {background-color:#f1f1f1;font-family:trebuchet MS;height:100%; }

header {background-color:#333;width:190px;position:fixed;height:100%;bottom:0;left:0;}
header h2 {background-color:gold;color:#fff;font-family:segoe script;padding:15px 30px;width:100%;}
header h3 {color:gold;font-size:14px;text-align:center;padding:10px;}

ul p {color:#4b646f;font-size:11.5px;background-color:#222;padding:15px;}
ul li:hover a {background-color:#222;border-left:4px solid gold;}
ul li a {display:block;padding:13px;color:#eee;font-size:14px;}

content {position:absolute;width:calc(100% - 190px); right:0;top:0px;padding:10px;font-size:14px;}
content .garis {background-color:#999;height:3px;width:100%;margin:10px 0;}
.content {background-color:white;padding:15px;width:100%;overflow-x:auto;}
table {border-collapse:collapse;margin-top:15px;}
th, td {padding:10px 4px;}
th{background-color:gold;}

Jika sudah di simpan dengan nama style.css. File disimpan di C:xampp/localhost/htdocs/pwpb/css/style.css

Setelah itu kita harus membuat halaman web tujuan yang akan kita link/ atau gabungkan dengan index kita tadi, disini kita beri nama user.php.

<section class="content">
<h2>DATA DIRI</h2>
<table width="100%" border="1">

<tr>
<th>NAMA</th>
<th>UMUR</th>
<th>JURUSAN</th>
</tr>

<tr>
<td>Rizky</td>
<td>26 Tahun</td>
<td>RPL</td>
</tr>
</section>

Setelah selesai simpan file tersebut di folder yang sama dengan index.php sebelumnya, dan beri nama user.php
Kemudian kita jalankan XAMPP nya dan dirun Apache nya saja untuk jalankan server localnya

Selamat mencoba dan semoga berhasil

Belajar Membuat Hyperlink Pada Website

Komentar