Panduan Dasar HTML dan CSS Lengkap Untuk Pemula

April 24, 2020 Posting Komentar

Assalamualaikum wr. wb, pada kali ini kita akan mempelajari mengenai dasar - dasar html dan css lengkap untuk pemula.

Pada artikel kali ini kita akan mempelajari mengenai dasar - dasar html serta css yang merupakan panduan lengkap serta mudah dipahami, banyak hal yang akan kita pelajari pada atrikel kali ini karena kita akan mempelajri mengenai panduan lengkap dasar html dan css untuk pemula,

Tentunya kita juga akan mempelajari bagaimana membuat layout pada html dan css serta mempelajari mengenai display dan dimension pada html dan css

ada beberapa point yang akan kita bahas pada artikel mengenai Panduan Dasar HTML dan CSS Lengkap Untuk Pemula, silahkan teman - teman simak dan pahami point - pont berserta pembahasan dibawah ini:

Point- point yang akan kita pelajari pada artikel kali ini, meliputi:

Membuat Tabel
Membuat List
Membuat Layout
Mempelajari Display & Dimension
Opsi nilai display

Setelah teman - teman mengetahui point - point apa saja yang akan kita bahas pada artikel kali ini, langsung saja teman - teman simak dan pahami pembahasan dibawah ini:

Bagi teman- teman yang belum mengynjungi artikel sebelumnya, silahkan kunjungi : Belajar HTML Dan CSS Lengkap Untuk Pemula

1. Membuat Tabel

Tentunya bagi teman - teman yang baru mengenai HTML dan CSS ini mungkin bertanya- tanya, bagaimana sih cara untuk membuat tabel? silahkan simak pembahasan dibawah ini:

Cara membuat Tabel

Untuk dapat menampilkan suatu data yang terstruktur dapat memiliki banyak cara, mulai dari penggunaan grafik,sampai dengan menggunakan suatu tabel, namun pada pembahasan artikel ini kita akan sedikit mengulas mengenai menampilkan data menggunakan suatu tabel.

Sebuah tabel tentunya terdiri dari dua elemen utama, yaitu baris serta kolom. HTML tentunya sudah menyediakan beberapa elemen untuk dapat membuat sebuah tabel, yaitu tag <table>, <tr>, <td>. Sebelum membuat baris serta kolomnya maka teman- teman harus inisialisasi tabel terlebih dahulu menggunakan suatu elemen yaitu<table>.

<table>
    <!-- Data -->
</table>

Selanjutnya, teman - teman menambahkan baris kedalam tabel tersebut dengan cara menggunakan element <tr>.

<table>
    <tr>
        <!-- Isi baris tabel -->
    </tr>
    <tr>
        <!-- Isi baris tabel -->
    </tr>
</table>

kemudian pada setiap baris dari tabel tersebut tentunya harus teman- teman isikan dengan suatu data yang akan memperoleh kolom tabel. untuk dapat mengisi data pada kolom tabel dari suatu html menggunakan elemen yaitu <td>.Tetapi, jika teman - teman menginginkan membuat baris pertama pada suatu tabel sebagai header, teman- teman dapat mengisikan baris pertama dengan elemen yaitu <th>.

Kita dapat melihat hasil akhir dari tabel yang telah kita buat, untuk script lengkapnya sebagai berikut:

<!DOCTYPE html>
<html>
<head>
    <title>Dasar Html</title>
</head>
<body>
    <table>
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>MUhammad Rizal</td>
            <td>Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Forum</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>3</td>
            <td>koding</td>
            <td>Surabaya</td>
        </tr>
    </table>
</body>
</html>

Bila teman -teman jalankan code dari html diatas maka akan muncul seperti gambar dibawah ini:

Dapat teman - teman lihat dari gambar diatas, kita tidak melihatnya seperti tabel ya?, karena untuk terlihat seperti tabel tentunya kita harus menambahkan border="1" tepatnya pada suatu element tabel tersebut.

<!DOCTYPE html>
<html>
<head>
    <title>Dasar Html</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Muhammad Rizal</td>
            <td>Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Forum</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Koding</td>
            <td>Surabaya</td>
        </tr>
    </table>
</body>
</html>

Selanjutnya silahkan teman -teman buka kembali browsernya, maka hasilnya akan seperti gambar dibawah ini:

Seperti itu kira- kira untuk bentuk tabel pada HTML. nah sekarang kita akan lanjutkan pada fungsi penggabungan baris serta kolom. Pada HTML tentunya terdapat perintah rowspan dan colspan. Colspan merupakan perintah yang diperuntukan untuk menggabungakn beberapa colom menjadi satu. Contohnya teman- teman bisa merubah htmlnya menjadi seperi dibawah ini:.

<!DOCTYPE html>
<html>
<head>
    <title>Dasar Html</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="2">No</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Muhammad Rizal</td>
            <td>Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Forum</td>
            <td>Jakarta</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Koding</td>
            <td>Surabaya</td>
        </tr>
    </table>
</body>
</html>

Silahkan teman- teman jalankan pada web browser, maka hasilnya akan seperti dibawah ini:

Lalu ita akan mengimplementasikan rowspan, yang tentunya mempunyai fungsi untuk dapat menggabungkan beberapa baris menjadi satu, untuk contoh penulisan kodenya seperti dibawah ini:

<!DOCTYPE html>
<html>
<head>
    <title>Dasar Html</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>No</th>
            <th>Nama</th>
            <th>Alamat</th>
        </tr>
        <tr>
            <td>1</td>
            <td>Muhammad Rizal</td>
            <td rowspan="3">Bandung</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Forum</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Koding</td>
        </tr>
    </table>
</body>
</html>

Silahkan teman -teman jalankan code diatas pada web browser, maka hasilnya akan seperti gambar dibawah ini:

Nah selanjutnya kita akan mempelajari mengenai pembuatan list dengan menggunakan HTML.

2. Membuat List dengan HTML

List atau bisa disebut daftar biasanya mengarah pada pengurutan sebuah kata yang didalamnya terdiri dari point- point tersendiri. Sebagai contohnya pada suatu tutorial pembuatan makanan diaman disana terdapat tahapan- tahapan yang perlu kita tuliskan secara berurutan. Tentunya dalam pembuatan list ini dibagi menjadi 2 yaitu dengan menggunkan ordered list dan unordered list. Ordered list merupakan daftar terurut yang memberikan fasilitas untuk membuat daftar data secara terurut, sedangkan Unordered list digunakan untuk dapat menampilkan daftar data yang tidak memiliki urutan tententu, atau dapat dikatakan tidak mementingkan urutannya.

Untuk pembuatan daftar ordered list kita dapat menggunkan element <ol> (ordered list) dan isi dari list sendiri tentunya dibuat dengan menggunakan elemen <li> (list item), sedangkan untuk membuat ordered list menggunakan elemen <ul> (unordered list), serta untuk dapat mengisi daftar, tentunya kita dapat menggunakn elemen <li> (list item).

Berikut ini merupakan contoh penggunaan dari ordered list dengan tag <lo> .

 <ol>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
</ol>

Berikut ini merupakan penggunaan unordered list dengan tag <ul>

<ul>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
</ul>

Berikut ini merupakan contoh serta output dari ordered list dan unordered list, silahkan teman- teman ikuti script dibawah ini:

<ol>
    Ordered List
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
</ol>
<ul>
    Unordered List
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
    <li>Ini merupakan contoh daftar ordered list</li>
</ul>

Maka hasilnya akan seperti gambar dibawah ini:

Selanjutnya kita akan mempelajari mengenai pembuatan layout dengan menggunakan tabel, silahkan teman - teman simak pembahasan dibawah ini:

3. Membuat Layout dengan Table

Untuk membuat layout sederhana, tentunya kita dapat menggunakan tag <table>.

Tabel itu disusun dari kolom serta baris, teman - teman dapat memanfaatkan kolom serta baris tersebut menjadi sebuah layout. silahkan teman - teman perhatikan contoh script dibawah ini untuk membuat layout sederhana:

<table width="100%">
    <tr>
        <td colspan="2" style="background:red">
            <h1>Header</h1>
        </td>
    </tr>
    <tr valign="top">
        <td width="50" style="background:green">
            <strong>Sidebar</strong>
        </td>
        <td width="100" height="550"style="background:purple">
            <strong>Halaman Konten</strong>
            Forumkoding merupakan suatu website yang menyediakan informasi mengenai
     pembelajaran baik mencangkup aplikasi website, mobile, atau pun aplikasi
     dekstop, serta memberikan pembelajaran mengenai dasar dasar dari membuat
     program sederhana yang tentunya mudah untuk diikuti dan dipahami 
        </td>
    </tr>
    <tr>
        <td colspan="2" style="background:blue">
            <h1>Footer</h1>
        </td>
    </tr>
</table>

Colspan itu digunakan untuk dapat menggabungkan kolom.

Width itu digunakan untuk dapat mengatur lebar dari kolom. kita dapat mengisinya dalam bentuk px maupun %.

height itu dapat digunakan untuk mengatur tinggi dari kolom. kita dapat mengisinya dalam bentuk px maupun % (persen).

Baca Juga

Untuk hasil hari scritp diatas, silahkan teman -teman perhatikan gambar dibawah ini:

Setelah kita membuat suatu kerangka layout yang sederhana, tentunya teman - teman dapat mengembangkan layout tersebut seperti halnya menambahkan navigasi pada bagian sidebarnya, utuk contoh penerapannya silahkan teman- teman perhatikan kode dibawah ini:

<ul>
    <li><a href="home.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="contact.html">Contact</a></li>
    <li><a href="forum.html">Forum</a></li>
</ul>

Maka hasilnya akan seperti gambar dibawah ini, silahkan teman- teman perhatikan pada bagian sidebarnya.

Tentunya saat ini membuat suatu layout dengan menggunakan table sudah mulai ditinggalkan,

Membuat layout dengan munggunakan table sudah tidak direkomendasikan lagi tentunya karena akan menyulitkan kita dalam mendesign ulang website dikemudian hari. tetapi tetap harus dihapami karena ini merupakan dasar dari pembuatan suatu website.

4. Membuat Layout Dengan Tag <div>

Untuk membuat layout dengan menggunakan tag <div>, tentunya kita membutuhkan script style.css untuk dapat membuat tampilan tersebut menjadi lebih menarik, pertama kita akan membuat kerangka terlebih dahulu, silahkan peratikan script dibawah ini:

Membuat Kerangka/ Layout struktur

<div id="header">
    Header
</div>
<div id="sidebar">
    Sidebar
</div>
<div id="content">
    Content
</div>
<div id="footer">
    Footer
</div>

Pada petikan kode diatas, tentunya kita akan menghasilkan output seperti dibawah ini, tentunya belum seperti sebuah layout.
Untuk membuat menjadi sebuah layout, kita tentunya harus menambahkan style css berdasarkan id yang akan kita panggil oleh masing- masing <div>

Menambah style CSS
Silahkan ikuti script style.css dibawah ini:


<style>
#header
{
    background  : #00ccff;
    height      : 10%;
    font-size   : 1.5em;
    text-align  :center;
    padding-top : 20px;
}
#sidebar
{
    background  : #99ccff; 
    float       : left;
    height      : 400px;
    width       :30%;
    font-size   : 1.5em;
    text-align  :center;
    padding-top : 20px;

}
#content
{
    background  : #9999ff;
    float       : right;
    width       : 70%;
    height      : 400px;
    font-size   : 1.5em;
    text-align  :center;
    padding-top : 20px;
}
#footer
{
    background  : #3399ff;
    clear       : both;
    font-size   : 1.5em;
    text-align  :center
}
</style>

Nah dibawah ini merupakan script lengkap untuk mengaitkan script layout html dengan style.css silahkan pahami penempatan scriptnya dan ikuti:

<style>
#header
{
    background  : #00ccff;
    height      : 10%;
    font-size   : 1.5em;
    text-align  :center;
    padding-top : 20px;
}
#sidebar
{
    background  : #99ccff; 
    float       : left;
    height      : 400px;
    width       :30%;
    font-size   : 1.5em;
    text-align  :center;
    padding-top : 20px;

}
#content
{
    background  : #9999ff;
    float       : right;
    width       : 70%;
    height      : 400px;
    font-size   : 1.5em;
    text-align  :center;
    padding-top : 20px;
}
#footer
{
    background  : #3399ff;
    clear       : both;
    font-size   : 1.5em;
    text-align  :center;
}
</style>
<div id="header">
    Header
</div>
<div id="sidebar">
    Sidebar
</div>
<div id="content">
    Content
</div>
<div id="footer">
    Footer
</div>

Silahkan teman- teman jalankan kode diatas, maka tentunya teman - teman telah berhasil membuat layotu seperti dibawah ini:

Lebih bagus serta mudah untuk kita atur mengenai tampilan yang kita buat dengan menggunakan <div>, bukan hanya itu tentunya kita juga dapat memperlajari sekaligus mengenai pernerapa css dengan menggunakan div ini karena script css nya tentunya kita buat terpisah dari tag <div>

5. Display & Dimension Tag <div> dan <span>

Pada tag <div> dan <span> tentunya tidak ada fungsi khusus <h1>, <p>, <img> serta tag semantik lainnya.

tag <div> dan <span> ini digunakan untuk dapat mengelompokan element html atau memberi style secara spesifik.

Default Display Mode

Penggunaan tag <div> bersifat block.

div
{
     display  : block;
}

Penggunaan tag <span> bersifat inline

div
{
     display  : inline;
}

6. Opsi Nilai Display

block

Tentunya membuat baris baru saat dirender atau dijalankan
Kita dapat mengatur lebar maupun tingginya
Bila lebarnya tidak kita atur, maka tentunya lebar elemen akan memenuhui lebar dari parentnya
Didalamnya terdapat simpanan elemen bertipe block, inline serta inline block

Untuk contoh yang memiliki nilai block: <h1>-<h6>, <ul>, <p>, <li>, <form>, <hr>..

<style>
    h1,p {background:orange};
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di Forumkoding</p>

Ketika teman -teman tidak menentukan lebarnya, tentunya maka lebarnya akan memenuhi element parent tersebut, coba perhatikan gambar dibawah ini:

Sekarang kita akan mencoba untuk mengatur untuk menemtukan lebarnya, silahkan perhatikan code dibawah ini:

<style>
    h1,p {background:orange;width:200px;height:75px;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di Forumkoding</p>

Maka tentunya hasilnya akan seperti dibawah ini silahkan perhatikan:

inline

Pada inline ini tidak membuat baris baru saat kita kalankan
Lebar serta tingginya sesuai dengan yang kita buat didalam scriptnya
Lebar serta tingginya tentunya dapat kita atur dengan mudah
Margin serta padding hanya dapat memperngaruhi elemen secra horizontal, tidak secara vertical

elemen inline : <em>, <i>, <b>, <strong>, <span> ,<a> ,<sub>, <button> dan masih banyak lagi untuk contohnya.

<style>
span {background:orange;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di<span>Forumkoding</span></p>

Maka hasilnya seperti gambar berikut ini:

Inline block

Tentunya tidak ada element html yang secara default bertipe inline-block
Untuk nilai property display nya dapat kita atur manual menjadi inline-block
Untuk sipatnya sendiri sama dengan sifat inline
Tentunya inline-block akan berpengaruh dari property width serta height

<style>
span {background:orange;width:100px;height:50px;display:inline-block;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di<span>Forumkoding</span></p>

Maka hasilnya kan seperti gambar dibawah ini:

none

Kita gunakan untuk menyembunyikan elemen dari haman website, atau layar, untuk contoh penerapannya silahkan perhatikan code dan gambar dibawah ini:

<style>
span {background:orange;width:100px;height:50px;display:none;}
</style>
<h1>Halo Coders!</h1>
<p> Selamat datang di<span>Forumkoding</span></p>

Maka hasil dari script diatas seperti gambar dibawah ini:

Kita telah mempelajari banyak hal mengenai panduan dasar html dan css ini, untuk lebih jauhnya teman - teman dapat mempelajarinya secara otodidak, karena panduan ini hanya menjelasakan mengenai dasar- dasar html dan css untuk pemula saja.

Mungkin sekian yang dapat admin sampaikan, mudah- mudahan artikel yang admin tulis ini dapat memberikan manfaat serta pengetahuan kepada para pembacanya, jika setiap arikel yang admin tulis bermanfaat , teman - teman dapat me follow website ini, yang tentunya tertera pada bagian sidebar sebelah kanan.

Untuk tutorial selanjutnya silahkan kunjungi : Belajar HTML dan CSS membuat Layout Tanpa Tabel

terimakasih sudah berkunjung dan membaca artikel mengenai :Panduan Dasar HTML dan CSS Lengkap Untuk Pemula.

Semoga bermanfaat -- salam success :)

By: Muhammad Rizal Supriadi