Tutorial Membuat Website yang "Smart"

Semester lalu saya sempat mengenalkan kepada siswa saya untuk belajar membuat website. Yah yang penting bisa menampilkan suatu halaman saja dulu. Berupa halaman statis. Tentu sebelumnya saya perkenalkan beberapa komponen dasar html. Setelah mereka ngeh… saya minta buka notepad, ini adalah senjata utama belajar html. Selanjutnya mereka mulai belajar mulai membuat script html sederhana, menyimpannya, dan membukanya di browser. Saya sendiri juga belum lama sedikit ngerti html ini. Maklum saya adalah guru TIK gadungan, karena kepepet belum punya guru TIK aseli. Apa boleh buat karena sekolah sudah kebelet mau nerapin KBK.

Dua kali pertemuan mereka sudah mulai mengenal prinsip dasar html. Awalnya mereka merasa ribet. Pertemuan berikutnya saya kenalkan cara praktis belajar membuat web dengan memanfaatkan website w3school.com. Reaksi mereka “duh bahasa inggris pak”. Saya meyakinkan mereka bahwa bahasa ingris di situ tidak terlalu sulit untuk dipahami. Memang tidak semua yang akhirnya bisa menikmati belajar di w3school.com, tapi dengan belajar berpasangan mereka bisa saling berdiskusi.

Di web ini siswa bisa banyak belajar dan eksperimen sendiri, karena selain tutorial yang lengkap juga disediakan fasilitas khusus. Pembahasannya sangat mendetail, dari A hingga Z. Saya sebagai guru tinggal mengarahkan dan sesekali memberikan penjelasan kepada siswa.

Dengan tersedianya fasilitas memukau, yang sependek saya tahu tidak ada di web lain, siswa pasti tidak banyak mengalami kesulitan. Fasilitas ini adalah Try-It-Yourself On-Line Examples. Tampilan halaman dengan 2 jendela yang terbuka secara langsung, pada jendela sebelah kiri tempat menuliskan teks dan tag html sedangkan di sebelah kanan adalah output-nya. Jadi tidak perlu lagi membuka notepad dan browser. Tinggal edit dan dan mengklik tombol Edit the text and click me.

Selain Tutorial HTML, pada web w3school juga terdapat tutotial lain yang terkait program pembuatan website tingkat lanjut, dengan bahasan yang sangat mudah untuk dimengerti. Di antaranya adalah tutorial XHTML, CSS, XML, JavaScript, VB Script, PHP, AJAX, dan bahasa yang lebih hebat lainnya. Satu hal lagi… disediakan quizz sekedar untuk uji kemampuan sesaat setelah mempelajari beberapa bagian. Juga tersedia cukup contoh.

Untuk bisa menguasai semua itu diperlukan lebih banyak waktu. Jika berharap pada saat belajar disekolah jelas tidak cukup waktu. Maka pelajaran di sekolah hanya diberikan dasar-dasar saja, selanjutnya pengembangannya tergantung kemauan siswa asal tersedia koneksi internet.

Sayapun semula kesulitan mencari buku terkait tutorial html, kalaupun di internet ada dan juga berbahasa indonesia, masih kalah smartnya di bandingkan W3School ini setelah saya menjumpainya.

Anda yang ingin mendalaminya bisa mencobannya sendiri.

51 responses

  1. Wah Pak Urip membuat saya bangga, 7 tahun lalu saya juga belajar dari tag HTML dasar dengan notepad dulu Pak, alhamdulillah setelah dasarnya mantap, ketika menggunakan Editor jadi lebih gampang dan sangat teliti.

    BTW semester ini saya juga ngajar salah satu SMU juga untuk mata pelajaran TIK mengenai pembuatan Website, selamat bekerja Pak dan tetap berbagi…

  2. Sungguh beruntung siswa-siswa yang diajar Pak Urip. Saya dulu boro-boro belajar html… lha wong komputer aja ndak pernah pegang di sekolah.

  3. Bagaimana kalo di kelas TIK siswa diajak untuk ngeBlog? di SMP Madania katanya sudah dipraktikkan. Intinya siswa tinggal fokus ke content saja, sembari latihan menuliskan gagasan di kepala. Memang dasar2 HTML sederhana perlu diajarkan. Namun tidak seluruh siswa diharapkan menjadi web programmer kan?

  4. Iya, saya sempat bingung juga dengan kurikulum, namun saya lebih memilih berpikir “mungkin” pelajaran ini hanya sekedar pengenalan dulu kalo tertarik mungkin bisa melanjutkan di jenjang berikutnya seperti SMK dengan Prog Studi Multimedia, atau kursus-kursus..

    Sekarang permasalahannya adalah konten lah yang berperan dalam hal penyebaran info di internet, …

  5. Sebenarnya kalau kita punya komputer dan koneksi internet (sukur2 yang gratis) belajar itu tidak harus di bangku sekolahan. Terus terang saya banyak mendapatkan ilmu dari komputer dan internet. Di bandingkan dari apa yang saya dapatkan di kelas.

    Kuncinya memang bahasa inggris, walaupun ini memang menjadi kendala buat saya. Tetapi sedikit demi sedikit dengan keterbatasan saya akhirnya bisa juga. Yang dulunya tdk tahu html, sekarang dikit2 jadi tahu.

    Karena memang di internet kita bisa cari ilmu apa saja (ilmu hitam ada tdk ya?). Kita bisa ikut milist2, forum2, apa saja sesuai dengan minat kita.

    Maaf, ini hanya sekedar share saja….

  6. Terima kasih Pak Urip, saya akan coba-coba melongok alamat website yang Bapak berikan….

  7. >> Syarif Winata
    Yah itu kebetulan saja ada akses internet di sekolah, kalau tidak yah gak bakalan juga bisa pak. Ok sama-sama selamat bekerja, BTW sekolah saya baru aja mulai libur.
    Soal kurikulum TIK ini masih belum jelas maklum kita dijadikan bahan eksperimen pembuat kebijakan di atas sana. Tapi improv boleh saja saya kira.

    >> Amd
    Weh gitu toh… apalagi saya, jaman saya sekolah dulu komputer saja masih di hayalan. Ini karena memang sudah jamannya. Di sekolah lain pasti lebih hebat lagi, apalagi kalo guru pinter siswa-nya pinter dan pada punya kesempatan akses internet… klop.

    >> dirac
    Siswa saya sudah saya kenalkan dengan blog dan diajari juga, tapi sayang mereka tidak ada yg mau melanjutkannya, mungkin belum merasa benar2 perlu untuk itu. Padahal setiap ada jam istirahat mereka boleh aja makai internet, tapi perutnya lebih dirasa penting.
    Memang tidak harus semua jadi web programmer, guru melakasnakan di kelas karena ada tuntutan kurikulum ttg itu.

    >> Prayogo
    Sampean bilang kuncinya di bahasa Inggris saya jadi inget, bahwa bahasa adalah segalanya… dengan bahasa kita bisa hidup. Begitulah bahasa kebutuhan primer dalam berkomunikasi, termasuk belajar itu.

    >> Thamrin
    Yah silahkan semoga ada manfaatnya.

  8. cihuyyyyyyyyyyyy
    liburan kmrn (sabtu-senin) baru baca buku html-an πŸ™‚
    dan intinya — pusing πŸ™‚

  9. Komentar dikit… belajar dari website gini, kemungkinan sanggup belajar sampe tahap akhir = keciiil banget.

    Kenapa?
    Soalnya belajar dari web itu berati nggak pake guru/pengawas/instruktur… jadinya keburu males di tengah jalan. Ntar skill HTMLnya malah setengah-setengah… kayak gw πŸ˜€

    Kalo mau serius belajar html sih enaknya kursus, tapi waktu yang diperluin lebih banyak sih. Makanya lebih enak minta dibikinin orang laen. πŸ™‚

  10. memang kalau siswa hanya menerima dari yg diajarkan saja tidak cukup.
    siswanya juga harus aktif belajar sendiri.
    tapi kadang2 banyak anak yang gak sabaran (pengen cepet2 bisa bikin yg keren) jd patah semangat dan tidak berminat melanjutkan.
    smoga hal itu gak terjadi.. πŸ™‚

  11. yoi, w3school itu website yang oke banget walaupun gw termasuk orang yang gak memanfaatkannya πŸ˜€

    karena menurut gw yang paling penting itu isi dari website tersebut. gak bisa bikin website gak masalah! tinggal download template, terus edit aja di dreamweaver, nah udah gitu tinggal masukin content-content kita. design bagus bisa didapat dengan mudah, tetapi content tetap harus murni dari kita sendiri

    jadi saya pikir untuk anak sekolahan, tidak perlu lah kalau sampai mengajari bikin html, memang benar dasar html itu perlu, yah setidaknya mereka bisa ngerti kalau di website itu ada kode-kode yang harus di encode oleh web browser baru bisa menjadi tampilan website yang bagus.

    lebih baik diajari bikin blog saja, prioritaskan siswa untuk diajari menulis supaya mereka terbiasa menyampaikan ide-ide mereka. ilmu menulis inilah yang pasti akan dipakai oleh mereka, kalau ilmu html belum tentu mereka kelak akan jadi web designer semua bukan?

    ok para guru, lanjutkan pekerjaan mulia anda!

  12. Try-It-Yourself On-Line Examples


    ini diaaa yg aku mau! Kadang kalo mau liat harus save dulu trus uplot. Kadang suka ribet gitu, jadi males ngutak atik lagi. Kalo gini jadi mayan enak.

    Dari dulu blajar html gak beres2 deh. Smoga ilmuku nambah deh tahun ini πŸ˜€
    Thx ya pak

  13. >> luthfi
    Mosok pusing… saya juga, cuman kalau dipraktekin langsung pusing radak kurang deh.

    >> Zhanzhe
    Belajar mandiri donk

    >> Fany
    Yah gak bisa maksa juga sih, tapi standart yg dikurikulum gak tinggi-tinggi amat kok.

    >> Winerwin
    Setuju pak… ibaratnya kan itu alat, yg penting orang yg makai alat. Yah Suatu saat nanti saya yakin Blog akan masuk kurikulum TIK…

    >> Neeya
    Makanya saya bialng ini media smart untuk belajar… Ok selamat belajar

  14. keren… makasih pak, kebetulan saya paling mumet klo ngajarin adik..udah berbusa gak ngerti2 juga…thanx

  15. Langkah maju, siiip … ntar murid pak Urip ketika mhs sudah oke tinggal nerusin css.
    Pakai w3 sekaligus nyuruh murid belajar bhs ing-ing rupanya … sambil menyelam minum air
    Salut
    πŸ™‚

  16. Saya suka slogannya w3schools: the best things in life are free.
    (Sedang) cocok buat saya yang baru netapin migrasi OS.
    Cool juga ngajak siswa belajar dg bahasa inggris. Bahasa masih menjadi sesuatu yang terajaib yang pernah dipelajari oleh manusia. Kata Bruner, perkembangan bahasa seseorang sih mempengaruhi perkembangan kognitifnya. Begitu ya, pak guru?
    Thx atas info bermanfaat ini.

  17. aku yo gelem dadi murit e, Pak Guru.

  18. mantaf… pak guru.

  19. Dah tak buka www-nya. Buat yang mau mendalami, mungkin sangat bermanfaat. Buat aku? Sekedar referensi aja. Toh aku gak mau jadi pakar gituan. Kalau butuh ya tinggal minta tolong, atau kasih aja proyeknya ke sampeyan, hehehe… Aku tak mikir yang lainnya aja… Sukses Pak Urip!

  20. Keep on sharing Pak Guru!!

  21. mantab…maju terus pak!…jalannya masih rata & lurus ini πŸ™‚

  22. Habis gitu diajarin tools pak…
    Seperti Jomlaa, atau wordpress gitu.
    Jaman sekarang sudah jarang ber-HTML dengan berkotor-kotor di script, orang maunya yang praktis.
    Tapi kalo buat dasar sih, kayak katanya Rinso, nggak ada noda nggak belajar.
    Ya berkotor-kotor dulu di script. πŸ™‚

  23. nah,gini emang guru kita yang baik! memiliki wawasan yang luas termasuk IT..eh,pak guru,tapi jangan diajari donlot yang enggak-enggak lho…
    πŸ˜›

  24. turut ngomporin. Monggo pak, dihajar saja murid-muridnya dengan ilmu. supaya nanti tidak ada penyesalan di belakang hari.

  25. Pingin bikin web tapi tidak kuliah di TI? Mudah, tak kasih tips;
    1. Berdoa, tumbuhkan niat dan semangat
    2. Melamarlah sebagai Operator warnet
    3. Googling tentang pembuatan website
    4. Rajin-rajinlah chating dengan anak-anak kuliahan yang ambil TI
    5. Korek ilmu mereka (anak-anak TI)
    6. Jangan malu bertanya pada mereka, tunjukkan maksud dan tujuanmu.
    7. Good luck

    * πŸ˜€ Pengalaman pribadi

    Salam kenal!!

  26. Nah, aku pengen profesi guru dengan mata pelajaran seperti itu. Guru dengan mental seperti Great Teacher Satrianto, eh Onizuka, dink πŸ˜€

  27. >> semua saja deh
    Yah saya hanya sekedar berbagi cerita, kita hanya bisa memanfaatkan dan semoga itu bermanfaat untuk bekal ilmu berikutnya.

  28. …Salam kenal dari saya di jember….
    Wah infonya sip deh……InsyaAllah amal kang Urip digowo sampek neng akhirat….. (jare ngono lek duwe ilmu seng bermanfaat…)

    Helgeduelbek: Amiiin, semoga begitu dan bener2 ada manfaatnya

  29. aku ngajar TI dan Inggris di tmg. tapi udah setahun ngajar aku belum juga dibeliin komputer ama sekolah. duitnya sih ada tapi katanya takut dicuri orang. aku ngajar ndak dibayar lho. aku cuman nyumbang ilmu aja. ada tanggapan….

    Helgeduelbek: Kalau takut dicuri mosok gak bisa diantisipasi? Wah… kalau banyak orang kayak sampean wis…jan Endonesa merdeka beneran.

  30. hahahaha joesatch nonton gto toh

    dulu itu film favorit saya juga tuh, setiap ketemu temen suka cerita2 πŸ˜€

  31. mas bos tolong aku di cariin tutorial belajar dasar html dengan notepad yang lenkap itu saja mas bos atas perhatiannya trim’s ya bossss

    Helgeduelbek: Wah coba dengan mencari di google saja. pakai kata kunci “tutorial html” buanyak.

  32. salam perkenalan buat bapak/ibu guru yang sudah sangat senior dengan pelajaran TIK.
    Saya guru TIK dengan disiplin ilmu yang jauh dari TIK…mohon bapak/ibu sudi kiranya berbagi ilmu dan pengalaman kepada saya. Terima Kasih …

  33. Salam bahagia untuk bapak/ibu guru yang sudah banyak makan asam garam. Saya Guru baru Seni dan Budaya di SMK Teknik Informatika Patria Dharma Selatpanjang-Riau, mohon bantuan bapak / ibu guru Seni Budaya bagaimana trik-trik yang tepat sasaran untuk siswa didik saya.Kalau ada artikel atau informasi tentang seni, sangat bahagia sekali jika bapak/ibu guru memberikan kepada saya di adiratana@yahoo.com.sg Terima kasih, semoga kaum guru dimanapun berada semuanya berbahagia.

  34. halo mas salam kenal dari saya ada yang ingin saya tanyakan:
    1.Bagaimana cara menginstal GHH(google hack honeypot)pada sebuah websites berbasis open source
    2.dan bagaimana cara menginstal program pencatat jumlah pelawat(pengunjung) seperti bravanet
    3.mana lebih baik menggunakan firewall atau internet security untuk sebuah websites dan tolong sebutkan produk yang bagus

    Helgeduelbek: Walah saya ini belum punya kemampuan dan pengetahuan seperti yg sampean tanyakan, saya ini pemula untuk masalah website.

  35. muridnya pada seneng donk. 2 minggu lalu guru tik saya mengatakan rencana mau ngajari webdesen pake dreamweaver, saya usulin mbok diajarin html dulu, katanya terlalu rumit. Saya malah belajar dreamweaver dari dulu nggak bisa2 je.

  36. salut banget saya 2 p. urip. jika saja disetiap sekolah ada 1-2 urip-urip yang lain, aku yakin mau pake kurikulum apa aja nggak masalah, soalnya pasti kepedulian dan kreatifitas mereka akan melakukan yang tebaik buat siswanya. insaallah 3 tahun mendatang mutu pendidikan kita pasti tlah jauh lebih baik. GOD BLESS YOU.

    “Terimakasih bu, ini semua karena ada kesempatan saja, saya yakin di sekolah lain yang kebetulan memiliki akses 24 jam sehari bisa melakukan hal yang sama. Hanya saja mungkin usaha mereka tidak dipublikasikan.”

  37. halooo salam kenal aq ni anak SMU d kota bdg nah bulan ini mau ngehadepin olympiade TIK but aq baru perdana ikutan ini jd blooom punya experience githcu boleh gak aq minta gambaran soal nya dan apa tips buat sukses menjalaninya

  38. mat kenal untuk bapak/ibu guru2 TIK, sy guru tik tapi krn teterbatasan
    fasilitas dan sarana belajar, sy bingung materi apha yg co2k utk siswa
    sy, krn kalau ngikuti silabus yang ditetapakan kami ngak bisa ngikuti…
    atas saran dan usulnya sy ucapkan trim’s

  39. trimz, lagi niat bantu ortu bikinin web. semanget terus pak!

  40. Servicenya sudah unavailable tuh Pak Urip………

  41. boss kalau mau jago web sih coba cari script CMS di http://www.tanda-tanya.com

  42. Makasih mas buat tutorialnya..sangat membantu bgt untuk saya…!!

  43. duh pa urip saya ko jadi malu… dah mau lulus kuliah tp ko sprtinya kalah ama murid-murid yang bapa ajarkan. beruntung skali punya guru sprti bapa.

    skripsi saya tentang memafaatkan blog sebagai situs pengetahuan…saya punya ide mengenai isinya tp tuk membuat tampilannya maksimal n menarik saya masih blm ngeh”’
    baru ini saya liat blog bapa n spertinya bapa adalah orag yg tpat buata mnjawab prtanyaan2 sy berikutnya. thanks yaa
    Qrim ke email saya ya pa….
    sprtinya sy prlu share am bapa

  44. wow, keren tuh belajar abis-abisan. gitu deh kalo mo pintar, susah dulu baru bisa dipetik hasilnya. yoy yoy suer deh, senengnya minta ampun bila berhasil. buktinya??? ada dong, banyak deh, salah satunya ya saya dong. heu heu heu
    salam kenal ya

  45. Mas gimana cara buat slide yang gambarnya dari kita sendiri untuk ditampilkan diblok??

  46. Wah.. lumayan nih.
    Nah kalo dah punya dokumen HTML, tinggal di upload di internet.
    webhosting gratis di: http://freewebhosting.cjb.net/

  47. wah beruntung murid Pak Urip sudah bisa kenal HTML, dulu waktu jaman saya sekolah cuma kenal mainan MIRC doank.

    Dulu saya jadi kenal HTML juga bukan dari buku pelajaran TIK ataupun pelajaran di kelas. Tapi gara-gara beberapa malam nongkrongin FrontPage-nya microsoft dan berkali-kali tekan tombol preview. Sekarang sepertinya sudah lebih lengkap dan mudah dengan w3school.

  48. Pa Urip saya adalah guru TIK baru di Sekolah swasta Jakarta. Yang bikin saya pusing sekolah tersebut menerapkan kurikullum IGCSE.
    Saya sudah coba browsing Sylabus dan contoh soal ujiannya, dan ternyata?? Ilmu saya belum sampe situ. Ada yang bisa bantu saya Ga???

    Perlu diketahui kalo cuma Word Processing, spreadsheet, dan database, rata-rata murid di sekolah itu sudah bisa.

  49. waH makasih loh pak…

    hohoho saya dikasih tugas sama guru TIK saya untuk bikin proyek akhir, satu buah situs, terserah mau pake apa aja, dari html, flash, wpm, dll…

    saya maunya pake html supaya dapat nilai tambah… cuma saja kan ribet ntar… makanya cari2 contekan dlu…

    lagian belum semua isi html saya kuasai…

    hohoho makasih ya semoga bermanfaat

  50. huah,,, itu masukan bagi saya,,karena pelajaran TIK sy skng, adalah tugas pembuatan web. bisa lebih dijelaskan, ttg penggunaan dreamweaver??
    pekerjaan sy setengah jln,, blm lengkap. mungkin ada saran lain pembuatan web