. Belajar Kodingan/Script HTML Sederhana Membuat Table, Dan Bullet Menggunakan Notepad++ - Berbagi Pengetahuan

Belajar Kodingan/Script HTML Sederhana Membuat Table, Dan Bullet Menggunakan Notepad++

Assalamu’alaikum..

            Dalam Artikel kali ini adalah  pembahasan pada Laboratorium Informatika Praktikum Pweb ke 1, saya ingin membahas tentang Cara Membuat Table, Dan Membuat Bullet Diweb Menggunakan Kodingan/Script HTML Sederhana, hingga mempercantiknya. Oke simak ya langkah-langkahnya.

1. Coba ketik atau copy paste script dibawah ke notepad++


<html>
            <head>
                        <title>LA 1 JarkomLan</title>
            </head>
                        <body>
                                    <h1><center>CURRICULUM VITAE</center></h1>
                                    <ul type="I">
                                                <h2><li>BIODATA DIRI</li></h2>
                                                <ul>
                                                            <li>Nama : Muhammad Faris Al Fatih</li>
                                                            <li>TTL : Depok, 06 Mei 1993</li>
                                                            <li>Jenis Kelamin : Laki-Laki</li>
                                                            <li>Alamat : Citayam, Pabuaran</li>
                                                </ul>   
                                                <h2><li>RIWAYAT PENDIDIKAN</li></h2>
                                                <ul type="1">
                                                            <h3><li>Formal</li></h3>
                                                            <ul type="square">
                                                                        <li>TK Qubro</li>
                                                                        <li>SDN Pabuaran 03</li>
                                                                        <li>SMP IT Al Madinah</li>
                                                                        <li>SMA IT Al Madinah</li>
                                                                        <li>Universitas Gunadarma</li>
                                                            </ul>
                                                            <h3><li>Informal</li></h3>
                                                            <ul type="square">
                                                                        <li>Kursus B. Inggris</li>
                                                                        <li>Kursus Multimedia</li>
                                                                        <li>Kursus Cisco</li>
                                                            </ul>
                                                </ul>
                                    </ul>
                                    <table border="1", bgcolor="Yellow", width="600", align = "center">
                                                <tr align="center">
                                                            <td>No.</td>
                                                            <td colspan = 2 >Hobby </td>
                                                </tr>
                                                <tr align="center">
                                                            <td>1</td>
                                                            <td>Olahraga</td>
                                                            <td>Futsal</td>
                                                </tr>
                                                <tr align="center">
                                                            <td>2</td>
                                                            <td>Ngecengin Orang</td>
                                                            <td>Buat Lucu Lucuan Aja</td>
                                                </tr>
                                                <tr align="center">
                                                            <td colspan = 3>KRS</td>
                                                </tr>
                                                <tr align="center">
                                                            <td>No.</td>
                                                            <td>Mata Kuliah</td>
                                                            <td>SKS</td>
                                                </tr>
                                                <tr align="center">
                                                            <td>1</td>
                                                            <td>Pengantar Pengolahan Citra</td>
                                                            <td rowspan = 3>2</td>
                                                </tr>
                                                <tr align="center">
                                                            <td>2</td>
                                                            <td>Rekayasa Perangkat Lunak 1</td>
                                                </tr>
                                                <tr align="center">
                                                            <td>3</td>
                                                            <td>Jaringan Komputer Lanjut 1</td>
                                                </tr>
                                                <tr align="center">
                                                            <td>4</td>
                                                            <td>Pemodelan dan Simulasi</td>
                                                            <td rowspan = 2>3</td>
                                                </tr>
                                                <tr align="center">
                                                            <td>5</td>
                                                            <td>Teknik Kompilasi</td>
                                                </tr>
                                    </table>
                        </body>
</html>
            Lalu Save project yang tadi telah dibuat, ingat!! Pada Save As Type, jangan lupa ekstensinya (.html).

2. Untuk melihat hasilnya klik kanan – open with – (pilih browser yg ingin digunakan, disini saya menggunakan Firefox) – nanti akan terlihat hasilnya di browser.

3. Untuk mengedit nya, cukup hanya menggunakan Notepad++ project kamu tadi, setelah terubah save kembali project tersebut (CTRL + s ), dan pada firefoxnya refresh dengan menekan tombol F5

Keterangan :

<br />  Memberi baris baru/pindah baris

<center> Untuk perataan tengah terhadap teks atau gambar

<div>   Mendefinisikan sebuah section dalam dokumen

<h1> to <h6>  Digunakan untuk menunjukkan awal dari suatu header/judul dari dokumen HTML tersebut.

<html>            Mendefinisikan sebuah inline frame

<body> Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan di web browsernya. Isi dokumen tersebut dapat berupa teks, gambar, animas, link dan seterusnya

<head> Digunakan untuk memberikan informasi tentang dokumen tersebut

<li> Digunakan untuk menampilkan informasi dalam bentuk item daftar

<table> Membuat table

<td> Mendefinisikan sel di dalam sebuah table

<title> Membuat judul untuk dokumen HTML

<tr> Membuat baris di dalam sebuah table

<ul> Mendefinisikan daftar dalam format bullet


Output :


            Mungkin itu saja yang bisa dibahas, apabila ada kata yang salah dan kurang berkenan mohon dimaafkan. Terima kasih… ^^


Wassalamu’alaikum…


Download CodeIgniter dari Website Resminya : Disini

Download File LA 5 PWeb Lengkapnya  : Disini

Jika Menyukai Artikel di blog ini, Silahkan masukkan email sobat. Akan dapat Update artikel dari blog ini, "GRATISS!!"

4 Responses to "Belajar Kodingan/Script HTML Sederhana Membuat Table, Dan Bullet Menggunakan Notepad++"

  1. mantapsss gaaan, lanjutkan

    ReplyDelete
    Replies
    1. sip gan, hahaa

      terima kasih atas kunjungannya ya ^^

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. So help me bgt ka. 😀👌

    ReplyDelete