Membuat logo bersebelahan dengan naviagasi

Bagaimana cara mengganti tulisan "logo" dengan sebuah gambar ?

berikut kode saya :

File HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <nav id="menu">
        <ul>
            <div id="heading">
                <a href="#">Logo</a>
            </div>
            <li><a href="index.html">Beranda</a></li>
            <li><a href="artikel.html">Artikel</a></li>
            <li><a href="gambar.html">gambar</a></li>
            <li><a href="#">list</a>
            <ul>
                <li> <a href="ul.html">Tips Sukses (ul)</a></li>
                <li> <a href="ol.html">Cara Masak Mie (ol)</a></li>
            </ul>
        </li>
        <li><a href="table.html">Data</a></li>
        <li><a href="form.html">Form</a></li>
        <li><a href="#">Multimedia</a>
            <ul>
                <li><a href="audio.html">Audio</a></li>
                <li><a href="video.html">Video</a></li>
            </ul>
        </li>
    </ul>
</nav>
</body>
</html>

file style.css

*{
    margin: 0px;
    padding: 0px;
}
body {
    font-size: 14px;
    font-family: verdana;

}
#heading{
    float: left;
    width: 640px;
}
#heading a {
    line-height: 65px;
    text-decoration: none;
    padding-left: 60px;
    color:#FFF;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 40px;
}
#menu {
    background:#26C4C2;
    width: 100%;
    height: 65px;
    margin: 0px;
    padding: 0px;

}
#menu ul {
    list-style: none;

}
#menu ul li {
    float: left;
    line-height: 65px
}
#menu ul li a {
    float:left;
    width:100px;
    display:block;
    text-align:center;
    color:#FFF;
    text-decoration:none;
}
#menu ul ul {
    display:none;
    list-style:none;
    position:absolute;
    background-color:#26C4C2;
    float: none;
    top:65px;
    width:190px;
}
#menu ul li a:hover {
    background-color:#2E9EA2;
    display:block;
}
#menu ul li:hover ul {
    display:block;
}
#menu ul ul li a {
    display:block;
    padding-left:30px;
    text-align:left;
    width:160px;
    height: 60px;
    line-height: 60px;
}
#menu ul ul li a:hover {
    color:#fff;
}

html css

@Rhakim

13 Kontribusi 9 Poin

Diperbarui 4 tahun yang lalu

3 Jawaban:

Di headingnya gunakan tag <img> bukan lagi text <div id="heading"> <a href="#">Logo</a> </div>

Kamu bisa <a href='https://sekolahkoding.com/kelas/belajar-html-dari-dasar'>belajar dasar dasar HTML di sini</a>

@hilmanski

2670 Kontribusi 2132 Poin

Dipost 4 tahun yang lalu

Gunakan tag <img> didalam tag <a href> Contoh :

@muhammadnirwansyah

2 Kontribusi 0 Poin

Dipost 4 tahun yang lalu

masih belum paham? oke deh aku buatin code nya ;(

HTML

CSS

<pre> .heading img { max-height: 50px; width: auto } </pre>

@hellogerafis

17 Kontribusi 1 Poin

Dipost 4 tahun yang lalu

Kelas Premium! Belajar bikin website dari nol sekarang

Membuat logo bersebelahan dengan naviagasi

Kelas Premium!
Belajar bikin website dari nol sekarang