Assalamualaikum wr.wb ketemu lagi diblog saya, sebelumya telah dibahas mengenai pembuatan tampilan layout web, sekarang saya akan menjalankan navigasi yang terdapat pada menu-menu tampilan layoutnya
B.ALAT DAN BAHAN
-sublime text
-jaringan
-laptop
C.LATAR BELAKANG
menjalankan navigasi yang terdapat pada menu sebuah web yang sebelumnya telah dibuat layout tampilan halamannya.
D.MANFAAT DAN TUJUAN
-bisa menggunakan elemen dan tag yang terdapat pada HTML
-bisa menjalankan navigasinya
-bisa membuat web sederhana
E.PEMBAHASAN
Setelah kemarin membuat tampilan layout, berikut cara menjalankan navigasi menunya:
1. Membuat halaman baru pada sublime text dengan format html untuk menampilkan navigasi home,
berikut contoh codingnya:
<!DOCTYPE html>
<html>
<head>
<title>website sekolah smk n 1 bangsri</title>
<link rel="stylesheet" type="text/css" href="lanjutan web.css">
</head>
<body>
<div id="qq">
<div class="image">
<div style="width: 180px; height: 180px;">
<img src="logosmk.png">
</div>
</div>
<div id="je">
<div style=" width: 1089px; height: 180px ;font-size: 100px; color: silver;"><center>SMK N 1 BANGSRI</center></div>
</div>
</div>
<div id="header">
</div>
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">Gallery</a></li>
<li><a href="nav.html">Guru</a></li>
<li><a href="nav.html">prestasi</a></li>
<li><a href="nav.html">contact</a></li>
<img src="">
</ul>
</div>
<div id="nav">
<u>
<li><a href="nav.html">RPL</a></li>
<li><a href="nav.html">OTKP</a></li>
<li><a href="nav.html">AKL</a></li>
<li><a href="nav.html">TBSM</a></li>
<li><a href="nav.html">BDP</a></li>
</u>
</div>
<div id="section">
<h1>SMK N 1 BANGSRI</h1>
<p>
<p style="font-size: 12px; text-align: left; padding: 10px; float: left; width: 450px;"></p>
<p><u><b>Data Profil Sekolah<b></u>
<p>Nama Sekolah SMK Negeri 1 Bangsri
<p>Tahun Berdiri 2010
<p>NSS 331032010001
<p>Email smkn1bangsri@yahoo.co.id
<p>Kepala Sekolah Drs. Muh. Zainudin Azis, M.Ds
<p>NIP/NIY 196404161993031003
<p>Alamat Sekolah Jl. KH Achmad Fauzan, No. 17 Bangsri Jepara
<p>Telepon ( 0291 ) 772321</p>
</p>
</div>
<div id="footer">
<marquee>@zulfiyanik5.blogspot.com</marquee>
</div>
</body>
</html>
2.menjalankan menu gallery
<!DOCTYPE html>
<html>
<head>
<title>website sekolah smk n 1 bangsri</title>
<link rel="stylesheet" type="text/css" href="lanjutan web.css">
</head>
<body>
<div id="qq">
<div class="image">
<div style="width: 180px; height: 180px;">
<img src="logosmk.png">
</div>
</div>
<div id="je">
<div style=" width: 1089px; height: 180px ;font-size: 100px; color: silver;"><center>SMK N 1 BANGSRI</center></div>
</div>
</div>
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">Gallery</a></li>
<li><a href="nav.html">Guru</a></li>
<li><a href="nav.html">prestasi</a></li>
<li><a href="nav.html">contact</a></li>
<img src="">
</ul>
</div>
<div id="nav">
<u>
<li><a href="nav.html">RPL</a></li>
<li><a href="nav.html">OTKP</a></li>
<li><a href="nav.html">AKL</a></li>
<li><a href="nav.html">TBSM</a></li>
<li><a href="nav.html">BDP</a></li>
</u>
</div>
<div id="section">
<p style="font-size: 12px; text-align: left; padding: 10px; float: left; width: 450px;"></p>
<div style="width: 600px; height: 150px;">
<div style="width: 200px; height: 150px; background-color: orange; float: left"><img src="piala.jpeg" style="width: 200px; height: 120px;">penghargaan PMR</div>
<div style="width: 200px; height: 150px; background-color: orange; float: left"><img src="guru tu.jpg" style="width: 200px; height: 120px;">GURU DAN STAF TU</div>
<div style="width: 200px; height: 150px; background-color: orange; float: left"><img src="passus.jpeg" style="width: 200px; height: 120px;">PASSUS SMK</div>
</div>
<div style="width: 600px; height: 150px; background-color: #red">
<div style="width: 200px; height: 150px; background-color: orange; float: left"><img src="karnival2.png" style="width: 200px; height: 120px;">KARNAVAL</div>
<div style="width: 200px; height: 150px; background-color: orange; float: left"><img src="astramotor.jpg" style="width: 200px; height: 120px;">ASTRA GO TO SCHOOL</div>
<div style="width: 200px; height: 150px; background-color: orange; float: left"><img src="pelepasan kelas 12.jpg" style="width: 200px; height: 120px;">PELEPASAN KELAS 12</div></p>
</div>
<div id="footer">
<marquee>@zulfiyanik5.blogspot.com</marquee>
</div>
</body>
</html>
Begitu dengan menu-menu selanjutnya tinggal mengganti isi yang sesuai pada menunya
3.Mengisi navigasi jurusan yang ada pada kiri tampilan yang terdiri dari jurusan RPL, OTKP, AKL, TBSM, BDP
Berikut contoh codingnya:
<!DOCTYPE html>
<html>
<head>
<title>website sekolah smk n 1 bangsri</title>
<link rel="stylesheet" type="text/css" href="lanjutan web.css">
</head>
<body>
<div id="qq">
<div class="image">
<div style="width: 180px; height: 180px;">
<img src="logosmk.png">
</div>
</div>
<div id="je">
<div style=" width: 1089px; height: 180px ;font-size: 100px; color: silver;"><center>SMK N 1 BANGSRI</center></div>
</div>
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">Gallery</a></li>
<li><a href="nav.html">Guru</a></li>
<li><a href="nav.html">prestasi</a></li>
<li><a href="nav.html">contact</a></li>
<img src="">
</ul>
</div>
<div id="nav">
<u>
<li><a href="nav.html">RPL</a></li>
<li><a href="nav.html">OTKP</a></li>
<li><a href="nav.html">AKL</a></li>
<li><a href="nav.html">TBSM</a></li>
<li><a href="nav.html">BDP</a></li>
</u>
</div>
<div id="section">
<h1>SMK N 1 BANGSRI</h1>
<p>
<p style="font-size: 12px; text-align: left; padding: 10px; float: left; width: 450px;"></p>
<p><b><u>1.Rekayasa Perangkat Lunak</u></b>
<p>
<p> Mencetak programer handal, jujur dan terpercaya
<p> Membekali siswa dengan design grafis, web development, dan teknisi handphone
<p> Siap terjun di dunia enterpreneur bidang komputer dan handphone
</p>
</div>
<div id="footer">
<marquee>@zulfiyanik5.blogspot.com</marquee>
</div>
</body>
</html>
begitu dengan menu jurusan lain tinggal mengganti isi yang sesuai dengan jurusannya.
F.REFERENSI
modul HTML
semoga bermanfaat, sampai jumpa dipost-post berikutnya...
WASSALAMUALAIKUM WR.WB
0 komentar:
Posting Komentar