SlideShare a Scribd company logo
BELAJAR MEMBUAT WEBSITE 
Dengan HTML
• Seiring dengan pertambahan jumlah netter 
(pengguna internet) di seluruh dunia, 
termasuk di Indonesia, makin banyak pula 
orang yang ingin mempunyai homepage atau 
website sendiri. 
• Hal ini wajar mengingat manfaat yang bisa 
kita dapatkan dengan mempunyai website 
sendiri.
Bagaimana caranya bisa menampilkan 
website sendiri di internet? 
• Yang Harus diperhatikan dalam membuat 
websitet : 
– Website yang dari segi perwajahan tidak 
"menyedihkan“ 
– dari segi isi tidak "asal-asalan“ 
– dan dari segi pengunjung cukup "dilirik"
Untuk membuat sebuah website : 
• pertama-tama kita harus belajar bahasa HTML yaitu 
sebuah "bahasa program" yang memungkinkan kita 
membuat halaman web yang bisa ditampilkan dalam 
browser (Internet Explorer, Netscape, Opera, dll). 
• Setelah kita menguasai dasar-dasar HTML, barulah kita 
mencoba membuat rencana dan rancangan dari desain 
dan isi website yang hendak kita buat. 
• Kemudian rancangan itu kita tuangkan dalam bentuk 
halaman-halaman web yang terpadu. 
• Setelah selesai atau "mengarah ke selesai", kita harus 
mendaftarkannya ke web hosting agar website kita 
"terpasang" dan dapat diakses di internet. 
• Akhirnya, yang juga tidak kalah penting adalah bagaimana 
mempromosikan website tersebut agar dikenal dan 
dikunjungi oleh para netter.
HTML (Hypertext Markup Language) 
bahasa program yang digunakan untuk menulis format 
dokumen yang dapat digunakan dalamWeb. 
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 MS Word. 
Untuk mudahnya, kita gunakan program Notepad
• Meskipun anda bisa saja membuat web page 
(halaman web) tanpa mengerti sedikitpun 
HTML 
• Yakni dengan menggunakan editor HTML 
berjenis WYSIWYG (What You See Is What 
You Get / Apa Yang Anda Lihat Adalah Apa 
Yang Anda Dapatkan) seperti Microsoft 
FrontPage, Dream Weaper, Webpage Maker, 
Joomla, dll 
• Namun sangat disarankan bahkan nyaris 
diharuskan, agar anda mengerti bahasa HTML.
Langkah-langkah menampilkan Editor program 
1. Klik Start 
2. Programs 
3. Accessories 
4. Notepad
PENGENALAN KODE HTML 
Dalam program Notepad anda, tulislah seperti 
ini: 
<HTML> 
</HTML>
• 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-tag html dapat ditulis dengan huruf besar 
ataupun huruf kecil 
• Artinya, penulisan <HTML> atau <html> atau 
<Html> sama saja hasilnya.
Membuat Website sederhana: 
<HTML> 
<BODY> 
Belajar Membuat Web Site 
…………………………… Isi dari pada 
…………………………….. Website 
…………………………….. 
</BODY> 
</HTML>
Menyimpan File HTML 
• Sekarang simpanlah file ini dengan meng-klik menu File 
lalu Save 
• Tentukan Folder tempat penyimpanan data anda. 
• Pada kotak File Name : Buatlah nama file yang akan 
disimpan 
• Contoh : COBA.HTML atau COBA.HTM 
• Lalu klik Tombol Save 
Catatan : 
Kalau anda menyimpan pertama sekali dengan .HTML 
maka gunakan .HTML untuk seluruh File Anda Tetapi 
kalau anda menyimpan dengan .HTM maka gunakan 
.HTM untuk seluruh file anda
Menampilkan Hasil website 
• Buka salah satu browser yang ada di komputer 
anda apakah Internet Explorer, Mozilla, 
Crome, Opera, DLL 
• Kemudian klik File Open 
• Cari dimana menyimpan file html tadi, 
kemudian klik file tersebut 
• Lalu ok 
• Atau anda bisa membuka memalui windows 
explorer cari filenya, kemudian double klik
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.
MemberiWarna Background 
<HTML> 
<BODY BGCOLOR=“Black”> 
<FONT COLOR="blue">Tulisan warna 
biru</FONT> 
<FONT COLOR="red">Background berwarna 
Hitam</FONT>, 
</BODY> 
</HTML>
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. 
Berikut ini adalah 16 nama warna beserta kodenya 
dalam format heksa (harap diingat bahwa tulisan 0 
adalah angka nol, bukan huruf O). 
black #000000 blue #0000FF olive #808000 
white #FFFFFF fuchsia #FF00FF green #008000 
red #FF0000 gray #808080 teal #008080 
yellow #FFFF00 silver #C0C0C0 navy #000080 
lime #00FF00 maroon #800000 purple #800080 
aqua #00FFFF
<HTML> 
<BODY BGCOLOR="#FFFF00" TEXT="#FF0000"> 
Belajar Membuat Web Site 
</BODY> 
</HTML>
Membuat Judul Website 
• Di sini terlihat bahwa kita menambah 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 Aku Yang Pertama</TITLE> 
</HEAD> 
<BODY BGCOLOR="yellow" TEXT="red"> 
Belajar Membuat Web Site 
</BODY> 
</HTML>
MENGUTAK-ATIK HURUF 
• Dalam latihan kedua ini, kita akan mempelajari 
beberapa tag yang relatif mudah diingat. 
• Tag-tag ini berfungsi untuk mengubah tipe 
huruf yaitu menebalkan (bold) <B> 
• membuat tulisan miring (italic) <i> 
• atau memberi garis bawah (underline) <U> 
• Bahkan bisa pula ketiga tipe tulisan tersebut 
sekaligus bergabung menjadi satu berupa tulisan 
tebal, miring dan bergaris bawah.
• Kesimpulannya, penekanan tombol Enter tidak 
menghasilkan baris dalam tampilan browser. 
• Demikianlah sifat penulisan dokumen 
HTML. Lantas, bagaimana caranya membuat 
baris
• Gunakanlah tag <BR>. Tag ini tidak 
mempunyai tag penutup. 
• Tag <BR> tersebut dapat pula digunakan untuk 
membuat baris kosong, artinya baris yang 
tidak mempunyai kalimat apa-apa. 
• Di sini kita lihat bahwa tag <BR> yang ditulis 
dua kali akan menghasilkan dua baris, 
demikian seterusnya.
VARIASI FONT 
• Tanpa campur tangan kita, dokumen HTML 
menggunakan font default dari Windows 
(Sistem Operasi Komputer) atau browser 
(Internet Explorer), biasanya Times New 
Roman dengan ukuran 12 point. 
• Kita bisa mengubah jenis, warna dan ukuran 
font sesuai dengan selera kita menggunakan 
tag <FONT> diikut dengan atribut-atributnya.
Atribut COLOR 
<HTML> 
<BODY> 
<FONT COLOR="blue">Tulisan warna biru</FONT>, 
<FONT COLOR="red">Tulisan warna 
merah</FONT>, 
<FONT COLOR="yellow">Tulisan warna 
kuning</FONT> 
</BODY> 
</HTML>
Atribut SIZE 
<HTML> 
<BODY> 
<FONT SIZE="1">Font Size 1</FONT>, 
<FONT SIZE="2">Font Size 2</FONT>, 
<FONT SIZE="3">Font Size 3</FONT>, 
<FONT SIZE="4">Font Size 4</FONT>, 
<FONT SIZE="5">Font Size 5</FONT>, 
<FONT SIZE="6">Font Size 6</FONT>, 
<FONT SIZE="7">Font Size 7</FONT> 
</BODY> 
</HTML>
Atribut FACE 
<HTML> 
<BODY> 
Ini adalah font <FONT 
FACE="Arial">Arial</FONT>, 
ini adalah font <FONT 
FACE="Verdana">Verdana</FONT>, 
dan ini adalah font <FONT 
FACE="Impact">Impact</FONT> 
</BODY> 
</HTML>
TUGAS AKHIR 
HOME BIODATA TUTORIAL TIP & TRIK CERITA 
1. Memasukkan Video Dari 
Youtube Ke Website 
2. TIK 
3. Mulok 
4. Budidaya Tanaman 
……… 
10. Dll 
1. TIK 
……… 
……… 
…….. 
10. DLL 
1……… 
2……… 
3……… 
4……… 
5……… 
DIKUMPUL PALING 
LAMBAT TANGGAL 
31MEI 2014 
JAM 12.00 WIB
URL Dapat Dikirim Ke 
E-mail : yudiavis@yahoo.com 
FB : yudiavis@yahoo.com 
Pin BB : 75576FC2 
SMS : 0813 65 780574 
JANGAN LUPA NAMA DAN KELAS ANDA

More Related Content

What's hot

Modul html
Modul htmlModul html
Modul html
Afwan Rusli
 
Belajar html
Belajar htmlBelajar html
Belajar html
Akhirnp
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
Samsuri14
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
rahmantaufik00
 
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
 
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
 
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
 
Bahan ajar html 1
Bahan ajar html 1Bahan ajar html 1
Bahan ajar html 1
Uji Wardoyo
 
Html power point
Html power pointHtml power point
Html power point
minmon
 
Belajar html untuk pemula 1
Belajar html untuk pemula 1Belajar html untuk pemula 1
Belajar html untuk pemula 1
Ridwan Ajjh
 
Pengantar html
Pengantar htmlPengantar html
Pengantar html
DevraNurEkaKusuma
 
Belajar php
Belajar phpBelajar php
Belajar php
Albertz Ace-Red
 
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
 
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
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
Fajar Baskoro
 

What's hot (16)

Pertemuan1
Pertemuan1Pertemuan1
Pertemuan1
 
Modul html
Modul htmlModul html
Modul html
 
Belajar html
Belajar htmlBelajar html
Belajar html
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
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
 
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
 
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
 
Bahan ajar html 1
Bahan ajar html 1Bahan ajar html 1
Bahan ajar html 1
 
Html power point
Html power pointHtml power point
Html power point
 
Belajar html untuk pemula 1
Belajar html untuk pemula 1Belajar html untuk pemula 1
Belajar html untuk pemula 1
 
Pengantar html
Pengantar htmlPengantar html
Pengantar html
 
Belajar php
Belajar phpBelajar php
Belajar php
 
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)
 
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 )
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 

Viewers also liked

Cara membuat Blog
Cara membuat BlogCara membuat Blog
Cara membuat Blog
Aziz Abdul
 
Membuat Website Itu Gampang
Membuat Website Itu GampangMembuat Website Itu Gampang
Membuat Website Itu Gampang
Penggalih Herlambang
 
Bisnis sitekno
Bisnis siteknoBisnis sitekno
Bisnis siteknoproyass
 
Belajar hacking-website-d
Belajar hacking-website-dBelajar hacking-website-d
Belajar hacking-website-dAde Tamin
 

Viewers also liked (6)

tutorial membuat website
tutorial membuat websitetutorial membuat website
tutorial membuat website
 
Cara membuat Blog
Cara membuat BlogCara membuat Blog
Cara membuat Blog
 
Membuat Website Itu Gampang
Membuat Website Itu GampangMembuat Website Itu Gampang
Membuat Website Itu Gampang
 
Diare
DiareDiare
Diare
 
Bisnis sitekno
Bisnis siteknoBisnis sitekno
Bisnis sitekno
 
Belajar hacking-website-d
Belajar hacking-website-dBelajar hacking-website-d
Belajar hacking-website-d
 

Similar to Belajar membuat website

Modul html
Modul htmlModul html
Modul html
Fikri Pandoez
 
Modul html
Modul htmlModul html
Modul html
adealfarisi
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
Hamdani Nurdin
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
Desma_susanti
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1eghha
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
RizkyRamdan2
 
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
 
Proyek web
Proyek webProyek web
Proyek web
Novita J Akerina
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
vicky alhuda
 
storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptx
FileArsip
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
Nepriant Juragantv
 
Materi2-Struktur Dasar HTML.pdf
Materi2-Struktur Dasar HTML.pdfMateri2-Struktur Dasar HTML.pdf
Materi2-Struktur Dasar HTML.pdf
Sulhandrive
 
Modul web programing
Modul web programingModul web programing
Modul web programing
Nepriant Juragantv
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 

Similar to Belajar membuat website (20)

Modul html
Modul htmlModul html
Modul html
 
Modul html
Modul htmlModul html
Modul html
 
Modul html
Modul htmlModul html
Modul html
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
 
Tutorial web programing x rpl 1
Tutorial web programing x rpl 1Tutorial web programing x rpl 1
Tutorial web programing x rpl 1
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
 
Web
WebWeb
Web
 
Web disain
Web disainWeb disain
Web disain
 
Belajar php
Belajar phpBelajar php
Belajar php
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
Html dan php
Html dan phpHtml dan php
Html dan php
 
Proyek web
Proyek webProyek web
Proyek web
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 
storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptx
 
Modul html
Modul htmlModul html
Modul html
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 
Materi2-Struktur Dasar HTML.pdf
Materi2-Struktur Dasar HTML.pdfMateri2-Struktur Dasar HTML.pdf
Materi2-Struktur Dasar HTML.pdf
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 

More from Nadya Olivia

Video editing@
Video editing@Video editing@
Video editing@
Nadya Olivia
 
Materi ke 4
Materi ke 4Materi ke 4
Materi ke 4
Nadya Olivia
 
Belajar membuat website 2
Belajar membuat website 2Belajar membuat website 2
Belajar membuat website 2
Nadya Olivia
 
Bahasa pemrograman pascal
Bahasa pemrograman pascalBahasa pemrograman pascal
Bahasa pemrograman pascal
Nadya Olivia
 
Pengenalan pascal asli
Pengenalan pascal asliPengenalan pascal asli
Pengenalan pascal asli
Nadya Olivia
 
Casing
CasingCasing
Casing
Nadya Olivia
 
Pengenalan komputer mulok
Pengenalan komputer mulokPengenalan komputer mulok
Pengenalan komputer mulok
Nadya Olivia
 
Sistem bilangan4
Sistem bilangan4Sistem bilangan4
Sistem bilangan4
Nadya Olivia
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
Nadya Olivia
 
Sistem bilangan
Sistem bilanganSistem bilangan
Sistem bilangan
Nadya Olivia
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
Nadya Olivia
 

More from Nadya Olivia (18)

Video editing@
Video editing@Video editing@
Video editing@
 
Frontpage
FrontpageFrontpage
Frontpage
 
Frontpage
FrontpageFrontpage
Frontpage
 
Materi ke 4
Materi ke 4Materi ke 4
Materi ke 4
 
Materi html ke 3
Materi html ke 3Materi html ke 3
Materi html ke 3
 
Belajar membuat website 2
Belajar membuat website 2Belajar membuat website 2
Belajar membuat website 2
 
Bahasa pemrograman pascal
Bahasa pemrograman pascalBahasa pemrograman pascal
Bahasa pemrograman pascal
 
Pengenalan pascal asli
Pengenalan pascal asliPengenalan pascal asli
Pengenalan pascal asli
 
jaringan komputer
jaringan komputerjaringan komputer
jaringan komputer
 
Jaringan komputer
Jaringan komputerJaringan komputer
Jaringan komputer
 
Jaringan komputer
Jaringan komputerJaringan komputer
Jaringan komputer
 
Casing
CasingCasing
Casing
 
Pengenalan komputer mulok
Pengenalan komputer mulokPengenalan komputer mulok
Pengenalan komputer mulok
 
Sistem bilangan4
Sistem bilangan4Sistem bilangan4
Sistem bilangan4
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
 
Sistem bilangan
Sistem bilanganSistem bilangan
Sistem bilangan
 
Sistem bilangan2
Sistem bilangan2Sistem bilangan2
Sistem bilangan2
 
Sistem bilangan
Sistem bilanganSistem bilangan
Sistem bilangan
 

Belajar membuat website

  • 2. • Seiring dengan pertambahan jumlah netter (pengguna internet) di seluruh dunia, termasuk di Indonesia, makin banyak pula orang yang ingin mempunyai homepage atau website sendiri. • Hal ini wajar mengingat manfaat yang bisa kita dapatkan dengan mempunyai website sendiri.
  • 3. Bagaimana caranya bisa menampilkan website sendiri di internet? • Yang Harus diperhatikan dalam membuat websitet : – Website yang dari segi perwajahan tidak "menyedihkan“ – dari segi isi tidak "asal-asalan“ – dan dari segi pengunjung cukup "dilirik"
  • 4. Untuk membuat sebuah website : • pertama-tama kita harus belajar bahasa HTML yaitu sebuah "bahasa program" yang memungkinkan kita membuat halaman web yang bisa ditampilkan dalam browser (Internet Explorer, Netscape, Opera, dll). • Setelah kita menguasai dasar-dasar HTML, barulah kita mencoba membuat rencana dan rancangan dari desain dan isi website yang hendak kita buat. • Kemudian rancangan itu kita tuangkan dalam bentuk halaman-halaman web yang terpadu. • Setelah selesai atau "mengarah ke selesai", kita harus mendaftarkannya ke web hosting agar website kita "terpasang" dan dapat diakses di internet. • Akhirnya, yang juga tidak kalah penting adalah bagaimana mempromosikan website tersebut agar dikenal dan dikunjungi oleh para netter.
  • 5. HTML (Hypertext Markup Language) bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan dalamWeb. 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 MS Word. Untuk mudahnya, kita gunakan program Notepad
  • 6. • Meskipun anda bisa saja membuat web page (halaman web) tanpa mengerti sedikitpun HTML • Yakni dengan menggunakan editor HTML berjenis WYSIWYG (What You See Is What You Get / Apa Yang Anda Lihat Adalah Apa Yang Anda Dapatkan) seperti Microsoft FrontPage, Dream Weaper, Webpage Maker, Joomla, dll • Namun sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML.
  • 7. Langkah-langkah menampilkan Editor program 1. Klik Start 2. Programs 3. Accessories 4. Notepad
  • 8.
  • 9. PENGENALAN KODE HTML Dalam program Notepad anda, tulislah seperti ini: <HTML> </HTML>
  • 10. • 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-tag html dapat ditulis dengan huruf besar ataupun huruf kecil • Artinya, penulisan <HTML> atau <html> atau <Html> sama saja hasilnya.
  • 11. Membuat Website sederhana: <HTML> <BODY> Belajar Membuat Web Site …………………………… Isi dari pada …………………………….. Website …………………………….. </BODY> </HTML>
  • 12. Menyimpan File HTML • Sekarang simpanlah file ini dengan meng-klik menu File lalu Save • Tentukan Folder tempat penyimpanan data anda. • Pada kotak File Name : Buatlah nama file yang akan disimpan • Contoh : COBA.HTML atau COBA.HTM • Lalu klik Tombol Save Catatan : Kalau anda menyimpan pertama sekali dengan .HTML maka gunakan .HTML untuk seluruh File Anda Tetapi kalau anda menyimpan dengan .HTM maka gunakan .HTM untuk seluruh file anda
  • 13. Menampilkan Hasil website • Buka salah satu browser yang ada di komputer anda apakah Internet Explorer, Mozilla, Crome, Opera, DLL • Kemudian klik File Open • Cari dimana menyimpan file html tadi, kemudian klik file tersebut • Lalu ok • Atau anda bisa membuka memalui windows explorer cari filenya, kemudian double klik
  • 14.
  • 15. 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.
  • 16. MemberiWarna Background <HTML> <BODY BGCOLOR=“Black”> <FONT COLOR="blue">Tulisan warna biru</FONT> <FONT COLOR="red">Background berwarna Hitam</FONT>, </BODY> </HTML>
  • 17. 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. Berikut ini adalah 16 nama warna beserta kodenya dalam format heksa (harap diingat bahwa tulisan 0 adalah angka nol, bukan huruf O). black #000000 blue #0000FF olive #808000 white #FFFFFF fuchsia #FF00FF green #008000 red #FF0000 gray #808080 teal #008080 yellow #FFFF00 silver #C0C0C0 navy #000080 lime #00FF00 maroon #800000 purple #800080 aqua #00FFFF
  • 18. <HTML> <BODY BGCOLOR="#FFFF00" TEXT="#FF0000"> Belajar Membuat Web Site </BODY> </HTML>
  • 19. Membuat Judul Website • Di sini terlihat bahwa kita menambah 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:
  • 20. <HTML> <HEAD> <TITLE>WebSite Aku Yang Pertama</TITLE> </HEAD> <BODY BGCOLOR="yellow" TEXT="red"> Belajar Membuat Web Site </BODY> </HTML>
  • 21. MENGUTAK-ATIK HURUF • Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif mudah diingat. • Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold) <B> • membuat tulisan miring (italic) <i> • atau memberi garis bawah (underline) <U> • Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.
  • 22. • Kesimpulannya, penekanan tombol Enter tidak menghasilkan baris dalam tampilan browser. • Demikianlah sifat penulisan dokumen HTML. Lantas, bagaimana caranya membuat baris
  • 23. • Gunakanlah tag <BR>. Tag ini tidak mempunyai tag penutup. • Tag <BR> tersebut dapat pula digunakan untuk membuat baris kosong, artinya baris yang tidak mempunyai kalimat apa-apa. • Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan menghasilkan dua baris, demikian seterusnya.
  • 24. VARIASI FONT • Tanpa campur tangan kita, dokumen HTML menggunakan font default dari Windows (Sistem Operasi Komputer) atau browser (Internet Explorer), biasanya Times New Roman dengan ukuran 12 point. • Kita bisa mengubah jenis, warna dan ukuran font sesuai dengan selera kita menggunakan tag <FONT> diikut dengan atribut-atributnya.
  • 25. Atribut COLOR <HTML> <BODY> <FONT COLOR="blue">Tulisan warna biru</FONT>, <FONT COLOR="red">Tulisan warna merah</FONT>, <FONT COLOR="yellow">Tulisan warna kuning</FONT> </BODY> </HTML>
  • 26. Atribut SIZE <HTML> <BODY> <FONT SIZE="1">Font Size 1</FONT>, <FONT SIZE="2">Font Size 2</FONT>, <FONT SIZE="3">Font Size 3</FONT>, <FONT SIZE="4">Font Size 4</FONT>, <FONT SIZE="5">Font Size 5</FONT>, <FONT SIZE="6">Font Size 6</FONT>, <FONT SIZE="7">Font Size 7</FONT> </BODY> </HTML>
  • 27. Atribut FACE <HTML> <BODY> Ini adalah font <FONT FACE="Arial">Arial</FONT>, ini adalah font <FONT FACE="Verdana">Verdana</FONT>, dan ini adalah font <FONT FACE="Impact">Impact</FONT> </BODY> </HTML>
  • 28. TUGAS AKHIR HOME BIODATA TUTORIAL TIP & TRIK CERITA 1. Memasukkan Video Dari Youtube Ke Website 2. TIK 3. Mulok 4. Budidaya Tanaman ……… 10. Dll 1. TIK ……… ……… …….. 10. DLL 1……… 2……… 3……… 4……… 5……… DIKUMPUL PALING LAMBAT TANGGAL 31MEI 2014 JAM 12.00 WIB
  • 29. URL Dapat Dikirim Ke E-mail : yudiavis@yahoo.com FB : yudiavis@yahoo.com Pin BB : 75576FC2 SMS : 0813 65 780574 JANGAN LUPA NAMA DAN KELAS ANDA