Free code camp Html (New) Responsive Web Design | Building CatPhotoApp (step 1-69)

Dalam Sertifikasi Desain Web Responsif ini, Anda akan mempelajari bahasa yang digunakan developer untuk membuat halaman web: HTML (Hypertext Markup Language) untuk konten, dan CSS (Cascading Style Sheets) untuk desain.

Pertama, Anda akan membuat aplikasi foto kucing untuk mempelajari dasar-dasar HTML dan CSS. Nanti, Anda akan mempelajari teknik modern seperti variabel CSS dengan membuat penguin, dan praktik terbaik untuk aksesibilitas dengan membuat situs kuis.

Terakhir, Anda akan mempelajari cara membuat halaman web yang merespons ukuran layar berbeda dengan membuat galeri foto menggunakan Flexbox, dan tata letak artikel majalah dengan CSS Grid.

Tag HTML memberi halaman web strukturnya. Anda dapat menggunakan tag HTML untuk menambahkan foto, tombol, dan elemen lain ke halaman web Anda.
Dalam kursus ini, Anda akan mempelajari tag HTML yang paling umum dengan membuat aplikasi foto kucing Anda sendiri.

(TAG HEADING)

Langkah 1

Elemen HTML memiliki tag pembuka seperti <h1> dan tag penutup seperti </h1>.

Teks untuk suatu elemen berada di antara tag pembuka dan penutupnya.

Gunakan elemen h1 dan ubah teksnya menjadi:

Aplikasi Foto Kucing CatPhotoApp

<html>

<body>

<h1>CatPhotoApp</h1>

</body>

</html>

Langkah 2

Elemen heading h1 hingga h6, digunakan untuk menandakan pentingnya konten di bawahnya. Semakin rendah angkanya, semakin tinggi tingkat kepentingannya, sehingga elemen h2 kurang penting dibandingkan elemen h1. Hanya gunakan satu elemen h1 per halaman dan tempatkan judul dengan kepentingan lebih rendah di bawah judul dengan kepentingan lebih tinggi.
Elemen h1 s/d h6 berada dalam elemen body.
Di bawah elemen h1, tambahkan elemen h2 dengan teks ini:

Foto kucing Cat Photos

<html>

<body>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

</body>

</html>

PARAGRAPH

Langkah 3

Elemen p digunakan untuk membuat paragraf teks di situs web. Buat elemen p di bawah elemen h2 Anda dan berikan teks berikut:

Lihat lebih banyak foto kucing di galeri kami.

See more cat photos in our gallery

<html>

<body>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more cat photos in our gallery</p>

</body>

</html>

KOMENTAR

Langkah 4

Mengomentari memungkinkan Anda meninggalkan pesan tanpa mempengaruhi tampilan browser. Ini juga memungkinkan Anda membuat kode tidak aktif. Komentar dalam HTML dimulai dengan .

Misalnya, komentar  berisi teks TODO: Hapus h1.
Tambahkan komentar di atas elemen p dengan teks ini:

TODO: Tambahkan tautan ke foto kucing

TODO: Add link to cat photos

<html>

<body>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more cat photos in our gallery</p>

</body>

</html>

Fungsi main untuk identifikasi konten agar mudah dibaca dan di akses SEO, posisi main masih ada di dalam body.

Langkah 5

HTML5 memiliki beberapa elemen yang mengidentifikasi area konten yang berbeda. Elemen-elemen ini membuat HTML Anda lebih mudah dibaca dan membantu Search Engine Optimization (SEO) dan aksesibilitas.

Identifikasi bagian utama halaman ini dengan menambahkan tag pembuka <main> sebelum elemen h1, dan tag penutup </main> setelah elemen p.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more cat photos in our gallery</p>

</main>

</body>

</html>

Langkah 6

Pada langkah sebelumnya, Anda meletakkan elemen h1, h2, komentar, dan p di dalam elemen utama (main). Ini disebut bersarang(nested). Elemen bersarang harus ditempatkan dua spasi lebih jauh di sebelah kanan elemen tempat mereka bersarang. Spasi ini disebut indentasi dan digunakan untuk membuat HTML lebih mudah dibaca.

Elemen h1, elemen h2 dan komentar diindentasi dua spasi lebih banyak dari elemen utama (main) pada kode di bawah ini. Gunakan bilah spasi pada keyboard Anda untuk menambahkan dua spasi lagi di depan elemen p sehingga menjorok dengan benar juga.

Langkah 7

Anda dapat menambahkan gambar ke situs web Anda dengan menggunakan elemen img. Elemen img memiliki tag pembuka tanpa tag penutup. Tag untuk elemen tanpa tag penutup dikenal sebagai tag penutup sendiri.

Tambahkan elemen img di bawah elemen p. Pada titik ini, tidak ada gambar yang akan muncul di browser.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more cat photos in our gallery</p>

<img/>

</main>

</body>

</html>

Langkah 8

Atribut HTML adalah kata-kata khusus yang digunakan di dalam tag pembuka elemen untuk mengontrol perilaku elemen. Atribut src dalam elemen img menentukan URL gambar (tempat gambar berada).

Berikut adalah contoh elemen img dengan atribut src yang menunjuk ke logo freeCodeCamp:

Di dalam elemen img yang ada, tambahkan atribut src dengan URL ini:

https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more cat photos in our gallery</p>

</main>

</body>

</html>

Langkah 9

Semua elemen img harus memiliki atribut alt. Teks atribut alt digunakan untuk pembaca layar guna meningkatkan aksesibilitas dan ditampilkan jika gambar gagal dimuat. Misalnya, <img src="cat.jpg" alt="Seekor kucing"> memiliki atribut alt dengan teks A cat.

Di dalam elemen img, tambahkan atribut alt dengan teks ini:

Seekor kucing oranye lucu berbaring telentang

A cute orange cat lying on its back

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more cat photos in our gallery</p>

</main>

</body>

</html>

Langkah 10

Anda dapat menautkan ke halaman lain dengan elemen jangkar (a). Misalnya, <a href='https://freecodecamp.org'></a> akan ditautkan ke freecodecamp.org.

Tambahkan elemen jangkar setelah paragraf yang tertaut ke https://freecatphotoapp.com. Pada titik ini, tautan tidak akan muncul di pratinjau.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more cat photos in our gallery</p>

       <a href="https://freecatphotoapp.com"></a>  

</main>

</body>

</html>

Langkah 11

Teks tautan harus ditempatkan di antara tag pembuka dan penutup elemen jangkar/anchor element (a). Misalnya,

<a href="https://www.freecodecamp.org">klik di sini untuk membuka freeCodeCamp.org</a> adalah tautan dengan teks klik di sini untuk membuka freeCodeCamp.org.

Tambahkan tautan teks jangkar ke gambar kucing ke elemen jangkar. Ini akan menjadi teks tautan.

link to cat pictures

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

cat photos </a> in our gallery</p>

       <a href="https://freecatphotoapp.com">link to cat pictures
       </a>  

</main>

</body>

</html>

Langkah 12

Pada langkah sebelumnya Anda mengubah tautan kata ke gambar kucing menjadi tautan dengan menempatkannya di antara tag jangkar (a) pembuka dan penutup. Anda dapat melakukan hal yang sama pada kata-kata di dalam elemen, seperti elemen p.

Dalam teks elemen p Anda, ubah kata-kata foto kucing menjadi tautan ke https://freecatphotoapp.com dengan menambahkan tag jangkar (a) pembuka dan penutup di sekitar kata-kata ini.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

cat photos</a> in our gallery</p>

       <a href="https://freecatphotoapp.com">link to cat pictures
       </a>  

</main>

</body>

</html>

Langkah 13

Sekarang setelah Anda mengubah teks foto kucing di dalam elemen p menjadi tautan, Anda tidak memerlukan tautan kedua di bawah elemen p. Hapus seluruh elemen jangkar di bawah elemen p.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

cat photos</a> in our gallery</p>

       <img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/>  

</main>

</body>

</html>

Langkah 14

Tambahkan atribut target dengan nilai _blank ke tag pembuka elemen jangkar (a), sehingga tautan terbuka di tab baru.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

       <img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/>  

</main>

</body>

</html>

Langkah 15

Pada langkah sebelumnya Anda menggunakan elemen jangkar untuk mengubah teks menjadi tautan. Jenis konten lain juga dapat diubah menjadi tautan dengan membungkusnya dalam tag jangkar.

Ubah gambar menjadi tautan dengan mengelilinginya dengan tag elemen yang diperlukan. Gunakan https://freecatphotoapp.com sebagai nilai atribut href dari anchor.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

       <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</main>

</body>

</html>

Elemen section bisa digunakan untuk memisahkan konten photo dengan konten berikutnya.

Langkah 16

Sebelum menambahkan konten baru, Anda harus menggunakan elemen bagian<section> untuk memisahkan konten foto kucing dari konten mendatang.
Ambil elemen h2, komentar, p, dan jangkar (a) Anda dan tempatkan di elemen bagian.<section>.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

       <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</section>

</main>

</body>

</html>

Langkah 17

Saatnya untuk menambahkan bagian baru. Tambahkan elemen bagian kedua di bawah elemen bagian yang ada.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

          <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</section>

</section>

</main>

</body>

</html>

Langkah 18

Di dalam elemen bagian kedua, tambahkan elemen h2 baru dengan teks Cat Lists.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

         <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</section>

<h2>Cat Lists</h2>

</section>

</main>

</body>

</html>

Langkah 19

Saat Anda menambahkan elemen judul dengan peringkat lebih rendah ke halaman, ini menyiratkan bahwa Anda memulai subbagian baru.
Setelah elemen h2 terakhir dari elemen bagian kedua, tambahkan elemen h3 dengan teks ini:

Hal-hal yang disukai kucing:

Things cats love:

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

           <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</section>

<h2>Cat Lists</h2>

<h3>Things cats love</h3>

</section>

</main>

</body>

</html>

Langkah 20

Setelah elemen h3 dengan hal-hal yang disukai kucing: teks, tambahkan elemen unordered list (ul). Perhatikan bahwa tidak ada yang akan ditampilkan pada saat ini.

Langkah 21

Gunakan elemen (list item) item daftar (li) untuk membuat item dalam daftar. Berikut adalah contoh item daftar dalam daftar yang tidak diurutkan:

<ul>
   <li>milk</li>
   <li>cheese</li>
</ul>

Di dalam sarang (nest) elemen ul, tiga item daftar untuk menampilkan tiga hal yang disukai kucing:

cat nip , laser pointers,   lasagna

<ul>

<li>laser pointers</li>

<li>lasagna</li>

</ul>

Langkah 22

Setelah daftar unordered, tambahkan gambar baru dengan nilai atribut src diatur ke:

https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg

Dan nilai atribut alt ke:

Sepotong lasagna di atas piring.

A slice of lasagna on a plate.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

         <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</section>

<h2>Cat Lists</h2>

<h3>Things cats love</h3>

<ul>

<li>laser pointers</li>

<li>lasagna</li>

</ul>

         <img src="https://cdn.freecodecamp.org/curriculum/
                   cat-photo-app/lasagna.jpg" 
                   alt="A slice of lasagna on a plate">

</section>

</main>

</body>

</html>

Langkah 23

Elemen Figure mewakili konten mandiri dan memungkinkan Anda mengaitkan gambar dengan keterangan (caption).
Sarangkan (Nest) gambar yang baru saja Anda tambahkan di dalam elemen Figure.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

       <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</section>

<h2>Cat Lists</h2>

<h3>Things cats love</h3>

<ul>

<li>laser pointers</li>

<li>lasagna</li>

</ul>

            <img src="https://cdn.freecodecamp.org/curriculum/
                      cat-photo-app/lasagna.jpg" 
                 alt="A slice of lasagna on a plate">
         </figure> 

</section>

</main>

</body>

</html>

Langkah 24

Elemen keterangan gambar (figcaption) digunakan untuk menambahkan keterangan untuk mendeskripsikan gambar yang terdapat di dalam elemen gambar. Misalnya, <figcaption>Kucing yang lucu</figcaption> menambahkan teks Kucing yang lucu.
Setelah gambar bersarang di elemen gambar, tambahkan elemen figcaption dengan set teks ke:

Kucing suka lasagna.

Cats love lasagna.

<html>

<body>

<main>

<h1>CatPhotoApp</h1>

<h2>Cat Photos</h2>

<p>See more <a href="https://freecatphotoapp.com"

target="_blank">cat photos</a> in our gallery</p>

       <a href="https://freecatphotoapp.com" target="_blank"><img src= "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = " A cute orange cat lying on its back"/></a>  

</section>

<h2>Cat Lists</h2>

<h3>Things cats love</h3>

<ul>

<li>laser pointers</li>

<li>lasagna</li>

</ul>

         <img src="https://cdn.freecodecamp.org/curriculum/
                      cat-photo-app/lasagna.jpg" 
                 alt="A slice of lasagna on a plate">
     <figcaption>Cats <em>love</em> lasagna</figcaption> 
     </figure> 
      <h3>Top 3 things cats hate</h3> 

</section>

</main>

</body>

</html>

Langkah 25

Tekankan kata cinta pada elemen figcaption dengan membungkusnya dalam elemen penekanan em.

<figcaption>Cats <em>love</em> lasagna</figcaption>

Langkah 26

Setelah elemen Figure, tambahkan elemen h3 lainnya dengan teks:

3 hal teratas yang dibenci kucing:

Top 3 things cats hate:

<h3>Top 3 things cats hate:</h3>

Langkah 27

Kode untuk daftar terurut (ol) serupa dengan daftar tak terurut, tetapi item daftar dalam daftar terurut diberi nomor saat ditampilkan.
Setelah elemen h3 terakhir elemen bagian kedua, tambahkan daftar terurut dengan tiga item daftar ini:
pengobatan kutu guntur kucing lain

flea treatment, thunder, other cats

 <h3>Top 3 things cats hate:</h3>
        <ol>
            <li>flea treatment</li>
            <li>thunder</li>
            <li>other cats</li>
        </ol>
 

Langkah 28

Setelah daftar yang dipesan (ordered list), tambahkan elemen gambar 
(figure element) lainnya.


Langkah 29

Di dalam elemen figur yang baru saja Anda tambahkan,
sarangkan elemen img dengan atribut src yang disetel 
ke https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg.

         <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/
                    cat-photo-app/cats.jpg">
        </figure>

Langkah 30

Untuk meningkatkan aksesibilitas gambar yang Anda tambahkan, 
tambahkan atribut alt dengan teks:

Lima kucing melihat sekeliling lapangan.
Five cats looking around a field

 <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/
           cats.jpg"  
      alt="Five cats looking around a field">
 

Langkah 31

Setelah elemen img terakhir, tambahkan elemen figcaption dengan
 teks Kucing benci kucing lain.
Cats hate other cats. 
 
  <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/
cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
           <figcaption>Cats hate other cats</figcaption>
        </figure>
Langkah 32

Unsur kuat digunakan untuk menunjukkan bahwa beberapa teks 
sangat penting atau mendesak.

Dalam figcaption yang baru saja Anda tambahkan, tunjukkan bahwa
 kebencian itu sangat penting dengan membungkusnya dengan elemen 
yang kuat.
<figcaption>Cats <strong>hate</strong> other cats.</figcaption> 


 Langkah 33

Saatnya untuk menambahkan bagian baru. Tambahkan elemen bagian
ketiga di bawah elemen bagian kedua.
Langkah 34

Di dalam elemen bagian ketiga, tambahkan elemen h2 dengan teks:

Formulir Kucing
Cat Form
 
 <section>
        <h2>Cat Form</h2>
      </section>
 
Langkah 35

Sekarang Anda akan menambahkan formulir web untuk mengumpulkan
 informasi dari pengguna.
Setelah heading Cat Form, tambahkan elemen form.
<h2>Cat Form</h2>
        <form></form>
 

Langkah 36

Atribut tindakan menunjukkan ke mana data formulir harus dikirim. 
Misalnya, <form action="/submit-url"></form> memberi tahu browser 
bahwa data formulir harus dikirim ke jalur /submit-url.

Tambahkan atribut tindakan dengan nilai 
https://freecatphotoapp.com/submit-cat-photo ke elemen formulir.
 <form action="https://freecatphotoapp.com/submit-cat-photo">
        </form>
Langkah 37

Elemen masukan memungkinkan Anda beberapa cara untuk 
mengumpulkan data dari formulir web. 
Seperti elemen img, elemen input menutup sendiri dan tidak memerlukan 
tag penutup.

Bersarang elemen input di elemen formulir.
 
<form action="https://freecatphotoapp.com/submit-cat-photo">
          <input>
        </form>

Langkah 38

Ada banyak jenis input yang dapat Anda buat menggunakan atribut type
Anda dapat dengan mudah membuat kolom kata sandi, tombol setel 
ulang, atau kontrol agar pengguna dapat memilih file dari komputer
mereka.
Buat bidang teks untuk mendapatkan input teks dari pengguna dengan 
menambahkan atribut type dengan teks nilai ke elemen input.
 
<input type="text">

 Langkah 39

Agar data formulir dapat diakses oleh lokasi yang ditentukan dalam 
atribut tindakan, Anda harus memberikan atribut nama pada bidang teks 
dan menetapkan nilai untuk mewakili data yang dikirimkan. Misalnya, 
Anda dapat menggunakan sintaks berikut untuk kolom teks 
alamat email: <input type="text" name="email">.

Tambahkan atribut nama dengan nilai catphotourl ke bidang teks Anda.
   <input type="text" name="catphotourl">
 
Langkah 40
Teks placeholder digunakan untuk memberikan petunjuk kepada 
orang-orang tentang jenis informasi apa yang akan dimasukkan ke 
dalam input. Misalnya, <input type="text" 
placeholder="Email address">.

Tambahkan URL foto kucing teks placeholder ke elemen input Anda
 <input type="text" name="catphotourl" placeholder="cat photo URL">
 
Langkah 41

Untuk mencegah pengguna mengirimkan formulir kosong saat informasi
yang diperlukan tidak ada, Anda perlu menambahkan atribut required 
 ke elemen input. Tidak perlu menetapkan nilai ke atribut  required. 
Sebagai gantinya, tambahkan saja kata required ke elemen masukan, 
pastikan ada ruang di antara kata tersebut dan atribut lainnya.
 <input type="text" name="catphotourl"  
              placeholder="cat photo URL" required>
 
Langkah 42

Gunakan elemen tombol untuk membuat tombol yang dapat diklik.
Misalnya, <button>Klik Di Sini</button> membuat tombol dengan
teks Klik Di Sini.
Tambahkan elemen tombol dengan teks Submit di bawah elemen input.
Perilaku default mengklik tombol formulir tanpa atribut apapun
mengirimkan formulir ke lokasi yang ditentukan dalam atribut
formulir action.
 
 <input type="text" name="catphotourl" placeholder="cat photo URL" 
 required>
          <button>Submit</button>

Langkah 43

Meskipun Anda menambahkan tombol di bawah input teks, tombol 
tersebut muncul bersebelahan di halaman. Itu karena elemen masukan 
dan tombol adalah elemen sebaris, yang tidak muncul di baris baru.
Tombol yang Anda tambahkan akan mengirimkan formulir secara default.
Namun, mengandalkan perilaku default dapat menyebabkan kebingungan.
Tambahkan atribut type dengan nilai kirim (submit) ke tombol untuk 
memperjelas  bahwa itu adalah tombol kirim.
 
 <button type="submit">Submit</button>
 

Langkah 44
Anda dapat menggunakan tombol radio untuk pertanyaan yang hanya 
menginginkan satu jawaban dari beberapa pilihan.
Berikut adalah contoh tombol radio dengan opsi cat:
<input type="radio"> cat. 
Ingatlah bahwa elemen input menutup sendiri.
Sebelum input teks, tambahkan tombol radio dengan opsi yang 
ditetapkan sebagai:
Indoor
<input type="radio">Indoor 
          <input type="text" name="catphotourl"  
placeholder="cat photo URL" required>
 

Langkah 45

elemen label digunakan untuk membantu mengasosiasikan teks untuk
elemen input dengan elemen input itu sendiri 
(khususnya untuk teknologi bantuan seperti pembaca layar).
Sebagai contoh, <label><input type="radio"> cat</label>
membuatnya jadi mengklik kata cat juga akan memilih tombol radio
yang sesuai.
Sarang tombol radio Anda di dalam elemen label.
 
<label> <input type="radio"> Indoor </label>
 
Langkah 46
Atribut id digunakan untuk mengidentifikasi elemen HTML tertentu.
Setiap nilai atribut id harus unik dari semua nilai id lainnya
untuk seluruh halaman.
Tambahkan atribut id dengan nilai dalam ruangan ke tombol radio. 
Ketika elemen memiliki banyak atribut, urutan atribut tidak menjadi
masalah.
 
<label><input type="radio" id="indoor"> Indoor</label>
 
Langkah 47
Buat tombol radio lain di bawah yang pertama. 
Sarang di dalam elemen label dengan Outdoor sebagai teks label. 
Beri tombol radio atribut id dengan outdoor sebagai nilainya.


 <label><input id="indoor" type="radio"> Indoor</label>
 <label><input id="outdoor" type="radio"> Outdoor</label>
 

Langkah 48
Perhatikan bahwa kedua tombol radio dapat dipilih secara bersamaan.
Untuk membuatnya begitu memilih satu tombol radio secara otomatis
membatalkan pilihan yang lain, kedua tombol harus memiliki atribut
nama dengan nilai yang sama.
Tambahkan atribut nama dengan nilai indoor-outdoor ke kedua tombol
radio.
 <label><input id="indoor" type="radio" name="indoor-outdoor"> 
Indoor</label>
<label><input id="outdoor" type="radio" name="indoor-outdoor">
Outdoor</label>
 

Langkah 49

Jika Anda memilih tombol radio Indoor dan mengirimkan 
formulir, data formulir untuk tombol tersebut didasarkan pada atribut
 nama dan nilainya. Karena tombol radio Anda tidak memiliki atribut 
nilai, data formulir akan menyertakan indoor-outdoor=on, yang tidak 
berguna jika Anda memiliki banyak tombol.

Tambahkan atribut nilai ke kedua tombol radio. Untuk kenyamanan, 
setel atribut nilai tombol ke nilai yang sama dengan atribut id-nya.
 
  <label><input id="indoor" type="radio" name="indoor-outdoor" 
 value="indoor"> Indoor</label>
  <label><input id="outdoor" type="radio"  
name="indoor-outdoor" value="outdoor"> Outdoor</label>
Langkah 50

Elemen fieldset digunakan untuk mengelompokkan input dan label terkait
bersama-sama dalam formulir web. elemen fieldset adalah elemen
tingkat blok, artinya mereka muncul di baris baru.

Sarang tombol radio Indoor dan Outdoor di dalam elemen fieldset, dan 
jangan lupa untuk membuat indentasi tombol radio.


<fieldset>    
          <label><input id="indoor" type="radio" 
             name="indoor-outdoor" value="indoor"> Indoor
         </label>
         <label><input id="outdoor" type="radio"  
             name="indoor-outdoor" value="outdoor"> Outdoor 
        </label>
</fieldset> 
 

Langkah 51
Elemen legend bertindak sebagai keterangan untuk konten dalam 
elemen fieldset. Ini memberi pengguna konteks tentang apa yang
harus mereka masukkan ke bagian formulir itu.
Tambahkan elemen legend dengan teks 
Is your cat an indoor or outdoor cat? 
di atas kedua tombol radio.
 
<fieldset>
   <legend > Is your cat an indoor or outdoor cat? </legend>
   <label><input id="indoor" type="radio" name="indoor-outdoor" 
                 value="indoor"> Indoor</label>
   <label><input id="outdoor" type="radio" name="indoor-outdoor" 
                 value="outdoor"> Outdoor</label>
   </fieldset>
 

 Langkah 52
Selanjutnya, Anda akan menambahkan beberapa elemen input formulir
baru, jadi tambahkan elemen fieldset lain langsung di bawah elemen
 fieldset saat ini.
 
 <fieldset>
      <legend>Is your cat an indoor or outdoor cat?</legend>
          <label><input id="indoor" type="radio" 
 name="indoor-outdoor" value="indoor"> Indoor</label>
          <label><input id="outdoor" type="radio" 
 name="indoor-outdoor" value="outdoor"> Outdoor</label>
 </fieldset>
 <fieldset></fieldset>
 

Langkah 53
Tambahkan elemen legenda dengan teks Apa kepribadian kucing Anda?
 di dalam elemen fieldset kedua.
What's your cat's personality?
 
<fieldset>
     <legend>What's your cat's personality?</legend>
</fieldset>
 

Langkah 54
Formulir umumnya menggunakan kotak centang untuk pertanyaan yang
mungkin memiliki lebih dari satu jawaban. Misalnya, inilah kotak centang
dengan opsi taco: <input type="checkbox"> taco.
Di bawah elemen legenda yang baru saja Anda tambahkan, tambahkan
input dengan atribut tipenya disetel ke kotak centang dan beri opsi:
Penuh kasih.
Loving 
 
<legend>What's your cat's personality?</legend>
     <input type="checkbox"> Loving
Langkah 55
Tambahkan atribut id dengan nilai "loving" ke input kotak centang.

<input type="checkbox" id="loving"> Loving
 

Langkah 56
Ada cara lain untuk mengaitkan teks elemen input dengan elemen itu 
sendiri. Anda dapat menyarangkan teks di dalam elemen label dan 
menambahkan atribut for dengan nilai yang sama dengan atribut id 
elemen input.
Kaitkan teks Mencintai dengan kotak centang dengan menyarangkan 
hanya teks Mencintai dalam elemen label dan memberinya atribut
yang sesuai yaitu For.
 
<input id="loving" type="checkbox">  
<label for="loving"> Loving</label>
 
Langkah 57
Tambahkan atribut name dengan value=personality ke elemen input 
kotak centang.
Meskipun Anda tidak akan menyadarinya di browser, melakukan hal ini
akan memudahkan server memproses formulir web Anda, terutama bila 
ada beberapa kotak centang.
 <input id="loving" type="checkbox" name="personality"> 
 <label for="loving">Loving</label>

Langkah 58
Tambahkan kotak centang lain setelah yang baru saja Anda tambahkan. 
Nilai atribut id harus lazy dan nilai atribut name harus sama dengan kotak
centang terakhir.
Tambahkan juga elemen label di sebelah kanan kotak centang baru
dengan teks Lazy. Pastikan untuk mengaitkan elemen label dengan kotak
centang baru menggunakan atribut for.

  <input id="loving" type="checkbox" name="personality"> 
 <label for="loving">Loving</label>
  <input id="lazy" type="checkbox" name="personality">  
  <label for="lazy">Lazy</label>
 

Langkah 59
Tambahkan kotak centang terakhir setelah yang sebelumnya dengan nilai
atribut id energik. Atribut nama harus sama dengan kotak centang 
sebelumnya.
Tambahkan juga elemen label di sebelah kanan kotak centang baru
dengan teks Energik. Pastikan untuk mengaitkan elemen label dengan 
kotak centang baru.
 
<input id="loving" type="checkbox" name="personality">
  <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality"> 
 <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox" name="personality"> 
 <label for="energetic">Energetic</label>
 

Langkah 60
Seperti tombol radio, data formulir untuk kotak centang yang dipilih 
adalah pasangan atribut nama/nilai. Meskipun atribut value bersifat 
opsional, sebaiknya sertakan dengan kotak centang atau tombol radio 
mana pun di halaman.
Tambahkan atribut nilai ke setiap kotak centang. Untuk kenyamanan, 
setel atribut nilai setiap kotak centang ke nilai yang sama dengan 
atribut id-nya.
 
  <fieldset>
    <legend>Is your cat an indoor or outdoor cat?</legend>
    <label><input id="indoor" type="radio" name="indoor-outdoor" 
 value="indoor"> Indoor</label>
    <label><input id="outdoor" type="radio" name="indoor-outdoor" 
 value="outdoor"> Outdoor</label>
  </fieldset>
  <fieldset>
    <legend>What's your cat's personality?</legend>
           <input id="loving" type="checkbox" name="personality"
  value="loving"> <label for="loving">Loving</label>
           <input id="lazy" type="checkbox" name="personality" 
 value="lazy"> <label for="lazy">Lazy</label>
           <input id="energetic" type="checkbox" name="personality" 
 value="energetic"> <label for="energetic" > Energetic</label>
  </fieldset>
 

Langkah 61
Untuk mencentang kotak centang atau tombol radio dipilih secara default,
 Anda perlu menambahkan atribut yang dicentang ke dalamnya.
 Tidak perlu menetapkan nilai ke atribut yang diperiksa. 
Sebagai gantinya, tambahkan saja kata yang dicentang ke elemen 
masukan, pastikan ada ruang di antara kata itu dan atribut lainnya.
Jadikan tombol radio pertama dan kotak centang pertama dipilih secara
default.
 
<fieldset>
    <legend>Is your cat an indoor or outdoor cat?</legend>
    <label><input id="indoor" type="radio" name="indoor-outdoor"
  value="indoor" checked> Indoor</label>
    <label><input id="outdoor" type="radio" name="indoor-outdoor" 
 value="outdoor"> Outdoor</label>
</fieldset>
<fieldset>
    <legend>What's your cat's personality?</legend>
      <input id="loving" type="checkbox" name="personality" 
 value="loving" checked> <label for="loving">Loving</label>
      <input id="lazy" type="checkbox" name="personality" 
 value="lazy"> <label for="lazy">Lazy</label>
      <input id="energetic" type="checkbox" name="personality" 
 value="energetic"> <label for="energetic"> Energetic</label>
</fieldset>

Langkah 62
Sekarang Anda akan menambahkan bagian footer ke halaman.
Setelah elemen utama, tambahkan elemen footer.

 </main>
<footer></footer>
  </body>
 
Langkah 63
Sarang elemen p dengan teks No Copyright - freeCodeCamp.org 
di dalam elemen footer.
 <footer>
   <p> No Copyright - freeCodeCamp.org </p>
</footer>
 

Langkah 64
Jadikan teks freeCodeCamp.org menjadi tautan dengan melampirkannya 
dalam elemen jangkar (a). Atribut href harus disetel 
ke https://www.freecodecamp.org.
 
<p>No Copyright - <a href="https://www.freecodecamp.org"  
target="_blank">freeCodeCamp.org</a></p>
 
Langkah 65
Perhatikan bahwa semua yang telah Anda tambahkan ke halaman sejauh
ini ada di dalam elemen body. Semua elemen konten halaman yang
harus dirender ke halaman masuk ke dalam elemen body. 
Namun, informasi penting lainnya masuk ke dalam elemen kepala.
Tambahkan elemen kepala di atas elemen tubuh.

<html>
   <head></head>
   <body>
   
Langkah 66
Elemen judul menentukan apa yang ditampilkan browser di bilah judul 
atau tab halaman.
Tambahkan elemen judul di dalam elemen kepala menggunakan teks 
di bawah ini:
Aplikasi Foto Kucing
CatPhotoApp 
 
<head>
    <title>CatPhotoApp</title>
</head>
 

Langkah 67
Perhatikan bahwa seluruh konten halaman bersarang di dalam elemen
html. Semua elemen lainnya harus turunan dari elemen html ini.
Tambahkan atribut lang dengan nilai en ke tag html pembuka untuk
 menentukan bahwa bahasa halaman adalah bahasa Inggris.
 
<html lang="en">
 
Langkah 68
Semua halaman harus dimulai dengan <!DOCTYPE html>. 
String khusus ini dikenal sebagai deklarasi dan memastikan browser
mencoba memenuhi spesifikasi industri.
Tambahkan deklarasi ini sebagai baris pertama kode.

<!DOCTYPE html>
<html lang="en">
 

Langkah 69
Anda dapat mengatur perilaku browser dengan menambahkan elemen 
meta yang menutup sendiri di kepala. Berikut contohnya:
<meta atribut="nilai">
Beri tahu browser untuk mem-parsing markup ke dalam beberapa bahasa
dengan membuat elemen meta sebagai turunan dari elemen HEAD.
 Setel atribut charset-nya ke UTF-8.
 
<meta charset="UTF-8">
 
Hasilnya:
 
Section 1
<!DOCTYPE html> /*menunjukkan ini adalah html5*/
  <html lang="en"> /*Tag html dan bahasa = inggris*/
 
    <head> /*berfungsi untuk link, library, SEO, deklarasi/
         <meta charset="UTF-8">
        <title>CatPhotoApp</title>
    </head>
 
    <body> /*Bagian yang akan ditampilkan di browser*/

    <main> /*Bagian utama dari body*/

    <section> /*semacam bab kalau pada sebuah buku*/

       <h1>CatPhotoApp</h1> /*menampilkan tulisan uk h1*/

       <h2>Cat Photos</h2> /*menampilkan tulisan uk h2*/

       <!-- TODO: Add link to cat photos --> /* komentar 
sebagai acuan dev*/

       <p>See more <a href="https://freecatphotoapp.com" 
target="_blank">cat photos</a> in our gallery</p>
       <a href="https://freecatphotoapp.com" target="_blank">
           <img src= "https://cdn.freecodecamp.org/curriculum/
cat-photo-app/relaxing-cat.jpg" 
                   alt = " A cute orange cat lying on its back"/></a>  
    </section> 

 Section 2
     <!-- New section add --> 

     <section>

           <h2>Cat Lists</h2> 
           <h3>Things cats love:</h3>
	  <ul>
	      <li>Cat nip</li>
	      <li>laser pointers</li>
	      <li>lasagna</li>
	 </ul>
          <figure>
	     <img src="https://cdn.freecodecamp.org/curriculum/
cat-photo-app/lasagna.jpg" alt="A slice of lasagna">
                 <figcaption>Cats <em>love</em> lasagna</figcaption>
          </figure>
 
           <h3>Top 3 things cats hate:</h3>
	      <ol>
	          <li>Flea treatment</li>
	          <li>Thunder</li>
	          <li>Other Cats</li>
	       </ol>
           <figure>
	      <img src="https://cdn.freecodecamp.org/curriculum/
cat-photo-app/cats.jpg" alt="Five cats looking around a field">
	          <figcaption>Cats <strong>hate</strong> 
other cats</figcaption> 
           </figure>
     </section>
 
Section 3



<section>
     <h2>Cat Form</h2>
     <form action="https://freecatphotoapp.com/submit-cat-photo">
        <fieldset>
           <legend> Is your cat an indoor or outdoor cat?</legend> 	  
	   <label><input type="radio" id="indoor" 
name="indoor-outdoor" value="indoor">Indoor</label>
	   <label><input type="radio" id="outdoor" 
name="indoor-outdoor" value="outdoor">Outdoor</label>
        </fieldset>
	<fieldset>
	   <legend>What's your cat's personality?</legend>
	   <input id="loving" type="checkbox" name="personalty" 
value="loving"> <label for="loving">Loving</label>
	   <input id="lazy" type="checkbox" name="personality" 
value="lazy"> <label for="lazy">Lazy</label>
           <input id="energetic" type="checkbox" name="personality"
 value="energetic"> <label for="energetic">Energetic</label>
        </fieldset>
	   <input type="text" name="catphotourl" 
placeholder="cat photo url" required>
	   <button type="submit">Submit</button>
         </form> 
    </section>

  </main> 
  <footer>
       <p> No Copyright - <a href="https://www.freecodecamp.org" 
target="_blank">FreeCodeCamp.org</a> </p>
  </footer>
  </body>

</html>

Full script bisa di download disini
 
 
 
 
 
 
 