Menu
CoddyTech
Mulai belajar

Foto Profil

Termasuk bagian Dasar-Dasar dalam perjalanan HTML di Coddy. Pelajaran 32 dari 60.

challenge icon

Tantangan

Mudah

Baik, sekarang saatnya menambahkan foto profil! Kamu bisa menggunakan gambar apa pun yang kamu suka. Kamu juga bisa menggunakan tautan dari contoh di bawah.

  1. Setelah <div> pertama (bagian header), buat <div> lain. Tambahkan tag <img> di dalamnya.
  2. Atur src agar mengarah ke gambar kamu, lalu gunakan atribut width dan height untuk mengatur ukurannya.

Contoh:

  • src - https://storage.googleapis.com/coddy-15505.appspot.com/public/avatars/avatar25.png
  • width - 200
  • height - 200"

Coba sendiri

<!DOCTYPE html>
<html>
    <body>
        <!-- Header Section -->
        <div>
            <h1>John Doe</h1>
            <p>Web Developer | Creative Thinker</p>
        </div>
    </body>
</html>

Semua pelajaran di Dasar-Dasar

1Dasar-Dasar HTML

Apa itu HTML?Struktur Dasar HTMLTag dan ElemenTag Bersarang dan Tag PenutupKomentar dalam HTML

4Kartu Resep

Gambaran Umum ProyekJudul dan Deskripsi ResepPelajaran proyekBahan-bahanPelajaran proyekLangkah-langkahPelajaran proyek

7Halaman Profil Pribadi

Gambaran Umum ProyekBagian HeaderPelajaran proyekFoto ProfilPelajaran proyekBagian Tentang SayaPelajaran proyekTautan Media SosialPelajaran proyek

10Tabel

Dasar-Dasar TabelMenambahkan Judul TabelMembentangkan Baris dan KolomRangkuman: Tabel

2Teks dan Pemformatan

JudulParagrafPindah BarisTeks Tebal dan MiringTeks Tebal dan Miring LagiRangkuman: Pemformatan

5Menambahkan Konten

Atribut HTMLTautanTautan ke Halaman BaruGambarAtribut Gambar

8Formulir dan Input Bagian 1

Dasar FormulirInput TeksAtribut InputKolom Kata SandiLabel untuk InputUlasan, Formulir Dasar

11Halaman Pendaftaran Acara

Gambaran Umum ProyekBagian HeaderPelajaran proyekBagian Detail AcaraPelajaran proyekFormulir PendaftaranPelajaran proyekBagian FooterPelajaran proyek

3Bekerja dengan list

list Tak Berurutanlist Berurutanlist BersarangRingkasan: list

6Tata Letak Halaman

Elemen divElemen span SebarisTag SemantikBagian dan ArtikelRangkuman Tata Letak

9Formulir dan Input Bagian 2

Tombol RadioKotak CentangMenu DropdownTombolTombol dalam FormulirRangkuman, Formulir #1Rangkuman, Formulir #2

12Tantangan Akhir

Kartu Profil SederhanaKartu Undangan AcaraHalaman Artikel SederhanaDaftar Buku Favorit

Latihan sendiri: Playground Web