1. Tugas 3: HTML Table & List
    1.Tabel menyimpan 4 informasi: No, Nama (Nama Depan, Nama Belakang), Deskripsi.
  2. Judul kolom "No." dan "Deskripsi" menggabungkan 2 baris tabel
  3. Judul Kolom "Nama" menggabungkan 2 kolom tabel.
  4. Tulisan pada Kolom Judul dibuat rata tengah.
  5. Tabel memiliki batas (border) yang bergabung menjadi satu (collapsed)
  6. Tabel memiliki caption: 10 Dosen Favorit Saya ('Dosen Favorit' bisa diganti dengan yang lain)
  7. Data yang diisi pada tabel memiliki warna background yang berbeda antara baris genap dan baris ganjil (2 poin)
List:
  1. Buatlah sebuah daftar (list) yang mencantumkan 3 barang yang terdapat di tas Anda dengan menggunakan bullet bertipe: circle
  2. Buatlah sebuah daftar (list) yang mencantumkan 3 cita-cita terbesar Anda dengan menggunakan poin berupa huruf kecil a, b, c.
      

hasil outuput:
1.cara membuat sebuah tabel tagnya sebagai berikut:

<html>
<head>
</head>
<body>
<table border="1" width="40%">
        <tr>
            <td> No</td>
            <td> Nama depan </td>
            <td> Nama belakang</td>
            <td>Deskripsi</td>
        </tr>
        </table>
</body>
</html>

2.untuk mengerjakan nomor itu caranya seperti gambar dibawah ini

<html>
<head>
</head>
<body>
<table border="1" width="50%">
        <tr><td rowspan="2">No</td>
            <td>Nama</td>
            <td></td>
            <td rowspan="2">Deskripsi</td>
        </tr>
        <tr>
            <td>Nama depan</td><td> Nama belakang </td>
        </tr>
            <br>
        </table>
</body>
</html>

3.selanjutnya tagnya sebagai berikut:

<html>
<head>
</head>
<body>
 <table border="1" width="40%">
        <tr>
            <td rowspan="2">No</td>
            <td colspan="2">Nama</td>
            <td rowspan="2">Deskripsi</td>
        </tr>
        <tr>
            <td>Depan</td>
            <td>Belakang</td>
        </tr>
            <br>
        </table>
</body>
</html>

4.selanjutnya:

<html>
<head>
</head>
<table border="1" width="40%">
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2">Nama</th>
            <th rowspan="2">Deskripsi</th>
        </tr>
        <tr>
            <th>Depan</th>
            <th>Belakang</th>
        </tr>
            <br>
        </table>
</body>
</html>

5.next.

<html>
<head>
</head>  <table border="1" width="45%" style="border-collapse:collapse";>
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2">Nama</th>
            <th  rowspan="2">Deskripsi</th>
        </tr>
        <tr>
            <th>Depan</th><th>Belakang</th>
            </tr>
            <br>
        </table>
</body>
</html>

6.next.

<html>
<head>
</head>
 <table width="70%" border="2" style="border-collapse:collapse";>
            <caption><b>Nama-nama Dosen Favorit di Unsri</b></caption>
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2">Nama</th>
            <th rowspan="2">Deskripsi</th>
        </tr>
        <tr><th>Depan</th><th>Belakang</th></tr>
        <tr><th>1</th>  <td>&nbsp;Rizka Dhini Kurnia,</td>  <td>&nbsp;S.T.,M.Sc</td>  <td>&nbsp;Tenaga Pengajar</td></tr>
        <tr><th>2</th>  <td>&nbsp;Dwi Rosa Indah,</td>      <td>&nbsp;S.T.,M.T.</td>  <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>3</th>  <td>&nbsp;Rahmat Izman Heroza,</td> <td>&nbsp;S.T.,M.T</td>   <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>4</th>  <td>&nbsp;Pacu Putra Suarli,</td>   <td>&nbsp;M.Cs</td>       <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>5</th>  <td>&nbsp;Rusdi Efendi,</td>        <td>&nbsp;M.Kom</td>      <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>6</th>  <td>&nbsp;Muhammad Hidayat,</td>    <td>&nbsp;S.E.M.Si,Ak</td><td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>7</th>  <td>&nbsp;Yadi Utama,</td>          <td>&nbsp;M.Kom</td>      <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>8</th>  <td>&nbsp;Alsella Meiriza,</td>     <td>&nbsp;M.T</td>        <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>9</th>  <td>&nbsp;Jaidan Jauhari,</td>      <td>&nbsp;M.T</td>        <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>10</th> <td>&nbsp;Yusuf Hartono,</td>       <td>&nbsp;Ph.D</td>       <td>&nbsp;Tenaga pengajar</td></tr>
        </table>
</body>
</html>


7.next.

<html>
    <head>
    <title>      
<style>
            table#t07 tr:nth-child(even){
                        background-color: red;}
            table#t07 tr:nth-child(odd) {
                        background-color:blue;}
            table#t07 th {
                        background-color: red;
                        color: white;}
            table#t07 td {
                        text-align:center;
                        color:white;}
        </style>
<table id="t07" border="1" style="border-collapse:collapse; width:60%;">
            <caption><b>Nama-nama Teman  Favorit di Unsri</b></caption>
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2" style="background-color:blue;">Nama</th>
            <th rowspan="2">Deskripsi</th>
        </tr>
        <tr><th><b>Depan</b></th> <th>Belakang</th></tr>
        <tr><td>1</td> <td>Muhammad</td> <td>cahyadi</td>    <td>Kawan pertama Diunsri</td></tr>
        <tr><td>2</td> <td>Herlan</td>   <td>wijaya</td>     <td>Teman Pk2</td></tr>
        <tr><td>3</td> <td>Muhhamad</td> <td>solehhudin</td> <td>Teman fasilkom</td></tr>
        <tr><td>4</td> <td>Rama</td>     <td>wira</td>       <td>Kakak fasilkom</td></tr>
        <tr><td>5</td> <td>Dikki</td>    <td>sanchez</td>    <td>Pemain futsal</td></tr>
        <tr><td>6</td> <td>Madani</td>   <td>rahmatullah</td><td>Teman kelas</td></tr>
        <tr><td>7</td> <td>Hakim</td>    <td>zaputra</td>    <td>Kakak fasilkom</td></tr>
        <tr><td>8</td> <td>Rahmadi</td>  <td>iskandar</td>   <td>Teman kelas</td></tr>
        <tr><td>9</td> <td>Satria</td>     <td>sudrajat</td> <td>Teman fasilkom</td></tr>
        <tr><td>10</td><td>Aditiya</td>  <td>muaffan</td>    <td>Saudara di fasilkom</td></tr>
        </table>
    </head>
</body>
</html>

list.
1.ol
<html>
<head>
</head>
<body>
<h4 align="left">&nbsp;&nbsp;&nbsp; Contoh list jenis unordered List</h4>
            <ul style="list-style-type:circle; text-align:left;">
                <li>Laptop</li>
                <li>Buku-tulis</li>
                <li>Pena</li>
            </ul>
</body>
</html>

2.ul

<html>
<head>
</head>
<body>
<h4 align="left">&nbsp;&nbsp;&nbsp; Contoh list jenis ordered List</h4>
            <ol type="a" style="text-align:left";>
                <li>Ilmuan</li>
                <li>System Analist</li>
                <li>Menteri</li>
            </ol> 
</body>
</html>



yang terakhir yaitu keseluruhan dari html yang telah dimodifikasi.

<html>
    <head>
    <title>Tugas 3- <09031381621059></title>
        <style>
            table#t07 tr:nth-child(even){
                        background-color: red;}
            table#t07 tr:nth-child(odd) {
                        background-color:blue;}
            table#t07 th {
                        background-color: red;
                        color: white;}
            table#t07 td {
                        text-align:center;
                        color:white;}
        </style>
    </head>
        <body style="background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieGYqZpcP0DdUIfarfEgvohA6aU8AtdczBSCBicmkPJZ5lMt19nwGKQX3-SjjuccUey_A2QdK69hONxpJpTbJX4L3HOvwGqshnu0YAZLQTNrxNBnXqEd9j5zTg4zy_u5bf6Lu_V-GF8r9u/s1600/22.jpg); padding-left: 300px;padding-right: 300px;">
            <center>
                <hr>
                    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCeehnyLRSw4_k5B4AflL1jeedVjD0AI6qFKVf-77x8sOmRYiaG6P7IMs0o_JoA9Wof9-zHOtdB-vtAjHmRLiLWsMYy4XO3TKPr8LgwC3KjiuThItc9HbMUzqEJgkNT1w5t9ET_jB5kP18/s1600/th.jpg" title="lambang unsri" />
            </center>
                <h1 align="center" style="color:red";>BELAJAR <br>MEMBUAT SEBUAH TABEL</h1>
                <hr>
                <h3 style="color:lavender;"><marquee><i>Welcome to Website Beriadi Agung Nur Rezqe</i></marquee></h3>
                <hr>
            <center>
        <div style="  width:100%; height:350%; border:3px solid red; background-color:lavender;" title="isi">
                <h1><u>TABEL</u></h1>
                    <p style="font-family:Times New roman; padding-left:18px; padding-right:18px; text-align:justify";>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tabel adalah daftar yang berisi ikhtisar sejumlah data-data
                        informasi yang biasanya berupa kata-kata maupun bilangan yang
                        tersusun dengan garis pembatas .pada html Dalam membuat sebuah tabel ada beberapa unsur yang ada didalam sebuah tabel yang pertama yaitu &lt;table&gt;,&lt;tr&gt;,&lt;td&gt;,&lt;th&gt;
                        dibawah ini adalah contoh-contoh tabel yang berbeda antara lain:</p>
                <h2 align="left">&nbsp;&nbsp; <u>Example Table</u></h2>
                <h4 align="left">&nbsp;&nbsp;&nbsp; 1.Pada contoh pertama ini tabel menggunakan ukuran dan juga border.</h4>
        <table border="1" width="40%">
        <tr>
            <td> No</td>
            <td> Nama depan </td>
            <td> Nama belakang</td>
            <td>Deskripsi</td>
        </tr>
        </table>
            <br>
                <h4 align="left">&nbsp;&nbsp;&nbsp; 2.Contoh selanjutnya yaitu sebuah tabel yang menggabungkan 2 buah baris menjadi satu.</h4>
        <table border="1" width="50%">
        <tr><td rowspan="2">No</td>
            <td>Nama</td>
            <td></td>
            <td rowspan="2">Deskripsi</td>
        </tr>
        <tr>
            <td>Nama depan</td><td> Nama belakang </td>
        </tr>
            <br>
        </table>
                <h4 align="left">&nbsp;&nbsp;&nbsp; 3.Contoh selanjutnya yaitu sebuah tabel yang menggabungkan 2 buah kolom dan baris menjadi satu.</h4>
        <table border="1" width="40%">
        <tr>
            <td rowspan="2">No</td>
            <td colspan="2">Nama</td>
            <td rowspan="2">Deskripsi</td>
        </tr>
        <tr>
            <td>Depan</td>
            <td>Belakang</td>
        </tr>
            <br>
        </table>
            <br>
                <h4 align="left">&nbsp;&nbsp;&nbsp; 4.Contoh selanjutnya yaitu sebuah membuat semua tulisan didalam tabel menjadi rata tengah.</h4>
        <table border="1" width="40%">
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2">Nama</th>
            <th rowspan="2">Deskripsi</th>
        </tr>
        <tr>
            <th>Depan</th>
            <th>Belakang</th>
        </tr>
            <br>
        </table>
                <h4 align="left">&nbsp;&nbsp;&nbsp; 5.Contoh selanjutnya yaitu menggabungkan garis menjadi satu yaitu collapse.</h4>
        <table border="1" width="45%" style="border-collapse:collapse";>
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2">Nama</th>
            <th  rowspan="2">Deskripsi</th>
        </tr>
        <tr>
            <th>Depan</th><th>Belakang</th>
            </tr>
            <br>
        </table>
            <br>
                <h4 align="left">&nbsp;&nbsp;&nbsp; 6.Contoh selanjutnya yaitu sebuah contoh tabel yang ada isi datanya.</h4>
        <table width="70%" border="2" style="border-collapse:collapse";>
            <caption><b>Nama-nama Dosen Favorit di Unsri</b></caption>
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2">Nama</th>
            <th rowspan="2">Deskripsi</th>
        </tr>
        <tr><th>Depan</th><th>Belakang</th></tr>
        <tr><th>1</th>  <td>&nbsp;Rizka Dhini Kurnia,</td>  <td>&nbsp;S.T.,M.Sc</td>  <td>&nbsp;Tenaga Pengajar</td></tr>
        <tr><th>2</th>  <td>&nbsp;Dwi Rosa Indah,</td>      <td>&nbsp;S.T.,M.T.</td>  <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>3</th>  <td>&nbsp;Rahmat Izman Heroza,</td> <td>&nbsp;S.T.,M.T</td>   <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>4</th>  <td>&nbsp;Pacu Putra Suarli,</td>   <td>&nbsp;M.Cs</td>       <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>5</th>  <td>&nbsp;Rusdi Efendi,</td>        <td>&nbsp;M.Kom</td>      <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>6</th>  <td>&nbsp;Muhammad Hidayat,</td>    <td>&nbsp;S.E.M.Si,Ak</td><td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>7</th>  <td>&nbsp;Yadi Utama,</td>          <td>&nbsp;M.Kom</td>      <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>8</th>  <td>&nbsp;Alsella Meiriza,</td>     <td>&nbsp;M.T</td>        <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>9</th>  <td>&nbsp;Jaidan Jauhari,</td>      <td>&nbsp;M.T</td>        <td>&nbsp;Tenaga pengajar</td></tr>
        <tr><th>10</th> <td>&nbsp;Yusuf Hartono,</td>       <td>&nbsp;Ph.D</td>       <td>&nbsp;Tenaga pengajar</td></tr>
        </table>
                <h4 align="left">&nbsp;&nbsp;&nbsp; 7.Contoh terakhir yaitu membuat sebuah tabel yang menggunakan color.</h4>
        <table id="t07" border="1" style="border-collapse:collapse; width:60%;">
            <caption><b>Nama-nama Teman  Favorit di Unsri</b></caption>
        <tr>
            <th rowspan="2">No</th>
            <th colspan="2" style="background-color:blue;">Nama</th>
            <th rowspan="2">Deskripsi</th>
        </tr>
        <tr><th><b>Depan</b></th> <th>Belakang</th></tr>
        <tr><td>1</td> <td>Muhammad</td> <td>cahyadi</td>    <td>Kawan pertama Diunsri</td></tr>
        <tr><td>2</td> <td>Herlan</td>   <td>wijaya</td>     <td>Teman Pk2</td></tr>
        <tr><td>3</td> <td>Muhhamad</td> <td>solehhudin</td> <td>Teman fasilkom</td></tr>
        <tr><td>4</td> <td>Rama</td>     <td>wira</td>       <td>Kakak fasilkom</td></tr>
        <tr><td>5</td> <td>Dikki</td>    <td>sanchez</td>    <td>Pemain futsal</td></tr>
        <tr><td>6</td> <td>Madani</td>   <td>rahmatullah</td><td>Teman kelas</td></tr>
        <tr><td>7</td> <td>Hakim</td>    <td>zaputra</td>    <td>Kakak fasilkom</td></tr>
        <tr><td>8</td> <td>Rahmadi</td>  <td>iskandar</td>   <td>Teman kelas</td></tr>
        <tr><td>9</td> <td>Satria</td>     <td>sudrajat</td> <td>Teman fasilkom</td></tr>
        <tr><td>10</td><td>Aditiya</td>  <td>muaffan</td>    <td>Saudara di fasilkom</td></tr>
        </table>
            <hr style="width:60%;">
            <br>
            <br>
                <h1><u>LIST</u></h1>
                    <p style="font-family:Times New roman; padding-left:18px; padding-right:18px; text-align:justify";>&nbsp;&nbsp;&nbsp; list adalah bagian teks didalam dokumen yang berisi daftar item dari suatu kelompok atau group tertentu.
                        list item merupakan perintah yang digunakan dalam html untuk membuat daftar atau pengelompokkan kata [list]
                        Ada beberapa jenis-jenis list dalam html,antara lain:</p>
            <ul style="text-align:left";>
                <li>Ordered list</li>
                <li>Unordered list</li>
                <li>Directory list</li>
                <li>menu list</li>
                <li>definisi list</li>
                <li>definisi list</li>
            </ul>
                <h2 align="left">&nbsp;&nbsp; <u>Example list</u></h2>
                <h4 align="left">&nbsp;&nbsp;&nbsp; Contoh list jenis unordered List</h4>
            <ul style="list-style-type:circle; text-align:left;">
                <li>Laptop</li>
                <li>Buku-tulis</li>
                <li>Pena</li>
            </ul>
                <h4 align="left">&nbsp;&nbsp;&nbsp; Contoh list jenis ordered List</h4>
            <ol type="a" style="text-align:left";>
                <li>Ilmuan</li>
                <li>System Analist</li>
                <li>Menteri</li>
            </ol>
                <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlMUhSBVsIQqAQVcRiS0i-Uw4YU4pEW0knmWRXisU0_5F0eBzHKLwTBi0CD48gnsCQMwB-2FHJWPExuRhhyphenhyphen1sjkTok-SpwRqX6l2nbLAgH15umbihMhfsRY3fFMb57tdETm7Uqk9FrcGcS/s1600/IU.jpg" width="110px" height="110px" title="jangan diklik" usemap="#a"/>
                    <map name="a">
                                <area shape="polygon" coords="26,78,84,79,84,121,66,120" href="http://2.bp.blogspot.com/-AU9QZqnXVUU/UMc5qyjUMGI/AAAAAAAAUPA/4sKWx36ByEA/s1600/tumblr_mb0y03k2H91qm3ypqo1_500.gif" alt="father" title="danger" target="_blank"/>
                            </map>
        </div>
                <h3 style="color:lavender;"><marquee><i>Thank you and good bye :)</i></marquee></h3>
        <hr>
        </center>
    </body>
</html>

Komentar

Posting Komentar

Postingan populer dari blog ini

TUGAS 7 Javascript & DHTML

Gambar
Buatlah sebuah halaman web dengan ketentuan sebagai berikut: Menampilkan alert "Selamat Datang" ketika halaman pertama kali dibuka terdapat dua buah input text dimana user bisa memasukkan 2 buah angka, dan sebuah tombol. Jika tombol ini ditekan, hasil perkalian 2 buah angka ini akan ditampilkan di sebelah tombol. terdapat dua buah input text dimana user bisa memasukkan nama depan dan nama belakangnya, dan sebuah tombol. Jika tombol ini ditekan, hasil penggabungan 2 buah nama ini akan ditampilkan di sebelah tombol. terdapat dua buah input text dimana user bisa memasukkan  2 buah angka yang nilai awal keduanya 0. Jika nilai input text ini berubah, akan ditampilkan sesuatu sesuai dengan nilai kedua input text tersebut. Jika input pertama lebih besar dari input kedua, akan ditampilkan "A menang". Jika input pertama lebih kecil dari input kedua, akan ditampilkan "B menang". Jika input pertama sama dengan input kedua, akan ditampilkan "Seri...
Baca selengkapnya

Pengenalan apa itu website statis

Gambar
Website statis  yaitu website yang mana pengguna tidak bisa mengubah konten dari web tersebut secara langsung menggunakan browser. Interaksi yang terjadi antara pengguna dan server hanyalah seputar pemrosesan link saja.  Tugas 2 Pemrograman Web Buat background dengan warna tertentu dengan nama (i.e: red, green) Buat sebuah judul tulisan dengan warna tertentu dengan cara selain dengan nama (gunakan HEX) Judul dibikin rapat tengah. Buat tulisan minimal 2 paragraf dengan font tertentu tentang tempat makan favorit Anda di Palembang dan sekitarnya. Dalam tulisan tersebut, huruf pertama setiap paragraf dibikin dengan huruf kapital dan font berukuran lebih besar. Gunakan ke-10 element berikut di dalam tulisan Anda: <b> Defines bold text <em> Defines emphasized text <i> Defines italic text <small> Defines smaller text <strong> Defines important text <sub> Defines subscripted text <sup> Defines superscripted text <in...
Baca selengkapnya

Tugas 9 Pemrograman Web

Buatlah sebuah halaman web dengan AJAX pada hosting yang telah Anda miliki dengan ketentuan sebagai berikut: memiliki sebuah tombol yang jika di-klik akan mengambil judul pada tautan http://api.babyhanana.com/index.php/home/judul dan menampilkannya pada web Anda. memiliki sebuah tombol yang jika di-klik akan mengambil url gambar pada tautan  http://api.babyhanana.com/index.php/home/gambar dan menampilkan gambarnya pada web Anda memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori pada tautan http://api.babyhanana.com/index.php/home/kategori dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> memiliki sebuah tombol yang jika di-klik akan mengambil daftar kategori dalam format JSON pada tautan http://api.babyhanana.com/index.php/home/kategori_json dan menampilkan setiap kategori tersebut pada web Anda dengan menggunakan elemen <li> (gunakan for) memiliki sebuah tombol yang jika di-kl...
Baca selengkapnya