Dokumen tersebut membahas tentang konsep dasar teknologi webpage. Secara singkat, dokumen tersebut menjelaskan tentang standar kompetensi dan kompetensi dasar pembuatan web statis, konsep-konsep teknologi web seperti web server, URL, HTTP, HTML, dan web browser, perbedaan antara web statis dan dinamis, serta penjelasan dasar HTML.
AKSI NYATA Numerasi Meningkatkan Kompetensi Murid_compressed (1) (1).pptx
Bahan ajar html 1
1. HOME
SK / KD
WEB STATIS
INDIKATOR MATERI
LATIHAN
UJI KOMP
Konsep Dasar Teknologi Webpage
2. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
SK - KD
• Standar Kompetensi :
Menerapkan dasar dasar Pembuatan Web statis
Tingkat Dasar
• Kompetensi Dasar
Menjelaskan konsep dasar dan teknologi
Webpage
3. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
INDIKATOR
• Konsep-konsep dan teknologi web
dijelaskan (web Server, URL, HTTP, HTML,
Web browser)
• Perbedaan antara klien dan server dijelas.
• Ciri-ciri dan fungsi dari software teks editor
yang tersedia untuk merancang web page
dibandingkan
• Keuntungan dan kerugian running dari
server yang dimiliki dibandingkan server
provider dijelaskan.
4. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
materi
Website???
Apakah yang dimaksud dengan web?
Website adalah suatu tempat yang tersusun
dari halaman-halaman yang menggunakan
teknologi web dan saling berkaitan satu sama
lain berisi suatu informasi tertentu.
Secara umum desain Web tersusun dari 3
lapis yaitu : struktural layer, presetation layer
dan Behavioral layer.
5. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
• Structural Layer : berkaitan dengan
bagaimana suatu perintah ditulis
• Presentation layer : berkaitan dengan
masalah tampilan web
• Behavioral layer : berkaitan dengan
masalah penggunaan bahasa
pemrograman yang mendukung
interaktifnya web.
6. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
Web statis dan Web Dinamis apa sih
bedanya??
Web Statis adalah web yang isi (data
dan informasi) bersifat tetap / tidak
berubah-ubah. Dokumen dikirim ke
client akan sama dengan dokumen yang
ada di server/penyedia.
Web Dinamis adalah web yang
Halaman-halaman web yang isi dan
informasinya berubah-ubah sesuai
dengan permintaan pengguna/client.
7. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
Persiapan Membuat Web
1. Hardware Komputer : hardware komputer di
persiapkan dengan mempertimbangkan Program /
perangkat lunak yang akan diinstal ke untuk
membantu proses pembuatan web.
2. Software Komputer :
- Sistem Operasi : pemilihan sistem operasi yang
didasarkan pada web server yang akan diinstal, web
editor yang akan dipakai dan kompatibelitas dengan
software2 pendukung lainnya.
- Web / HTML Editor adalah perangkat lunak yang
digunakan untuk membuat halaman-halaman web,
baik yang bersifat statis maupun dinamis.
8. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
Beberapa web editor yang dapat digunakan antara lain :
Notepad pada Windows, Vi/Vim pada Linux.
Beberapa aplikasi yang dikhususkan untuk membuat web
antara lain adalah : Adobe Dreamweaver (dulu
Macromedia Dreamweaver), Microsoft Visual Studio .Net,
Kelebihan menggunakan web editor khusus untuk
pembuatan web antara lain:
1. tampilan berbasis GUI,
2. automatic code completion (melengkapi kode secara
otomatis),
3. WYSIWYG (What You See Is What You Get) HTML
Editor,
4. koneksi ke basis data yang lebih mudah, dan banyak
lagi fasilitas
9. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
- Web browser
Web browser berfungsi menerjemahkan kode-kode
HTML menjadi tampilan yang kita kehendaki. Beberapa
nama yang cukup terkenal antara lain Microsoft Internet
Explorer, Firefox, Opera atau Safari.
• Web server
• Web server adalah perangkat lunak yang bertindak
melayani permintaan permintaan client terhadap
halaman-halaman web tertentu. Ada beberapa nama
yang cukup populer dalam dunia web server.
Diantaranya adalah Apache dan IIS (Internet
Information Service).
10. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
Web server bisa mengunakan komputer kita sendiri atau bisa
menggunakan server yang disediakan oleh provider atau
hosting.
Server Pribadi Server Provider
Keuntungan:
1. Mudah pengelolaan
2. Gratis tidak berbayar.
3. Kapasitas penyimpanan bisa
diatur
Keuntungan :
1. Pengelolaan terbatas hak –
hak yang diberikan oleh
provider
2. Tingkat keamanan biasanya
lebih bagus
3. Bisa diakses dimanapun
karena masuk ke jaringan
internet
Kekurangan :
1. Kecepatan akses tergantung
pada komputer yang kita
gunakan.
2. Bersifat local sehingga
terbatas jangkuan aksesnya.
Kekurangan :
1. Kecepatan tergantung dari
komputer server dan
bandwidth yang ada.
2. Harus membayar biaya
hosting
3. Kapasitas yang terbatas
11. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
HTML Dasar
• Internet merupakan jaringan global yang menghubungkan suatu
network dengan network lainnya di seluruh dunia, TCP/IP menjadi
protokol penghubung antara jaringan-jaringan yang beragam di
seluruh dunia untuk dapat berkomunikasi. World Wide Web
(WWW) merupakan bagian dari internet yang paling cepat
berkembang dan paling populer.
WWW bekerja berdasarkan pada tiga mekanisme berikut:
• Protokol standard; aturan yang di gunakan untuk berkomunikasi
pada komputer networking,
• HTTP atau Hypertext Transfer Protocol merupakan protokol yang
digunakan untuk mentransfer data atau dokumen yang berformat
HTML dari web server ke browser
• web Address; WWW memiliki aturan penamaan alamat web yaitu
URL(Uniform Resource Locator) yang di gunakan sebagai standard
alamat internet.
12. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
Html ??
• HTML atau Hypertext Markup Language merupakan salah
satu format standar yang digunakan dalam pembuatan
dokumen dan aplikasi yang berjalan di halaman web.
Sebenarnya, dokumen HTML hanyalah sebuah dokumen teks
biasa dan disebut sebagai Markup Language yakni bahasa
yang mengandung tanda atau mark yang disebut tag
tertentu yang digunakan untuk mengatur format tampilan
suatu dokumen.
• Yang bisa kalian lakukan dengan HTML diantaranya:
– Mengontrol tampilan dari web page dan kontennya.
– Mempublikasikan dokumen secara online sehingga bisa di
akses dari jaringan / internet
– Membuat online form yang bisa di gunakan untuk menangani
pendaftaran, transaksi secara online.
– Menambahkan object-object seperti image, audio, video dan
juga java applet dalam dokumen HTML.
13. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
Latihan
Jawablah pertanyaan berikut :
1. Sebutkan teknologi desain web yang ada!
2. Sebutkan perbedaan Web Statis dan web
dinamis!
3. Sebutkan web browser yang kamu ketahui
minimal 3 buah!
4. Apakah yang dimaksud dengan internet?
5. Apakah yang kamu ketahui tentang HTTP?
14. HOME
SK / KD
INDIKATOR
MATERI
LATIHAN
UJI KOMP
Uji Kompetensi
1. Sebutkan apakah yang dimaksud dengan struktural layer,
presentation layer dan behavioral layer!
2. Sebutkan teks editor yang ada dipasaran software saat ini!
3. Sebutkan kelebihan teks editor yang khusus digunakan
untuk desain web!
4. Berikan definisi istilah – istilah berikut :
- HTTP
- HTML
- URL
5. Berikan penjelasan tentang web statis dan web dinamis
pengaruhnya terhadap cilent sebagai pengguna web dan
server sebagai penyedia layanan!