Struktur dasar HTML dan CSS dalam Pemrograman WEB

Struktur dasar HTML dan CSS dalam Pemrograman WEB

  1. HTML

HTML yang merupakan singkatan dari Hyper Text Markup Language adalah serangkaian kode program yang merupakan dasar dari representasi visual sebuah halaman Web. Didalamnya berisi kumpulan informasi yang disimpan dalam tag-tag tertentu, dimana tag-tag tersebut digunakan untuk melakukan format terhadap informasi yang dimaksud. Berbagai pengembangan telah dilakukan terhadap kode HTML dan telah melahirkan teknologi-teknologi baru di dalam dunia pemrograman web.

Dengan demikian, sampai sekarang HTML tetap berdiri kokoh sebagai dasar dari bahasa web seperti PHP, ASP, JSP dan lainnya. Bahkan secara umum, mayoritas situs web yang ada di Internet pun masih tetap menggunakan HTML sebagai teknologi utama mereka. web.

  1. Struktur dasar HTML

Berikut Adalah Struktur Dasar HTML

Setiap tag buka harus diakhiri dengan tag tutup contoh tag <html> harus diakhiri dengan tag </html>, di dalam tag “title” berfungsi untuk penamaan halaman web yang akan muncul pada tab browser, di dalam tag body berfungsi untuk di berikan segala informasi yang akan di tampilkan kedalam halaman web

Keterangan

  • Deklarasi <!DOCTYPE html> mendefinisikan bahwa dokumen ini adalah dokumen HTML5
  • Tag <html> adalah elemen yang menjadi akar halaman HTML
  • Tag <head> adalah elemen yang berisi informasi meta tentang halaman HTML
  • Tag <title> adalah elemen yang  menentukan judul untuk halaman HTML (yang ditampilkan dalam bar judul browser atau tab halaman ini)
  • Tag <body> adalah elemen mendefinisikan tubuh dokumen, dan merupakan wadah untuk semua isi terlihat, seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll
  • Struktur yang boleh ada di dalam tag body
    • Atribut

Semua elemen HTML dapat memiliki atribut

  1. atribut  href dari tag <a> Menentukan URL halaman link pergi ke
  2. atribut  src dari tag <img> menentukan path ke gambar yang akan ditampilkan
  3. atribut  width dan height dari tag <img> memberikan informasi ukuran untuk gambar
  4. atribut  alt dari tag <img> menyediakan teks alternatif untuk gambar
  5. atribut  style digunakan untuk menambah gaya untuk elemen, seperti warna, font, ukuran, dan lainnya
  6. atribut  lang dari <html>tag menyatakan bahasa halaman Web
  7. atribut  title mendefinisikan beberapa informasi tambahan tentang elemen
  8. kode <–!ini adalah teks komen–> berikut adalah tambahan yang bias di pakainuntuk menandai suatu kode pemrograman tanpa ikut di tampilkan di browser
  1. Teks
  • Heading

Ada 6 Heading dalam HTML yaitu

  1. Tag .<h1> contoh <h1>Heading 1</h1>
  2. Tag .<h1> contoh <h2>Heading 2</h2>
  3. Tag .<h1> contoh <h3>Heading 3</h3>
  4. Tag .<h1> contoh <h4>Heading 4</h4>
  5. Tag .<h1> contoh <h5>Heading 5</h5>
  6. Tag .<h1> contoh <h6>Heading 6</h6>
  • Paragraf
    • Tag <p> Menampilkan teks sebaris
    • Tag <hr> Menambahkan garis horizontal, tag ini tidak memiliki penutup
    • Tag <br> Menambahkan Baris atau “Enter” tag ini tidak memiliki penutup
    • Tag<pre> Menampilkan teks dengan tetap mempertahankan spasi atau baris yang kita buat tanpa menambahkan tag <br> pada code pemrograman
  • Gaya

Gunakanlah atribut style untuk menambahkan gaya pada elemen HTML tetapi sangat di sarankan menggunakan CSS untuk mengubahgaya pada isi HTML tetapi menambahkan gaya secara langsung pada HTML juga bias dengan menambahkan beberapa tambahan dengan format “tag buka style=”kode:jenisnya;” teks yang akan di tampilkan dengan gaya tag tutup” contoh <p style=”color:blue;”> teks ini berwarna biru p>

berikut beberapa kode pemrograman untuk menambahkan gaya yaitu :

  • Gunakanlah kode background-color:warna untuk warna latar belakang
    • Gunakanlah kode color:warna untuk warna teks
      • Gunakanlah kode font-family:font untuk font teks
      • Gunakanlah kode font-size:ukuran untuk ukuran teks
      • Gunakanlah kode text-align:rata kiri untuk perataan teks
  • Formulir

Bisa memakai teks, radio, checkbox, submit atau butto

  • CSS

CSS adalah singkatan dari Cascading Style Sheets CSS menjelaskan bagaimana elemen HTML ditampilkan di layar, kertas, atau di media lain CSS menghemat banyak pekerjaan. Itu dapat mengontrol tata letak beberapa halaman web sekaligus Stylesheet eksternal disimpan dalam file CSS

  1. Syntax CSS

Contoh:

  • “p” adalah pemilih di CSS (menunjuk ke elemen HTML yang ingin Anda beri gaya: yaitu tag <p>).
  • “color” adalah properti, dan “red” merupakan nilai properti
  • “text-align” adalah properti, dan “center” merupakan nilai properti

Daftar Pustaka

Analisa dan Desain Sistem Bimbingan Tugas Akhir Berbasis Web dengan Studi Kasusm Fakultas Teknologi Informasi (Frederick Constantianus, Bernard Renaldy Suteja)

https://www.w3schools.com/.diakses pada 11 november 2021

Muhammad Sulhanul Hilma

-

You may also like...

Leave a Reply

Your email address will not be published.