Pert 10 - Algoritma dan Bahasa Pemograman.pptx

Pertemuan 10 - 11
Algoritma dan
Pemrograman
Dasar (HTML,
Struktur Program)

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

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

4
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.
• http://www.detik.com/index.html

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

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

7
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
Homepage
Kepala
<head>
Tubuh
<body>
<Head>
<Title>
Judul Homepage
</Title>
</Head>
<Body>
Isi…Teks
Isi…Tabel.
Isi…Audio, Video, dll.
</Body>

11
<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>Welcome to eepis-its</title>
</head>

13
<body>
• Tag <body> di gunakan untuk menampilkan text, image
link dan semua yang akan di tampilkan pada web page.
<html>
<head>
</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 jurusan telekom PENS ITS.
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>

17
list item (li) - continued
Ordered list <ol>: List item berurutan.
<body>
<P>Daftar Jurusan PENS ITS</P>
<ol start="1" type=“1">
<li>Telkom</li>
<li>IT</li>
<li>Elka</li>
<li>Elektro Industri</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>
 Color : attribute dgn 3 kategori warna (RGB)
#RRGGBB, misal #FF0000 adalah Red

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

22
• Contoh :
<html>
<head>
</head>
<body>
<B><P align="center">Lab di Jur. Telkom</P></B>
Jurusan Telkom mempunyai 7 lab, diantaranya <br>
<font color="#9966FF" size="3" face="arial">
1. Lab. Multimedia </font> <br>
2. Lab. Microwave <br>
3. Lab. Komunikasi Digital <br>
</body>
</html>
Pemformatan Page – Cont. 2

23
Elemen dasar – hyperlink <a>
• Untuk membuat link ke dokumen lain.
Contoh:
<a href=dua.html>Ke halaman dua</a>
<a href=“http://lecturer.eepis-its.edu/
~zenhadi”> WEB PRIBADI ZEN </a>
• Untuk membuat link ke bagian tertentu dlm dokumen.
Contoh:

24
Pembuatan Tabel
• Untuk membuat tabel : <tabble>
Cell-nya dengan tag <td>
<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>

25
• 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>

26
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

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

28
Membuat warna latar belakang:
• Menggunakan warna
<body bgcolor=#nnnnnn> . . . </body>
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Warna </title>
</head>
<body bgcolor="cyan">
Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
</body>
</html>
Tampilan:

29
• Menggunakan gambar
<body background=“nama_file_gambar”> . . . </body>
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Gambar </title>
</head>
<body background="../gambar/picture01.jpg">
Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
</body>
</html>
Tampilan:

S1 Teknik Informatika -
Unijoyo
30
Relative Path
• Dalam direktori yg sama: ./
• Dalam direktori sebelumnya: ../

31
Heading:
• Untuk judul atau sub judul dalam dokumen HTML
<h1 [align=”left”|”center”|”right”]> . . . </h1>
.
.
Script:
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 align="center"> Heading 1: Materi HTML </h1>
</body>
</html>
Tampilan:

32
Paragraf:
• Paragraf yang bisa diatur perataannya (kiri, tengah, kanan):
<p [align=”left”|”center”|”right”]> . . . </p>
Untuk Tulisan awal paragraph Gunakan : &nbsp sesuai yang diinginkan
Script:
<html>
<head>
<title> Paragraf </title>
</head>
<body>
<h2 align="center"> Materi HTML </h2>
<p align="right">Kami sedang mulai
belajar Pemrograman Basis Data Berbasis
Web. Pada awal materi kami diperkenalkan
pada konsep dasar Web </p>
<p align="left">Saat ini masuk ke
materi Dasar-dasar HTML </p>
</body>
</html>
Tampilan:

33
Preformatted Text:
• Untuk menampilkan teks sama seperti
yang diketikkan dalam dokumen HTML:
<pre> . . . </pre>

34
Blockquote:
• Untuk menulis kutipan teks:
<blockquote> . . . </ blockquote >

35
Break:
• Untuk menulis teks pada baris berikutnya:
<br>

Unijoyo
36
Font:
• Ukuran font
<font size=“n”> . . . </font>
• Jenis font
<font size=“n” face=“jenis_font”> . . . </font>
• Warna font
<font size=“n” face=“jenis_font” color=“warna”> . . .
</font>

Unijoyo
37
Format dokumen:
• Bold:
<b> . . .</b>
• Emphasized:
<em> . . . </em>
• Italic:
<i> . . . </i>
• Superscript:
<sup> . . .</sup>
• Subscripted:
<sub> . . . </sub>
• Struck trough:
<del> . . . </del>

38
Garis pemisah horisontal:
• Garis horisontal untuk memisahkan teks
dengan teks lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]>
</hr>

39
List/Daftar:
• Unordered lists <UL>: daftar item dengan tanda bullet.
<ul [type=“disc”|”square”|”circle”] > . . . </ul>
• Ordered Lists <OL>: untuk membuat daftar item yang terurut.
<ol [type=“1”|”a”|”A”|”I”|”i"] [start=“n”] > . . . </ol>
• Definition Lists <DL>: untuk menjelaskan istilah-istilah.
<dl> . . . </dl>
<dt> . . . </dt>
<dd> . . . [</dd>]
• Menu List: menampilkan item-item yang mempunyai link ke page
lain.
<menu> . . . </menu>
• Directory List (DIR): untuk daftar item yang pendek atau kurang dari
20 karakter.
<dir> . . . </dir>

40
Memuat Gambar:
• Memuat gambar ke dalam halaman Web
<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
Script:
<html>
<head>
<title> Insert Gambar </title>
</head>
<body>
<b> Aloooo ... </b>
<img src="./TFR2A.gif" >
</body>
</html>
Tampilan:

41
Hypertext Link:
Format:
<a href=”address” > . . . </a>
• Link ke dokumen lain
<a href=”nama_dokumen” > . . . </a>
• Link ke bagian tertentu dalam dokumen yang sama
<a href=”#target” > . . . </a>
<a href=”target” > . . . </a>
• Link ke alamat URL atau WebSite
<a href=”alamat_URL” > . . . </a>
• Link ke alamat Email
<a href=”mailto:alamat_email” > . . . </a>
• Link File yang akan didownload
<a href=”nama_file” > . . . </a>

42
Summary
• HTML digunakan untuk menentukan tampilan suatu teks dan tingkat
kepentingan dari teks tersebut dalam suatu dokumen
• Tag-tag utama dalam dokumen HTML adalah <head> dan <body>.
• <head> digunakan untuk memberikan informasi mengenai dokumen
HTML, seperti TITLE, TITLE, BASE, ISINDEX, LINK, SCRIPT,
STYLE dan META.
• <body> digunakan untuk menyimpan informasi atau data yang akan
ditampilkan di dalam dokumen HTML. Di dalam tag ini, dapat
dilakukan berbagai macam pengaturan, misalnya mengatur warna
latar belakang, membuat heading, membuat paragraf, membuat
preformatted text, membuat blockquote, membuat break,
memformat font, memformat dokumen, membuat garis pemisah
horisontal, membuat list/daftar, memuat gambar, membuat hypertext
link, dan lain-lain

Pert 10 - Algoritma dan Bahasa Pemograman.pptx

More Related Content

Similar to Pert 10 - Algoritma dan Bahasa Pemograman.pptx

More from AnasRomzy

Recently uploaded

Pert 10 - Algoritma dan Bahasa Pemograman.pptx

Editor's Notes