Mengenal Html Dasar Dan Css Dasar

HTML Dasar dan CSS dasar – Selamat tiba kembali di . Pada artikel-artikel sebelumnya kita sudah mencar ilmu ihwal beberapa mata pelajaran yang ada di sekolah umum. Nah, untuk artikel kali ini kita akan sedikit membahas sebuah bahan dasar dari mata pelajaran yang hanya ada dibeberapa sekolah kejuruan dengan jurusan tertentu mirip RPL (Rekayasa Perangkat Lunak) dan TKJ (Teknik Komputer Jaringan)., yaitu mata pelajaran Pemrograman Web.
Pemrograman web ialah salah satu mata pelajaran yang menarik berdasarkan saya dan ada juga yang beropini bahwa ini ialah salah satu mata pelajaran yang cukup menciptakan kepala pusing. Nah, kemudian apa sih yang dipelajari pada mata pelajaran pemrograman web ini?
artikel sebelumnya kita sudah mencar ilmu ihwal beberapa mata pelajaran yang ada di sekolah  Mengenal HTML Dasar dan CSS Dasar

Mengenal HTML Dasar dan CSS Dasar

Materi dasar dalam mata pelajaran pemrograman web ialah bahan seputar HTML (Hyper Text Markup Language) dan sedikit membahas seputar CSS (Cascading Style Sheet). Pada umumnya, untuk membangun sebuah website yang sanggup dibilang cukup sempurna, kita setidaknya harus sanggup menguasai 3 komponen dasarnya, yaitu HTML, CSS dan Javascript. Namun, sebab HTML dan CSS sangat berkaitan bersahabat maka  lebih menentukan untuk membahasnya sekarang, dan untuk Javascript saya sendiri masih dalam tahap belajar.

Pengertian HTML

HTML atau abreviasi dari Hyper Text Markup Language ialah sebuah bahasa mark-up tetapi bukan termasuk salah satu bahasa pemrograman. Dengan memakai HTML kita sanggup menciptakan sebuah dokumen yang sanggup dimuat atau diupload ke internet dan sanggup ditampilkan memakai web browser yang terdapat di komputer client. Selain itu, HTML juga sanggup dipakai sebagai sebuah penghubung dengan menjadikannya sebagai link diantara dokumen satu dengan dokumen yang lainnya. Yang dimaksud dokumen dalam hal ini ialah sebuah kumpulan arahan bahasa HTML yang dibentuk sedemikian rupa sehingga sanggup ditampilkan secara tepat di web browser.

Pengertian CSS

CSS atau abreviasi dari Cascading Style Sheet ialah sebuah kumpulan arahan berbahasa style sheet yang berkhasiat untuk mengatur dan memformat tampilan dari sebuah website secara cepat dan praktis. Jika diibaratkan sebagai sebuah bangunan atau rumah, maka HTML ialah kerangka dalamnya dan CSS ialah tampilan luarnya. Ketika kau ingin mengecat ulang banyak bangunan atau merubah tampilan luarnya tetapi kau tidak mau untuk mengubah kerangka dasar serta ingin melakukannya dengan cepat, maka disinilah CSS sangat berguna.

Software Untuk Membuat File HTML dan CSS Dasar

Untuk menciptakan sebuah website offline (HTML dan CSS) maka kau harus memakai sebuah code editor yakni sebuah software komputer yang sanggup menulis majemuk arahan kegiatan termasuk bahasa markup, HTML. Berikut dibawah ini ialah beberapa code editor yang paling terkenal dan banyak digunakan.

1. Notepad
artikel sebelumnya kita sudah mencar ilmu ihwal beberapa mata pelajaran yang ada di sekolah  Mengenal HTML Dasar dan CSS Dasar
Contoh Kode HTML Menggunakan Notepad

Bagi seorang pemula, kau sanggup memulai menulis HTML dan CSS dasar pertama kau memakai software bawaan dari Microsoft yang sudah terinstall secara otomatis dikomputer kau dan sanggup kau gunakna secara gratis. Namun, notepad tidak akan efektif bila kau menciptakan sebuah file HTML dan CSS yang panjang dan rumit dikarenakan tampilan notepad yang sederhana.

2. Notepad++

artikel sebelumnya kita sudah mencar ilmu ihwal beberapa mata pelajaran yang ada di sekolah  Mengenal HTML Dasar dan CSS Dasar
Contoh Kode HTML Menggunakan Notepad++
Software kedua yang paling umum dan banyak dipakai programmer untuk menciptakan file HTML dan CSS dasar mereka ialah software Notepad++. Notepad++ sanggup dibilang sebuah software lanjutan dari notepad. Notepad++ memiliki tampilan yang berbeda dengan notepad biasa, dengan memakai notepad++  kamu tidak akan dihadapkan pada tampilan yang sederhana mirip notepad biasa, melainkan setiap baris arahan yang kau nulis akan memiliki warna-warna tersendiri yang tidak akan menciptakan mata kau bosan. Software ini juga software gratis.

3. Sublime Text
artikel sebelumnya kita sudah mencar ilmu ihwal beberapa mata pelajaran yang ada di sekolah  Mengenal HTML Dasar dan CSS Dasar
Contoh Kode HTML Menggunakan Sublime Text
Dan software terakhir yang paling umum dan banyak dipakai programmer dunia untuk menciptakan sebuah file HTML dan CSS dasar ialah Sublime Text. Sublime text juga software favorit saya dan saya gunakan hingga ketika ini, saya lebih menentukan sublime text sebab tampilannya yang gelap dan warna-warna arahan programnya yang lebih menarik. Sublime text juga merupakan software gratis.

Baca Juga

Mungkin masih banyak lagi software-software lainnya yang sanggup kau gunakan untuk menciptakan HTML dan CSS dasar, namun pada artikel kali ini  hanya menawarkan 3 saja dan mungkin nanti saya buatkan artikel yang khusus untuk membahas software arahan editor.

Tag, Attribut, dan Element Dalam HTML

1. Tag
Didalam HTML ada yang namanya tag HTML. Salah satu dari pola bentuk tag ialah sebagai berikut.

<p>Selamat tiba di </p>

Tag berfungsi untuk memberi tahu web browser yang kita gunakan untuk membuka dokumen HTML kita sehingga web browser tahu bagaimana sesuatu harus ditampilkan. Dalam HTML tersendiri kebanyakan tag memiliki pasangan, yaitu tag pembuka yang berbentuk <p> dan tag epilog yang berbentuk </p>. HTML memiliki sekitar 100 tag, tetapi tidak semuanya harus ditulis dan fungsinya sangat bermacam-macam. Pada pola diatas kita memberi tahu web browser untuk menampilkan sebuah paragraf yang didalamnya terdapat kalimat “Selamat tiba di “.
2. Attribut
Attribut ialah sebuah isu pemanis yang diletakkan pada tag pembuka. Fungsi dari attribut sendiri majemuk dan tergantung pada nilai yang diberikan serta di tag mana attribut tersebut ditempatkan. Namun, ada sebagian attribut yang sanggup dipakai pada banyak tag, attribut mirip ini biasa dikenal dengan istilah Global Attribut. Berikut ialah salah satu pola penerapan attribut pada tag p.

<p class=”satu”>Selamat datan di </p>

Secara umum dan global, attribut ditulis memakai kutip dua (“), tetapi kau juga sanggup memakai kutip satu atau bahkan tanpa memakai apapun. Namun, bila nilai yang diberikan pada attribut lebih dari satu kata maka diharuskan memakai kutip dua.
3. Element
Sementara element ialah seluruh cuilan utuh dari tag attribut dan semuanya yang berada didalam tag pembuka hingga tag penutupnya.

Struktur Dasar HTML

Setelah menentukan salah satu dari sekian banyaknya arahan editor dan mengetahui tag, elemen serta atribut dalam HTML, kini maka saatnya kita mencar ilmu untuk mengetahui struktur dasar atau arahan dasar sebuah file HTML. Baiklah, berikut ialah struktur dasar HTML.

<!DOCTYPE html>
<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<p>Saya sedang mencar ilmu HTML bersama </p>
</body>
</html>
Mari kita pelajari satu persatu baris arahan dari struktur dasar HTML diatas.
1. <!DOCTYPE html>
Ini ialah sebuah arahan yang mendeklarasikan sebuah tipe HTML yang digunakan. Dengan memakai arahan ini, berfungsi untuk memberi tahu kepada web browser bahwa file HTML tersebut ialah HTML5. Kamu sanggup mempelajari lebih lanjut ihwal baris arahan yang satu ini di internet sebab penjelasannya yang cukup panjang.
2. <html>
<html> ialah sebuah arahan wajib ketika ingin menciptakan file HTML dan menunjukan dimulainya penulisan dokumen HTML.
3. <head>
Dalam file HTML, terdapat dua bagian, yaitu cuilan <head> dan <body>. Tag <head> hingga </head> sanggup diisi dengan aneka macam tag yang berfungsi untuk memberi tahu aneka macam macam isu kepada web browser.
4. <title>
Tag <title> dalam baris arahan <head> berfungsi untuk menampilkan judul dari dokumen HTML tersebut.
5. </head>
</head> ialah tag epilog dari <head>
6. <body>
Baris arahan yang ditulis didalam tag <body> hingga </body> ialah yang akan ditampilkan pada web browser. Jadi, sanggup dibilang ini semua arahan yang berada didalam tag <body> ialah inti dari dokumen HTML.
7. <p>Saya sedang mencar ilmu HTML bersama </p>
Tag <p> ialah tag yang berfungsi untuk menampilkan teks sebagai paragraf
8. </body>
Tag epilog untuk <body>
9. </html>
Tag epilog untuk </html> dan menunjukan bahwa dokumen HTML berakhir.

Selector, Declaration, Property dan Value Dalam CSS

Setelah mempelajari dasar dari HTML diatas, maka kini saatnya kita mempelajari ihwal CSS nya. Sebagai contoh, perhatikan arahan CSS dibawah ini.

p {font-size: 16pt; color: blue;}

1. Selector
Selector dalam CSS dipakai untuk menemukan cuilan mana dari HTML kita yang akan diberikan style atau tampilan. Dalam pola ini, selector CSS diatas ialah tag “p”.
2. Declaration
Declaration ialah kumpulan perintah yang diberikan kepada selector CSS dan semua perintah declaration berada didalam kurung kurawal.
3. Property
Property ialah salah satu perintah yang terdapat didalam declaration CSS dan harus diberi value atau nilai semoga perintah tersebut sanggup diproses dan diterima oleh CSS. Dalam pola ini kita memakai property font-size yang berkhasiat untuk mengatur ukuran font pada semua tag “p” yang ada didalam dokumen HTML kita, dan property color yang berkhasiat untuk mengubah warna font pada semua tag “p”.
4. Value
Dan yang terakhir ialah value. Value ialah nilai yang diberikan kepada property CSS. Dalam pola ini value yang diberikan kepada property font-size ialah 16pt dan value untuk property color ialah blue.
Maka, arti perintah dari arahan CSS diatas ialah :

Temukan semua tag p yang ada didalam dokumen HTML dan ubah ukuran fontnya menjadi 16pt dan warna fontnya berwarna biru.

Oh ya, untuk menjalankan file HTML dan CSS nya, kau memerlukan sebuah browser atau peramban. Kamu sanggup memakai browser Google Chrome yang menjadi salah satu browser terfavorit ketika ini. Atau sanggup memakai browser lain mirip Mozilla Firefox dan Microsoft Edge.

Namun, ada beberapa arahan yang menampilkan tampilan yang berbeda untuk masing-masing browser. Ada juga arahan yang sudah memerlukan versi browser tertentu semoga berjalan dengan baik (browser-prefix). Untuk itu, saya sarankan semoga kau memakai browser Google Chrome yang versi terbaru saja. Untuk persoalan cara menjalankan file HTML dan klarifikasi lebih lanjut mengenai browser prefix maka akan dibahas pada artikel blog yang akan datang.

Dengan mempelajari HTML dasar dan CSS dasar diatas, saya rasa kau sudah cukup paham dan mengerti bagaimana caranya untuk menulis sebuah arahan baik HTML maupun CSS.

Tunggu artikel menarik lainnya ihwal pemrograman web hanya di .