Penggunaan html

Objectives
Setelah menyelesaikan bab ini,
anda diharapkan dapat:
Memahami konstruksi dasar halaman web.
Mengerti tentang WWW
Mengerti tag-tag dasar HTML
Membuat halaman web dengan HTML sederhana.
2

World Wide Web (WWW)
Internet merupakan jaringan global yang menghubungkan suatu
network dengan network lainya di seluruh dunia.
TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang
beragam di seluruh dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling
cepat berkembang dan paling populer.
3

WWW - continued
WWW bekerja merdasarkan pada tiga mekanisme berikut:
◦ Protocol standard aturan yang di gunakan untuk
berkomunikasi pada computer networking, Hypertext
Transfer Protocol (HTTP) adalah protocol untuk WWW.
◦ Address WWW memiliki aturan penamaan alamat web
yaitu: URL(Uniform Resource Locator) yang di gunakan
sebagai standard alamat internet.
◦ HTML digunakan untuk membuat document yang bisa di
akses melalui web.
◦ Contoh :
http://www.detik.com/index.html
4

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.
◦ Versi terakhir saat ini adalah HTML5
◦ HTML5 diawali dengan <!DOCTYPE HTML>
5

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.
6

File HTML
Pemberian nama file pada Home page
• File extention untuk file html : htm, html
• File : index.html menjadi default dalam web site atau virtual
directory dalam suatu website

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>
8

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>
9

Struktur HTML document
Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan
body.
<html>
<head>
</head>
<body>
</body>
</html>
10

Susunan HTML
11
Homepage
Kepala
<head>
Tubuh
<body>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>

<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.
12

<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>Judul </title>
</head>
13

<body>
Tag <body> di gunakan untuk menampilkan text, image link dan semua
yang akan di tampilkan pada web page.
<html>
<head>
<title>Welcome to my html </title>
</head>
<body bgcolor="lavender">
<p>Document HTML yang Pertama</p>
</body>
</html>
14

Elemen dasar – Block Level
Block level element: terdapat 6
tingkatan, yaitu H1 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>
15

Elemen dasar – Paragraph (p)
Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari mahasiswa UPJ
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
16

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>

list item (li) - continued
Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Prodi UPJ</P>
<ol start="1" type=“1">
<li>Sistem Informasi</li>
<li>TI</li>
<li>Komunikasi</li>
<li>Teknik Sipil</li>
</ol>
<body>
18

list item (li) - continued
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, …
19

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>
20

Pemformatan Page
Break : memulai baris baru
tag : <br />
Font : menentukan format tampilan font
<font color="#9966FF" size="5"> Belajar Web </font>
21
 Color : attribute dgn 3 kategori warna (RGB)
#RRGGBB, misal #FF0000 adalah Red

Pemformatan Page – Cont. 1
Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan UPJ</P>
Format Text :
A. Physical Format B. Logical Format
22
C. Preformatted Text : menampilkan text spt aslinya.
<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre>

Pemformatan Page – Cont. 2
Contoh :
<!DOCTYPE HTML>
<html>
<head>
<title>Welcome to sif UPJ</title>
</head>
<body>
<B><P align="center">Prodi di UPJ</P></B>
UPJ memiliki 10 prodi , 3 diantaranya adalah : <br>
<font color="#9966FF" size="3" face="arial">
1. Sistem Informasi</font> <br>
2. Teknik Informatika<br>
3. Ilmu Komunikasi<br>
</body>
</html>
23

Marquee (Scrolling text)
<marquee>This text will scroll from right to left</marquee>
<marquee direction="up">This text will scroll from bottom to
top</marquee>
<marquee direction="down" width="250" height="200"
behavior="alternate" style="border:solid">
<marquee behavior="alternate">
This text will bounce
</marquee>
</marquee>

img : Display picture
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley face" width="142" height="242">
</body>
</html>

Elemen dasar – hyperlink <a>
Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://sif.upj.ac.id”> Halaman web SIF
UPJ</a>
Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:
26

Pembuatan Tabel
Untuk membuat tabel : <tabble>
Cell-nya dengan tag <td>
27
<html>
<head>
<title>Using Table</title>
</head>
<body>
<table border="1">
<td>cell 1</td>
<td>cell 2</td>
<td>cell 3</td>
<td>cell 4</td>
</table>
</body>
</html>

Pembuatan Tabel – Cont. 1
Untuk membuat baris cell : <tr>
Untuk title tabel : <caption>
28
<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>

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
29

Pemformatan Tabel – Cont. 1
Contoh :
30
<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>

Penggunaan html

More Related Content

What's hot (20)

Similar to Penggunaan html (20)

More from Fajar Baskoro (20)

Recently uploaded (20)

Penggunaan html