{"id":3468,"date":"2023-03-01T02:38:42","date_gmt":"2023-03-01T02:38:42","guid":{"rendered":"https:\/\/sagaratechnology.com\/blog\/?p=3468"},"modified":"2023-03-14T06:18:04","modified_gmt":"2023-03-14T06:18:04","slug":"bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end","status":"publish","type":"post","link":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/","title":{"rendered":"Bahasa Yang Digunakan Untuk Pengembangan Front End"},"content":{"rendered":"\n

<\/p>\n\n\n\n

Front-end adalah bagian dari situs web yang dapat langsung Anda lihat dan komunikasikan untuk mendapatkan kapasitas sistem backend yang berarti pengguna dapat melihat, dan mengalami semuanya. Selama bertahun-tahun, peran seorang desainer Web telah berubah secara dramatis, namun fungsi intinya tetap sama.<\/p>\n\n\n\n

Front-end berurusan dengan semua siulan dan bel yang Anda lihat di situs web, termasuk foto berwarna, menu navigasi, tombol mencolok, dll. Front-end juga disebut “sisi klien” karena tindakan ini terjadi di sisi pelanggan yang merupakan pengguna dalam hal ini. <\/p>\n\n\n\n

Kode tidak ditangani oleh pengembang web. Pada kenyataannya, ini mencakup semua aspek mendesain ulang dan membangun situs web, yang menarik secara visual dan ramah pengguna. Peran pengembang front-end adalah agar pengguna membuat lingkungan dengan kombinasi berbagai alat, termasuk seperti JavaScript, bahasa markup HyperText, dan CSS. Sekarang kita akan bergerak maju dengan bahasa front-end.<\/p>\n\n\n\n

Berikut ini adalah bahasa dalam front end, yaitu sebagai berikut:<\/strong><\/h4>\n\n\n\n

1. Bahasa HTML<\/strong><\/h4>\n\n\n\n

Hypertext Markup Language biasa kita sebut dengan HTML. HTML digunakan untuk membuat catatan digital di World Wide Web. Sejumlah tautan ke situs web lain disediakan di setiap halaman. Setiap halaman web yang Anda lihat di Internet diterbitkan dalam satu atau varian HTML lainnya. Kode HTML memastikan bahwa gambar dan teks diformat dengan benar sehingga browser internet Anda dapat menampilkannya untuk dicari. <\/p>\n\n\n\n

Tanpa HTML, browser tidak akan dapat menampilkan teks sebagai item atau memuat gambar. HTML juga menyediakan struktur halaman dasar, di mana lembar gaya kaskade ditumpangkan untuk mengubah tampilannya. Situs web adalah dokumen yang umumnya ditulis dalam HTML dan diterjemahkan melalui browser web. Dengan memasukkan URL, Anda dapat mengidentifikasi halaman web. Halaman web statis atau dinamis mungkin. Kita dapat menghasilkan halaman web statis dengan menggunakan HTML. Kita akan melihat atribut dalam HTML seperti dokumen, tag, tombol, daftar, dll.<\/p>\n\n\n\n

Semua dokumen HTML harus dimulai dengan deklarasi tipe dokumen:<\/p>\n\n\n\n

<!DOCTYPE html>.<\/p>\n\n\n\n

Dokumen HTML dimulai dari <html>dan diakhiri dengan <\/html>. Bagian yang ingin kita tampilkan di website dinyatakan dalam dokumen HTML adalah antara <body> dan <\/body>. Dalam HTML, judul didefinisikan menggunakan tag <h1> hingga <h6>. Di mana <h1> mewakili judul terbesar dan <h6> mewakili judul terkecil.<\/p>\n\n\n\n

<h1>This is heading with h1 <\/h1><\/em><\/code><\/pre>\n\n\n\n
<h2>This is heading with h2 <\/h2><\/em><\/code><\/pre>\n\n\n\n
<h6>This is heading with h6<\/h6><\/em><\/code><\/pre>\n\n\n\n
2. Bahasa Javascript<\/strong><\/h4>\n\n\n\n
JavaScript adalah bahasa pemrograman. Ini ringan dan paling sering digunakan sebagai bagian dari halaman internet, yang implementasinya memungkinkan skrip sisi klien untuk berkomunikasi dengan dan membuat situs web dinamis. JavaScript pertama kali bernama LiveScript, tetapi mungkin karena antusiasme yang diciptakan Java, Netscape mengubah namanya menjadi JavaScript. JavaScript pertama kali muncul pada tahun 1995 dengan nama LiveScript di Netscape 2.0. <\/p>\n\n\n\n
Protokol Transportasi HyperText, atau HTTP, dirancang untuk mengirimkan teks HTML melalui jaringan untuk dilihat, persis seperti namanya. Namun, itu benar-benar statis dengan HTML dan tidak memberikan kemampuan untuk mengimplementasikan logika. Jika komputer menjalankan JavaScript, browser dipisahkan. Kotak pasir JavaScript digunakan sebagai langkah keamanan tambahan oleh browser seperti Chrome dan Edge. JavaScript tidak dapat menulis atau membaca dari hard drive atau perangkat penyimpanan lain yang terhubung ke komputer.<\/p>\n\n\n\n
Anda dapat melihat contoh kecil ini tentang tampilan kode JavaScript.<\/p>\n\n\n\n
Contoh<\/p>\n\n\n\n
<!DOCTYPE html><\/em><\/p>\n\n\n\n
<html><\/em><\/p>\n\n\n\n
<body><\/em><\/p>\n\n\n\n
<h2>Hello EDUCBA<\/h2><\/em><\/p>\n\n\n\n
<p id=\u201ddemo\u201d>EDUCBA Can Make your Future Bright.<\/p><\/em><\/p>\n\n\n\n
<button type=\u201dbutton\u201d onclick=\u2019document.getElementById(\u201cdemo\u201d).innerHTML = \u201cHello Server!\u201d\u2019>Click Me!<\/button><\/em><\/p>\n\n\n\n
<\/body><\/em><\/p>\n\n\n\n
<\/html><\/em><\/p>\n\n\n\n
3. Bahasa C++ <\/strong><\/h4>\n\n\n\n
C ++ adalah salah satu bahasa pemrograman ujung depan terbaik. C++ dikembangkan oleh Bjarne Stroustrup. Bahasa ini juga dikenal dengan ekstensi C yaitu bahasa C++ versi berikutnya. C++ digunakan untuk berbagai keperluan seperti pengembangan game, pengembangan aplikasi, sistem operasi, animasi, dll. Bahasa ini mudah dipelajari. Fitur C++ ini membuatnya populer di pasar. C++ adalah bahasa dasar untuk semua bahasa. Bahasa C++ memiliki kumpulan pustaka yang kaya.<\/p>\n\n\n\n
Program to display \u201cHello World\u201d<\/em><\/code><\/pre>\n\n\n\n
#include <iostream><\/em><\/code><\/pre>\n\n\n\n
Using namespace std;<\/em><\/code><\/pre>\n\n\n\n
Int main()<\/em><\/code><\/pre>\n\n\n\n
{Cout<<\u201dHello,World!\u201d;<\/em><\/code><\/pre>\n\n\n\n
Return 0;}<\/em><\/code><\/pre>\n\n\n\n
Read also: The Basic of Front End Development Process<\/a><\/p>\n\n\n\n
4. Bahasa CSS <\/strong><\/h4>\n\n\n\n
CSS Singkatan dari Cascading Style Sheets. Anda dapat mengontrol warna, ukuran kolom dan desain warna, spasi paragraf, gaya font, gambar atau warna latar belakang, desain tata letak dan variasi tampilan perangkat yang berbeda, ukuran layar, atau efek lainnya dengan menggunakan CSS. CSS sederhana untuk diketahui dan dipahami, tetapi mengontrol presentasi dokumen HTML. CSS biasanya dipasangkan dengan bahasa markup HTML atau XHTML. <\/p>\n\n\n\n
Anda tidak memerlukan karakteristik tag HTML untuk menulis setiap kali jika Anda menggunakan CSS. Cukup tulis aturan tag CSS dan gunakan untuk semua acara tag. Melalui kode yang lebih sedikit, waktu pengunduhan menjadi lebih cepat. Untuk lebih dari satu jenis perangkat, style sheet memungkinkan pengoptimalan konten. Berbagai versi situs web untuk perangkat genggam, seperti PDA, ponsel, atau untuk pencetakan, dapat disajikan dengan dokumen HTML yang sama.<\/p>\n\n\n\n
Anda dapat melihat contoh kecil tentang bagaimana kode CSS terlihat<\/p>\n\n\n\n
Contoh:<\/p>\n\n\n\n
<!DOCTYPE html><\/em><\/code><\/pre>\n\n\n\n
<html><\/em><\/code><\/pre>\n\n\n\n
<head><\/em><\/code><\/pre>\n\n\n\n
<style type = \u201ctext\/css\u201d media = \u201call\u201d><\/em><\/code><\/pre>\n\n\n\n
body {<\/em><\/code><\/pre>\n\n\n\n
background-color: white;<\/em><\/p>\n\n\n\n
}<\/em><\/p>\n\n\n\n
h1 {<\/em><\/p>\n\n\n\n
color: green;<\/em><\/p>\n\n\n\n
margin-left: 30px;<\/em><\/p>\n\n\n\n
}<\/em><\/p>\n\n\n\n
<\/style><\/em><\/p>\n\n\n\n
<\/head><\/em><\/p>\n\n\n\n
<body><\/em><\/p>\n\n\n\n
<h1>Educba<\/h1><\/em><\/p>\n\n\n\n
<p>Welcome to EDUCBA<\/p><\/em><\/p>\n\n\n\n
<\/body><\/em><\/p>\n\n\n\n
<\/html><\/em><\/p>\n\n\n\n
Pada artikel ini, kita telah melihat berbagai jenis Bahasa Ujung Depan beserta sintaksnya. Yang akan membantu Anda untuk memahami lebih baik dan akan jauh lebih nyaman untuk membahas topik-topik ini.<\/p>\n","protected":false},"excerpt":{"rendered":"
Front-end adalah bagian dari situs web yang dapat langsung Anda lihat dan komunikasikan untuk mendapatkan kapasitas sistem backend yang berarti pengguna dapat melihat, dan mengalami semuanya. Selama bertahun-tahun, peran seorang desainer Web telah berubah secara dramatis, namun fungsi intinya tetap sama. Front-end berurusan dengan semua siulan dan bel yang Anda lihat di situs web, termasuk…<\/p>\n","protected":false},"author":26,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"\nBahasa Yang Digunakan Untuk Pengembangan Front End<\/title>\n<meta name=\"description\" content=\"Front-end adalah bagian dari situs web yang dapat langsung Anda lihat dan komunikasikan untuk mendapatkan kapasitas sistem backend.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"Bahasa Yang Digunakan Untuk Pengembangan Front End\" \/>\n<meta name=\"twitter:description\" content=\"Front-end adalah bagian dari situs web yang dapat langsung Anda lihat dan komunikasikan untuk mendapatkan kapasitas sistem backend.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/lh6.googleusercontent.com\/ZQworlkvtaagkFNpDEsfH8RWJUvpl_Vm5XUm0mto4_qbaA8w9llSbCqn4rcEqF1NlEhfeH7EB5WJBMNo3YqsNtkaVpFM1fiH1gdU2qpiMMzYBn3L04OJyfiP38fIT4Sho2Cu9jrgwPUwfORK10DPSX8\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Syafira Nur Tazkia Abdillah\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bahasa Yang Digunakan Untuk Pengembangan Front End","description":"Front-end adalah bagian dari situs web yang dapat langsung Anda lihat dan komunikasikan untuk mendapatkan kapasitas sistem backend.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/","twitter_card":"summary_large_image","twitter_title":"Bahasa Yang Digunakan Untuk Pengembangan Front End","twitter_description":"Front-end adalah bagian dari situs web yang dapat langsung Anda lihat dan komunikasikan untuk mendapatkan kapasitas sistem backend.","twitter_image":"https:\/\/lh6.googleusercontent.com\/ZQworlkvtaagkFNpDEsfH8RWJUvpl_Vm5XUm0mto4_qbaA8w9llSbCqn4rcEqF1NlEhfeH7EB5WJBMNo3YqsNtkaVpFM1fiH1gdU2qpiMMzYBn3L04OJyfiP38fIT4Sho2Cu9jrgwPUwfORK10DPSX8","twitter_misc":{"Written by":"Syafira Nur Tazkia Abdillah","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/#article","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/"},"author":{"name":"Syafira Nur Tazkia Abdillah","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/8f2cf70c23b8163ad2c53138a38b58b0"},"headline":"Bahasa Yang Digunakan Untuk Pengembangan Front End","datePublished":"2023-03-01T02:38:42+00:00","dateModified":"2023-03-14T06:18:04+00:00","mainEntityOfPage":{"@id":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/"},"wordCount":842,"commentCount":0,"publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/","url":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/","name":"Bahasa Yang Digunakan Untuk Pengembangan Front End","isPartOf":{"@id":"https:\/\/sagaratechnology.com\/blog\/#website"},"datePublished":"2023-03-01T02:38:42+00:00","dateModified":"2023-03-14T06:18:04+00:00","description":"Front-end adalah bagian dari situs web yang dapat langsung Anda lihat dan komunikasikan untuk mendapatkan kapasitas sistem backend.","breadcrumb":{"@id":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/sagaratechnology.com\/blog\/bahasa-apa-saja-yang-digunakan-untuk-pengembangan-front-end\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/sagaratechnology.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Uncategorized","item":"https:\/\/sagaratechnology.com\/blog\/category\/uncategorized\/"},{"@type":"ListItem","position":3,"name":"Bahasa Yang Digunakan Untuk Pengembangan Front End"}]},{"@type":"WebSite","@id":"https:\/\/sagaratechnology.com\/blog\/#website","url":"https:\/\/sagaratechnology.com\/blog\/","name":"Sagara Asia Blog","description":"Dapatkan Informasi Seputar Teknologi dan Bisnis","publisher":{"@id":"https:\/\/sagaratechnology.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/sagaratechnology.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/sagaratechnology.com\/blog\/#organization","name":"Sagara Technology","url":"https:\/\/sagaratechnology.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","contentUrl":"https:\/\/sagaratechnology.com\/blog\/wp-content\/uploads\/2021\/10\/sagara-logo.jpeg","width":200,"height":200,"caption":"Sagara Technology"},"image":{"@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/sagara-asia\/"]},{"@type":"Person","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/8f2cf70c23b8163ad2c53138a38b58b0","name":"Syafira Nur Tazkia Abdillah","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/sagaratechnology.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3e4cdb0cc36f3857c031f09bd895111f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3e4cdb0cc36f3857c031f09bd895111f?s=96&d=mm&r=g","caption":"Syafira Nur Tazkia Abdillah"}}]}},"_links":{"self":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/3468"}],"collection":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/users\/26"}],"replies":[{"embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=3468"}],"version-history":[{"count":4,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/3468\/revisions"}],"predecessor-version":[{"id":3531,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/posts\/3468\/revisions\/3531"}],"wp:attachment":[{"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=3468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=3468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sagaratechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=3468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}