 |
| Buat Folder Baru |
Buat folder baru dengan nama folder sesuai dengan projek yang kita kerjakan. Misalnya kita akan membuat website tentang web profile "PT Example" maka kita namakan foldernya "pt_example". Disarankan space( ) diganti dengan underscore( _ ).
Folder yang dibuat ini untuk menyimpan file html, gambar, video, dll.
berikut contoh struktur folder projek yang akan dibuat :
 |
| Folder CSS dan image sudah dibuat |
Strukturnya dapat seperti ini :
pt_example
|--- CSS
|- style.css
|--- image
|- logo.jpg
|- index.html
|- about.html
|- contact.html
Penjelasan :
- Folder image digunakan untuk menyimpan file gambar
2. Memulai membuat projek.
Kita buat projek htmlnya, dan simpan di folder yang sudah kita buat tadi.
3. Buat Index.html
Index.html adalah halaman html yang pertama kali dipanggil ketika mengunjungi web kita.
Kode index.html :
<html> <head> <title>PT Example</title> <!-- panggil style.css --> <link rel="stylesheet" type="text/css" href="CSS/style.css"> </head> <body> <!-- Header --> <div class="header"> <h2><img src="image/logo.jpg" width="50px" height="50px"> PT Example </h2>
</div> <!-- Menu Navigasi --> <div class="navigasi"> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Kontak</a> </div> <div class="konten"> <!-- buat paragraf --> <p> Selamat Datang Disitus resmi PT Example </p> </div> <div class="footer"> <center>Copyrigth © 2018 Anang Hajiana</center> </div> </body> </html
4. Buat about.html
Halaman ini berisi informasi mengenai PT Example
Kode about.html
<html> <head> <title>PT Example</title> <!-- panggil style.css --> <link rel="stylesheet" type="text/css" href="CSS/style.css"> </head> <body> <!-- Header --> <div class="header"> <h2><img src="image/logo.jpg" width="50px" height="50px"> PT Example </h2>
</div> <!-- Menu Navigasi --> <div class="navigasi"> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Kontak</a> </div> <div class="konten"> <!-- buat paragraf --> <p> PT Example adalah salah satu perusahaan yang bergerak dibidang Informasi Teknologi.</p> <p>Pembuatan aplikasi web juga android developer.</p> </p> </div> <div class="footer"> <center>Copyrigth © 2018 Anang Hajiana</center> </div> </body> </html>
5. Buat contact.html
Halaman ini berisi kontak yang dapat dihubungi dari PT Example
Kode contact.html
6. Buat style.css
Halaman ini digunakan untuk desain web seperti warna, font, dll.
Kode style.css
Terimakasih Semoga bermanfaat :)
<html> <head> <title>PT Example</title> <!-- panggil style.css --> <link rel="stylesheet" type="text/css" href="CSS/style.css"> </head> <body> <!-- Header --> <div class="header"> <h2><img src="image/logo.jpg" width="50px" height="50px"> PT Example </h2>
</div> <!-- Menu Navigasi --> <div class="navigasi"> <a href="index.html">Home</a> <a href="about.html">About</a> <a href="contact.html">Kontak</a> </div> <div class="konten"> <!-- buat paragraf --> <p> Hubungi kami dengan mengisi formulir disini. </p> <input type="text" placeholder="Nama"><br> <input type="text" placeholder="Email"><br> <textarea placeholder="Pesan"></textarea><br> <button>Kirim</button> </div> <div class="footer"> <center>Copyrigth © 2018 Anang Hajiana</center> </div> </body> </html>
6. Buat style.css
Halaman ini digunakan untuk desain web seperti warna, font, dll.
Kode style.css
.header{
background: #1616a5; padding: 10px; } .navigasi{ background: #b9bbd0; padding: 10px; } .konten{ background: #a8aada; padding: 10px; height: 70%; } .footer{ background: blue; padding: 10px; color: white; } h2{ color: white; } a:hover{ background: blue; color: white; }
catatan :
- logo.jpg adalah gambar yang akan ditampilkan di header
- jika tidak tampil pastikan :
> gambar ada di folder image
> nama gambar dan formatnya(.jpg) sama pada kode <img src="image/logo.jpg">
 |
| Struktur projek yang sudah dibuat |
Terimakasih Semoga bermanfaat :)
1 comments:
Terimakasih kakak, ilmunya bermanfaat. :)
Post a Comment