Seperti namanya, HTML adalah bahasa Markup yang berarti kamu menggunakan HTML hanya untuk “mark-up” dokumen teks dengan tag yang akan memberitahukan browser struktur untuk menampilkan sebuah desain layout web.
Langsung saja kita akan membuat latihan untuk pemrograman web dasar.
Latihan1
Dalam latihan ini, saya akan mebuat kerangka dasar html, ketikan kode html seperti dibawah ini dengan menggunakan notepad atau text editor lainya. Disini saya menggunakan notepad biasa.
<html>
<head>
<title>Judul website anda letakan disini</title>
</head>
<body>
Isi website anda letakan disini
</body>
</html>
Selanjutnya simpan kode diatas dengan nama latihan1.html. ingat untuk penulisan nama file itu tidak menggunakan space “spasi” dan extensinya harus “.html” agar browser bisa membaca kode html yang kita buat.
Sekarang kita akan membuka file latihan yang kita buat, caranya masuk kedalam lokasi dimana filenya kita simpan. Dalam hal ini saya menyimpannya dalam folder Documents-web kemudian nama filenya latihan1.html. klik 2x pada file tersebut atau bisa juga dengan cara klik kanan pada file kemudian pilih Open With. Buka dengan browser apa saja. Hasilnya akan seperti gambar dibawah ini.
Mudah bukan? Lanjut ke latihan2.
Latihan2
Pada latihan ini kita akan menambahkan tag html yaitu tag br dan hr. untuk penjelasan dari tag ini, nanti akan dibahas pada latihan4. Oke langsung saja ketikan kode dibawah ini.
<html>
<head>
<title>Judul website anda masukan disini</title>
</head>
<body>
BIODATA
<hr>
Nama : Dandri Abas
Alamat : Tenilo
</body>
</html>
Latihan3
Dalam latihan ini kita akan memberi warna pada halaman website. Langsung ketikan kode html dibawah ini.
<html>
<head>
<title>Judul website anda letakan disini</title>
</head>
<body BGCOLOR="YELLOW" TEXT="RED">
BIODATA
<hr>
Nama : Dandri Abas
Alamat : Tenilo
</body>
</html>
Latihan4
Oke masuk pada tahap akhir, dalam latihan ini saya akan menjelaskan semua kode yang telah kalian ketik pada latihan1 sampai latihan 3. Baca dan pahami baik-baik.
<html><head><title>Contoh Gambar Dibawah ini :
<body>Dalam tag body terdapat attribute yakni BGCOLOR=”YELLOW” yang berfungsi sebagai pemberian warna pada latar belakang website. Dalam latihan ini kita memberi warna kuning seperti pada gambar latihan diatas. Selain BGCOLOR juga terdapat attribute TEXT=”RED” yang fungsinya untuk memberikan warna pada teks.
Latihan5
Pada latihan ini kita akan menambahkan tag html untuk tipe-tipe text seperti text miring, text berwarna, text berjalan dan sebagainya. Oke langsung saja ketikan kode dibawah ini.
<html>
<head>
<title>TIPE - TIPE TEXT<title>
</head>
<body BGCOLOR="BLACK">
<font color="GREEN"><marquee><b>STMIK ICHSAN GORONTALO</b></marquee></font>
<hr>
<font color="BLUE"><i>1. SISTEM INFORMASI</i></font>
<font color="MAQENTA"><b>1. MANAJEMEN INFORMATIKA</b></font>
<font color="BROWN"><i>1. KOMPUTERISASI AKUNTANSI</i></font>
</body>
</html>
Gambar Disni
Latihan5A
Dalam latihan 5A ini kita akan membuat heading pada html. Tag heading ini biasanya digunakan untuk membuat sebuah judul pada teks dalam sebuah halaman web. Oke langsung saja ketikan kode dibawah ini.
<html>
<head>
<title>TIPE-TIPE HEADING</title>
</head>
<body>
<h1>STMIK ICHSAN GORONTALO</h1>
<h2>STMIK ICHSAN GORONTALO</h2>
<h3>STMIK ICHSAN GORONTALO</h3>
<h4>STMIK ICHSAN GORONTALO</h4>
<h5>STMIK ICHSAN GORONTALO</h5>
<h6>STMIK ICHSAN GORONTALO</h6>
</body>
</html>
Gambar Disni
Latihan5B
Dalam latihan ini kita akan membuat paragraph yang ada pada html yang akan kita terapkan pada UUD 1945. Jadi, ada 4 jenis paragraf yaitu :
- Left , ini merupakan penulisan paragraph rata kiri dalam document html (default)
- Right, ini merupakan penulisan paragraph rata kanan dalam document html
- Center, ini merupakan penulisan paragraph rata tengah dalam document html
- Justivy, merupakan penulisan paragraph rata kiri kanan dalam document html
<html>
<head>
<title>CONTOH PENATAAN PARAGRAF</title>
</head>
<body>
<B> UNDANG-UNDANG DASAR NEGARA REPUBLIK INDONESIA TAHUN 1945
PEMBUKAAN </B>
Bahwa sesungguhnya kemerdekaan itu ialah hak segala bangsa dan oleh sebab itu,
maka penjajahan di atas dunia harus dihapuskan, karena tidak sesuai dengan perikemanusiaan
dan peri-keadilan.
Dan perjuangan pergerakan kemerdekaan Indonesia telah sampailah kepada saat
yang berbahagia dengan selamat sentausa mengantarkan rakyat Indonesia ke depan
pintu gerbang kemerdekaan Negara Indonesia, yang merdeka, bersatu, berdaulat, adil
dan makmur.
Atas berkat rakhmat Allah Yang Maha Kuasa dan dengan didorongkan oleh keinginan
luhur, supaya berkehidupan kebangsaan yang bebas, maka rakyat Indonesia menyatakan
dengan ini kemerdekaannya.
Kemudian dari pada itu untuk membentuk suatu Pemerintah Negara Indonesia yang
melindungi segenap bangsa Indonesia dan seluruh tumpah darah Indonesia dan untuk
memajukan kesejahteraan umum, mencerdaskan kehidupan bangsa, dan ikut
melaksanakan ketertiban dunia yang berdasarkan kemerdekaan, perdamaian abadi dan
keadilan sosial, maka disusunlah Kemerdekaan Kebangsaan Indonesia itu dalam suatu
Undang-Undang Dasar Negara Indonesia, yang terbentuk dalam suatu susunan Negara
Republik Indonesia yang berkedaulatan rakyat dengan berdasarkan kepada Ketuhanan
Yang Maha Esa, Kemanusiaan Yang Adil dan Beradab, Persatuan Indonesia dan
Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam
Permusyawaratan/Perwakilan, serta dengan mewujudkan suatu Keadilan sosial bagi
seluruh rakyat Indonesia.
</body>
</html>
Gambar Disni
Latihan5C
Pada latihan ini kita akan membahas kode warna pada html.
- Left , ini merupakan penulisan paragraph rata kiri dalam document html (default)
- Right, ini merupakan penulisan paragraph rata kanan dalam document html
- Center, ini merupakan penulisan paragraph rata tengah dalam document html
- Justivy, merupakan penulisan paragraph rata kiri kanan dalam document html
| Nama Warna | Hex | |
|---|---|---|
| Alice Blue | #F0F8FF | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Brown | #A52A2A | |
| Blue | #0000FF | |
| Cyan | #00FFFF | |
| Dark Blue | #00008B | |
| Dark Cyan | #008B8B | |
| Dark Golden Rod | #B8860B | |
| Dark Gray | #A9A9A9 | |
| Dark Green | #006400 | |
| Dark Khaki | #BDB76B | |
| Dark Magenta | #8B008B | |
| Dark Olive Green | #556B2F | |
| Dark Orange | #FF8C00 | |
| Dark Orchid | #9932CC | |
| Dark Red | #8B0000 |