Menerapkan gaya dan tata letak pada elemen HTML Menggunakan selektor, properti, dan nilai CSS

Dalam artikel sebelumnya, kita telah membahas tentang dasar-dasar HTML, termasuk struktur dasar, penggunaan tag, atribut, serta pembuatan tautan, gambar, dan tabel di halaman web. Sekarang, kita akan melanjutkan perjalanan kita dengan mempelajari CSS (Cascading Style Sheets) untuk menciptakan tampilan yang menarik dan desain web yang menawan. A. Memahami Konsep Dasar CSS CSS adalah bahasa yang digunakan untuk mengatur tampilan dan gaya elemen-elemen HTML di halaman web. Dengan CSS, Anda dapat mengubah warna, ukuran teks, tata letak, dan banyak aspek visual lainnya. Untuk memahami CSS dengan baik, ada beberapa konsep dasar yang perlu dipahami. Selektor: Selektor adalah cara untuk memilih elemen HTML yang akan diberi gaya. Misalnya, menggunakan selektor tag seperti p akan memilih semua elemen paragraf di halaman web. Ada juga selektor kelas (.) dan selektor ID (#) yang memungkinkan Anda memilih elemen berdasarkan kelas atau ID yang diberikan. Properti: Properti digunakan untuk mengatur a...

Bagaimana tag dan atribut pada HTML5


 

Assalamualaikum

Setelah pada artikel sebelumnya kita telah mengenal macam macam teknologi pada web programming kali ini kita akan membahas perkembangan html yaitu html5


Langsung aja simak beberapa materi berikut ini..

A. Definisi HTML5

HTML5 adalah bahasa markup standar untuk membangun halaman web dan aplikasi web. Dalam HTML5, penulisan sintaks diatur oleh aturan yang ketat yang harus diikuti, agar dokumen HTML dapat diakses dan diinterpretasikan dengan benar oleh browser web.

Sebelum lanjut silahkan check referensi web programming berikut ini :

Referensi Web Programming 

B. Contoh tag dan atribut pada HTML5

Berikut adalah beberapa contoh tag dan atribut yang sering digunakan dalam penulisan sintaks HTML5:

  • Tag <html> </html>
Tag ini adalah tag utama dalam HTML5 dan harus selalu ada di setiap dokumen HTML. Tag ini menandakan seluruh teks dalam dokumen HTML termasuk dalam bahasa markup HTML5.

  • Tag <head> </head>
Tag ini berisi metadata tentang dokumen HTML, seperti title, link ke file CSS, dan skrip JavaScript. Tag <head> </head> tidak akan ditampilkan di peramban web.

  • Tag <body> </body>
Tag ini berisi konten halaman web yang ditampilkan oleh peramban web. Semua tampilan yang ditampilkan di web browser harus ada di dalam tag body.

  • Tag <h1> </h1> sampai <h6> </h6>
Tag ini dipakai untuk memberi tampilan judul halaman. Ada enam tingkatan tag mulai h1 untuk judul utama, h2 untuk judul di bawah h1, dan seterusnya hingga h6. Contohnya dapat ditulis sebagai berikut:

<h1>Judul Utama</h1>
<h2>Judul Kedua</h2>

  • Tag <div> </div>
Tag div berguna untuk memisahkan area konten tertentu di halaman web. Biasanya tag ini dipakai untuk membuat layout halaman web. Contohnya dapat ditulis sebagai berikut:

<div id="header">
  <h1>Header</h1>
</div>

<div id="content">
  <p>Content</p>
</div>

<div id="footer">
  <p>Footer</p>
</div>

  • Atribut id dan class
Atribut id dapat diberikan pada tag apapun pada dokumen HTML, namun hanya bisa digunakan sekali. Atribut ini digunakan untuk memberi identitas pada elemen tertentu. Atribut class juga dapat diberikan pada tag apapun dan bisa digunakan berulang. Atribut ini digunakan untuk mengelompokkan beberapa elemen ke dalam satu kelas tertentu. Contoh penggunaan attribute id dan class dapat dituliskan seperti ini:

<div id="header" class="container">
  <h1>Header</h1>
</div>

<div id="content">
  <p>Content</p>
</div>

<div id="footer" class="container">
  <p>Footer</p>
</div>

Dengan menggunakan tag dan atribut di atas, seorang developer web HTML5 dapat membuat dokumen HTML dengan tampilan visual yang lebih baik dan lebih mudah dibaca oleh browser. Namun, perlu diingat bahwa penulisan sintaks yang benar sangatlah penting dalam pembuatan halaman web.

Komentar

Postingan populer dari blog ini

Web programming

contoh Penggunaan CSS Untuk Mempercantik Tampilan Website

Mengenal Dasar-dasar HTML untuk Web Programming