Apa perbedaan html dan css?

Pekerjaan mengembangkan website baik di lingkungan internet atau di intranet yang dapat meliputi desain web, pengembangan konten,  berhubungan dengan klien/pelanggan, pengerjaan skrip baik client-side (sisi klien/browser-user agent) dan atau server-side (yang di dalam server), web server, konfigurasi keamanan jaringan dan pekerjaan e-commerce.

Web development” sendiri seringkali merujuk pada aspek utama non-desain, seperti menulis kode alias koding. Web development dapat bermakna luas mulai dari pengembangan satu halaman statis hingga aplikasi internet berbasis web yang sangat kompleks.

Karena kegiatan “Web Development” berfokus pada aspek koding, maka kegiatan ini akan menggunakan bahasa pemrograman sesuai dengan kebutuhan website. Beberapa bahasa pemrograman yang digunakan adalah HTML, JSS, PHP, MySQL dan CSS. Artikel ini akan membahas perbedaan dan kegunaan masing – masing dari bahasa tersebut.

HTML (Hypertext Markup Language)

                        HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

HTML adalah kode baris dasar yang bisa harus digunakan untuk membuat halaman web. Singkatnya HTML Merupakan kumpulan script yang bisa kita gunakan untuk membuat halaman web. Dari HTML ini, kita bisa menampilkan data baik berupa teks maupun gambar di situs web yang kita buat.

PHP (Hypertext Preprocessor)

Hypertext Preprocessor (PHP) adalah bahasa skrip yang dapat ditanamkan atau disisipkan ke dalam HTML. PHP banyak dipakai untuk memrogram situs web dinamis. PHP dapat digunakan untuk membangun sebuah CMS. Walaupun PHP sama – sama sebagai bahasa strutkur dasar sama seperti HTML, namun PHP memiliki perbedaan tersendiri, perbedaan PHP dengan HTML adalah PHP merupakan bahasa pemrograman yang berada pada sisi Server dan membutuhkan konektifitas ke dalam database, dimana hal tersebut tidak dapat dilakukan menggunakan HTML.

Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.
CSS dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokument. CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

CSS tidak dapat berdiri sendiri melainkan harus berada di dalam strukur pemrograman lain yang didasari oleh HTML atau PHP.

Javascript

JavaScript adalah bahasa scripting yang paling populer di internet dan bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox, Netscape, Opera. JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms, detect browsers, create cookies, GUI dsb.

            Sama seperti CSS, Javascript tidak dapat berdiri sendiri dan harus didasari oleh HTML atau PHP. Namun perbedaan Javascript dengan CSS adalah, Javascript mengatur logika seperti validasi untuk membuat tampilan website lebih dinamis dan CSS mengatur tampilan dari website tersebut seperti gambar, warna , font, dll.

SQL (Structured Querry Language)

SQL adalah suatu bahasa (language) yang digunakan untuk mengakses data di dalam sebuah database relasional. SQL sering juga disebut dengan istilah query, dan bahasa SQL secara praktiknya digunakan sebagai bahasa standar untuk manajemen database relasional. Hingga saat ini hampir seluruh server database atau software database mengenal dan mengerti bahasa SQL.

Di dalam Website SQL akan sangat erat hubunganya dengan PHP, karena PHP merupakan struktur pemrograman pada sisi server sehingga server membutuhkan koneksi ke dalam database, dan SQL digunakan untuk menghubungkan website (dengan struktur bahasa PHP) ke dalam Database menggunakan bahasa SQL. Contoh bahasa pemrograman SQL adalah MySQL, jQuery,dll.

Bagi kamu yang bekerja di bidang front-end atau back-end developer atau pengembangan situs jejaring tentunya akrab dengan hyper text markup language (HTML) dan CSS (Cascading Style Sheets). Keduanya adalah hal utama dalam pembangunan suatu situs jejaring dan tampilan web secara umum. 

Bagi seorang Front-end Developer peran CSS amat penting untuk membuat tampilan sebuah halaman web yang sedang dibangun. Bagi pengunjung situs pun CSS berperan besar agar pengunjung nyaman berselancar di laman sebuah situs. Namun, bagi mereka yang awam dengan teknis pengembangan web tentunya bingung, apa sih CSS itu? Atau, bagaimana sih cara kerja CSS supaya sebuah web menjadi menarik? Nah, untuk itu mari kita simak ulasan berikut ini.

Baca juga: 9 Tips mudah belajar coding untuk pemula yang wajib dicoba

Apa itu CSS?

Seperti yang telah disinggung di atas tadi, CSS adalah singkatan dari cascading style sheets. Menurut Techterms, CSS dapat diartikan sebagai lembar berjenjang untuk format tata letak halaman web. CSS merupakan sebuah temuan untuk membantu pengembang web yang tadinya hanya bergantung pada HTML sebagai bahasa markup. HTML di awal mula digunakan untuk menandai objek di halaman web seperti tabel, gambar, paragraf, dan sebagainya.

Penggunaan HTML di awal mula perkembangan internet memang bisa dibilang cukup karena saat itu internet hanya digunakan oleh kalangan terbatas untuk berbagi informasi penelitian. Saat itu, proses format halaman amat terbatas dan gaya atau style halaman situs masih monoton. Namun belakangan, setelah internet digunakan luas dan makin berkembang orang-orang mulai berpikir bagaimana mengembangkan halaman situs agar lebih menarik. Hal ini yang lantas membuat HTML menjadi amat terbebani.

Setelah perkembangan pesat internet, halaman web tidak hanya memiliki format tetapi juga warna dan tata letak lain harus dibebankan pada kontrol HTML. Pengembangan web berubah menjadi sesuatu yang sangat kompleks dan sulit ditangani. Tentu saja, peran HTML sebagai alat struktural dan alat bantu desain terasa amat berat. Untuk itulah kemudian CSS dibuat sebagai solusi dari tugas desain dan pemformatan, sedangkan HTML bisa kembali fokus pada tata letak halaman web.

CSS muncul dan lantas dikenal sebagai alat untuk memformat dokumen yang ditulis menggunakan bahasa markup yaitu HTML. CSS juga dikenal sebagai bahasa style sheet yang bekerja sama dengan HTML untuk membangun sebuah halaman situs jejaring.

Jadi, secara umum kita dapat mengartikan HTML sebagai bahasa untuk menggambarkan struktur halaman situs, sedangkan CSS merupakan bahasa untuk menggambarkan halaman situs, termasuk warna, tata letak, dan font. Hal ini memungkinkan seorang pengembang untuk mengadaptasi presentasi ke berbagai jenis perangkat, seperti layar besar monitor, layar kecil tablet atau smartphone, hingga mesin cetak (printer). CSS tidak lagi bergantung pada HTML dan dapat digunakan dengan bahasa markup lainnya.

Pemisahan HTML dari CSS nantinya akan mempermudah pemeliharaan situs sehingga dapat berbagi style sheet di seluruh halaman dan menyesuaikan halaman dengan lingkungan yang berbeda. Pemisahan ini berarti pemisahan struktur (HTML) dari presentasi (CSS). 

Baca juga: 5 Tips menjadi Front-end Developer dan skill yang dibutuhkan

Cara kerja CSS

Contoh skema cara kerja CSS (Sumber: developer.mozilla.org)

CSS bekerja saat sebuah browser menampilkan dokumen, sebabnya pada waktu itu browser harus menggabungkan konten dokumen dengan gaya informasi atau gaya presentasi dalam halaman sebuah situs. Untuk membangun sebuah halaman situs dan membuat presentasinya semenarik mungkin, CSS memiliki beberapa langkah cara kerja yang bisa digambarkan sebagai berikut,

• Load HTML, dalam tahap ini browser memuat HTML dari jaringan
• Parse HTML, pada tahap ini terjadi penguraian HTML untuk membuat document object model (DOM) dan memuat CSS. DOM bertindak untuk mewakili dokumen dalam memori komputer. DOM memiliki struktur seperti pohon dan mencakup elemen, atribut, potongan teks dalam bahasa markup yang menjadi simpulnya atau struktur pohon DOM. DOM dapat membantu pengembang untuk mendesain, men-debug, dan memelihara CSS karena DOM adalah tempat di mana CSS dan konten dokumen bertemu.
• Load CSS, peramban atau browser kemudian memuat sebagian besar sumber daya yang akan ditautkan oleh dokumen HTML, seperti gambar atau video sematan. Dalam hal ini kemudian CSS dimuat dan ditautkan.
• Parse CSS, sama halnya HTML, CSS juga kemudian diurai dengan mengurutkan aturan yang berbeda berdasarkan jenis pemilihnya ke dalam bucket yang berbeda seperti elemen, kelas, ID, dan sebagainya. Penyeleksian ini nantinya menentukan aturan mana yang harus diterapkan ke simpul-simpul DOM.
• Render tree, penyeleksian dalam setiap elemen CSS yang akan diterapkan ke simpul DOM sesuai kebutuhannya tadi disebut render tree. Render tree ini diletakkan dalam struktur yang seharusnya muncul setelah aturan dan penyesuaian simpul dan elemen telah diterapkan.
• Display, setelah penyesuaian tadi berjalan dan aturan dijalankan maka CSS dan DOM akan membentuk tampilan visual sebuah halaman situs yang tertampil di layar.

Baca Juga: Full-Stack Developer: Tugas, kualifikasi, dan proyeksi karier tahun 2021

Fungsi CSS

Menurut pengertian dan penjelasan CSS di awal tentunya telah tersirat bahwa CSS berfungsi untuk menyederhanakan kerja HTML dalam membangun sebuah halaman situs jejaring. Namun, jika dijabarkan kembali ada beberapa fungsi CSS yang memang berhubungan langsung dengan proses penyederhanaan kerja HTML tadi. Adapun beberapa fungsi CSS adalah sebagai berikut,

• Memuat halaman situs dengan cepat, peran CSS dalam menyederhanakan kerja HTML membuat proses pengodean akan lebih singkat sehingga hal ini berpengaruh pada penerapan dokumen dan proses pemanggilannya. Proses pembukaan halaman web dan pengunduhan dokumen dari situs akan berjalan lebih cepat daripada adanya atribut tag HTML di setiap dokumen.
• Desain diproses dengan cepat, penggunaan CSS untuk mengerjakan desain halaman web memang terbukti mempercepat proses pembangunan sebuah halaman web. Hal ini dikarenakan pembagian kerja antara HTML yang berperan membangun struktur web dan CSS dengan perannya terfokus pada desain web. Adanya CSS function dapat memungkinkan pengembang menerapkan satu dokumen dapat muncul di berbagai halaman web tanpa penyalinan kode berulang.
• Adaptif terhadap berbagai perangkat, fungsi CSS yang ini telah disinggung sebelumnya yaitu membuat konten halaman menjadi adaptif atau kompatibel terhadap berbagai perangkat atau browser dengan ukuran dan versi berbeda. CSS memungkinkan sebuah dokumen dibuka dalam perangkat terbaru dan versi lamanya, begitu pula berlaku pada versi browser yang dipakai pengguna.

Baca juga: 7 Cara menjadi hacker profesional dan rekomendasi Website-nya

Mengapa perintah CSS diperlukan?

Perintah CSS atau CSS functions diperlukan untuk mengatur warna, ketebalan font, dan lain sebagainya. Adapun berbagai perintah atau CSS functions ini antara lain adalah:

Perintah atau CSS function ini amat penting secara umum untuk membangun desain pewarnaan halaman situs. Di sisi lain, HTML juga digunakan untuk membuat elemen yang nantinya didesain dengan CSS. Elemen ini dapat berupa paragraf atau hal lainnya yang akan diberi warna atau pertebalan jenis font. Berikut ini adalah contoh pengodean HTML dalam mendesain sebuah tulisan atau tampilan dari jenis Inline CSS.

<!DOCTYPE html>
<html>
    <head>
        <title>Inline CSS</title>
    </head>
      
    <body>
        <p style = "color:#009900; font-size:50px;
                font-style:italic; text-align:center;">
            GeeksForGeeks
        </p>
  
    </body>
</html>

Hasil: 

Contoh penulisan kode CSS dan hasilnya (Sumber: geeksforfeeks.org)

3 Macam CSS dalam kode HTML

Menurut GeeksforGeeks, CSS memiliki tiga tipe yang dipakai untuk mengatur style pada sebuah halaman situs yang mengandung elemen kode HTML. Proses pengodean ini nantinya akan mengatur warna latar belakang halaman situs, ukuran font, kelompok font yang dipakai, warna, dan lain sebagainya. Semua hal ini diterapkan pada properti elemen halaman web agar tampak menarik.

Adapun 3 macam CSS ini adalah sebagai berikut:

1. External CSS

CSS eksternal ini berisi dokumen CSS terpisah yang hanya mencakup style properti dengan atribut-atribut seperti class, ID, heading, dan lain sebagainya. Properti CSS jenis ini ditulis dalam dokumen terpisah dengan ekstensi “.css” dan harus ditautkan ke dokumen HTML menggunakan tag tautan. Hal ini berarti style dalam setiap elemen hanya dapat diatur sekali dan akan diterapkan di seluruh halaman web.

2. Inline CSS

Inline CSS berisi properti CSS di bagian body yang dilampirkan dengan elemen tertentu dalam bentuk sebaris. Jenis style dari CSS ini ditentukan dalam tag HTML menggunakan atribut style khusus. Contoh dari CSS jenis ini dapat dilihat dari contoh pengodean di bagian sebelumnya.

3. Internal CSS

Internal CSS juga dikenal sebagai embedded CSS yang dapat digunakan ketika satu dokumen HTML harus ditata secara unik. Kumpulan aturan CSS harus berada di dalam dokumen HTML di bagian head section. Contoh dari pengodean Internal CSS adalah sebagai berikut:

<!DOCTYPE html>
<html>
    <head>
        <title>Internal CSS</title>
        <style>
            .main {
                text-align:center; 
            }
            .GFG {
                color:#009900;
                font-size:50px;
                font-weight:bold;
            }
            .geeks {
                font-style:bold;
                font-size:20px;
            }
        </style>
    </head>
    <body>
        <div class = "main">
            <div class ="GFG">GeeksForGeeks</div>
              
            <div class ="geeks">
                A computer science portal for geeks
            </div>
        </div>
    </body>
</html>

Hasil: 

Contoh pengodean jenis Internal CSS (Sumber: geeksforgeeks.org)

Baca juga: Cara ampuh menjadi Back-End Developer yang andal

Jika disimpulkan, HTML tetaplah menjadi dasar dari pembangunan sebuah halaman web. HTML tetap digunakan untuk menyusun situs web dan aplikasi web. Sedangkan CSS digunakan untuk mengembangkan halaman web dengan menata situs web beserta aplikasinya dalam urusan desain dan penentuan warna maupun font. Pembagian tugas antara HTML dan CSS ini membuat proses pengembangan web lebih efektif dan efisien.

Nah, untuk kalian yang memiliki keahlian di bidang pengodean dan pengembangan web rasanya pemahaman semacam ini sudah pasti mendukung kinerja kalian. Dan tentu saja, potensi kalian amat berguna bagi kehidupan bisnis yang kini bergantung pada proses pemasaran digital melalui web maupun situs jejaring pada umumnya. Peran kalian akan berguna untuk membuat situs perusahaan menjadi menarik dan mengundang prospek konsumen.

Bagi kalian yang memiliki keahlian di bidang pemrograman dan pengembangan web dapat mendaftarkan diri melalui EKRUT untuk membuka lebar kesempatan kalian untuk mengembangkan karier. EKRUT akan membantu menghubungkan kalian dengan perusahaan yang mencari kandidat untuk posisi pengembang web. Tunggu apa lagi, klik tautan di bawah ini dan daftarkan dirimu.

HTML & CSS itu apa?

Apa Perbedaan HTML CSS dan JavaScript?

Apa fungsi HTML dan CSS pada sebuah web browser?

Apa hubungan antara CSS dengan HTML?