Kamis, 05 November 2015

Tutorial CSS Dasar

  

Syntax CSS

CSS memiliki dua bagian utama: pemilih ( Selector ) , dan satu atau lebih deklarasi ( Declaration ).
q
  • Selector adalah HTML element yang ingin dibuat style nya.
  • Declaration merupakan isi dari property dan nilai dari CSS.
  • Pemberian nilai dari property digunakan titik dua ( : ), akhir dari property digunakan titik koma ( ; )
Contoh CSS
Sebuah deklarasi CSS selalu diakhiri dengan titik koma, dan kelompok deklarasi dikelilingi oleh kurung kurawal :
p {color:red;text-align:center;}
CSS Coment
Komentar digunakan untuk menjelaskan kode kita, dan dapat membantu kita ketika kita mengedit source code di kemudian hari. Komentar diabaikan oleh browser.
Sebuah komentar CSS diawali dengan “/*”, dan diakhiri dengan “*/”, seperti ini :
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}

CSS ID dan Class

Selector id digunakan untuk menentukan style untuk elemen tunggal yang unik . Id pemilih menggunakan atribut id elemen HTML, dan didefinisikan dengan “#“. Aturan style bawah ini akan diterapkan pada elemen dengan id = “para1″
#para1
{
text-align:center;
color:red;
}
nb: JANGAN memulai id dengan menggunakan nomor karena ini tidak akan bekerja pada Mozilla Firefox
Selector class digunakan untuk menentukan gaya untuk sekelompok elemen. Berbeda dengan pemilih id, kelas pemilih yang paling sering digunakan pada beberapa elemen . Dengan ini memungkinkan anda untuk menentukan gaya dan elemen HTML dengan class yang sama .
Selector Class menggunakan atribut class HTML, dan didefinisikan dengan “.”
Pada contoh di bawah ini, semua elemen HTML dengan class = “center”akan dibuat rata tengah :
.center {text-align:center;}
kita juga dapat menentukan bahwa hanya elemen HTML tertentu yang dipengaruhi oleh kelas.
Pada contoh di bawah, elemen p semua dengan class = “center”akan di buat rata tengah :
p.center {text-align:center;}
nb: JANGAN memulai nama kelas dengan angka karena ini hanya didukung di Internet Explorer.

Cara CSS

Tiga Cara untuk Insert CSS :
1. Eksternal style sheet
merupakan ideal ketika gaya diterapkan pada banyak halaman , dengan ini anda dapat mengubah tampilan seluruh situs Web dengan mengubah satu file. Setiap halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk ke dalam bagian kepala
<head>
<link rel=”stylesheet” type=”text/css” href=”mystyle.css” />
</head>
dengan eksternal style sheet dapat ditulis dalam bentuk editor teks apapun , dan harus disimpan pada ekstensi css . sebuah contoh dari file style sheet dibawah ini :
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
nb: JANGAN meninggalkan ruang antara nilai properti dan satuan! “margin-left: 20 px” (bukan “margin-left: 20px”) akan bekerja di IE, tapi tidak di Firefox atau Opera.
2. Internal style sheet
merupakan dokumen tunggal html harus digunakan apabila dokumen tunggal html memiliki gaya yang unik . XDi bagian ke[pala html anda dapat mendefinisikan gaya internal dengan menggunakan tag style seperti ini :
<head>
<style type=”text/css”>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url(“images/back40.gif”);}
</style>
</head>
3. Inline style
gaya inline dengan mencampurkan konten dengan presentasi akan banyak kehilangan keuntungan , maka anda dapat menggunakan metode hemat dibawah ini :
Untuk menggunakan gaya inline Anda menggunakan atribut style dalam tag yang relevan. Atribut style dapat berisi properti CSS. berikut contoh bagaimana mengubah warna dan margin kiri paragraf :
<p style=”color:sienna;margin-left:20px”>This is a paragraph.</p>
4. Multiple Style Sheet
Jika beberapa properti telah ditetapkan untuk pemilih yang sama dalam style sheet yang berbeda maka nilai-nilai akan diwariskan dari style sheet lebih spesifik.
contoh style sheet eksternal untuk pemilih h3 :
h3
{
color:red;
text-align:left;
font-size:8pt;
}
contoh style sheet internal untuk pemilih h3 :
h3
{
text-align:right;
font-size:20pt;
}
Jika halaman dengan internal style sheet link ke style sheet eksternal properti untuk h3 akan menjadi:
color:red;
text-align:right;
font-size:20pt;
Warna diwariskan dari style sheet eksternal dan teks-alignment dan ukuran font diganti oleh internal style sheet.
Beberapa Styles Akan Cascade ke Satu :
gaya dapat ditentukan :
  • didalam sebuah elemen HTML
  • didalam bagian kepala halaman HTML
  • didalam sebuahj file CSS eksternal
Secara umum kita dapat mengatakan bahwa semua gaya akan “cascade” menjadi lembaran baru “virtual” gaya oleh aturan berikut, di mana nomor empat memiliki prioritas tertinggi:
  • Browser default
  • Eksternal style sheet
  • Internal style sheet (di bagian kepala)
  • Inline style (di dalam elemen HTML)
Jadi gaya inline yang ada di dalam elemen HTML memiliki prioritas tertinggi , yang berarti bahwa ia akan menimpa gaya yangb didefinisikan di dalam tag <head>, atau dalam style sheet eksternal , atau dalam browser (nilai default).
nb: Jika link ke style sheet eksternal ditempatkan setelah style sheet internal di <head> HTML, style sheet eksternal akan menimpa style sheet internal!


Source : http://tutorial.belajarweb.net/css/tutorial-css-dasar.html

Selasa, 17 Februari 2015

BAB I Ciri Ciri Makhluk Hidup dan Asal Usul Kehidupan

  
Bab I Ciri Ciri Makhluk Hidup

Ini adalah Bab pertama yang dijelaskan guru saya Bu Nus Ismayawati S.Si simak penjelasan materi ini sebagai berikut :
  1. Bernafas
  2. Bergerak
  3. Tumbuh dan Berkembang
  4. Nutrisi
  5. Adaptasi
  6. Peka terhadap Rangsangan
  7. Sistem Ekresi
  8. Sistem Reproduksi
  9. Sistem Regulasi
Teori tentang Asal Usul Kehidupan
  • Teori Abiogenesis
  • Teori Biogenesis
Dibawah ini akan saya jabarkan tentang abiogenesis dan bio genesis menurut para ahli yaitu :


A.  Teori Abiogenesis dan Biogenesis
  •   Teori Abiogenesis



Aristoteles
Teori yang dikemukakan  Aristoteles ini menyatakan bahwa makhluk hidup tercipta dari benda 
tak hidup yang berlangsung secara spontan (generatio spontanea). Misalnya cacing dari tanah, 
ikan dari lumpur, dan sebagainya. Teori ini dianut oleh banyak orang selama beberapa 
abad.Aristoteles (384-322 SM), adalah seorang filsuf dan tokoh ilmu pengetahuan Yunani Kuno. 
Sebenarnya dia mengetahui bahwa telur-telur ikan yang menetas akan menjadi ikan yang 
sifatnya sama seperti induknya. Telur-telur tersebut merupakan hasil perkawinan dari induk-induk ikan. Walau demikian, Aristoteles berkeyakinan bahwa ada ikan yang berasal dari 
Lumpur.
Menurut penganut paham abiogenesis, makhluk hidup tersebut terjadi begitu saja secara spontan. 
Itu sebabnya, teori abiogenesis ini disebut juga generation  spontanea. Bila pengertian 
abiogenesis dan generation spontanea digabung, maka konsepnya menjadi: makhluk hidup yang 
pertama kali di bumi berasal dari benda mati / tak hidup yang terjadinya secara spontan 
(sebenarnya ini adalah dua teori yang berbeda, tetapi orang sudah kadung salah kaprah).
Paham abiogenesis bertahan cukup lama, yaitu semenjak zaman Yunani Kuno (ratusan tahun 
sebelum Masehi) hingga pertengahan abad ke-17, dimana Antonie Van 
Leeuwenhoek menemukan mikroskop sederhana yang dapat digunakan untuk mengamati 
makhluk-makhluk aneh yang amat kecil yang terdapat pada setetes air rendaman jerami. Oleh 
para pendukung paham abiogenesis, hasil pengamatan Antonie Van Leeuwenhoek ini seolah-olah memperkuat pendapat mereka tentang abiogenesis. Hasil pengamatan Anthoni ditulisnya 
dalam sebuah catatan ilmiah yang diberi judul “Living in a drop of water“. Tokoh lain 
pendukung teori ini adalah John Needham.
  • Teori Biogenesis
Teori ini bertentangan dengan teori abiogenesis, karena menganggap bahwa makhluk hidup 
berasal dari makhluk hidup yang sudah ada sebelumnya. Tiga tokoh terkenal pendukung teori ini 
adalah Francesco Redi, Lazzaro Spallanzani, dan Louis Pasteur.
1. Francesco Redi
Redi merupakan orang pertama yang melakukan eksperimen untuk membantah teori abiogenesis. 
Dia melakukan percobaan dengan menggunakan bahan daging segar yang ditempatkan dalam 
labu dan diberi perlakuan tertentu. 
  Labu I   :  diisi daging segar dan dibiarkan terbuka
  Labu II   :  diisi daging segar dan ditutup dengan kain kasa
  Labu III  :  diisi daging segar dan ditutup rapat
Ketiga labu diletakkan di tempat yang sama selama beberapa hari. Hasilnya adalah sebagai 
berikut:
  Labu I   :  dagingnya busuk, banyak terdapat belatung
  Labu II   :  dagingnya busuk, terdapat sedikit belatung
  Labu III  :  dagingnya tidak busuk, tidak terdapat belatung
Menurut Redi belatung yang terdapat pada daging berasal dari telur lalat. Labu ke III tidak 
terdapat belatung karena tertutup rapat sehingga lalat tidak bisa masuk. Sayangnya, meskipun 
tertutup rapat ternyata pada labu tersebut bisa muncul belatung. Ini disebabkan karena Redi tidak 
melakukan sterilisasi daging pada disain percobaannya.
2. Lazzaro Spallanzani
Spallanzani juga melakukan percobaan untuk membantah teori abiogenesis, tetapi menggunakan 
bahan kaldu. Disainnya sebagai berikut:
  Labu I   : diisi kaldu lalu dipanaskan dan dibiarkan terbuka
  Labu II   : diisi kaldu, lalu ditutup dengan gabus yang disegel dengan lilin, kemudian 
dipanaskan 
Setelah dingin kedua labu diletakkan di tempat yang sama.  Beberapa hari kemudian hasilnya 
sebagai berikut.
  Labu I   : berubah busuk dan keruh, banyak mengandung mikroba (bakteri)
  Labu II  : tetap jernih, tidak mengandung mikroba
Menurut Spallanzani mikroba yang tumbuh dan menyebabkan busuknya kaldu berasal dari 
mikroba yang beraada di udara. Pendukung paham abiogenesis keberatan dengan disain 
Spallanzani karena menurut anggapan mereka, labu yang tertutup menyebabkan gaya hidup 
(elan vital) dari udara tidak dapat masuk, sehingga tidak memungkinkan munculnya makhluk
hidup (mikroba).
3. Louise Pasteur
Pasteur menyempurnakan percobaan Redi dan Spallanzani. Ia menggunakan kaldu dalam labu 
yang   disumbat dengan gabus. Selanjutnya gabus tersebut ditembus dengan pipa berbentuk leher 
angsa (huruf S), kemudian dipanaskan. Setelah dingin dibiarkan beberapa hari kemudian diamati. 
Ternyata air kaldu tetap jernih dan tidak ditemukan mikroba.
Disain pipa yang berbentuk leher angsa tersebut memungkinkan masuknya gaya hidup dari 
udara, tetapi ternyata tidak didapati makhluk hidup dalam kaldu. Menurut Pasteur, 
mikroorganisme yang tumbuh dalam kaldu berasal dari udara. Mereka tidak bisa masuk karena 
terhambat oleh bentuk pipa. Hal ini bisa dibuktikan bila labu dimiringkan sedemikian rupa 
sehingga kaldu mengalir melalui pipa dan menyentuh ujung pipa, ternyata beberapa hari 
kemudian menyebabkan busuknya kaldu. 
Dengan demikian Pasteur telah membuktikan bahwa teori biogenesislah yang benar. Muncullah 
ungkapan :
“ omne vivum ex ovo, omne ovum ex vivo, omne vivum ex vivo”
yang artinya: makhluk hidup berasal dari telur, telur berasal dari makhluk hidup, makhluk hidup 
berasal dari makhluk hidup.

Minggu, 15 Februari 2015

Penggunaan LIST dalam HTML dan cara Penyusunannya

  
Ini Materi Kedua Dari Dosen Saya Dalam bidang study Pemrograman WEB. Saat seorang web designer membuat sebuah desain halaman web, ada kalanya ia dituntut untuk membuat sebuah daftar (list) dari adanya kumpulan item-item tertentu. Pada bagian ini saya akan membahas mengenai pembuatan list atau daftar pada dokumen HTML. Pembuatan daftar ini dapat dilakukan pada daftar yang berurutan maupun tidak. Sehingga jenis-jenis daftar dapat diklasifikasikan sebagai berikut :
  • Daftar yang Berurutan
  • Daftar yang Tidak Berurutan
Setelah memahami kedua jenis daftar tersebut, maka akan dilanjutkan dengan pembelajaran mengenai daftar yang telah terdefinisikan (definition list) dan juga daftar bersarang (nested list). Selain itu saya juga akan melampirkan materi mengenai pengaturan start & value dalam penggunaan daftar berurutan.

————————————————————————————————————

DAFTAR BERURUTAN
Daftar berurutan atau yang dikenal sebagai ordered list ini adalah daftar yang ditandai dengan penggunaan aturan penomeran tertentu. Penggunaan list jenis ini biasanya dilakukan pada list yang item-itemnya merupakan satu-kesatuan yang utuh dan tidak dapat dipisahkan, atau berupa prosedur atau aturan langkah-langkah tertentu yang tidak dapat dilakukan secara acak (seperti langkah-langkah membuat kue, memasak nasi, dll).

Untuk membuat sebuah daftar yang terurut dalam HTML, tag yang digunakan adalah
<ol> (orderded list) untuk memulai sebuah daftar, dan berpasangan dengan tag </ol> untuk mengakhiri sebuah daftar. Untuk menuliskan item-item dalam list ini digunakan tag <li> (list item) yang ditutup dengan tag </li> (meskipun penggunaan tag penutup tidak mutlak diperlukan). Sebagai contoh saya akan membuat sebuah daftar seperti berikut :

Tatacara membuat dokumen HTML :
1. Buka aplikasi Text Editor
2. Isikan dengan kode HTML
3. Simpan dengan ekstensi .htm ataupun .html
4. Jalankan HTML dengan web browser
Tag yang digunakan untuk membuat list di atas adalah sebagai berikut















Dan hasil dari pembuatan list tersebut dalam web browser adalah sebagai berikut


Dari contoh di atas dapat dilihat bahwa langkah-langkah pembuatan HTML dilakukan secara berurutan dan tidak dapat dilakukan secara acak, sehingga secara default, HTML akan membuat ordered list yang penomerannya memakai angka (1, 2, 3, dst). Penomeran (numbering) dalam ordered list ada beberapa jenis, diantaranya adalah :
  • Angka (default, formatnya = 1, 2, 3, dst)
  • Huruf Romawi Kecil (i, ii, iii, dst)
  • Huruf Romawi Besar (I, II, III, dst)
  • Huruf Alfabet Kecil (a, b, c, dst)
  • Huruf Alfabet Besar (A, B, C, dst)
Untuk memilih jenis penomeran yang akan digunakan dapat dilakukan dengan menambahkan atribut TYPE pada tag <ol>. Kemudian nilai dari atribut TYPE adalah sebagai berikut :
  • Nilai i untuk romawi kecil
  • Nilai I untuk romawi besar
  • Nilai a untuk alfabet kecil
  • Nilai A untuk alfabet besar
Sebagai contoh saya akan membuat daftar cara membuat dokumen HTML dengan menggunakan penomeran romawi kecil. Berikut tag yang digunakan












Dan hasil dari pembuatan list di atas dalam web browser adalah sebagai berikut


Penggunaan jenis penomeran lainnya dapat dilakukan dengan mengganti nilai dari atribut TYPE pada tag <ol> sesuai kebutuhan anda.

Dari uraian mengenai ordered list di atas dapat diketahui bahwa item-item dari list jenis ini merupakan daftar yang berupa prosedur atau aturan langkah-langkah tertentu yang tidak dapat dilakukan secara acak sehingga penomerannya pun berurutan. Namun jika anda hendak mengacak penomerannya, anda dapat melakukan pengaturan start & value dari daftar yang bersangkutan.

Pengaturan start digunakan untuk menentukan sebuah daftar "dimulai dari urutan keberapa", sehingga nomer awal dari sebuah daftar tidaklah mutlak harus 1, i, I, a, maupun A. Dalam melakukan pengaturan ini dapat menggunakan atribut START dalam tag <ol>. Nilai dari atribut tersebut adalah angka yang akan dijadikan urutan pertama dari list yang bersangkutan. Sebagai contoh saya akan membuat sebuah daftar seperti berikut :
Alat Dalam Membuat HTML :
1. Text Editor
2. Web Browser
Bahan Dalam Membuat HTML :
3. Penguasaan Bahasa Pemrograman
4. Penguasaan Aplikasi Pendukung
Dalam contoh list di atas dapat dilihat bahwa di bagian "bahan dalam membuat HTML", list dimulai dari angka 3, bukan dari angka 1. Sehingga tag yang digunakan untuk membuat list di atas adalah sebagai berikut
















Dan hasil dari pengaturan atribut START di atas adalah sebagai berikut


Selanjutnya adalah mengenai pengaturan value dalam sebuah list, yaitu pengaturan untuk "mengacak urutan penomeran" yang ada dalam list tersebut. Karena pengacakan urutan tidak dilakukan pada seluruh item list tetapi pada salah satu atau dua itemnya saja, sehingga dalam melakukan pengaturan ini dapat menggunakan atribut VALUE dalam tag <li>, ingat, bukan pada tag <ol>. Sebagai contoh saya akan melakukan pengurutan yang acak dalam list cara membuat HTML. Berikut listnya
Tatacara membuat dokumen HTML :
3. Simpan dengan ekstensi .htm ataupun .html
2. Isikan dengan kode HTML
4. Jalankan HTML dengan web browser
1. Buka aplikasi Text Editor
Dari list di atas dapat dilihat bahwa urutan dalam membuat sebuah list ditampilkan secara acak dari nomer 3 - 2 - 4 - 1. Untuk membuat list seperti itu maka tag yang digunakan adalah sebagai berikut











Dan hasil dari tag tersebut dalam web browser adalah sebagai berikut


————————————————————————————————————

DAFTAR TIDAK BERURUTAN
Daftar yang tidak berurutan atau lebih dikenal dengan istilah unordered list adalah daftar yang item-itemnya dapat dipindahkan secara acak karena tiap item tidak memiliki keterkaitan satu sama lain. Dalam unordered list, penulisan item-itemnya tidak menggunakan penomeran khusus, tetapi hanya menggunakan simbol (buletting) tertentu seperti lingkatan maupun kotak. Dalam membuat unordered list digunakan tag <ul> (unordered list) yang diakhiri dengan tag </ul>. Untuk mengisikan item-itemnya tetap menggunakan tag <li> dan </li>. Sebagai contoh saya akan membuat sebuah daftar yang tidak berurutan yaitu seperti berikut
















Dari tag di atas dihasilkan tampilan unordered list dalam web browser sebagai berikut


Dari gambar di atas dapat diketahui bahwa tidak ada ketentuan yang mewajibkan bahwa item-itemnya harus berurutan sehingga penulisannya dapat dilakukan secara acak. Hal itu disebabkan karena item dari list tersebut bukan merupakan sebuah prosedur maupun langkah-langkah dalam mengerjakan sesuatu.

Seperti halnya penomeran dalam ordered list yang dapat dilakukan dalam beberapa jenis numbering, maka dalam unordered list juga dapat menggunakan bulleting dalam beberapa bentuk. Dari contoh di atas terlihat bahwa secara default, unordered list akan menggunakan bulleting dengan tanda lingkaran terarsir. Jenis-jenis lain dalam bulleting antara lain sebagai berikut :
  • Disc, list yang menggunakan lingkaran terarsir (default)
  • Square, list yang menggunakan tanda kotak terarsir
  • Circle, list yang menggunakan tanda lingkaran berlubang
Cara penggunaannya hampir sama dengan numbering dalam ordered list, yaitu menambahkan atribut TYPE dalam tag <ul> dan nilai dari atribut tersebut diisi dengan disc, square, maupun circle (sesuai kebutuhan). Untuk pemahaman lebih sempurna silahkan mencobanya sendiri.

————————————————————————————————————

DEFINITION LIST
Berbeda dengan ordered list dan unordered list, pada definition list tidak menggunakan tanda khusus (numbering maupun bulleting) pada item-item sebuah list. Hal ini dikarenakan web browser telah mendefinisikan sendiri item-item pada list yang bersangkutan. Definition list umumnya digunakan untuk sebuah artikel pada HTML yang isinya merupakan uraian umum mengenai suatu hal yang berkaitan dengan ilmu pendidikan dan ilmiah, namun penggunaan definition list dapat di eksplorasi lebih jauh lagi oleh web designer.

Untuk membuat sebuah definition list, web designer dapat menggunakan tag <dl> (definition list) yang ditutup dengan tag </dl>. Berbeda dengan ordered maupun unordered list yang menggunakan tag <li>, maka pada definition list digunakan tag <dt> untuk memasukan item-item pada list yang bersangkutan dan diakhiri dengan tag </dt>. Kemudian jika ingin memasukan sub-item pada list tersebut maka dapat menggunakan tag <dd> dan </dd>.

Sebagai contoh saya akan membuat contoh penggunaan definition list umum dengan tag seperti berikut
















Dari tag di atas dihasilkan tampilan unordered list dalam web browser sebagai berikut


————————————————————————————————————

Setelah memahami mengenai uraian materi di atas, kali ini saya akan membahas mengenai sebuah fitur dari pembuatan list, yaitu pembuatan list yang bersarang atau yang biasa disebut nested list. Dalam pembuatan dokumen HTML, ada kalanya kita dituntut untuk membuat suatu daftar yang bersarang (item atau sub-item memiliki list lagi). Untuk membuat daftar yang bersarang, web designer perlu menambahkan tag <ol> maupun <ul> ke dalam item yang bersangkutan. Sebagai contoh saya akan membuat tag seperti di bawah ini























Hasil dari tag nested list di atas dalam web browser adalah sebagai berikut

Pengertian Table dan penerapannya dalam HTML

  
Ini Merupakan
materi awal yang diberikan oleh guru saya pada bidang study Pemrograman WEB, Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Tabel dibuat dengan menggunakan tag <table>. Sebuah tabel dibagi menjadi baris-baris, dan tiap baris dibagi ke dalam cell-cell. Baris dibuat dengan tag <tr>, dan cell-cell yang akan membentuk kolom dibuat dengan tag <td>.

Dalam konteks HTML, table mempunyai peranan yang sangat penting. Selain digunakan untuk menampilkan tabel berisi data, table juga digunakan untuk menyusun teks dalam kolom, ataupun membuat laporan terstruktur lainnya.
Seringkali table digunakan dalam halaman web untuk memperindah tampilan ataupun untuk mengatur agar informasi dapat disajikan dengan tampilan yang enak dibaca. Melihat begitu banyaknya manfaat yang didapat dengan menggunakan tabel ini maka tabel mulai diterapkan pemakaiannyaoleh HTML dan kemudian didukung oleh Nescape (browser pertama yang mempelopori penggunaan table).

Dari masing-masing tag tersebut, tiap tag mempunyai tag penutup yaitu:
Tag <table> mempunyai tag penutup </table>
Tag <tr> mempunyai tag penutup </tr>
Tag <td> mempunyai tag penutup </td>
Ketiga tag di atas adalah tag-tag yang harus ada dalam tag Table. Bisa dikatakan tag tersebut merupakan tag dasar pembuatan table. Berikut penerapan dari masing masing bagian tag dalam Table:
Tag <table> adalah pembuka daripada pembuatan table, di dalam table ada baris yang dimulai dengan <tr>. Jika ada satu <tr> maka akan ada satu baris, begitupun selanjutnya. Di dalam baris ada cell-cell yang sering disebut kolom, yang biasanya kita isi dengan berbagai bentuk data. Cell atau kolom ini dibuka atau dimulai dengan <td>. Tag <td> ini diakhiri dengan </td> sebagai penutup kolom. Data-data yang berada dalam tag <td>...</td> akan berada dalam satu kolom. Jika ingin membuat 3 kolom dalam satu baris, maka di dalam <tr>...</tr> kita inputkan tiga <td>...</td>. Begitupun pada <tr>, jika kita ingin membuat tiga baris table maka kita harus ketikkan tiga <tr>...</tr> di dalam <table>...</table>.
Untuk lebih mengenal dan mengerti daripada tag dasar Table, berikut saya berikan penjelasan dari masing masing tag :

Tag <table> </table>

Tag <table>  adalah tag pembuka sebuah table, dimana tag <table> ini adalah tag awal yang kita pakai dalam mengawali pembuatan table. Setelah tag <table> ada tag </table> yang merupakan tag penutup atau akhir dari tabel yang sedang di buat.

Tag<tr></tr>

Tag <tr> atau Table Row adalah tag yang berfungsi untuk membuat baris dalam sebuah tabel. Tidak lepas dari tag-tag yang lain, tag ini berisi tag penutup yaitu </tr>.
Tag <tr> memiliki atribut ALIGN untuk mengatur alignment horizontal dan VALIGN untuk mengatur alignment vertical.

Tag<td></td>

Tag <td> atau Table data berfungsi untuk menampilkan data pada setiap sel tabel. Secara umum dapat dikatakan bahwa table data atau <td> ini digunakan untuk membuat kolom dalam baris table. Untuk mengakhiri kolom tersebut digunakan </td>.
Berikut saya berikan contoh penerapan tag table:
yang menghasilkan tampilan seperti di bawah ini:

Jumat, 13 Februari 2015

Definisi HTML dan Cara Menerapkannya

  
 Definisi HTML
Langsung saja definisi yang saya dapatkan dari wikipedia: HTML merupakan singkatan dari HyperText Markup Language yaitu sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. dengan kata lain HTML Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML sendiri terdiri dari sejumlah perintah dimana kita bisa men-set judul, garis, table, gambar dan lain- lain yang disebut tag atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor. Setiap tag masih dapat dilengkapi lagi oleh sejumlah attribute. Dibawah ini sebagian contoh tag dan attributenya:
<html>
<head>

<title>Who</title>
</head>
<body bgcolor=”red”>
<font face=”arial black” color=”yellow” size=”5″ >Dimas Cyber4rt Was Here</font>
</body>
</html>
Tulisan berwarna merah adalah tag, hijau adalah attribute dan orange adalah nilai/value dari attribute. Itu  adalah sedikit contoh apa itu tag dan atribbute pada html. Tetapi Untuk lebih jelasnya simak penjelasan berikut.
HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainnya pada tag META.
Contoh :
<meta name="author" content="GilangLessons">
Elemen Body
Bagian BODY, yang dinyatakan dengan tag <BODY>isi content</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.
Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

Tag biasanya merupakan suatu pasangan yang disebut dengan :
1. Tag awal, yang dinyatakan dalam bentuk <nama tag>
2. Tag akhir, yang dinyatakan dalam bentuk </nama tag>
Format : <nama tag> teks yang ditampilkan </nama tag>
Contoh : Untuk menampilkan teks dalam format teks miring. misalnya untuk tampilan : Teks ini terlihat miring di browser anda. maka perintah HTML nya adalah :
<i>Teks ini terlihat miring di browser anda</i>
Atribute

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari suatu tag tersebut.

Misalnya digunakan untuk membuat teks dengan pengaturan rata kiri pada suatu paragraf. Maka tag yang digunakan adalah :
<div style="text-align: left">
dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.
Sejarah HTML
Dari bacaan di Wikipedia HTML bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat tercetus ide untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis. Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML).
Konsep ini pada tahun 1986 disetujui oleh ISO (International Standard Organization) sebagai standar bagi pembuatan dokumen-dokumen dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language).
Nah itulah sedikit sejarah dari HTML untuk lebih lengkapnya bisa dibaca di Wikipedia.
Perkembangan HTMLSebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.
HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).
HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.
HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2
HTML versi 4.0

HTML versi 4 ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain- lain.
HTML versi 5.0

HTML versi 5 ini merupakan HTML versi terakhir pada saat sumber ini diambil. Pada HTML ini memiliki fitur baru yaitu : Unsur kanvas untuk menggambar, Video dan elemen audio untuk media pemutaran, Dukungan yang lebih baik untuk penyimpanan secara offline, Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section, Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.
Dikutip dari Berbagai Sumber.
Langganan: Komentar (Atom)