Modul 1 (HTML) web

B e n g k e l I n t e r n e t & P e m r o g r a m a n W e b | 1

MODUL 1

HTML (HYPERTEXT MARKUP LANGUAGE)

Tujuan Praktikum :

A. Memahami pengertian HTML

B. Dapat mengetahui dan memahami dasar-dasar struktur HTML

C. Dapat memahami sintaks-sintaks dalam HTML

D. Dapat menggunakan elemen-elemen HTML

1. Installasi Netbeans

a. Sebelum menginstal netbeans, instal terlebih dahulu Java development kit standar

(JDKSE). Bisa di download di link

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-

2133151.html

b. Setelah menginstal Java development kit standar (JDKSE) install software Netbeans.

Software netbeans bisa didownload di https://netbeans.org/downloads/

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html


c. kemudian muncul form persetujuan lisensi, klik conteng “I accept the terms in the

license agreement” lalu klik next.

d. pilih lokasi instalasinya, default atau bawaannya biasanya di drive C/Program

Files/.biarkan secara default saja kemudiaan klik tombol Next.


e. lalu,muncul sebuah ringkasan untuk mengecek apakah boleh melakukan update

otomatis ?, jika boleh, cek / centang "Check for Updates",jadi jika menyetujui untuk

update secara otomatis menggunakan koneksi ke internet, maka versi terbaru dan

seluruh library JUnit,Plugins akan terdownload dan terinstall secara otomatis selama

penginstalan Netbeans selesai.

f. Tunggu sampai proses installasi selesai.


g. Instalasi Netbeans selesai.


2. Menggunakan Netbeans

Netbeans sebenarnya adalah IDE untuk Java, tapi Netbeans juga bisa untuk membuat

aplikasi C/C++, Ruby, Rails dan juga PHP. Untuk langkah pertama buka Netbeans, lalu

klik > File > New Project > PHP > PHP Application.

Lalu klik Next dan beri nama project sesuai keinginan kita, nantinya nama project ini akan

di akses sebagai URL dengan alamat “localhost/nama_project”.


Kemudian Run As pilih yang Local Web Site (running on local web server)

Lalu klik lagi Next -> Next -> Finish.


Untuk tampilan awal project kita seperti gambar dibawah ini

3. Pengertian HTML

HTML merupakan kependekan dari Hypertext Markup Language, yang merupakan

sebuah bahasa untuk mendeskripsikan sebuah halaman web sehingga informasi-informasi

yang akan diberikan tersaji dalam bentuk website. Setelah melakukan penulisan script

HTML, maka dokumen harus disimpan dalam format ekstensi HTML file (.html)

4. Struktur Dasar HTML

Dalam HTML, Struktur dasarnya adalah sebagai berikut

<html>

<head>

<title> D3 TEKNIK TELEKOMUNIKASI</title>

</head>

<body>

BENGINPRO

</body>

</html>


Penjelasanya adalah sebagai berikut

a. Element

Dalam dokumen HTML, disusun oleh elemen-elemen. Element merupakan

istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Element terdiri

dari tiga bagian yaitu tag pembuka, tag isi dan tag penutup, . Sebagai contoh, untuk

menampilkan judul dokumen HTML pada web browser digunakan element title :

<title> : tag pembuka

Judul Dokumen : isi

</title> : tag penutup

b. Tag

Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan

tag yang memiliki syarat penulisan, yaitu:

Tag HTML diapit dengan dua karakter siku ( < dan > )

Tag HTML secara normal selalu berpasangan, contohnya (<i>...</i>) tag pertama

dalam suatu pasangan adalah tag pembuka, dan tag yang kedua merupakan tag

penutup.

Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>.

Jika dalam suatu tag terdapat tag lain, maka penulisan tag terakhir tidak boleh

bersilang dan harus berurutan.

Contoh Penulisan sebagai berikut :

<p>

<b>

Benginpro 2016

</b>

</p>


c. Attribute

Atribute merupakan pelengkap dari suatu element HTML, pelengkap tersebut

terdiri atas 2 bagian yaitu “Property” dan “Value”. Pada umunya, penulisan value

biasanya diapit dengan tanda petik dua “ ” ataupun petik satu ‘ ’.

Struktur penulisannya adalah sebagai berikut:

Hasilnya

Keterangan:

Bgcolor : merupakan property

Blue : merupakan nilai dari property tersebut

<body ......> </body> : property dan value akan berlaku didalam body

Color

Penentuan warna dapat dilakukan dengan cara mengetikkan nama dalam bahasa

inggris warna tersebut atau dengan mengetikkan kode hexadesimal yang diawali

dengan tanda #. Beberapa contoh kode hexadecimal warna diantaranya :


Alignment

Attribute yang digunakan untuk perataan objek dokumen HTML.

Berikut adalah contoh penggunaan atribute :

Hasil dari script diatas adalah sebagai berikut :

Keterangan :

Dari script diatas dapat dilihat bahwa tulisan yang ada pada body akan center,

background color pada body akan berwarna hitam dan text yang ada pada body

akan berwarna merah.

5. MENETUKAN FORMAT TEKS PADA HTML

Format teks yang terdapat pada dokumen HTML dapat kita atur sendiri sesuai dengan

keperluan . Format umum yang sering dijumpai adalah sebagai berikut :

a. Membuat Teks Tebal

Untuk menebalkan teks ataupun karakter dalam suatu dokumen HTML, tag yang

digunakan adalah <b> dengan pasangan </b>.


b. Membuat Teks Miring

Untuk membuat teks ataupun karakter dalam dokumen HTML miring, menggunakan

tag <i> yang berpasangan dengan </i>.

c. Membuat Teks Bergaris Bawah

Untuk membuat teks atau karakter dalam dokumen HTML menjadi bergaris bawah,

maka tag yang digunakan adalah <u> yang berpasangan dengan </u>.

d. Membuat Format Superscript

Format superscript adalah format teks yang diperkescil ukuran hurufnya dan posisinya

dinaikkan ke atas, seperti angka yang digunakan dalam perpangkatan.

e. Membuat Format Subscript

Format Subscript adalah format teks yang yang merupakan kebalikan dari Superscript.

Pada posisi ini, teks ataupun karakter tersebut akan ditempatkan di bawah.

Contoh Penulisan:


Hasilnya :

f. Membuat Heading (judul texs)

Pada HTML menyediakan 6 jenis ukuran dalam penulisan judul, penulisannya

menggunakan tag <hn> </hn>. Dimana nilai n merupakan bilangan 1 sampai dengan 6.

Contoh penulisan script Heading :


Hasilnya :

6. HTML Hyperlink

Tujuan kata Hypertext dari HTML adalah membuat sebuah text yang ketika di-klik

akan pindah ke halaman lainnya. HTML menggunakan tag <a>untuk keperluan ini.

Link ditulis dengan <a> yang merupakan singkatan cari anchor (jangkar). Setiap tag

<a> setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju (href

adalah singkatan dari hypertext reference).

Agar lebih jelas, kita akan lihat menggunakan contoh. Silahkan buka text editor dan

buat kode seperti dibawah ini.

Contoh penggunaan tag link <a>:


Hasil Pada Browser :

7. HTML LIST

HTML list digunakan untuk membuat suatu daftar (list) atau kumpulan item

tertentu. Jenis-jenis penulisan list dalam HTML adalah sebagai berikut :

a. Ordered List (Secara berurutan)

Nomor item secara default menggunakan angka 1,2,3…dst sampai dengan dalam list

tersebut.

Kita dapat mengubah nomor dalam Ordered List dengan model angka yang lain, dengan

mengisi atribut type pada tag <ol>. Selain itu, ada juga atribut start, digunakan untuk

mendefinisikan nomor awal yang akan digunakan pada ordered list.

Contoh penulisan Ordered List adalah sebagai berikut :


Hasilnya :


b. Unordered List

Sering disebut bulleted list, mempunyai bullet default seperti noktah. Dalam

penulisannya diawali dengan tag <ul > dengan pasangannya </ul> dan di dalamnya ada

tag <li> dengan pasangannya </li>. Contoh penulisan script untuk unordered list adalah

sebagai berikut :

Hasilnya :


c. Definition List

Digunakan untuk mendemonstrasikan suatu definisi yang di dalamnya terdapat item list

lagi.

Contoh script Definition List :

Hasilnya :

8. HTML Table

a. Tabel

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. HTML

menyediakan tag-tag untuk membuat sebuah tabel, yaitu:

Tag <table> : Mendefinisikan sebuah table

Tag <tr> : Mendefinisikan baris pada table

Tag <th> : Mendefinisikan judul kolom

Tag <td> : Mendefinisikan isi tiap kolom


Contoh Penulisan Pada Text Editor

Hasilnya :

b. Merge

Merge adalah penggabungan. Penggabungan antar baris atau kolom, sehingga dapat

dilebarkan lebih dari satu kolom atau baris. Penggabungan antar baris menggunakan

perintah “rowspan” sedangkan penggabungan antar kolom menggunakan perintah

“colspan” yang dituliskan didalam atribut <td> .


Bentuk awal tabel :

Lalu kali ini kita akan menggabungkan kolom(colspan). kolom yang akan digabungkan

adalah kolom utama 1 dengan kolom utama 2 , dengan script sebagai berikut :

Hasilnya :

Kali ini kita akan menggabungkan baris(rowspan). kita akan menggabungkan

baris 1 kolom1 dan baris 2 kolom 1 menggunakan Script


Hasilnya :

9. HTML FORM

HTML Form digunakan untuk membuat sebuah form yang digunakan untuk

mengirimkan data dari form tersebut ke pihak server. Beberapa element pada HTML form

adalah sebagai berikut :

a. Element FORM

Element FORM berfungsi untuk mendefinisikan form interaktif dan penuliasannya

adalah <form> yang pasangannya </form>. Element form mempunyai attribute yaitu

action,dan method.

Attribute action berisikan aksi terhadap form

Attribute method berisikan metode form GET ataupun POST.

Contoh penulisannya adalah :


b. Element INPUT

Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan

pengguna. Element ini mempunyai attribute yaitu:

Name : nama dari input kontrol form

Type : bentuk-bentuk input control

Value : nilai awal/reset/submit

Ada beberapa tipe element INPUT, yaiut :

1) Text

Text Digunakan untuk membuat field text pada suatu dokumen.

Contoh :

Hasilnya :

2) Checkbox

Digunakan untuk membuat checkbox pada dokumen HTML dimana pemakai dapat

memilih atau membatalkan pilihan dari checkbox tersebut.


Berikut contoh penulisan scriptnya :

Hasilnya :

3) Radio Button

Digunakan untuk inputan bertipe radio button. Untuk kondisi pilihan yang bernilai 1

kondisi saja. Berikut ini adalah contoh script form input type radio :

Hasilnya :


4) Password

Digunakan untuk form yang meminta masukan diubah ke dalam bentuk password.

Dimana teks atau karakter yang diinputkan akan dirubah dalam bentuk bullets.

Berikut merupakan contoh perbandingan antara type text dengan type password :

Hasilnya :

5) Text Area

Digunakan untuk membuat suatu text area yang tidak dibatasi karakternya (control

input multi line). Contoh Penulisan :


Hasilnya :

6) Submit

Digunakan sebagai tombol untuk mengirimkan data yang telah diinputkan pada form

ke pihak server. Contoh penulisan scriptnya adalah sebagai berikut :

Hasilnya :


7) Dropdwon Box

Digunakan untuk mendefinisikan sebuah daftar yang memiliki submenu dan dapat

dipilih sesuai keinginan.

Contoh penulisan scriptnya adalah sebagai berikut :

Hasilnya :

Modul 1 (HTML) web

Documents

Transcript of Modul 1 (HTML) web