Pengantar Logika : Kerancuan Berpikir dan Jenisnya

Pemrograman Berbasis Web : HTML 2 dan HTML Selector

HTML Layout

HTML Container

Dalam pengembangan web, kita sering menggunakan dua tag HTML generik yang tidak memiliki tujuan atau gaya tertentu:

<div> : Merupakan elemen blok generik
 
<span> : Merupakan elemen inline generik
 

Elemen <div> digunakan untuk membuat blok besar yang dapat mengelilingi sejumlah elemen lain, menciptakan area terpisah dalam dokumen HTML. Ini biasanya digunakan untuk mengelompokkan elemen-elemen ke dalam divisi atau bagian tertentu dalam halaman web.

Elemen <span> adalah elemen inline generik yang digunakan untuk memformat atau menandai sebagian kecil teks atau elemen dalam suatu dokumen. Ini adalah pilihan yang berguna ketika Anda ingin menerapkan gaya atau pemformatan khusus pada sebagian kecil teks dalam suatu paragraf atau elemen lainnya.

Kedua elemen ini memberikan fleksibilitas dalam merancang dan memformat halaman web Anda, dan Anda dapat mengkombinasikan mereka dengan CSS (Cascading Style Sheets) untuk mencapai tampilan dan gaya yang diinginkan.

HTML <div> Element

Elemen <div> adalah elemen tingkat blok yang sering digunakan sebagai wadah untuk elemen HTML lainnya. Ketika digunakan bersama dengan CSS, elemen <div> dapat digunakan untuk mengubah gaya blok konten.

Elemen <div> adalah elemen HTML yang sering digunakan dalam pembuatan tata letak dan pengaturan halaman web. Ini adalah elemen kosong yang digunakan untuk mengelompokkan dan memadatkan elemen-elemen lain dalam suatu wadah. Anda dapat memberikan atribut class dan id ke elemen <div> ini untuk memberikan penandaan atau menghubungkannya dengan gaya tertentu. Ini memberikan fleksibilitas yang besar dalam desain dan penataan elemen-elemen di dalam halaman web Anda.

Ketika Anda menggabungkan elemen <div> dengan CSS, Anda dapat dengan mudah mengubah tampilan dan gaya blok konten. Anda dapat menentukan warna latar belakang, ukuran teks, jarak antar elemen, dan banyak lagi. Dengan menggunakan elemen <div>, Anda dapat menciptakan tampilan halaman web yang menarik dan terstruktur dengan baik.

HTML <span> Element

Elemen <span> merupakan elemen inline yang sering digunakan sebagai wadah untuk beberapa teks. Elemen <span> tidak memiliki atribut wajib, namun gaya dan kelas adalah umum. Ketika digunakan bersama dengan CSS, elemen <span> dapat digunakan untuk mengubah gaya bagian-bagian teks.

Multiple generic containers

Tapi seringkali kita membutuhkan beberapa kontainer generik, bukan begitu? Bagaimana kita membedakan dua kontainer generik? Dengan kata lain, bagaimana kita memilih sebagian elemen daripada seluruh elemen di halaman?

Solusi: Menggunakan Pengidentifikasi HTML (HTML ID and Class)

HTML id and class

Ada kalanya dalam pengembangan web ketika kita harus bekerja dengan lebih dari satu kontainer generik pada halaman. Ini bisa menjadi tantangan, terutama ketika kita ingin memanipulasi atau berinteraksi dengan kontainer tertentu tanpa memengaruhi yang lain. Bagaimana kita menyelesaikan masalah ini?

Salah satu cara yang efektif adalah dengan menggunakan pengidentifikasi HTML, seperti ID atau class. Dengan menambahkan ID atau kelas unik ke kontainer generik Anda, Anda dapat dengan mudah mengidentifikasi dan merujuk kontainer tersebut dalam kode Anda.

Setiap elemen HTML juga dapat memiliki atribut kelas. Kadang-kadang, daripada mengidentifikasi secara unik satu elemen dalam dokumen, kita ingin cara untuk mengidentifikasi beberapa elemen sebagai berbeda dari elemen-elemen lain di halaman.

Misalnya, jika Anda memiliki dua kontainer div generik, Anda dapat memberikan ID unik kepada masing-masing, seperti "kontainer1" dan "kontainer2". Kemudian, dalam kode JavaScript atau CSS Anda, Anda dapat dengan mudah merujuk ke kontainer tertentu dengan menggunakan ID ini.

Ini memberi Anda kendali lebih besar atas elemen-elemen dalam kontainer tersebut, memungkinkan Anda untuk melakukan operasi yang sesuai tanpa memengaruhi elemen-elemen di kontainer lain.

Jadi, penggunaan pengidentifikasi HTML seperti ID adalah salah satu cara yang berguna untuk mengelola beberapa kontainer generik pada halaman web Anda. Dengan menggunakannya dengan bijak, Anda dapat menjaga kode Anda tetap terorganisir dan memudahkan pemeliharaan di masa depan.

HTML id and class attribute

Kita ingin memberikan gaya yang berbeda pada satu paragraf dalam halaman tersebut (mungkin paragraf yang berisi kutipan) dibandingkan dengan semua paragraf lainnya. Kita juga memiliki beberapa paragraf teks yang berisi informasi yang lebih penting daripada yang lain dan ingin membedakan elemen-elemen ini. Kita ingin membedakan antara tautan yang mengarah ke halaman lain di situs kami dan tautan yang mengarah ke situs eksternal.

Kelas dan ID adalah atribut HTML khusus yang dapat digunakan pada setiap elemen HTML.

• Kelas: Digunakan pada 1 atau lebih elemen; mengidentifikasi kumpulan elemen.
• ID: Digunakan pada tepat 1 elemen per halaman; mengidentifikasi satu elemen unik.

Anda dapat mengaplikasikan beberapa kelas dengan cara memisahkan mereka dengan spasi: <span class="hw baru">HW1</span>

HTML Layout

Why not <div> everywhere ?

Secara teknis, Anda dapat mendefinisikan seluruh halaman web Anda menggunakan elemen <div> dan atribut class.

1.  Apakah ini merupakan ide yang baik?
2.  Mengapa HTML memiliki id ketika Anda memiliki class?
3.  Mengapa HTML memiliki elemen <p>, <h1>, <strong>, dan sebagainya ketika Anda memiliki <div>, <span>, class, dan id?

Anda dapat menggunakan <div> dan atribut class untuk membangun seluruh struktur halaman web Anda. Namun, apakah ini ide yang baik? Jawabannya tergantung pada kompleksitas dan kebutuhan proyek Anda.

1. Apakah ini merupakan ide yang baik?

Menggunakan <div> dan class untuk menggambarkan halaman web Anda bisa menjadi ide yang baik dalam beberapa situasi. Ini memberikan fleksibilitas besar dalam merancang tampilan dan tata letak. Namun, harus diingat bahwa penggunaan yang berlebihan atau tidak terorganisir dari <div> dan class dapat membuat kode sulit dipahami. Itu sebabnya HTML memiliki elemen khusus seperti <p> untuk teks, <h1> untuk judul, dan <strong> untuk teks tebal. Ini membantu dalam semantik dan memahami konten.

2. Mengapa HTML memiliki id ketika Anda memiliki class?
   HTML memiliki id untuk mengidentifikasi elemen secara unik dalam halaman. Id digunakan ketika Anda ingin merujuk ke elemen tertentu menggunakan JavaScript atau CSS. Kelas (class) digunakan untuk mengelompokkan elemen yang memiliki karakteristik atau gaya yang serupa. Jadi, meskipun Anda dapat menggunakan class untuk memilih beberapa elemen sekaligus, id memberikan cara yang lebih spesifik untuk merujuk ke satu elemen tunggal.

3. Mengapa HTML memiliki elemen <p>, <h1>, <strong>, dan sebagainya ketika Anda memiliki <div>, <span>, class, dan id?
   HTML memiliki elemen semantik seperti <p> untuk menunjukkan paragraf, <h1> untuk menunjukkan judul utama, <strong> untuk menunjukkan teks yang ditebalkan, dan banyak lainnya. Ini adalah elemen yang membantu dalam memberikan makna kepada konten. Meskipun Anda bisa menggunakan <div> dan <span> untuk mengelompokkan dan menggaya elemen, elemen semantik memungkinkan browser dan mesin pencari memahami struktur dan arti dari konten Anda dengan lebih baik. Ini mendukung aksesibilitas web yang lebih baik dan meningkatkan SEO.

HTML Layout Using HTML 5

HTML5 menawarkan elemen-elemen semantik baru yang mendefinisikan berbagai bagian dari halaman web:

1. <main> adalah untuk konten yang unik untuk halaman ini. Gunakan <main> hanya sekali per halaman, dan letakkan langsung di dalam <body>. Idealnya, ini seharusnya tidak bersarang di dalam elemen lain.
2. <article> mengelilingi blok konten terkait yang masuk akal untuk berdiri sendiri tanpa bagian lain dari halaman (misalnya, satu posting blog).
3. <section> mirip dengan <article>, tetapi lebih untuk mengelompokkan satu bagian dari halaman yang merupakan satu bagian fungsionalitas (misalnya, peta mini atau satu set judul dan ringkasan artikel). Sebaiknya dimulai dengan judul di setiap bagian.
4. <aside> berisi konten yang tidak secara langsung terkait dengan konten utama tetapi dapat memberikan informasi tambahan yang terkait secara tidak langsung (entri glosari, biografi penulis, tautan terkait, dll.).
5. <header> mewakili sekelompok konten pengantar. Jika itu adalah anak dari <body>, itu mendefinisikan header global dari sebuah halaman web, tetapi jika itu adalah anak dari <article> atau <section>, itu mendefinisikan header khusus untuk bagian tersebut (usahakan untuk tidak bingung ini dengan judul dan kepala).
6. <nav> berisi fungsi navigasi utama untuk halaman. Tautan sekunder, dll., tidak akan dimasukkan dalam navigasi.
7. <footer> mewakili sekelompok konten akhir untuk sebuah halaman.

IFrames

 

Sebuah iframe bisa diibaratkan sebagai jendela kecil yang telah dimasukkan ke dalam halaman Anda — dan dalam jendela tersebut, kita dapat melihat halaman lain. Istilah 'iframe' adalah singkatan dari 'inline frame.' Salah satu penggunaan umum iframe adalah untuk menyematkan peta Google ke dalam sebuah halaman. Konten dalam iframe dapat berupa halaman HTML apa pun (entah itu berada di server yang sama atau di mana saja di web).

Sebuah iframe dibuat menggunakan elemen <iframe>. Ada beberapa atribut penting:

1. src: Atribut src menentukan URL halaman yang ingin kita tampilkan dalam iframe.
2. height: Atribut height menentukan tinggi iframe dalam piksel.
3. width: Atribut width menentukan lebar iframe dalam piksel.
4. scrolling: Scrollbar memungkinkan pengguna untuk bergerak di dalam bingkai untuk melihat lebih banyak konten. Ini bisa memiliki tiga nilai: yes (untuk menampilkan scrollbar), no (untuk menyembunyikan scrollbar), dan auto (untuk menampilkannya hanya jika diperlukan).
5. frameborder: Ini menunjukkan apakah bingkai harus memiliki batas. Nilai 0 (nol) menunjukkan bahwa tidak ada batas yang akan ditampilkan, sementara nilai 1 (satu) menunjukkan bahwa akan ada batas.
6. seamless: Atribut 'seamless' bisa diterapkan pada sebuah iframe untuk membuatnya terlihat seolah-olah itu adalah bagian dari dokumen yang memuatnya."

HTML DOM

Document Object Model

Accessing and changing the HTML page

DOM (Document Object Model) mendefinisikan properti dan metode untuk mengakses dan mengubah setiap objek dalam model ini. Akibatnya, apa yang pengguna lihat di jendela peramban diperbarui. DOM adalah API (Antarmuka Pemrograman Aplikasi) - ini memungkinkan peramban dan program JavaScript atau CSS Anda berkomunikasi satu sama lain.

 

• DOM menyatakan apa yang skrip Anda dapat tanyakan kepada peramban tentang halaman saat ini. 
• DOM juga menyatakan bagaimana skrip Anda dapat memberi tahu peramban untuk memperbarui apa yang ditampilkan kepada pengguna.

Selector

Terdapat berbagai jenis selektor yang memungkinkan Anda untuk mengarahkan aturan ke elemen-elemen tertentu dalam dokumen HTML. Selektor bersifat case sensitive, sehingga mereka harus sesuai dengan nama elemen dan nilai atribut secara tepat.

Ada banyak jenis selektor yang berbeda yang memungkinkan Anda untuk menargetkan aturan ke elemen-elemen tertentu dalam dokumen HTML. Selektor bersifat case sensitive, sehingga mereka harus sesuai dengan nama elemen dan nilai atribut secara tepat.

Grouping selectors

Apa yang dipilih oleh pernyataan ini?

#main li.important strong {

warna: merah;

}

Baca dari kanan ke kiri:

<strong> tag yang merupakan anak dari tag <li> yang memiliki kelas "important" yang merupakan anak dari elemen dengan id "main."

Pada pernyataan ini, kita mendefinisikan gaya atau tampilan untuk elemen HTML yang memenuhi kriteria yang dijelaskan di dalamnya. Mari kita jabarkan lebih detail:

1. #main merujuk pada elemen dengan atribut id "main." Ini adalah elemen yang memiliki ID khusus "main."

2. li.important merujuk pada elemen-elemen <li> yang memiliki kelas "important." Ini berarti kita memilih elemen-elemen yang adalah anak dari elemen-elemen <li> yang memiliki kelas "important."

3. strong merujuk pada elemen-elemen <strong>, yang pada dasarnya adalah teks yang ditebalkan.

4. color: red; adalah gaya yang akan diterapkan pada elemen-elemen yang memenuhi kriteria di atas. Dalam hal ini, warna teks akan diubah menjadi merah.

Jadi, pernyataan ini mengatakan bahwa semua elemen <strong> yang berada dalam elemen-elemen <li> dengan kelas "important" yang berada dalam elemen dengan ID "main" akan memiliki warna teks merah.

2 Common bugs Selector

 

p.abc vs p .abc 

 

Sebuah elemen <p> dengan kelas abc vs Sebuah elemen dengan kelas abc yang turun dari <p>. Perbedaan antara elemen <p> yang memiliki kelas abc dan elemen dengan kelas abc yang berada di dalam elemen <p> adalah sebagai berikut:

• "p.abc" mengacu pada elemen <p> dengan langsung memiliki kelas "abc". Artinya, elemen tersebut memiliki kelas "abc" secara eksklusif.
•  "p .abc" mengacu pada elemen dengan kelas "abc" yang berada di dalam elemen <p>. Ini berarti elemen tersebut merupakan turunan dari elemen <p> dan tidak harus memiliki kelas "abc" secara eksklusif; elemen <p> yang mengandungnya adalah elemen yang harus memiliki kelas "abc".

p .abc vs p, .abc 

 

Sebuah elemen dengan kelas abc yang turun dari <p> vs Semua elemen <p> dan semua elemen dengan kelas abc. Perbedaan antara elemen dengan kelas abc yang turun dari elemen <p> dan semua elemen <p> serta semua elemen dengan kelas abc adalah sebagai berikut:

• "p .abc" mengacu pada elemen yang memiliki kelas "abc" dan berada di dalam elemen <p>. Ini berarti elemen tersebut harus merupakan turunan dari elemen <p> dan memiliki kelas "abc".
• "p, .abc" mengacu pada semua elemen <p> dan semua elemen dengan kelas "abc". Ini tidak memerlukan elemen <p> tersebut memiliki kelas "abc"; semua elemen <p> dan elemen dengan kelas "abc" akan dipilih.

 

Other selector

https://www.w3schools.com/cssref/css_selectors.asp

• Useful selector (subjective) : 
• [attribute=value] 
• :active 
• :hover 
• :disabled 
• :not(selector) 
• :first-child 
• :last-child 
• :nth-child(n)
 

Extra : Inside <head>

• title : metadata that represents the title of the overall HTML document 
• example : <title>My test page</title> 
• specify encoding 
• example : <meta charset="utf-8"> 
• author and description 
• example: <meta name="author" content="Chris Mills"> 
• <meta name="description" content="The MDN Web Docs site ......"> 
• Keyword 
• example : <meta name="keywords" content="HTML, CSS, XML, JavaScript">
• Icon 
• example : <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> 
• Language 
• example : <html lang="en-US"> 
• Other metadata 
• Facebook Open Graph Data 
• Twitter

Sumber

https://www.w3schools.com/html

https://www.w3schools.com/cssref/trysel.asp 

https://www.w3schools.com/css:

Slide PBW : HTML 2

http://informatika.unpar.ac.id/