Pada sebuah halaman web ada unsur-unsur dasar yang berperan sehingga sebuah halaman web dapat tampil di perangkat kita. Jika di analogikan sebuah halaman web itu tubuh manusia, maka HTML adalah struktur tulang dan CSS adalah ototnya.
Ya, sebuah tubuh tidak akan bisa berdiri tegak tanpa tulang, dan tentu akan sangat mengerikan jika tubuh hanya memiliki tulang tanpa otot dan kulit, itulah yang membuat HTML dan CSS adalah unsur penting dalam sebuah halaman web.
Pada artikel ini kita akan membahas lebih dalam mengenai HTML dan CSS dasar, dan bagaimana keduanya ini bisa bersatu membentuk sebuah halaman web.
Apa Itu HTML ?
HTML adalah kependekan dari Hyper Text Markup Language dari kepanjangan tersebut memiliki 2 frasa yaitu Hyper Text yang berarti menulis teks dengan teks (Text within Text), dan Markup Language yang merupakan bahasa komputer yang digunakan untuk mengaplikasikan layout dan melakukan konvensi pemformatan kedalam dokumen teks.
Secara sederhananya HTML adalah kerangka yang membentuk dan mengatur bagaimana sebuah halaman web akan ditampilkan di browser.
Struktur Dasar HTML
Sama seperti buku, koran, majalah ataupun dokumen lain sebuah halaman web memiliki struktur dasar.
Informasi /teks yang di tulis berupa paragraf, judul, dan sub judul.
Pada dasarnya HTML memiliki struktur dasar seperti dibawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
<h1>Heading Utama</h1>
<p>Sebuah Paragraph.</p>
<h2>Sub Heading</h2>
</body>
</html>
Bisa dilihat struktur dasar HTML terdiri dari beberapa elemen dimana setiap element terdapat 2 tag yaitu tag pembuka<> dan penutup </>.
Membuat Berkas HTML
Untuk membuat sebuah berkas html kita memerlukan teks editor. Teks editor ini adalah sebuah tools yang digunakan untuk menuliskan kode seperti html dan css.
Ada banyak teks editor yang dapat digunakan untuk menulisakan berkas html, diantaranya adalah
1. Notepad / Notepad ++
2. Visual Studio Code
3. Sublime Code
4. Atom Editor
5. Emacs
6. dan masih banyak lagi.
Untuk awalan kali ini kita coba membuat berkas html di Notepad++
Tulisakan kode struktur dasar HTML di atas kemudian save dengan nama index.html atau bisa nama apapun asalkan tetap berformat .html yang menunjukan bahwa itu adalah berkas html.
lalu buka berkas tersebut dan akan menampilkan sebuah halaman web seperti ini.
selanjutanya kita akan beri warna pada halaman tersebut, sebelum itu kita bahas terlebih dahulu mengenai CSS
Apa itu CSS
CSS adalah kependekan dari Cascading Style Sheet, sesuai dengan namannya CSS memungkinkan kita dapat mendesign (style) tampilan dokumen HTML sehingga menjadi sebuah halaman web yang lebih indah.
CSS bukanlah sebuah bahasa pemrograman karena tidak ada logika di dalamnya. CSS hanya sebuah declarative lenguage yang nantinya digunakan untuk mengatur bagaimana sebuah elemen HTML ditampilkan di browser.
Menuliskan Aturan Styling
Langkah awal belajar CSS adalah memahami aturan styling pada CSS. Berikut 2 contoh aturan/ rule pada CSS yang nantinya bisa di terapkan pada halaman HTML sebelumnya.
h1 { color : red;}
h2 { color : blue;}
p { font-family : sans-serif;
font-size : small; }
kita ambil satu rule di atas untuk menjelaskanya.
h1 { color : red;}
h1 adalah selector, selector ini dipanggil melalui tipe elemen yang ada di berkas HTML
color dari rule diatas dekalasi dari sebuah properti yang ingin ditampilkan untuk selector.
red dari rul diatas adalah value dari sebuah deklarasi, sehingga pada h1 akan menampilkan teks berwarna merah.
Menerapkan CSS Pada Berkas HTML
Untuk menerapakan CSS pada berkas HTML kita perlu melampirkan styling tersebut pada berkas HTML.
Ada 3 cara untuk melampirkan styling pada berkas HTML
1. External Style Sheet
Artinya kita membuat berkas CSS terpisah dari HTML kemudian kita hubungkuan dengan element <link> pada <head> sebuah berkas HTML. Contohnya seperti ini :
<head>
<title>Document Title</title>
<link rel="stylesheet" href="style.css">
</head>
2. Embeded Style Sheet
Embeded Style Sheet ini adalah rule yang dituliskan langsung di berkas HTML, contonya seperti ini :
<head>
<title>Judul Halaman</title>
<style>
/* Rules dituliskan disini */
</style>
</head>
3. Inline Style
Inline Style adalah styling yang diterapkan langsung ke elemen HTML dengan menggunakan atribut style. Contohnya seperti ini :
<h1 style =" color : red" >Heading Utama</h1>
Langsung saja kita coba terapkan style pada berkas html yang sudah kita buat, karena masih sangat sederhana kita gunakan carac Embeded Style Sheet untuk melampirkannya.
Maka berkas yang kita buat jadi seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
<style>
h1 { color : red;}
h2 { color : blue;}
p { font-family : sans-serif;
font-size : small;}
</style>
</head>
<body>
<h1>Heading Utama</h1>
<p>Sebuah Paragraph.</p>
<h2>Sub Heading</h2>
<p>Sebuah Paragraph</p>
</body>
</html>
Setelah save dan hasilnya di browser jadi seperti ini :
Posting Komentar untuk "Dasar Pemrograman WEB : Pengenalan HTML dan CSS"