Saturday, June 3, 2017

Mengenal HTML dan CSS Dasar

Selamat datang kembali di Pintar Sekolah. Pada artikel-artikel sebelumnya kita sudah belajar tentang beberapa mata pelajaran yang ada di sekolah umum. Nah, 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?

Mengenal HTML dan CSS Dasar Pintar Sekolah

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 Pintar Sekolah 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.

Pengertian CSS


CSS atau singkatan dari Cascading Style Sheet adalah sebuah ku
mpulan 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
Mengenal HTML dan CSS Dasar Pintar Sekolah
Contoh Kode HTML Menggunakan 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++
Mengenal HTML dan CSS Dasar Pintar Sekolah
Contoh Kode HTML Menggunakan 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
Mengenal HTML dan CSS Dasar Pintar Sekolah
Contoh Kode HTML Menggunakan 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.
Baca Juga
Mungkin masih banyak lagi software-software lainnya yang bisa kamu gunakan untuk membuat HTML dan CSS, namun pada artikel kali ini Pintar Sekolah 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.

<p>Selamat datang di Pintar Sekolah</p>

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 Pintar Sekolah".

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.

<p class="satu">Selamat datan di Pintar Sekolah</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 Pintar Sekolah</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 Pintar Sekolah</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.

Tunggu artikel menarik lainnya tentang pemrograman web hanya di Pintar Sekolah.

Seorang siswa dari XI RPL 1 dan bersekolah di SMKN 1 Karawang. Hobi menulis dan sangat menggemari dunia web development, internet dan desain.

8 komentar

waktu smk emang saya paling suka sama pelajaran pemrograman web, uji kesabaran banget :D
Softwarenya tetep menurut saya Notepad++ yang terbaik (y)

Hehe bener banget nih, diperlukan tingkat ketelitian yang tinggi. Kalau saya sih lebih suka ke Sublime Text hehe :-d

Sebenarnya secara gak langsung ketika bikin link in/out di wigdet, sudah mengacu pada pengenalan HTML dan CSS ya Mas... hanya saja perlu pengembangan lebih dalam lagi, seperti yang sudah dibahas pada artikelnya ini, untuk mengupas lebih dalam lagi... :D
Salam

Benar sekali gan, saya juga dulu sempat belajar seperti itu dan akhirnya sekarang bisa paham sepenuhnya hehe =D

Pasti berguna banget ya ini nas.. Terutama untuk adik adik yang mau belajar membuat atau sekedar meredesign tampilan sebuah website.. Mesti paham susuan dasar html dan beberapa Css nya

Benar sekali gan, mengingat sekarang juga sudah memasuki zaman yang serba digital, setidaknya sebagai netizen yang cerdas kita harus paham struktur dasar html dan css (o)

Alhamdulillah kalau CSS bagian dasar masih mengerti, tapi gatau kalo yang bagian advanced :v.

Saya juga masih belajar untuk CSS lanjutannya hehe

Silahkan berkomentar atau berpendapat melalui form dibawah. Berkomentarlah sesuai dengan isi artikel, link tidak akan ditampilkan, dan komentar yang mengandung unsur SARA tidak diperkenankan.
Jadilah orang yang bijak dan bisa menghargai orang lain
EmoticonEmoticon