Scribd Logo
Upload

Welcome to Scribd!

  • Bab Ii

    Uploaded by

    Pak Gik
    41 views6 pages
    skripsi

    Original Title

    BAB II

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    skripsi

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    41 views6 pages

    Bab Ii

    Uploaded by

    Pak Gik
    skripsi

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    Pembuatan Biodata Sederhana dengan Html dan CSS

    Assalamualaikum.Wr.Wb...
    saya mau posting salah satu contoh biodata sederhana dengan HTML dan CSS, berikut ini adalah
    output program :

    untuk script diatas adalah sebagai berikut :


    1. buatlah sebuah file php dengan nama "home.php"
    2. tulislah script dibawah ini pada file di atas.
    <html>
    <title>Biodataku</title>
    <head>
    <style>
    h1,h2{
    padding-top : 1em;
    text-align: center;
    font: Arial, Helvetica, sans-serif;
    }
    p{
    padding: 1em;
    text-align: center;
    }
    IMG.gambar{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 300px;
    height: 300px;
    }

    </style>
    </head>
    <body>
    <h1>Assalamualaikum.Wr.Wb</h1>
    <img class="gambar" src="coba.jpg"/>
    <div class="utama">
    <h2>Biodata koe..</h2>
    <p>Namaku adalah <b>Iqro Amir Hussein</b>, Saya lahir di jakarta
    tepatnya tanggal <i>15-Januari-1991</i>.Saat ini saya sedang kuliah jurusan Sistem informasi di
    Universitas Gunadarma dan Saya bercita-cita ingin menjadi Triliuner.
    untuk lebih detail mengenal saya silahkan <a
    href="detail.php">klik </a></p>
    </div>
    </body>
    </html>
    3. taruh gambar coba.jpg(bisa di ganti) pada satu file.
    4. selanjutnya untuk nge-Link, buatlah file dengan nama detail.php
    5. Tulislah Script di bawah ini.
    <html>
    <head>
    <title>Biodata</title>
    <style>
    h1{
    padding-top : 1em;
    text-align: center;
    font: Arial, Helvetica, sans-serif;
    }
    table,tr,td{
    font-family: century gothic;
    color: black ;
    border: 1px solid aqua;
    padding: 5px;
    background-color: white;
    }
    .posisi{
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: auto;
    margin-top: auto;
    left: 160px;
    right: 0;
    top: 100px;
    bottom: 0;
    }
    </style>
    </head>
    <body>
    <h1>Biodata Lengkap</h1>
    <br><br>
    <form action="#" style="width: 1000px"class="posisi";>
    <table style="width: 900px;">
    <tr>
    <td rowspan="15" width="250px">
    <img src="coba.jpg" width="250px" height="420px"/>
    </td>
    </tr>
    <tr>
    <td><b>Nama</b></td>
    <td>:</td>
    <td>Iqro Amir Hussein</td>
    </tr>
    <tr>
    <td><b>Tempat, Tanggal Lahir</b></td>
    <td>:</td>
    <td>Jakarta, 15-01-1991</td>
    </tr>
    <tr>
    <td><b>Umur</b></td>
    <td>:</td>
    <td>24 Tahun</td>
    </tr>
    <tr>
    <td><b>Jenis Kelamin</b></td>
    <td>:</td>
    <td>Laki - Laki</td>
    </tr>
    <tr>
    <td><b>Gol. Darah</b></td>
    <td>:</td>
    <td>B</td>
    </tr>
    <tr>
    <td><b>Agama</b></td>
    <td>:</td>
    <td>Islam</td>
    </tr>
    <tr>
    <td><b>Alamat</b></td>
    <td>:</td>
    <td>Jln. Rawa Gabus, Jakarta</td>
    </tr>
    <tr>
    <td><b>Status</b></td>
    <td>:</td>
    <td>Belum Menikah</td>
    </tr>
    <tr>
    <td><b>Pekerjaan</b></td>
    <td>:</td>
    <td>Mahasiswa</td>
    </tr>
    <tr>
    <td><b>Kewarganegaraan</b></td>
    <td>:</td>
    <td>Indonesia</td>
    </tr>
    </table>
    <br>
    <table style="width: 900px;">
    <tr>
    <td colspan="4" style="text-align: center; background-color: blue;color:
    black"><b>Riwayat Jenjang Pendidikan Formal</b></td>
    </tr>
    <tr>
    <td style="text-align: center">Jenjang Pendidikan</td>
    <td style="text-align: center">Keterangan</td>
    <td style="text-align: center">Tahun</td>
    </tr>
    <tr>
    <td>SEKOLAH DASAR</td>
    <td>Sekolah Dasar Negri 01 pagi</td>
    <td>1996-2002</td>
    </tr>
    <tr>
    <td>SEKOLAH MENENGAH PERTAMA</td>
    <td>SMP DAAR EL-QOLAM,BANTEN</td>
    <td>2002-2005</td>
    </tr>
    <tr>
    <td>SEKOLAH MENENGAH ATAS</td>
    <td>SMA DAAR EL-QOLAM, BANTEN</td>
    <td>2005-2008 </td>
    </tr>
    <tr>
    <td>STRATA I</td>
    <td>UNIVERSITAS GUNADARMA,DEPOK </td>
    <td>2011-....</td>
    </tr>
    </table>
    <br>
    <table style="width: 900px;">
    <tr>
    <td colspan="4" style="text-align: center; background-color: blue;color:
    black"><b>Informasi Umum</b></td>
    </tr>
    <tr>
    <td>Nomor Telephon</td>
    <td>:</td>
    <td>+62815687877</td>
    </tr>
    <tr>
    <td>E-mail</td>
    <td>:</td>
    <td><a href="mailto:iqroamir@gmail.com" style="text-decoration: none;color:
    black";>iqroamir@gmail.com</a></td>
    </tr>
    <tr>
    <td>Hobi</td>
    <td>:</td>
    <td>Makan,Bernafas,Tidur,Coding, Jalan2 </td>
    </tr>
    </table>
    <td colspan="3" align="right"><br>
    <a href="home.php" style="text-decoration: none;"</a><input type="button"
    onclick="history.back()" value="Kembali"/>
    </td>
    </table>
    </form>
    </body>
    </html>
    6. jalankan program pada Browser anda.
    7.selesai..

    berikut adalah penjelasan dari sebagian Script diatas :

    1. <i><i/> = text miring


    2. <b><b/>=text tebal
    3. <br/>=break atau garis baru
    4. <img>=menampilkan Gambar
    5. <a href>= membuat link ke dokumen lain
    6. <table> = digunakan untuk membuat tabel
    7. <th>= membuat heading table
    8. <tb>=membuat baris tabel
    9. <tr>=membuat kolom tabel
    10. <h>= membuat heading/ judul pada web
    11. <p>= membuat paragraf pada web

    You might also like