Scribd
Unggah
246 tayangan60 halaman

Modul HTML Dan Css SMK AL AMANAH

Modul ini memberikan pengenalan dasar tentang HTML dan CSS serta cara membuat website profil sederhana menggunakan bahasa pemrograman tersebut untuk siswa SMK. Materi pelatihan mencakup pengertian, tag-tag dasar, dan komponen penting HTML dan CSS beserta contoh kode untuk membangun halaman profil sederhana."

Diunggah oleh

Fatah Hidayat
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
246 tayangan60 halaman

Modul HTML Dan Css SMK AL AMANAH

Modul ini memberikan pengenalan dasar tentang HTML dan CSS serta cara membuat website profil sederhana menggunakan bahasa pemrograman tersebut untuk siswa SMK. Materi pelatihan mencakup pengertian, tag-tag dasar, dan komponen penting HTML dan CSS beserta contoh kode untuk membangun halaman profil sederhana."

Diunggah oleh

Fatah Hidayat
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 60

Pengabdian Kepada Masyarakat

Modul Pembelajaran HTML & CSS serta penerapan pembuatan website profil
sederhana kepada siswa/i SMK AL AMANAH kelas 10 Rekayasa Perangkat Lunak

2021
Tujuan:
Siswa dapat memahami bahasa pemrograman HTML&CSS serta mampu membuat halaman
website profil sederhana.

Materi:
1. Pengenalan HTML
2. Pendalaman HTML
3. Pengenalan CSS
4. Pendalaman CSS
5. Penerapan HTML + CSS
6. Membuat Halaman Website Profil Sederhana

Pengenalan html
- Pengenalan ke HTML
- Membuat berkas HTML Pertama
- Struktur Dasar HTML

Pendalaman HTML
- Tag HTML
- Elemen HTML
- Atribut HTML
- Paragraf
- Heading
- List
- Menambahkan List pada Halaman Profil
- Menambahkan Gambar pada Halaman Profil
- Table
- Struktur Dasar Sebuah Tabel

Pengenalan CSS
- Pengenalan CSS
- Keuntungan dan Cara Kerja CSS
- Menuliskan Aturan Styling
- Menerapkan Styling Dasar pada Halaman
- Membuat Berkas CSS
- Menghubungkan Berkas CSS dengan HTML

Pendalaman CSS
- Selector Basic, Type Selector, dan Class Selector
- Formatting Text (Text dan Font Styling)
- Memilih Jenis dan Ukuran Font
- Font Weight, Font Style
- Text Styling: Line Height, Text Indent, dan Text Alignment
- Text Styling: Text Decoration, Text Transform, Text Spacing, dan Text Shadow
- Color
- Menetapkan Nilai Warna
- Background Color
- Box Model : Border, Padding, Margin
- Box Element
- Box Dimensions

Membuat Halaman Website Profil Sederhana


Langkah langkah nya
Pengenalan HTML
HTML itu adalah sebuah bahasa yang menggunakan markup atau penanda untuk membuat halaman
web. Penanda atau markup ini, nanti akan kita sebut dengan Tag.

HTML berperan untuk menentukan struktur konten dan tampilan dari sebuah web. Kalau kita ibaratkan
nih. HTML itu seperti batu bata untuk membangun rumah. Batu bata ini dapat disusun, hingga menjadi
fondasi dasar.

Dalam membuat halaman web, HTML tidak sendirian. Ada bahasa lain lagi yang menjadi
pelengkapnya, yakni CSS dan Javascript.

CSS adalah bahasa khusus yang digunakan untuk memperindah tampilan web.

Lalu Javascript bertugas untuk membuat halaman web menjadi hidup. Karena dengan Javascript, kita
dapat menentukan fungsi-fungsi maupun efek yang akan diterapkan di website .

Peralatan untuk Belajar HTML


Nah, sekarang.. Tiba saatnya kita praktik!
Tapi sebelum itu, kamu harus siapkan beberapa alat yang akan digunakan untuk praktik.
Adapun peralatan yang harus kamu persiapkan adalah:

1. Teks Editor untuk Menulis HTML

Teks editor akan kita gunakan untuk menulis kode-kode HTML. Kamu bebas menggunakan teks editor
apapun.

Notepad boleh, Notepad++ juga boleh.

Apapun teks editornya, yang penting bisa digunakan untuk membuat dan menulis dokumen HTML.

Namun, pada tutorial ini.. kita akan menggunakan teks editor Visual Studio Code.

2. Web Browser untuk Membuka HTML

Web browser akan kita gunakan untuk membuka HTML. Kamu juga bebeas menggunakan web
browser apapun.
Saran saya sih.. gunakan web browser yang terbaru, karena kita juga akan menggunakan HTML versi
yang terbaru.

Firefox atau Google Chrome, saya kira sudah cukup.

Membuat Dokumen HTML Pertamamu


Kini tiba saatnya, kamu harus mencoba sendiri membuat dokumen HTML. Caranya sangat mudah.
Mari kita mulai dengan membuka teks editor, lalu tulislah kode berikut.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

Setelah itu, simpan dengan nama hello-world.html.

Tips: buat kamu yang menggunakan Notepad di Windows, simpanlah nama filenya dengan
menggunakan tanda petik "hello-world.html" agar ekstensinya .html, bukan .txt.

Atau kamu bisa aktifkan fitur show extension pada Windows Explorer, agar bisa tahu ekstensi filenya.

Caranya.. masuk ke menu View, lalu centang File name extensions.


Oke.. lanjut!

Sekarang cobalah buka file hello-world.html dengan web browser.. maka hasilnya:

Kita sudah berhasil membuat halaman web pertama dengan HTML.

Kini giliran saya menjelaskan maksud dari kode di atas, tapi sebelum itu.. saya akan jelaskan dulu
tentang nama file untuk HTML.

Struktur Dasar HTML


Berikut ini adalah kode HTML yang baru saja kita buat:
Penulisan kode HTML selalu dimulai dengan deklarasi DOCTYPE, lalau menuliskan tag <html> dan di
dalamnya terdapat tag <head> dan <body>.

Kalau kita perhatikan.. struktur dasar kode HTML terdiri dari tiga bagian penting:

1. Bagian Deklarasi
2. Bagian HEAD
3. Bagian BODY

1. Bagian Deklarasi

Coba perhatikan kode pada baris pertama: <!DOCTYPE html>.

Ini adalah tag deklarasi untuk menyatakan tipe dokumen dan versinya. Pada contoh di atas, kita
menyatakan dokumen ini bertipe HTML dan versinya adalah HTML 5.

Lalu apakah boleh kita tidak menulis kode <!DOCTYPE html> ini?

Boleh-boleh saja.. dokumen HTML-nya akan tetap bisa dibuka di web browser. Tapi, ini tentunya akan
melanggar aturan standar yang dibuat W3C.

Berikutnya, di bawah tag deklarasi <!DOCTYPE html> terdapat tag pembuka untuk HTML:

<html lang="en">

Tag <html> wajib ada di setiap dokumen HTML..

Pada tag ini, kita memberikan atribut lang="en" untuk menyatakan kalau konten dokumen HTML ini
akan menggunakan bahasa inggris.

Nah di dalam tag <html> ini, terdapat dua tag penting lagi.. yakni: tag <head> dan tag <body>.
Setelah itu barulah terakhir tag HTML ditutup dengan </html>.

2. Bagian HEAD

Bagian HEAD adalah bagian kepala dari HTML. Dimulai dari tag <head> dan ditutup dengan </head>.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Pada bagian HEAD, biasanya digunakan untuk menuliskan tag-tag yang akan dibaca oleh mesin.

Seperti:

 Tag meta untuk SEO;


 Tag <title> untuk judul;
 Tempat menulis kode CSS dan Javascript;
 dan lain-lain.

3. Bagian BODY

Bagian BODY adalah bagian yang akan ditampilkan pada web browser. Penulisannya di mulai dari
tag <body> dan ditutup dengan </body>.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Belajar HTML #01</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Di sinilah nanti kita akan banyak menuliskan konten dengan berbagai macam tag. Saat ini kita baru
mengisinya dengan tag <p>. Tag <p> adalah tag yang digunakan untuk membuat paragraf.
Pendalaman HTML
Tag HTML
Tag HTML adalah teks khusus yang digunakan untuk menandai suatu konten yang menentukan
bagaimana aplikasi web browser menampilkan konten tersebut secara visual. Konten yang dimaksud
dapat berupa teks, gambar, audio, ataupun video.
Tag HTML terdiri dari tag pembuka dan tag penutup dimana diantara kedua tag tersebut terdapat konten.
Penulisan tag pembuka diapit oleh kurung siku. Sedangkan tag penutup juga sama diapit oleh kurung siku
namun ditambahkan slash (garis miring) di depan nama tag tersebut.
<tag_pembuka>konten yang ditampilkan</tag_penutup>
Berikut ini contoh penerapannya untuk membuat tulisan tebal:
<b>ini adalah tulisan tebal</b>
Maka jika dijalankan di aplikasi web browser akan menjadi:

ini adalah tulisan tebal

Tidak semua tag yang ada pada HTML membutuhkan penutup. Terdapat beberapa tag yang cara
penulisannya tanpa penutup yang dinamakan self-closing tags. Namun, dalam penulisannya dianjurkan
untuk menambahkan slash sebelum penutup kurung siku.
Misalnya: <br />, <hr />, <img />, <input />, <embed />.

Daftar Kode HTML Lengkap (Tag HTML dan Fungsinya)

Kode Tag HTML Fungsi

<!DOCTYPE> Menentukan jenis dokumen

<html> Pembuka dan penutup HTML

<head> Menentukan informasi halaman

<title> Menentukan judul halaman

<body> Tempat menampilkan konten

<h1>..</h6> Membuat judul teks

<p> Menentukan paragraf


Kode Tag HTML Fungsi

<hr> Mebuat garis horizontal

<!–…–> Membuat komentar

<b> Menebalkan teks

<blockquote> Menentukan kutipan dari sumber lain

<code> Menentukan kode komputer

<em> Membuat teks miring atau ditekankan

<i> Membuat teks miring

<pre> Menentukan teks diformat

<q> Menentukan kutipan pendek

<s> Mencoret teks

<small> Menentukan teks yang lebih kecil

<strong> Membuat teks tebal atau teks penting

<sub> Menentukan teks langganan

<sup> Menentukan teks superscript

<time> Menentukan tanggal / waktu

<u> Membuat teks garis bawah

<form> Menentukan formulir HTML


Kode Tag HTML Fungsi

<input> Membuat form input

<textarea> Membuat form teks yang lebih besar

<button> Menentukan tombol yang dapat diklik

<select> Menentukan daftar drop-down

<option> Menentukan opsi dalam daftar drop-down

<label> Menentukan label untuk elemen input

<iframe> Menentukan bingkai inline

<img> Menentukan gambar

<canvas> Digunakan untuk menggambar grafik

<figure> Menentukan konten mandiri

<svg> Menentukan wadah untuk grafik SVG

<audio> Menentukan konten suara

<source> Menentukan banyak sumber multimedia

<a> Mendefinisikan hyperlink

<link> Menentukan hubungan antara dokumen dan sumber daya eksternal

<nav> Menentukan link navigasi

<ul> Menentukan daftar tidak terurut

<ol> Menentukan daftar yang terurut


Kode Tag HTML Fungsi

<li> Menentukan item pada list

<dl> Menentukan daftar deskripsi

<dt> Menentukan istilah / nama dalam daftar deskripsi

<dd> Menentukan deskripsi istilah / nama dalam daftar deskripsi

<table> Menentukan tabel

<th> Menentukan header dalam tabel

<tr> Menentukan baris dalam tabel

<td> Menentukan sel atau kotak dalam tabel

<thead> Mengelompokkan konten header dalam sebuah tabel

<tbody> Mengelompokkan konten isi dalam tabel

<tfoot> Mengelompokkan konten footer dalam sebuah tabel

<style> Menentukan informasi gaya untuk dokumen

<div> Membagi halaman dalam blok

<span> Membagi halaman dalam blok kecil

<header> Menentukan header untuk bagian halaman

<footer> Menentukan footer untuk bagian halaman

<main> Menentukan konten utama halaman

<section> Menentukan bagian dalam halaman


Kode Tag HTML Fungsi

<artikel> Menentukan artikel

<aside> Menentukan konten selain dari konten halaman

<meta> Menentukan metadata halaman

<script> Menentukan skrip

<noscript> Menentukan konten alternatif untuk pengguna yang tidak mendukung skrip

<embed> Menentukan wadah untuk aplikasi eksternal

<object> Menentukan objek yang disematkan

<caption> Menentukan keterangan tabel

<cite> Menentukan judul sebuah karya

<abbr> Menentukan singkatan atau akronim

Elemen HTML
Elemen HTML adalah semua kode HTML yang dimulai dari tag pembuka hingga tag penutup.

Jenis Elemen HTML Berdasarkan Cara Penulisannya

Terdapat 2 jenis elemen yaitu elemen normal dan elemen tunggal atau elemen kosong (void element).

1. Elemen Normal

Cara penulisan untuk elemen normal adalah dimulai dari tag pembuka dan diakhiri dengan tag penutup.

<nama_tag>isi konten</nama_tag>

2. Elemen Tunggal atau Elemen Kosong

Elemen tunggal/elemen kosong yang biasa disebut dengan void element memiliki cara penulisan yang
berbeda. Pada jenis elemen ini tidak ada tag penutup. Sebagai gantinya, ditambahkan slash pada akhir tag
pembuka.
Contoh:

<img src="/wp-content/themes/itk/img/header.png" />

Jenis Elemen HTML Berdasarkan Tampilannya

Terdapat 2 jenis elemen jika dilihat dari tampilan pada web browser yaitu block-level elemen dan inline
elemen.

1. Block-level Elemen
Block-level elemen tampilannya selalu dimulai dari baris baru. Secara default, elemen ini tidak akan
berada disamping elemen sebelumnya tapi akan berada di bawah elemen sebelumnya. Contohnya elemen
<h1> dan <p>.
1 teks biasa.
2 <h1>elemen pertama.</h1>
3 <p>elemen kedua.</p>
2. Inline Elemen
Inline elemen artinya elemen sebaris. Elemen ini tidak dimulai dengan baris baru tetapi akan melanjutkan
disamping elemen lain yang juga inline elemen. Contohnya adalah elemen <b> dan <i>.
1 teks biasa.
2 <b>elemen pertama.</b>

3 <i>elemen kedua.</i>

Atribut HTML
Atribut HTML adalah informasi tambahan yang diberikan untuk elemen yang dituliskan pada tag
pembuka. Cara penulisannya adalah nama_atribut=”value_atribut”.

Satu elemen bisa ditambahkan beberapa atribut sekaligus. Ingat, value_atribut harus diapit dengan petik
ganda atau bisa juga petik tunggal.

Contohnya:

<a href="https://www.google.com/" title="kunjungi Google">Google</a>

Terdapat 2 jenis atribut pada HTML yaitu atribut global dan atribut khusus. Atribut global dapat
digunakan pada semua tag atau elemen HTML. Sedangkan atribut khusus hanya dapat digunakan untuk
tag yang disupport atribut tersebut. Berikut ini atribut global yang ada di HTML.

Daftar Atribut HTML Lengkap dan Fungsinya


Atribut Fungsinya

id Menentukan id unik elemen.

class Menentukan nama class yang digunakan pada CSS.

style Menentukan gaya CSS secara inline (langsung).

title Menentukan tooltip atau teks saat mouse berada di atas elemen tersebut.

accesskey Menentukan tombol pintas untuk mengaktifkan / memfokuskan elemen.

contenteditable Menentukan apakah konten elemen dapat diedit atau tidak.

data-* Menyimpan data khusus pribadi ke halaman atau aplikasi.

dir Menentukan arah teks untuk konten dalam suatu elemen.

draggable Menentukan apakah suatu elemen dapat diseret atau tidak.

dropzone Menentukan zona drop pada aksi drag and drop.

hidden Menentukan bahwa suatu elemen tidak ditampilkan.

lang Menentukan bahasa konten elemen.

spellcheck Menentukan apakah elemen harus diperiksa ejaan dan tata bahasanya atau tidak.

tabindex Menentukan urutan tab dari suatu elemen.

translate Menentukan apakah konten elemen harus diterjemahkan atau tidak.

Heading pada HTML


Penggunaan heading saat penting di suatu halaman web karena ini berkaitan dengan peng-index an
google. Search engine akan membaca struktur suatu konten dengan melihat heading yang dipakai dari
suatu kalimat paragraf.
Selain itu tag heading juga berfungsi untuk membuat penekenan pada suatu kalimat. Tag heading
sebaiknya hanya digunakan di kalimat yang menjadi judul atau sub judul dari suatu konten artikel.
Sangat tidak disarankan jika anda ingin membuat tulisan yang besar dan tebal lalu menggunakan tag
heading ini.

Tag heading didalam dokumen html memiliki tingkatan, tingkatan yang paling tinggi dimulai dari <h1>
dan yang paling rendah <h6>

HEADING KETERANGAN

h1 Membuat Judul suatu dokumen

h2 Membuat Sub Judul

h3 Membuat Sub Judul ke 2

h4 Membuat Sub Judul 3

h5 Membuat Sub Judul 4

h6 Membuat Sub Judul 5

Berikut contoh masing-masing elemen tag heading 1 hingga 6:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Membuat Heading di HTML</h2>

<h1>ini adalah heading 1</h1>

<h2>ini adalah heading 2</h2>

<h3>ini adalah heading 3</h3>

<h4>ini adalah heading 4</h4>

<h5>ini adalah heading 5</h5>

<h6>ini adalah heading 6</h6>

</body>

</html>
Dan Hasilnya seperti berikut ini

Dapat dilihat dari contoh syntax diatas membuat heading tidaklah sulit. Hanya perlu kita ketahui
penggunannya tidak boleh sembarangan. Hal ini berkaitan dengan struktur suatu konten yang berkualitas
yang kita sajikan kepada pembaca.

Paragraf HTML
Paragraf digunakan di html untuk menyusun setiap kalimat yang mempunyai satu ide pokok atau
gagasan yang sama dapat kita jadikan satu paragraf. Untuk membuat paragraf di html menggunakan
tag <p>. Berikut adalah contoh syntaxnya di html.

Contoh tag Paragraf

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h2>Membuat Paragraf di HTML</h2>

<p>Kalimat ini merupakan contoh paragraf didalam html.

Setiap kalimat yang berada didalam satu elemen tag paragraf akan menjadi satu.
</p>

<p>Kalimat ini merupakan paragraf ke 2 didalam dokumen html ini.

Kita dapat menambahkan sejumlah paragraf lainnya.

</p>

</body>

</html>

Dan hasilnya adalah sebagai berikut :

Contoh diatas memperlihatkan bagaimana kita dapat membuat paragraf di html. Terdapat dua paragraf
yang dibuat pada contoh diatas. Kita dapat membuat atau menambah paragraf lainnya sesuai dengan
kebutuhan kita. Yang perlu diingat adalah setiap kalimat yang berada dalam satu elemen tag paragraf
akan dijadikan satu paragraf yang sama.

Pengenalan List HTML


List merupakan cara penulisan yang sering digunakan untuk membuat daftar berurutan. Terdapat 3
macam list yang ada di HTML yaitu ordered list, unordered list dan description list. Cara membuat list
di html tentunya berbeda-beda sesuai jenisnya. Ketiga macam list HTML tersebut juga memiliki tampilan
dan fungsi yang berbeda.
Perbedaan penulisan ketiga jenis list ini terdapat pada pembuka dan penutupnya saja. Sedangkan untuk
membuat item pada ordered dan unordered list menggunakan elemen yang sama yaitu <li>..</li>. Untuk
mengetahui lebih dalam masing-masing list tersebut kita akan bahas satu-persatu.

Ordered List pada HTML


Ordered list adalah jenis list berurutan yang ditampilkan dengan menggunakan angka atau nomor atau
huruf. Ordered list biasa digunakan untuk menampilkan daftar item yang membutuhkan penomoran
misalnya daftar pemenang lomba, daftar urutan ranking kelas dan urutan-urutan lain yang membutuhkan
nomor. Tag <ol> digunakan untuk membuat list yang berjenis ordered list.

Cara membuat ordered list HTML


Ordered list atau list angka/nomor dibuat dengan menggunakan tag <ol>. Penulisan item-item list tersebut
menggunakan tag <li> yang ditelakkan diantara tag pembuka <ol> dan tag penutup </ol>.

Contoh penulisan ordered list:

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar ordered list</title>
 </head>
<body>
  <p>Urutan nama pemenang lomba koding:</p>
  <ol>
  <li>Nama juara pertama</li>
  <li>Nama juara kedua</li>
  <li>Nama juara ketiga</li>
  </ol>
 </body>
</html>

Unordered List pada HTML

Unordered list adalah jenis list yang tidak berurutan yang ditampilkan dengan menggunakan simbol.
Unordered list digunakan untuk menampilkan daftar list yang tidak memerlukan angka pengurutan
misalnya daftar OS komputer, daftar aplikasi editor html dan lain-lain.

Cara Membuat Unordered List Html

Unordered list atau list simbol dibuat dengan menggunakan tag <ul>. Sama dengan list sebelumnya, item-
item list ini ditulis dengan menggunakan tag <li> yang terletak di dalam elemen <ul>.

<!DOCTYPE html>
<html>
 <head>
  <title>Belajar unordered list</title>
 </head>
<body>
  <p>Daftar OS komputer:</p>
  <ul>
  <li>Linux</li>
  <li>Windows</li>
  <li>Mac</li>
  </ul>
 </body>
</html>
Menampilkan Gambar
Dalam dokumen HTML ekstensionfile image yang digunakangif, jpeg, pcx, png, wmf, dan bmp, tetapi
browser lebih banyak menerima untuk file gambar yang berakhiran gif dan jpg.
<img src=” ... ” width
src : nama file gambar
Height : tinggi gambar
Width : lebar gambar
Align : mengatur letak image terhadap teks
(top| bottom| middle| left| right|center)
Alt : menampilkan teks pada saat image tidak dapat tampil
Border : garis tepi gambar
Contoh :
<img src=image/me.jpg width=125 height=150 border=2 alt="my picture" title="Taj'Mahal">
Attribut image tidak semua harus dituliskan tergantung kebutuhan. Sebaiknya gambar yang akan
ditampilkan berukuran real, sesuai dengan ukuran aslinya sehingga tidak perlu mengatur height dan
widthnya serta berakhiran .gif.

TABLE PADA HTML


Tabel sering digunakan pada halaman web untuk menampilkan data yang tersusun dalam bentuk kolom
dan baris seperti laporan, daftar pembukuan, dan sejenisnya. Komponen utama tabel adalah baris, kolom,
sel dan border (garis).
Baris adalah bagian tabel yang mendatar. Pada contoh gambar di atas, tabel tersebut terdiri dari 5
baris. Kolom adalah bagian tabel yang vertikal (atas ke bawah). Pada contoh gambar di atas, tabel
tersebut terdiri dari 6 kolom. Sel adalah kotak-kotak yang ada pada tabel. Pada gambar di atas, tabel
tersebut memiliki 30 sel. Border adalah garis yang membentuk tabel.

Cara Membuat Tabel di HTML


Untuk membuat tabel di HTML menggunakan tag <table>..</table>. Kemudian di dalam tag tersebut
ditambahkan tag <tr>..</tr>. Lalu di dalam tag tersebut diberi tag <td>..</td>.

Contoh kode HTML tabel:

<!DOCTYPE html>
<html>
 <head>
  <title>Tabel di HTML</title>
 </head>
<body>
  <p>Contoh tabel</p>
  <table>
    <tr>
        <td>Baris 1, Kolom 1</td>
        <td>Baris 1, Kolom 2</td>
        <td>Baris 1, Kolom 3</td>
        <td>Baris 1, Kolom 4</td>
    </tr>
    <tr>
        <td>Baris 2, Kolom 1</td>
        <td>Baris 2, Kolom 2</td>
        <td>Baris 2, Kolom 3</td>
        <td>Baris 2, Kolom 4</td>
    </tr>
    <tr>
        <td>Baris 3, Kolom 1</td>
        <td>Baris 3, Kolom 2</td>
        <td>Baris 3, Kolom 3</td>
        <td>Baris 3, Kolom 4</td>
    </tr>
  </table>
</body>
</html>

Atribut-atribut HTML untuk Tabel

Tag <table>, <tr>, <td> maupun <th> memiliki atribut khusus yang bisa digunakan untuk mengatur tabel.
Atribut yang populer dan masih disupport HTML5 adalah colspan dan rowspan. Atribut colspan dan
rowspan memiliki fungsi yang sama seperti fungsi merge pada Microsoft Word yaitu untuk
menggabungkan sel pada tabel HTML.

Atribut rowspan pada Tabel HTML

Atribut rowspan digunakan untuk menggabungkan beberapa baris dalam 1 kolom. Atribut ini adalah
atribut khusus untuk tag <td> dan <th>. Value dari atribut ini adalah jumlah baris yang ingin
digabungkan, berupa angka.

Atribut colspan pada Tabel HTML

Atribut colspan digunakan untuk menggabungkan beberapa kolom dalam 1 baris. Atribut ini juga untuk
tag <td> dan <th>. Sama seperti rowspan, value untuk atribut ini adalah berupa jumlah kolom yang ingin
digabung.

Atribut-atribut Tabel HTML yang Deprecated

Deprecated berarti usang, yaitu atribut-atribut tersebut sudah tidak disupport pada HTML5 dan sebaiknya
tidak digunakan lagi. Berikut ini atribut-atribut yang sudah deprecated:

Nama Atribut Fungsi


bgcolor Digunakan untuk mengatur warna background pada tabel.

border Digunakan untuk menentukan apakah kita menggunakan border atau tidak pada
Nama Atribut Fungsi
tabel

cellpadding Digunakan untuk mengatur padding atau jarak konten atau teks dengan border sel.

cellspacing Digunakan untuk mengatur jarak antar sel.

width Digunakan untuk mengatur lebar atau ukuran tabel.

Digunakan untuk mengatur posisi tabel baik itu berada di tengah, di kiri, atau di
align
kanan.

Pengenalan CSS

Menurut kalian CSS itu apa sih ?


CSS atau singkatan dari Cascading Style Sheet adalah bahasa lembar gaya yang digunakan untuk
menggambarkan penyajian dokumen yang ditulis dalam bahasa markup seperti HTML. Atau bisa juga
didefinisikan sebagai suatu teknologi yang digunakan untuk memperindah tampilan halaman website
(situs). Singkatnya dengan menggunakan Methode CSS ini kita dengan mudah mengubah secara
keseluruhan warna dan tampilan yang ada di situs kita, sekaligus memformat ulang situs kita (merubah
secara cepat).

Loh maksudnya gimana sih emang ada ya dokumen atau website itu harus pake style CSS ya ?
Jawabannya ada, dan hampir semua situs website menggunakan bahasa CSS untuk mempercantik
tampilan websitenya agar para peselancar atau pengunjung banyak mengunjungi situs atau website kita

Setelah Sebelumnya kita membahas tentang HTML, kurang lengkap rasanya jika sebuah website, tidak
diberikan tampilan yang menarik. Memang benar kita bisa mengandalkan fungsi pada tag yang ada di
HTML namun membutuhkan banyak sekali fungsi untuk menampilkan sebuah tampilan sederhana
misalnya seperti berikut ini :
https://richerregen.blogspot.com/2013/06/contoh-website-sederhana-dengan-html.html

Untuk bisa menampilkan halaman sebuah website seperti diatas membutuhkan banyak sekali tag atau
atribut yang harus di ketik pada teks editor, namun, jika kita bandingkan dengan website yang
menggunakan CSS maka tampilannya akan sperti berikut ini :

https://kelasprogrammer.com/cara-membuat-website-dengan-html-dan-css/

kira kira menurut kalian menarik yang mana ? yang atas atau yang bawah ?
jawabannya adalah yang bawah, karena sang programmer menyisipkan atau menambahkan file Script
CSS. Selain tampilannya menarik, website yang berada dibawah juga terlihat lebih rapih dan lebih
tersusun.
Dibandingkan dengan website yang diatas, yang masih berupa tampilan kasar penempatan gambar dan
tulisannya juga tidak rapih dan tersusun.
Keuntungan dan penggunaan CSS
Keuntungan menggunakan CSS itu apa sih ?

- CSS digunakan untuk mempersingkat penulisan tag HTML seperti font,color,text, dan table
menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
- CSS menggunakan kode kode yang tersusun untuk menetapkan style pda elemen HTML atau
dapat juga digunakan membuat style baru yang biasa disebut class.
- CSS dapat mengatur banyak atribut pada sebuah halaman secara mudah. Misalnya: warna
background, border, shadow, yang berbeda pada masing-masing tag yang digunakan.
Keuntungannya jelas sekali, jika kita ingin mengubah tampilan situs, kita tinggal mengedit satu file saja
sekarang, kita akan mencoba melihat bagaimana css itu bekerja.

Cara kerja CSS


CSS beroperasi melalui tag <style > dengan atribut class warna. Dengan adanya CSS pada HTML maka
pengaturan warna teks akan menjadi lebih mudah. Saat warna teks ingin diganti, cukup mengetikkan tag
<span > tanpa harus menulis ulang perintah. Jadi bisa disimpulkan bahwa CSS akan menghemat waktu
dengan perintah-perintah yang efisien. Hal ini bisa terjadi karena CSS sendiri dikembangkan untuk bisa
mengubah tampilan laman website tanpa harus mengganti isi konten. Dengan CSS  untuk mengubah dan
memprogram ulang tampilan website pun bisa dilakukan dalam waktu cepat.
Peran CSS untuk website sangatlah penting, karena tanpa adanya CSS, tampilan website akan
membosankan atau bahkan membutuhkan waktu lama untuk loading. Jika hanya bisa bergantung pada
HTML untuk membuat sebuah situs. Bukan cuma tampilan situs akan “hambar” tapi juga butuh waktu
lebih lama karena harus berulang kali mengetikkan perintah.

Aturan Penulisan Styling Pada CSS

Loh, emangnya CSS ada aturannya ya ? trus kalo ada aturannya emang apa aja sih yang harus kita patuhi
atau ikutin ?

Dalam Bahasa CSS ada aturan penulisan Script CSS, setiap kali kita ingin menggunakan perintah CSS
selalu diawali dengan tanda <style> dan diakhiri dengan </style>, misalnya seperti ini

<style>
b{
Background : blue;
}
Selain itu ada fungsi <b> yang di sebut sebagai selector, setiap selector harus diawali dengan kurung
kurawal buka “{“ dan kurung kurawal tutup “}”. Setiap kita membuat perintah seperti background harus
di sertakan titik dua “:” dan diisi dengan warna bisa dalam bahasa inggris atau kode warna #fffff lalu
diakhiri dengan titik koma “;”.

Menerapkan Styling Dasar pada Halaman


style yang bisa kita terapkan dalam mendesain sebuah situs atau website penggunaan atau penulisan style
dibagi menjadi 3 yaitu

Inline style sheet


CSS model ini adalah CSS dengan perintah pemrograman yang letaknya ada pada objek. Misalnya saat
mengubah sebuah tulisan pada laman tertentu di website, inline style sheet CSS harus menempel pada
elemen tulisan tersebut.

Tambahkan tag <style > saja untuk menerapkan CSS ini. Inline CSS adalah penempatan CSS yang
langsung dilakukan di dalam konten HTML. Penempatan CSS secara inline hanya akan mempengaruhi
satu bagian baris kode. Contohnya.

< h1  style=”font-size:30px;color:blue;”>Cek beritama utama ini!< /h1>

Script CSS digabung menjadi satu dengan fungsi tag pada HTML , selain itu script diatas juga
menjelaskan secara rinci berapa ukuran hurufnya, dan apa warna yang harus ditampilkan pada tulisan
“Cek Beritama utama ini!”. CSS di atas berarti hanya akan mempengaruhi paragraf yang spesifik di
dalam satu file .html dan muncul dengan warna biru (blue) ukuran font 30px.

External style sheet


CSS ini letaknya berbeda dengan laman yang akan diubah. Cara ini lebih praktis daripada  inline style
sheet karena bisa menghemat ruang dan bisa digunakan berulang-ulang untuk laman web yang berbeda.
CSS tipe ini bisa dikenali lewat tag <link rel >. Tag ini akan menghubungkan
halaman coding pada external style sheet CSS yang terpisah. External CSS adalah penempatan baris kode
CSS menggunakan file .css. ini dapat digunakan untuk mendeklarasikan sebagian besar pengaturan
tampilan website secara keseluruhan. Cara ini lebih sederhana dan simpel daripada menambahkan baris
kode di setiap elemen HTML yang ingin diatur tampilannya. Jika menggunakan penempatan secara
eksternal, harus menambahkan header untuk memanggil file .css di dalam file HTML seperti contoh di
bawah ini.

< head>
< link rel=”stylesheet”  type=”text/css”  href=fileCSSAnda.css”>
< /head>

Baris kode di atas akan menghubungkan file .html dengan eksternal style sheet (CSS). Pada contoh file
CSS menggunakan nama ‘fileCSSAnda.css’ yang dapat disesuaikan dengan letak file CSS di dalam
direktori website. Ketika file HTML sudah terhubung dengan file CSS maka seluruh pengaturan CSS
akan diterapkan di dalam kode HTML.
Embedded style sheet
CSS model ini sama seperti inline style sheet, sama-sama berada pada satu laman coding. Maka tidak
mengherankan jika embedded style sheet terkadang disebut dengan internal style sheet. Biasanya CSS ini
diapit oleh tag <head > </head > dan diawali dengan tag <style >. Embedded style sheet sering digunakan
untuk mengatur laman web dengan tampilan yang unik.

Misalnya dalam satu paragraf tulisan ada kalimat yang berbeda dan hal tersebut terus berulang.  Untuk
penempatan CSS menggunakan cara internal sekilas mirip dengan inline CSS, yaitu tipe penulisan tanpa
file CSS terpisah. Namun di dalam penggunaan CSS secara internal, baris kode HTML dituliskan di
bagian atas (header) file HTML. Cara ini akan sangat cocok dipakai untuk menciptakan halaman web
dengan tampilan yang berbeda. CSS ini bisa dipakai untuk menciptakan tampilan yang unik. Contohnya
seperti di bawah ini.

< head>
< style>
Body  { background-color:blue;  }
P  { font-size:20px;  color:mediumblue;  }
< /style>
< /head>

Baris kode di atas akan menerapkan background dengan warna biru, paragraf berukuran 20px,
dan ‘medium blue’ font ke dalam satu halaman HTML.

Di antara tiga jenis penempatan CSS, cara eksternal merupakan cara yang paling efektif untuk
mengimplementasikan CSS ke dalam website. Cara ini juga paling populer atau sering dipakai oleh
banyak pengembangan website dibandingkan dengan cara yang lainnya. Sedangkan cara internal dan
inline juga bisa dipakai untuk menambahkan format konten yang khusus atau berbeda dengan konten
yang lainnya.

Membuat Berkas CSS

Setelah dijelaskan bagaimana penerapan Script pada CSS digunakan kali ini kita akan masuk ke bagian
pembuatan berkas CSS, biasanya file CSS akan disandingkan satu folder dengan file HTML, bedanya file
HTML akan mengeluarkan ekstensi atau jenis file .html misal index.html sedangkan untuk CSS
ekstensinya adalah .CSS contoh formlogin.CSS,

Menghubungkan Berkas CSS dengan HTML

Berkas CSS merupakan file terpisah dari file HTML, hal ini masuk kedalam penjelasan dari penulisan
External Style Sheet, dimana file CSS harus dipanggil menggunakan link, yang tercantum dalam file
HTML  File CSS eksternal biasanya diletakkan setelah bagian <head> pada halaman. Kalian bisa
melampirkan eksternal styles dengan dua cara, yaitu linking dan importing. Eksternal style sheet dapat
ditautkan ke dokumen HTML menggunakan tag <link>. Tag <link> berada di dalam bagian <head>,
seperti yang ditunjukkan dalam contoh ini:

<head>
    <title>My HTML Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>

Jika menambahkan link diatas maka file HTML akan menghubungkan perintah tersebut untuk memanggil
file CSS yang sudah tercantum dalam file HTML diatas.

PENDALAMAN CSS
Nah setelah kita memahami apa itu CSS dan bagaimana cara kerjanya dan bagaimana cara membuat
berkas/file berkekstensi CSS sekarang kita akan mempelajari lebih dalam bagian bagian dari Script atau
syntax yang ada didalam bahasa CSS ini.

Selector
Selector adalah sebuah tag html yang digunakan pada css agar element tersebut dapat dimanipulasi atau
ditambahkan gaya pada css, selector dapat berupa tag html itu sendiri, atau bisa juga berupa nilai dari
atribut class atau id pada tag html.
Didalam selector terdapat dua bagian penting yang perlu dipahami, bagian tersebut adalah property dan
value, antara kedua bagian tersebut adalah inti dari css, bagaimana sebuah element html memiliki gaya
desain yang menarik, untuk dapat melakukan hal tersebut diatur oleh property dan value.
Apa itu Property…?

Property adalah jenis gaya, atau nama gaya untuk menentukan style pada tag html, dengan property lah
sebuah tag html dapat diubah menjadi sifat css, misalnya seperti menambahkan color, background, text-
align dan lain sebagainya. Banyak sekali property yang bisa digunakan untuk memanipulasi element html
agar desain web lebih menarik.

Lalu, pengertian Value…?

Value jika dibahasa indonesiakan artinya adalah nilai, ya.. sama saja seperti di css, value berfungsi untuk
menentukan nilai dari property pada saat mendekrasi css, misalkan property color, maka value yang harus
diberikan adalah nama warna, dapat rupa nama warnanya langsung atau juga berupa kode hexa.
Contohnya sebagai berikut:

selector { property: value; }

Kalo masih bingung selector itu yang kaya gimana sih dan property sama value nih saya kasih contohnya
yang lebih konkret ke kalian

Nah huruf <p> ini kalo di html disebut sebagai syntax untuk perintah membuat paragraf temen- temen,
syntax p inilah yang kita sebut sebagai selector yang nantinya dalam CSS kita akan membuat menyuruh
program untuk membuat syntax ini mau diberikan paragraph apa dan keterangannya apa,

Selanjutnya untuk yang text-align disebut property, kenapa disebut begitu ? karena itu adalah jenis style
yang akan kita pilih untuk syntax <p> yang tadi sudah kita seleksi, setelah itu kita beri titik dua untuk
menegaskan bahwa syntax <p> akan diberi style paragraf dengan tipe center. Dan center inilah hasil yang
akan kita perintahkan pada program, lalu diberi titik koma sebagai akhir dari perintah pada syntax.

Simplenya kalo kita bayangin kita minta tolong ke programnya kaya gini, CSS tolong kasih syntax <p>
ini jenis style text paragraph tipe rata tengah ya, maka program akan mengeksekusi perintah tersebut dan
membuat tulisan pada syntax p menjadi tulisan bertipe rata tengah.

Jenis jenis Selector

CSS memiliki jenis selector yang bervariasi, bahkan sangat beragam tergantung kebutuhan kita untuk
mendesain halaman web. Dalam modul ini saya akan membahas 5 jenis selector dasar di dalam CSS.
Selector CSS tidak hanya 5 jenis ini, namun dalam kebanyakan kasus sudah mencukupi untuk membuat
sebuah halaman web HTML+CSS.

Universal Selector
Universal selector hanya ada 1 di dalam CSS, yaitu tanda bintang “*”. Selector ini bertujuan untuk
‘mencari’ semua tag yang ada.
Contoh Universal Selector CSS:

“*” {
Color : white;
Back-ground : #000000;
}

Kode CSS diatas bermaksud untuk membuat seluruh tag HTML berwarna putih, dan background
berwarna putih.hitam.
Element Type Selector
Element Type Selector atau Tag Selector adalah istilah untuk selector yang nilainya merupakan tag
HTML itu sendiri. Setiap tag HTML bisa digunakan sebagai selector, dan seluruh tag tersebut
akan ditangkap oleh selector ini.

Contoh Element Type Selector CSS:

h1 {
   text-decoration: underline;
   }

Contoh kode CSS diatas akan membuat semua tag <h1> akan bergaris bawah,
Class Selector
Class Selector merupakan salah satu selector yang paling umum dan paling sering digunakan. Class
Selector akan ‘mencari’ seluruh tag yang memiliki atribut class dengan nilai yang sesuai.Untuk
penggunaan Class Selector, kita harus memiliki tag HTML yang mempunyai atribut class. Contohnya:

<p class=”paragraf_pertama”> Ini adalah sebuah paragraf pertama</p>

Perhatikan bahwa tag diatas, kita menambahkan atribut class dengan nilainya adalah nama dari kelas itu
sendiri. Sebuah nama class dapat dimiliki oleh lebih dari 1 tag, dan dalam sebuah tag dapat
memiliki lebih dari 1 class.

Contohnya dalam baris terakhir pada contoh diatas,tag p memiliki atribut class=” paragraf_pertama”.


Sedangkan untuk kode CSS Class Selector adalah sebagai berikut:

.paragraf_pertama {
                  color: red;
                  }

Untuk menggunakan class selector, di dalam CSS kita menggunakan tanda titik sebelum nama


dari class. Untuk contoh kita, seluruh class yang memiliki nilai “paragraf_pertama”, warna text akan
menjadi merah.
ID Selector
ID Selector bersama-sama dengan class selector merupakan selector paling umum dan juga sering
dipakai (walau tidak sesering class selector). Penggunaan ID selector hampir sama dengan class selector,
dengan perbedaan jika pada Class Selector kita menggunakan atribut class untuk tag HTML, untuk ID
selector, kita menggunakan atribut id.
Contoh penggunaan atribut id pada tag HTML

<p id=”paragraf_pembuka”> Ini adalah sebuah paragraf pembuka</p>

Atribut id selain untuk selector CSS, juga berperan sebagai kode unik untuk masing-masing tag (terutama
dipakai untuk kode JavaScript). Karena hal tersebut, id yang digunakan harus unik dan tidak boleh sama.
Dengan kata lain, id hanya bisa digunakan satu kali dalam sebuah halaman web dan tidak boleh
sama.

Contoh penggunaan id selector kode CSS Class Selector adalah sebagai berikut:

#paragraf_ pembuka {
                   color: red;
                   }

Di dalam kode CSS, kita menggunakan tanda pagar “#” sebagai penanda bahwa kita mencari tag yang
memiliki id tersebut.

Attribute Selector
Selector dasar terakhir kita adalah attribute selector. Selector ini sedikit lebih  advanced  dibandingkan
dengan selector-selector sebelumnya. Atribut Selector ini digunakan untuk mencari seluruh tag yang
memiliki atribut yang dituliskan.

Contoh penggunaan Attribute Selector kode CSS adalah sebagai berikut:

[href] {
       font-size:20px
;
       }

Seperti yang dapat dilihat dari contoh diatas, setiap atribut selector harus berada diantara tanda kurung
siku “[” dan “]”.

[href] akan cocok dengan seluruh tag yang memiliki atribut href, apapun nilai dari href (href biasanya
terdapat pada tag <a>). Untuk contoh [type=”submit”] akan cocok dengan tag yang memiliki atribut
type dengan nilai submit, yang dalam hal ini adalah tombol submit dalam form.
Walaupun memiliki kemampuan mencari tag yang sangat spesifik, namun atribut selector ini tidak
terlalu sering digunakan.
Formating Text

Format text di CSS. Pada kesempatan kali ini kita akan membahas mengenai bagaimana cara memformat
text untuk mengatur dan juga memodifikasi text yang ada pada halaman HTML dengan
menggunakan CSS agar tampilan text tersebut sesuai dengan yang kita inginkan.
Misalnya untuk mengatur sebuah text menjadi rata tengah, rata kanan, rata kiri, mengatur huruf menjadi
huruf besar atau huruf kecil, mengatur jarak indent text, mengatur warna text serta mengatur design pada
text.
Dan berikut ini adalah beberapa perintah CSS yang dapat digunakan untuk melakukan format text pada
CSS :

Tabel Perintah untuk Format Text pada Bahasa CSS

Perintah atau syntax Fungsinya


color Digunakan untuk merubah warna pada text, valuenya sendiri bisa diisi dengan
kode warna atau nama warna

text-align Digunakan untuk melakukan pengaturan posisi align pada suatu text, valuenya
sendiri dapat diisi dengan left agar text menjadi rata kiri, right agar text
menjadi rata kanan, center untuk membuat text menjadi rata tengah ataupun
justify agar membuat text menjadi rata kanan ataupun kiri.

text-decoration Digunakan agar dapat mengatur dekorasi text, valunya sendiri dapat diisi
dengan none agar membuat sebuah text tidak memiliki dekorasi, overline agar
membuat sebuah text memiliki garis di bagian atas text, underline untuk
membuat text memiliki garis bawah dan juga line-through untuk membuat text
garis coreng pada text yang diinginkan.

text-transform : Digunakan untuk membuat text menjadi huruf kapital, valuenya sendiri dapat
diisi dengan lowercase untuk membuat sebuah text menjadi huruf kecil semua
dan juga uppercase untuk membuat sebuah text menjadi huruf besar semua.

text-indent : Digunakan untuk melakukan pengaturan jarak alinea pada sebuah text,
valuenya sendiri dapat diisi dengan nilai pixel yang diinginkan sesuai dengan
kebutuhan.
text-spacing Digunakan untuk mengatur sebuah jarak diantara karakter pada sebuah text,
valuenya sendiri dapat diisi dengan menggunakan nilai pixel dan lain
sebagainya.

line-height Digunakan untuk dapat mengatur jarak diantara baris yang ada pada text,
valuenya sendiri dapat diisi dengan sebuah nilai.
.

text-shadow Digunakan untuk bisa mengatur efek bayangan pada sebuah text, valuenya
sendiri dapat diisi pertama dengan mengisi nilai untuk jarak atas dan bawah,
kedua mengisi nilai untuk jarak kiri dan kanan dan yang ketiga untuk mengisi
warna. Contoh penulisannya seperti 3px 6px red.

vertical-align Digunakan untuk mengatur align pada sebuah text dalam bentuk vertikal,
untuk valuenya sendiri dapat digunakan adalah right untuk rata kanan, left
untuk rata kiri dan center untuk rata tengah

Warna

Didalam desain web, CSS mendukung hingga 16.777.216 kombinasi warna. Warna ini


berasal dari perpaduan warna merah, hijau dan biru tersebut. Masing-masing warna dasar
ini dapat bernilai 0 sampai 255, dimana 0 adalah tanpa warna, 255 adalah warna maksimal.
Dalam dunia ilmu komputer, kombinasi warna ini dikenal dengan 24bit warna, atau
disebut juga true color. Perpaduan ketiga warna ini akan memberi kita 256 kombinasi
merah x 256 kombinasi hijau x 256 kombinasi biru = 16.777.216 kombinasi warna.

Misalkan, untuk mendapatkan warna kuning, sebenarnya warna kuning adalah perpaduan
warna merah dan hijau. Untuk mendapatkan warna kuning terang, maka kita harus
mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.

Format #RRGGBB

Format penulisan warna #RRGGBB adalah yang paling populer digunakan untuk


CSS. Dimana RR adalah nilai untuk warna merah, GG untuk hijau, dan BB untuk
warna biru. Masing-masing nilai ini berisi angka 00 sampai dengan FF. Kenapa FF?
Karena CSS menggunakan angka hexadesimal. FF adalah nilai maksimal, equivalen
dengan 255 dalam nilai decimal
Contohnya, #FF0000 adalah warna merah ‘murni’, #00FF00 adalah warna hijau murni,
sedangkan #777777 adalah kode untuk warna silver.

Format #RGB

Selain menggunakan format warna 6 digit, CSS juga mendukung penulisan 3 digit.
Format penulisan 3 digit ini merupakan penulisan singkat dari 6 digit.
Contohnya #RGB merupakan penulisan singkat dari #RRGGBB, #F0F adalah
singkatan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99,
biru=AA).

Penulisan Desimal

Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna


menggunakan angka desimal. Format penulisannya adalah: rgb(0, 160,
255) atau rgb(0%, 63%, 100%), dimana urutan warna adalah merah, hijau, dan biru.
Menggunakan format pertama, 255 sama dengan 100%. Jika kita menuliskan nilai
diluar dari angka yang seharusnya, yakni 0 – 255 atau 0% – 100% maka CSS secara
otomatis akan menyamakannya dengan nilai yang terdekat. Format penulisan
warna seperti ini tidak terlalu sering digunakan.

Kata Warna (Keyword)

Selain menggunakan kode warna dengan format RGB, CSS juga mendukung 17 kata
warna dalam bahasa inggris, yakni: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini berasal dari
warna dasar VGA pada Windows dan dikenal juga dengan istilah classic internet color.
Berikut tabel lengkap kata warna CSS:

Tabel Keyword dan Kode Warna

Keyword Warna Kode RGB Keyword Warna Kode RGB


Aqua #00ffff navy #000080
Black #000000 olive #808000
Blue #0000ff orange #ffa500
Fuchsia #ff00ff purple #800080
Gray #808080 red #ff0000
Green #008000 silver #c0c0c0
Lime #00ff00 teal #008080
white #ffffff yellow #ffff00
Nilai property: Transparent

Pada kasus tertentu, kita ingin sebuah tag dalam CSS menjadi transparan, untuk
keperluan ini CSS menyediakan keyword transparent sebagai nilai. Dengan
memberikan nilai transparan, sebuah tag akan ‘melewatkan’ warna dari tag
dibelakangnya.

Sebagai contoh penggunaan kode warna diatas, saya akan menampilkannya dalam
file warna.html sebagai berikut:

p.lima{
       color:transparent;
      }

nilai transparent yang diberikan kepada selector class=”lima” menjadi tidak


terlihat, dan hanya terlihat jika di blok.

Background Color
Background Color, adalah salah satu properti CSS yang digunakan untuk mengubah warna backround
tiap elemen HTML. Contoh penulisannya adalah sebagai berikut :

<h1 style="background-color: darkorange;">Background Color</h1>

Dan hasilnya adalah seperti ini

Background Color

BOX MODEL
Setiap elemen HTML ditampilkan dalam bentuk box (kotak). Jika diperhatikan, sebuah website umumnya
terbagi menjadi beberapa area. Mulai dari menu di bagian atas, isi konten di bagian tengah, iklan di sisi
kanan, sampai credit dan info kontak di bagian paling bawah.
Contoh penggunaan box model

Box model bertujuan untuk menyusun elemen-elemen website agar terlihat lebih rapi dan
menarik. Tidak hanya dari segi tampilan, interaksi dengan pengguna pun juga lebih maksimal.
Penyusunan yang tepat akan membuat website Anda menjadi lebih intuitif.
Karena setiap elemen disusun dan ditempatkan dengan rapi, pengguna bisa lebih mudah mencari
dan menggunakan setiap fitur yang ada di website Anda. Hasilnya, website Anda menjadi lebih
mudah untuk digunakan, menarik secara visual, dan membuat pengunjung betah berlama-lama di
sana.
CSS Box Model menyediakan fitur lengkap untuk mendesain elemen-elemen website sesuai
keinginan kita, CSS Box Model terdiri dari 3 property yaitu margin, padding, dan border.
Masing-masing property mempunyai fungsi dan cara penggunaan tersendiri. Kita mulai dari
property yang pertama.
Margin
Dalam Model Box CSS, property margin digunakan untuk mengatur jarak antar elemen. Tanpa
pengaturan margin, elemen-elemen website Anda bisa saling berbenturan atau melekat satu sama
lain. Ini akan membuat website Anda terlihat berantakan dan tidak menarik.

Penggunaan property margin bisa Anda lihat pada contoh kode di bawah ini.
Jalankan kode di atas menggunakan web browser. Anda akan melihat dua kotak berwarna merah
seperti di bawah ini :

Terdapat jarak antara Elemen 1 dan elemen 2. Jarak tersebut kita buat dengan property margin-
bottom seperti pada contoh kode di atas. Coba saja mengubah nilai margin-bottom dari 70px ke
nilai berapa pun yang Anda suka. Jarak antara kedua kotak tersebut pasti juga berubah.
Property margin digunakan untuk mengatur jarak antar elemen. Tidak hanya ke bawah, Anda
juga bisa menentukan jarak di sisi atas, kiri, dan kanan. Lihat tabel di bawah :

Property Fungsi Contoh


margin-top Mengatur jarak elemen di sisi atas margin-top : 50px

margin-bottom Mengatur jarak elemen di sisi bawah margin-bottom : 50px

margin-left Mengatur jarak elemen di sisi kiri margin-left : 50px

margin-right Mengatur jarak elemen di sisi kanan margin-right : 50px

Padding
Property CSS Box Model yang kedua adalah padding. Fungsi dari property ini adalah untuk
memberikan jarak pada isi elemen.
Coba Anda lihat lagi gambar kedua kotak di atas. Walaupun kita sudah membuat jarak antara
elemen 1 dan elemen 2, tapi teks yang tertulis di dalam elemen terlihat terlalu mepet ke garis
kotak.
Hal ini membuat teks terlihat tidak rapi. Untuk mengatasinya, Anda bisa menggunakan property
padding agar teks diletakkan agak ke tengah sehingga tidak terlalu mepet.
Contohnya seperti ini :

Dari contoh kode sebelumnya, kita tambahkan dua property padding. Yang pertama adalah
padding-left untuk memberi jarak dari sisi kiri. Kemudian padding-top untuk jarak dari atas.
Hasilnya bisa Anda lihat pada gambar berikut ini :
Dengan menentukan padding, teks dalam elemen terlihat lebih berjarak dari garis kotak. Dengan
begitu, teks menjadi lebih rapi dan mudah untuk dibaca.
Sama seperti margin, padding juga terdiri dari empat property, yaitu :

Property Fungsi Contoh

padding-top Mengatur jarak elemen dengan isi dari sisi atas padding-top : 50px

padding-bottom Mengatur jarakelemen dengan isi dari sisi bawah padding-bottom : 50px

padding-left Mengatur jarak elemen dengan isi dari sisi kiri padding-left : 50px

padding-right Mengatur jarak elemen dengan isi dari sisi kanan padding-right : 50px

Border
Anda mungkin sudah tidak asing lagi dengan istilah border. Dalam CSS Box Model, border
berfungsi untuk memberikan garis pinggir. Coba Anda lihat lagi contoh di atas. Warna merah
pada elemen berbenturan langsung dengan background.
Border sangat diperlukan jika warna elemen dan warna background saling tumpang tindih.
Bayangkan jika Anda harus mencantumkan gambar bendera merah putih di website berwarna
background putih. Warna putih pada bendera akan menyatu dengan background sehingga
pengunjung hanya akan melihat warna merah.
Lain halnya jika Anda memberikan batas pada gambar bendera berupa border berwarna hitam.
Pengunjung akan melihat bahwa gambar tersebut adalah bendera merah putih. Itulah gunanya
border.
Penggunaan property border pada CSS Box Model bisa Anda lihat pada contoh kode berikut :

Dapat dilihat bahwa ada 3 property baru yang kita tambahkan. Jika Anda menjalankan kode di
atas di web browser, Anda akan mendapatkan hasil seperti ini :

Anda bisa melihat ada garis hitam yang membatasi keempat sisi elemen. Itu adalah hasil dari
property border yang kita tentukan pada kode di atas.
Penjelasan dari ketiga property border tersebut bisa Anda lihat pada tabel di bawah ini :
Property Fungsi Contoh

border-width Mengatur ketebalan border border-width : 6px

border-style Mengatur jenis border border-style : solid

padding-left Mengatur jarak elemen dengan isi dari sisi kiri margin-left : 50px

Sama seperti margin dan padding, ukuran border juga akan menambah ukuran elemen. Jadi
perhitungkan baik-baik ukuran elemen yang Anda inginkan dengan menyertakan padding dan
border.
Box-Sizing
box-sizing adalah css property yang digunakan untuk merubah kalkulasi dalam mengukur lebar element.

Sebagaimana diketahui, secara default sebuah konten box (content-box) akan bertambah lebar


ukurannya apabila diberi border, padding, height dan width. ketika box-sizing dideklarasikan, maka
border, padding dan ukuran sebuah konten box bergantung pada value yang ditentukan.

Penggunaan Sintaksis CSS box-sizing dibagi menjadi 4 macam yaitu box-sizing: content-box |


padding-box | border-box | inherit

content-boxvalue

Ini adalah nilai default. Lebar dan tinggi (width dan height) hanya menyertakan content, tidak termasuk
border, padding dan margin.

padding-boxvalue

Lebar dan tinggi (width dan height) berdasarkan padding (sudah termasuk padding) tetapi tidak


termasuk border dan margin.

border-boxvalue

Lebar dan tinggi (width dan height) berdasarkan padding dan border (sudah termasuk padding dan


border) tetapi tidak termasuk margin.

inheritvalue

inherit

Value dari property box-sizing mengikuti aturan element induk sebelumnya.

Contoh CSS box-sizing

Kode HTMLnya
<div class="container">
Konten sebuah website
</div>

Dan ini adalah kode CSSnya


.container {
-webkit-box-sizing: border-box; /* Safari/Chrome, WebKit */
-moz-box-sizing: border-box; /* Firefox, Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}
Langkah langkah pembuatan nya
1. Buat folder terlebih dahulu. Beri nama folder project_1

2. Buat file bernama index.html di dalam folder project_1 yang kita buat

3. Jika sudah kita buka text editor yang kita punya, lalu kita open file yang tadi kita buat

4. Kemudian kita ketikan kerangka html nya terlebih dahulu


5. Lalu kita tulisakan judul di bagian tag title
6. Kemudian kita isi kan body dengan tulisan website ku

7. Kemudia jalan kan di browser apakah sudah berhasil apa belum


8. Title dan isi body sudah berubah
9. Kemudian kita akan menghubungkan html dengan css nya
10. Buat dulu file css nya di dalam folder yang sebelum nya kita buat
11. Beri nama file nya dengan style.css

12. Lalu kita ketikan tag code di html untuk menghubungkan css nya
13. Ketikan diantara tag head
14. Isi href nya dengan nama file css kita
15. Kemudian kita test apakah sudah terhbung atau belum
16. Cara test nya kita ketikan di file css yang kita buat tadi

17. Hasil
18. Dan jika sudah berubah maka kode css yang tadi di kembalikan seperti awal lagi karena itu
hanya test saja untuk mengetahui sudah berjalan apa belum
19. Kemudian kita akan memulai membuat website profil sederhana kita
20. Kita buat class class nya terlebih dahulu dan menandai isi class tersebut

21. Lalu kita atur atau percantik tampilan nya melalui css nya
22. Yang pertama kita ubah tampilan dari header nya terlebih dahulu

23. Dan hasil nya seperti ini

24. Lalu kemudian kita ubah isi konten kita yang kiri maupun yang kanan
25. Lalu hasil nya seperti ini

26. Lalu kita akan membuat footer nya terlebih dahulu


27. Hasil nya
28. Kemudian kita akan membuat header yang kita ingin kan
29. Buat class judul header di dalam tag header

30. Kemudian isi css nya seperti ini


31. Dan untuk kode warna kita bias buka color pic di w3school

32. Hasil nya jadi seperti ini


33. Kemudian kita akan membuat foto profil di konten sebelah kiri
34. Siapkan gambar yang ingin kita taruh di web
35. Beri nama gambar dengan nama foto_profil.png

36. Setelah itu kita kembali ke sublime lalu kita panggil gambar nya

37. Kita taruh di dalam isi_konten_kiri


38. Hasil nya

39. Kemudian kita atur ukuran gambar nya melalui css


40. Kita beri class terlebih dahulu di img tadi

41. Lalu kita atur di css nya

42. Kemudan hasil nya akan seperti ini

43. Lalu kita akan membuat nama dengan class nama


44. Lalu hasil nya akan seperti ini

45. Lalu kita atur css nya

46. Hasil nya

47. Kita akan membuat konten tentang diri kita


48. Kita ketikan di dalam isi content kiri di bawah class foto
49. Setiap paragraph kita beri tag <p>…</p>
50. Dan hasil nya akan seperti ini

51. Lalu kita percantik lagi melalui css

52. Dan hasil nya seperti ini

53. Lalu kita ubah background kuning ini menjadi putih


54. Cara nya kita hapus saja di bagian background nya di class isi_konten_kiri
55. Kemudian hasil nya akan seperti ini

56. Langkah selanjutnya kita akan membuat konten di sebelah kanan


57. Kita akan menaruh foto lagi di sebelah kanan

58. Hasil nya


59. Lalu kita atur lagi dengan css jangan lupa kita beri class nya terlebih dahulu di html nya
60. Beri class dengan nama foto_kanan

61. Lalu kita masuk ke css nya

62. Kemudian hasilnya akan seperti ini

63. Kemudian kita akan membuat link untuk menuju instagram kita
64. Kita buat div class nya terlebih dahulu, kemudian di dalam class tersebut kita beri tag <a
href=””>
65. Hasil nya akan seperti ini

66. Lalu kita percantik melalui css, sekalian kita hapus background abu abu nya

67. Lalu hasilnya seperti ini


68. Kemudian kita beri link untuk di tag <a> nya
69. Cara nya kita buka instagram kita di web dan salin link nya untuk di masukan kedalam tag <a>

70. Salin link tersebut dan taruh di dalam tag <a>

71. Lalu kita klik follow my instagram apakah berhasil atau tidak
72. Jika sudah kita lanjut untuk merapihkan footer

73. Dan hasil nya seperti ini


74. Lalu kita rapihkan melalui css

75. Lalu hasil nya akan seperti ini

Itu lah langkah – langkah dalam pembuatan website profil sederhana kita, kita bias berkreasi lebih bagus
lagi dari ini selamat mencoba..
Daftar Pustaka
Pengenalan HTML dan Atributnya https://www.petanikode.com/html-dasar/
Pengenalan Tag, Elemen, Atribut HTML https://itkoding.com/tag-atribut-elemen-kode-html/
Pengenalan Heading dan Paragraf HTML https://kelasprogrammer.com/heading-dan-paragraf-di-html/
Membuat List HTML https://itkoding.com/membuat-list-pada-html/
Membuat Table HTML https://itkoding.com/membuat-tabel-di-html/
Definisi CSS https://www.ayoksinau.com/pengertian-css/
Cara Kerja Bahasa CSS https://ezy.co.id/cara-kerja-css-cascading-style-sheet/
Pengertian Selector di dalam CSS https://bahasaweb.com/pengertian-selector-css/
Jenis – jenis selector di dalam CSS https://www.duniailkom.com/tutorial-belajar-css-mengenal-jenis-
jenis-selector-dasar-css/
Mengatur Format Text https://www.malasngoding.com/belajar-css-mengatur-format-text-dengan-css/
Penulisan Kode Warna https://www.duniailkom.com/tutorial-belajar-css-penulisan-kode-warna-pada-
css/
Belajar menuliskan Background https://www.webhozz.com/blog/belajar-css/
CSS BOX MODEL https://makinrajin.com/blog/css-box-model/
Box Elemen https://www.apacara.com/tutorial/css/css-property-box-sizing.html

Anda mungkin juga menyukai