Staffsite STMIK PPKIA Pradnya Paramita 1ce60 html sesi 2 3

(1)

Pengenalan

HTML

(2)

Objectivitas

Setelah menyelesaikan bab ini,

anda diharapkan dapat:

• _{Mengerti tag-tag dasar HTML}

(3)

PENELASAN UMUM

• _HTML



standard bahasa yang digunakan untuk

menampilkan document web.

–

_{Mengontrol tampilan dari web page dan contentnya.}

–

_{Mempublikasikan}

_document

_secara

_online

_{sehingga bisa di}

akses.

–

_Membuat

_online

_{form yang bisa di gunakan untuk}

menangani pendaftaran, transaksi secara

online

.

–

_{Menambahkan object-object seperti image, audio, video}

(4)

Penamaan Dokumen HTML

• _{Tidak ada aturan baku untuk penamaan dokumen HTML. File}

dokumen yang mempunyai ekstensi .htm atau .html maka

akan dianggap file dokumen HTML

(5)

Kerangka Dokumen HTML

<html> <!—tag untuk memulai dokumen HTML-->

<!—Bagian Header - ->

<head>

<title> Judul halaman </title>

</head>

<!—Bagian body-->

<body>

Informasi yang akan ditampilkan pada web browser harus ditulis

dalam bagian ini

</body>

</html> <!—tag untuk memulai dokumen HTML-->

Head

(6)

Membuat Dokumen HTML

1. Jalankan Aplikasi text Editor

2. Tuliskan Kode html yang akan di keluarkan di browser

3. Simpan dokumen dengan ekstensi .htm atau .html

(7)

Tag HTML

• _{Aturan pemakaian Tag :}

• _{Tag HTML diapit dengan dua karakter sudut (< dan>)}

• _{Tag HTML tidak}

_{case sensitive}

• _{Tag html umumnya selalu berpasangan. Namun ada}

tag yang tidak berpasangan

(8)

Atribut Tag

• _{Atribut tag harus ditulis di dalam tag bersangkutan}

• _{Contoh : < body bgColor= “#fffeee”}

• _{alink=“#cccccc”>}

• _{Kerangka : <element (nama tag) atribut1=”value1”}

atribut2=”value2” …>

element atribut

atribut

value

(9)

Elemen bersarang

I

love

taking my dog for a walk.

parent

(10)

Tag Umum HTML

1. HTML

Tag yang mendefnisikan bahwa dokumen ini adalah dokumen HTML.

- Tag yang ditulis setelah tag HTML

-Untuk menuliskan

(11)

Tag Dasar HTML

3. TITLE

•_{Merupakan tag dalam head} yang harus dituliskan untuk memberikan

judul/informasi pada caption browser web

•_{Tentang topik/judul dari} dokumen web yg ditampilkan dalam

- Merupakan sesi utama dalam dokumen web

-Semua isi dokumen akan

(12)

Tag Body

(13)

Tag Body

•_{Contoh Penulisannya} •_{Contoh Penulisannya}

(14)

Tag Heading

• _Heading_{: Tulisan ditampilkan dalam bentuk lebih besar dan ditebalkan} • _{Mempunyai 6 tingkat heading dalam HTML dari 1 s.d. 6}

• _{Contoh penulisannya :} • _<body>

(15)

Tag Paragraf

Paragraf 

Setiap paragraf harus dimulai dengan tag Akhir paragraf tidak diharuskan menulis Setiap pergantian paragraf harus dimulai dg

Contoh Penulisannya : <body>

 isi tulisan paragraf pertama

</body>

Paragraf mempunyai atribut Align dan mempunyai value : lef untuk kiri, right

(16)

Tag Break

• _{Line Break }_{: Untuk memaksa berpindah baris, tidak berganti paragraf} • _{Contoh penulisannya :}

• _<body>

• _{Selamat Datang pada Perkuliahan} Pemrograman Internet 1

(17)

Tag Horizontal

• _{Tag Horizontal ruler <HR> untuk membuat garis mendatar (penggaris) , sebuah} garis yang bisa disisipkan dalam dokumen web, pemisah antar bagian atau paragraf,

• _{Contoh penulisannya : <body>}

• _{Selamat Datang } • _<hr>

• _{pada perkuliahan PI 1 } • _</body>

• _{Tag ini juga mempunyai atttribut yaitu}_align _{perataan (lef, center, right), size untuk} mengatur ketebalan garis (dalam pixel), attribute width untuk mengatur lebarnya garis (dalam persen atau pixel), tag ini tidak mempunyai penutup

• _{Contoh penulisannya :}

• _<body>

• _{Selamat Datang }

• _{<hr size = 25 , align = “center”, width = “75%”>} • _{pada perkuliahan PI 1 }

(18)

Tag Performat

• _{Tag Performat <pre> </pre>}

_{membuat tampilan}

dokumen HTML pada browser sama dengan tampilan

pada teks editor

(19)

Tag

• _Tag

_{Bold …: untuk menampilkan huruf tebal}

• _

(20)

(21)

Tag Komentar

• _{untuk mempermudah pembacaan kembali kode – kode HTML,}

kadang – kadang ditambahkan komentar ke dalam sebuah

dokumen, agar komentar tidak dapat dibaca oleh browser,

maka harus digunakan tanda khusus , yaitu <!—dan diakhiri

dengan tanda -->

(22)

Karakter khusus pada HTML

SPECIAL CHARACTER DESCRIPTION ENTITY NAME CODE

$ Dollar Sign _&dollar; _$

% Percent Sign &percnt; %