Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / CSS / HTML

Belajar HTML Dan CSS Lengkap Untuk Pemula

Posting Komentar
Assalamualaikum wr.wb, Artikel ini akan membahas mengenai belajar mengnai panduan HTML dan CSS lengkap untuk pemula.
Banyak hal yang akan kita pelajari mengenai panduan HTML dan CSS, mulai dari pengertian html dan css, kegunaan html dan css, Struktur hingga penerapan tag script html dan css. Oke langsung saja kita akan bahas materi mengenai Belajar panduan HTML dan CSS lengkap untuk pemula ini, Silahkan teman - teman simak dan pahami pembahasan dibawah ini.

Lalu apa saja yang akan kita pelajari pada artikel mengenai Belajar HTML Dan CSS Lengkap Untuk Pemula ini?, silahkan teman- teman perhatikan point- point dibawah ini:

  1. Apa itu HTML
  2. Apa Kegunaan HTML
  3. Struktur HTML
  4. Elemen HTML
  5. Tag Dalam Elemen Head
  6. Tag Dalam Element Bodi
  7. Attribut HTML
  8. Apa itu CSS
  9. Struktur Penulisan CSS
  10. Teknik Penulisan CSS
  11. CSS Propertis
  12. Selector Pada CSS
  13. Selector CSS dengan Id dan Class
Oke langsung saja kita bahas, silahkan teman - teman simak dan pahami dengan baik pembahasan dibawah ini:

1. Apa itu HTML 

Sedikit mengenai pengertian dari HTML, HTML ini dirilis pada tahun 1989, yang dibuat oleh Tim Berners Lee dari suatu organisasi yang bernama Organisasi European Organization for Nuclear Research (CERN) yang menceruskan suatu ide untuk dapat menciptakan suatu script yang tentunya diperuntukan untuk perograman pada suatu document yang kemudian bahasa pemrograman ini dikenal dengan nama HTML. Tim Berners Less ini kita dapat mengenalnya sebagai penemu HTML.

2. Apa Kegunaan HTML ini?

HTML ini merupakan suatu kerangka untuk membuat suatu website yang dapat kita gunakan untuk memampilkan suatu kontent, untuk menghubungkan link dari setiap halaman yang berbeda serta memberikan struktur serta informasi terkait dengan sebuah halaman website. Pada kontent sebuah halaman website tidak terbatas hanya pada teks saja, melainkan pada konten interaktif seperti audio, gambar, video serta animasi yang dapat disisipkan serta ditampilkan pada halaman sebuah website.

Untuk struktur dasarnya pada HTML, sebagai berikut susunan file dari HTMLnya:

<html>
    <head>
        <title>Judul halaman</title>
    </head>
    <body>
        <!-- semua yang akan di tampilkan di web disimpan di dalam body -->
        <h1>Selamat datang</h1>
    </body>
</html>

3. Struktur HTML

Pada struktur HTML itu tentunya kita mengenal konsep dasar yaitu tag, elemen serta atribut.

Tag HTML merupakan suatu penanda untuk menandai element- elemen dalam suatu document HTML. fungsi tag tersebut tentunya untuk memberian instruksi atau suatu pemberitahuan kepada browser bagaimana suatu objek dapat ditampilkan berdasarkan tag yang digunakan , untuk objek disini dapat berupa teks, audio, gambar serta video.

Pada tag HTML tentunya dibuat secara perpasang - pasangan, tag aja berpasang - pasangan masa kamu engga eaaa... , tentunya terdapat tag pembuka dan tag penutup dapa HTML
contoh penerapannya seperti berikut:
Tag pembuka: <nama_tag> , tag penutup </nama_tag>.
Catatan: Perbedaannya antara suatu tag pembuka dengan tag penutup adalah kita dapat melihat pada contoh diatas tentunya untuk tag penutup terdapat garis miring sebelum nama tagnya.

4. Element HTML 

Element HTML ini merupakan rangkaia dari tag pembuka, konten serta tag penutup disebut dengan elemen HTML. Berikut merupakan contoh penerapan elemen heading 1 serta penerapan element paragraf:

<h1>Selamat Datang</h1>
<p>Selamat belajar pemrograman web di forumkoding.com</p>
Pada contoh tag diatas, kita memiliki element heading 1 yang tentunya tersusun dari tag pembuka <h1>, Suatu konten elemen berupa teks yang bertulisakn Selamat Datang serta tag penutup </h1>.  Tentunya kita juga memiliki elemen paragraf yang tersusun dari suatu tag pembuka <p>, konten teks serta tag penutup </p>. Perbedaan dari kedua element tersebut adalah, Untuk element heading tentunya digunakan untuk dapat menampilkan judul halaman, sedangkan pada elemen paragraf digunakan untuk dapat menampilkan konten paragraf. Bila teman- teman membuka browser, maka suatu element heading akan mencetak lebih besar serta lebih tebal dari pada element paragraft.

Silahkan teman -teman perhatikan contoh script dibawah ini:
<body>
    <h1>Selamat datang</h1>
    <p>Selamat belajar pemrograman web di <b>ForumKoding.com</b></p>
</body>
Pada contoh script diatas, kita memiliki suatu element heading 1 yang tentunya tersusun dari tag pembuka <h1>,  untuk konten elementnya sendiri bertuliskan Selamat Datang serta tag penutupnya </h1>. Kita juga tentunya memiliki elemen paragraf yang tersusun dari tag pembuka <p>,  konten tes serta tag penutup </p>.  Perbedaan dari element tersebut adalah element heading digunakan untuk dapat menampilkan judul pada halaman, sedangkan element paragraf dapat kita gunakan untuk menampilkan isi konten paragraf. Bila teman - teman membuka browser, maka element heading akan dicetak lebih besar serta lebih tebal dari pada suatu elemen paragraf.

maka:
  • <body> disebut sebagai tag body (atau tag pembuka body), <h1> adalah tag h1 dan <p> yaitu tag p atau paragraf
  • <h1> Selamat Datang </h1> disebut element h1
  • <p>Selamat belajar pemrograman web di <b>ForumKoding.com</b></p> disebut sebagai element p ataupun paragraf
  • <b> ForumKoding.com </b> disebut sebagai elemen b atau bold, <b> itu sendiri disebut tag bold
  • Semua bagian mulai dari tag pembuka body, berikut subelemen diantara tag pembuka dan penutup body, hingga tag tutup body disebut dengan elemen body.
Catatan: Penulisan elemen harus Penulisan elemen harus lengkap, mulai dari tag pembuka, konten dan tag penutup. Apa yang sudah dibuka wajib ditutup kembali!
 Tentunya ada banyak tag yang dapat teman - teman gunakan didalam tag HTML untuk dapat menampilkan konten. Bila kita membaginya kedalam dua area, maka akan ada tag yang dapat digunakan didalam elemt head serta tag yang digunakan didalam elemen body.

5. Tag didalam Elemen Head

Pada elemen yang terdapat didalam head berfungsi sebagai suatu informasi dari document HTML serta tentunya tidak akan ditampilkan pada layat browser. Ada beberapa tag yang dapat digunakan dalam elemen yang headnya diantaranya yaitu <meta>, <title>, <script>, <style> serta <link>.

<head> 
    <meta charset="utf-8">
    <title>Judul halaman</title>
    <style> Style </style>
    <script> Javascript </script>
</head> 

6. Tag didalam Element Body

Tentunya ada banyak yang dapat kita gunakan untuk menampilkan sebuah konten pada elemen body.

Ada tag yang difungsikan atau berfungsi sebagai menampilkan teks, seperti <h1>, <h2>, <h3>, <h3>, <h4>, <h5>, <p> dan lain sebagainya.

Tentunya ada juga tag yang digunakan untuk memformat teks, seperti <b>, <i>, <strong>, <em>, <mark>, <del> dan lain sebagainya.

Untuk dapat menampilkan suatu gambar teman- teman tentunya dapat menggunakan tag <img>, dan untuk membuat tautan teman - teman dapat menggunakan tag <a>.

Di dalam sebuah document HTML, teman - teman dapat membuat suatu elemen table tentu dengan menggunakan kombinasi dari tag <table>, <thead>, <tbody>, <tr>, <th>, dan <td>. Serta teman- teman juga dapat membuat list tentunya dengan menggunakan kombinasi dari tag <ul>, <ol>, <li>, <dl>, <dd>, dan <dt>.

Teman - teman tentunya juga dapat memasukkan video, audio ataupun format media lainnya dengan  menggunakan sejumlah tag seperti <object>, <video>, <audio>, <embed>, dan <iframe>.

Sampai pembahasan kali ini tentunya teman - teman cukup untuk paham mengenai tag dan elemen. Adapun cara penggunaan tag-tag di atas tersebut akan dibahas di bagian khusus setelah pembahasan pada bagian ini. Apabila teman- teman ingin mengetahui lebih lengkap  mengenai tag HTML apa saja yang tersedia dapat teman- teman lihat di w3schools. Tentunya teman- teman jangan kaget jika kalian menemukan banyak tag di HTML. Teman- teman tak mesti menghapal semuanya, cukup pelajari tag-tag yang akan kalian gunakan saja saat membuat website nantinya.

7. Attribut HTML

Pada attribut HTML ini memeliki tugas khusus untuk dapat memberikan suatu informasi tambahan pada sebuah tag., untuk contohnya silahkan teman- teman perhatikan script dibawah ini:

<namatag nama-atribut="nilai-atribut"></namatag>
Dari contoh script di atas teman - teman dapat melihat yang dimaksud dengan atribut merupakan suatu tambahan tentunya yang ditulis di dalam tag pembuka. Contohnya bila kalian ingin membuat suatu tautan atau link, kalian akan perlu menulis minimal seperti script dibawah ini:
<a href="login.html">Login</a>
Pada contoh script di atas, tentunya kalian membuat tautan dengan menggunakan tag <a>. Tentunya menggunakan tag <a> saja tidak cukup, dikarenakan kita perlu untuk memberi tahu kepada mesin pencari mengenai kemana suatu halaman akan dialihkan jika user mengklik tautan Login. Karena itulah, tag <a> dilengkapi dengan atribut  yaitu href yang tentunya harus diisi dengan URL sebagai tujuan dari tautan tersebut. Pada contoh script di atas, href adalah nama atribut, serta "login.html" merupakan nilai atribut. Nama serta nilai atribut dipisahkan dengan menggunakan tanda sama dengan (=).

Tentunyas elain tag <a> ada banyak tag lain yang membutuhkan atribut ini. Jika kita kelompokkan , ada dua jenis atribut, yaitu atribut global serta atribut spesifik. Atribut global ini merupakan atribut yang dapat diimplemtasi pada  sebuah tag apapun karena sifatnya yang lebih umum. Untuk contoh dari atribut global ini diantaranya ialah class, id, lang, title, style dan lain sebagainya. Sedangkan untuk atribut spesifik merupakan suatu atribut yang hanya dapat berfungsi pada tag-tag tertentu saja, seperti halnya atribut href yang hanya dapat berlaku pada tag <a> dan <link>, atribut src yang tentunya hanya berlaku pada tag <img> dan <script>, dan lain sebagainya.

Pada bagian selanjutnya kita akan mempelajari mengenai apa itu css serta bagaimana untuk mengimplementasikan code pada CSS tersebut, yuk simak pembahasan dibawah ini.

8. Apa itu CSS?

CSS ini merupakan singkatan dari Cascading Style Sheet, yaitu suatu dokumen yang berisikan definisi mengenai style yang digunakan untuk sebuah dokumen HTML atau dapat juga kita katakan sebagai untuk mengatur tampilan halaman dari dokumen HTML ini, Lalu meliputi apa sajakah CSS ini? tentunya meliputi layout dokumen, pewarnaan serta suatu tampilan font dan teks dan lain sebagainya. Pada penulisan CSS baiknya teman- teman menulisnya secara terpisah dari konten atau documen HTML hal ini dikarenakan supaya dapat meningkatkan daya akses suatu konten pada website serta dapat mengurangi kerumitan dalam penulisan script serta struktur dari dokumen HTML itu sendiri.

Tentunya dengan adanya Cascading Style Sheet, konten serta desain suatu website akan mudah kita membedakannya, sehingga lebih memungkinkan untuk dapat melakukan suatu pengulangan pada tampilan-tampilan tertentu dalam suatu halam website, sehingga teman -teman tentunya akan dipermudah dalam membuat suatu halaman website dalam jumlah yang banyak, yang pada akhirnya dapat mengurangi waktu saat pembuatan suatu website.

9. Struktur Penulisan CSS

Pada penulisan css tentunya ditulis dengan format penulisan seperti berikut ini:

selector { property:value }
selector { property:value; property:value }
Selector merupakan suatu bagian CSS yang dapat berfungsi sebagai memilih suatu elemen yang akan dikenai oleh style. Property merupakan jenis- jenis style yang  tentunya akan diterapkan pada suatu elemen, serta value merupakan suatu nilai dari property yang dapat digunakan. Property serta value CSS ini dapat kita tulis diantara kurung kurawal. Apabila property pada CSS yang kita gunakan lebih dari satu, maka pisahkanlah dengan menggunakan titik koma.

Dibawah ini merupakan contoh penulisan CSS, silahkan teman- teman perhatikan kode penulisannya:
<style>
h1 {
    font-size: 40px;
    color: orange;
}
</style>
<h1>Teks Judul</h1>
Pada script di atas, tentunya kita menulis h1 sebagai suatu selector yang dapat kita artikan agar elemen <h1> pada sebuah document HTML dikenai oleh style. Property yang diterapkan pada script diatas ialah font-size untuk dapat mengatur ukuran font atau tulisan, di atur dengan nilai 40px, serta property color untuk dapat mengatur suatu warna pada teks, diset dengan nilai orange.

10. Teknik Penerapan CSS

Tentunya ada 3 cara untuk dapat memasang CSS pada sebuah document HTML. yaitu dengan cara inline, external serta dengan cara internal. Untuk pembahaannya silahkan teman -teman simak dan pahami pembahasan dibawah ini ya.

Inline Style Sheet
Dengan menggunakan teknik ini kita menuliskan script atau kode CSS didalam tag HTML, lebih tepatnya kita meletakannya pada sebuah attirbut style.

<h1 style="font-size:40px; color:orange;">
    Teks Judul
</h1>
Dengan menggunakan teknik ini tentunya hanya akan menetapkan style pada elemen yang hanya dikenal style tersebut.

Internal Style Sheet
Teknik internal style sheet perupakan suatu teknik penulisa kode CSS tentunya didalam sebuah file document HTML tapi tetapi dikumpulkan didalam element <style>, coba perhatikan potongan script dibawah ini:
<style>
h1 {
    font-size: 40px;
    color: orange;
}
</style>

<h1>Teks Judul</h1>
Tentunya dengan menggunkan teknik ini akan memberlakukan CSS hanya didaam document HTML dimana kita menyimpannya.

External Style Sheet
Pada teknik eksternal style sheet merupakan seatu penulisan script untuk style CSS yang dibuat pada file terpisah dengan document HTML.

Style tersebut didefinisikan didalam file, misalkan dengan nama style.css:
/* style.css */
h1 {
    font-size: 40px;
    color: orange;
}
Kemudian style.css ditautkan kedalam suatu document HTML menggunakan tag yaitu <link>, silahkan perhatikan penulisan tagnya:
<!-- index.html-->
<link href="style.css" rel="stylesheet" type="text/css" />
<h1>Teks Judul</h1>
Maka tentunya semua style yang berapa didalam style.css akan diterapkan ke dalam suatu dokumen HTML. Keuntungan dari penggunaan teknik ini ialah, CSS dapat kita terapkan ke banyak dokumen HTML sehingga dalam penulisan CSS menjadi lebih efisien serta menghemat waktu.

11. CSS Properties

Property ini tentunya dapat kita gunakan untuk memilih jenis sautu style apa yang akan teman -teman terapkan dalam suatu tag, class, atau id yang telah teman- teman pilih pada suatu selector, serta pada satu selector dapat berisikan beberapa property didalamnya. Pada CSS tentunya terdapat banyak sekali property yang dapat kita gunakan untuk mempercantik webisite yang kita buat.

Jenis Property pada CSS diantaranya adalah:
  • Background
  • Border
  • Box model
  • Layouting
  • Font serta text, dll
Karena tentnua begitu banyak property dalam CSS ini, maka teman -teman tidak perlu menghafal semuanya, cukup teman -teman  pahami apa saja fungsi dari property yang akan teman -teman digunakan. Untuk referensi property CSS yang lebih lengkap kalian bisa kunjungi di https://www.w3schools.com/cssref/.

12. Selector pada CSS

Pada CSS tentunya terdapat banyak selector yang digunakan untuk memilih suatu elemen pada document HTML yang akan kita kenali dengan style. Pemilihan suatu elemen menggunakan nama tag, nilai atribut, ataupun suatu pola tertentu.

Berikut merupakan suatu contoh penulisan selector
h1 { color:red }
Untuk dapat membaca selector diatas ialah dengan "Pilih element h1 pada suatu documen, lalu setting property colornya menjadi red"

Tentunya terdapat dua macam tag selector yaitu single selector serta multiple selector (menargetkan tag yang berbeda dengan style yang sama), bisa teman- teman lihat pada contoh dibawah ini:

Contoh Single Selector
h1 { color:red }
p { font-size:16px }
Contoh suatu multiple selector (menargetkan suatu tag yang berbeda dengan style yang tentunya sama)
h1,h2,h3,p {
    font-family: "arial", sans-sarif;
    color: #666;
}


13. Selector dengan id dan Class

Selector class ini digunakan untuk dapat menentukan style juga sama seperti halnya id. Bedanya ialah jika  pada id hanya dibolehkan dipanggil satu kali saja, class tentunya bisa dipanggil berkali kali pada satu halaman. Selector ini dapat teman - teman tulis dengan awalan titik ataupun dot “.” pada CSS serta class=“nama-class” pada HTML. Sedangkan untuk selector id hanya dapat atau diperbolehkan dipanggil satu kali, selain itu untuk pada Selector ini dapat ditulis dengan awalan pagar “#” pada CSS serta id=“nama-id” pada document HTML.

Berikut ini merupakan contoh pengimplemtasian dari selector id serta class, silahkan teman- teman perhatikan dan pahami dengan baik.

<style>
    #higlight {background-color:yellow}
    .red{color:red}
</style>

<h1>Penggunaan Selector Class dan Id</h1>
<p class="red">Ini selector class</p>
<p id="higlight">Ini selector id</p>

Contoh Pembuatan Halaman Website HTML CSS

Kita akan membuat suatu form perndaftaran, untuk gambar dan script lengkapnya silahkan perhatikan dibawah ini:
Scritpnya:

<html>
 <head>
  <title> Forum </title>
 </head>
      <style type="text/css">
      h2{
    text-shadow:4px 5px #000000;
   }
   body {
   margin: 0px;
   padding: 0px;
       }
   .header{
    width:100%;
    height:40px;
    background-color:blue;
    font-size:25px;
    color:white;
    }
   .content{
       width:100%;
    height:auto;
    padding-top:20px;
    padding-bottom:50px;
       }
   .footer{
       width:100%;
    height:40px;
    background-color:blue;
    font-size:25px;
    color:white;
    line-height:40px;
    font-family:chiller;
       }
    </style>
 <body>
  <div class="header">
   <center><h2> Forum Pendaftaran Sekolah </h2> </center>
  </div>
   <center> <h3> Isi Data Anda Di Sini...!!!</h3></center>
  <div class="content">
      <table align="center">
   <form>
     <tr><td>NIS</td><td>:</td><td><input type="text" placeholder="Masukan NIS..."></td></tr>
     <tr><td>Nama depan</td><td>:</td><td><input type="text" placeholder=" Nama Depan ..."></td></tr>
     <tr><td>Nama Belakang</td><td>:</td><td><input type="text" placeholder=" Nama Belakang ..."></td></tr>
     <tr>
      <td>Tempat Tanggal Lahir</td><td>:</td><td><input type="text" placeholder=" Tempat Lahir..."></td>
      <td><input type="submit" value="Tanggal"> <select name="tanggal">
                             <option>-Tanggal-</option>      
       <option>1</option>
       <option>2</option>
       <option>3</option>
       <option>4</option>
       <option>5</option>
       <option>6</option>
       <option>7</option>
       <option>8</option>
       <option>9</option>
       <option>10</option>
       <option>11</option>
       <option>12</option>
       <option>13</option>
       <option>14</option>
       <option>15</option>
       <option>16</option>
       <option>17</option>
       <option>18</option>
       <option>19</option>
       <option>20</option>
       <option>21</option>
       <option>22</option>
       <option>23</option>
       <option>24</option>
       <option>25</option>
       <option>26</option>
       <option>27</option>
       <option>28</option>
       <option>29</option>
       <option>30</option>
       <option>31</option>
       </select></td>
      <td><input type="submit" value="Bulan"><select name="Bulan"> 
       <option>-Bulan-</option>
       <option>Januari</option>
       <option>Febuari</option>
       <option>Maret</option>
       <option>April</option>
       <option>Mei</option>
       <option>Juni</option>
       <option>Juli</option>
       <option>Agustus</option>
       <option>September</option>
       <option>Oktober</option>
       <option>November</option>
       <option>Desember</option>
       </select></td>
      <td><input type="submit" value="Tahun"><select name="Tahun"> 
       <option>-Tahun-</option>
       <option>1990</option>
       <option>1991</option>
       <option>1992</option>
       <option>1993</option>
       <option>1994</option>
       <option>1995</option>
       <option>1996</option>
       <option>1997</option>
       <option>1998</option>
       <option>1999</option>
       <option>2000</option>
       <option>2001</option>
       </select></td>
     </tr>
     <tr><td>Alamat</td><td>:</td><td><input type="text" placeholder=" Alamat .."></td></tr>
     <tr><td>Telepon</td><td>:</td><td><input type="text" placeholder="No Telepon"></td></tr>
     <tr><td>Email</td><td>:</td><td><input type="text" placeholder="  Email ..."></td></tr>
     <tr><td>Nama Orang tua</td><td>:</td><td><input type="text" placeholder=" Nama Orang Tua"></td></tr>
     <tr>
      <td>Jenis Kelamin </td><td>:</td>
      <td><input type="radio" checked name="R2"> Laki-laki</td>
      <td><input type="radio" checked name="R2"> Perempuan </td>
     </tr>
     <tr><td> &nbsp </td><td> &nbsp </td><td><input type="submit" value="DAFTAR"></td></tr>
    </table>
  </div>
  <div class="footer">
  <CENTER>Forum Pendaftaran &copy;2017 Copy Right All Reserved </center>
 </div>
 </body>
</html>

Nah banyak yang telah kita pelajari mengenai Belajar HTML dan Css lengkap ini, semoga teman - teman dapat mudah untuk memahami apa yang telah admin sampaikan.

Untuk tutorial lanjutannya silahkan teman - teman kunjungi halaman berikut: Panduan lengkap html dan css

Mungkin sekian yang dapat admin sampaikan semoga dari artikel mengenai Belajar HTML Dan CSS Lengkap Untuk Pemula, teman- teman dapat menambah wawasan mengenai HTML serta CSS.

Terimakasih telah berkunjung serta membaca artikel ini, semoga bermanfaat, Salam Success :)

By: Muhammad Rizal Supriadi 

Anda mungkin menyukai postingan ini