Modul 1 Pengantar Data Science Dasar Dasar Data Sains

Pengantar Data Science
01
Modul ke:
Dasar Dasar Data Sains
Fakultas
Ilmu Komputer Rudi Sutomo, S.Kom., M.Si., M.Kom.
Program Studi
Teknik
Informatika
Sistem Penilaian
Kehadiran 10%
Tugas Kelompok 20%
UTS 30%
UAS 40%
Aturan Perkuliahan
1.Mahasiswa diharapkan masuk kelas on-time, terlambat 15
menit dengan kesadaran sendiri diharapkan tidak
mengganggu perkuliahan di kelas.
2.Perkuliahan kosong jika Dosen ybs memberi informasi
sebelumnya atau tidak hadir setelah 15 menit jadwal
perkuliahan dimulai
3.Selama perkuliahan, Mahasiswa diwajibkan untuk tidak
mengenakan kaos oblong dan tidak menggunakan sandal
ataupun sejenisnya. Melanggar hal tersebut tidak
diperbolehkan mengikuti perkuliahan
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.
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
<html> merupakan root atau induk dari seluruh tag
html.
<head> ,merupakan kepala dari halaman html, pada

bagian ini biasanya digunakan untuk elemen-elemen
yang tidak ditampilkan oleh browser.
<body>, merupakan isi dari halaman website, apa pun

yang akan ditampilkan oleh browser, ditempatkan di
bagian ini.
Struktur HTML document
• Document HTML bisa di bagi mejadi tiga bagian utama: html,

head, dan body.
<html>
<head>
</head>
<body>
</body>
</html>
11
Susunan HTML
<Head>
Kepala <Title>
Judul Homepage
<head> </Title>
</Head>
Homepage
<Body>
Tubuh Isi…Teks
Isi…Tabel.
<body> Isi…Audio, Video, dll.
</Body>
12
<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.
13
<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>
14
<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>
15
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>
16
Elemen dasar – Paragraph (p)
• Menampilkan teks dalam bentuk paragraf.
<body>
<h3>Salam Kenal</h3>
<p>
Saya dari jurusan ilmu komputer.
Siapa ya yang mo kenalan dengan saya.
</p>
<body>
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
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>
19
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, …
20
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>
21
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 22
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> 23
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>
24
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:
25
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> 26
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>
27
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
28
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> 29
Penggabungan baris/kolom
• Menggabungkan bbrp kolom menjadi 1: atribut colspan
• Menggabungkan bbrp baris menjadi 1: atribut rowspan
Script HTML:
<table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">
<caption align="top">
<b> Tabel Daftar Nilai Mahasiswa </b> </caption>
<tr bgcolor="gray"><th rowspan="2">No</th>
<th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
</tr>
<tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
<tr><td align="center" width="20">1.</td>
<td align="left" valign="middle" width="80" height="40">06.100.001</td>
<td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
<tr><td width="20">2.</td>
<td align="left" valign="middle" width="80" height="40">06.100.002</td>
<td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
<td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
</tr>
</table>
Karakter Khusus
Dalam HTML dapat digunakan simbol

tertentu yang dapat digunakan untuk
mewakili/mengganti suatu karakter.
Sebagai contoh, tag html

menggunakan karakter < dan >.
Maka, agar browser dapat
menampilkan karakter tersebut,
digunakan simbol khusus, yaitu <
untuk karakter < dan > untuk
karakter >
Contoh Karakter Khusus
<p>Dalam matematika, tanda lebih besar

diwakili oleh simbol > dan tanda lebih kecil
diwakili oleh simbol <.</p>
Latihan
<html>
<head>
<title>Web Pertama</title>
</head>
<body>
<h1>Web Pertama Saya</h1>
<h2>Aplikasi IT-1</h2>
</body>
</html>
Simpan dengan nama latihan1.html

Tag Heading
<h1>Text</h1>
<h2>Text</h2>
<h3>Text</h3>
<h4>Text</h4>
<h5>Text</h5>
<h6>Text</h6>
Simpan dengan nama latihan2.html

Daftar Pustaka
An Introduction to Web Design and Programming
Paul S. Wang, Sanda Katila
Learning Jakarta Struts 1.2: a concise and practical

tutorial: A step-by-step introduction to building Struts
web applications for Java developers
Stephan Wiesner
Introduction to Web applications development

Carles Mateu
Terima Kasih
Rudi Sutomo, S.Kom., M.Si., M.Kom.

Modul 1 Pengantar Data Science Dasar Dasar Data Sains

Diunggah oleh

Informasi Dokumen

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

Modul 1 Pengantar Data Science Dasar Dasar Data Sains

Diunggah oleh

Hak Cipta:

Format Tersedia

Pengantar Data Science

Dasar Dasar Data Sains

Setelah menyelesaikan bab ini,

• Internet merupakan jaringan global yang

• WWW bekerja merdasarkan pada tiga

• HTML  standard bahasa yang digunakan untuk

• Browser: Browser merupakan software yang di install di

• Kalo pada bahasa pemrograman kita mengenal code,

• Bentuk umum penulisan tag html adalah:

<head> ,merupakan kepala dari halaman html, pada

<body>, merupakan isi dari halaman website, apa pun

• Document HTML bisa di bagi mejadi tiga bagian utama: html,

• Setiap document HTML harus di awali dan di

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

• Horizontal Rule tag digunakan untuk menggambar garis

 Color : attribute dgn 3 kategori warna (RGB)

C. Preformatted Text : menampilkan text spt aslinya.

Dalam HTML dapat digunakan simbol

Sebagai contoh, tag html

<p>Dalam matematika, tanda lebih besar

Simpan dengan nama latihan1.html

Simpan dengan nama latihan2.html

Learning Jakarta Struts 1.2: a concise and practical

Introduction to Web applications development

Anda mungkin juga menyukai