P E N G E N A L A N H T M L

Pertemuan 1
Web programming
Presented by :
Sity Aisyah Nasution, M.Kom
Email : dryesha@gmail.com
Blog : yeshasalsabila.blogspot.com

Sity Aisyah, S.Kom - PR183

1

P E N G E N A L A N

H T M L

Sity Aisyah, S.Kom - PR183

2

Sekarang ini, dunia semakin canggih semua serba komputer
semua serba Internet.

Sebenarnya, apa sih yang mereka
inginkan dari Internet itu?
 Saling mengirim email?

Sity Aisyah, S.Kom - PR183

3

 Melihat WebSite Orang Lain?

 Chatting?

RuGi KaLau HaNya SekeDar Untuk Itu....
Sity Aisyah, S.Kom - PR183

4

Apa ada hal lain yang lebih bermanfaat, menyenangkan
dan menambah wawasan dan keterampilan kita???

Coba lihat gambar 1.0, itu adalah sebuah Website, orang-orang juga sering
menyebutnya Homepage, Situs atau Site.

Gambar 1.0 Gambar sebuah contoh homepage
Sity Aisyah, S.Kom - PR183

5

Setelah kita melihat gambar tersebut,
kita juga pasti punya keinginan untuk
membuatnya dengan sebagus mungkin
agar orang lain tertarik melihat apa yang
kita buat.

Sity Aisyah, S.Kom - PR183

6

Sekarang masalahnya,
BAGAIMANA MEMBUATNYA???...

Cara belajar yang paling baik adalah dengan
mempelajari dulu dasar-dasar membuat website,
yaitu HTML.

Sity Aisyah, S.Kom - PR183

7

Apa HTML
itu
?
 HTML, kependekan dari
Hypertext Markup Language
 Komputer dapat berhubungan atau berkomunikasi antara
satu komputer dengan komputer lainnya menggunakan
Bahasa Komputer dan salah satunya adalah HTML.
 Ingat, HTML adalah bahasa komputer yaitu Bahasa
yang bisa dipahami oleh semua komputer, yang dipakai
di dunia www (World Wide Web) atau dunia internet.

Sity Aisyah, S.Kom - PR183

8

 Karena HTML merupakan sebuah bahasa, maka
HTML itu pasti bisa berbicara. Dan kalau
berbicara berarti bisa memberi perintah.
 Pada HTML , aturan memberi perintah adalah
kata perintah harus berada di dalam tanda
 Misalnya, kita memberi perintah “ Ayo belajar!”,
maka dalam HTML ditulis .

Sity Aisyah, S.Kom - PR183

9

 Perintah HTML digunakan untuk menampilkan
tampilan teks, gambar, dsb sesuai keinginan kita
dan juga menampilkan fungsi2 link tertentu,

misalnya fungsi link.
 Link adalah jika kita mengklik
kata/kalimat/gambar pada tampilan halaman
website tertentu, tiba-tiba muncul tampilan
halaman website lainnya

Sity Aisyah, S.Kom - PR183

10

Mengapa HTML dinamakan
Hypertext Markup Language??..
 Dinamakan Hypertext, karena kita bisa membaca isi
dari sebuah dokumen/berita tanpa harus membacanya
baris demi baris. Kita bisa melompat-lompat dengan
seenaknya dari satu topik ke topik lainnya.
 Dinamakan Markup Language karena HTML
mengandung tanda-tanda tertentu atau perintah-perintah
tertentu untuk menentukan tampilan teks,gambar, dsb
beserta fungsi-fungsi yang diinginkan.

Sity Aisyah, S.Kom - PR183

11

Contoh:
Indonesia Tanah Airku

 Perintah ini menyuruh agar tulisan Indonesia
Tanah Airku di cetak tebal ketika ditampilkan di
browser.
 Browser adalah sarana yang digunakan untuk
membuka website. Contoh: Internet explorer,
Netscape, Opera, Mozilla, dll.
 Lihat tanda , tanda itu merupakan tanda
penutup perintah.

Sity Aisyah, S.Kom - PR183

12

 Harus jelas perintah ini untuk siapa, sampai kapan,
sampai dimana.
 Untuk itu dan merupakan batas yang
mempertegas perintah itu berlaku untuk kalimat
Indonesia Tanah Airku.

Sity Aisyah, S.Kom - PR183

13

Jadi jelas bahwa HTML itu
memiliki perintah-perintah khusus
yang disebut ELEMEN, dan
elemen-elemen itu berada di
antara tag awal < dan tag akhir >

Sity Aisyah, S.Kom - PR183

14

Mengapa Memakai
HTML ???...
 Mengapa membuat website saja memakai HTML?
Apakah tidak ada cara lain, yang lebih mudah, cepat, dan
praktis?
 Memang ada software2 pembuat website tinggal pakai,
seperti Microsoft Frontpage, Microsoft Publisher,
Macromedia Dreamweaver, dll yang mana kita tinggal
klik sana klik sini,beres.
 Namun perlu diketahui bahwa :
Sity Aisyah, S.Kom - PR183

15

• HTML adalah dasar pembuatan website. Orang yang
bisa membuat website dengan M. Frontpage belum tentu
bisa membuat website dengan mengetikan perintah2
HTML-nya. Tetapi sebaliknya, orang yang sudah mahir
menggunakan perintah HTML akan dg mudah

mempelajari penggunaan M. Frontpage.
• Belajar HTML itu mudah sekali. Dan, tidak ada salahnya
jika kita berbuat sesuatu secara profesional & terlihat
canggih, meskipun kita adalah orang amatir.

Sity Aisyah, S.Kom - PR183

16

• Membuat website dengan mengetikkan perintah2 HTML
-nya dapat dilakukan dimana saja & kapan pun tanpa
bergantung pada jenis software tertentu.
• Cukup dg menggunakan fasilitas pengolah kata yang
paling sederhana seperti Notepad (pada windows) dan
Vi (pada Linux), kita bisa mendesain website.

Sity Aisyah, S.Kom - PR183

17

Apakah URL itu ???...
 URL (Uniform Resource Locator) yaitu sarana yang
digunakan untuk menentukan alamat yang dipakai ketika
kita mengakses Internet.
 Bentuk umum URL :
Protokol://NamaHost/Target

 Protokol yang biasa digunakan antara lain : http,
ftp,mailto, dan sebagainya.
 NamaHost merupakan nama host yang dipanggil atau
bisa juga berupa Internet protocol (IP),
contohnya :www.detik.com
Sity Aisyah, S.Kom - PR183

18

 Target adalah bagian yang menjadi tujuan link (nama file
tertentu yang dipanggil), contohnya : index.html
 Biasanya, index.html merupakan nama file standar yang
dipanggil di halaman paling muka. Misalnya, jika kita

memanggil http://www.detik.com, sesungguhnya yang kita
panggil adalah http://www.detik.com/index.html

Sity Aisyah, S.Kom - PR183

19

Protokol Transfer
Protokol Transfer adalah protokol yang digunakan untuk
pengiriman informasi di internet.
Macam-macam Protokol Transfer :
 HTTP (Hypertext Transfer protocol) : sebuah protokol
jaringan lapisan aplikasi yang digunakan untuk sistem
informasi terdistribusi, kolaboratif, dan menggunakan
hypermedia.
Hypermedia : Disebut juga Multimedia Hypertext. Merupakan sebuah
media yang tidak hanya memeuat text tetapi juga graphichs, sound dan
video.

 FTP (File Transfer Protocol) : Protokol ini dirancang
agar memungkinkan pemakai mentransfer file dalam
format teks atau biner dalam server computer di
internet.
Sity Aisyah, S.Kom - PR183

20

Protokol Transfer
 Gropher : Protokol ini dirancang untuk mengakses
server Gropher.
 News (Network News Transfer Protocol) : Protokol ini
digunakan untuk mendistribusikan berita Usenet.
Usenet adalah system yang dirancang sebagai forum
diskusi yang didasarkan pada topic – topic yang disebut
newsgroup.
 Telnet : Protokol ini digunakan untuk login ke suatu
server tertentu.

Sity Aisyah, S.Kom - PR183

21

Apa Saja yang dibutuhkan untuk
membuat Homepage ?
NOTEPAD

PROGRAM PEMBUAT
GAMBAR

BROWSER
Sity Aisyah, S.Kom - PR183

22

NOTEPAD
Notepad merupakan program pengolah teks yang amat
sederhana yang dimiliki oleh Windows.
Jika Anda bekerja pada
sistem operasi linux, unix,
maka anda dapat
menggunakan vi, pico
sebagai pengganti
Notepad.

Gambar 2.0 Notepad
Sity Aisyah, S.Kom - PR183

23

PROGRAM PEMBUAT
GAMBAR
o Di dalam homepage yang keren, Anda pasti tidak hanya
mengandalkan teks-teks saja sebagai tampilan. Namun
Anda pasti ingin menggunakan berbagai macam gambar
yang menarik perhatian.
o Untuk itu, Anda sangat membutuhkan program
pembuat/pengolah grafis seperti Adobe Photoshop,
Corel Draw.

Sity Aisyah, S.Kom - PR183

24

BROWSER
• Anda tahu Internet Explorer, Netscape, Opera, Mozilla?..
itu merupakan contoh-contoh browser.
• Browser digunakan untuk melihat bagaimana hasil
(tampilan homepage) dari program-program HTML yang
telah kita ketikkan di Notepad tadi.

Sity Aisyah, S.Kom - PR183

25

Apakah DNS itu ???...
 DNS (Domain Name System, bahasa Indonesia:
Sistem Penamaan Domain) adalah sebuah sistem
yang menyimpan informasi tentang nama host maupun
nama domain dalam bentuk basis data tersebar
(distributed database) di dalam jaringan komputer,
misalkan: Internet.
 DNS menyediakan alamat IP untuk setiap nama host dan
mendata setiap server transmisi surat (mail exchange
server) yang menerima surat elektronik (email) untuk
setiap domain.
Sity Aisyah, S.Kom - PR183

26

 DNS menyediakan servis yang cukup penting untuk
Internet, bilamana perangkat keras komputer dan
jaringan bekerja dengan alamat IP untuk mengerjakan
tugas seperti pengalamatan dan penjaluran (routing),
manusia pada umumnya lebih memilih untuk
menggunakan nama host dan nama domain, contohnya
adalah penunjukan sumber universal (URL) dan alamat
e-mail. DNS menghubungkan kebutuhan ini.
 Sebuah nama domain biasanya terdiri dari dua bagian
atau lebih (secara teknis disebut label), dipisahkan
dengan titik.

Sity Aisyah, S.Kom - PR183

27

 Label paling kanan menyatakan top-level domain domain tingkat atas/tinggi (misalkan, alamat
www.wikipedia.org memiliki top-level domain org).
 Setiap label di sebelah kirinya menyatakan sebuah subdivisi atau subdomain dari domain yang lebih tinggi.
Catatan: "subdomain" menyatakan ketergantungan
relatif, bukan absolut.
Contoh: wikipedia.org merupakan subdomain dari
domain org, dan id.wikipedia.org dapat membentuk
subdomain dari domain wikipedia.org (pada
prakteknya, id.wikipedia.org sesungguhnya mewakili
sebuah nama host.
Sity Aisyah, S.Kom - PR183

28

 Terakhir, bagian paling kiri dari bagian nama domain
(biasanya) menyatakan nama host. Sisa dari nama
domain menyatakan cara untuk membangun jalur logis
untuk informasi yang dibutuhkan;
 nama host adalah tujuan sebenarnya dari nama sistem
yang dicari alamat IP-nya. Contoh: nama domain
www.wikipedia.org memiliki nama host "www".

Sity Aisyah, S.Kom - PR183

29

Kerangka Dasar Homepage ?


*** Bagian dari HEAD ***



*** Bagian dari BODY ***



Sity Aisyah, S.Kom - PR183

30

 HTML terdiri atas beberapa bagian yang menyediakan
tempat untuk meletakkan perintah2 HTML di dalamnya.
Bagian inilah yang disebut elemen.
 Elemen2 tersebut antara lain : ...,
... , dan ...
.
 Di dalam elemen2 itulah kita letakkan tag-tag yang
merupakan perintah-perintah untuk mengatur dokumen
HTML.
Contoh:
Hallo Dunia
atau contoh nyatanya :
Hallo Dunia
Sity Aisyah, S.Kom - PR183

31

 Dalam HEAD Anda bisa memasukkan perintah-perintah
HTML untuk menuliskan keterangan tentang homepage.
 Perintah HTML (tag-tag HTML) yang paling umum
digunakan di dalam HEAD adalah TITLE.
Judul Homepage

 Fungsi TITLE adalah
untuk memberi judul
homepage.
Lihat gambar di samping

Gambar 3.0 Contoh Homepage

Sity Aisyah, S.Kom - PR183

32

 Dalam BODY Anda bisa memasukkan tag-tag HTML
seperti P, FONT, dsb yang akan kita pelajari nanti. Di
dalam BODY inilah tampilan2 homepage pada layar
browser dibuat.
 File-file dokumen yang ingin dibuat untuk homepage
biasanya berekstensi *.html atau *.htm

Sity Aisyah, S.Kom - PR183

33

Tag HTML
Definisi TAG
Untuk menandai berbagai elemen dalam suatu dokumen
HTML, kita menggunakan TAG.
Petunjuk menggunakan TAG adalah :
 Tag HTML diapit dengan dua karakter kurung
bersudut < dan >
 Tag HTML secara normal selalu berpasangan
seperti dan
 Tag pertama dalam suatu pasangan adalah tag awal
dan tag yang kedua merupakan tag akhir
 Tag HTML tidak case sensitive (boleh huruf kecil
atau besar) . contoh : berarti sama dengan
Sity Aisyah, S.Kom - PR183

34

Format Pada HTML
Format Teks
Berikut macam-macam tag untuk dekorasi teks :
Perintah

Fungsi

...

Mencetak tebal teks

...

Mencetak miring teks

...

Menggaris bawahi teks

...

Memberi coretan pada teks

...

Memberi coretan pada teks

...

Membuat teks berkedip (hanya
pada Netscape)

...

Menampilkan teks dadlam font
seperti mesin ketik

Sity Aisyah, S.Kom - PR183

35

Format Pada HTML
Perintah

Fungsi

...

Membesarkan teks

...

Mengecilkan teks

...

Membuat teks subscript (sedikit ke
bawah) ex : HO

...

Membuat teks superscript (sedikit
ke atas) ex : X2

Sity Aisyah, S.Kom - PR183

36

Format Pada HTML
Alignment Naskah
Naskah pada halaman web jika tidak diberikan
pemformatan secara default akan ditampilkan dengan
format tampilan rata kiri, tetapi jika Anda menginginkan
alignment naskah diubah menjadi rata tengah atau rata
kanan maka Anda harus menuliskan tag untuk merubah
alignment tersebut sesuai dengan yang kita inginkan.
Tag yang digunakan :


Titik2 di samping maksudnya tag
untuk paragraf atau heading
Posisi = LEFT, RIGHT, CENTER,
JUSTIFY

Sity Aisyah, S.Kom - PR183

37

See U
in
Practical Clas

Sity Aisyah, S.Kom - PR183

38