Untuk peralatan yang digunakan cukup menggunakan notepad sebagai teks editornya dan browser google chrome sebagai media penampilnya. Peralatan tersebut biasanya sudah tersedia atau bawaan dari windows, jadi tidak perlu menambah atau download software lagi. Editor teks selain notepad yang bisa digunakan untuk membuat web adalah Notepad++, Eclipse, Netbean, Vi, Homesite, Dreamweaver dan masih banyak yang lain. Untuk penggunaanya bebas, silahkan kalian pilih yang mana. Tapi yang saya gunakan pada tutorial ini adalah notepad++. Jika kalian menggunakan Notepad biasa (bawaan) atau Dreamweaver atau yang lainnya, itu tidak masalah, tidak ada perbedaan pada penulisan script / coding yang nantinya akan kita pelajari bersama, perbedaan hanya pada user interface dan penguasaan dari teks editor yang dipakai saja.
Sedangkan untuk bahasa pemrograman web yang digunakan adalah HTML dan CSS. Sebetulnya selain CSS masih bisa ditambahkan bahasa perograman yang lain semisal PHP atau mySQL atau yang lainnya, untuk kelengkapan dan kebutuhan suatu halaman website. Tapi pada penulisan ini hanya akan menggunakan HTML dan CSS saja, Sesuai dengan judul “cara membuat website sederhana”. mungkin dilain kesempatan akan saya bahas tentang bahasa pemrograman lainnya. Ok, langsung kita mulai saja.
Pengenalan HTML
HTML (Hyper Text Markup Language) adalah bahasa yang digunakan untuk membuat dokumen halaman web, sehingga dokumen html tersebut dapat ditampilkan pada penjelajah internet (internet browser). HTML merupakan standar yang digunakan secara luas sebagai bahasa tanda untuk halaman web yang dikelola dan dikendalikan oleh W3C ( World Wide Web Consortium). Adapun versi-versi dari HTML menurut tahun diperkenalkannya adalah sebagai berikut:- HTML 2 (22 September 1995)
- HTML 3.2 (14 Januari 1996)
- HTML 4 (8 Desember 1997)
- HTML 4.01 (24 Desember 1999)
- ISO HTML, ISO 15445:20000 (15 Mei 2000)
- HTML 5 (Januari 2008)
- Mempresentasikan text, gambar dan multimedia secara online.
- Menghubungkan antar dokumen HTML (hyperlink).
- Menghubungkan isi dokumen dan isi dokumen lainya berdasarkan jangkar-jangkar yang telah didefinisikan.
- Membuat form interaktif untuk pengiriman data sesuai keinginan.
- Dokumen HTML terdiri dari tag-tag berpasangan yang memiliki fungsi-fungsi berbeda.
- Setiap tag ada yang mengandung element, atribut dan value.
- Setiap dokumen HTML diawali dan diakhiri dengan tag <html>.....</html>
- Ektensi dokumen html adalah “.htm” atau “.html” contoh: “halamanlogo.html”.
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
Isi dokumen
</body>
</html>
Membuat Heading dan Sub Heading
Fungsi heading dan sub heading pada HTML adalah untuk membuat judul tulisan dalam dokumen HTML. Tag HTML yang digunkan untuk membuat heading adalah tag h dengan format penulisan heading sebagai berikut-----> <hx atribut=“value”>judul</hx>- Dimana x adalah angka 1 s/d 6
- Dimana atribut adalah align untuk menentukan letak text
- Dimana value adalah left, center atau right
<html>Script diatas silahkan kalian coba tuliskan pada notepad, untuk format penulisannya bisa kalian terus tulis memanjang kesamping, tapi untuk memudahkan dalam pembelajaran dan pengeditan sebaiknya ditulis kebawah, enter setiap bagian script seperti pada contoh di atas. Setelah itu kemudian simpan dengan nama “latihan heading.html”, jangan lupa untuk menulis “.html” sebagai keterangan ekstensinya.
<head>
<title>Latihan Membuat Heading</title>
</head>
<body>
<h1>Ini adalah heading h1</h1>
<h2>Ini adalah heading h2</h2>
<h3>Ini adalah heading h3</h3>
<h4>Ini adalah heading h4</h4>
<h5>Ini adalah heading h5</h5>
<h6>Ini adalah heading h6</h6>
</body>
</html>
Jika sudah, tampilan file nya akan seperti ini
jalankan file chrome tersebut, dengan doble click pada file chrome-nya, dan akan membuka browser chrome, dan tampilan halamnnya akan seperti ini
Penggunaan tag heading ini akan menunjukan penegasan pada tulisan dan berimbas pada hasil penelusuran di internet, maka dari itu tag heading adalah salah satu cara yang digunakan dalam teknik SEO atau Search Engine Optimizer. Berikut ini adalah tag yang berfungsi memberikan tekanan pada text dokumen html
- <b>....</b> atau <strong>...</strong> untuk menebalkan teks
- <u>....</u> untuk memberikan garis bawah
- <i>...</i> untuk cetak miring
- <strike>...</strike> untuk coret teks
- <small>...</small> untuk membuat kecil ukuraan font
- <sub>....<sub> untuk cetak bawah
- <sup>....</sup> untuk cetek atas
<html>Tulis script diatas pada notepad, simpan dengan nama file terserah kalian tapi tetap dengan ekstensi “.html”, setelah itu jalankan file.a dan hasilnya akan seperti gambar dibawah ini.
<head>
<title>tag penekanan</title>
</head>
<body>
ditulis<strong>tebal</strong>
dengan<u>garis bawah</u><br>
format<i>Tulisan ini akan menjadi miring</i><br>
Tanda ini <strike>menujukan koreksi</strike>
</body>
</html>
Note: untuk tag <br> atau sering disebut juga tag jomblo, digunakan untuk ganti baris atau “enter”
Mengatur tag FONT
Tag font memiliki beberapa atribut yaitu, Face untuk memilih jenis tipe font, Size untuk menentukan ukuran dari font dan Color untuk menentukan warna font. berikut contoh penggunaan tag font sekaligus tag heading<html>Tulis script diatas pada notepad, simpan dengan nama “latihan font.html”, kalian bisa merubah atribut dan value sesuai yang diinginkan, setelah itu jalankan filenya. Script diatas hasilnya akan seperti ini
<head>
<title>Latihan Font</title>
</head>
<body>
<font face="verdana" size="6" color="Black"><h1>Latihan Font</h1></font>
<font face="Times New Roman" color="blue"><h2>Latihan Font</h2></font>
<font face="Arial" size="4" color="red">Latihan font</font>
</body>
</html>
note: untuk penulisan jenis warna yang digunakan bisa menggunakan kode warna seperti contoh “#000000, #ff0000,…” atau bisa juga dengan penyebutan dalam bahasa inggris “black, white, red,…”
Jika kalian mau mengubah atau mengedit file dot html yang sudah jadi (“latihan.html”) file chrome, kalian bisa merubah isinya dengan cara klik kanan pada file html-nya / chrome, kemudian pilih edit dengan notepad, file akan terbuka dalam format text notepad, jika sudah melakukan perubahan kalian bisa menyimpannya kembali.
untuk melihat hasil perubahan pada browser setelah pengeditan cukup tekan refresh saja pada halaman tersebut, maka tampilan halaman akan mengikuti perubahan yang sudah diterapkan.
Sekian dulu untuk pembahasan kali ini, saya harap cukup jelas dan bisa dipahami oleh para pembaca. Masih banyak lagi tag html lain yang digunakan dalam membuat sebuah halaman web dan akan saya coba ulas pada penulisan berikutnya. Dan di akhir sesi, akan membuat full halaman web dengan menggunakan tag-tag yang sudah dipelajari sebelumnya.
Untuk selanjutnya kalian bisa mencoba mengkombinasikan sendiri tag-tag diatas supaya bisa lebih paham lagi tentang pembahasan kali ini.
Semoga bermanfaat. Terimakasih.
Terima kasih kakak, dengan informasi ini sangat membantu kami dan mempermudahkan kami
BalasHapusNama saya:Yulinda sari Nim:1922500197
Dan link web kampus saya https://www.atmaluhur.ac.id/
Terima kasih atas ilmu yang telah di bagikan, sangat membantu saya dalam tugas perkuliahan saya.
BalasHapusNama saya: Marganda Sinabutar Nim:1922500147
Dan link web kampus saya https://www.atmaluhur.ac.id