Mungkin bagi seseorang yang ingin terjun ke dunia pemograman bertanya-tanya apa itu HTML dan CSS? begitu juga dengan saya pribadi, tulisan kali ini saya akan membagikan apa yang telah saya dapat di sekolah saya .
HTML
Apa itu html ??
Mengintip dari Wiki : HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web. Menampilkan berbagai Informasi di dalam sebuah penjelajah web internet.
Masih kurang paham ?? tenang saya akan menjelasakan secara detail agar mudah dimengerti .
Jadi, apa sebenarnya itu html ??
Menurut pemahaman saya, HTML itu seperti kerangaka dari halaman website atau struktur untuk membuat website yang akan ditampilkan di browser, dimana untuk membentuk atau mengatur halaman tersebut kita menggunakan tanda / umum biasa disebut tag.
Tag html mempunyai tag pembuka dan tag penutup. Tag pembuka menggunakan simbol lebih kecil (<) dan lebih besar (>). Begitu juga dengan penutup, hanya saja tag penutup ditambahkan slash (/).
Struktur Dokumen HTML
<html>
<head>
<title>HTML</title>
</head>
<body>
</body>
</html>
Keterangan :
<html> <!-- tag ini merupakan tanda bahwa kode yang akan kita buat merupakan kode html -->
<head> <!-- Tag ini merupakan tag kepala, dimana didalam tag kepala ini terdapat beberapa tag lainnya seperti judul dan sebagainya. -->
<title>HTML</title> <!-- Tag ini digunakan sebagai tag judul atau penamaan nama halaman website yang kita buat -->
<body> <!-- Tag ini merupakan bagian paling penting dalam halaman website. Karena di dalam tag ini terdapat kumpulan isi atau berita yang akan ditampilkan pada halaman website. -->
Namun ada juga yang tida menggunakan tag penutup seperti.
<input type="text">
<img src ="images.jpg">
Pada contoh di atas anda bisa melihat sedikit perbedaan tag HTML, itulah yang disebut attribute tag HTML.
Tag Input dan Img : tag html
Type dan src : attribute html
Text dan images.jpg : nilai (value) dari attribute
Yang perlu kalian ingat bahwa HTML Bukan bahasa Pemrograman, Mengapa ? Karena html hanya sebuah bahasa markah, HTML tidak bisa melakukan operasi aritmatika, menangani percabangan, melakukan perulangan dan masih banyak lagi yang bisa di lakukan oleh bahasa pemrograman. Tapi semua orang yang ingin terjun ke web programing wajib mengenal html terlebih dahulu.
CSS
Mengintip dari Wiki : Cascading Style Sheet (CSS) merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemograman.
Kenapa harus CSS ?
Cascading Style Sheet dengan css kita bisa menghias halaman website kita, jika kita ibaratkan website sebagai rumah anda dan anda sudah membangun rumah tersebut dengan jasa tukang bagunan (dalam hal in HTML), maka langkah selanjutnya adalah bagaimana agar rumah anda ini terlihat cantik. Maka dengan itu anda perlu seseorang yang profesional untuk masalah tersebut (CSS). Jadi dengan bantuan CSS ini anda bisa menghias halaman website anda .
Struktur Penulisan CSS
body{
background-color: red;
}
Pada contoh di atas kode css memiliki tiga 3 bagian yaitu :
selector : body
property : background
red : value (nilai dari property)
Bagaimana cara penggunaan css ? Ada 3 cara penggunaan css, yaitu :
<BODY style="background-color: red;">
<html>
<head>
<title>HTML</title>
<style type="text/css">
body{
background-color: red;
}
</style>
</head>
<body>
</body>
</html>
buatlah file baru dengan nama file.css ketikan baris code css dibawah ini:
body{
background-color: orange;
}
p{
font-color: white;
}
kemudian didalam file html kita harus memanggil file.css tadi, caranya tambahkan sebaris kode didalam tag head.
contoh:
<html>
<head>
<title>HTML</title>
<style type="text/css" rel="stylesheet" href="file.css"></style>
</head>
<body>
<p>Paragraph Berwarna Putih</p>
</body>
</html>
Menurut saya lebih baik menggunakan External Style Sheet, karena file html kita akan terlihat rapi dan juga memungkinkan kita membuat beberapa halaman web dengan tampilan yang sama.
Penutup
HTML dan CSS adalah dasar bagi siapa yang ingin terjun ke pemrograman web. Baik dia Seorang Web Developer, Web Programer, Web Designer dan sebgainya yang berhubungan dengan bidang website.
Sekian Terima Kasih, See you next time.
- Inline style sheet
<BODY style="background-color: red;">
- Inline embedded style sheet
<html>
<head>
<title>HTML</title>
<style type="text/css">
body{
background-color: red;
}
</style>
</head>
<body>
</body>
</html>
- External Style Sheet
buatlah file baru dengan nama file.css ketikan baris code css dibawah ini:
body{
background-color: orange;
}
p{
font-color: white;
}
kemudian didalam file html kita harus memanggil file.css tadi, caranya tambahkan sebaris kode didalam tag head.
contoh:
<html>
<head>
<title>HTML</title>
<style type="text/css" rel="stylesheet" href="file.css"></style>
</head>
<body>
<p>Paragraph Berwarna Putih</p>
</body>
</html>
Menurut saya lebih baik menggunakan External Style Sheet, karena file html kita akan terlihat rapi dan juga memungkinkan kita membuat beberapa halaman web dengan tampilan yang sama.
Penutup
HTML dan CSS adalah dasar bagi siapa yang ingin terjun ke pemrograman web. Baik dia Seorang Web Developer, Web Programer, Web Designer dan sebgainya yang berhubungan dengan bidang website.
Sekian Terima Kasih, See you next time.