DomaiNesia
gurudaridesa.com

3 Cara Mudah Menggabungkan HTML dengan CSS

3 Cara Mudah Menggabungkan HTML dengan CSS. Selamat siang teman dan para pengunjung setia gurudaridesa.com. Kembali lagi bersama saya kak ahan selaku admin dari gurudaridesa.com. Semoga kita semua dalam keadaan sehat dan baik adanya amin. Sebelumnya saya mau mengucapkan Tahun Baru 2021, Semoga ditahun ini semua harapan dan cita cita di tahun 2020 lalu yang sempat tertunda di karenakan kondisi yang memang anta beranta semoga tercapai, pokoknya kita berdoa di tahun yang baru ini semua sudah jadi lebih baik, Amin.

gurudaridesa.com

Baiklah pada kesempatan kali ini gurudaridesa.com akan melanjutkan materi tentang 3 Langkah Mudah Menguasai dan Belajar CSS, yang sebelumnya sudah pernah dibahas di tulisan tulisan sebelumnya. Pada tulisan sebelumnya gurudaridesa.com sudah membahas CSS mulai dari pengertian, sejarah, dan detail lainnya seperti fungsi dan perbedaannya denga HTML walaupun hanya kulitnya saja tapi saya rasa sudah cukup memberikan gambaran jelas mengenai apa itu CSS kepada teman teman semua. Bagi teman teman yang belum membaca konten saya yang berjudul 3 Langkah Mudah Menguasai dan Belajar CSS kemudian di lanjutkan dengan tulisan 2 Bagian Dasar Cara Mudah Penulisan Kode CSS, alangkah baiknya teman teman baca dulu 2 tulisan tersebut, sebelum teman teman melanjutkan materi baru kita ini yaitu 3 Cara Mudah Menggabungkan HTML dengan CSS

Baca Juga : Cara Mudah Membuat Daftar Isi Otomatis di Ms. Word

3 Cara Mudah Menggabungkan HTML dengan CSS. Bagi teman teman yang sudah mengikuti 2 tulisan saya sebelumya, yuk lanjut aja. Baik, pada tulisan kali ini gurudaridesa.com akan membahas CSS secara mendalam mengenai 3 Cara Mudah Menggabungkan HTML dengan CSS, yang mana sudah sedikit saya jelaskan juga di dalam tulisan saya sebelumya pada 3 Langkah Mudah Menguasai dan Belajar CSS. Jadi sekali lagi disarankan buat teman teman semua diharapkan untuk berkenan membaca terlebih dahulu tulisan saya sebelumnya, agar lebih memahami tulisan saya yang akan membahas 3 Cara Mudah Menggabungkan HTML dengan CSS ini.

Selain karena untuk memudahkan teman teman dalam memahami CSS lebih mudah juga akan menuntun teman teman dalam memahaminya karena tulisan ataupun pembahasan mengenai CSS ini akan saya kupas secara bertahap yang artinya tulisan saya mengenai CSS akan berkelanjutan dari tulisan saya sebelumnya yang membahas CSS.

Pada tulisan saya sebelumnya yang berjudul 3 Langkah Mudah Menguasai dan Belajar CSS, saya sudah membahas sedikit mengenai topik kita kali ini yaitu 3 Cara Mudah Menggabungkan HTML dengan CSS, dan hari ini saya akan membahasnya secara lengkap, jadi buat teman teman sediakan kopi da cemilan ya:D

Sebelum kita masuk ke topik pembahasan tentang lebih dalam, saya ingin mengajak teman teman terlebih dahulu memahami bahwa CSS bukanlah sebuah bahasa pemrograman, kenapa? Kok bukan bahasa pemrograman? Mungkin teman teman bertanya seperti itu. Tenang dulu teman teman, saya akan menjelaskan kepada teman teman kenapa saya mengatakan CSS bukanlah sebuah bahasa pemrograman.

3 Cara Mudah Menggabungkan HTML dengan CSS. CSS bukan bahasa pemrograman karena di dalamnya tidak terdapat syntax logika, tidak ada proses iterasi, dan tidak dapat membuat sebuah variabel layaknya seperti bahasa pemrograman pada umumnya. Umumnya kebanyakan dari kita masih menganggap CSS merupakan bahasa pemrograman (tidak salah juga sih mengingat berkas CSS juga berupa kumpulan syntax), walau kenyataannya CSS hanya merupakan sebuah declarative language yang hanya digunakan untuk mendeklarasikan suatu nilai yang terdapat pada berkas HTML yang nantinya digunakan untuk mengatur seperti apa sebuah elemen HTML ditampilkan pada halaman browser.

Download : Program Data Mining Metode Apriori Berbasis Web

3 Cara Mudah Menggabungkan HTML dengan CSS

Dalam menggabungkan berkas CSS dan berkas HTML, ada 3 Cara Mudah Menggabungkan HTML dengan CSS yang dapat digunakan.  Adapun 3 Cara Mudah Menggabungkan HTML dengan CSS tersebut adalah sebagai berikut.

1. Inline Style

Dalam penggabungan berkas HTML dengan berkas CSS, Inline Style merupakan salah satu cara penggabungan berkas HTML dengan berkas CSS yang cukup mudah. Hal ini dikarenakan penggabungan berkas HTML dengan berkas CSS  dengan Inline Style adalah penulisan berkas CSS digabungkan secara langsung kedalam Tag HTML.

Adapun berikut ini adalah contoh penulisan Inline Style:

Dari kumpulan syntax pada berkas HTML diatas, maka akan tampak seperti gambar dibawah pada halaman web browser.

3 Cara Mudah Menggabungkan HTML dengan CSS

2. Embedded Style

Penggabungan berkas CSS dengan berkas HTML yang kedua adalah Embedded Style, dimana dalam penggabungan berkas HTML dengan berkas CSS dengan cara menuliskan berkas CSS kedalam berkas HTML per halaman ( Page ) dan penulisan file CSS tersebut di tuliskan sebelum </head> pada berkas HTML atau lebih tepatnya di antara <head>… berkas CSS </head>.

Adapun berikut ini adalah contoh penulisan Embedded Style:

Dari kumpulan syntax pada berkas HTML diatas, maka akan tampak seperti gambar dibawah pada halaman web browser.

3 Cara Mudah Menggabungkan HTML dengan CSS

3. Link Style

Penggabungan berkas CSS dengan berkas HTML yang ketiga adalah Link Style, dimana penggabungannya atau untuk penulisan berkas CSSnya di tuliskan secara terpisah antara berkas HTML dan berkas CSS dan kita sebagai developernya hanya perlu memasang link berkas CSS ke dalam berkas HTML, dan pemasangan Link teman teman bisa taruh di antara <head>…</head>.

Perlu teman teman ketahui untuk cara Link Style ini pada umumnya banyak dipakai oleh para Web Design atau programmer karena dengan cara Link Style, kita sebagai Web Developer cukup melakukan satu kali penulisan berkas CSS yang nantinya dapat dipakai oleh seluruh halaman Website. Dan biasanya para Web Design selalu menamai berkas Link Style CSS dengan nama style.css.

Adapun berikut ini cara menerapkan penggabungan berkas HTML dengan berkas CSS dengan penulisan Link Style:

Pertama, sediakan berkas HTML teman teman, sebagai contoh berikut:

Simpan berkas HTML tersebut ke dalam sebuah folder pada drive komputer teman teman. Terserah teman teman mau taruh di drive mana dengan nama folder sesuka teman teman tapi saran saya untuk memudahkan teman teman dalam mengikuti tulisan ini, sebaiknya simpan di drive C\ dengan nama folder belajar.

Dari kumpulan syntax pada berkas HTML diatas dimana belum kita buatkan Link CSSnya, maka akan tampak seperti gambar dibawah pada halaman web browser.

3 Cara Mudah Menggabungkan HTML dengan CSS

Setelah itu, teman teman buatkan berkas CSS pada sebuah berkas baru, contoh sebagai berikut:

Selanjutnya, teman teman simpan berkas CSS tersebut dengan nama style dengan ekstensi .css, sehingga nama berkas CSS teman teman menjadi style.css. Selanjutnya pilih folder dimana teman teman akan menyimpannya. Saran saya  untuk memudahkan teman teman dalam mengikuti tulisan ini, taruh sebuah folder dengan nama foldernya assets lalu didalamnya lagi buatkan sebuah folder dengan nama style dan folder folder tersebut harus didalam satu folder dengan berkas HTML teman teman tadi.

Setelah semua berkas yang dibutuhkan sudah ada, yaitu berkas CSS dan berkas HTML, maka selanjutnya tambahkan syntax berikut <link rel=”stylesheet” href=”assets/styles/style.css”> kedalam berkas HTML dan jangan lupa taruh syntax tersebut di antara <head>…</head>. Sehingga berkas HTML teman teman akan menjadi sebagai berikut:

Sehingga ketika kita buka berkas HTML dari kumpulan syntax pada berkas HTML diatas dimana telah kita buatkan Link CSSnya, maka akan tampak seperti gambar dibawah pada halaman web browser.

3 Cara Mudah Menggabungkan HTML dengan CSS

Mudah bukan:D, jadi itulah dia teman teman 3 Cara Mudah Menggabungkan HTML dengan CSS. Semoga dengan tulisan ini, dapat membantu teman teman dalam belajar CSS. Akhir kata, sekian lah yang dapat saya sajikan dalam materi kali ini yaitu 3 Cara Mudah Menggabungkan HTML dengan CSS, kurang lebihnya bahasa tulisan saya dalam menyampaikan materinya mohon maaf yang sebesar besarnya.

Dan buat teman teman yang berkenan dengan website gurudaridesa.com ini, saya sangat berterima kasih jika teman teman dapat membagikan web ini, dan mengikuti akun Media Sosial kami yang ada di sidebar web gurudaridesa.com ini, akhirnya saya pamit dulu terimakasih dan sampai jumpa di lain waktu, bye bye :D.

NB. Selanjutnya gurudaridesa.com akan membahas point terakhir dari 3 Cara Mudah Menggabungkan HTML dengan CSS, jadi jangan lupa untuk tetap ikuti media sosial kita agar teman teman tidak ketinggalan artikel penting lainnya.

Bagikan ini :

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *