Minggu, 03 September 2017

Struktur Tabel Html

Struktur Tabel HTML
A.   Elemen Dasar Tabel
Tabel adalah salah satu metode untuk menyajikan informasi dalam halaman web yg terdiri atas baris dan kolom. Baris adalah bagian mendatar ,sedangkan kolom bagian vertikal pada table. Pertemuan Antara baris dan kolom disebut cell.
Syntax sebuah table dalam pemrograman web adalah :
<table>
  <!— isi baris dan kolom -->
</table>
Script program yg lengkap adalah sbgai berikut :

 Dgn output





















Elemen elemen yg ada pada table adalah sbg berikut :
1.      <table>…</table> untuk mendeskripsikan tabel dalam halaman web
2.      <tr>…</tr>  untuk mendeskripsikan baris dalam tabel
3.      <td>…</td> untuk mendeskripsikan kolom dalam tabel
Atribut untuk mengatur posisi objek dalam cell sebuah tabel dengan tag <tr>…</tr>
·         Align untuk mengatur posisi horizontal objek dalam cell. Yaitu left untuk posisi kiri cell, center untuk posisi tengah, right untuk posisi kanan cell
·         Valign untuk mengatur posisi peletakan objek pada cell secara vertikal. Yaitu top untuk meletakkan objek pada posisi paling atas cell, middle untuk meletakkan objek pada posisi tengah cell, bottom untuk meletakkan objek pada posisi paling bawah.
Contoh script Membuat tabel dalam halaman web :


B.   Atribut Border
Untuk mengatur tebal dan garis pada tabel,besaran nilai atribut tabel dihitung dalam ukuran pixel. Nilai 0 pada border menyebabkan tabel tampil seperti tidak memiliki garis. Nilai atribut border semakin besar ,maka lebar garis tabel juga semakin besar. Namun hanya pada sisi luarnya,sedangkan pada bagian dalam tabel tetap sama.
Contoh script  dan output men-setting border tabel dalam halaman web :





C.   Elemen Header
Untuk memberikan informasi data dalam kolom sebuah tabel. Dapat menggunakan elemen tag pada bagian awal <th> dan pada bagian akhir </th> . Kelebihan menggunakan header pada tabel adalah teks yg diletakkan pada header scara otomatis berada pada posisi tengah (center) tanpa harus menambahkan atribut align=``center``.
Pada elemen header,anda bisa menerapkan atribut scope dan headers untuk menghubungkan kolom atau baris dalam cell. Atribut scope dapat diisi dengan nilai col, colgroup, row, dan rowgroup.
Contoh script dan output Membuat header dengan atribut scope :









Atribut header pda elemen header tabel akan menerima nilai berupa id dari cell untuk merujuk kaitan antar header sumber tabel.
Contoh script dan output Membuat header dengan atribut header :


D.  Elemen Caption
Untuk memberikan sebuah judul pada tabel. Menggunakan tag <caption> … </caption>. Penulisan tag caption diletakkan setelah pendeklarasian tag awal tabel <table>. Posisi default caption berada diatas tabel.
Contoh script dan output Membuat caption tabel :

E.   Atribut Cellpadding dan Cellspacing
Atribut cellpadding berfungsi untuk mengatur jarak dari border sisi dalam tabel dengan isi teks tabel dalam cell. Nilai atribut ini berupa angka dalam satuan pixel. Jika nilai cellpadding=``3``,web browser akan menampilkan tabel dengan jarak sebesar 3 pixel dari border sisi dalam tabel dengan isi teks tabel.
        Atribut cellspacing berfungsi untuk mengatur jarak Antara border bagian dalam dan luar. Jika anda memberikan nilai cellspacing=``2``,web browser akan menampilkan jarak sebesar 2 pixel diantara garis border tabel.
Contoh script dan output Mengatur cellpadding dan cellspacing tabel


F.   Menggabungkan Cell
Atibut yg bisa digunakan untuk menggabungkan dua buah cell menjadi satu cell yaitu :
1.      Colspan
Untuk menyatukan satu atau lebih cell berdasarkan kolom. Contohnya , colspan=”2” berarti menggabungkan dua cell menjadi satu cell.
2.      Rowspan
Untuk menyatukan satu atau lebih cell berdasarkan baris. Contohnya  , rowspan=”2” berarti menggabungkan dua cell menjadi sau cell.
Contoh script dan output Menggabungkan dua cell menjadi satu :


G.  Mengatur Background / Latar belakang
Ada dua jenis background,yaitu berupa gambar dan warna. Langkah – langkah menerapkan background gambar pada tabel adalah sbagai berikut :
1.      Buatlah folder BG pada direktori C (C:\BG)
2.      Persiapkan gambar yg akan dijadikan background sebuah tabel, baik dalam format .jpg, .jpeg, .bmp. Letakkan file gambar tcb ke dalam folder BG dalam satu folder dengan file html yg akan dibuat.
3.      Selanjutnya, buat file “gambar.html” dan tulis kode berikut
Atribut background gambar pda tabel ditunjukkan pda potongan kode program background=”foto.jpg” pada script <table align=”center width=”30%” border=”1” background=”foto.jpg”>. File foto.jpg terletak pada suatu folder dengan file gambar.html, sehingga tidak perlu memanggil secara utuh path file berada.
Contoh script dan output Membuat background gambar pada tabel :

  

Untuk membuat latar belakang tabel dengan warna,perlu ditambahkan atribut bgcolor=”#FFFF##”, dengan bgcolor sebagai atribut untuk mengatur warna tabel.
Untuk mengatur background berupa gambar atau memberi latar belakang ,prosedurnya sama seperti tabel.
Contoh script dan output Mengatur background warna pada tabel :


H.  Atribut Align
Untuk menentukan posisi isi dalam cell. Ada tiga nilai yg diterapkan pada atribut ini, yaitu left , center, dan right. Left untuk meletakkan isi pada sisi sebelah kiri cell, center untuk meletakkan isi pada posisi tengah cell, right untuk meletakkan isi cell pada sisi sebelah kanan.
Contoh script dan output Menentukan posisi isi cell dengan align :


I.      Meletakkan Tabel di Dalam Tabel
Dengan tabel anda dapat menentukan struktur utama sebuah web, mulai ddr heading halaman web, body halaman web, dan footing sebuah halaman web. Teknik sederhananya adalah meletakkan tabel didalam tabel utama
Contoh script dan output Menentukan posisi isi cell dengan align :

J.    Atribut Frame
Untuk mengatur jenis border luar pada tabel. Ada beberapa nilai yg digunakan pada atribut frame :
1.      above,
2.      bellow,
3.      border,
4.      box,
5.      hsides,
6.      lhs,
7.      rhs,
8.      void,
9.      vsides


Contoh script dan output Menggunakan atribut frame :

Rabu, 23 Agustus 2017

Format teks halaman web

Format Teks Halaman Web



A.  Struktur dasar HTML

1.      Elemen halaman adalah bagian pembentuk halaman web yg meliputi head,body,title,link,text ,paragraph,list,dan sbgainya .setiap elemen html ditandai dgn symbol tag ”<” dan diakhiri dengan “>” .
·         Untuk mencetak garis horizontal menggunakan tag <hr>
·         Untuk mencetka kalimat pada baris selanjutnya menggunakan tag <br>
·         Penomoran sebuah daftar teks menggunakan list item dengan tag <li>
·         Pembuatan format teks dalam bentuk paragraph mengguanakan tag <p>
Contoh :

<html>
<head>
         <title> judul situs </title>
</head>
<body>
         Isi halaman web
</body>
</html>

Kelebihannya yaitu kemampuan untuk mendukung penulisan script Bahasa pemrogrmana web lainnya dalam badan HTML seperti Vbscript, JavaScript, PHP, ASP, dan AJAX.
2.      Bagian Head untuk memberikan informasi  tentang halaman web itu sendiri,baik judul halaman, konten,jenis halaman, dan jenis karakter penulisan.
a.      <head>
Tag awal head sebagai awal penandaan script bagian head HTML
b.      <title>
Tag awal title sebagai awal tanda judul sebuah halaman web
c.       Ini adalah halaman web
Judul halaman web yg akan ditampilkan pad aweb browser
d.      </title>
Tag akhir title
e.      </head>
Tag akhir head
3.      Bagian body : semua script akan diterjemahkan menjadi bentuk informasi pada halaman web ,baik berupa teks,audio,gambar,dan animasi,
4.      Mengganti baris dengan tag <br>
5.      Membentuk paragraph dengan tag <p>
6.      Garis horizontal dengan tag <hr>
7.      Membuat komentar dengan tag <!—diikuti komentar dan diakhiri tanda -->

B.      Format teks

1.      Memanipulasi tampilan teks pada halaman web
a.      Mencetak tebal teks, Format : <b> teks dicetak tebal </b>
b.      Mencetak tebal teks dengan tag strong, Format : <strong> teks blabla </storng>
c.       Mencetak miring teks, Format : <i> teks miring </i>
d.      Mencetak teks bergaris bawah, Format : <u> teks bergaris bawah </u>
e.      Memberi tekanan teks, Format : <em> teks diberi tekanan </em>
f.        Membesarkak huruf, Format : <big> teks dibesarkan </big>
g.      Mengecilkan huruf, Format : <small> yeks dikecilkan </small>
h.      Mencetak superscript teks, Format : <sup> teks dicetak dengan mode </sup>
i.        Mencetak subscript teks, Format : <sub> teks dicetak mode </sub>
j.        Mencetak teks berkedip, Format : <blink> teks dicetak berkedip </blink>
k.       Mencetak teks berjalan, Format : <marquee> teks dicetak berjalan </marquee>
l.        Mencetak teks dengan coretan, Format : <s> tampilan teks dicoret garis </s>
2.      Format heading
Untuk mengatur besar ukuran teks dalam halaman web yg diterapkan pada judul atau tema.Penulisan heading awal dengan tag <h1> dan diakhiri dengan tag </h1>,dengan ukuran 1 sampai 6.
3.      Bentuk preformat teks
Untuk mencetak teks pda web browser sesuai jarak,ukuran,dan lebar teks dengan penulisan kode program html bagian body dengan menambahkan tag awal <pre> dan diakhiri tag </pre>
4.      Format Addres
Untuk penulisan sebuah alamat institusi yg berfungsi sbgai infimasi kontak .
5.      Format keluaran program computer
·         <code> …</code>
Untuk mendefinisikan kode program tertentu yg ditampilkan pda web page
·         <var> …</var>
Untuk mendefinisikan variable dalam program
·         <samp>…</samp>
Untuk mendefinisikan contoh keluaran program
·         ,tt…</tt>
Untuk mendefinisikan teletype teks
6.      Format Abbr dan Acronym
Tag <abbr> dan <acronym> untuk menampilkan informais yg berisi kepanjangan sebuah teks.
7.      Mengubah arah tampilan teks
Untuk mengubah arah dari kanan ke kiri seperti huruf arab denga ntag <bdo>.singkatan nya bidirectional override.Argument rtl untuk menulis teks dari arah kanan ke kiri (right to left) begitu juga sebaliknya.
8.      Membuat kutipan teks
Ada dua macam kutipan teks :
·         Tag <q> untuk membuat kutipan pendek .kutipan menggunakan tag <q> akan ditulis tanpa emnjorok ke dalam halaman web.Kutipan diawali tanda petik dua dan diakhiri tanda petik dua (“).
·         Tag <blocquote> untuk menyatakan kutipan panjang,yg akan diawali dengan penulisan teks secara menjorok ke dalam.
9.      Penyisipan dan penghapusan teks
Menggunakan teks <del> yg memiliki efek dicoret ditengah hampir mirip seperti tag <s>,atau dapat menggunakan tag <ins> yg memiliki efek tulisan bergaris bawah seperti efek dengan tag <a href=” “>

C.      List html

Daftar ,urutan, rangkaian, atau menu. List HTML merupakan bentuk struktur dalam HTML untuk menamilkan daftar tertentu dalam halaman web.List terbagi menjadi empat :
1.      List bernomor urut(ordered list)
teknik menampilkan daftar tertentu dalam halaman web menggunakan item penomoran,seperti 1,2,3 hingga seterusnya. Menggunakan tag <ol> dan diakhiri </ol>
2.      List tanpa urutan nomor (unordered list)
Menggunakan tag <ul> dan diakhiri <ul>.Ada beberapa maca jenis tanda list ordered :
·         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
Menu bersarang atau nested list adalah suatu subdaftar baru di dalam sebuah daftra.
4.      List terdefinisi
Definition list adalah sebuah daftar yg menggunakan tag  <dl> dan diakhiri </dl>.Untuk menampilkan terminasi sub  list ,digunakakn tag <dt> dan diakhiri dengan </dt>/sedangkan untuk menjelaskna pengertian sari sub list digunakakn tanda <dd> diakhiri </dd>`