Siswi MTs Muslimin Citapen sedang belajar program web html.*
Ekstrakurikuler TIK, Perkenalan Pemrograman Web (HTML) untuk Siswa SMP/MTs. Praktek ekstrakulikuler TIK ini hanya untuk memperkenalkan siswa SMP/MTs dengan program pembuatan web dengan HTML.
Penyampaiannya tidak terlalu mendetail, hanya memperkenalkan code editor dan beberapa fungsi tag untuk memacu minat siswa terhadap bahasa pemrograman.
1. Apa itu HTML ?
HTML adalah singkatan dari Hypertext Markup Language, yaitu bahasa markup, jadi sebenarnya HTML bukanlah bahasa pemrograman.
Disebut bahasa markup karena berisi serangkaian markup yang biasa disebut tag yang berfungsi untuk memberi tahu browser bagaimana sebuah konten web akan ditampilkan. Apakah konten akan dijadikan paragraf, judul (heading), list, atau link.
HTML pertama kali diciptakan oleh Tim Berners-Lee pada 1992.
2. Menuliskan code HTML dengan Notepad
Menampilkan kata “Hello World!” ke layar browser menggunakan Notepad sebagai code editor (tempat menulis code)
Persiapkan web browser, misalnya Chrome
Membuat folder kerja agar file tidak tercecer ke mana-mana
Buat folder di Desktop beri nama “html”
Di dalam folder “html” buat folder baru beri nama “latihan1”
Simpan file Notepad yang masih kosong: File > Save > ke folder “latihan1”, beri nama “halaman1.html”, Save as type : All Files.
Ketikan struktur dasar html di bawah ini:
<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
· Tag <!doctype html> berfungsi untuk memberi tahu browser akan menggunakan html versi berapa (dalam hal ini versi 5)
· Tulisan di antara kurung siku disebut satu tag, <html> disebut tag html, kebanyakan berpasangan yaitu tag pembuka <html> dan tag penutup </html>.
· Apa yang akan dituliskan harus di antara tag <head>…</head> dan tag <body>…</body>
· Contoh tulis “Hello Word!” di antara tag <body>…</body>. Tampilkan di browser dengan cara double klik pada nama file “latihan1.html”.
· Browser bisa menampilkan kalimat ini, namun belum bisa menentukan apakah sebagai paragraf, heading, atau link.
· Tambah tulisan di bawahnya : “Selamat datang di perkenalan Pemrograman Web”
· Kemudian Save, tampilkan di browser dengan cara refresh, tulisan akan satu baris karena browser tidak mengetahui kedua kalimat itu sebagai apa.
· Supaya browser bisa mengenalinya, kita harus menambah tag paragraf <p>…</p> di antara kedua kalimat tersebut, sehingga browser akan mengetahui ada dua paragraf.
· Baris <title>…</title> gunanya untuk memberikan judul dari halaman.
· Tulis di antara tag <title>…</title> tulisan: “Pemrograman Web” kemudian Save dan tampilkan di Browser (refresh).
3. Menggunakan code editor Sublime Text
· Kunjungi situs web www.sublimetext.com pilih menu Download, pilih versi terbaru aplikasi ini kemudian pilih sistem operasi Windows 32 bit atau 64 bit.
· Kalau sudah di-download silakan lakukan instalasi di komputer. Jangan lupa simpan di Taskbar dengan men-drag dari menu Start.
· Buat folder baru: “latihan2”
· Jalankan aplikasi Sublime Text. Buat file baru > New File > Save > simpan di folder “latihan2” dengan nama “halaman1.html”.
· Cara mempercepat menulis struktur dasar code html dengan Sublime Text adalah dengan cara:
Ketikkan “html” kemudian tekan tombol Tab, maka otomatis muncul struktur dasar html secara lengkap.
· Langsung saja tulis judul halaman “Pemrograman Web” di antara <title>…</title> .
· Di antara tag <body>…. </body> tulis “p” lalu tekan Tab maka otomatis tag paragraf akan tampil, tinggal tulis paragrafnya: “Hello World!”
· Tulis lagi “p” tekan Tab isikan “Selamat datang di perkenalan Pemrograman Web”
Lengkapnya sbb:
<!DOCTYPE html>
<html>
<head>
<title>Pemrograman Web</title>
</head>
<body>
<p>Hello World!</p>
<p>Selamat datang di perkenalan Pemrograman Web</p>
</body>
</html>
Untuk melihat hasilnya, di-Save terlebih dahulu dengan memijit tombol Ctrl + S, kemudian klik kanan > Open in Browser, maka di halaman browser akan tampil tulisan:
Hello World!
Selamat datang di perkenalan Pemrograman Web
· Untuk memperbesar huruf (Font) atau mengubah skema warna (Color Scheme) di Sublime Text, klik menu Preferences > pilih yang diinginkan. Skema warna default “Monokai”.
· Untuk melihat folder dan file tekan menu View > Sidebar >Show Side Bar.
4. Tag yang bisa disimpan di antara <body>…</body>
· Teks :
paragraf <p>
Heading (judul) <h1>,<h2>,<h3>,<h4>,<h5>,<h6>
· Pendukung teks :
menambah baris baru <br>
menambah garis horisontal <hr>
cetak tebal <b>
cetak miring <i>
garis bawah <u>
penekanan <em>, <strong>
· gambar : <img>
· link : <a>
· list : <ul>,<ol>,<li> …
· komentar :
<!-- komentar --> tidak akan tampil di browser
· Struktur tag :
<nama tag atribut=”nilai”>
Contoh: <body bgcolor=”lightblue”>
5. Membuat daftar (List) terurut/tak terurut
· Buat folder baru “latihan3”, buat file baru “list.html”
· Buat struktur dasar html
· Judul halaman “HTML List”
· Tulis di body judul To Do List dengan heading <h3>
· Buat daftar terurut <ol></ol> dengan list item:
<li> Bangun pagi</li>
<li> Sarapan</li>
<li> Tidur lagi</li>
Agar urutan angka berubah gunakan atribut type=”a” atau “A”, “I” , “i”
· Buat daftar tak terurut <ul></ul> dengan judul “Saat bangun saya akan”
<li> makan bubur</li>
<li> makan nasi</li>
<li> minum kopi</li>
Agar urutan bullet berubah gunakan atribut type=”disc” atau “square”, “circle”
Lengkapnya sbb:
<!DOCTYPE html>
<html>
<head>
<title>HTML List</title>
</head>
<body>
<h3>To Do List</h3>
<ol type="a">
<li>Bangun pagi</li>
<li>Sarapan</li>
<li>Tidur lagi</li>
</ol>
<h3>Saat sarapan saya akan</h3>
<ul type="circle">
<li>makan bubur</li>
<li>minum kopi</li>
<li>makan nasi</li>
</ul>
</body>
</html>
6. Cara Membuat tautan atau Hyperlink
· Buat folder baru “latihan4”, buat file baru “halaman1.html”
· Buat struktur dasar html
· Judul halaman “Hyperlink – Halaman1”
· Shortcut membuat hyperlink : ketik “a” lalu tekan tombol Tab
Lengkapnya sbb:
<!DOCTYPE html>
<html>
<head>
<title>Hyperlink - Halaman 1</title>
</head>
<body>
<p>klik <a href="http://google.com">di sini</a> untuk mengetahui info lebih lanjut</p>
</body>
</html>
7. Cara Menyisipkan Gambar
· Menggunakan tag <img src=” “> dengan menulis “img” dan menekan Tab
· Buat folder baru “latihan5”, buat file baru “image.html”
· Kopikan sebuah gambar ke dalam folder “latihan5” misalnya nama file gambar: logo.png
· Buat struktur dasar html
· Judul halaman “image”
Lengkapnya sbb:
<!DOCTYPE html>
<html>
<head>
<title>Image</title>
</head>
<body>
<img src=”logo.png“>
</body>
</html>
Demikian semoga bermanfaat.
Tulisan ini disarikan dari: kanal Youtube Web Programming Unpad
No comments:
Post a Comment