Mungkin anda yang masih awam bertanya - tanya, bagaimana cara membuat website? Ada beberapa tahapan dan langkah yang harus kita lalui untuk membuat sebuah Website yang baik. Lain halnya dengan instan CMS maupun instan blog yang kita tinggal mendaftar saja di penyedia layanan blog seperti Blogspot, Wordpress, dll. Maupun CMS seperti Joomla, Mambo, dll yang tinggal instal saja seperti. Disini kita belajar manual web (membuat website secara manual) walaupun masih sederhana dan statis. Untuk membuat website pertama-tama kita harus belajar bahasa HTML yaitu sebuah "bahasa program" yang memungkinkan kita membuat halaman web yang bisa ditampilkan dalam browser (Chrome, Firefox, Internet Explorer, Netscape, Opera, dll).
Nah, kini kita mulai dari langkah awal yaitu belajar bahasa HTML.
BELAJAR WEBSITE
Dewasa
ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext
Mark-up Language). Meskipun anda bisa saja membuat web page (halaman
web) tanpa mengerti sedikitpun HTML, Sangat disarankan bahkan nyaris
diharuskan, agar anda mengerti bahasa HTML. Untuk itu langkah pertama
bagi Anda yang bercita-cita memiliki website sendiri adalah belajar
HTML.
HTML
(Hypertext Markup Language) adalah bahasa program yang digunakan untuk
menulis format dokumen yang dapat digunakan dalam Web. Dengan HTML, teks
ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu
yang disebut tag untuk menjadi dokumen HTML (file *.htm atau *.html).
Oleh karena itu, untuk membuat dokumen HTML, anda bisa menggunakan semua
program teks editor biasa, mulai dari Notepad hingga Dreamweaver. Untuk
mudahnya, kita gunakan program Dreamweaver.
Apa yang dimkasud dengan file HTML?
- HTML merupakan kependekan dari Hyper Text markup Language
- Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup
- Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman
- File HTML harus memiliki ekstensi htm atau html
- File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.
PENGENALAN KODE HTML
>>New >> Basic Page >> HTML , setelah itu atur ke mode Code
disini anda akan menemui tag - tag semacam ini:
<HTML>
</HTML>
Penjelasan:
Masing-masing
baris di atas disebut tag. Tag adalah kode yang digunakan untuk
me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit
dengan tanda kurung runcing.
Ada
tag pembuka yaitu <HTML> dan ada tag penutup yaitu </HTML>
yang ditandai dengan tanda slash (garis miring) di depan awal
tulisannya.
Tag
di atas memberikan faidah bahwa yang akan ditulis diantara kedua tag
tersebut adalah isi dari dokumen HTML. Perlu anda ketahui bahwa tag-tag
html dapat ditulis dengan huruf besar ataupun huruf kecil. Artinya,
penulisan <HTML> atau <html> atau <Html> sama saja
hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah
meskipun hanya satu karakter akan berpengaruh terhadap dokumen HTML
anda, bahkan bisa berakibat dokumen HTML anda tidak bisa ditampilkan
dalam browser.
Sekarang kita akan beralih pada tag selanjutnya.
<HTML>
<BODY>
</BODY>
</HTML>
Isi dari dokumen HTML yang sesungguhnya adalah yang ditulis diantara tag <BODY>. Coba tuliskan:
<HTML>
<BODY>
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Sekarang
simpanlah file ini dengan meng-klik menu File lalu Save. Nah, lihatlah
hasil karya anda yang pertama dengan menekan F12 disitu akan muncul
tulisan "Tulisan ini akan tampak dalam browser by ilmugrafis." tanpa tag
HTML. Sekarang anda mungkin mulai mengerti cara kerja HTML dan markup
tag, begitulah cara kerjanya, jadi yg muncul di broser hanya tulisan
saja sedangkan tagnya hanya merupakan suatu perintah bagi browser untuk
menampilkan perintah kita.
Apakah
tag BODY fungsinya sekedar penanda tubuh atau isi dari dokumen web?
Tidak, dalam tag BODY ini bisa kita sisipkan bermacam-macam atribut yang
akan berpengaruh terhadap format atau tampilan halaman web secara
keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana
mengubah warna latar belakang dan warna tulisan dari halaman web dengan
penambahan atribut ke dalam tag BODY.
<HTML>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser by ilmugrafis.
</BODY>
</HTML>
Simpanlah
kembali file ini (klik File lalu Save). Untuk melihat bagaimana
hasilnya tekan F12 atau klik tombol Refresh pada browser atau bisa juga
dengan menekan tombol F5 pada keyboard. Dengan demikian, browser akan
memanggil ulang file yang kini sudah mengalami perubahan. Maka akan
tampaklah hasilnya:
Perlu
diketahui bahwa penentuan warna pada HTML bisa dengan nama warna (dalam
bahasa Inggris) dan bisa pula dengan kode warna. Kode warna ditulis
dalam format heksa contohnya seperti #rrggbb.
Ok
setelah menguasai tag di atas maka kita lanjutkan ke inspeksi tag HEAD
dan TITLE. Di sini terlihat bahwa kita mempunyai tag <HEAD> dan
tag <TITLE>. Tag HEAD berfungsi untuk mengapit berbagai macam
fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan.
Pada latihan kali ini, kita memasukkan tag TITLE diantara tag HEAD.
Sesuai namanya, tag TITLE ini berfungsi untuk mengapit kalimat yang
menjadi judul dari halaman web tersebut. Sekarang mari kita tuliskan
judul halaman web ini:
<HTML>
<HEAD>
<TITLE>WEBSITE BUATANKU</TITLE>
</HEAD>
<BODY BGCOLOR="yellow" TEXT="red">
Tulisan ini akan tampak dalam browser.
</BODY>
</HTML>
Simpan
lagi file ini dengan meng-klik File lalu Save. Sekarang kita akan
melihat bagaimana perubahannya dalam browser. Lakukan lagi Refresh
seperti di atas. Maka anda akan melihat di baris teratas (yang dinamakan
Title Bar) dari program browser akan menampilkan judul atau titel dari
halaman web anda yaitu: WEBSITE BUATANKU
previewnya kurang lebih seperti ini, disini saya menggunakan browser Firefox:
Alhamdulillah, selesailah latihan pertama Belajar Membuat Website - HTML.
Selamat belajar HTML di Dreamweaver
Sampai ketemu lagi di Tutorial berikutnya
Semoga Bermanfaat
0 comments:
Post a Comment