Penggunaan HTML part 1

Posted on Updated on

Pembuatan “Portofolio Diri”

Senin, 14 November 2016

Setelah perkuliahan minggu kemarin membahas sekilas mengenai apa itu Xampp, perkuliahan hari ini mulai menerapkan penggunaan Xampp. Salah satu kelebihan Xampp yang bisa digunakan dalam keadaan offline, sangat bermanfaat untuk kuliah hari ini yang akan mempraktekkan penggunaan script html untuk membuat lembar portofolio diri. Dalam pembuatan script ini, kami menggunakan “Notepad++”. Kenapa harus Notepad ++ ?, Karena Notepad++ dianggap lebih simple dan lebih mudah untuk digunakan, sehingga hal ini akan memudahkan kami sebagai pemula. Dalam pertemuan hari ini  kami membuat 3 text document dengan menggunakan format php dan harus diisikan dengan format kode seperti berikut :

111

setelah itu kami harus mengembangkan sendiri isi dari lembar portofolio itu  agar lebih menarik . Ada tiga laman yang harus kami buat untuk praktek awal penggunaan html ini, yaitu indeks.php, about.php dan karya.php. Berikut adalah pengembangan dari script tersebut:

<html>
    <head>
    <title>Portofolio Diri</title>
    </head>
    <body background="34.jpg">
     
<center>    <a href="index.php"><b><font color="yellow">HOME</b></a> >> <a href="about.php"><b><font color="cyan">ABOUT ME</a> >> <a href="karya.php"><b><font color="black">MY CREATION</a>
<h1><font color= "yellow">Portofolio Diri</font></h1>

    <table border="7">
        <tr>
            <td rowspan="14"><img src="fotoo.jpg" width="200px" height="350px"></td>
            <td><font color="black">Nama</td>
            <td><font color="black">:</td>
            <td><font color="black">Umi Mahmudah</td>
        </tr>
        <tr>
            <td><font color="black">Tempat, tanggal lahir</td>
            <td><font color="black">:</td>
            <td><font color="black">Blitar, 10 Mei 1995</td>
        </tr>
        <tr>
            <td><font color="black">Jenis Kelamin</td>
            <td><font color="black">:</td>
            <td><font color="black">Perempuan</td>
        </tr>
        <tr>
            <td><font color="black">Agama</td>
            <td><font color="black">:</td>
            <td><font color="black">Islam</td>
        </tr>
        <tr>
            <td><font color="black">Alamat</td>
            <td><font color="black">:</td>
            <td><font color="black">Jl. Jawa 4B Nomor 12B, Kecamatan Sumbersari, Kabupaten Jember</td>
        </tr>
        <tr>
            <td><font color="black">Status</td>
            <td><font color="black">:</td>
            <td><font color="black">Lajang</td>
        </tr>
        <tr>
            <td><font color="black">Hobi</td>
            <td><font color="black">:</td>
            <td><font color="black">Membaca,menulis, dan mendengarkan musik</td>
        </tr>
        <tr>
            <td><font color="black">Profesi</td>
            <td><font color="black">:</td>
            <td><font color="black">Mahasiswi</td>
        </tr>
        <tr>
            <td><font color="black">Program Studi</td>
            <td><font color="black">:</td>
            <td><font color="black">Pendidikan Ekonomi</td
        </tr>
        <tr>
            <td><font color="black">Nama Instansi</td>
            <td><font color="black">:</td>
            <td><font color="black">Universitas Jember</td>
        </tr>
        <tr>
            <td><font color="black">Golongan Darah</td>
            <td><font color="black">:</td>
            <td><font color="black">A</td>
        </tr>
        <tr>
            <td><font color="black">E-mail</td>
            <td><font color="black">:</td>
            <td><font color="black">umimahmudah15@gmail.com</td>
        </tr>
        <tr>
            <td><font color="black">Motto</td>
            <td><font color="black">:</td>
            <td><font color="black">Tambah kuota semangat dan sabar saat berhasil naik satu level</td>
        </tr>
    </table>
    
<marquee><b><font face="Maiandra GD " color = "yellow" font size ="large"> Presented By : UM UM'S Blog "Jangan percaya dengan keberuntungan, tapi percayalah dengan kerja keras"
</marquee>
</center>
    </body>
</html>

Setelah mengembangkan dan mengkreasikan sesuai dengan yang kami harapkan, maka untuk melihat hasilnya kami harus masuk laman mozila firefox atau google crome, tergantung mana yang kita anggap lebih mudah. lalu pada bagian pencarian web kita ketikkan “localhost/sima” dan enter. Setiap kita melakukan perubahan script pada notepad++, maka kita harus me-refresh halaman web terb=sebut untuk melihat hasilnya.

xamp-portofolio

Ok, materi perkuliahan SIM tadi cukup sampai disini…. lanjutannya coming soon 🙂
“don’t believe with lucky, but believe with hard work”

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s