Membuat Desain Profil/Biodata Untuk Template

by agungekkasmkbantaraOktober 26, 20180 Comments
Assalamualaikum Warahmatullahi Wabarakatuh,
1.Pendahuluan
 
A.Pokok Bahasan
    Membuat desain profil/biodata untuk template
B.Latar Belakang
Memberikan gambaran tentang profil seorang penulis.
C.Tujuan
Mengembangkan pembuatan template blog menjadi menarik dan pengunjung dapat mengetahui identitas seorang Blogger.
2.Isi
D.Pembahasan
    Dalam pembuatan sebuah template tentunya, identitas seorang penlis blog sangatlah diperlukan. Selain sebagai data diri hal ini juga dapat berperan sebagai sambutan perkenalan dan sapaan ketika pengunjung blog sedang berkunjung.
 Oke langsung saja kita praktekkan saja...
  1. Pertama siapkan aplikasi editor terlebih dahulu sebelum memulai membuat program, disini saya akan menggunakan aplikas bernama Sublime.
  2. Masukkan kode program sebagai berikut :                                    <!DOCTYPE html>
    <html>
    <head><title>Biodata</title>
    <link rel="stylesheet" href="agung.css">  
    </head>
    <body>
        <marquee><h1><font color="aqua">agung ekka ramadhani</font></h1></marquee>
    <form action="#" style="width : 1000px" class="posisi/";>
    <fieldset class="h"/>
    <table style="width :980px;">
        <tr>
            <td rowspan="15" width="250px">
                <img src="a.JPG" height="400px" width="300px"></img>
            </td>
        </tr>
            <tr>
                <td>Nama</td>
                <td>:</td>
                <td>Agung ekka ramadhani</td></tr>
            <tr>
                <td>No.Telp/WA</td>
                <td>:</td>
                <td>089661227177</td></tr>
           <tr>
                <td>Sekolah</td>
                <td>:</td>
                <td>SMK Bakti Nusantara Sidoharjo</td></tr>
                    <tr>
                <td>Kelas</td>
                <td>:</td>
                <td>XI</td>
            </tr>
    <td colspan="1" align="left">
    </table>
    </fieldset>
    </form>
    </body>
    </html>
  3. Simpan dengan nama Biodata.html maka kodingan diatas akan ditampilkan dengan inputan seperti gambar berikut :
    4.Kemudian kita lanjut dengan pembuatan file CSS dengan format penyimpanan data nanti disimpan dengan nama file ekstensi"agung.css".

    table,tr,td{
        background-color:black;
        font-family:century gothic;
        color:green;
        border:1px solid aqua;
        padding:5px;
        border border-collapse:collapse;
    }
    .h{
        border:8px groove yellow;
        padding:20px;
    }
    .posisi{
        position: absolute;
        margin-bottom: auto;
        margin-top: auto;
        margin-left:auto;
        margin-right:auto;
        bottom:0px;
        top:100px;
        left:0px;
        right:0px;
    }
    body{
        background-image:url('agung.jpg');
        background-repeat: no-repeat;
        background-size:1400px auto;
    }
    5.Hasil input :
     

     6. Oh, ya... jangan lupa juga kita harus menyimpan gambar juga dengan nama"a.JPG"(simpan file gambar[a.JPG],agung.css,dan Biodata.html dalam satu folder yang sama).

     7.OK , langsung saja jalankan di browser dan kemudian lihat hasil yang anda kerjakan.



F.Waktu Pelaksanaan
08.00-16.00WIB
3.Penutup
G.Kesimpulan
    Dari uraian diatas dapat disimpulkan bahwasannya, membuat sebuah data diri diperlukan untuk menunjukkan identitas penulis dalam sebuah template.
H.Alat yang dibutuhkan
Satu buah laptop
Software/Text editor (Sublime-Text).


0 Komentar

Posting Komentar