Mata Kuliah - TIK - Pertemuan - 10

Pertemuan 10 - 11
Algoritma dan
Pemrograman
Dasar (HTML,
Struktur Program)
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.
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.
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
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.
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.
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>
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>
Struktur HTML document
• Document HTML bisa di bagi mejadi tiga bagian utama:
html, head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
Susunan HTML
<Head>
Kepala <Title>
Judul Homepage
<head> </Title>
</Head>
Homepage
<Body>
Isi…Teks
Tubuh
Isi…Tabel.
<body> 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.
<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>
<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>
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>
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>
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 Jurusan PENS ITS</P>
<ol start="1" type=“1">
<li>Telkom</li>
<li>IT</li>
<li>Elka</li>
<li>Elektro Industri</li>
</ol>
<body>
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, …
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>
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
Pemformatan Page – Cont. 1
• Alignment : untuk perataan objek (Left,Right,Center,Justify)
<P align="center">Daftar Jurusan PENS ITS</P>
• Format Text :
A. Physical Format B. Logical Format
C. Preformatted Text : menampilkan text spt aslinya.

<pre> HTML sungguh menyenangkan.
Mudah bukan… </pre>
Pemformatan Page – Cont. 2
• 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>
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:
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>
Pembuatan Tabel – Cont. 1
• Untuk membuat baris cell : <tr>

• Untuk title tabel : <caption>
<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
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>
Membuat warna latar belakang:
• Menggunakan warna
<body bgcolor=#nnnnnn> . . . </body>
Tampilan:
Script:
<html>
<head>
<title> Penggunaan Latar Belakang
Warna </title>
</head>
<body bgcolor="cyan">
Kami sedang mulai belajar
Pemrograman Basis Data Berbasis Web
</body>
</html>
S1 Teknik Informatika -
Unijoyo
• Menggunakan gambar
<body background=“nama_file_gambar”> . . . </body>
Tampilan:
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>
Unijoyo
Relative Path
• Dalam direktori yg sama: ./

• Dalam direktori sebelumnya: ../
Unijoyo
Heading:
• Untuk judul atau sub judul dalam dokumen HTML

<h1 [align=”left”|”center”|”right”]> . . . </h1>
.
.

Tampilan:
Script:
<html>
<head>
<title> Heading </title>
</head>
<body>
<h1 align="center"> Heading 1: Materi HTML </h1>
</body>
</html>
Unijoyo
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: Tampilan:
<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>
Unijoyo
Preformatted Text:
• Untuk menampilkan teks sama seperti

yang diketikkan dalam dokumen HTML:
<pre> . . . </pre>
Unijoyo
Blockquote:
• Untuk menulis kutipan teks:

<blockquote> . . . </ blockquote >
Unijoyo
Break:
• Untuk menulis teks pada baris berikutnya:

<br>
Unijoyo
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
Format dokumen:
• Bold:
<b> . . .</b>
• Emphasized:
<em> . . . </em>
• Italic:
<i> . . . </i>
• Superscript:
<sup> . . .</sup>
• Subscripted:
<sub> . . . </sub>
• Struck trough:
<del> . . . </del>
Unijoyo
Garis pemisah horisontal:
• Garis horisontal untuk memisahkan teks

dengan teks lain.
<hr [align=“left”|”center”|”right”] [size=“n”] [width=“nnn”] [noshade]>
</hr>
Unijoyo
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>
Unijoyo
Memuat Gambar:
• Memuat gambar ke dalam halaman Web

<img src=”URL”|”name” height=”n” width=”n” align=”top”|”center”|”bottom”] />
Tampilan:
Script:
<html>
<head>
<title> Insert Gambar </title>
</head>
<body>
<b> Aloooo ... </b>
<img src="./TFR2A.gif" >
</body>
</html>
Unijoyo
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>
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
Unijoyo

Mata Kuliah - TIK - Pertemuan - 10

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Mata Kuliah - TIK - Pertemuan - 10

Diunggah oleh

Hak Cipta:

Format Tersedia

Pertemuan 10 - 11

• Setiap document HTML harus di awali dan

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

Block level element: terdapat 6

Menampilkan teks dalam bentuk paragraf.

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

Ordered list <ol>: List item berurutan.

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

• Break : memulai baris baru

 Color : attribute dgn 3 kategori warna (RGB)

C. Preformatted Text : menampilkan text spt aslinya.

• Untuk membuat link ke dokumen lain.

• Untuk membuat baris cell : <tr>

• Dalam direktori yg sama: ./

• Untuk judul atau sub judul dalam dokumen HTML

<h6 [align=”left”|”center”|”right”]> . . . </h6>

• Untuk menampilkan teks sama seperti

• Untuk menulis kutipan teks:

• Untuk menulis teks pada baris berikutnya:

• Garis horisontal untuk memisahkan teks

• Memuat gambar ke dalam halaman Web

• Link ke dokumen lain

Anda mungkin juga menyukai