Untuk membuat website sangat diperlukan adanya text editor dimana text editor ini merupakan cara untuk kita membuat baris-baris kode yang akan di tampilkan ke dalam website.
Banyak sekali macam pilihan text editor diluar sana tetapi karena kali ini kita hanya akan membahas bagaimana cara membuat html 5 di notepad yang keren dan menarik di notepad.
jadi kita hanya akan menggunakan text editor yang tidak perlu kita download dan cari lagi
karena sudah tersedia di dalam os apapun jenisnya.
Disini kita akan membuat halaman website dengan kode html 5 dan sedikit css yang menarik dan sangat keren.
Persiapan
Langkah pertama buat sebuah folder terlebih dahulu di dalam komputer kamu masing-masing.
setelah itu buat sebuah folder dengan nama latihanhtml5
Buka folder latihanhtml5 yang telah kita buat tadi kemudian buat sebuah file baru dengan nama index.html dan style.css
Ingat format file nya harus sesuai yaitu index.html (format html) dan file style.css (format css)
Jika file masih berekstensi txt buka notepad terlebih dahulu kemudian save dimana folder latihanhtml5 kita tadi kemudian pilih type nya All Files.
Jika sudah kamu bisa melanjutkan tutorial ini.
Membuat Tampilan Menarik di HTML dengan Notepad
Sekarang saat nya kita koding yuhu
Buka notepad kamu masing-masing . sudah tau kan ya cara buka notepad di windows.
Jika belum ada dua cara membuka notepad di windows yaitu cara pertama klik logo windows di samping pojok kiri lalu ketik “notepad”.
atau kamu juga bisa menggunakan cara kedua yaitu dengan cara tekan logo windows + r dan ketik “notepad” pada keyboard kamu.
Setelah itu drag file index.html yang telah kita buat sebelumnya tadi ke browser kamu. seperti ini :
Tampilan website kita sudah terbuka namun masih blank alias kosong .
lah kenapa? ya jelas karena kita belum memasukkan apa-apa.
untuk mengetes apakah website kita sudah berjalan dengan baik ketik apapun di file index.html disini saya contohkan “afrizatul.com”.
Kemudian save dan mari kita refresh website kita tadi.
Bagus tulisan afrizatul.com yang sudah kita ketikkan tadi ke dalam file index.html sekarang sudah tampil di website kita.
Itu artinya file index.html kita sudah terhubung ke website kita.
Tetapi kan kita mau buat tampilan yang menarik?
mari kita hapus kembali tulisan tersebut karena itu hanya untuk pengetesan saja.
Struktur Dasar HTML5
Buka notepad kita tadi lalu paste kode dibawah ini
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Save kembali kemudian refresh website kita maka tampilan nya akan seperti ini
itu adalah struktur awal dari bahasa pemograman html5 karena kita membutuhkan itu .
This is a Heading merupakan sebuah Heading di dalam html5.
Ada 6 jenis heading yang ada pada html5 yaitu :
- Heading 1
- Heading 2
- Heading 3
- Heading 4
- Heading 5
- Heading 6
Supaya lebih jelas coba hapus kode ini
<h1>This is a Heading</h1>
Lalu ganti dengan kode ini
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> <body> <h1>This is a Heading 1</h1> <h2>This is a Heading 2</h2> <h3>This is a Heading 3</h3> <h4>This is a Heading 4</h4> <h5>This is a Heading 5</h5> <h6>This is a Heading 6</h6> <p>This is a paragraph.</p> </body> </html>
Save dan mari kita refresh lagi browser kita
Nah sudah terlihat jelas kan perbedaannya? lagi lagi kita masih belajar tentang dasar html nya saja.
yuk sekarang buat tampilan yang menarik dan keren di html 5 dengan notepad.
hapus semua kode di index.html
kemudian copy kode dibawah ini lalu paste ke index.html
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Afrizatul.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="header-atas"> <header> <nav> <ul> <li>Beranda</li> <li>Kontak</li> </ul> </nav> </header> </div> <section> <article> <header> <h2>Judul Postingan</h2> </header> <p>Contoh isi artikel...</p> </article> </section> <aside> <h2>Tentang</h2> <p>Afrizatul.com Merupakan Blog tentang belajar bahasa pemograman dan ilmu komputer terbaru</p> </aside> <footer> <p>Copyright 2019 Afrizatul.com</p> </footer> </div> </body> </html>
save lalu buka file style.css kemudian copy dan paste kode berikut ini kedalamnya
.wrapper {
background-color: #333;
color: #fffffffa;
padding:10px;
width: 700px;
height: auto;
margin: 0 auto;
font-family: arial;
}Oke sekarang simpan lagi semua file kita . refresh lagi browser kita dan tampilannya sudah sedikit lebih menarik seperti ini
Tidak sampai situ saja. coba kita buat lagi supaya lebih menarik dan keren lagi.
Hapus semua kode di dalam file style.css tadi kemudian copy dan paste kode dibawah ini :
.wrapper {
background-color: #333;
color: #fffffffa;
padding:0px;
width: 700px;
height: auto;
margin: 0 auto;
font-family: arial;
}
.header-atas ul{
margin: 0;
padding: 0;
list-style: none;
}
.header-atas ul li {
float: left;
padding: 5px;
}
.header-atas {
margin: 0;
padding: 2px;
width: auto;
height: 30px;
background-color: red;
}Simpan lalu lihat lagi perubahan yang terjadi website kita.
Uh lumayan lah ya lanjut lagi deh.
Sekarang copy kode ini ke file index.html kita tadi . jangan lupa hapus terlebih dahulu ya
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Afrizatul.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <div class="header-atas"> <header> <nav> <ul> <li>Beranda</li> <li>Kontak</li> </ul> </nav> </header> </div> <div class="artikel"> <section> <article> <header> <h2>Bayu Afrizatul Rizki</h2> </header> </article> </section> </div> <div class="about"> <aside> <h2>Tentang</h2> <p>Afrizatul.com Merupakan Blog tentang belajar bahasa pemograman dan ilmu komputer terbaru</p> </aside> </div> <footer> <p>Copyright 2019 Afrizatul.com</p> </footer> </div> </body> </html>
Save. selanjutnya copy kode style.css dibawah ini. jangan lupa hapus juga semuanya sebelum di paste ya
body {
background-color: #d8d0d0;
}
.wrapper {
background-color: #333;
color: #fffffffa;
padding:0px;
width: 700px;
height: auto;
margin: 100px auto;
font-family: arial;
}
.header-atas ul{
margin: 0;
padding: 0;
list-style: none;
}
.header-atas ul li {
float: left;
padding: 5px;
}
.artikel h2 {
font-weight: 100;
}
.header-atas ul li:hover {
float: left;
background-color: #9a3cab;
transition: 0.3s;
cursor: pointer;
}
.header-atas {
margin: 0;
padding: 8px;
width: auto;
height: 30px;
background-color: #8900a2;
}
.artikel {
background-color: #3e1246;
text-align: center;
padding: 5px;
text-transform: uppercase;
}
.about {
background-color: #f1f1f1;
border-left: solid 1px #8900a2;
border-right: solid 1px #8900a2;
}
.about p {
font-size: 13px;
text-align: center;
padding-bottom: 10px;
color: #3e1246;
}
.about h2 {
text-align: center;
font-size: 18px;
color: #3b393c;
margin: 0;
padding: 7px;
text-transform: uppercase;
}
footer {
font-size: 12px;
text-align: right;
padding: 2px;
margin: 0;
background: #8900a2;
}
footer p {
padding: 0 5px;
}Simpan kembali . terakhir liat hasil nya di browser..
Tara… tampilan website kita yang sederhana menjadi lebih menawan dan menarik serta enak di pandang mata. ciha. wkwk
Penutup
Mungkin segitu aja dulu ya untuk belajar membuat html 5 di notepad . jangan lupa ikuti tutorial tentang html dan bahasa pemograman lainnya di blog ini.
jika ada yang ingin ditanyakan silahkan komentar dibawah.
