pweb html

Pengantar HTML

Rakhmi Khalida

2

HyperText Markup Language (HTML)

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 dan juga java applet dalam document HTML.

3

Browser dan Editor

Browser: Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Mozilla dan masih banyak yang lainya.

Editor: Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Notepad, Microsoft FrontPage, Macromedia Dreamweaver, dan lain-lain.

4

Tag-tag HTML

Kalo pada bahasa pemrograman kita mengenal code, maka pada HTML kita mengenal yang namanya tag.

Contoh tag html adalah <head>, <title>, <body>, <html>, <img>, dan lain-lain.

Tag html tidak bersifat case sensitive

<body> sama dengan <BODY>

5

Tag-tag HTML - continued

Bentuk umum penulisan tag html adalah:<ELEMENT ATTRIBUTE = value>

Dimana:• Element - nama tag

• Attribute - atribut dari tag

• Value - nilai dari atribut.

Contoh:

<BODY BGCOLOR=lavender>

6

Struktur HTML document

Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.

<html>

<head>

</head>

<body>

</body>

</html>

7

Susunan HTML

Homepage

Kepala

<head>

Tubuh

<body>

<Head>

<Title>

Judul Homepage

</Title>

</Head>

<Body>

Isi…Teks

Isi…Tabel.

Isi…Audio, Video, dll.

</Body>

8

<html>

Setiap document HTML harus di awali dan di tutup dengan tag HTML <html> …… </html>

Tag <html> memberi tahu browser bahwa yang di dalam kedua tag tersebut adalah document HTML.

9

<head>

Bagian header dari document HTML di apit oleh tag <head></head>.

Di dalam bagian ini biasanya dimuat tag <tittle> yang menampilkan judul dari halaman web.

<head>

<title>Ahlan wa sahlan</title>

</head>

10

<head>

11

<body> Tag <body> di gunakan untuk menampilkan text,

image link dan semua yang akan di tampilkanpada web page.

<html>

<head>

<title> Ahlan Wa Sahlan </title>

</head>

<body bgcolor=“yellow“ text="navy" >

<p>Dokumen HTML yang Pertama</p>

</body>

</html>

12

<body>

13

Elemen dasar – Block Level

Block level element: terdapat 6 tingkatan, yaituH1 sampai H6.

<body>

<h1>Heading one</h1>

<h2>Heading two</h2>

<h3>Heading three</h3>

<h4>Heading four</h4>

<h5>Heading five</h5>

<h6>Heading six</h6>

</body>

14

Elemen dasar – Block Level

15

Elemen dasar – Paragraph (p)

Menampilkan teks dalam bentuk paragraf.

<body>

<h3>Salam Kenal</h3>

<p>

Saya dari jurusan Sistem Informasi STMIK Bani

Saleh.

Siapa ya yang mau kenalan dengan saya

</p>

<body>

16

Elemen dasar – Paragraph (p)

17

Elemen dasar – list item (li)

Unordered list <ul>: List item tidak berurutan (bullet)

<body>

<P>Nama-nama buah</P>

<ul>

<li>Mangga</li>

<li>Duren</li>

<li>Sirsak</li>

</ul>

</body>

18

Elemen dasar – list item (li)

19

list item (li) - continued

Ordered list <ol>: List item berurutan.

<body>

<P>Daftar Jurusan STMIK Bani Saleh</P>

<ol start="1" type=“1">

<li>Teknik Informatika</li>

<li>Sistem Informasi</li>

<li>Teknik Komputer </li>

<li>Manajemen Informatika</li>

</ol>

<body>

20


21


Tipe-tipe pada list item - ordered list <ol> :

• “A” : A, B, C, …

• ”a” : a, b, c, …

• ”I” : I, II, III, …

• ”i” : i, ii, iii, …

• ”1” : 1, 2, 3, …

22

Elemen dasar – Horizontal Rules <hr>

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokumen html.

Attribut dari <hr> adalah:• Position: menetukan posisi dari <hr>, dengan nilai :

center | right | left.

• Width: untuk menentukan panjang <hr>. Nilai default 100%.

• Size: untuk menentukan tebal dari <hr> dalam pixel.

• Noshad: Efek bayangan.

Contoh:

<hr position=“center” width=90% size=3

noshad>

23

Pemformatan Page

Break : memulai baris baru

tag : <br>

Font : menentukan format tampilan font

<font color="#9966FF" size="5"> Belajar Web </font>

Color : attribute dgn 3 kategori warna (RGB)

#RRGGBB, misal #FF0000 adalah Red

24

Alignment : untuk perataan objek (Left,Right,Center,Justify)

<P align="center">Daftar Jurusan STMIK Bani Saleh</P>

Format Text :

A. Physical Format B. Logical Format

Pemformatan Page – Cont. 1

C. Preformatted Text : menampilkan text seperti text code.

<pre> HTML sungguh menyenangkan.

Mudah bukan… </pre>

25

Contoh :<html><head><title>Ahlan wa Sahlan</title></head><body><B><P align="center">Kecamatan di Kota

Bekasi</P></B><pre> diantaranya sebagai berikut : </pre><font color="#9966FF" size="3" face="arial">1. Kecamatan Bekasi Timur </font> <br>2. Kecamatan Bekasi Utara <br>3. Kecamatan Bekasi Selatan <br></body></html>


26


27

Elemen dasar – hyperlink <a>

Untuk membuat link ke dokumen lain.

Contoh:

<a href=dua.html>Ke halaman dua</a>

<a href=“http://lecturer.stmikbanisaleh.edu/

”> WEB DOSEN STMIK BANISALEH</a>

Untuk membuat link ke bagian tertentu dlm dokumen.

Contoh:

28

Tag div

Div adalah divisi, maksudnya generik blok content yang dapat digunakan sebagai penampung jadi satu beberapa elemen

<body><h3>Contoh 1</h3><div id="content"><p>konten di dalam div</p>

</div>

<h3>Contoh 2</h3><div class="text-danger"><p>WASPADALAH!</p>

</div></body>

29

Tag div

30

Pembuatan Tabel

Untuk membuat tabel : <tabble>

Cell-nya dengan tag <td>

<html><head><title>Using Table</title></head><body><table border="1"><td>kolom 1</td><td>kolom 2</td><td>kolom 3</td><td>kolom 4</td></table></body></html>

31

Pembuatan Tabel

32

Untuk membuat baris cell : <tr>

Untuk title tabel : <caption>

Pembuatan Tabel – Cont. 1

<body><table border="1"><caption>Creating Table</caption><tr> <td>cell 1a</td>

<td>cell 1b</td></tr><tr> <td>cell 2a</td>

<td>cell 2b</td></tr></table></body>

33

Pembuatan Tabel – Cont. 1

34

Pemformatan Tabel

Perataan tabel :

1. align (center, justify, left, right).

2. valign (baseline, top, middle, bottom)

Lebar tabel : width=“25%”

Warna cell : bgcolor=“red”

Spasi tabel :

cellspacing untuk memberi spasi antar sel

cellpadding untuk spasi dari border ke text dalam cell

35

Pemformatan Tabel – Cont. 1

Contoh :<body><table border=1 cellspacing=5 cellpading=10><tr align="left" valign="top"><td width="25%" bgcolor=red>cell 1a</td><td width="25%" bgcolor=yellow>cell 1b</td></tr><tr align="center" valign="baseline"><td>cell 2a</td><td>cell 2b</td></tr></table></body>

36

Pemformatan Tabel – Cont. 1

Contoh :

37

Tag Caption Caption dapat diartikan dengan judul

Contoh :

<head><title>Ahlan Wa Sahlan</title></head><table border="1"><caption>Daftar

Belanja</caption><tr><th>Lauk-Pauk</th><th>Sayuran</th>

</tr><tr><td>Ikan Mas</td><td>Wortel</td>

</tr></table>

38

Tag Caption

Contoh :

39

Tag Button

Contoh :<html><head><title>Ahlan Wa Sahlan</title></head><body><P>Klik simpan untuk simpandata</P><button type="button">Simpan</button></body></html>

HTML

element button menunjukkan

sebuah tombol yang secara

umum memiliki style layaknya

sebuah tombol yang dapat diklik

untuk menjalankan tindakan

tertentu.

Konten/teks didalam

element button merupakan label

dari tombol tersebut. Pada

<button> element, dapat pula

dimasukkan gambar sebagai

tampilan dari tombol itu sendiri,

ini yang membedakan antara

tombol yang dibuat dengan

element <button> dan element

input lainnya.

40

Tag Button

Contoh :

41

Tag dd,dl,dt

Contoh :<head><title>Ahlan Wa Sahlan</title></head><body>

<dl><dt>Vertebrata</dt><dd>Binatang yang bertulang belakang (Seperti binatang

menyusui dan burung)</dd><dt>Invertebrata</dt><dd>Binatang yang tidak bertulang belakang (Seperti cacing

dan lalat)</dd></dl>

</body>

Tag dd adalah definition detail

Tag dl adalah definition list

Tag dt adalah definition term

42

Tag dd,dl,dt

Contoh :

43

Tag del

Contoh :

HTML <del> tag digunakan untuk

menunjukkan konten yang telah dihapus

(delete) dari dokumen.

Browser biasanya memberi style garis

tengah pada teks didalam element del,

yang menunjukkan coretan atau

dihapusnya teks tersebut dari dokumen.

Gunakan juga element <ins> untuk

menyisipkan teks baru yang

menunjukkan perubahan (Update) dari

teks/konten yang telah dihapus, jika

diperlukan.

44

Tag del

Contoh :<head><title>Ahlan Wa Sahlan</title></head><body>

<p>Budi menjual mobil bekas di <del

cite="http://blog.olx.co.id/blog/tokobagus-com-berubah-nama-menjadi-olx-co-id/">tokobagus.com</del> <ins>olx.co.id</ins>

</p></body>

45

Tag dd,dl,dt

Contoh :

46

Tag option Tag yang mempresentasikan sebuah opsi

Contoh :

<body><form action="voting_ikan.php" method="get"><p>Ikan apa yang menurut Anda paling enak

dimakan?</p><label>Ikan Favorit:<select><option value="lele">Ikan Lele</option><option value="mas">Ikan Mas</option><option value="teri">Ikan Teri</option><option value="tongkol">Ikan Tongkol</option>

</select></label>

</form></body>

47

Tag option

Contoh :

48

Tag images Tag yang mempresentasikan gambar

Contoh :

<head><title>Ahlan Wa Sahlan</title></head><body>

<img src="images/Tulips.jpg" height="70%" alt="Taman bunga Tulips" /></body>

49

Tag images

Contoh :

50

Tag textarea Tag yang mempresentasikan input area control

teks lebih dari satu baris

Contoh :

<html><head><title>Ahlan wa sahlan</title>

</head><body><label for="message">Pesan:</label> <br><textarea id="message" rows="7" cols="80">Tulis Pesan Anda dengan Lengkap.</textarea>

</body></html>

51

Tag textarea

Contoh :

pweb html

Engineering