AB . Mengenali Konsep Teknolog' Aplikasi Web Baca teks berikut dengan saksama! Sumber: t/a we com, les 12 Septeber 217 pull 07.18 Wi (Gambar 1.1 HTML merupakan materi dasar saat akan merancong sebuah web. Perkembangan teknologi dan internet yang cukup pesat saat ini pastinya memberikan manfaat cukup besar pada kehidupan. Kamu pastinya tidak asing dengan sebuah web, bukan? Karena secara ‘dak langsung saat kamu mengakses internet kamu akan membaca beberapa halaman web yang ditampilkan. Sebuah halaman web sama halnya dengan program aplikasi pada komputer, yaitu membutuhkan kode program untuk merancangnya. Untuk merancang sebuah web sendiri terdapat eberapa kebutuhan yang digunakan seperti: XML, CSS, JavaScript, dan masih banyak lagi. Pada bab ini akan dibahas materi tentang konsep teknologi aplikasi web yang merupakan } bahasa dasar dalam pembuatan sebuah web. Seseorang yang akan merancang sebuah web haruslah } menguasai terlebih dahuki mengenai HTML yang merupakan singkatan dari Hypertext Markup Language. Pada HTML sebuah teks biasa dapat memilki fungsi lain, seperti fungsi link. Hal inila yang disebut hypertext pada HTML. Pada HTMI, terdapat beberapa teks yang berada di dalam sebuat ‘anda akan menjadi tebal. Hal inilah yang disebut dengan markup language. HTML sendiri memilki beberapa versi dengan pengembangan di setiap versinya. Saat ini vrsi terbaru adalah HTMLS. Terdapat beberapa kelebihan pada HTMLS, antara lain fitur video dan audio intuk media pemutar file multimedia, fitur kanvas untuk menggambar menggunakan script code, $f, mengurangi kebutuhan untuk plugin eksternal, dan masih banyak { kelebihan lainnya pada HTMLS. {Ayo pelajari materi pada Bab lini agar kamu memahami mengenal HTML. Dengan begitu, kamu { akan lebih mudah untuk merancang sebuah web yang kamu butuhkan! Pemnrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIPada dasarnya WWW merupakan singkatan dari frasa kata World Wide Web. WWW adalah kumpulan dokumen multimedia yang saling bertautan dengan menggunakan tautan hiperteks. HTML (Hypertext ‘Markup Lariguage) merupakan bahasa standar web yang didefinisikan dan dikelola penggunaannya oleh W3C (World Wide Web Consurtium). ‘Setiap komputer dan perangkat (modem, router, smartphone, ‘mobile, dan lain-lain) yang terhubung ke Internet diberi alamat IP numerik yang unik (IP singkatan dari Internet Protocol). Sebagai contoh, komputer yang dihosting google.com memiliki alamat IP 173.194.34.99. World Wide Web adalah koleksi besar file elektronik yang tersimpan di banyak komputer seluruh dunia. Uniform Resource Locators atau URL adalah alamat yang digunakan untuk menemukan file. Informasi yang terkandung dalam URL memberi kemampuan untuk berpindah dari satu Sumber: dot ingle. doses Aer 208 pu halaman web yang lain hanya dengan klik. eo (Gambar 1.2 lustrosi Wold Wide Web. ‘A. Jadl Kegatan : Mengientifias Cara Kerja Sebuah Web i B, JenisKegiatan Togas Kelompok : © Tujuan Keaton 1) Peserta didik dapat menjelaskan cara kerja web dengan benat. (KO 3) 2) Peserta didik dapat mendemonstraskan cara kerja web denganterampil. KO 4) Langkah-Langkah Kegiatin: 1. Buatlah sebuah kelompok yang beranggotakan 3-4 orang secara adil 2. Kemudian, amatilah Gamibar 1.3 berikut iit Tesponses Sumber p/n mailer ors tse 2 Moret 2018 put 14008 * Gamba 1.3 llustras!sederhana cora kerja web. Hasilanalisis: 3. _Diskusikanlah dengan kelompokmu mengenaicarakerja sebuah web sehingga.serdapat memperoleh { informasi yang diminta pada sebuah web! Hasildiskusi: . peu) Pemrograman Web dan Perangkat Bergerak Kompetensi Keablian Rekayasa Perangkat Lunak SMK/MAK Kelas XI{ 4. Buatlah sebuah diagram mengenai cara kerja sebuah web! Hasil diskusi: 5. Kesimpulan: tee) TEESE) | sebuah URL lengkap umumnya ter dar tiga komponen: protokol, nama situs, dan path absolut ke dokumen, } atau sumber daya, seperti contoh, { Jelaskanlah mengenai alamat URL di atas! Penyelesaian: http://, pertama yang dilakukan adalah URL menentukan protokol yang akan digunakan untuk proses tertentu. wwrw.iImukomputer.org, untuk mengidentifkasi situs dengan nama domainnya. Selanjutnya /2008/10/24/ troubleshooting-isco-router/, merupakan path absolut melalui drektori pada server ke dokumen HTML yang. £ £ diminta, frst.htmt { Bagalmana pendapatmu: (minimal 20 kata) pa alasannya: (minimal 30 kata) HTTP dan HTTPS ialah kode bahasa protokol yang tidak asing lagi bagl pengguna internet. Kode ini tak jarang di jumpai saat hendak melaksanakan browsing atau membuka halaman website tertentu, Tetapi apa perbedaan ‘Hypertext Transfer Protocol (HTTP) merupakan satu buah protokol jaringan lapisan aplikasi yang difungsikan { untuk sistem kaber terdistribusi, kolaboratif, dan menggunakan hipermedia. Sedangkan Hypertext Transfer { Protocol Secure (HTTPS) memilki pengertian yang sama dengan HTTP. Hanya saja HTTPS memilik Kelebihan fungsi di sektor keamanan (secure). HTTPS ditemukan oleh Netscape Communication Corporation, Bagaimana pendapatmu: (minimal 20 kata) Pemrograman Web dan Perangkat Bergerak Kompetens! Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIengembangan Web Browser Dalam pembuatan sebuah web, diperlukan beberapa tahap yang dikerjakan oleh masing-masing abil untuk menjadikan web yang dibuat lebih dinamis. Terdapat beberapa profesi dalam pengembangan sebuah aplikasi web. Berikut adalah beberapa profesi dalam pengembangan web. 1. Web designer adalah sesorang yang mempunyai tugas untuk mendesain tampilan sebuah web. 2. Webpprogrammer adalah seseorang yang harus menguasai CGI Perl, PHP, ASP, ava Script, Applet dan MySQL (Unix Base) karena web progfammer bertugas melakukan pengcodingan atau pemrograman web. 3, Web administrator adalah seseorang yang bertugas memelinara web khususnya pada server. 4. Web master adalah seseorang yang mempunyai tugas untuk mempertanggungiawabkan jalannya suatu web. 5, Web developer adalah keseluruhan team dari profesi pengembangan web. Web browser memiliki URI (Uniform Resource Identifier) atau pengidentifikasi seragam. URI merupakan suatu rangkaian karakter yang digunakan untuk mengidentifikasi sumber dan layanan atau ama di internet. Kamu pasti pernah menggunakan salah satu browser dengan mesin pencari google tintuk mencatisesuatu informasi. Terdapat beberapa web browser yang populer di dunia adalah sebagai berikut. 1, Mozila Firefox ‘Mozilla Firefox (aslinya bernama Phoenix) diciptakan oleh pemuuda berusia 19 tahun yang bernama Blake Ross, Pada awalnya browser ini bernama Mozila. Pertama iis dengan versi 1.0-nya pada tanggal 9 November 2004. Kemudian Mozila digabungkan dengan Firefox yang merupakan sebuah program yang diciptakan oleh Blake Ross bersama Dave Hyatt. Maka, setelah itu namanya berubah menjadi Mozila Firefox. Browser ini dapat dijalankan pada berbagai macam sistem operasi seperti Microsoft Windows, + Linuk, Mac OS X, dan FreeBSD (http://aribowo.net/mozlla-firefox-sejarah-dan-perkembangannya/). 2. Internet Explorer Internet Explorer biasa disingkat dengan IE atau MSIE, adalah sebuah penjelajah web dan perangkat unak tak bebas yane gratis dari Microsoft. IE tersedia untuk banyak versi Microsoft Windows, namun Microsoft telah berhenti mengeluarkah versi mutakhir untuk semua platform kecuali Windows XP (htp:// wwwsinauilkom.com/2015/02/pengertian-dan-macam-web-browser.htr)- 3. Google Chrome Google Chrome adalah sebuah aplikasiyang digunakan untuk menjelajah dunia maya seperti haloya Firefox, Opera, ataupun Microsoft Edge. ka Firefox dikembangkan oleh Mozilla, Google Chrome dibuat dan dirancang oleh Google. 4. Safari Safari merupakan sebuah aplikasi penjelajahan internet yang dlkembangkan oleh Apple. Browser initercakup dalam sistem operasi Mac OS X dan iOS. Safari pertama kal diills pada 7 Januari 2003 dalam bentuk beta. judul Kegiatan : Memahami Macam-Macam Web Browser Jenis Kegiatan _: Tugas Kelompok Tujuan Kegiatan = 1) Peserta didik dapat memahami dengan benar macam-macam web browser. (KO 3) 2} _Peserta didi dapat mempresentaskan kelebihan dan kekurangan web browser dengan terampi (KO 4) Gul Pemrograman Web dan Perangkat Bergerak Kompetens! Keahlian Rekayasa Perangkat Lunek SMK/MAK Kelas XID. Langkah-Langkah Kegiatan: 1. Buatiah kelompok beranggotakan 4 orang tanpa safing membeda-bedakan! 2 Berdasarkan materi di atas, berdasarkan periahaman kelompokmu apakah yang disebut dengan web browser? 3. ‘Setiap browser pasti memiliki kelebihan dan kekurangan. Lengkapilah tabel di bawah ini untuk lebih memaham kelebihan dan kekurangan sebuah browser! Tabel 1.1 Kelebihan dan Kekurangan Web Browser Mozila Firefox Internet Explorer Google Chrome 4. Setelah kamu dapat memberikan kelebihan dan kekurangan sebuah wieb browser. Pllhiah salah satu web browser yang user friendly menurut kelompokmu. Jelaskan mengapa kamu dan kelompokmu memilih web browser tersebut! Presentasikan hasilnya di depan kelas di hadapan teman-temanmul Web browser yang dip Alasannya: : , MULE ICUUne une clsceieil Pernahkah kamu mengalami, ketika sedang melakukan browsing atau pencarian mengenai suatu hal ‘menggunakan google chrome kemudian mengeluarkan pesan error saat memuat halaman web yang berjalan + | lambat atau tidak terbuka sama sekall. Bagaimana cara mengatasi hal tersebut? i Penyelesaian: ‘Cara mengatasi error ketika memuat sebuah halaman web yang berjalan lambat atau tidak terbuka yaitu pads pojok kil atas di bawah menu terdapat ikon refresh (reload current page), kemudian periksalah sambungan internet. Bersihkan cache (informasi yang disimpan oleh browser). Bagaimana pendapatmu: (minimal 20 kata) ‘Apa alasannya: (minimal 30 kata) * __Pemrograman Web dan Perangkat Bergerak Kompetens! Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIPermasalahan 1.4 Sescorang sedang melakutan browsing tibtibe browser yangia pak toa-tibamengalam crash yitu menutup send atau force lose, Browser yang mengslar cosh tidak hanya dalam oleh Safari saja browser terpopulr | | ainnya sepert Firefox, Chrome, Ie, dan Opera juga mengalami fel yang sama, Sagaimanakah mengatas hal | tersebut? | Panels: | penyebab dari browser yang sting mengalam cash sangatah berasam di antaranya vrs, bug boda sister | gperasi GPU dan RAM yang telly rendah Bal pengguna start yang ering mengalami crash ataupun error dan ka membuka browser tersebut terdapat nots ‘safari dak dapat membua halaman kare hone # fanda tidak terhubung keinternet” dapat mengatasny, yt dengan caremenonaktfan fur afer Suggestion. { Bagaimana pendapatmu: (minimal 20 kata) : i A. Pilihan Ganda Pilihtah satu jawaban yang paling benar dengan cara memberi tanda silang (0) pada huruf A, B, C, D atau E serta tuliskan alasannya! 4. Perangkat lunak yang digunakan untuk mengakses World Wide Web dari internet adalah ‘A. ‘web application D. web server B. web responsive E. web browser C. web administrator Alasan = « 2. Setiap perangkat komputer yang terhubung ke internet pasti memiliki sebuah alamat yang unik, alamat tersebut biasanya dikenal dengan sebutan .... A. dota D.- client Bout €. server C. ipaddress Alosan : 3. Alamat yang digunakan untuk menemukan sebuah file atau informasi disebut .. A. uniform resource locators D. server B. world wide web E. website C. internet protocol 2 Alasan Om Pemrograman Web dan Perangkat Bergerak = - Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XI4. Sebuah fasilitas hypertext yang mampu menampilkan data berupa teks, gambar, animasi, suara, dan multimedia adalah .... A. dekstop : D. web 8. application E. source code c view Alasan : 5. Seseorang yang bertugas memelihara web khususnya pada server dan juga harus menguasai jariangan merupakan tugas seorang .... A. web administrator D. web programmer B. web developer 2 £. web master C. web designer Alasan B. Uraian - Jawablah beberapa pertanyaan berikut dengan jawaban yang benar! 1. Uniform resource locators (url) memberikan kemampuan untuk berpindah dari satu halaman ke halaman yang lain hanya dengan mengklik link tersebut. Sebutkan sumber daya atau metode akses pada url tersebut! Jawaban + ms 2. Pembuatan sebuah web yang responsif pastinya akan memerlukan seseorang yang ahli sehingga menjadikan web lebih dinamis dan user friendly. Jelaskan beberapa profesi dalam pengembangan sebuah website! Jawaban : 3. Sebutkan beberapa web browser yang kamu kenal, kemudian jelaskan kelebihan dan kekurangan masing-masing web browser! : Jawaban : Studi Kasus TT Web browser sendirisaat in! berkembang dan memilli beberapa jenls.Terdapat beberapa web browser 1: yang terkenal saat ini, salah satunya Google Chrome dan Mozilla Firefox. Simak uraian berikut! : Penggunaan Web Browser Terbanyak t Berdasarkan situs w3counter.com yang diakses per September 2017, Google Chrome digunakan | oleh sekitar 56% pengguna internet, yang kerhudian dikuti oleh web browser Safari dan Firefox masing- |. masing 14% dan 936 Artinya, Google Chrome sangat dominan dipakal sebagai web browser. i Hal ini disebabkan tren smartphone yang ka menggunakan OS Android, sudah langsung ter-install | web browser Google Chrome. Begitu juga ka menggunakan iPhone, sudah langsung ter-install web | browser Safari. Berkit grafknya: Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIBrowser Family Monthly Usage Share Sumber: itn denitom com, dks 26 ens 2018 pul 10.30 Wis Gambar 1.4 Grafik penggunaan web browser. + Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 2000-an.'Hampir 90% web | browser yang digunakan saat itu adalah Internet Explorer dan IE tidak sepenuhnya mengikuti rekomenda: WC, Sekarang Internet Explorer tidak lagi sekuat dulu. Web browser Mozilla Firefox dan Google Chrome | ‘telah menguasai lebih dari 50%, dan IE juga telah berusaha menerapkan standar W3C, termasuk wel browser terbaru mereka: Microsoft Edge. Sumber: t//ww dunia com/beajrtm-mengenatfungstbrowser,dokses 20 Jnvari 2018, 1040 Wit ‘Guna meningkatkan pernahaman secara komprehensifterhadap materi, maka berlatthiah melakuka analisis mengenai penggunaan web browser menggunakan model pembelajaran berbasis Discovery Learning, dengan melengkapi tugas berikut ini ‘A. Rumusan Masalah Data yang Diperoleh Peserta Didik 1 de : D. Analisis Data 1 eo Simpulan Berdasarkan survey yang diakukan w3techs.com, Apache HTTP Serve atau yang'biasa dsebut Apache, ‘menduduki urutan pertama sebagai aplkas! webserver paling popular. Pengadopsian Apache berada di angka 53.3% (per 1 Maret 2016) dari seluruh dunia (http://kb.cloudkilat.com/jaringan/cara-membuat- web-server-apache-php-mysal-phamyadmin-d-centos-6) Carilah beberapa web server selain Apache, yang masihdgunakan oleh para programmer dan bagaimana cara menggunakannyal Guna memudahkan pelaksanaan, gunakan model roject Based Learning dengan melengkapi langkah- fangkah berkutl . A. Perencanaan Kegiatan Nama web server: B. Jeni Tugas: Individu/kelompok Pemrograman Web dan Perangkat Bergerak Kompetenst Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XI.Jadwal Pelaksanaan Tahapan “Tanggal Pelaksanaan Jenis Kegiatan i 1. Persiapan 1. Mencarijenis web server i i! 2 i i : 3 i : 2. Pelaksanaan 1. Analisis penggunaan web server | } i 2. a : e 3. i 3. Pelaporan dan Evaluasi 1. Penerapan pada website i la l [s. D. Sumber Bahan 1, _ Pencarian dengan internet a b, E. Hasil Analisis Definisi web server yang telah kamu atau kelompokmu pil Cara instalasi web server: 3 ry ‘imputan Solus! Masalah secara Kelompok Uji Kompetensi Pilhish satu jawatan yang paling benar dengan cara member tanda sitang (X) pada huruf 4,8, C, 0, atau £ serta tuliskan alasannyal : sae > 1. Salah satu perangkat pengembang web adalah teks editor. Fungsi dari perangkat ini adalah ‘A. perangkat yang digunakan untuk mengecek kesalahan kode program B. _perangkat yang digunakan untuk menguji coba kode program C._perangkat yang digunakan untuk merancang kode program D. e. erangkat yang digunakan untuk mem-preview kode program perangkat yang digunakan untuk mengonversi kode program Alasan Pemrogramian Web dan Perangkat Bergerak Kompetens! Keahllan Rekayasa Perangkat Lunak SMK/MAK Kelas XI2. Perhatikan jenis perangkat b (1) Google Web Designer (2) Google Chrome (3) Mozilla Firefox (4) Araneae (5) Microsoft Edge Beberapa jenis perangkat di atas, yang merupakan web browser ditunjukkan pada nomor A. (2), (2), dan (5) - D. (2),(3),dan (4) B. (1),(4), dan (5) E. (2),(3),dan(5) (2), (3), dan (5) Alasan : 3. Seseorang yang bertugas untuk melakukan pengkodingan atau pemrograman web agar mudah ddigunakan oleh user adalah ‘A. web designer D. web development B. webmaster E. web administrator . web programmer Alasan Perhatikan petunjuk berikut untuk menyelesaikan soal nomor 4 dan 5! Petunjuk: Jika pernyataan benar, alasan benar, dan keduanya menunjukkan hubungan sebab-akibat. Jika pernyataan benar, alasan benar, tapi keduanya tidak menunjukkan hubungan sebab-akibat. Jika pernyataan benar, alasan salah. Jika pernyataan salah, alasan benar. Jika kedua pernyataan salah. Pernyataan: 4, Setiap perangkat komputer yang terhubung dengan jaringan internet akan diberikan alamat |P numerik yang unik, © + mone> Sebab Perangkat komputer harus terhubung dengan komputer server. Jawaban + Alasan 5. Hypertext Transfer Protocol (HTTP) adalah protokol yang mengatur komunikasi antara client dan server. Sebab, Dalam jaringan internet yang menjadi client adalah web browser atau device lain yang dapat mengakses, menerima dan menampilkan konteri web. Jawaban : Alasan Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIRefleksi Pada Bab |, peserta didik telah mempelajari tentang Konsep Teknologi Aplikasi Web. Materi yang telah dipahami maupun yang belim dipahami akan diberi tanda centang (v) pada kolom di bawah ini. Peserta didik juga akan bertanya jika ada materi yang belum dipahami Keterangan | No. Pernyataan Ya ‘Tidak 1. | Memahami konsep teknologi aplikasi web, 2. | Pemahaman tentang konsep world wide web. [tren anneal pyres (Berdasarkan Permendikbud Nomor 8 Tahun A. Tugas Mandiri Untuk meningkatkan pemahamanmu mengenai materi pada Bab I jawablah soal berikut init 1. Apakah yang dimaksud dengan world wide web? 2. Aplikasi web juga merupakan suatu perangkat linak komputer yang dikodekan dalam bahasa pemrograman yang mendukung perangkat lunak berbasis web. Jelaskan aplikas| berbasis dekstop dan aplikasi berbasis web! Aplikasi berbasis dekstop: i Aplikasi berbasis web: Tugas Projek Bentuklah kelompok, masing-masing terir dari 4-5 orang! Bersama kelompokmu call informasi tentang aplikas! XAMPPI XAMPP adalah 3. Lakukanlah analisis terhadap Komponen yang dimilki XAMPP! Pemrograman Web dan Perangkat Bergerak @wl Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIBerikanlah langkah-langkah untuk instalasi XAMMP. Buatlah laporan sesuai urutan pada tugas projek ini, kemudian jilid menggunakan kertas cover! #4 1 Setiap kelompok membuat jadwal kegiatan dalamtugas projek in! seperti pada tabel berikut! Tabel 1.2 Tabel Rigas Projek formasi tentang XAMMP 2. | Mengunduh xaMPP 3. | instalasi xaMPP 4, | Jalankan aplikasi Nama Kelas 6. Kumpulkaniah tugas projek tersebut pada guru dalam waktu 1 minggu! raksi Guru dan Or Untuk mengisl form tabel interaksi guru dan orang tua, ikuti petunjuk gurumu! Nis No. ‘Menghayati Yan mengamalkan ajaran agama yang, ianutrya 2. faa [Menghayati dan mengamalkan perilaku jujur, cisiplin, santun, pedul (gotong royong, kerja sama, toleran, damail, bertanggung jawab, responsf, dan roaktt melalui keteladanan, pemberian nasihat, penguatan, pembiasaan, dan pengkondlsian secara berkesinambungan serta menunjukkan skap sebagai bagian dal solu atasberbagaipermasalahan dalam berinteraksi secaraefektf dengan lingkungan sosil ddan alam serta dalam menempatkan dil sebagai cezminan bangsa delam pergaulan dua 3 [koa ‘Memahami konsep teknologiapltasi web, 4. [oar “Mempresentaskahpelbaga teknologipengembangan| aplikasi web, Keterangan: Berilah tanda (v) sesuai dengan pencapaian kompetensi peserta didik. | Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIFormat Teks pada Halaman Web | Baca teks berikut dengan saksama! ill Sumber: its tawnc tema 90 /noin/entang emai der ms bes 09 Ap 2018, pul 16 Gambar 2.1 Tampilon Website Kemdikbud ‘Apa yang pertama kali terlintas di benakmu ketika melihat Gambar 2.1 di atas? Tampak sebuah | tampilan website dari Kementerian Pendidikan dan Kebudayaan. Pada halaman di atas tampak { beberapa teks dengan tampilan yang tidak rata juga ferlihat ada beberapa teks yang terllhat lebih } besar dari pada teks yang lainnya. Apakah kamu melihat teks di atas menggunakan tipe huruf yang { } berbeda? Bagaimanakah hal tersebut dapat terjadi? Pernahkan kamu niemperhatikan teks setiap kamu melakukan brawsing tampak beberapa ‘teks dengan warna yang berbeda-beda. Teks dalam website memang didesain sedemikian rupa agar tampak rapi dan membuat user nyaman dalam membaca teks pada sebuah website. Tahukah kamu ! cara mengatur teks dalam sebuah website? Sama seperti ketika kamu menulis,teks pada Microsoft | Word diana terdapat cara membuat teks tebal, tercetak miring, dan teks yang digaris bawah. Mengatur format teks pada sebuah website harus menggunakan bahasa pemrograman atau biasa yang disebut dengan tag. Dalam bahasa pemrograman terdapat berbagai macam tag untuk | mengatur teks-teks tersebut untuk membuat halaman website terlihat menarik, maka setiap tampilan teks dapat diatur dengan attribute jenis teks, warna, ukuran, posisi,latar belakang, dan lainnya, Pada Bab I! ini kamu akan mempelajari beberapa tag untuk mengatur format teks pada halaman website. Format yang dimaksudkan disini adalah bagaimana membentuk teks sesuai dengan keinginan dan fungsinya, Contohnya yaitu membuat teks menjadi tebal, miring, dan sebagainya. Ada banyak tag khusus untuk format teks tersebut. Kita akan Ada tag yang digunakan untuk kata atau kalimat tertentu, ada juga yang untuk misaliya 1 paragraf sekaligus sesuai dengartkeinginan, Untuk ebih jelasnya perhatikan dengan saksama Bab ll ini sehingga kamu dapat mempraktikkannya pada sebuah halaman web! Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayesa Perangkat Lunak SMK/MAK Kelas XIDalam perancangan sebuah web tentunya dibutuhkan beberapa perangkat pengembangnya, Berikut adalah beberapa perangkat pengembangan web. Untuk perangkat pengembangan aplikasi web dapat dikelompokkan menjadi 2, yaitu perangkat keras dan perangkat lunak. 1. Perangkat Keras (Hardware) a Komputer utama, yang terdiri dari sebuah monitor dan CPU. Sebuah komputer kedua, banyak web designer membutuhkan komputer penguji untuk menjalankan platform berbeda dari komputer utama yang mereka gunakan untuk pengembangan. Perangkat Lunak (Software) ‘Software adalah perangkat lunak yang berjalan pada sistem komputer. Dalam pengembangan sebuah web diperlukan adanya text editor. Text editor merupakan aplikasi yang digunakan untuk membuat atau mengedit tek. Salah satu teks editor yang dapat digunakan adalah Notepad++, karena perangkat ini tidak berbayar sehingga mudah untuk didapatkan, Beberapa bahasa pemrograman yang didukung oleh Notepad++ adalah 0 0 0 + ‘ActionScript, Ada, ASP, Assembler, autolt, Batch, G C+, C¥, Caml, Cmake, COBOL, CSS, D, Diff Flash ActionScript, Fortran, GUIACU, sumaac p/w peswereecm,2 Moet Haskell, HTML, Berkas IN, InnoSetup Java Javascript ISP KiXtart, 28 80008 LSP Lua, Matlab, MS-DOS, NSIS, Objective-C, Pascal, Perl, PH, Gambar?.2Notepadrs mérupakan salah Postscript, Properties file, dan masih banyak lagi ean et Tudul eglatan | Mengapltas Perangkat Pengembang Web Jenis Kegiatan _: Praktikum Kelompok Tempat Keglatan : Laboraturium Komputer Tujuan Kegiatan : 1) _ Pesertadidik dapat memahami fungsi dai masing-masing perangkat pengembang web dengan’! benar. (KD 3) ‘ 2) Peserta didik dapat menggunakan perangkat pengembang web sesuai fungsinya dengan terampil. (KD 4) ; Langkat-Langkah Praktkum: 1. Perglah te leboratoriu komputer di sekolahmu! Bentukla kelompokyangterdiratas3-4temanmu tanpa membeda-bedatan, dan tunjuklh salah seorangsebagal ketual 2, Bersama anggotakelompokmu, download-lah Notepad ++ pada alamat web berikut nil i “https://notepad-plus-plus.org/download/v7.5.4.htm!” . : 2. _Lakokanlah prosesinstalas Notepad ++ pada masing-masing komputer dlaboratorium sekolahmu! { Setelah proses instalasi Notepad ++ selesa. Gukalahaplital tersebut dengan cara double kl pada icon Notepads 5. Setelah jendela Notepad ++ terbika. Ktikkar kode program di bawab ii! hems Sheed ‘Stitle>Belajar HTML Shoay>, ‘Shickode Program HTML Pextemakuc/ni>

Hallo, namaku Alin

e/neml> om) Pemrograman Web dan Perangkat Bergerak Korpetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIVivwcun oe 7 aw © © momen negro otnee uaa re Belajar HTML HIE mena kepndean dpe Tee Map Lange Sumber: Doturen enrie Gambar 2.3 Preview kode HTML pada web browser. , 6. _Simpanlah pada Drive D dan beri nama belajar htm! 7. Caria file tersebut pada Drive D kemudian double click pada file belajarhtm! tersebut, Apa yang terjadi? Simpan hasil praktikmu yang tampll pada layar! Tampilan hasil program: 8. Kemudian analisitah mengenai fungsi dari masing-masing perangkat pengembang web menurut pemahamanmul Hasil anaiss: Laporan Praktikum: Buatlah laporan kegiatan sesuai dehgan format datas beserta output program dengan disertalKesimpulan. Serahkan laporan ini pada guru pada pertemuan berikutnyal Pemrograman Web dan Perangkat Bergerak j@ml| Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIOke eesti ett Permasalahan 2.4, Seat melakukan instalasi web browser yaitu Google Chrome, diperlukan koneks! internet yang berfungsi untuk men-download seluruh program. Koneksi internet yang dibutuhkan harus stabil dan memiliki kecepatan cukup } tinge. Padahal tidak semua wilayah di Indonesia’ mendukung koneksi internet yang dibutuhkan, Bagaimana cara meng-install Google Chrome secara offline? ° Penyelesaian: + Google Chrome menyediakan cara untuk mengrinstalsecaraofine. ka mengalamimasalah saat men download 1 Chrome di komputer Windows, kamu dapat mencoba link aternatf ai bawah untuk men-download Chrome di komputer lin iS 1. Pada komputer yang tersambung ke Internet, download pata link berikut | http://www google.com int/id/chrome/browser/desktop/index.html?standalone=2° 2 Pindahkan file tersebut ke komputer tempat kamu ingin menginstal Chrome. 3. Buka ile, kemudian kuti petunjuk install. Bagalmana pendapatmu: (minimal 20 kata) ‘at ini terdapat dua macam web browser yang banyak digunakan, yaitu Google Chrome dan Mozilla Firefox. Beberapa berpendapat bahwa Mozilla Firefox memiliki koneksi yang lebih lambat saat digunakan daripada Google Chrome. Apa kelebihan dan kelemahan dari Mozilla Firefox dan Google Chrome? Penyelesaian: ean Perbedaan ot Keunggulan Kelemahan + pingan dan gsi termasukketta tort pertama | + Statis sehingga memilikt fitur yang]! kali dan berpindah tab. sedikt i Google |* Memikidesainyangsimpel dan minimali.. | Memiikitampllan interface yang us. Chrome |* Memiliki kemudahan saat melakukan update. + Sistem security yang kuat. + Memiliki webstore untuk fitur tambahan. « = Banyak tambahan add ons. 7 + Loading lama saat mulai start. + Cocok untuk membuka situs-situs multimedia. | Saat memulai mode private, harus = Memiliki kemudahan saat melakukan updéte. | menutup terlebih dahulu semua Mozilla |. — sistem security yang kuat. halaman dalam mode reguler. Firefox + Hemat resource memory. ‘+ Interface/tampilan yang simpel sehingga mudah digunakan oleh pemula. Bagaimana pendapatmu: (minimal 20 kata) ‘Apa alasannya: (minimal 30 kata) Pemrograman Web dan Perangkat Bergerak Kompetens! Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIPembelajaran awal untuk membuat sebuah web adalah belajar mengenai HTML, Apa itu HTML? Untuk dapat mengetahuinya, pelajarilah materi berikut dengan saksamal HTML merupakan kependekan dari Hyper Text Markup Language. HTML merupakan file teks murni yang dapat dibuat dengan teks editor sembarang tetapi dengan penambahan file ekstensi -htm atau ‘htm. HTML umumnya berisi informasi atau interface aplikasi pada internet (Ir Betha Sidik dan Ir Husni {skandar Pohan dalam buku Pemrograman Web dengan HTML : $). Perhatikan conto dokumen HTML berikut inil digunakan untuk judul dokumen. Teks pada tag ini nantinya akan ditampilkan pada title bar di web browser. : 5. Pada tag dan merupakan teks yang akan ditampilkan pada web browser. Banyak tag-tag yang bertujuan untuk memformat text di dalam HTML. Tag-tag ini dirancang untuk ‘membuat struktur text (konten) dari halaman web. Web browser akan menampilkan beberapa tag dengan tampilan visual seperti huruf tebal, huruf kecl, italic, dan sebagainya (https://www.duniailkom. com/tutorial-html-lanjutan-tag-dan-atribut-untuk-pembuatan-text-dan-format-text-htmi/). Untuk memperdalam pengetahuanmu pada tentang tag html dalam mengatur format teks perhatikan tabel di bawah inil Tabel 2.1 Tag Format Teks ... Membuat teks header 1. ... ‘Membuat teks menjadi tebal. .. Membuat teks menjadi miring. ... Membuat teks menjadi bergaris bawah. ... Membuat teks menjadi tebal sama seperti bold. _... Membuat teks menjadi subscript. ^..! * Membuat teks menjadi superscript. ... Membuat format teks bergaris di tengah-tengah. ... ‘Membuat format teks diblok berwarna. Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XI‘Menganalisis Struktur Tag Format Teks HTML Jenis Kegiatan : Tugas Mandiri Tujuan Kegiatan : 1)” Peserta didik dapat menjelaskan penggunaan tag format teks dengan benar. (KO 3) 2) Peserta didik dapat menganalisis kode’ program untuk memformat teks dengan terampil. (KD 4) Langkah-Langkah Kegiatan: 11. Perhatikan dengan saksama teks berikut init "DEPRECATED TAG" Dengan berkembangnya teknologi ada beberapa tag dan atribut HTML yang jelek sudah usang atau tidak layak di pakai atau dalam bahasa Inggrisyy, Deprecated Togs. Ada sebagian yang sudah ditiadakan atau sebagian memang ada altematif penggantinya. Untuk ‘melihat list dari tag-tag yang sudah usang ini dapat di lihat di artikel tentang deprecated tag dan atribut Sumber: Dolunen ert GGambar 2.5 Format teks Berdasarkan teks di atas lakukaniah analisis terhadap tag-tag apa saja yang digunakan dalam penulisan teks di atas! 3, Setelah kamu melakukan analisis terhadap teks di atas format teks apa saja yang digunakan, sekarang jelaskan fungsi dari masing-masing format teks yang telah kamu sebutkan pada poin 2! 4, Kemudian tuliskanstruktur kode program HTML untuk memformat teks sesuai gambar di atas pada aplikasi Notepad ++. Kemudian jalankan pada web browser untuk melihat hasilnya! Kode program: Tampitan pada web browser: Om! Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat.Lunak SMK/MAK Kelas XIUa EUn ean Clee ieny Permasalahan 2.3 Perhatikan teks di bawah ini! Bagaimana penulisan kode program untukmembuat teks tampak ‘aftar ish seperti di atas? ; 1. Konsep HTML i 2. Struktur Kode HTML Penyelesaian: t ahead Penulisan format teks di atas menggunakan bullet and body numbering dalam tag html, Tag untuk membuat bulatan «footer berwarna hitam kamu bisa menggunakan tag

. .

dan untuk membuat sub konten di bawahnya maka kamu perlu menulskan tag ... sesual dengan kebutilhan. Kemudian apabiaingin membuat penomoran mmenggunakan tag

...

, Sedangkan untuk membuat angka 1 atau penorrioran mefggunakan 2, b,c, dan seterusnya hanya perlu menambahkan tipenya saja,contoh

. Untuk lebih jelasnya perhatikan dengan saksama kode program di bawah ini! 2.8 |S biseoacecnas
+ Daftar isi <1i>konsep ATML 1. Konsep HTML
2. Struktur Kode HTML ‘a head b. body «jer «footer
Bagaimana pendapatmu: (minimal 20 kata) ‘Apa alasannya: (minimal 30 kata) Permasalahan 2.4 Perhatikan teks berikut ini! [belajar format teks belajar format teks belajar format teks Bagaimana membuat format teks seperti datas? Penyelesaian: Pembuatan format teks agar tampak seperti di atas adalah : 1. Membuat format teks ratakiri

...

2. Membuat format teks rata tengah

...

3. Membuattteks ratakanan

...

jaimana pendapatmu: (minimal 20 kata) ‘Apa alasannya: (minimal 30 kata) Pamrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelos-XIA. HOTS (High Order Th: Pilihan Ganda nib Pifihlah satu jawaban yang paling benar dengan cara memberi tanda silang (X) pada huruf A, B, C, D atau E serta tuliskan alasannya! 1 Berikut ini yang bukan merupakan aplikasi yang digunakan untuk membuat atau mengedit teks adalah ... ‘A. Notepad ++ D. Sublime B, Adobe Dreamweaver Filezilla C. Adobe Photoshop Alasan ‘Sebuah aplikasi yang digunakan untuk mengunduh berkas yang berada pada web server adalah A... Notepad ++ D. Sublime B. Adobe Dreamweaver E. Filezilla C. Adobe Photoshop Alasan > ‘Tag pada HTML yang biasanya digunakan untuk membuat judul artikel yaitu .. A. -... D. B. ... E. ... ©. ... Alasan ‘Tag pada HTML yang digunakan sebagai judul dokumen pada halaman web adalah .... A. ... D. B ... E, ... C. ... ‘Alasan = Pemrograman Web dan Perangkat Bergerek Kompetensi Keahlian Rekayasa Perangkat Lunak SNK/MAK Kelas XI8. Uraian Jawablah beberapa pertanyaan berikut dengan jawaban yang benar! 1. _Perangkat pengembangan sebuah web terdiri dari 2 jenis, yaitu perangkat keras dan perangkat lunak. Jelaskan pengertian perangkat keras dan perangkat lunak dan berikan contohnyal Jawaban : 2. + Perhatikan kode program di bawah inil

Belajar Format Teks di HIML Posted by Yogo Prestiyanto on Thursday, November 22,°2012


Dalam artikel saya sebelumnya pernah saya contohkan membuat sebuah paragraf di HTML "Belajar Membuat Paragraf, Link, Heading di HMTL". Kali ini saya akan memberi contoh cara menulis format teks di RTML. Contoh dari format teks "yang sering digunakan antara lain cetak tebal, , huruf bergaris bawah,dll.

‘Tag format teks apa saja yang digunakan dan jelaskan fungsinyal Jawaban : : 3. Berdasarkan kode program pada nomor 4, bagaimanakah hasil output-nya pada web browser? Jawaban = ut 1. Perhatikan artikel di bawah ini berikut! : Menyisipkan Spast dalam HTML Permahkah saat kamu menulis adang kala memasukkan spasi ganda yang biasanya dibuat dengan ‘menekan tombol spasi dan tombol tabulasi(tab). Pada HTML menambahkan beberapa spasi dan membuat tabulasi tidak akan berpengaruh, struktur pada HTML hanya membacanya sebagai spasi putih-di antara kata, dan hanya menampilkannya sebagai spasi tunggalsaja. Meskipun CSS memungkinkan Anda untuk | ‘membuat gaya atau penyusunan spasi dan jarak paregraf(indentas) yang lebih akurat, HTML juga memiliki bbeberapa perangkat yang bisa Anda gunakan untuk mengatur jarak teks, Sumber: tps wikihow.com/Menysphan Spast-Dolar-HTML,dakses 11 April 201, 08.37 IB Apakah kamu mengetahui tag dalam HTML untuk menyisipkan spasi dan tabulasi? Bagaimanakah kode programnya? Untuk meningkatkan pemahamanmu secara komprehensif terhadap materi, maka berlatihlah melakukan analisis mengenai tag yang digunakan untuk membuat spasi dan tabulasi dan menjalankannya pada web browser menggunakan model pembelajaran berbasis Discovery Learning, D.

... B. ... Bo ... Alasan 2. Tag pada HTML yang membust teks akan terbaca di halaman website sama persis seperti yang ki tuliskan pada kode program adalah... A.

 ... 

D.

...

B. “ ... E > © ... Alasan 3. Pada kode HTML untuk memformat teks yang dapat berkedip, yaitu D.

...

Eve! Perhatikan petunjuk berikut untuk menyelesaikan soal nomor 4 dan 5! Petunjuk: : A. _Jika pernyataan benar, alasan benar, dan keduanya menunjukkan hubungan sebab-okibat. 8. _Jika pernyataan benar, alasan benar, tapi keduanya tidak menunjukkan hubungan sebab-akibat. . _Jika pernyataan benar, alasan salah, D. Jka pernyataan salah, alasan benar. , _Jika kedua pernyataan salah Pernyataan: 4. Dalam pengembangan sebuah web programmer memerlukan alat, yaitu perangkat keras (hardware) dan perangkat lunak (software) Sebab Perangkat keras seperti monitor, keyboard, mouse, dan cpu, sedangkan perangkat lunak seperti sistem operasi yang terdapat pada komputer seperti Notepad +. f Jawaban,: Alasan Pemrograman Web dan Perangkat Bergerak Om) Kompetensi Keahlian, Rekayasa Perangkat Lunak SMK/MAK Kelas XIPenulisan kode program 4 | Tampilan pada web browser it 7. Kumputkanlah tugas projek tersebut pada guru dalam waktu 1 minggu! « Interaksi Guru dan Orang Tua Untuk mengisi form tabel interaksi guru dan orang tua, Ikuti petunjuk gurumu! Nama nnn a _ Nis Kelas ‘Keteranyan Pencapalan 1 F No. Kompetensi Kompetens i : Salk | Culup | Kurang 1. ]kt1 | Menghayati dan mengamalan ajaran agama yang| dlanutrya. 2. [ki2___[Menghayati dan mengamalkan perilaku juju, cisipin, santun, pedul (gotong royong, kerja sama, toleran, damai), bertanggung jawab, respons, dan proaktif melalui keteladanan, pemberian nasihat, penguatan, pembiasaan, dan pengondisian secara| berkesinambungan serta menunjukkan sikapsebagal agian dar solsi atas berbagai permasalahan dalam berinterakslsecaraefektif dengan lingkungan sosial dan alam serta dalam menempatkan dil sebagal cerminan bangsa dalam pergaulan dunia 3. [O32 | Menerapkan format teks pada halaman web. 4. [K042 | Membuat kode html utuk menampilkan teks dalam format tertentu pada halaman web Keterangan: Berilah tanda (v) sesuai dengan pencapaian kompetensi peserta didik. Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XIMengenali Format Tabel pada Halaman Web a een eee Surber: tp/efrns deta mid go /ndedphhade-036105alett3, dss 11 Ail 2018 pa 1303 08 Gambar 3.1 Holaman website yang menampilkan tabel Perhatikan Gambar 3.1 di atas. Gambar tersebut adalah sebuah website dari Kementerian Pendidikan dan Kebudayaan. Jika kamu mengamati website tersebut, dapat kamu lihat sebuah format tabel dari daftar satuan pendidikan sekolah Kecamatan Banjarsari. Tabel tersebut memuat ! informasi tentang kode, nama, alamat, kelurahan serta status sekolah yang berada di Kecamatan Banjarsari. Apakah kamu pernah menjumpai format tabel pada sebuah halaman web seperti gambar diatas. Jka kamu memperhatikan tabel di atas, kamu akan mendapatkan sebuah informasi. Misalnya Sekolah MAN 1 Surakarta yang beralamat di Jalan Sumpah Pemuda Nomor 25 Surakarta terletak di Kelurahan Kadipiro dengan status sekolah negeri. Sangat mudah dalam membaca sebuah informasi dengan bentuk tabel. Tabel sangat sering digunakan dalam penyajian data yang berupa daftar sejumlah Informast. abel biasa digunakan untuk memberikan kermudahan dalam membaca data karena tersusun dengan sistematis sehingga memahaminya juga akan lebih mudah. Pada Bab II kamu telah mempelajari format teks pada HTML untuk memformat teks. Sekarang ! kamu akan mempelajari format tabel pada halaman web seperti pada gambar di atas. Kode program } pada HTML dalam pembuatan sebuah tabel memerlukan tag khusus, Agar kamu lebih paham tentang format tabel pada halaman web, marilah kita bersama-sama membahas materi yang berkaitan dengan format tabel pada halaman web berikut ini. Perhatikan dengan saksama Bab Ill tentang format tabel pada halaman wel Pemrograman Web dan Perangkat Bergerak Qu Kompetens Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas X1‘Apakah kamu tahu apa itu tabel? Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Pada bab sebelumnya kamu telah mempelajari konsep dasar dari penulisan struktur kode program HTML. Dalam pembuatan tabel HTML kamu harus menuliskannya pada tag tabel ditulis disini . Struktur tabel memiliki tag-tag khusus yaitu untuk menginisialisasikan sebuah tabel kamu harus menuliskan tag , untuk lebih jelas perhatikan struktur penulisan tabel berikut ini. ‘ < o> Menbuat Tabel , Sebuah tabel pastinya tidak terdiri dari satu kolom dan satu baris saja, tentunya tabel terbentuk dari beberapa baris dan kolom sesuai dengan kebutuhan. Kamu dapat membuat baris dan kolom pada tabel menggunakan tag ... sebagaibarisdan ... sebagai kolom. Judul Kegiatan : Menganalisis Struktur Tag Tabel HTML Jenis Kegiatan : Tugas Mandiri Tujuan Kegiatan : 1) Peserta digik dapat menjelaskan penggunaan tag tabel dengan HTML dengan benar. (KD 3) 2) Peserta didik dapat menganalisis kode program untuk membuat tabel dengan terampil. (KO 4) Langkah-Langkah Kegiatan: 1. Berdasarkan pemahamanmu bagaimanakah cara menuliskan tag untuk membuat tabel pada struktur HTML? 2. Pada pembuatan sebuah tabel akan memerlukan beberapa baris dan beberapa kolom. Bagaimanakah ‘cara mengimplementasikannya pada kode program? 3, - Pethatikan kode program berikut ini! Kte>ctarCe/tdoctd>D

Fe/ta> ctro

Be/td>

E

‘Analisislah tampilan yang akan dikeluarkan oleh kode program di atas! Om) Pemrograman Web dan Perangkat Bergerak Kompetensi Keahlian Rekayesa Perangkat Lunak SMK/MAK Kelas XI| Permasalahan 3.1 oor Pada sebuah tabel yang menandakan bahwa itu termasuk baris atau kolom adalah garis tepi, Garis tepi atau biasa disebut dengan border merupakan pemisah antara baris satu dengan yang lainnya atau antara satu kolom «dengan kolom lainnya. Bagaimanakah cara menampilkan border dengan HTML? Penyelesaian: Membuat border tabel pada html yaitu dengan menambahkan atribut border. Penulisan format border untuk tabel adalah menyisinkan atribut pada tag tabel, perhatikan kode berikut ni: .... Bagaimana pendapatmu: (minimal 20 kata) ‘Apa alasannya: (minimal 30 kata) Permasalahan 3.2 Bagaimanakah membuat tampilan tabel seperti berikut ini menggunakan struktur pada HTML? cella eell2 [catia [cena Penyelesaian: As/td>stdeoell 2etdocell 4 Perhatikan kode program di atas aribut border="1° merupakan atribut untuk menampilken border tabel, kemuudian terdapat . . . untuk membuat kolom sebanyak 4 buah kolom pada satu bars. Bagaimana pendapatmu: (minimal 20 kata) ‘Apa alasannya: (minimal 30 kata) eran Web dengan Tabel at Dengan perkembangan dunia teknologi, sebuah halaman website tidak menarik apabila hanya disajikan dalam bentuk satu kolom saja. Pengunaan tabel sangat membantu dalam mendesain sebuah layout halaman web. Layout merupakan sebuah desain yang berupa penataan elemen-elemen dalam sebuah halaman web. Elemen-elemen dalam desain halaman sebuah web dapat dikelompokkan menjadi 5 yaitu elemen header yang beris| judul dan slogan sebuah website. Elemen navigasi berisi menu-menu, yang memberikan ‘akses navigasi ke halaman-halaman lain dalam web. Elemen sidebar dapat berada di kiri atau kanan konten. Elemen konten merupakan isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini. Dan yang terakhir adalah elemen footer, merupakan penutup dari website. Membuat desain sebuah website harus dipikirkan dengan baik, Karena para pengguna akan terfokus dengan konten, maka gunakanlah area yang luas untuk penempatan konten. Menggunakan warna pada ‘background website akan memberikan suatu kesan yang baik tetapi antara warna teks dan background haruslah tepat, untuk menambah warna dengan atribut bgcolor="..” pada area yang diperiukan Pemrograman Web dan Perangkat Bergerak Kompetensi Keshllan Rekayasa Perangkat Lunak SMK/MAK Kelas XIDesain sebuah halaman website biasanya disesugikan dengan kebutuhan. Sebuah website dikatakan bik atau menarik jika pengunjung website merasa mudah untuk menemukan suatu hal yang dicari, dengan desain yang simple dan jelas. Untuk memperdalam pemahamanmu terhadap desain halaman web menggunakan tabel akan tampak seperti kode program berikut ini. HEADER ktro table> ‘Setelah kode program tersebut dijalankan pada web browser akan tampil seperti gambar di bawah ini! Header Konten | Footer Suber Gatun Feneit Gambar 3.2 Layout website. ‘A. Judul Keglatan : Implementasi Format Tabel pada Halaman Website B. Jenis Kegiatan = Praktikum Kelompok c D. Tempat Kegiatan : Laboratorium Komputer Tujuan Kegiatan 1) Peserta didik dapat menerapkan format tabel pada halaman web dengan benar. (KD 3) 2) Peserta dick dapat mengimplementasikan format tabel pada halaman web dengan terampil. (KO 4) E.— Langkah-Langkah Praketikum: 7. Kunjungilah laboratorium Komputer di sekolahmul Kemudian bentuklah kelompok yang terdit atas 34 temanmu tanpa membeda-bedakan, dan tunjuklah salah seorang sebagai ketual 2. Bukalah aplikasi Notepad untuk membuat sebuah file baru bernama “web_pertamaku htm!” pada Drive D. 3, _Ketikkanlah kode program di bawah ini pada file tersebut! “htwi>chosds ‘hody>

FOOTER

SEBAR KANAIC/e> sl> ‘impan file tersebut dengan cara tekan tombol CTRL¢S atau klikikon save pada pojok kiriatas Carilah file tersebut pada Drive D dimana kamu simpan file tersebut kemudian double click pada file web_pertamaku.html tersebut. Apa yang terjadi? Bagaimanakah tampil pada layar tersebut. Kemudian modifikasilah kode program tersebut dengan menambah beberapa menu dan ubahlah warna pada tabel agar menarik. Kemudian simpan hasl yang ditampilkan web browser! Om) Pemrograman Web dan Perangkat Bergerak Kompetens! Keahlian Rekayasa Perangkat Lunak SMK/MAK Kelas XILaporan Praktikur Buatlah laporan kegiatan sesual dengan format di atas beserta output program dengan disertai kesimpulan. Serahkan laporan ini pada guru pada pertemuan berikutnyal rmasalahan dan Penyelesaian Permasalahan 3.3, Perhatikan gambar layout berikut ini! Sumber: Dolmen ere Gambar 3.3 Layout website, Bagaimanakah kode programnya? Penyelesaian: Kode program untuk layout web di atas adalah: [fants bores 7 alien span="4" eign! carictable border="1'> . .. ater width=" aDipe” > 0px" bgcolor=" pink’>HEADSR < ctroctobMents 1 SIDEBAR KT; Stable be FOOTER«/ td> -KRLENDERC/td>CONTENTS/ta> 0px" col spar Bagaimana pendapatmu: (minimal 20 kata) ‘Apa alasannya: (minimal 30 kata) Permasalahan 3.4 ‘Website berkualitas baik tidak hariya ditentukan dari isi ataupun konten dari website tersebut, tetapi juga dari bagalmane presenta’ atau tampiln sebuah website. Tampilan webst, slain bergantung pada penggunaan { lenis font, warna, spacing, dan elemenlainnya, tentunya tidak terlepas dari hal paling mendasar,yaitulayout/ | tatanan letak elemen. Website yang bagus mempunyal ayout yang sesuai dengan tampilanlayar yatu responsive. + ‘Apa yang dimaksud dengan layout responsive? : Pemrograman Web dan Perangkat Bergerak Qa) Kompetensi Keahlan Rekayaso Perengkat Lunak SMK/MAK Kelas XI