Modul Dasar HTML
Modul Dasar HTML
Tujuan:
Siswa dapat membuat desain situs menggunakan Visual Studio Code
Materi:
1. HTML Dasar
PERTEMUAN 1
Tujuan:
1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML
2. Siswa dapat membuat tabel dan pengaturannya
Indikator Keberhasilan:
1. Siswa dapat membuat beberapa halaman website sederhana
2. Siswa dapat membuat tabel dan pengaturannya
3. Siswa dapat membuat beberapa halaman website yang dilengkapi dengan hyperlink,
image dan link-image
HTML Dasar
HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan
untuk membuat halaman situs.
Bentuk umum:
<html>
<head>
<title> Letakkan judul situs di sini </title>
</head>
<body>
Ini halaman situs Anda. Letakkan perintah-perintah HTML di
sini. Ini halaman situs Anda. Letakkan perintah-perintah HTML
di sini. Ini halaman situs Anda. Letakkan perintah-perintah
HTML di sini. Ini halaman situs Anda. Letakkan perintah-
perintah HTML di sini.
1
</body>
</html>
Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser !
<html>
<head>
<title> Latihan Pertamaku </title>
</head>
<body bg color="#000000">
<p align="left">
Paragraf ini akan rata
kiri<br> Paragraf ini akan
rata kiri<br> Paragraf ini
akan rata kiri<br>
<p>
br digunakan untuk ganti baris <br><br>
<b>Kalimat ini akan dicetak Bold </b> <br>
<i>Kalimat ini akan dicetak Italic </i> <br>
<b><i>Kalimat ini akan dicetak Bold dan Italic</i></b>
<hr width="1000"><br>
Perintah hr digunakan untuk membuat garis
</body>
</html>
2
tag atribut
P pada perintah di atas disebut dengan tag, sedangkan align disebut dengan atribut. Atribut
merupakan perintah yang menyertai tag.
3
<img src=”C:\Documents and
Settings\All Users\Documents\
My Pictures\Sample
Pictures\Sunset.jpg>
<font>... /font> <FONT size="2" Mengatur font dengan ukuran 2,
color="#FFFF00" warna kuning, jenis huruf Arial
face="arial">...</font>
<BIG>...</BIG> <BIG>Contoh </BIG> Membuat teks Contoh menjadi
lebih besar
<SMALL>...</SMALL> <SMALL> Contoh</SMALL> Membuat teks Contoh menjadi
lebih kecil
<b>...</b> Teks bold/dicetak lebih tebal
<i>…</i> Teks italic/miring
<strike>...</strike> Teks tercoret
<u>...</u> Teks underlined
<h1>...</h1> Teks heading 1. Tingkat heading
bisa sampai tingkat 6. Semakin
besar tingkar heading, maka teks
aka dicetak semakin kecil
<hr> <hr width=”600”> Garis dengan lebar 600. Tag <hr>
tidak perlu ditutup
<br> Tag untuk ganti baris Tag <br> tidak perlu ditutup
<sup>...</sup> Teks superscript
<sub>...</sub> Teks subscript
<marquee> .... Teks berjalan. Memiliki atribut
</marquee> direction, behavior dan lain-
lain. Contoh:
<marquee direction=”right”>
....</marquee>
<marquee behavior=”alternate”>
... </marquee>
TABLE
5
align=”...” Pengaturan tabel (rata tengah,
kanan atau kiri)
width=”...” Lebar tabel. Bisa diisi dengan
satuan pixel atau persen.
Contoh:
<table width=”80%”> atau
<table width=”600”>
valign=”...” Perataan secara vertikal dari
suatu cell.
(top, middle, bottom)
bordercolor=”...” Warna border
bgcolor=”...” Warna background tabel,
baris atau cell
Agar cell dalam tabell kosong, maka dapat digunakan perintah
Contoh 1:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu Dua
Tiga Empat
Jawab:
<html>
<head>
<title> Latihan Table </title>
</head>
<body>
<table border=”1”>
<tr>
<td align=”center”>Satu</td>
<td align=”center”>Dua</td>
</tr>
<td align=”center”>Tiga</td>
<td align=”center”>Empat</td>
</table>
</body>
</html>
Contoh 2:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu
Dua Tiga
Jawab:
<html>
<head>
<title> Latihan Table Dua </title>
</head>
<body>
<table border=”1”>
<tr>
<tr>
</
tr>
6
</ <td colspan=” 2” align=”center”>Satu</td>
tr>
<td align=”center”>Dua</td>
<td align=”center”>Tiga</td>
7
</table>
</body>
</html>
Latihan Pertemuan 1
Tulislah perintah-perintah HTML-nya agar diperoleh bentuk tabel seperti berikut (1 tabel = 1
file): 1.
1 2 3
4 5 6
7 8 9
2.
1 2
3 4 5
6 7
3.
1
2 3
4 5 6
4.
2
1 3
5.
1
3 2
6.
1 2
4
3 5 6
8
7
9
10
8
PERTEMUAN 2
Ketikklah perintah-perintah HTML berikut pada Visual Studio Code dan tunjukkan hasilnya !
<html>
<head>
<title> Latihan Pertemuan 2 </title>
</head>
<body bgcolor="#000000" text="#FFFFFF">
<table border="1" align="center" width="80%">
<tr>
<td colspan="2" align="center" height="100" bgcolor="#3A2BD1">
<font size="16" face="Arial">WEBSITE IRA IRAWAN</font><br>
<hr width="500"> <br>
<marquee direction="right">Terdepan Dalam Berita dan
Gosip</marquee>
</td>
</tr>
<tr valign="top">
<td width="200" height="450" bgcolor="green">Home</td>
<td bgcolor="#F75454">Selamat Datang di <b><i>WEBSITE IRA
IRAWAN</i></b> <br> Website Ira Irawan akan selalu konsisten
dengan berita-berita terbaru dari segala penjuru Indonesia.<br><br>
Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip
artis dan kuliner di Indonesia.
</td>
</tr>
</table>
</body>
</html>
PERTEMUAN 2.1
Perhatikan tampilan website dibawah ini !
1
0
Tampilan saat menu Galeri di klik.
Ketikkan kembali perintah-perintah HTML dibawah ini untuk tampilan website sesuai dengan contoh di
atas !
Perintah HTML Menu Awal
<html>
<head>
<title> Latihan Pertemuan 2 </title>
</head>
<body bgcolor="#F4A460" text="#FFFFFF">
<table border="1" align="center" width="80%">
<tr>
<td colspan="2" align="center" height="100" bgcolor="#708090">
<font size="16" face="Arial">WEBSITE IRA IRAWAN</font><br>
<hr width="500"> <br>
<marquee direction="right">Terdepan Dalam Berita dan Gosip</marquee>
</td>
</tr>
<tr valign="top">
<p>
<td width="200" height="450" bgcolor="yellow">
<a href="home.html">Home</a>
<br>
<a href="galeri.html">Galeri</a></td>
</p>
<td bgcolor="#F75454">Selamat Datang di <b><i>WEBSITE IRA IRAWAN</i></b> <br>
WEBSITE IRAIRAWAN akan selalu konsisten dengan berita-berita terbaru dari segala penjuru
Indonesia.<br><br>
Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip artis dan kuliner di
Indonesia.
</td>
</tr>
</table>
</body>
</html>
text-align: center;
padding: 20px;
}
h1 {
color: #007bff;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>Terima kasih telah mengunjungi WEBSITE IRA IRAWAN, Mari kembangkan website
kalian !! </p>
</body>
</html>
PERTEMUAN 3
Ketentuan:
1
3
Materi :
1. Basis Data (Database)
PERTEMUAN 4
Basis Data (Database) dapat dibayangkan sebagai sebuah lemari arsip. Jika kita memiliki sebuah lemari
arsip dan berwenang untuk mengelolanya. Atau kumpulan informasi yang terorganisasi dan disajikan
untuk tujuan khusus. Prinsip utama basis data adalah pengaturan data atau arsip. Sedangkan tujuan
utamanya adalah kemudahan dan kecepatan dalam pengambilan data atau arsip. Sedangkan sistem basis
data merupakan perpaduan antara basis data dan sistem manajemen basis data (DBMS). DBMS
(Database Management System) adalah software yang menangani semua akses ke basis data. Contoh
dari DBMS yaitu Microsoft Access, MySQL, MariaDB, Oracle, Server 2000, Interbase, Paradox, dan
lain-lain. Berikut susunan umum hierarki pada suatu basis data:
1. Karakter Merupakan bagian terkecil dalam database, dapat berupa karakter numerik (angka 0 s/d 9),
huruf (A-Z, a-z) ataupun karakter-karakter khusus seperti *, &, %, #, dan lainlain
2. Field Merupakan bagian dari record yang menunjukkan suatu item data yang sejenis, misalnya field
nama, field nim, dan lain sebagainya. Setiap field harus mempunyai nama 2 dan tipe data tertentu. Isi
dari field disebut Data Value. Dalam database, field ini disebut juga kolom.
3. Record Merupakan kumpulan data value dari attribute yang berkaitan sehingga dapa menjelaskan
sebuah entity secara lengkap. Misalnya record entity mahasiswa adalah kumpulan data value dari field.
Dalam database, record disebut juga baris.
4. Tabel Entity merupakan sesuatu yang dapat diidentifikasi dari suatu sistem database, bisa berupa
objek, orang, tempat, kejadian atau konsep yang informasi nya akan disimpan dalam database. Dalam
aplikasi, penggunaan istilah entity sering disamakan dengan istilah tabel. Disebut tabel, karena dalam
mempresentasikan datanya diatur dalam bentuk baris dan kolom. Baris mewakili 1 record dan kolom
mewakili 1 field. Dalam sistem database tradisional, entity/tabel ini disebut juga dengan file.
5. DataBase Kumpulan dari tabel-tabel yang saling berelasi, disusun secara logis sehingga menghasilkan
informasi yang bernilai guna dalam proses pengambilan keputusan.
1
4
Contoh penjabaran struktur basis data:
Dalam Xampp terdapat komponen yang harus aktif yaitu Aphace, MySQL dan PHP. ketiga komponen
tersebut memiliki tugas masing masing. Apache bertugas sebagai web server yang menampilkan
halaman web kepada user, MySQL bertugas sebagai databaser server yang berguna untuk
menambahkan data, menghapus data, atau mengubah data yang terdapat pada database. PHP bertugas
sebagai bahasa pemrograman yang membuat web. PHP berbeda dengan HTML maupun CSS, bahasa
pemrograman PHP hanya membuatkan logika sedangkan HTML/CSS membuat tampilan website yang
1
5
PERTEMUAN 5
MySQL
MySQL adalah Sebuah program database server yang mampu menerima dan mengirimkan datanya
sangat cepat, multi user serta menggunakan peintah dasar SQL ( Structured Query Language).
MySQL merupakan dua bentuk lisensi, yaitu FreeSoftware dan Shareware. MySQL yang biasa kita
gunakan adalah MySQL FreeSoftware yang berada dibawah Lisensi GNU/GPL (General Public
License). MySQL Merupakan sebuah database server yang free, artinya kita bebas menggunakan
database ini untuk keperluan pribadi atau usaha tanpa harus membeli atau membayar lisensinya.
MySQL pertama kali dirintis oleh seorang programmer database bernama Michael Widenius . Selain
database server, MySQl juga merupakan program yang dapat mengakses suatu database MySQL yang
berposisi sebagai Server, yang berarti program kita berposisi sebagai Client. Jadi MySQL adalah
sebuah database yang dapat digunakan sebagai Client mupun server. Database MySQL merupakan
suatu perangkat lunak database yang berbentuk database relasional atau disebut Relational Database
Management System RDBMS) yang menggunakan suatu bahasa permintaan yang bernama SQL
(Structured Query Language).
Data Definition Language merupakan bagian dari SQL yang digunakan untuk mendefinisikan
data dan obyek database. Perintah tersebut berupa membuat, mengubah, menghapus dll.
Beberapa perintah SQL yang termasuk Data Definition Languag, seperti terlihat pada tabel berikut
ini:
Data Manipulation Language merupakan bagian dari perintah SQL yang digunakan untuk
manipulasi data. Perintah-perintah ini bertugas untuk melakukan query dan perubahan yang
dilakukan didalam suatu tabel.
Beberapa perintah SQL yang termasuk Data Manipulation Language, seperti terlihat pada tabel
berikut ini:
Pada tipe data ini yang dapat disimpan hanya berupa angka (numerik) saja, baik berupa angka
positif maupun angka negatif. Lebih jelasnya lihat tabel dibawah ini:
Pada tipe data ini dapat beisi nilai string (alpanumerik/karakter) dan numerik. Yang jelas nilai
numerik disini dapat untuk operasi perhitungan sebelum dilakukan konversi.
Tipe data ini menyimpan informasi waktu, baik tanggal maupun jam. Walaupun data yang disimpan
disini numerik tetapi pembacaan terhadap data string. Jadi perlu dilakukan konversi bila ingin
melakukan perhitungan. Berikut tipe data waktu yang didukung MySQL.
1
7
Tabel tipe data date time di MySql:
PhpMyAdmin
PhpMyAdmin merupakan tools dengan Graphic User Interface yang dapat memudahkan dalam
pengelolaan database pada MySQL. Jika pada bahasan-bahasan sebelumnya dibahas query-query sql
pembentuk tabel dan database menggunakan tools command prompt. Versi dari phpMyAdmin dan
bahasa PHP yang diterima akan mengikuti dari versi Xampp yang terinstal pada Laptop/PC. Namun,
pada Modul Aplikasi Basis Data ini, phpMyAdmin hanya dibahas dalam bab ini saja. Hal ini karena
kemudahan dalam penggunaannya dan harus ditekankan adalah penguasaan query-query sql dalam
membentuk abel serta basis data yang baik.
Databases -> Create database (tuliskan nama database yang di sesuaikan, contoh: db_polianak) -
> Create.
Table name (tuliskan nama tabel yang sesuai, contoh: tb_pasien, karena tabel berisi data
mahasiswa seperti id_polianak, nama & jurusan), kemudian untuk Number of columns tersebut
berisi berapa jumlah kolom yang kita pakai untuk tabel data polianak misalnya seperti contoh di
atas berisi 6 kolom jadi isikan 6 -> Create.
1
8
Ketika telah masuk kedalam database db_polianak, maka kita ketikkan nama tabel beserta
jumlah field yang ada pada tabel. Tabel-tabel pada latihan ini, dapat melihat struktur tabel pada
db_polianak.
tb_pasien
Tgl_lahir Date 8
Status Text 25
Untuk menambah tabel pada database yang sama klik database yang sudah di buat kemudian
akan muncul tabel yang sudah di buat, ada menu Create new table -> masukkan nama tabel yang
akan di buat & jumlah kolom -> Create
TUGAS PERTEMUAN 5
1. Buat database dengan nama db_polianak, buat tabel pasien (tb_pasien).
1
9
2. Tambah tabel pada db_polianak dengan ketentuan sebagai berikut :
Tabel “tb_dokter”
Field Name Type Size Keterangan
(Length/Values)
Nama_dokter Text 30
Alamat_dokte Text 50
r
Jeniskel_dokt Text 20
er
Keahlian Text 30
Tabel “tb_rawatinap”
Field Name Type Size Keterangan
(Length/Values)
Id_pasien Varchar 8
Tgl_rawat Date 8
Tgl_keluar Date 8
2
0
Mengisi Record Pada Tabel
Klik tabel yang akan di isi -> Insert -.> Isi database -> GO
Jika ingin menambahkan record lagi, di paling bawah ada Continue insertion with kemudian tulis
berapa data yang ingin kamu tambah dan bisa untuk mengurangi jumlah pengisian record.
Untuk melihat data yang sudah di input silahkan klik browser maka akan muncul tampilan data
yang sudah di input. Ada menu edit, copy & delete yang bisa di gunakan untuk mengedit,
mengcopy dan mendelete data.
2
1
Mengubah dan Menghapus Isi Record Tabel
Pilih terlebih dahulu tabel, kemudian klik menu “Browse” untuk menampilkan isi record pada tabel.
Untuk Ubah bisa menggunakan icon pensil, sedangkan untuk Hapus bisa menggunakan icon tanda
silang/strip merah.
Pilih terlebih dahulu tabel, kemudian klik menu “Struktur” untuk menampilkan isi record pada tabel.
Untuk Ubah bisa menggunakan icon pensil, memberi Primary Key menggunakan icon kunci, sedangkan
untuk Hapus bisa menggunakan icon tanda silang/strip merah.
Pilih terlebih dahulu tabel yang akan diubah namanya, kemudian klik menu “Operasi”.
Tanggal 28/02/2024
XI TKJ 1 : Budi K.Nome : sakit
2
2