Pengenalan, Installasi Tools dan
Memahami Konsep Dasar Web dan HTML
1.1 Konsep Dasar Website
1. Internet
Internet merupakan “kependekan dari kata “internetwork”, yang berarti rangkaian komputer
yang terhubung menjadi beberapa rangkaian jaringan”. Sistem komputer terhubung secara
global dan menggunakan TCP/IP sebagai protocol. Secara umum internet dapat diartikan
sebagai pertukaran informasi dan komunikasi. Semua informasi bisa didapatkan dengan
mudah dan bebas di internet tanpa ada batasan.
Ada beberapa istilah yang sering digunakan apabila anda bekerja dengan internet diantaranya
yaitu:
a) World Wide Web (WWW)
WWW merupakan kumpulan web server diseluruh dunia yang dapat menyediakan data
dan informasi untuk dapat digunakan secara massal.
b) Website
Website atau situs web merupakan sebuah alamat tertentu di WWW yang menyediakan
informasi tertentu. Untuk membuka sebuah situs web, anda dapat menggunakan browser
c) Web Pages (Halaman Web)
Web pages atau halaman web merupakan bagian dari situs web, apabila situs web
diumpamakan merupakan sebuah buku, maka halaman web merupakan lembaran-
lembaran kertas penyusun buku tersebut.
d) Home Page
Homepage merupakan halaman muka dari sebuah situs web, atau ibarat cover muka
sebuah buku. Homepage biasanya berupa outline dari isi situs web yang bersangkutan.
e) Browser
Browser adalah aplikasi yang digunakan untuk berselancar didunia internet. Browser
dapat memandu pengguna internet untuk berpindah antar situs web dengan mudah.
f) HTTP
HTTP (Hypertext Transfer Protocol) HTTP adalah bagian dari sebuah URL yang
mengidentifikasikan lokasi web, dan digunakan dalam protokol HTML.
1.2 Konsep Dasar HTML
1. Hyper Text Markup Language
Hyper Text Markup Language (HTML) adalah sebuah bahasa markup untuk membuat
kerangka sebuah tampilan di dalam suatu website. HTML bukanlah bahasa pemrograman,
melainkan bahasa markup. HTML diciptakan oleh seorang yang bernama Tim Berners Lee
yang juga menciptakan beberapa konsep seperti HTTP, WWW, Web Browser, Web Server
dan Web Page. HTML pertama kali dirilis pada tahun 1993.
Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat diedit oleh editor teks
apapun. Dokumen HTML punya beberapa elemen yang dikelilingi oleh tag teks yang dimulai
dengan symbol < dan berakhir dengan sebuah symbol >.
2. Tag-tag HTML
Setelah kita sudah mengetahui bagaimana konsep dasar HTML dan berhasil melakukan
download & installasi tools-tools yang diperlukan. Selanjutnya kita akan masuk ke dalam
pembahasan teknis yaitu mengetahui apa saja tag-tag yang ada di dalam HTML. Berikut ini
adalah tag-tag HTML yang sering digunakan :
Tag Deskripsi
<html></html> Mendeklrasikan tipe dokumen HTML pada browser
<head></head> Berisi informasi halaman yang tidak ditampilkan pada web browser
<body></body> Berisi elemen-elemen yang ditampilkan pada halaman web
<h1> - <h6> Untuk membuat teks judul pada halaman web
<p></p> Untuk membuat paragraf pada halaman web
<b></b> Untuk membuat tulisan menjadi tebal
<i></i> Untuk membuat tulisan menjadi miring
<u></u> Untuk membuat garis bawah pada tulisan
<a></a> Untuk membuat hyperlink (menyambungkan halaman)
<ol></ol> Untuk membuat list yang berurut (ordered list)
<ul></ul> Untuk membuat list yang tidak berurut (unordered list)
<dl></dl> Untuk membuat daftar dan definisi
<li></li> Untuk menampilkan data secara berurutan kebawah
<img src=””> Untuk menampilkan gambar
<table></table> Untuk mendeklarasikan sebuah table
<tr></tr> (table row) Untuk membuat baris pada table
<th></th> (table heading) Untuk menuliskan judul pada table
<td></th> (table data) Untuk menampilkan data-data pada table
<form></form> Untuk mendefinisikan sebuah form
<label></label> Untuk memberikan label judul pada inputan
<input></input> Untuk membuat sebuah inputan
<select></select> Untuk membuat sebuah inputan yang berisi dropdown
<textarea></textarea> Untuk membuat sebuah inputan yang lebih panjang
<button></button> Untuk membuat sebuah button
<div> dan <section> Untuk mengelompokkan elemen-elemen HTML
*Jika kalian ingin mempelajari keseluruhan terkait tag-tag HTML, kalian dapat mempelajari-nya
melalui link berikut : https://www.w3schools.com/html/
3. Materi Pembelajaran
Setelah kita sudah mengetahui tag-tag apa saja yang ada didalam HTML, kali ini kita
akan mulai masuk ke dalam materi pembelajaran utama tentang HTML. Ada beberapa materi
yang akan dipelajari pada materi HTML ini yaitu (Struktur HTML Dasar, Heading dan
Paragraf, Anchor Hyperlink, List, Image, Table, Form, Button)
1. Struktur HTML Dasar
Didalam HTML ada beberapa tag-tag yang menjadi struktur dasar dari HTML, yaitu
adalah sebagai berikut :
2. Website Pertama-mu
Kali ini mari sama-sama bikin website pertama kita menggunakan bahasa HTML,
silahkan diikutin langkah-langkah berikut ya :
1. Silahkan buka aplikasi code editor (visual stuido code) yang sudah terinstall
2. Sebelum mulai coding, silahkan bikin folder terlebih dahulu didalam komputer
kalian, boleh di D: atau pada Folder Documents. Buatlah sebuah folder yang
bernama html-dasar
3. Setelah sudah membuat folder, silahkan open folder kalian ke dalam visual
studio code, silahkan klik menu open folder :
4. Setelah dibuka, mari kita buat file dan website HTML pertama kita ..
*Silahkan klik New File dan buat file bernama index.html
5. Setelah dibuat, silahkan tuliskan kode program berikut untuk membuat website
pertama-mu :
* Untuk membuat struktur HTML Dasar di Visual Studio Code, kalian bisa
menuliskan tanda seru (!) atau tuliskan html:5 pada text editor.
6. Nah, untuk menampilkan hasil dari kode program tersebut, kalian bisa membuka
file HTML-nya di dalam browser. Ada beberapa cara untuk menampilkan-nya :
- Kalian bisa menggunakan f5 atau fn+f5
- Menarik file tersebut ke dalam google chrome
- Atau membuka-nya melalui folder html yang sudah kalian buat
*Nah, jika kita lihat pada browser, hasil kode program tersebut adalah seperti ini.
Oke, sekarang kita latihan sederhana ya..
7. Latihan HTML Sederhana
- Silahkan buat kode program untuk menampilkan output seperti gambar
dibawah ini menggunakan HTML :
*Siswa menunjukkan hasil-nya kepada guru jika sudah menyelesaikan latihan
soal sederhana HTML ini.
MINGGU 2
Lanjutan Konsep Dasar HTML dan
Latihan Sederhana HTML Dasar
A. TUJUAN PEMBELAJARAN
Pada minggu ke-2 ini kita akan melanjutkan untuk mempelajari konsep-konsep dasar
yang ada di HTML beserta latihan akhir-nya. Berikut beberapa yang akan dibahas :
1. Heading dan Paragraf
2. List
3. Anchor (Hyperlink)
4. Image
5. Table
6. Form dan Button
1. Heading dan Paragraf
Tag Heading di dalam HTML biasanya berfungsi untuk menuliskan judul pada suatu
halaman website. Heading pada HTML memiliki 6 jenis yang berbeda yaitu h1, h2, h3, h4
h5 dan h6. Berikut ini kalian bisa melihat perbedaan dari masing-masing heading.
Tag Paragraf di dalam HTML berfungsi untuk menuliskan sebuah paragraf atau sub
judul pada suatu halaman website. Selain itu kalian juga bisa menambahkan beberapa tag lain
yang dapat dipadukan pada saat menuliskan kode program seperti <i>, <b> dan <u>.
2. List
List pada HTML terdapat 3 yang biasanya digunakan, <ul>, <ol> dan <dl>. Dari 3 tag tersebut,
masing-masing mempunyai fungsi yang berbeda sebagai berikut :
<ul> (unordered list) adalah tag untuk membuat list yang tidak berurut
<ol> (ordered list) adalah tag untuk membuat list berurut
<dl> (definition list) adalah tag untuk membuat daftar dan definisi
Ketika ingin membuat list, tentu-nya didalam 3 list tersebut harus menambahkan tag
<li> untuk menampilkan data secara berutu kebawah, contoh-nya adalah sebagai berikut :
*Kalian juga bisa mengganti type dari masing-masing list tersebut. Seperti <ol>, urutan
angka adalah default-nya, kalian bisa merubah-nya juga menggunakan (A, a, I, i). Dan untuk <ul>
default-nya ada type disc, selain itu kalian bisa mengganti-nya juga menggunakan (square atau circle).
Perhatikan contoh sebagai berikut :
3. Image
Jika ingin menampilkan gambar didalam website menggunakan HTML, HTML telah menyediakan
tag-nya untuk menampilkan gambar, yaitu tag <img src=””>. Ada 2 cara ketika ingin
menampilkan gambar menggunakan HTML yaitu menggunakan cara internal atau eksternal.
Menggunakan cara internal :
*Kalian harus menyiapkan gambar yang akan ditampilkan, lalu silahkan taro gambar
tersebut di dalam folder html kalian, perhatikan contoh berikut :
*Penjelasan :
- Pada kode program di atas, untuk menggunakan cara internal kalian harus
menyimpan foto yang akan ditampilkan di dalam folder project html kalian. Setelah itu
bisa dipanggil melalui atribut src=”nama file foto tersebut”. Lalu ada atribut alt=””
(berfungsi untuk menampilkan teks jika gambar tidak tertampil). width=”” (untuk mengatur
ukuran lebar foto) dan ada height=”” (untuk mengatur ukuran tinggi foto).
Menggunakan cara eksternal :
*Untuk menggunakan cara eksternal, kalian harus mencari gambar yang akan
ditampilkan melalui google, setelah itu silahkan klik kanan pada gambar tersebut. Lalu
pilih “copy image address” gambar tersebut. Setelah itu salin link gambar tersebut di dalam
src, perhatikan contoh berikut :
- Pada kode program diatas, untuk menggunakan cara eksternal, setelah kalian copy image
address pada foto, silahkan untuk paste link tersebut ke dalam file img src=”link address”.
Maka output-nya akan sama saja seperti kita menggunakan cara internal.
4. Anchor (Hyperlink)
Apakah kalian pernah lihat suatu website yang masing-masing halaman-nya
tersambung dan kalian bertanya-tanya bagaimana itu bisa dilakukan? Nah, untuk menjawab
pertanyaan itu maka kita akan belajar salah satu tag HTML yang berfungsi untuk
menyambungkan halaman satu ke yang lain-nya. Yaitu tag
<a></a> (anchor). Sama hal-nya seperti image, kita dapat melakukan-nya secara
internal ataupun eksternal. Dalam hal ini, internal yang dimaksud adalah menyambungkan
halaman satu ke yang lain-nya melalui file yang ada di dalam HTML. Sedangkan untuk
eksternal, adalah untuk menyambungkan ke link lain seperti link nomor whatsapp ataupun
instagram. Biar lebih jelas dan faham, kalian perhatiin contoh berikut deh, ya :
- Pada kode program diatas, silahkan bikin file baru yang bernama “contact.html”.
Lalu, untuk menyambungkan-nya kalian bisa menggunakan tag a href=”nama_file-nya”
jika internal. Maka ketika kalian klik text menuju ke halaman contact, akan diarahkan
ke dalama halaman contact. Jika ingin menyambungkan-nya secara external
menggunakan link lain, kali bisa memasukkan link tersebut didalam href. Contohnya
diatas link instagram saya, jika di klik maka akan masuk ke dalam profile instagram
rendifdl05.
5. Table
Apakah kalian pernah membuat table menggunakan aplikasi microsoft excel? Ya, pada materi kali
ini kita akan mempelajari bagaimana cara-nya membuat table menggunkan HTML.
HTML sudah menyediakan tag yang bernama <table> untuk membuat table. Ada
beberapa yang perlu kalian ketahui terkait tag-tag ataupun atribut yang harus ditulis
didalam table, ketika ingin membuat table.
<table></table> Untuk mendeklarasikan sebuah table
<tr></tr> (table row) Untuk membuat baris pada table
<th></th> (table heading) Untuk menuliskan judul pada table
<td></th> (table data) Untuk menampilkan data-data pada table
Diatas adalah penjelasan terkait tag-tag yang harus ditulis dalam table. Biar lebih
faham, langsung aja kita latihan membuat table menggunakan HTML. Perhatiin contoh berikut,
ya :
Penjelasan kode program diatas :
*Pada kode program diatas, kita menggunakan tag <table> untuk membuat table.
Lalu, untuk membuat table, kita perlu menambahkan baris baru terlebih dahulu menggunakan
<tr>. Setelah itu, untuk menuliskan judul pada table menggunakan <th> (tulisan-nya tebal).
Untuk mengisi data-data pada table, bisa menggunakan <td> (tulisan-nya tidak tebal).
Lalu mungkin kalian akan bertanya, “Kenapa table-nya tidak ada border-nya, gimana cara
tambahin border di table?”
Untuk menjawab pertanyaan diatas, silahkan perhatian tambahkan beberapa atribut yang ada di
dalam table, silahkan tuliskan kode program berikut :
Untuk menampilkan border, kita perlu menambahkan atribut pada table yaitu border,
cellpadding berguna untuk mengatur jarak teks dengan garis didalam sel. Sedangkan
cellspacing berguna untuk menentukan jumlah spasi antar sel. Maka hasil-nya akan sebagai
berikut :
6. Form
Apakah kalian pernah mengisi survey melalui google form? Kalau sudah, kalian pernah berfikir
ga
sih? Gimana caranya bikin form tersebut. Nah, pada materi form kali ini, kita akan mempelajari
bagaimana cara-nya membuat form inputan seperti google form, disini kita belajar dari
sangat dasar menggunakan HTML. Nah, sebelum kita masuk ke penjelasan teknis, ada
beberapa hal yang perlu kalian ketahui terlebih dahulu terkait form ini. Biasa-nya, didalam
form ada beberapa tag yang sering digunakan, yaitu <label>,
<input>, <select>, <textarea> dan <button>. Mari kita bahas satu-satu ya, perhatikan
penjelasan sebagai berikut :
<label></label> Untuk memberikan label judul pada inputan
<input></input> Untuk membuat sebuah inputan, tag input memiliki banyak
atribut/type-nya, berikut adalah type yang sering digunakan
pada tag input :
Sumber :
https://www.w3schools.com/html/html_form_input_types.asp
<select></select> Untuk membuat sebuah inputan yang berisi dropdown
<textarea></textarea> Untuk membuat sebuah inputan yang lebih panjang
<button></button> Untuk membuat sebuah button
Untuk lebih jelas-nya, mari kita latihan untuk membuat form input menggunakan
HTML, perhatikan contoh kode program berikut, ya :
LEMBAR KERJA PESERTA DIDIK (LKPD)
Buatlah kode program menggunakan HTML dengan ketentuan sebagai berikut :
- Halaman Index : Terdapat Menu, Content dan Footer
- Halaman Data Peserta Didik : Tampil Table dan Terdapat Link untuk
Menambahkan Data
- Halaman Tambah Data Peserta Didik : Menampilkan form dan button tambah
- Dan menampilkan output sebagai berikut :
Halaman Home Halaman Data Peserta Didik
Halaman Tambah Data Peserta Didik :
