Belajar membuat website

29
BELAJAR MEMBUAT WEBSITE Dengan HTML

Transcript of Belajar membuat website

Page 1: Belajar membuat website

BELAJAR MEMBUAT WEBSITE

Dengan HTML

Page 2: Belajar membuat website

• Seiring dengan pertambahan jumlah netter (pengguna internet) di seluruh dunia, termasuk di Indonesia, makin banyak pula orang yang ingin mempunyai homepage atauwebsite sendiri.

• Hal ini wajar mengingat manfaat yang bisakita dapatkan dengan mempunyai website sendiri.

Page 3: Belajar membuat website

Bagaimana caranya bisa menampilkan website sendiri di internet?

• Yang Harus diperhatikan dalam membuatwebsitet :

– Website yang dari segi perwajahan tidak"menyedihkan“

– dari segi isi tidak "asal-asalan“

– dan dari segi pengunjung cukup "dilirik"

Page 4: Belajar membuat website

Untuk membuat sebuah website :• pertama-tama kita harus belajar bahasa HTML yaitu

sebuah "bahasa program" yang memungkinkan kitamembuat halaman web yang bisa ditampilkan dalambrowser (Internet Explorer, Netscape, Opera, dll).

• Setelah kita menguasai dasar-dasar HTML, barulah kitamencoba membuat rencana dan rancangan dari desaindan isi website yang hendak kita buat.

• Kemudian rancangan itu kita tuangkan dalam bentukhalaman-halaman web yang terpadu.

• Setelah selesai atau "mengarah ke selesai", kita harusmendaftarkannya ke web hosting agar website kita"terpasang" dan dapat diakses di internet.

• Akhirnya, yang juga tidak kalah penting adalah bagaimanamempromosikan website tersebut agar dikenal dandikunjungi oleh para netter.

Page 5: Belajar membuat website

HTML (Hypertext Markup Language)bahasa program yang digunakan untuk menulis formatdokumen yang dapat digunakan dalam Web.

Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu yang disebut taguntuk menjadi dokumen HTML (file *.htm atau *.html)

Oleh karena itu, untuk membuat dokumen HTML, andabisa menggunakan semua program teks editor biasa,mulai dari Notepad hingga MS Word.

Untuk mudahnya, kita gunakan program Notepad

Page 6: Belajar membuat website

• Meskipun anda bisa saja membuat web page(halaman web) tanpa mengerti sedikitpunHTML

• Yakni dengan menggunakan editor HTMLberjenis WYSIWYG (What You See Is WhatYou Get / Apa Yang Anda Lihat Adalah ApaYang Anda Dapatkan) seperti MicrosoftFrontPage, Dream Weaper, Webpage Maker,Joomla, dll

• Namun sangat disarankan bahkan nyarisdiharuskan, agar anda mengerti bahasa HTML.

Page 7: Belajar membuat website

Langkah-langkah menampilkan Editor program

1. Klik Start 2. Programs3. Accessories4. Notepad

Page 8: Belajar membuat website
Page 9: Belajar membuat website

PENGENALAN KODE HTML

Dalam program Notepad anda, tulislah sepertiini:

<HTML>

</HTML>

Page 10: Belajar membuat website

• 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) didepan awal tulisannya.

• Tag-tag html dapat ditulis dengan huruf besarataupun huruf kecil

• Artinya, penulisan <HTML> atau <html> atau<Html> sama saja hasilnya.

Page 11: Belajar membuat website

Membuat Website sederhana:

<HTML>

<BODY>

Belajar Membuat Web Site

…………………………… Isi dari pada

…………………………….. Website

……………………………..

</BODY>

</HTML>

Page 12: Belajar membuat website

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 SaveCatatan :

Kalau anda menyimpan pertama sekali dengan .HTMLmaka gunakan .HTML untuk seluruh File Anda Tetapikalau anda menyimpan dengan .HTM maka gunakan.HTM untuk seluruh file anda

Page 13: Belajar membuat website

Menampilkan Hasil website

• Buka salah satu browser yang ada di komputeranda 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

Page 14: Belajar membuat website
Page 15: Belajar membuat website

Apakah tag BODY fungsinya sekedar penandatubuh atau isi dari dokumen web?

Tidak, dalam tag BODY ini bisa kitasisipkan bermacam-macam atribut yang akan berpengaruh terhadap format atautampilan halaman web secara keseluruhan.

Pada kesempatan ini kita mengambil contohbagaimana mengubah warna latar belakangdan warna tulisan dari halaman web denganpenambahan atribut ke dalam tag BODY.

Page 16: Belajar membuat website

Memberi Warna Background

<HTML>

<BODY BGCOLOR=“Black”>

<FONT COLOR="blue">Tulisan warnabiru</FONT>

<FONT COLOR="red">Background berwarnaHitam</FONT>,

</BODY>

</HTML>

Page 17: Belajar membuat website

Perlu diketahui bahwa penentuan warna padaHTML bisa dengan nama warna (dalam bahasaInggris) dan bisa pula dengan kode warna.Kode warna ditulis dalam format heksa.Berikut ini adalah 16 nama warna beserta kodenyadalam format heksa (harap diingat bahwa tulisan 0adalah 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

Page 18: Belajar membuat website

<HTML>

<BODY BGCOLOR="#FFFF00" TEXT="#FF0000">

Belajar Membuat Web Site

</BODY>

</HTML>

Page 19: Belajar membuat website

Membuat Judul Website

• Di sini terlihat bahwa kita menambah tag <HEAD> dan tag <TITLE>.

• Tag HEAD berfungsi untuk mengapit berbagaimacam fungsi dan informasi yang berkenandengan 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:

Page 20: Belajar membuat website

<HTML>

<HEAD>

<TITLE>WebSite Aku Yang Pertama</TITLE>

</HEAD>

<BODY BGCOLOR="yellow" TEXT="red">

Belajar Membuat Web Site

</BODY>

</HTML>

Page 21: Belajar membuat website

MENGUTAK-ATIK HURUF

• Dalam latihan kedua ini, kita akan mempelajaribeberapa tag yang relatif mudah diingat.

• Tag-tag ini berfungsi untuk mengubah tipehuruf yaitu menebalkan (bold) <B>

• membuat tulisan miring (italic) <i>

• atau memberi garis bawah (underline) <U>

• Bahkan bisa pula ketiga tipe tulisan tersebutsekaligus bergabung menjadi satu berupa tulisantebal, miring dan bergaris bawah.

Page 22: Belajar membuat website

• Kesimpulannya, penekanan tombol Enter tidakmenghasilkan baris dalam tampilan browser.

• Demikianlah sifat penulisan dokumenHTML. Lantas, bagaimana caranya membuatbaris

Page 23: Belajar membuat website

• Gunakanlah tag <BR>. Tag ini tidakmempunyai tag penutup.

• Tag <BR> tersebut dapat pula digunakan untukmembuat baris kosong, artinya baris yangtidak mempunyai kalimat apa-apa.

• Di sini kita lihat bahwa tag <BR> yang ditulisdua kali akan menghasilkan dua baris,demikian seterusnya.

Page 24: Belajar membuat website

VARIASI FONT• Tanpa campur tangan kita, dokumen HTML

menggunakan font default dari Windows(Sistem Operasi Komputer) atau browser(Internet Explorer), biasanya Times NewRoman dengan ukuran 12 point.

• Kita bisa mengubah jenis, warna dan ukuranfont sesuai dengan selera kita menggunakantag <FONT> diikut dengan atribut-atributnya.

Page 25: Belajar membuat website

Atribut COLOR

<HTML>

<BODY>

<FONT COLOR="blue">Tulisan warna biru</FONT>,

<FONT COLOR="red">Tulisan warnamerah</FONT>,

<FONT COLOR="yellow">Tulisan warnakuning</FONT>

</BODY>

</HTML>

Page 26: Belajar membuat website

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>

Page 27: Belajar membuat website

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>

Page 28: Belajar membuat website

TUGAS AKHIR

HOME BIODATA TUTORIAL TIP & TRIK CERITA

1. Memasukkan Video Dari Youtube Ke Website

2. TIK3. Mulok4. Budidaya Tanaman………10. Dll

1. TIK……………………..10. DLL

1………2………3………4………5………

DIKUMPUL PALING LAMBAT TANGGAL 31MEI 2014 JAM 12.00 WIB

Page 29: Belajar membuat website

URL Dapat Dikirim Ke

E-mail : [email protected]

FB : [email protected]

Pin BB : 75576FC2

SMS : 0813 65 780574

JANGAN LUPA NAMA DAN KELAS ANDA