Anda di halaman 1dari 22

PENDAHULUAN PEMROGRAMMAN DASAR

Team developer
Dalam pengembangan sebuah aplikasi computer (termasuk web). Terdapat sebuah tim
developer. Dalam team devepor terdapat beberapa jenis macam orang berdasarkan
jobdisk(pekerjaan), antara lain :
a. System analys
Adalah orang yang bertugas untuk menterjemahkan solusi dari suatu permasalahan ke
dalam sebuah simbol yang dapat diterjemahkan ke dalam program computer dan
melakukan pengawasan terhadap pengembangan program tersebut.
b. Programers
Adalah orang yang menterjemahkan solusi yang ditemukan system analis menjadi
sebuah aplikasi computer. Jenis programmer dalam tim ini ada 3 macam :
1. Programmer tampilan (front-end)
2. Programmer database
3. Programmer fungsi (back-end)
c. Tester
Adalah orang yang bertugas untuk mencoba dan mencari kesalahan atau eror aplikasi
d. Operator
Adalah orang yang menjalankan aplikasi computer (biasanya orang yang melakukan
update aplikasi pada aplikasi computer yang diorder)

1
Jenis-jenis programmer
Dalam dunia pengembangan web (web programming), programmer dapat
dibedakan menjadi 3 jenis :
a. Programmer front-end : programmer yang berfokus pada tampilan antar muka
yang bisa mempermudah penggunaan web pengguna (user).
b. Programmer back-end : programmer yang berfokus pada fungsi dari suatu
web, seperti menambahkan

2
HTML

Singkatan Dari Hypertext Markup Lannguage, karena terdapat serangkaian markup


(bias disebut tag) yang berfungsi member tahu browser tengtang bagaimana sebuah konten
ditampilkan.
Pertama kali diciptakan oleh tim berness lee(bapak web). Selain HTML beliau juga
menciptakan HTTP, WWW, web browser, Web server, Web page. Beliau sekarang menjabat
sebagai direktur W3C (world wide web consortium), sebuah organisasi yang membuat dan
mengawasi teknologi web. W3C merupakan gabungan dari : MIT (USA), ERCIM (France),
Keio University (Japan), dan Beihang University (China). Web resmi W3C : www.w3c.org.
web u8ntuk melihat teknologi internet www.evolutionoftheweb.com. Web browser pertama
kali didunia adalah MOSAIC (1993) diciptakan oleh Tim Bernes Lee. Kegiatan untuk
membuat program (web) biasa disebut coding.
Yang perlu disiapkan untuk melakukan coding html :
1. Browser, berfungsi untuk menampilkan hasil. Seperti google chrome
(rekomendasi), Mozilla firefox
2. Text editor : berfungsi untuk menulis code (coding), contoh visual code,
sublimetext, dll
Tag
Tag adalah simbol dalam html yang meminta broser untuk menampilkan suatu elemen.
Berikut ini adalah struktur tag :
1. Berpasangan, strukturnya seperti berikut ini :
<nama tag atribut=”nilai”></nama tag>

Contohnya : <p color=”blue”></p>


2. Tanpa pasangan
<nama tag atribut=”nilai”>

Contoh <br>

3
STRUKTUR DASAR HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<bpdy>

</body>
</html>

Tag-tag yang ada pada bagian head :


1. <title></title> : digunakan untuk membuat judul halaman web
2. <style></style> : menambahkan style (gaya)
3. <script></script> : menambahkan javascript
4. Dkk

Tag-tag yang ada pada bagian body :


1. Teks, seperti: <h1></h1>, <p></p>, …
2. Pendukung teks, seperti : <br>,<hr>,<strong></strong>,<em></em>, …
3. Gambar, seperti : <img>
4. Hyperlink, seperti : <a>
5. List, seperti : <ul></ul>,<ol></ol>, …
6. Tabel, seperti <table></table>, …
7. Form, seperti <form></form>, …
8. Javascript, seperti <script></script>
9. Grouping, seperti <div></div>, <span></span>
10. Komentar, seperti <!- - ini adalah komentar- ->

Atribut global atribut yang dimiliki oleh semua tag html, seperti :
1. Accesskey
2. Class
3. Dir

4
4. Lang
5. Style
6. Tabindex
7. Title

Atribut lengkap bias diakses di :


www.w3school.com/tags

5
PARAGRAPH DI HTML
1. <p></p> : digunakan untuk membuat text
2. <br> : digunakan untuk membuat baris baru
3. <hr> : menambahkan garis html
4. <i></i> , <em></em> : membuat huruf miring
5. <b></b>,<strong></strong> : membuat huruf tebal
6. <u></u> : membuat garis dibawah tulisan

HEADING
Heading digunakan untuk untuk membuat teks special seperti judul/bab, sub bab, dll. Contoh
header:
1. <h1></h1> : heading terbesar
2. <h2></h2>
3. <h3></h3>
4. <h4></h4>
5. <h5></h5>
6. <h6></h6> : heading terkecil

6
LIST HTML
1. Ol : list untuk objek-objek yang haeus urut
Struktur dasar ol
<ol>
<li>item 1</li>
<li>item 2</li>

</ol>
Atau
<ol type=”nilai”>
<li>item 1</li>
<li>item 2</li>

</ol>

Nilai dapat diganti dengan : 1, A, a, I, i


2. Ul : list untuk objek yang tidak harus urut
Struktur dasar ul
<ul>
<li>item 1</li>
<li>item 2</li>

</ul>
Atau
<ul type=”nilai”>
<li>item 1</li>
<li>item 2</li>

</ul>

Nilai dapat diganti dengan : disk, square, circle

7
3. Dl : untuk definisi
Struktur :
<dl>
<dt>term 1</dt>
<dd>description 1</dd>
<dt>term 2</dt>
<dd>description 2</dd>
</dl>

8
HYPERLINK HTML
Adalah Menghubungkan halaman web 1 dengan halaman web lain. Tag untuk hyperlink di
HTML :
<a href=“alamat web”></a>

Ada beberapa jenis hyperlink :


1. Ekternal link : menyambungkan halaman web ke halaman web yang ada di internet
Contoh :
https://www.google.com
https://www.facebook.com/
2. Internal/relative link : menyambungkan halaman web dengan halaman web yang
masih 1 domain/folder.
Contoh :
Product.html
../admin/index.html
3. Page anchor : menampilkan bagian tertentu dari halaman web
#about
Index.html#about

MEMBUKA HALAMAN WEB LAIN:


cara membuka halaman web lain dapat dilakukan dengan tag:
<a type=”nilai”>

</a>
Nilai dapat diganti dengan :
1. _self : membuka halaman web lain di tab browser yang sama
2. _blank : membuka halaman web lain di tab browser yang baru

9
MENAMBAHKAN OBJEK PADA HALAMAN WEB
1. Gambar
Kita dapat menambahkan gambar dengan tag :
<img src = “namafile.ektensi”>
Ada beberapa cara untuk menambahkan gambar :
a. Internal resource, menambahkan gambar yang masih satu domain/file dengan file
htmlnya.
<img src = “namafile.ektensi”>
Tulisan merah bisa diganti dengan contoh berikut ini :
 Logo.png
 Background.jpg
 dkk
b. External resource, menambahkan gambar dari halaman web yang sudah ada di
internet
<img src = “namafile.ektensi”>
Tanda merah dapat diganti dengan :
 https://www.google.com/image/srpr/logollw.png
 https:/www.gambar.co.id/contoh.jpg
catatan : external resource tidak disarankan karena web kita tergantung dari web
lain.
Adapun atribut lain di img antara lain :
 src, untuk memuat gambar dan mencari dokumen gambar
 alt, menampilkan tulisan apabila gambar gagal ditampilkan
 tittle, menampilkan tulisan apabila gambar disorot kursor
 width, mengatur lebar gambar (satuan px atau %)
 height, mengatur tinggi gambar (satuan px atau %)

10
2. Suara/music
Kita dapat menambahkan audio ke halaman web HTML dengan menambahkan tag
<audio></audio>. berikut ini adalah contoh coding dari <audio>:

Akan menghasilkan :

11
Format File Audio yang didukung

Format file yang biasanya digunakan adalah MP3 dan MP4 (M4A), karena ukuran
filenya relatif kecil. Sementara format FLAC adalah format file audio dengan kualitas
tinggi dan ukuran filenya relatif lebih besar.
Tag <audio> punya beberapa atribut yang sering digunakan:
a. Controls, Atribut ini berfungsi untuk mengaktifkan tombol kontrol seperti
tombol play, pause, stop, scroll, dan volume).
b. Autoplay, Atribut ini berfungsi untuk memutar audio secara otomatis. Nilai
yang bisa diberikan pada atribut ini adalah true dan false.
c. Loop,  berfungsi untuk mengulang-ulang pemutaran audio. Ini seperti repeat
one. Nilai yang bisa diberikan adalah true dan false.
d. Muted, Atribut ini berfungsi untuk mensenyapkan audio. Nilai yang bisa
diberikan adalah true dan false.
e. Hidden, berfungsin untuk menghilangkan controls

12
3. Video
Kita dapat menambahkan video dengan menggunakan tag <video></video>. Adapun
contoh dari penggunaan video dalam coding adalah sebagai berikut ini :

Hasilnya:

Tidak semua format video dapat ditampilkan di HTML. Berikut ini beberapa format
video yang didukung: 

Tag <video> punya beberapa atribut yang bisa diberikan:


13
14
TABEL HTML
Kita dapat menambahkan table ke dalam HTML dengan menggunakan tag
<table></table>. Bentuk table dalam HTML ada 2, antara lain :
a. Simple

<table>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>
Hasil yang didapatkan :
1,1 1,2 1,3
2,1 2,2 2,3

15
b. Kompleks

<table>
<thead>

<tr>
<th></th>
Header/judul
<th>kolom 1</th>
<th>kolom 2</th>
</tr>
</thead>
<tbody>
Header/judul
<tr>
<th>baris 1</th>
<td>1,1</td>
<td>1,2</td>
</tr>
</tbody>
Header/judul
<tr>
<th>baris 2</th>
<td>2,1</td>
<td>2,2</td>
</tr>
</tbody>

</table>
Hasil yang didapat adalah sebagai berikut ini :
Kolom 1 Kolom 2
Baris 1 1,1 1,2
Baris 2 2,1 2,2

Keterangan :
Tr : table row (baris)
Td : table data (kolom)
Th : table head (tanda header)

Atribut yang ada pada tag <table></table> adalah sebagai berikut ini :

16
a. Border :menambahkan garis pada border
b. Align :menambahkan
c. Cellspacing : menambahkan jarak antar cell
d. Cellpadding : menambahkan jarak antara tulisan (konten) dengan garis
Table merging

Adalah cara menggabungkan table di HTML. Ada 2 macam table merging di HTML :

a. Colspan

Digunakan untuk menggabungkan kolom menjadi 1. Adapun contoh tag-nya adalah


sebagai berikut ini :

<table bolder=”1” cellspacing=”0” cellpadding=”5” >


<tr>
<td>1,1</td>
<td colspan=”2”>colspan = 2</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>

17
Hasilnya seperti ini :

b. Rowspan

Adalah atribut yang digunakan untuk menghubungkan baris menjadi 1 baris. Adapun
contoh tag-nya adalah sebagai berikut ini :

<table bolder=”1” cellspacing=”0” cellpadding=”5” >


<tr>
<td rowspan=”3”>rowspan = 3</td>
<td colspan=”2”>colspan = 2</td>
</tr>
<tr>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>

Hasilnya adalah sebagai berikut ini :

18
Form HTML

Form adalah sebuah tampilan ayng digunakan untuk mengelola data yang di inputkan
oleh user (pengguna). Dalam pembuatan form di HTML, kita membutuhkan tag :

<form></form>

Atau

<form>

<!—elemen form-->

</form>

Elemen elemen form adalah sebagai berikut ini :

1. Input, adalah elemen form dimana user bisa memasukkan suatu data

Elemen input ada 4 jenis, antara lain :

a. Text

Elemen input yang datanya berupa teks (tulisan). Berikut ini adalah contoh
dari input dengan tipe text :

Hasilnya adalah sebagai berikut ini :

19
b. Password

Elemen input yang digunakan untuk memasukkan data berupa rahasia, semisal
password. Berikut ini adalah contoh dari input dengan tipe password :

Hasilnya adalah sebagai berikut ini :

c. Radio

Elemen input yang digunakan untuk memilih dari beberapa pilihan yang
disediakan yang bentuknya berupa bulat, Berikut ini adalah contoh dari input
dengan tipe radio :

Hasilnya adalah sebagai berikut ini :

20
d. Checkbox

Elemen input yang digunakan untuk memilih dari beberapa pilihan yang
disediakan yang bentuknya berupa tanda centang, Berikut ini adalah contoh
dari input dengan tipe radio :

Hasilnya seperti ini :

Berikut ini adalah tag untuk button :

<button type = “ ”></button>

2. Button, adalah elemen html yang digunakan untuk melakukan hal yang spesifik,
seperti mengirimkan data, menghapus data, dll

Button dapat diisi dengan :

a. Submit, digunakan untuk button dengan tujuan untuk menyetujui data

b. Reset, digunakan untuk button dengan tujuan untuk mereset data

c. Button, digunakan untuk button dengan tujuan lain

3. Textarea, adalah elemen form yang digunakan untuk memasukkan data yang besar
semisal komentar atau alamat. Tag textarea dapat di ketik seperti dibawah ini :

<textarea></textarea>

21
4. Select, elemen form yang digunakan untuk memasukkan data berupa pilihan, biasanya
berupa combo box. Tag select dapat di ketik seperti dibawah ini :

<select>
<option>opsi 1</option>
<option>opsi 2</option>
<option>opsi 3</option>
</select>

5. Label, adalah elemen form yang digunakan untuk menandai elemen form yang
lain. Tag label dapat di ketik seperti dibawah ini :

<label>contoh label</label>

22