Anda di halaman 1dari 9

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

Dasar-Dasar Belajar Website Menggunakan HTML HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintahperintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. ntuk itu kita perlu mendesainnya dengan baik agar para pengun!ung homepage yang kita buat merasa senang dan bermanfaat. Mendesain HTML dapat dilakukan dengan dua cara" #. Menggunakan HTML Editor$ seperti Microsoft %ront&age$ 'dobe (reamwea)er$ dan lainlain. *. (engan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML. +edua cara diatas memiliki +elebihan dan kekurangan. ,ara pertama kelebihannya adalah HTML -ditor merupakan sebuah program yang khusus didesain untuk membuat$ melakukan editing bahkan mem-publish ke internet. (engan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin bela!ar lebih mendalam mengenai HTML. .edangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarankan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya$ ditambah lagi 'nda harus melakukan cara-cara kon)ensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan 'nda pela!ari$ karena dengan cara itulah 'nda akan lebih paham mengenai cara ker!a dan berbagai perintah yang biasa dipakai pada bahasa HTML. Struktur Dasar Dokumen HTML (okumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan. .truktur dasar dokumen HTML /Tag$ -lement$ 'ttribute0$ -lement HTML$ -lement H-'($ -lement T1TL-$ -lement 23(4. .ecara sederhana HTML terdiri dari dua bagian yaitu Header dan 2ody. .truktur HTML diapit oleh tag awal 5HTML6 dan tag akhir 57HTML6. .tandar penulisannya adalah" <HTML> <HEAD> Deskrisi dokumen
www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

</HEAD> <BODY> Isi dokumen </BODY> </HTML> Contoh aplikasinya 2uatlah scrips teks seperti dibawah ini dengan menggunakan Note&ad dan simpan filenya dengan nama latihan#.html <HTML> <HEAD> <TITLE>Belajar Dasar-Dasar HTML</TITLE> </HEAD> <BODY> Pelajaran Pertama sa a men!enai "emero!raman HTML# Tern ata Belajar HTML itu san!at muda$ dan men!as ikan</BODY> </HTML> Keterangan: Tag 5T1TL-6 digunakan untuk memberi !udul dokumen HTML. 8udul ini dapat 'nda lihat pada po!ok kiri atas /title bar0 browser. +etika orang akan mem-bookmark web 'nda$ maka !udul inilah yang akan disimpan. 523(46 adalah isi dokumen yang akan ditampilkan dibrowser 'nda ntuk melihat hasilnya$ silakan !alankan browser fa)orit 'nda$ dengan cara membuka file latihan#.html yang sudah 'nda buat tadi dengan menggunakan browser seperti contoh tampilan dibawah ini saya menggunakan browser Mo9ila %irefox "

.etelah mempela!ari materi ini diharapkan anda dapat memahami struktur dasar dari dokumen HTML. e!erensi Tag HTML "# Hea$ing Merupakan kepala dari dokumen HTML. Tag 5head6 dan tag 57head6 terletak di antara tag 5html6 dan tag 57html6.
www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

.intaks" <$ead> %%%%%%%%%%% </$ead> Heading adalah sekumpulan kata yang men!adi !udul atau sub!udul dalam suatu dokumen HTML. Heading berbeda dengan tag 5T1TL-6 yang tidak bisa muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading le)el # biasanya untuk !udul utama. Contoh: <HTML> <HEAD> <TITLE>Headin!s</TITLE> </HEAD> <BODY> <H&>Headin! Le'el &</H&> <H(>Headin! Le'el (</H(> <H)>Headin! Le'el )</H)> <H*>Headin! Le'el *</H*> <H+>Headin! Le'el +</H+> <H,>Headin! Le'el ,</H,> </BODY> </HTML>

%# &aragra! ntuk membuat paragraf digunakan tag 5&6. .etelah tag 5&6 'nda bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup 57&6. 'nda bisa mengatur posisi paragraf dengan attribut 'L1:N. 'tribut 'L1:N diikuti dengan posisi yang diinginkan. L-%T untuk rata kiri$ ,-NT-; untuk rata tengah dan ;1:HT untuk rata kanan. Contoh:

www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

<HTML> <HEAD> <TITLE>Para!ra-</TITLE> </HEAD> <BODY> <P ALI./01ri!$t1> Yan! $arus Anda sadari adala$ men2ari uan! di internet 3ukanla$ 3isnis se2ara riil# ta"i se3enarn a kita 3er$ada"an den!an dunia ma a# an! "erlu Anda 2ermati $an ala$ 3an ak je3akan dalam dunia ma a an! 3e!itu 2erdas dan 3an ak situs-situs 4e3 3isnis online an! 3uat Anda ra!u 3er$asil atau !a!al untuk menjalanin a# se$in!!a 3an ak oran! ter"erda a# terti"u dan men ia-n iakan 4aktu 3a$kan uan!n a dan ak$irn a tidak ada $asil sama sekali# sala$ satu "en e3a3n a adala$ kuran!n a "en!eta$uan an! mendalam tentan! skill tek$nis dan strate! untuk sukses 3isnis online% <P ALI./012enter1> Meman!# sam"ai saat ini masi$ 3an ak oran! tidak "er2a a 3a$4a 3isnis se2ara online 3isa mem3uat "en!!unan a menjadi ka a ra a# itu tidak 3enar# se3a3 ken ataann a 3an ak oran! menjadikan 3isnis online se3a!ai sum3er "en!$asilann a an! 3esar# se!era ikuti "etunjuk-"etunjuk an! ada dalam 3lok sa a ini# Anda akan diara$kan 3a!aimana ke3er$asilan "ara interneter kelas lokal mau"un dunia an! mem3an!un keka aan se2ara 3isnis online# dan ra$asian a di ku"as tuntas disini dan 3uktikan sendiri $asiln a# karena 3lo! ra$asia 3isnis online ini adala$ intisari dari ratusan situs 4e3 3isnis online den!an men!!unakan trik dan strate! am"u$ a!ar Anda 3isa mem3an!un keka aan se2ara online % <P ALI./01le-t1> 5ntuk menjalani 3isnis online a!ar Anda sukses# lan!ka$ "ertama an! $arus Anda lakukan adala$ melakukan "ersia"an% Ta$a"an ini san!at "entin! dan Anda $arus melakukann a karena dalam artikel ini mem3erikan Anda 3ukti ke3er$asilan 3ukan saja $an a menam3a$ "en!eta$uan Anda tentan! 3a!aimana menjalani 3isnis online% </P> </BODY> </HTML> (ibawah ini adalah tampilan pada halaman browser dari contoh script diatas "

www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

(ari struktur dasar HTML di atas dapat di!elaskan sebagai berikut " a# Tag 'dalah teks khusus /markup0 berupa dua karakter <5< dan <6<$ sebagai contoh 5body6 adalah tag dengan nama body. .ecara umum tag ditulis secara berpasangan$ yang terdiri atas tag pembuka dan tag penutup /ditambahkan karakter <7< setelah karakter <5<0$ sebagai contoh 5body6 ini adalah tag pembuka isi dokumen HTML$ dan 57body6 ini adalah tag penutup isi dokumen HTML. b# 'lement -lement terdiri atas tiga bagian$ yaitu tag pembuka$ isi$ dan tag penutup. .ebagai contoh untuk menampilkan !udul dokumen HTML pada web browser digunakan element title$ dimana" 5title6 ini adalah tag pembuka !udul dokumen HTML (isini 8udul (okumen HTML ini adalah isi !udul dokumen HTML 57title6 ini adalah tag penutup !udul dokumen HTML Tag-tag yang ditulis secara berpasangan pada suatu element HTML$ tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya. ,ontoh penulisan tag-tag yang benar (p) (b) ################
www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

(*b) (*p) ,ontoh penulisan tag-tag yang salah (p) (b) ################ (*p) (*b) +# ,ttribute 'ttribute mendefinisikan property dari suatu element HTML$ yang terdiri atas nama dan nilai. &enulisannya adalah sebagai berikut" (T,-) nama-attr./nilai-attr/ nama-attr./nilai-attr/ ################# ) ################# (*T,-) .ecara umum nilai attribute harus berada dalam tanda petik satu atau dua. .ebagai contoh$ untuk membuat warna teks men!adi kuning dan latarbelakang halaman web men!adi hitam$ penulisannya adalah 5body bgcolor=<black< text=<yellow<6 $# 'lement HTML Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. .intaks" (html) ########## (*html) e# 'lement H',D Merupakan kepala dari dokumen HTML. Tag 5head6 dan tag 57head6 terletak di antara tag 5html6 dan tag 57html6. .intaks" (hea$) ########### (*hea$) !# 'lement T0TL' Merupakan !udul dari dokumen HTML yang ditampilkan pada !udul !endela browser. Tag 5title6 dan tag 57title6 terletak di antara tag 5head6 dan tag 57head6. .intaks"
www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

(title) ######### (*title) g# 'lement B1D2 -lement ini untuk menampilkan isi dokumen HTML. Tag 5body6 dan tag 57body6 terletak di bawah tag 5head6 dan tag 57head6. -lement 23(4 mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latar belakang dokumen yang akan ditampilkan pada browser. .intaks" (bo$y te3t./4/ bg+olor./5/ ba+kgroun$./uri/ link./3/ alink./y/ 4link./6/) ############## (*bo$y) 'ttribute text memberikan warna pada teks$ bgcolor memberikan warna pada latarbelakang dokumen HTML$ background memberikan latarbelakang dokumen HTML dalam bentuk gambar$ link memberikan nilai warna untuk link$ alink memberikan warna untuk link yang sedang aktif$ )link memberikan warna untuk link yang telah dikun!ungi. 8ika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan$ akan tetapi !ika nilai attribute background /gambar0 tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan. L,T0H,7 :unakan teks editor misalkan <Notepad< untuk menyunting dan menyimpan script latihan di bawah ini. ntuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser fa)orit 'nda Latihan 1: Menampilkan teks" 2ela!ar bahasa pemrograman web sangatlah mudah"0 Nama file" latihan#>#.html <$tml> <$ead> <title>Lati$an&-&</title> </$ead> <3od > Belajar 3a$asa "emro!raman 4e3 san!atla$ muda$67 </3od > </$tml> Tugas tambahan" :antilah teks tersebut dengan teks sesuai dengan teks yang 'nda inginkan.
www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

Latihan 2: Merubah warna teks men!adi merah" 2ela!ar bahasa pemrograman web sangatlah mudah Nama file" latihan#>*.html (html) (hea$) (title)Latihan"-%(*title) (*hea$) (bo$y te3t./re$/) Belajar bahasa pemrograman 5eb sangatlah mu$ah:8 (*bo$y) (*html) Tugas tambahan" ,obalah untuk warna" maroon$ black$ yellow$ white$ lime$ green$ blue$ red$ oli)e$ na)y$ purple$ teal$ gray$ sil)er$ fuchsia$ a?ua. Latihan 3: Merubah warna background men!adi hitam. Nama file" latihan#>@.html (html) (hea$) (title)Latihan"-9(*title) (*hea$) (bo$y te3t./re$/ bg+olor./bla+k/) Belajar bahasa pemrograman 5eb sangatlah mu$ah:8 (*bo$y) (*html) Tugas tambahan" ,obalah untuk warna" maroon$ black$ yellow$ white$ lime$ green$ blue$ red$ oli)e$ na)y$ purple$ teal$ gray$ sil)er$ fuchsia$ a?ua. Latihan 4: Merubah background dengan suatu gambar. Nama file" latihan#>A.html (html) (hea$) (title)Latihan"-:(*title) (*hea$) (bo$y te3t./re$/ bg+olor./a;ua/ ba+kgroun$./#*images*image<%=#jpg/) Belajar bahasa pemrograman 5eb sangatlah mu$ah:8

www.efriharefa.com

BELAJAR MEMBUAT WEBSITE

by Efri Harefa

(*bo$y) (*html) catatan" .7images7 = nama direktori file gambar disimpan imageB*C.!pg = nama file gambar Tugas tambahan" ,obalah untuk file gambar" imageBDB.!pg$ imageBD*.!pg$ imageBDE.!pg dan imageBFB.!pg.

www.efriharefa.com