Selasa, 29 Agustus 2017

Struktur Tabel HTML

 Struktur Tabel HTML
A.              Elemen Dasar Tabel
Tabel adalah salah satu metode untuk menyajikan informasi dlm halaman web. Tabel terdiri atas baris dan kolom. Baris merupakan bagian mendatar dan kolom adalah bagian vertikal.
elemen-elemen yang ada pada tabel sbb.
Nama
Fungsi
<table>....</table>
Untuk mendeskripsikan tabel dalam halaman web
<tr>....</tr>
Untuk mendeskripsikan baris dalam tabel
<td>....</td>
Untuk mendeskripsikan kolom dalam tabel
Untuk mengatur posisi objek dalam cell sebuah tabel, dapat digunakan beberapa atribut dalam tag <tr>....</tf> sbg berikut.
·         Align, digunakan untuk mengatur posisi horizontal sebuah objek dalam cell tabel. Ada 3 jenis align, yaitu: left, center, dan right. Left untuk posisi kiri cell, center untuk posisi tengah cell, dan right untuk posisi kanan cell.
·         Valign, digunakan untuk mengatur posisi peletakan sebuah objek pada cell secara vertikal. Ada pilihan dalam menentukan  atribut valign, yaitu top, middle, dan bottom. Top digunakan untuk meletakkan sebuah objek pada posisi paling atas cell, middle untuk meletakkan objek pada tengah cell, dan bottom untuk meletakkan objek pada posisi paling bawah cell.
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>struktur tabel</title>
</head>
<body>
<center><h1>Data Siswa TKJ</h1></center>
<table width=”50%” border=”1” cellspacing=”0” cellpadding=”0” align=”center”>
     <tr>
                <td align=”center”><strong>NIS</strong></td>
                <td align=”center”><strong>NAMA</strong></td>
                <td align=”center”><strong>ALAMAT</strong></td>
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara Rachman</td>
                <td align=”center”>Kediri</td>
     </tr>
</table>
</body>
B.   Atribut Border
Untuk mengatur tebal dan lebar garis pada tabel, harus mengatur nilai atribut border table ketika mendeklarasikan tabel. Semakin besar nilai border, semakin tabal pula garis yg ditampilkan. Jika nilai atribut border semakin besar, lebar garis tabel juga semakin besar.
Contoh men-setting border tabel dalam halaman web:
<!—file apasaja.html-->
<html>
<head>
<title>mengatur border</title>
</head>
<body>
tabel border berukuran 0
<table width=”10%” border=”0” cellspacing=”0”>
     <tr></tr>
                <td align=”center”>45</td>
                <td align=”center”>46</td>
     </tr>
     <tr>
                <td align=”center”>50</td>
                <td align=”center”>51</td>
     </tr>
</table>
tabel dengan border berukuran 1
<table width=”10%” border=”1” cellspacing=”0”>
     <tr></tr>
                <td align=”center”>45</td>
                <td align=”center”>46</td>
     </tr>
     <tr>
                <td align=”center”>50</td>
                <td align=”center”>51</td>
     </tr>
</table>
tabel dengan border berukuran 12
<table width=”10%” border=”12” cellspacing=”0”>
     <tr></tr>
                <td align=”center”>45</td>
                <td align=”center”>46</td>
     </tr>
     <tr>
                <td align=”center”>50</td>
                <td align=”center”>51</td>
     </tr>
</table>
</body>
</html>
C.        Elemen Header
Header dalam tabel berguna untuk memberikan informasi data dalam kolom sebuah tabel. Untuk mendeklarasikan header pada tabel, perlu menambahkan elemen tag </th> pada bagian awal script dan </th> pada akhir script.
Pada elemen header tabel, dapat menerapkan atribut scope dan headers untuk menghubungkan kolom atau baris dalam cell. Atribut scope digunakan untuk menghibungkan data kolom dan baris. Atribut scope dapat diisi dengan nilai col, colgroup, row, dan rowgroup.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membuat header tabel dengan scope</title>
</head>
<body>
<table width=”50%” border=”1” cellspacing=”0”>
     <tr>
                <th>&nbsp;</th>
                <th scope=”col”>Senin</th></!--Scope colom-->
                <th scope=”col”>Selasa</th></!--Scope colom-->
                <th scope=”col”>Rabu</th></!--Scope colom-->
     </tr>
     <tr>
                <th scope=”row”<X-TKJ</th><!—Scope row-->
                <td>sistem Operasi</td>
                <td>LAN</td>
                <td>Matematika</td>
     </tr>
     <tr>
                <th scope=”row”<XI-TKJ</th><!—Scope row-->
                <td>Membangun LAN</td>
                <td>Pemrograman Dasar</td>
                <td>Web Programming</td>
     </tr>
     <tr>
                <th scope=”row”<XII-TKJ</th><!—Scope row-->
                <td>Wide Area Networking</td>
                <td>Pemrograman Web Dinamis</td>
                <td>IPA</td>
     <tr>
</table>
</body>
</html>
D.            Elemen Caption
Untuk memberikan sebuah judul pada tabel, dapat menggunakan elemen caption dengan tag <caption>...</caption>. Penulisan tag caption diletakkan setelah pendeklarasian tag awal tabel <table>. Posisi default caption, yaitu berada diatas tabel.
Contoh membuat caption tabel :
<!—file apasaja.html-->
<html>
<head>
<title>membuat captin tabel</title>
</head>
<body>
<table width=”40%” border=”1” cellspacing=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
     <tr>
                <th>NIS</th><! --Header tabel-->
                <th>NAMA</th><! --Header tabel-->
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara Rachman</td>
     </tr>
</table>
</body>
</html>
E.             Atribut Cellpadding dan Cellspacing
Atribut cellpadding berfungsi untuk mengatur jarak dari border sisi dalam tabel dengan isi teks tabel dalam cell. Adapun atribut cellspacing berfungsi untuk mengatur jarak antara border bagian dalam dan luar. Semakin tinggi nilai atribut cellspacing, semakin lebar pula jarak antara border dalam dengan luar.
Contoh mengatur cellpadding dan cellspacing tabel :
<!—file apasaja.html-->
<html>
<head>
<title>mengatur cellpadding dan cellspacing tabel</title>
</head>
<body>
<table width=”30%” border=”1” cellspacing=”2” cellpadding=”0”>
<caption>Data Siswa SMK</caption><!—caption tabel-->
     <tr>
                <th>NIS</th><! --Header tabel-->
                <th>NAMA</th><! --Header tabel-->
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara Rachman</td>
     </tr>
</table>
</body>
</html>
F.         Menggabungkan Cell
Ada 2 atribut yg dapat digunakan untuk menggabungkan 2 buah cell menjadi 1 cell, yaitu :
a)      Colspan
Digunakan untuk menyatukan satu atau lebih cell berdasarkan kolom.
b)      Rowspan
Digunakan untuk menyatukan satu atau lebih cell berdasarkan baris.
Contoh menggabungkan dua cell menjadi satu :
<!—file apasaja.html-->
<html>
<head>
<title>mengatur lebar cell tabel</title>
</head>
<body>
<table width=”37%” border=”1” cellspacing=”0” cellpadding=”0”>
      <tr>
      <td width=”22%” rowspan=”2”><div align=”center”>NIS</div></td>
      <td width=”31%” rowspan=”2”><div align=”center”>nama</div></td>
      <td colspan=”3”><div align=”center”>Nilai Pelajaran</div></td>
      </tr>
      <tr>
      <td width=”15%”><div align=”center”>IPA</div></td>
      <td width=”15%”><div align=”center”>IPS</div></td>
      <td width=”17%”><div align=”center”>AGAMA</div></td>
     </tr>
     <tr>
                <td>1234567890</td>
                <td>Nabila Mutiara Rachman</td>
                <td>80</td>
                <td>88</td>
                <td>78</td>
     </tr>
</table>
</body>
</html>
G.       Mengatur Background
Background secara harfiah berarti latar belakang. Ada 2 jenis background yg dpt diterapkan pada tabel, yaitu berupa gambar dan warna. Langkah-langkah menerapkan background gambar pada tabel adalah sbg berikut.
a.       Buatlah folder BG pada direktori C (C:\BG)
b.      Persiapkan gambar yg akan dijadikan background sebuah tabel, baik dalam format .jpg, .jpeg, atau .bmp. letakkan file gambar tersebut kedalam folder BG dalam 1 folder dengan file html yg akan dibuat
c.       Selanjutnya, buat file “gambar.html” dan tulis kode seperti contoh berikut
Contoh mengatur background gambar pada tabel :
<!—file apasaja.html-->
<html>
<head>
<title>background gambar pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” background=”foto.jpg”>
<tr>
                <th>NIS</th><!--Header tabel-->
                <th>NAMA</th><!--Header tabel-->
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara R </td>
     </tr>
</table>
</body>
</html>

Contoh menagtur background warna pada tabel :
<!—file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
                <th>NIS</th><!--Header tabel-->
                <th>NAMA</th><!--Header tabel-->
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara R </td>
     </tr>
</table>
</body>
</html>

H.            Atribut Align
Ada 3 nilai yang dapat diterapkan pada atribut align, yaitu left, center, dan right. Left digunakan untuk meletakkan isi pada sisi sebelah kiri cell, center digunakan untuk meletakkan isi pada posisi tengah, dan right untuk meletakkan isi pada sisi sebelah kanan
Contoh menentukan posisi isi cell dengan align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”30%” border=”1” bgcolor=”#FFFF33”>
<tr>
                <th align=”left”>NIS</th><!--header tabel berada pada posisi kiri-->
                <th align=”right”>NIS</th><!--header tabel berada pada posisi kanan-->
     </tr>                                        
     <tr>
                <td align=”center”>1234567890</th><!--isi sel pada posisi tengah-->
                <td align=”center”>Nabila Mutiara R</td>
     </tr>
</table>
</body>
</html>
I.                Meletakkan Tabel di Dalam Tabel
Dengan menggunakan tabel dapat menentukan struktur utama sebuah web. Teknik sederhana yg dapat digunakan untuk melakukan hal tersebut adalah meletakkan tabel di tabel utama.
Contoh menentukan isi cell dengan align :
<!--file apasaja.html-->
<html>
<head>
<title>background warna pada tabel</title>
</head>
<body>
<table align=”center” width=”50%” border=”1”>
<tr>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel 1</caption>
<tr>
                <th>NIS</th>
                <th>NAMA</th>
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara R</td>
     </tr>
</table>
</td>
<td>
<tablealign=”center”width=”80%”border=”1”bgcolor=”#FFFF33”>
<caption>Tabel terletak pada sel 2</caption>
<tr>
                <th>NIS</th>
                <th>NAMA</th>
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara R</td>
     </tr>
</table>
</td>
</tr>
</table>
</body>
</html>
J.               Atribut Frame
Atribut frame pada tabel digunakan untuk mengatur jenis border luar pada tabel. Ada beberapa nilai yg digunakan pada atribut frame, antara lain :
1.       Above
2.       Bellow
3.       Border
4.       Box
5.       Hsides
6.       Lhs
7.       Rhs
8.       Void
9.       Vsides
contoh menggunakan atribut frame :
<table frame=”box”>
<!--isi tabel-->
</table>
<html>
<head>
<title>Tabel dengan Atribut Frame</title>
</head>
<body>
<table frame=”box”>
     <tr>
                <td align=”center><strong>NIS</strong></td>
                <td align=”center><strong>NAMA</strong></td>
                <td align=”center><strong>ALAMAT</strong></td>
     </tr>
     <tr>
                <td align=”center”>1234567890</td>
                <td align=”center”>Nabila Mutiara R</td>
                <td align=”center”>Kediri</td>
     </tr>
</table>
</body>
</html>

Terimakasih JJJ






               






               


Diposting oleh di Tidak ada komentar:

Minggu, 27 Agustus 2017

format teks halaman web

 A.                     Struktur Dasar HTML
1)   Elemen Halaman
Elemen HTML adalah bagian-bagian pembentuk halaman web yang meliputi head, body, title, link, text, paragraph, list, dsb. Elemen html ditandai dg simbol “tag”. Tag merupakan bentuk simbol berbentuk “<”  sebagai tanda awal penulisan elemen dan diakhiri “>” sebagai tanda akhir penulisan sebuah elemen.
2)   Bagian Head
bagian head memiliki fungsi untuk memberikan informasi tentang halaman web itu sendiri, baik judul halaman, konten, jenis halaman, dan jenis karakter penulisan. Bagian head selalu diawali dengan tag awal <head> dan diakhiri dengan tag akhir </head>.
contoh :
<head>
                <title>ini halaman we baru</title>
</head>
penjelasan :
·         <head>
Digunakan sebagi awal penanda script bagian head HTML.
·         <title>
sebagai awal tanda judul sebuah halaman web
·         Ini halaman web baru
judul halaman yang akan ditampilkan pada web browser
·         </title>
tag akhir title
·         </head>
tag akhir head
3)   Bagian body
pada bagian body, semua script html akan diterjemahkan menjadi bentuk informasi pada halaman web, baik berupa teks, audio, video, gambar, dan animasi. Bagian body sebuah halam web html selalu diawali tag <body> dan diakhiri tag </body>.
4)   Mengganti baris
script program html yang ditulis pada bagian body akan dicetak memanjang dalam satu baris ketika ditampilkan dalam satu baris oleh karenea itu diperlukan script tamabahan untuk mencetak pada baris selanjutnya dengan tag <br>
5)   Membentuk paragraf
dengan memberikan tanda tag awal paragraf <p> diikuti teks yang akan ditampilkan pada web browser dan diakhiri tag akhir paragraf </p>, maka informasi teks akan disusun menyerupai model paragraf.
6)   Garis horizontal
untuk membuat garis horizontal dapat menggunakan tag <hr>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title>
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah.
</body>
</html>
7)   Membuat komentar
untuk menambahkan komentar diawali dengan tanda “<!—“ diikuiti komentar kemudian diakhiri dengan tanda “-->”
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>garis horizontal</title> <!—judul halaman web-->
</head>
<body>
terserah apa saja diatas. <hr> terserah apa saja dibawah. <!—konten halaman web-->
</body>
</html>

B.Format teks
teks adalah informasi yang ditampilkan dalam halaman web yang terdiri atas gabungan karakter alfabet, numerik dan simbol-simbol khusus yang terdapat dalam kode ASCII
1)   Memanipulasi tampilan teks pada halaman web
·         Mencetak tebal teks
format: <b>teks dicetak tebal</b>
·         Mencetak tebal teks dengan tag strong
format: <strong>teks dicetak tebal strong</strong>
·         Mecetak miring teks
format: <i>teks dicetak miring</i>
·         Mencetak teks bergaris bawah
format: <u>teks dicetak dengan garis bawah</u>
·         Memberi tekanan teks
format: <em>teks tekanan</em>
·         Membesarkan huruf
format: <big>hsjgshakj</big>
·         Mengecilkan huruf
<small>hakjgkhdgkha</small>
·         Mencetak superscript teks
format: <sup>hgsiafif</sup>
·         Mencetak subscript teks
format: <sub>jajhdkhfkj</sub>
·         Mencetak teks berkedip
format: <blink>jhwougfougwg</blink>
·         Mencetak teks berjalan
format: <marquee>jjewgvgohwoho</marquee>
·         Mencetak teks dengan coretan
format: <s>jwhkeg3wgih</s>
2)  Format heading
fungsi utama heading adalah untuk mengatur besar ukuran teks dalam halaman web yang biasanya diterapkan pada sebuah judul atau tema informasi yang terdapat pada halaman web. Penulisan  heading diawali dengan tag <h1> dan diakhiri dengan tag </h1> dengan formasi heading sampai dengan 6 ukuran.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>heading</title>
</head>
<body>
<h1>teks dengan heading berkuran1</h1>
<h2>teks dengan heading berkuran2</h2>
<h3>teks dengan heading berkuran3</h3>
<h4>teks dengan heading berkuran4</h4>
<h5>teks dengan heading berkuran5</h5>
<h6>teks dengan heading berkuran6</h6>
</body>
</html>
3)   Bentuk preformat teks
dalam html terdapat fungsi preformat teks yang berguna untuk mencetak teks dalam web browser sesuai jarak, ukuran, dan lebar teks dengan penulisan kode program html bagian body dengan menambahkan tag awal <pre> dan tag akhir <pre>
4)   Format address
tag <address> merupakan standar kode html yang digunakan untuk penulisan sebuah alamat intuisi yang berfungsi sebagai informasi kontak sebuah intuisi. Hasil output yang ditampilkan akan dicetak miring dan ketika penulisan alamat lebih dari satu baris maka harus disertakan tag ganti baris.
5)   Format keluaran program komputer
beberapa script html yang dapat digunakan untuk mendefinisikan proses secara komputerisasi :
·         <code>.....</code>
digunakan untuk mendefinisikan kode program tertentu yang ditampilkan pada web page.
·         <var>.....</var>
digunakan untuk mendefinisikan variabel dalam program
·         <samp>.....</samp>
digunakan untuk mendefinisikan contoh keluaran program
·         <tt>.....</tt>
untuk mendefinisikan teletype text
6)   Format Abbr dan Acronym
tag <abbr> dan <acronym> digunakan untuk menampilkan informasi yang berisi kepanjangan sebuah teks.
contoh penggunaan Abbr dan Acronym :
<!—file apasaja.html-->
<html>
<head>
<title>mempersingkat istilah</title>
</head>
<body>
<abbr title=”palang merah indonesia”>PMI</abbr><br>
<acronym title=”SMK Negeri 2 Kediri”>smekda</acronym>
</body>
</html>
7)   Mengubah arah tampilan teks
Bdo merupakan singkatan dari budirectional override yang berguna untuk mengubah arah penulisan teks pada halaman web.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>membalikkan arah teks</title>
</head>
<body>
<bdo dir=”rtl”>pemrograman web dengan hypertext markup language</bdo><br>
<bdo dir=”ltr”>teknologi informasi dan komunikasi</bdo>
</body>
</html>
8)   Membuat kutipan teks
Tag <q> untuk membuat kutipan pendek
Tag <blockquote>, untuk menyatakan kutipan panjang
Contoh :
<!—file apasaja.html-->
<html>
<head>
<title>kutipan teks</title>
</head>
<body>
dibawah ini adalah cara mengutip kalimat yang panjang.
<blockquote>
baris kalimat ke 1 dalam blockquote<br>
baris kalimat ke 2 dalam blockquote<br>
baris kalimat ke 3 dalam blockquote<br>
baris kalimat ke 4 dalam blockquote<br>
baris kalimat ke 5 dalam blockquote<br>
</blockquote>
sementara itu, dibawah ini adalah kutioan pendek.<br><q>
baris kalimat ke 1 dengan kutipan pendek<br>
baris kalimat ke 2 dengan kutipan pendek<br>
</q>
</body>
</html>

9)   Penyisipan dan penghapusan teks
                Untuk melakukan koreksi informasi yang salah pada web, dapat digunakan tag <ins>                           yang memiliki efek tulisan bergaris bawah seperti efek tulisan dengan tag
                <a href>=” “>
                contoh :
                <!—file apasaja.html-->
                <html>
                <head>
                <title>hapus dan sisip teks</title>
                </head>
                <body>
                nilai grosir 1 kodi adalah sama dengan ....<br>
                jawaban :<br>
                a.<del>12 pcs</del> jawaban yang salah<br>
                b.<ins>20 pcs</ins> jawaban yang sudah dikoreksi
                </body>
                </html>

C.List HTML
list merupakan bentuk struktur dalam HTML yang digunakan untuk menampilkan daftar tertentu dalam halaman web.
1)      List bernomor urut (ordered list)
Teknik menampilkan daftar tertentu dalam halaman web menggunakan otem penomoran. Untuk menggunakan list bernomor, digunakan tag <ol> dan diakhiri dengan tag </ol>
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>list bernomor</title>
</head>
<body>
menu restoran
<ol>
  <li>ayam bakar</li>
  <li>ayam goreng</li>
  <li>ayam penyet</li>
</ol>
</body>
</html>
Adapun untuk menampilakn nomor urut dengan model tertentu, dapat digunakan argumen berikut



Argumen
Fungsi
l
Untuk menampilkan nomor urut dengan angka dalam romawi besar (I, II, III dan seterusnya)
i
Untuk menampilkan nomor urut dengan angka dalam romawi kecil (i, ii, iii dan seterusnya)
a
Untuk menampilkan nomor urut dengan menggunakan abjad kecil (a, b, c, d dan seterusnya)
A
Untuk menampilkan nomor urut dengan menggunakan abjad besar (A, B, C, D dan seterusnya)

2)      List tanpa urutan nomor (unordered list)
untuk membuat daftar tertentu tanpa mempergunakan sebuah urutan penomoran, anda dapat menggunakan tag <ul> dan diakhiri dengan </ul>. Ada beberapa macam jenis tanda unordered list seperti berikut.

Argumen
Fungsi
Disc
Untuk menampilkan pengurutan dengan tanda lingkaran (bullet) tanpa warna pada sisi tengahnya
Square
Untuk menampilkan pengurutan dengan tanda kotak hitam penuh
Circle
Untuk menampilkan pengurutan dengan tanda lingkaran (bullet) hitam penuh

3)      List bersarang
suatu subdaftar baru didalam sebuah daftar.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>hapus dan sisip teks</title>
</head>
<body>
menu bersarang
<ol>
<li>Daging</li>
                <ul>menu ayam
                <li>ayam bakar</li>
                <li>bebek panggang</li>
                </ul>
<li>sayur</li>
                <ol>menu sayur
                <li>sayur sup</li>
                <li>sayur sup</li>
                </ol>
</ol>
</body>
</html>
4)      List terdefinisi
adalah sebuah daftar yang menggunakan tag <dl> dan diakhiri dengan </dl>.
contoh :
<!—file apasaja.html-->
<html>
<head>
<title>list terdefinisi</title>
</head>
<body>
contoh list yang terdefinisi
<dl>
<dt>PMI</dt>
<dd>palang merah indonesia</dd>
<dt>PMR</dt>
<dd>palang merah remaja</dd>
</dl>
</body>
</html>



Diposting oleh di 2 komentar:
Langganan: Postingan (Atom)