Belajar HTML & CSS

Selamat datang di dunia HTML & CSS

Kita akan membuat situs web yang ditampilkan pada gambar di bawah.

Kelihatannya mungkin sulit, namun jangan khawatir! .

Apa itu HTML & CSS?

Sebagian besar situs web dibuat dengan bahasa yang disebut HTML dan CSS. Dengan mempelajari dua bahasa ini, Anda akan dapat membuat situs web 

Cara Kerja HTML

Mari kita mulai pelajaran kita dengan HTML!

Aturan pertama penulisan code HTML adalah mengapit teks dengan tag. Tag dapat memberikan arti seperti judul atau tautan pada teks.

Tag pembuka danTag Penutup

Sebagian besar element HTML memerlukan sepasang tag, tag pembuka dan tag penutup, dengan teks disisipkan di antara keduanya.

Saat menggunakan tag penutup, pastikan untuk meletakkan /

Tag judul

Tag Judul digunakan untuk memformat element judul.

Tag ini bervariasi mulai dari <h1> hingga <h6>, <h1> menjadi yang terbesar dan <h6> menjadi yang terkecil (※ h mewakili heading (judul)).

Contoh :

<h1>Hello World</h1>

<a>ITBU</a>

Tag Paragraf

Tag <p> menentukan paragraf (※ p mewakili paragraf).

Teks yang diapit oleh tag seperti <h2> dan <p> dimulai di baris baru.

Komentar

Teks yang diapit oleh <!-- --> menjadi komentar.

Komentar tidak ditampilkan di browser. Komentar sangat berguna untuk menjelaskan code Anda.

Contoh :

<!-- Apit teks dengan tag <h1> -->

<h1>Selamat Datang di ITBU </h1>

<!-- Apit teks dengan tag <h2> -->

<h2>Tentang HTML</h2>

<!-- Apit teks dengan tag <p> -->

<p>HTML adalah singkatan dari HyperText Markup Language </p>

Tag Tautan

Anda dapat dengan mudah membuat tautan dengan tag <a> (※ a mewakili anchor (penambat)).

Teks dalam tag <a> ditampilkan di browser sebagai teks tautan.

Setiap tautan memiliki tujuan. Jadi, agar tautan berfungsi, Anda harus menentukan URL tujuan di element <a> dengan menambahkan atribut href. Seperti yang ditampilkan pada gambar di sisi kiri, URL tujuan masuk ke bagian url dari <a href="url">.

Atribut HTML

Pada HTML, Anda dapat menentukan atribut seperti href di tag pembuka .

Selalu letakkan nilai atribut dalam tanda kutip ganda ".

Contoh :

<!-- Tambahkan tautan yang menuju ke "https://kssi-itbu.blogspot.com" -->

<a href="https://kssi-itbu.blogspot.com">Ke Kumpulan Script</a>

<!-- Tambahkan tautan yang menuju ke "https://google.com" -->

<a href="https://google.com">Ke Google</a>

Tag Gambar

Tag <img> digunakan untuk menampilkan gambar.

Kita dapat menetapkan gambar dengan menentukan url di atribut src seperti berikut: <img src="url">. Perhatikan bahwa tag <img> tidak memerlukan tag penutup karena tidak ada teks yang diapit.

Contoh :

<!-- Tambahkan gambar menggunakan URL yang ditentukan -->

<img src="https://kssi-itbu.blogspot.com/html/beginner/school.jpg">

<!-- Tambahkan gambar menggunakan URL yang ditentukan -->

<img src="https://kssi-itbu.blogspot.com/images/html/beginner/school.jpg">

Daftar 

Anda dapat membuat daftar dengan mengapit teks dengan tag <li>.

Jenis daftar akan berubah tergantung pada tag yang Anda gunakan.

Dengan tag <ul> Anda dapat membuat daftar dengan bullet.

Jika element Anda "bersarang" seperti gambar dikiri bawah ini, element yang menutupi akan menjadi induk dan element yang ditutupi akan menjadi anak-nya.

Indentasi

Untuk element bersarang, praktik yang baik adalah mensejajarkan code dengan indentasi. Meskipun tidak diperlukan, indentasi dapat memudahkan Anda untuk melihat hubungan induk-anak, terutama pada saat code Anda sudah mulai banyak dan rumit

(※ untuk membuat indentasi, tekan tombol "tab" di awal baris).

Contoh :

<!-- Buatlah sebuah daftar dibawah -->

<ul>

<li>HTML</li>

<li>PHP</li>

<li>ITBU</li>

</ul>   

Apa itu CSS?

CSS digunakan untuk mendesain situs web. Dengan CSS, Anda dapat mengubah hal-hal seperti warna, ukuran, dan spasi pada element HTML. Gambar disisi kiri hanya terdiri dari HTML saja. Dengan menerapkan CSS, Anda dapat menentukan style seperti tata letak, sesuai contoh yang ditampilkan disisi kanan.

Cara Kerja CSS

CSS ditulis dalam file terpisah dari HTML. Anda dapat menerapkan CSS ke element HTML dengan menentukan "dimana", "apa", dan "bagaimana" Anda ingin mengubahnya. Pada contoh dibawah, CSS diterapkan ke element <h1> ("dimana"), dan warnanya ("apa") diubah menjadi merah ("bagaimana"). Element HTML yang ditargetkan disebut sebagai Selector.

Warna

Mari kita pelajari property color (warna)!

Di CSS, warna ditentukan oleh nilai heksadesimal seperti color: #ff0000;. Anda tidak perlu menghafal nilai heksadesimal warna tersebut, karena Anda dapat mencarinya secara online.

Sintax CSS

Ada beberapa hal yang harus diingat saat menulis CSS.

Seperti HTML, Anda harus selalu mengindentasi code CSS seperti gambar di bawah. Selain itu, perhatikan bahwa anda harus menambahkan titik dua : di akhir property CSS dan titik koma ; diakhir baris seperti gambar dibawah.

Komentar CSS

Seperti di HTML, Anda dapat menulis komentar di file CSS.

Namun di CSS, komentar harus diapit oleh /* */.

Contoh 

Pada halaman index.html

<h1>Hello World</h1>

<p>Ayo belajar coding</p>

Pada halaman stylesheetcss

h1 {

  /* Gantikan warna ke #ff0000 */

  color:#ff0000;

}

p {

  /* Gantikan warna ke #0000ff */

  color:#0000ff;

}

Ukuran Font

Ukuran font dapat ditetapkan dengan property font-size. Satuan umum untuk menentukan font-size adalah px (piksel).

Jenis Font

Dengan property font-family, Anda dapat menentukan jenis font. Anda dapat melakukan ini dengan menetapkanfont-family: nama font; Jika nama font berisi spasi, Anda harus mengapitnya dengan tanda petik ganda. Saat menetapkan property font-family, Anda dapat menentukan berbagai jenis font seperti serif dan sans-serif. Anda tidak perlu mengingat nama font karena anda bisa mencarinya secara online.

Contoh :

Pada halaman index.html

<h1>Hello World</h1>

<p>Ayo belajar coding</p>

Pada halaman stylesheetcss

h1 {

  color: #ff0000;

  /* Gantikan font-size ke 40px */

  font-size: 40px;

   /* Gantikan font-family ke serif */

 font-family:serif;

}

p {

  color: #0000ff;

  /* Gantikan font-size ke 20px */

  font-size: 20px;

  

  /* Gantikan font-family ke "Lucida Grande" */

  font-family:"Lucida Grande";

  

}

Warna Latar Belakang

Property background-color memungkinkan Anda untuk mengubah warna latar belakang. Anda dapat menetapkan warna latar belakang seperti menetapkan property color. Selain itu, jika huruf yang sama memanjang seperti #dddddd, ini dapat disingkat menjadi #ddd

Lebar dan Tinggi

Untuk mengubah lebar dan tinggi element, gunakan property width (lebar) dan height (tinggi). Unit kedua element ini dapat ditentukan dengan px, sama seperti font-size.

Contoh :

Pada halaman index.html

<h1>Hello World</h1>

<img src="https://kssi-itbu.blogspot.com/images/html/beginner/school.jpg">

Pada halaman stylesheetcss

h1 {

  color: #e6855e;

  font-size: 30px;

  /* Gantikan background-color ke #f3f372 */

  background-color:#f3f372;

  /* Gantikan height ke 80px */

  height: 80px;  

  /* Gantikan width ke 200px */

  width: 200px;

}

img {

  /* Gantikan height ke 50px */

  height:50px;

  

  /* Gantikan width ke 70px */

  width:70px;

}

Menerapkan CSS ke element tertentu

Jika ada beberapa element <li> di code Anda, menerapkan CSS seperti gambar dibawah akan mengubah semua element <li> menjadi merah. Jadi, bagaimana cara mengubah hanya satu element <li> menjadi merah?

Memberi Label Pada Tag

Anda dapat melakukannya dengan memberi label pada element yang ditargetkan dengan menggunakan atribut class. Dengan menambahkan class ke tag HTML, Anda dapat menerapkan CSS yang berbeda ke setiap element. Saat menerapkan CSS ke class selector, perhatikan bahwa titik . diperlukan di depan nama class.

Menerapkan CSS ke Beberapa Tag

Jika Anda menetapkan nama class yang sama kebeberapa element HTML, CSS yang sama akan diterapkan untuk semuanya.

Syntax untuk Class

Seperti disebutkan sebelumnya, nama selector class selalu dimulai dengan titik. Jika Anda lupa memberikan titik, CSS tidak akan diterapkan. Perhatikan bahwa selector class dimulai dengan titik, tetapi tag tidak demikian.

Pada halaman index.html

<h2>Pelajaran</h2>

<ul>

  <!-- Tambahkan class "selected" ke tag <li> yang pertama -->

  <li class="selected">HTML</li>

  <li>PHP</li>

  <li>Ruby</li>

</ul>

Pada halaman stylesheet.css

li {

  color: #444;

}

/* Gantikan warna "selected" ke #ff0000 */

.selected {

  color:red;

}

Thank You .............