STANDAR KOMPETENSI Menggunakan internet untuk keperluan informasi dan komunikasi
KOMPETENSI DASAR Membuat Desain Web
INDIKATOR Pengenalan Website Deskripsi Singkat Proses Tampilnya Halaman Web Teknik Mendasain Halaman Web Pengenalan HTML
TUJUAN PEMBELAJARAN Siswa dapat mengenal tentang Website Siswa dapat Mendeskripsi secara Singkat tentang Proses Tampilnya Halaman Web Siswa dapat mendomonstrasikan Teknik Mendasain Halaman Web Siswa dapat Mengenalan tentang HTML Siswa dapat memahami Kode dalam bahasa HTML untuk mendesain sebuah website. Siswa dapat membuat website pribadi
MATERI PENGENALAN WEBSITE Saya yakin kita semua setuju bahwa internet hampir tidak terpisahkan dsri kehidupan kita saat ini. Berbagai website bermunculan setiap harinya, perkembangan jenis dan desainnya sangat bervariasi dan merupakan kreativitas manusia. Jika anda perhartikan, banyak bermunculan website instan terutama yang berbentuk blog, seperti blogger dan wordpress. Namun demikian, jika kta mengingkan tampilan yang berbeda dari yang lain, kita perlu mendesain sendiri web yang kta miliki
Deskripsi Singkat Proses Tampilnya Halaman Web Proses tampilnya sebuah halaman website di broser sebenarnya melibatkan HTML (Hypertex Mark up Language) HTML ini adalah bahasa pemograman yang digunakan untuk mendesain sebuah halaman web. Sebenarnya, proses tampilnya sebuah halaman web di broser sangat sederhana. Baiklah saya akan jelaskan sebagai berikut: Saat anda ingin mengakses sebuah halaman web, misalnya : http://kursus-oline.com/ord.html, anda akan mengetikkan alamat web tersebut di broser (Firefox, Internet Explorer, Chrome, dan lain broser yang anda gunakan. Dalam contoh ini, saya umpamakan halaman web yg diambil tersebut adalah halaman web kosong yang berlatarbelakanng merah. Broser akan mengirimkan permintaan anda tersebut ke server kursus-oline.com Server kursus-oline.com akan merespon anda dengan mengirimkan halaman yang diminta dalam bentuk teks yang berisi kode-kode HTML melalui internet dan dikirimkan kembali ke broser anda. Isi kodenya sangat sederhana, seperti berikut ini:
<HTML> <BODY BACKGROUND=RED> </BODY> </HTML> Browser yang anda gunakan akan membaca file HTML tersebut dan menerjamhkan kata-kata <BODY BACKGROUND=RED> sebagai intruksi untuk membuat latar belakang halaman web yang ditampilkan berwarna merah. Browser akan memblok latar belakan menjadi merah, dan menampilkan untuk anda. Jadi membuat sebuah desain web, berarti anda akan belajar bagaimana cara membuat halaman HATML yang nantinya akan ditampilkan oleh browser pengunjung. Untuk memperjelas proses tersebut mari kita coba praktikkan pembuatan sebuah halaman HTML sederhana. Anda akan mendaptkan realita bahwa membuat sebuah halaman HTML itu tidaklah sesulit yang anda bayangkan.
Membuat Halaman Web Dalam waktu kurang 15 menit, saya yakin anda bisa membuat halaman HTML yang benar-benar bisa anda upload ke internet asalkan anda benar fokus bekerja. Kalau anda tidak percaya silahkan coba buat berikut ini. Saya yakin anda mengenal Notepad. Silahkan buka aplikasi tersebut (Klik Star<>All Program >Accessoiris>Noteped). Dalam Noteped Ketik kode seperti berikut ini <HTML> <BODY BACKGROUND=RED> Halaman website Pertama Buatan Saya !!! </BODY> </HTML> Setalah diketik silahkan simpan file noteped tersebut. Perhatikan baik-baik intruksi ini. Simpan dengan nama’’coba html’’tuliskan lengkap dengan tanda kutip gandanya di field file name setelah itu ,klik save.(ingat baik-baik folder tempat anda menyimpan file tersebut). Sekarang kita akan melihat hasilnya. Silakan buka internat exsplorer,lalu kilk file>open buka file coba.html. Halaman website pertam anda sudah jadi. Tentu saja ini masih dalam tahap yang sangat sederhana. Namun, dalam waktu yang singkat, anda akan memahami cara memperpindah tampilan dan membuat website sendiri dengan mempelajari materi yang pernah aku kasi
Memahami HTML HTML adalah bahasa yang memplopori hadirnya web dan internet. Bahasa ini merupakan bahasa pemrograman yang digunakan oleh sebagian besar situs web yang anda kunjungi. HTML saat ini dikenal oleh hampir semua komputer yang ada didunia dan merupakan cara paling univesal untukmembuat sebuah dokumen. Mungkin HTML tidak memiliki variasi format terbaik dan bahkan tidak menjamin bahwa halaman web yang anda buat akan tampak sama persis di setiap browser , tetapi perlu diingat bahwa tanpa HTML, tidak akan ada Internet.
Bahasa HTML sesungguhnya akan sangaat mudah untuk dipelajari setelah anda memahami dasarnya. HTML dibuat dari tag. Sebuah tag adalah sepotong teks yang dikurung oleh <>, bentuknya seperti ini <tag> Mungkin abda berfikir mengapa perlu tag? Tag diperlukan oleh browser untuk membedakan mana yang perintah HTML dan mana yang teks biasa.
<tag></tag> Perluh anda ketahui bahwa ada 2 macam tag, yaitu tag pembuka dan tag penutup. Bedanya sangat mudah dilihat, yaitu adanya tanda / sebelum tag penutup </tag> Secara berpasangan, kedua jenis tag itu akan tampak seperti ini (ingat, kata-kata tag nantinya akan digantikan dengan berbagai perintah- perintah HYML) <tag></tag> Berikut penjalasannya dengan contoh nyata. Saya akan memberikan salah satu contoh yang baik yaitu tag<center> yang digunakan untuk menampilkan teks di tengah. <center>teks yang ditulis disini akan ditampilkan rata tengah</center>
Contoh Sebuah Dokumen HTML Perhatikan kode di bawah ini. <html> <head> <title>ini Judul</title> </heda> <body> Disini tempat menuliskan isi utama dokumen HTML. </body> </html>
Pencerahan Secara umum, struktur penulisan dokumen adalah seperti kode-kode di atas. Anda akan menggunakan semua tag tersebut pada setiap dokumen HTML yang anda buat. Saya akan menjelaskan lebih lanjut mengenai perintah di setiapbaris. <HTML> Menginformasikan browser ini adalah awal sebuah dokumen HTML <head> Awal bagian heder. Bagian heder berisih berbagai pilihan konfigurasi untuk halaman anda (contohnya Judul halaman)
Pencerahan <title>Ini Judul</title> Baris ini membuat browser menampilkan judul halaman. Judul ini akan muncul di bagian paling atas sebelah kanan browser. </head> Akhir dari bagian header. <body> Disini tempat menuliskan isi utama dokumen HTML. </body> Semua yang berada di antara kedua tag ini adalah isi utama dari halaman anda. Disinalah tempat semuah teks, gambar, tabel, dan lain-lain akan anda tuliskan. Bagian ini merupakan bagian yang paling penting dari halaman HTML anda. </html> Akhir halaman HTML anda. Latihan: Coba buat agar tulisan tersebut berada di tengah.(petunjuk: gunakan tag<center>). Jika lupa, kembali ke topik sebelumnya
Tag <font> Tag <font></font> adalah salah satu tag yang paling sering dugunakan. Penggunaan tag tersebut tanpa tambahan atribut apapun(saya akan jelaskan tetntang atribut ini di slide berikutnya) hanya akan menampilkan teks yang diapit oleh tag tersebut. Kita akan mulai dengan contoh sederhana yang hanya menampilkan teks: Selamat datang di Homepage Saya Untuk menampilkan tulisan tersebut di layar, anda cukup menambahkan baris berikut ini diantara tag <body> dan </body>: <font>Selamat datng di Homepage Saya</font>
Silahkan lakukan perubahan tersebut di jendela kode di samping kiri Silahkan lakukan perubahan tersebut di jendela kode di samping kiri. Keseluruhan kode anda akan menjadi seperti ini: <html> <head> <title>Homepage Pribadi saya</title> </head> <body> <font>Selamat datang di Homepage Saya</font> </body> </html> Silahkan pratikkan kode di atas dan bukalah melalui browser untuk melihat hasilnya . Anda akan melihat teks tersebut ditampilkan menggunakan font Time New Roman berukuran standar warna hitam. Mungkin tidak terlalu menarik sebagai tampilan awal. Namun, itu merupakan permulaan yang bagus. Kita akan lakukan sesuai nanti untuk membuatnya lebih menarik
Size, Color, dan Face(Ukuran, warnah, dan Jenis Huruf) Judul tersebut menggambarkan 3 hal yang bisa Anda lakukan terhadap teks anda. Sesuai janji saya, kita akan memulai menggunakan atribut pada tag<font> ini Atribut adalah tambahan keterangan pada tag dan formatnya adalah sebagai berikut: <tag atribut=“nilai atribu”, atribut 2=“nilai atribut 2”,....) Contoh: <html> <head> <title>Homepage Pribadi Saya</title> </head> <body> <font face=“Arial Black” size=“7” color=“red”><center> Selamat datang di Homepage Saya </center></font> </body> </html>
Tabel font size HTML Catatan: Ukuran Huruf HTML Ukuran Huruf Standar 1 8 pt 2 10 pt 3 12 pt 4 14 pt 5 18 pt 6 24 pt 7 36 pt Catatan: Untuk membuat teks rata kiri caranya adalah <p Align=“left”>teks</p>
FORM Form banyak digunakan untuk membuat biodata bagi yang ingin mengikuti suatu kegiatan dan buku tamu bagi yang ingin berkunjung atau masuk ke suatu situs atau sejenisnya. Tag<From> digunakan untuk menterjamahkan form dan diikuti oleh dua atribut, yaitu METHOD untuk pengelolaan from dan ACTION untuk menentukan direktori file Tag<Textarea> digunakan untuk membuat kotak isian teks dan diikuti oleh atribut Nameuntuk membuat nama objek pada teks area, ROWS untukmenentukan spasi jumlah baris teks area, dan COLS untuk menentukan spasi aturan kolom. Tag <Input> digunakan untuk meminta masukan dari pengguna, dengan beberapa jenis atribut, seperti NAME untuk masukan objek input, SIZE untuk ukuran kotak input, MAXLENGTH untuk menentukan jumlah teks maksimun,VALUE menentukan nilai tetap sebuah objek input, CHEKED untuk menentukan pilihan pada checbox atau radio button, dan TYPE untuk menentukan tipe input
Sebagai contoh silahkan coba buat berikut ini: <html> <head> <title> Membuat Home Page Sederhana </title> </head> <body> <form> <center><h1>Biodata Saya</h1></center> <hr> <pre> Nama :<input type="text" name="nama"> Tempat Lahir :<input type="text" name="tempat lahir"> Tanggal Lahir :<input type="text" name="tanggal lahir"> Jenis Kelamin :<input type="radio" name="jkelamin" value="pria">Pria <input type="radio" name="jkelamin" value="wanita">wanitia Hobi : <textarea name=hobi rowws=5 cols=50> </textarea> </pre> <center><input type="submit" value="Kirim" name="kirim"> <input type="reset" value="Batal" name="Batal"></center> </form) </body> </html>
EVALAUASI
PROFIL