HTML - HTML Dasar

Belajar HTML Part 16 : Menghubungkan HTML dengan CSS

Belajar HTML Part 16 : Menghubungkan HTML dengan CSS

Belajar HTML Menghubungkan HTML dengan CSS

Sudah sampai di tutorial Belajar HTML Part 16 : Menghubungkan HTML dengan CSS. tutorial Menghubungkan HTML dengan CSS ini merupakan tutorial HTML yang bisa di bilang termasuk ke dalam salah satu tutorial HTML yang paling terpenting. karena jika kita tidak mengetahui cara menghubungkan HTML dengan CSS secara otomatis pasti kita tidak mengetahui bagaimana cara untuk mendesign halaman website yang kita buat karena file HTML tidak terhubung dengan CSS. bukan hanya HTML sebenarnya.  tetapi PHP juga sama, PHP yang akan kita gunakan untuk membuat website. setelah anda selesai mempelajari tutoria-tutorial HTML ini di asumsikan untuk melanjutkan ke tutorial belajar css dan tutorial belajar PHP di www.malasngoding.com, agar materi yang di pelajari menjadi terurut dan terstruktur.

Setelah anda mempelajari tutorial belajar html menghubungkan html dengan css ini selanjutnya akan di jelaskan lagi pada tutorial selanjutnya tentang Class dan id pada html. Pemahaman tentang Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum anda melangkah lebih jauh mempelajari CSS. apalagi bagi anda yang ingin memfokuskan diri pada bagian front-end developer/web designer. silahkan simak penjelasan tentang cara menghubungkan HTML dengan CSS berikut ini. dann untuk penjelasan class dan id akan di bahas pada tutorial selanjutnya.

Cara Menghubungkan HTML dengan CSS

untuk Cara menghubungkan HTML dengan CSS caranya sangat mudah. gunakan tag <link> untuk menghubungkan html dengan css. tag link di letakkan pada bagian element head pada struktur HTML. baiklah perhatikan contoh cara menghubungkan html dengan CSS berikut ini.

Buat sebuah file html atau php terserah anda. karena ini merupakan tutorial HTML maka saya menggunakan file HTML untuk di hubungkan dengan CSS. di sini saya membuat file html dengan nama index.html. kemudian buat sebuah file css lagi dengan nama terserah anda, di sini saya membuat file css dengan nama style.css. jadi ada dua buah file yang saya buat yaitu file index.html dan fiel style.css

index.html

contoh di atas merupakan cara menghubungkan file html/php dengan CSS.  pada contoh di atas saya membuat tag link yang berfungsi untuk menghubungkan file html/php dengan file css yang kita inginkan.

atribut rel=”stylesheet” dan type=”text/css” merupakan deklarasi untuk menjelaskan bahwa file yang kita panggil atau hubungkan adalah file stylesheet atau css. dan pada atribut href di gunakan untuk meletakkan lokasi dan nama file css yang ingin kita hubungkan. pada contoh ini sata menghubungkan file html saya dengan file css yang sudah saya berinama dengan style.css

Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html masih kosong belum berisi element apapun selain struktur dasar html. untuk mencoba apakah file css sudah berhasil terhubung dengan file html maka akan kita cek dengan cara berikut ini. kita buat contoh sederhana dulu dengan cara membuat sebuah element heading 1, dan kemudian kita beri warna text heading 1 tersebut dengan warna orange.

index.html

style.css

belajar html menghubungkan html dengan css

belajar html menghubungkan html dengan css

file html berhasil di hubungkan dengan css terbukti dengan berhasilnya syntax css yang kita buat untuk mengatur element heading 1 html di atas. syntax color pada css di atas merupakan perintah untuk menetapkan warna font/text, font-family untuk mengatur font yang di gunakan dan text-align untuk mengatur rata text. syntax css di atas merupakan syntax css yang paling dasar yang akan kita pelajari juga pada tutorial selanjutnya tentang pengertian dan pengenalan dasar css pada www.malasngoding.com.

See the Pen QyvVLe by Malas Ngoding (@malasngoding) on CodePen.0

Sekian lah tutorial tentang belajar HTML menghubungkan HTML dengan CSS.

Tutorial HTML Dasar Lainnya

Belajar HTML Part 1 : Pengertian HTML
Belajar HTML Part 2 : Memilih Text Editor
Belajar HTML Part 3 : Mengenal Tag, Element, Atribut HTML
Belajar HTML Part 4 : Heading Pada HTML
Belajar HTML Part 5 : Format Text Pada HTML
Belajar HTML Part 6 : Membuat Paragraf Pada HTML
Belajar HTML Part 7 : Membuat Table Pada HTML
Belajar HTML Part 8 : Membuat Hyperlink Pada HTML
Belajar HTML Part 9 : Membuat List Pada HTML
Belajar HTML Part 10 : Membuat Format Code Pada HTML
Belajar HTML Part 11 : Membuat Form Pada HTML
Belajar HTML Part 12 : Atribut Form Pada HTML
Belajar HTML Part 13 : Membuat Symbol Pada HTML
Belajar HTML Part 14 :Menampilkan Gambar Pada HTML
Belajar HTML Part 15 : Tag Iframe Pada HTML
Belajar HTML Part 16 : Menghubungkan HTML dengan CSS
Belajar HTML Part 17 : Mengenal Class dan Id Pada HTML

Incoming search terms:

  • cara menghubungkan html dengan css
  • cara menghubungkan html dan css
  • cara menggabungkan html dan css
  • cara menghubungkan css dengan html
  • cara menghubungkan css dengan php
  • Cara menghubungkan php dengan css
  • cara menggabungkan html dengan css
  • menghubungkan html dengan css
  • cara menggabungkan css dengan php
  • cara menggabungkan css dengan html




Diki Alfarabi Hadi

Coding enthusiast. Someone who love learn something new. especially about web programming and web design. happy to share about knowledge and learn from other.


Discussion
5 Comments
  • Belajar HTML Part 17 : Mengenal Class dan Id Pada HTML 2 years ago

    […] Belajar HTML Part 16 : Menghubungkan HTML dengan CSS […]


  • Belajar HTML Part 13 : Membuat Symbol pada HTML – Malas Ngoding 2 years ago

    […] Belajar HTML Part 16 : Menghubungkan HTML dengan CSS […]


  • Belajar HTML Part 1 : Pengertian HTML – Malas Ngoding 2 years ago

    […] Belajar HTML Part 16 : Menghubungkan HTML dengan CSS […]


  • Belajar HTML Part 5 : Format Text Pada HTML – Malas Ngoding 2 years ago

    […] Belajar HTML Part 16 : Menghubungkan HTML dengan CSS […]


  • Membuat Tampilan Layout Website Sederhana Dengan HTML dan CSS 2 years ago

    […] teman-teman harus memahami dulu dasar-dasar HTML dan CSS. baca postingan sebelumnya tentang tutorial HTML Dasar. dan CSS dasar yang telah di bahas di https://www.malasngoding.com. buat sebuah file. di sini saya membuat […]



Write a Comment

Your email address will not be published. Required fields are marked *