Jagotutorial – Untuk artikel kali ini kita akan sedikit membahas sebuah materi dasar dari mata pelajaran yang hanya ada dibeberapa sekolah kejuruan dengan jurusan tertentu seperti RPL (Rekayasa Perangkat Lunak) dan TKJ (Teknik Komputer Jaringan)., yaitu mata pelajaran Pemrograman Web
Pemrograman web adalah salah satu mata pelajaran yang menarik menurut saya dan ada juga yang berpendapat bahwa ini adalah salah satu mata pelajaran yang cukup membuat kepala pusing. Nah, lalu apa sih yang dipelajari pada mata pelajaran pemrograman web ini?
Materi dasar dalam mata pelajaran pemrograman web adalah materi seputar HTML (Hyper Text Markup Language) dan sedikit membahas seputar CSS (Cascading Style Sheet). Pada umumnya, untuk membangun sebuah website yang bisa dibilang cukup sempurna, kita setidaknya harus bisa menguasai 3 komponen dasarnya, yaitu HTML, CSS dan Javascript. Namun, karena HTML dan CSS sangat berakaitan erat maka jagotutorial lebih memilih untuk membahasnya sekarang, dan untuk Javascript saya sendiri masih dalam tahap belajar.
Pengertian HTML
HTML atau singkatan dari Hyper Text Markup Language adalah sebuah bahasa mark-up tetapi bukan termasuk salah satu bahasa pemrograman. Dengan menggunakan HTML kita bisa membuat sebuah dokumen yang bisa dimuat atau diupload ke internet dan bisa ditampilkan menggunakan web browser yang terdapat di komputer client. Selain itu, HTML juga bisa digunakan sebagai sebuah penghubung dengan menjadikannya sebagai link diantara dokumen satu dengan dokumen yang lainnya. Yang dimaksud dokumen dalam hal ini adalah sebuah kumpulan kode bahasa HTML yang dibuat sedemikian rupa sehingga bisa ditampilkan secara sempuran di web browser. Setelah kamu mengetahui apa itu html baca juga sejarah html.
Pengertian CSS
CSS atau singkatan dari Cascading Style Sheet adalah sebuah kumpulan kode berbahasa style sheet yang berguna untuk mengatur dan memformat tampilan dari sebuah website secara cepat dan praktis. Jika diibaratkan sebaga sebuah bangunan atau rumah, maka HTML adalah kerangka dalamnya dan CSS adalah tampilan luarnya. Ketika kamu ingin mengecat ulang banyak bangunan atau merubah tampilan luarnya tetapi kamu tidak mau untuk mengubah kerangka dasar serta ingin melakukannya dengan cepat, maka disinilah CSS sangat berguna.
Software Untuk Membuat File HTML dan CSS
Untuk membuat sebuah website offline (HTML dan CSS) maka kamu harus menggunakan sebuah code editor yakni sebuah software komputer yang bisa menulis bermacam-macam kode program termasuk bahasa markup, HTML. Berikut dibawah ini adalah beberapa code editor yang paling populer dan banyak digunakan.
1. Notepad
Bagi seorang pemula, kamu bisa memulai menulis HTML dan CSS pertama kamu menggunakan software bawaan dari Microsoft yang sudah terinstall secara otomatis dikomputer kamu dan bisa kamu gunakna secara gratis. Namun, notepad tidak akan efektif jika kamu membuat sebuah file HTML dan CSS yang panjang dan rumit dikarenakan tampilan notepad yang sederhana.
2. Notepad++
Software kedua yang paling umum dan banyak digunakan programmer untuk membuat file HTML dan CSS mereka adalah software Notepad++. Notepad++ bisa dibilang sebuah software lanjutan dari notepad. Notepad++ mempunyai tampilan yang berbeda dengan notepad biasa, dengan menggunakan notepad++ kamu tidak akan dihadapkan pada tampilan yang sederhana seperti notepad biasa, melainkan setiap baris kode yang kamu nulis akan mempunyai warna-warna tersendiri yang tidak akan membuat mata kamu bosan. Software ini juga software gratis.
3. Sublime Text
Dan software terakhir yang paling umum dan banyak digunakan programmer dunia untuk membuat sebuah file HTML dan CSS adalah Sublime Text. Sublime text juga software favorit saya dan saya gunakan hingga saat ini, saya lebih memilih sublime text karena tampilannya yang gelap dan warna-warna kode programnya yang lebih menarik. Sublime text juga merupakan software gratis.
Mungkin masih banyak lagi software-software lainnya yang bisa kamu gunakan untuk membuat HTML dan CSS, namun pada artikel kali ini jagotutorial hanya memberikan 3 saja dan mungkin nanti saya buatkan artikel yang khusus untuk membahas software kode editor.
Tag, Attribut, dan Element Dalam HTML
1. Tag
Didalam HTML ada yang namanya tag. Salah satu dari contoh bentuk tag adalah sebagai berikut.
Tag berfungsi untuk membeti tahu web browser yang kita gunakan untuk membuka dokumen HTML kita sehingga web browser tahu bagaimana sesuatu harus ditampilkan. Dalam HTML tersendiri kebanyakan tag mempunyai pasangan, yaitu tag pembuka yang berbentuk <p> dan tag penutup yang berbentuk </p>. HTML mempunyai sekitar 100 tag, tetapi tidak semuanya harus ditulis dan fungsinya sangat bermacam-macam. Pada contoh diatas kita memberi tahu web browser untuk menampilkan sebuah paragraf yang didalamnya terdapat kalimat “Selamat datang di jagotutorial“.
2. Attribut
Attribut adalah sebuah informasi tambahan yang diletakkan pada tag pembuka. Fungsi dari attribut sendiri bermacam-macam dan tergantung pada nilai yang diberikan serta di tag mana attribut tersebut ditempatkan. Namun, ada sebagian attribut yang bisa digunakan pada banyak tag, attribut seperti ini biasa dikenal dengan istilah Global Attribut. Berikut adalah salah satu contoh penerapan attribut pada tag p.
Secara umum dan global, attribut ditulis menggunakan kutip dua (“), tetapi kamu juga bisa menggunakan kutip satu atau bahkan tanpa menggunakan apapun. Namun, jika nilai yang diberikan pada attribut lebih dari satu kata maka diharuskan menggunakan kutip dua.
3. Element
Sementara element adalah seluruh bagian utuh dari tag attribut dan semuanya yang berada didalam tag pembuka hingga tag penutupnya.
Struktur Dasar HTML
Setelah memilih salah satu dari sekian banyaknya kode editor dan mengetahui tag, elemen serta atribut dalam HTML, sekarang maka saatnya kita belajar untuk mengetahui struktur dasar atau kode dasar sebuah file HTML. Baiklah, berikut adalah struktur dasar HTML.
<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Saya sedang belajar HTML bersama jagotutorial</p>
</body>
</html>
Mari kita pelajari satu persatu baris kode dari struktur dasar HTML diatas.
1. <!DOCTYPE html>
Ini adalah sebuah kode yang mendaklarasikan sebuah tipe HTML yang digunakan. Dengan menggunakan kode ini, berfungsi untuk memberi tahu kepada web browser bahwa file HTML tersebut adalah HTML5. Kamu bisa mempelajari lebih lanjut tentang baris kode yang satu ini di internet karena penjelasannya yang cukup panjang.
2. <html>
<html> adalah sebuah kode wajib ketika ingin membuat file HTML dan menandakan dimulainya penulisan dokumen HTML.
3. <head>
Dalam file HTML, terdapat dua bagia, yaitu bagian <head> dan <body>. Tag <head> sampai </head> bisa diisi dengan berbagai tag yang berfungsi untuk memberi tahu berbagai macam informasi kepada web browser.
4. <title>
Tag <title> dalam baris kode <head> berfungsi untuk menampilkan judul dari dokumen HTML tersebut.
5. </head>
</head> adalah tag penutup dari <head>
6. <body>
Baris kode yang ditulis didalam tag <body> hingga </body> adalah yang akan ditampilkan pada web browser. Jadi, bisa dibilang ini semua kode yang berada didalam tag <body> adalah inti dari dokumen HTML.
7. <p>Saya sedang belajar HTML bersama Teknsia</p>
Tag <p> adalah tag yang berfungsi untuk menampilkan teks sebagai paragraf
8. </body>
Tag penutup untuk <body>
9. </html>
Tag penutup untuk </html> dan menandakan bahwa dokumen HTML berakhir.
Selector, Declaration, Property dan Value Dalam CSS
Setelah mempelajari dasar dari HTML diatas, maka sekarang saatnya kita mempelajari tentang CSS nya. Sebagai contoh, perhatikan kode CSS dibawah ini.
p {font-size: 16pt; color: blue;}
1. Selector
Selector dalam CSS digunakan untuk menemukan bagian mana dari HTML kita yang akan diberikan style atau tampilan. Dalam contoh ini, selector CSS diatas adalah tag “p”.
2. Declaration
Declaration adalah kumpulan perintah yang diberikan kepada selector CSS dan semua perintah declaration berada didalam kurung kurawal.
3. Property
Property adalah salah satu perintah yang terdapat didalam declaration CSS dan harus diberi value atau nilai agar perintah tersebut dapat diproses dan diterima oleh CSS. Dalam contoh ini kita menggunakan property font-size yang berguna untuk mengatur ukuran font pada semua tag “p” yang ada didalam dokumen HTML kita, dan property color yang berguna untuk mengubah warna font pada semua tag “p”.
4. Value
Dan yang terakhir adalah value. Value adalah nilai yang diberikan kepada property CSS. Dalam contoh ini value yang diberikan kepada property font-size adalah 16pt dan value untuk property color adalah blue.
Maka, arti perintah dari kode CSS diatas adalah :
Temukan semua tag p yang ada didalam dokumen HTML dan ubah ukuran fontnya menjadi 16pt dan warna fontnya berwarna biru.
Dengan mempelajari dasar dari HTML dan CSS diatas, saya rasa kamu sudah cukup paham dan mengerti bagaimana caranya untuk menulis sebuah kode baik HTML maupun CSS.
