SlideShare a Scribd company logo
BELAJAR Membuat WEBSITE - Basic HTML
Publish: 20 Desember 2010 | Author & Copyright: Johan | Status: FREE tutorial
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 ^_^/
</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 ^_^/

More Related Content

What's hot

9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
vicky alhuda
 
Belajar html untuk pemula 1
Belajar html untuk pemula 1Belajar html untuk pemula 1
Belajar html untuk pemula 1
Ridwan Ajjh
 
Modul html
Modul htmlModul html
Modul html
fajaralpindra
 
Ilmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daunIlmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daun
Hendi Alfiandi
 
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libreIlmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
Uniska Lam
 
Html power point
Html power pointHtml power point
Html power point
minmon
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri14
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
Dedy Setiawan
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
eghha
 
Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
hestihariani
 
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
Bambang Sugianto
 
DASAR HTML
DASAR HTMLDASAR HTML
DASAR HTML
Sahrul Sindriana
 
Basic html
Basic htmlBasic html
Basic html
dand_01
 
Module desain web
Module desain webModule desain web
Module desain web
Dedy Setiawan
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
Fajar Baskoro
 

What's hot (16)

9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 
Belajar html untuk pemula 1
Belajar html untuk pemula 1Belajar html untuk pemula 1
Belajar html untuk pemula 1
 
Modul html
Modul htmlModul html
Modul html
 
Ilmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daunIlmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daun
 
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libreIlmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
 
Html power point
Html power pointHtml power point
Html power point
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
 
Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
 
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
Pengenalan HTML ( Bambang Sugianto, S.T., M.Kom - UMNU KEBUMEN )
 
DASAR HTML
DASAR HTMLDASAR HTML
DASAR HTML
 
Basic html
Basic htmlBasic html
Basic html
 
Module desain web
Module desain webModule desain web
Module desain web
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
Web disain
Web disainWeb disain
Web disain
 

Viewers also liked

100 comment win xp
100 comment win xp100 comment win xp
100 comment win xp
Nie Andini
 
Mengenal office 2010 bab i
Mengenal office 2010 bab iMengenal office 2010 bab i
Mengenal office 2010 bab iNie Andini
 
Cara burn data ke cd or dvd menggunakan nero 6
Cara burn data ke cd or dvd menggunakan nero 6Cara burn data ke cd or dvd menggunakan nero 6
Cara burn data ke cd or dvd menggunakan nero 6Nie Andini
 
Silabus Tematik Terpadu Kelas I-Tema 1
Silabus Tematik Terpadu Kelas I-Tema 1Silabus Tematik Terpadu Kelas I-Tema 1
Silabus Tematik Terpadu Kelas I-Tema 1
Jogo Hera
 
Chandigarh under problem
Chandigarh under problemChandigarh under problem
Chandigarh under problem
Akshit Gupta
 
Cara cepat pakai keyboard
Cara cepat pakai keyboardCara cepat pakai keyboard
Cara cepat pakai keyboard
Sukron Firudin
 

Viewers also liked (7)

100 comment win xp
100 comment win xp100 comment win xp
100 comment win xp
 
Mengenal office 2010 bab i
Mengenal office 2010 bab iMengenal office 2010 bab i
Mengenal office 2010 bab i
 
Cara burn data ke cd or dvd menggunakan nero 6
Cara burn data ke cd or dvd menggunakan nero 6Cara burn data ke cd or dvd menggunakan nero 6
Cara burn data ke cd or dvd menggunakan nero 6
 
Silabus Tematik Terpadu Kelas I-Tema 1
Silabus Tematik Terpadu Kelas I-Tema 1Silabus Tematik Terpadu Kelas I-Tema 1
Silabus Tematik Terpadu Kelas I-Tema 1
 
Chandigarh under problem
Chandigarh under problemChandigarh under problem
Chandigarh under problem
 
Manual komputer
Manual komputerManual komputer
Manual komputer
 
Cara cepat pakai keyboard
Cara cepat pakai keyboardCara cepat pakai keyboard
Cara cepat pakai keyboard
 

Similar to Belajar membuat website

Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
Hamdani Nurdin
 
Modul html
Modul htmlModul html
Modul html
Fikri Pandoez
 
Modul html
Modul htmlModul html
Modul html
adealfarisi
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
Desma_susanti
 
Belajar html
Belajar htmlBelajar html
Belajar html
MURROBI
 
Desain web 1
Desain web 1Desain web 1
Desain web 1
Luiz Suarez Zikri
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
RaniRatnaningsih2
 
Modul web programing
Modul web programingModul web programing
Modul web programing
Nepriant Juragantv
 
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
NansyeDeboraLitaay
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
fikrinurfahmi1
 
3947109.ppt
3947109.ppt3947109.ppt
3947109.ppt
rico63562
 
Html dan php
Html dan phpHtml dan php
Html dan php
Albertz Ace-Red
 
Html dan php
Html dan phpHtml dan php
Html dan php
Haswi Haswi
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 
Belajar HTML
Belajar HTMLBelajar HTML
Belajar HTML
Bambang Herlandi
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
T Ghazali
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
Nepriant Juragantv
 
Apa itu html
Apa itu htmlApa itu html
Apa itu html
TeukuMahawira
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)Toni Tegar Sahidi
 

Similar to Belajar membuat website (20)

Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
 
Modul html
Modul htmlModul html
Modul html
 
Modul html
Modul htmlModul html
Modul html
 
Modul html
Modul htmlModul html
Modul html
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
 
Belajar html
Belajar htmlBelajar html
Belajar html
 
Desain web 1
Desain web 1Desain web 1
Desain web 1
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
3947109.ppt
3947109.ppt3947109.ppt
3947109.ppt
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Belajar HTML
Belajar HTMLBelajar HTML
Belajar HTML
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 
Apa itu html
Apa itu htmlApa itu html
Apa itu html
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
 

More from Nie Andini

Caramudahbuatpeta blogspot com
Caramudahbuatpeta blogspot comCaramudahbuatpeta blogspot com
Caramudahbuatpeta blogspot comNie Andini
 
Orangstres7101 blogspot com
Orangstres7101 blogspot comOrangstres7101 blogspot com
Orangstres7101 blogspot com
Nie Andini
 
Microsoft word surat tugas
Microsoft word   surat tugasMicrosoft word   surat tugas
Microsoft word surat tugasNie Andini
 
Microsoft word proposal game battle ship online 1 3
Microsoft word   proposal game battle ship online 1 3Microsoft word   proposal game battle ship online 1 3
Microsoft word proposal game battle ship online 1 3Nie Andini
 
Mengenal office 2010 bab i
Mengenal office 2010 bab iMengenal office 2010 bab i
Mengenal office 2010 bab i
Nie Andini
 
Microsoft word daftar pustaka proposal 1
Microsoft word   daftar pustaka proposal 1Microsoft word   daftar pustaka proposal 1
Microsoft word daftar pustaka proposal 1
Nie Andini
 
Microsoft word bab 1 tahap 1 5
Microsoft word   bab 1 tahap 1 5Microsoft word   bab 1 tahap 1 5
Microsoft word bab 1 tahap 1 5
Nie Andini
 
Mengenal ms word 20070k
Mengenal ms word 20070kMengenal ms word 20070k
Mengenal ms word 20070k
Nie Andini
 
Mengenal ms word 20070k
Mengenal ms word 20070kMengenal ms word 20070k
Mengenal ms word 20070k
Nie Andini
 
Mengenal ms word 2007
Mengenal ms word 2007Mengenal ms word 2007
Mengenal ms word 2007
Nie Andini
 
Makalah sistem komputer
Makalah sistem komputerMakalah sistem komputer
Makalah sistem komputer
Nie Andini
 
Format bos 08 daftar siswa dan siswa miskin 2011 sd jabong
Format bos 08 daftar siswa dan siswa miskin 2011 sd jabongFormat bos 08 daftar siswa dan siswa miskin 2011 sd jabong
Format bos 08 daftar siswa dan siswa miskin 2011 sd jabong
Nie Andini
 
Doa setelah solat tajar
Doa setelah solat tajarDoa setelah solat tajar
Doa setelah solat tajarNie Andini
 
Desain panitia wisuda 2011
Desain panitia wisuda 2011Desain panitia wisuda 2011
Desain panitia wisuda 2011Nie Andini
 
Data siswa sdn jabong 2011
Data siswa sdn jabong 2011Data siswa sdn jabong 2011
Data siswa sdn jabong 2011Nie Andini
 
Microsoft word lembar pengesahan proposal tugas akhir 2
Microsoft word   lembar pengesahan proposal tugas akhir 2Microsoft word   lembar pengesahan proposal tugas akhir 2
Microsoft word lembar pengesahan proposal tugas akhir 2
Nie Andini
 
Tutorial create setup installer
Tutorial create setup installerTutorial create setup installer
Tutorial create setup installerNie Andini
 
Undangan rapat isra mi'raj rw 02
Undangan rapat isra mi'raj  rw 02Undangan rapat isra mi'raj  rw 02
Undangan rapat isra mi'raj rw 02Nie Andini
 
Sk karang-taruna bhakti mandiri 02
Sk karang-taruna bhakti mandiri 02Sk karang-taruna bhakti mandiri 02
Sk karang-taruna bhakti mandiri 02
Nie Andini
 
Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02
Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02
Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02
Nie Andini
 

More from Nie Andini (20)

Caramudahbuatpeta blogspot com
Caramudahbuatpeta blogspot comCaramudahbuatpeta blogspot com
Caramudahbuatpeta blogspot com
 
Orangstres7101 blogspot com
Orangstres7101 blogspot comOrangstres7101 blogspot com
Orangstres7101 blogspot com
 
Microsoft word surat tugas
Microsoft word   surat tugasMicrosoft word   surat tugas
Microsoft word surat tugas
 
Microsoft word proposal game battle ship online 1 3
Microsoft word   proposal game battle ship online 1 3Microsoft word   proposal game battle ship online 1 3
Microsoft word proposal game battle ship online 1 3
 
Mengenal office 2010 bab i
Mengenal office 2010 bab iMengenal office 2010 bab i
Mengenal office 2010 bab i
 
Microsoft word daftar pustaka proposal 1
Microsoft word   daftar pustaka proposal 1Microsoft word   daftar pustaka proposal 1
Microsoft word daftar pustaka proposal 1
 
Microsoft word bab 1 tahap 1 5
Microsoft word   bab 1 tahap 1 5Microsoft word   bab 1 tahap 1 5
Microsoft word bab 1 tahap 1 5
 
Mengenal ms word 20070k
Mengenal ms word 20070kMengenal ms word 20070k
Mengenal ms word 20070k
 
Mengenal ms word 20070k
Mengenal ms word 20070kMengenal ms word 20070k
Mengenal ms word 20070k
 
Mengenal ms word 2007
Mengenal ms word 2007Mengenal ms word 2007
Mengenal ms word 2007
 
Makalah sistem komputer
Makalah sistem komputerMakalah sistem komputer
Makalah sistem komputer
 
Format bos 08 daftar siswa dan siswa miskin 2011 sd jabong
Format bos 08 daftar siswa dan siswa miskin 2011 sd jabongFormat bos 08 daftar siswa dan siswa miskin 2011 sd jabong
Format bos 08 daftar siswa dan siswa miskin 2011 sd jabong
 
Doa setelah solat tajar
Doa setelah solat tajarDoa setelah solat tajar
Doa setelah solat tajar
 
Desain panitia wisuda 2011
Desain panitia wisuda 2011Desain panitia wisuda 2011
Desain panitia wisuda 2011
 
Data siswa sdn jabong 2011
Data siswa sdn jabong 2011Data siswa sdn jabong 2011
Data siswa sdn jabong 2011
 
Microsoft word lembar pengesahan proposal tugas akhir 2
Microsoft word   lembar pengesahan proposal tugas akhir 2Microsoft word   lembar pengesahan proposal tugas akhir 2
Microsoft word lembar pengesahan proposal tugas akhir 2
 
Tutorial create setup installer
Tutorial create setup installerTutorial create setup installer
Tutorial create setup installer
 
Undangan rapat isra mi'raj rw 02
Undangan rapat isra mi'raj  rw 02Undangan rapat isra mi'raj  rw 02
Undangan rapat isra mi'raj rw 02
 
Sk karang-taruna bhakti mandiri 02
Sk karang-taruna bhakti mandiri 02Sk karang-taruna bhakti mandiri 02
Sk karang-taruna bhakti mandiri 02
 
Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02
Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02
Anggaran rumah tangga KARANG TARUNA BHAKTI MANDIRI 02
 

Belajar membuat website

  • 1. BELAJAR Membuat WEBSITE - Basic HTML Publish: 20 Desember 2010 | Author & Copyright: Johan | Status: FREE tutorial 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
  • 2. - 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>
  • 3. </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.
  • 4. </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.
  • 5. </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 ^_^/
  • 6. </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 ^_^/