Skip to main content

Membuat Tampilan Header Sederhana di Website


Membuat Tampilan Header Sederhana di Website
Header
Tampilan Header di Website -- Cara membuat tampilan header agar lebih menarik di website sangat di perlukan karena itu identitas dari sebuah website. Pengunjung pertama membuka situs web  pertama akan dilihat adalah tampilan header pada website. Header berfungsi untuk menampilkan identitas dan logo perusahaan atau perorangan.

  Contoh tampilan header :

<body>
<div id="header">
    <div class="logo"><img src="index.png"/></div>
    <div class="judul">VANSZEVE TUTORIAL</div>
    <div class="iklan">INI ADALAH TEMPAT IKLAN</div>
    <div class="tulisan"><marquee>menerima service handphone, komputer dan elektronik </marquee> </div>
</div>

Contoh tampilan css :

<style>
     .logo img{
        width:100px;
        height:80px;
        padding:10px;
        float:left;
      }
      .judul{
        float:right;
        font-size:50px;
        font-style:center;
        color:red;
        margin-right:650px;
        margin-top:20px;
        }
      
      .iklan{
        float:right;
        background-color:white;
        padding:30px 30px 30px 300px;
        margin-top:-65px;
        margin-right:5px;
        text-align:center;
        }
      
      .tulisan marquee{
        float:right;
        margin-right:550px;
        color:#1515ef;
        margin-left:120px;
        margin-top:-30px;
        }</style>

Untuk gaya lain tulisan atau logo silahkan anda mengunjungi Font CSS Style Generator silahkan anda rubah sesuai selera. Jika anda kurang paham silahkan kembali ke membuat tampilan dasar web.

Demikianlah cara membuat header di website, jika anda belum paham simak video berikut ini :




Jika artikel dan video ini bermamfaat untuk anda silahkan bagikan ke teman- teman anda agar mendapatkan mamfaatnya juga. Terima Kasih.
Labels:
Location: Jln.Raya Banjar-Majenang Rt 001/010 Pangkalan Ojeg Warung Batok Desa, Warungbatok, East Panulisan, Dayeuhluhur, Cilacap Regency, Central Java 36661, Indonesia

Comments

Post a Comment