https://wiki.unissula.ac.id/index.php?action=history&feed=atom&title=Pengembangan_web_tampak-depanPengembangan web tampak-depan - Riwayat revisi2026-09-15T18:09:10ZRiwayat revisi halaman ini di wikiMediaWiki 1.46.0https://wiki.unissula.ac.id/index.php?title=Pengembangan_web_tampak-depan&diff=2884&oldid=prevMaintenance script: Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi2026-08-23T14:10:09Z<p>Presentation V4: sitasi, referensi, Math, Wikimedia Commons, dan atribusi</p>
<table style="background-color: #fff; color: #202122;" data-mw-interface="">
<col class="diff-marker" />
<col class="diff-content" />
<col class="diff-marker" />
<col class="diff-content" />
<tr class="diff-title" lang="id">
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">← Revisi sebelumnya</td>
<td colspan="2" style="background-color: #fff; color: #202122; text-align: center;">Revisi per 23 Agustus 2026 14.10</td>
</tr><tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l1">Baris 1:</td>
<td colspan="2" class="diff-lineno">Baris 1:</td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>'''Pengembangan web tampak-depan''' atau yang kita kenal dengan istilah ''front end developer'' adalah pengembangan [[antarmuka pengguna grafis]] suatu situs web melalui penggunaan [[HTML]], [[Cascading Style Sheets|CSS]], dan [[JavaScript]] sehingga pengguna dapat melihat dan berinteraksi dengan situs web tersebut.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">[[File:Front-end-logo-color@2x.png|thumb|right|280px|Ini adalah contoh logo front end]]</ins></div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div> </div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>'''Pengembangan web tampak-depan''' atau yang kita kenal dengan istilah ''front end developer'' adalah pengembangan [[antarmuka pengguna grafis]] suatu situs web melalui penggunaan [[HTML]], [[Cascading Style Sheets|CSS]], dan [[JavaScript]] sehingga pengguna dapat melihat dan berinteraksi dengan situs web tersebut. <ins style="font-weight: bold; text-decoration: none;"><ref>MDN. [https://developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer Front-end web developer]. ''Mozilla Developer''. 2020-05-02.</ref> <ref>Refsnes Data. [https://www.w3schools.com/whatis/ Web Development Roadmaps]. ''w3schools''. 1999-07-04.</ref> <ref>Refsnes Data. [https://www.w3schools.com/howto/howto_blog_become_frontenddev.asp How To Become a Front-End Developer]. ''w3schools''. 1999-07-04.</ref> <ref>Refsnes Data. [https://courses.w3schools.com/programs/front-end Front end development]. ''w3schools''. 1999-07-04.</ref></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Alat yang digunakan untuk pengembangan tampak-depan ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Alat yang digunakan untuk pengembangan tampak-depan ==</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>Ada beberapa alat dan pelantar, seperti [[WordPress]], [[Joomla!|Joomla]], dan [[Drupal]], tersedia yang dapat digunakan untuk mengembangkan tampak-depan sebuah situs web.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>Ada beberapa alat dan pelantar, seperti [[WordPress]], [[Joomla!|Joomla]], dan [[Drupal]], tersedia yang dapat digunakan untuk mengembangkan tampak-depan sebuah situs web. <ins style="font-weight: bold; text-decoration: none;"><ref>Ivan Codesido. [https://www.theguardian.com/help/insideguardian/2009/sep/28/blogpost What is front-end development?]. ''Theguardian.com''. 28 September 2009.</ref></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Hypertext Markup Language (HTML) ===</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Hypertext Markup Language (HTML) ===</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l8">Baris 8:</td>
<td colspan="2" class="diff-lineno">Baris 10:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Cascading Style Sheets (CSS) ===</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== Cascading Style Sheets (CSS) ===</div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div>[[Cascading Style Sheets]] (CSS) mengontrol aspek presentasi situs dan memungkinkan situs Anda memiliki tampilan uniknya sendiri. Hal ini dilakukan dengan mempertahankan lembar gaya yang berada di atas aturan gaya lainnya dan dipicu berdasarkan input lain, seperti ukuran, font dan [[resolusi layar]] perangkat. CSS dapat ditambahkan secara eksternal, internal, atau tertanam dalam tengara HTML.</div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div>[[Cascading Style Sheets]] (CSS) mengontrol aspek presentasi situs dan memungkinkan situs Anda memiliki tampilan uniknya sendiri. Hal ini dilakukan dengan mempertahankan lembar gaya yang berada di atas aturan gaya lainnya dan dipicu berdasarkan input lain, seperti ukuran, font dan [[resolusi layar]] perangkat. CSS dapat ditambahkan secara eksternal, internal, atau tertanam dalam tengara HTML. <ins style="font-weight: bold; text-decoration: none;"><ref>Sudad Abed. [https://www.uoanbar.edu.iq/catalog/file/lects/ITC/sudadAbed/WebAppsDev/5'th%20Lecture.pdf Inserting CSS]. 2019.</ref></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== JavaScript ===</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>=== JavaScript ===</div></td></tr>
<tr><td colspan="2" class="diff-lineno" id="mw-diff-left-l19">Baris 19:</td>
<td colspan="2" class="diff-lineno">Baris 21:</td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Referensi ==</div></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><div>== Referensi ==</div></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><references /></ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">== Sumber dan atribusi ==</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td colspan="2" class="diff-side-deleted"></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;">Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Pengembangan+web+tampak-depan&oldid=28497009 Wikipedia bahasa Indonesia], revisi 28497009 (2025-11-15T03:45:47Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Gambar pada artikel ini bersumber dari Wikimedia Commons dan mengikuti ketentuan lisensi masing-masing berkas. Mohon gunakan konten dan media secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.</ins></div></td></tr>
<tr><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td><td class="diff-marker"></td><td style="background-color: #f8f9fa; color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #eaecf0; vertical-align: top; white-space: pre-wrap;"><br></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">== Sumber dan atribusi ==</del></div></td><td class="diff-marker" data-marker="+"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #a3d3ff; vertical-align: top; white-space: pre-wrap;"><div><ins style="font-weight: bold; text-decoration: none;"><!</ins>-- <ins style="font-weight: bold; text-decoration: none;">WIKI_UNISSULA_PRESENTATION_V4 </ins>--<ins style="font-weight: bold; text-decoration: none;">></ins></div></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div> </div></td><td colspan="2" class="diff-side-added"></td></tr>
<tr><td class="diff-marker" data-marker="−"></td><td style="color: #202122; font-size: 88%; border-style: solid; border-width: 1px 1px 1px 4px; border-radius: 0.33em; border-color: #ffe49c; vertical-align: top; white-space: pre-wrap;"><div><del style="font-weight: bold; text-decoration: none;">Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Pengembangan+web+tampak</del>-<del style="font-weight: bold; text-decoration: none;">depan&oldid=28497009 Wikipedia bahasa Indonesia], revisi 28497009 (2025</del>-<del style="font-weight: bold; text-decoration: none;">11</del>-<del style="font-weight: bold; text-decoration: none;">15T03:45:47Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi</del>-<del style="font-weight: bold; text-decoration: none;">BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.</del></div></td><td colspan="2" class="diff-side-added"></td></tr>
</table>Maintenance scripthttps://wiki.unissula.ac.id/index.php?title=Pengembangan_web_tampak-depan&diff=2484&oldid=prevMaintenance script: Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 28497009; atribusi sumber disertakan.2026-08-23T13:53:14Z<p>Impor teks terkontrol dari Wikipedia bahasa Indonesia; revisi 28497009; atribusi sumber disertakan.</p>
<p><b>Halaman baru</b></p><div>'''Pengembangan web tampak-depan''' atau yang kita kenal dengan istilah ''front end developer'' adalah pengembangan [[antarmuka pengguna grafis]] suatu situs web melalui penggunaan [[HTML]], [[Cascading Style Sheets|CSS]], dan [[JavaScript]] sehingga pengguna dapat melihat dan berinteraksi dengan situs web tersebut.<br />
<br />
== Alat yang digunakan untuk pengembangan tampak-depan ==<br />
Ada beberapa alat dan pelantar, seperti [[WordPress]], [[Joomla!|Joomla]], dan [[Drupal]], tersedia yang dapat digunakan untuk mengembangkan tampak-depan sebuah situs web.<br />
<br />
=== Hypertext Markup Language (HTML) ===<br />
[[HTML|HyperText Markup Language]] (HTML) adalah tulang punggung dari setiap proses pengembangan situs web, yang tanpanya [[Laman web|halaman web]] tidak akan ada. Hypertext berarti teks yang mempunyai tautan, disebut pranala, yang tertanam di dalamnya. Ketika pengguna mengklik suatu kata atau frasa yang memiliki pranala, maka akan dibawa ke halaman web lain. [[Bahasa markah]] menunjukkan teks dapat diubah menjadi gambar, tabel, tautan, dan representasi lainnya. Ini adalah kode HTML yang memberikan kerangka keseluruhan tentang tampilan situs. HTML dikembangkan oleh [[Tim Berners-Lee]]. Versi terbaru HTML disebut [[HTML5]] dan diterbitkan pada 28 Oktober 2014 berdasarkan rekomendasi [[Konsorsium World Wide Web|W3C]]. Versi ini berisi cara-cara baru dan sangkil dalam menangani elemen seperti berkas video dan audio.<br />
<br />
=== Cascading Style Sheets (CSS) ===<br />
[[Cascading Style Sheets]] (CSS) mengontrol aspek presentasi situs dan memungkinkan situs Anda memiliki tampilan uniknya sendiri. Hal ini dilakukan dengan mempertahankan lembar gaya yang berada di atas aturan gaya lainnya dan dipicu berdasarkan input lain, seperti ukuran, font dan [[resolusi layar]] perangkat. CSS dapat ditambahkan secara eksternal, internal, atau tertanam dalam tengara HTML.<br />
<br />
=== JavaScript ===<br />
[[JavaScript]] adalah bahasa [[pemrograman imperatif]] berbasis peristiwa (berlawanan dengan model [[Pemrograman deklaratif|bahasa deklaratif]] HTML) yang digunakan untuk mengubah halaman HTML statis menjadi antarmuka dinamis. Kode JavaScript dapat menggunakan [[Document Object Model]] (DOM), yang disediakan oleh standar HTML, untuk memanipulasi halaman web sebagai respons terhadap peristiwa, seperti masukan pengguna.<br />
<br />
Dengan menggunakan teknik yang disebut [[AJAX]], kode JavaScript juga dapat secara aktif mengambil konten dari web (terlepas dari pengambilan halaman HTML asli), dan juga bereaksi terhadap kejadian di sisi peladen, sehingga menambah sifat dinamis pada pengalaman halaman web.<br />
<br />
=== Majelis Web ===<br />
WebAssembly, didukung oleh semua peramban utama (yaitu dari vendor besar [[Google]], Apple, Mozilla dan Microsoft), adalah satu-satunya alternatif JavaScript untuk menjalankan kode di [[peramban web]] (tanpa bantuan colok-masuk, seperti [[Adobe Flash|Flash]], [[Java (platform perangkat lunak)|Java]] atau [[Silverlight]] ; semuanya dihentikan, karena browser tidak lagi mendukung plug-in). Sebelum diadopsi, ada asm.js (bagian dari JavaScript; dan dengan demikian berfungsi secara ketat di semua browser), yang juga digunakan sebagai target penghimpun dengan dukungan efisien di peramban seperti [[Internet Explorer 11]] ; dan untuk peramban yang tidak mendukung WebAssembly secara langsung, dapat dikompilasi ke asm.js dan peramban tersebut mendukungnya. Secara umum pemrogram tidak memprogram di WebAssembly (atau asm.js) secara langsung, tetapi menggunakan bahasa seperti Rust, C atau C++ atau secara teori bahasa apa pun, yang dikompilasi ke dalamnya.<br />
<br />
== Referensi ==<br />
<br />
<br />
<br />
== Sumber dan atribusi ==<br />
<br />
Konten artikel ini diadaptasi dari [https://id.wikipedia.org/w/index.php?title=Pengembangan+web+tampak-depan&oldid=28497009 Wikipedia bahasa Indonesia], revisi 28497009 (2025-11-15T03:45:47Z), yang tersedia berdasarkan lisensi Creative Commons Atribusi-BerbagiSerupa (CC BY-SA). Mohon gunakan konten ini secara bijak serta sesuai dengan ketentuan lisensi yang berlaku.</div>Maintenance script