Html 5
Upcoming SlideShare
Loading in...5
×
 

Html 5

on

  • 705 views

 

Statistics

Views

Total Views
705
Views on SlideShare
695
Embed Views
10

Actions

Likes
1
Downloads
23
Comments
0

3 Embeds 10

http://septia-lutfi-1102412085-02.blogspot.com 7
http://ikhsanrusly.blogspot.com 2
http://kurtedik.blogspot.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft Word

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Html 5 Html 5 Document Transcript

  • MAKALAH HTML 5 Makalah ini diajukan guna melengkapi Mata Kuliah Teknologi Informasi dan Komunikasi Dosen Pengampu : 1. Heri Triluqman Budisantoso 2. Septia Lutfi Oleh : Ikhsan Rusly H / 1102412085 TEKNOLOGI PENDIDIKAN FAKULTAS ILMU PENDIDIKAN UNIVERSITAS NEGERI SEMARANG 2013
  • BAB 1 PENDAHULUAN A. Latar Belakang Perkembangan, perubahan, dan kemajuan dunia informasi dan komunikasi memang dirasa sangat cepat sejak orang-orang mengenal apa yang disebut website atau internet. Sedangkan website/situs membutuhkan sebuah bahasa/command markup dalam pengoperasian untuk menampilkan dokumen-dokumen yang diinginkan. Maka diciptakan sebuah bahasa markup yaitu HTML. HTML (Hyper Text Markup Language) adalah sebuah bahasa markup web design dan juga biasa di sebut script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. 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 dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993). HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium‟s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).
  • B. Rumusan masalah : 1. Sejarah HTML 2. Dasar-dasar HTML 5 3. HTML tingkat lanjut 4. Fungsi dari HTML 5 C. Batasan masalah : Makalah ini hanya memaparkan tentang HTML 5 D. Tujuan : Saya membuat makalah ini agar mengetahui tentang pemrograman java serta untuk melengkapi tugas mata kuliah teknologi informasi dan komunikasi.
  • BAB II PEMBAHASAN A. SEJARAH HTML Pemograman HTML muncul seiring perkembangan teknologi dan informasi. Pada tahun 1980 IBM mulai untuk mengembangkan sebuah bahasa pemograman dimana text dan format sebuah dokumen dijadikan satu dalam bahasa pemrograman yang sering kita sebut sebagai HTML (Hyper Text Markup Language) akan tetapi pada saat itu pihak IBM memberikan sebuah nama GML (Generalized Markup Language). Pada tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa pemograman tersebut dan menyatakan sebuah nama baru dari GML tersebut dengan sebutan SGML (Standard Generalized Markup Language). Kemudian pada tahun 1989, Sebuah nama HTML muncul dari pemikiran Caillau Tim yang bekerja sama dengan Banners Lee Robert yang ketika itu masih bekerja di CERN memulai mengembangkan bahasa pemrograman ini, dan dipopulerkan pertama kali dengan browser Mosaic. Nah mulailah dari tahun 1990 HTML sangat berkembang dengan cepat hingga mencapai versi HTML versi 5.0 yang digarap pada 4 Maret 2010 lalu oleh W3C. HTML versi 1.0 ini adalah versi pertama sejak lahirnya nama html tersebut, memiliki sebuah kemampuan untuk heading, paragraph, hypertext, bold dan italic text, wrapping serta memiliki dukungan dalam peletakan sebuah gambar. Lalu, perkembangan selanjutnya HTML versi 2.0 pada 14 Januari 1996, pada versi ini ada beberapa tambahan kemampuan diantaranya penambahan form comment, hal ini menyebabkan adanya sebuah interaktif dan mulai dari versi ini yang menjadikan sebuah pioneer dalam perkembangan homepage interaktif. Tak lama kemudian HTML versi 3.0 dirilis pada 18 Desember 1997 yang sering disebut sebut sebagai HTML+ yang mempunyai kemampuan dalam beberapa fasilitas diantaranya adalah penambahan fitur table dalam paragraph, akan tetapi versi ini tidak bertahan lama. Dan pada bulan Mei 1996 dikeluarkan versi baru sebagai pengganti dan penyampurnaan versi 3.0 ini yaitu HTML versi 3.2, keluarnya versi ini dikarenakan adanya beberapa kasus yang timbul pada pengembang browser yang
  • telah melakukan pendekatan dengan cara lain yang justru hal tersebut menjadi popular, maka di bakukan versi 3.2 untuk mengakomodasi praktek yang banyak digunakan oleh pengembang browser dan diterima secara umum, dapat dikatakan bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft. Pada tahun 1999, tepatnya tanggal 24 Desember lahirlah HTML versi 4.0, seperti yang kita kenal HTML pada saat ini penambahan link, meta, imagemaps , image dan lain lain sebagai penyempurnaan versi 3.2. Pada tanggal 4 Maret 2010, terdapat sebuah informasi bahwasanya HTML versi 5.0 masih dikembangkan oleh W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0 HTML5 ini merupakan hasil revisi dari HTML pertama yang diciptakan pada tahun 1990 dan HTML4 pada tahun 1997. HTML5 memiliki standar baru untuk HTML, XHTML dan DOM HTML. Tidak seperti pendahulunya, Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight. HTML5 merupakan proyek dari W3C (World Wide Web Consortium) dan WHATWG ( Web Hypertext Application Technology Working Group). W3C merupakan pengembang XHTM L 2.0 dan WHATWG mengembangkan situs serta aplikasinya. Perbaikan HTML5 dari masa ke masa bertujuan untuk memperbaiki teknologi HTML terutama mendukung teknologi multimedia terkini, mudah dibaca dan mudah dimengerti oleh mesin. HTML5 ini telah dikenal luas oleh para developer sejak lama namun pada April 2010 CEO Apple Inc. Steve Jobs memberikan pernyataan bahwa Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video ataupun menyaksikan konten multimedia apapun di internet. HTML5 merupakan hasil terkini perkembangan dari HTML4 dan XTHML 1.1 yang selama ini dioperasikan terpisah dan dimplementasikan berbeda-beda oleh banyak software developer web. Tujuan dibuat HTML5 ini adalah dibuatnya suatu fitur baru yang didasarkan pada HTML, CSS, DOM, dan Javascript dan mengurangi kebutuhan plugin untuk menampilkan multimedia eksternal contohnya Flash Player. Sampai saat ini HTML5 masih dalam tahap pengembangan, jadi masih beberapa browser saja yang mendukung HTML5. Contohnya Mozilla Firefox, Google Chrome,
  • Safari dan Opera. HTML5 memiliki satu keunggulan dimana dapat ditampilkan pada platform berbeda namun memiliki tampilan yang sama seperti pendahulunya. B. DASAR-DASAR HTML Struktur dasar HTML adalah sebagai berikut: <html> <head> <title>Judul Dokumen HTML</title> </head> <body> penulisan informasi Web </body> </html> Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut: 1. Tag Adalah teks khusus (markup) berupa dua karakter "<" dan ">", sebagai contoh <body> adalah tag dengan nama body. penutup (ditambahkan karakter "/" setelah karakter "<"), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML. 2. Element Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana: <title> ini adalah tag pembuka judul dokumen HTML Judul Dokumen HTML ini adalah isi judul dari dokumen HTML </title> ini adalah tag penutup judul dokumen HTML Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
  • Contoh penulisan tag-tag yang benar <p> <b> </b> </p> Catatan : Jika penulisan script salah, maka script tidak terbaca sempurna ( Eror ) sehingga dapat mengganggu penampilan dan dinamika web itu sendiri 3. Attribute Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut: <TAG> nama-attr="nilai-attr" nama-attr="nilai-attr" > </TAG> Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor="black" text="yellow"> 4. Element HTML Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. Sintaks: <html> </html> 5. Element HEAD Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>. Sintaks: <head> </head> 6. Element TITLE Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>. Sintaks:
  • <title> </title> 7. Element BODY Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>. Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser. Sintaks: <body text="v" bgcolor="w" background="uri" link="x" alink="y" vlink="z"> </body> text :memberikan warna pada teks bgcolor :memberikan warna pada latarbelakang dokumen HTML background:memberikan latarbelakang dokumen HTML dalam bentuk gambar link :memberikan warna untuk link alink :memberikan warna untuk link yang sedang aktif vlink :memberikan warna untuk link yang telah dikunjungi. Catatan : Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan. Berikut ini berbagai macam kode HTML dasar yang perlu diketahui. 1. <br> Turun satu baris kebawah(enter) / Kursor dan kalimat dibelakangnya turun 1 baris kebawah 2. <big>isi tulisan</big> Membuat tulisan menjadi sedikit lebih besar 3. <font color=”warna tulisan“>isi tulisan</font> Mewarnai tulisan. Ganti warna tulisan dengan salah satu pilihan yang ada : red, blue, yellow, green, brown, gold, purple
  • 4. &nbsp; Menambah 1 spasi karena ada kemungkinan penggunaan 2 spasi tidak akan terbaca pada beberapa engine blog 5. <font size=”ukuran tulisan“>isi tulisan</font> Mengganti ukuran tulisan. Bisa digunakan apabila kode pada no. 2 tidak sesuai dengan keinginan kita 6. <strong>isi tulisan</strong> atau <b>isi tulisan</b> Untuk menebalkan tulisan. Fungsi sama dengan ”’isi tulisan”’ atau tombol „cetak tebal‟ 7. <p> Kursor dan kalimat dibelakangnya turun satu setengah baris kebawah 8. <u>isi tulisan</u> Membuat garis bawah tulisan 9. <small>isi tulisan</small> Membuat tulisan menjadi sedikit lebih kecil 10. <s>isi tulisan</s> Membuat garis mencoret pada tulisan 11. <pre>isi tulisan</pre> Membuat tulisan tetap pada keadaan yang kita inginkan, misalnya untuk urutan berjejer kebawah 12. <center>isi tulisan</center> Membuat tulisan berada di tengah halaman 13. <blink>isi tulisan</blink> Membuat tulisan tampak berkedip C. HTML tingkat lanjut Seperti yang telah dijelaskan sebelumnya bahwa HTML(Hyper Text Markup Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan </x> dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda </x> seperti tag <br>, <input> dan lainnya.
  • Sebuah halaman website akan diapit oleh tag <html>……</html>. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML. 1. Menggunakan Tag pada HTML Beberapa contoh penggunaan tag HTML, Contoh Hasil <b>Ini tulisan tebal</b> Ini tulisan tebal <i>Ini tulisan miring</i> Ini tulisan miring <u>Ini tulisan bergaris Ini tulisan bergaris bawah bawah</u> Ini baris 1<br>Ini baris 2 Ini baris 1 Ini baris 2 Ini garis horizontal <hr> Ini garis horizontal Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>, <input> dan sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face. Untuk lebih memahami atribut lihatlah contoh berikut ini. <font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12 pt</font> hasil -> Ini Font Arial berwarna merah dan berukuran 12 pt Atribut color digunakan untuk menentukan warna tulisan. Atribut face digunakan untuk menentukan jenis huruf. Atribut size digunakan untuk menentukan ukuran huruf. Jika anda lihat bahwa atribut color berada pada awal, lalu yang kedua adalah face dan yang terakhir adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut karena browser hanya membaca isi dari properi bukan urutan atributnya. 2. Daftar Tag pada HTML Berikut ini adalah tabel tag-tag HTML dan fungsinya: Tag Utama Tag <html> atribut Deskripsi Baris paling atas dari setiap HTML
  • </html> <head> Informasi umum dari sebuah </head> halaman web <title> Judul halaman. Terdapat pada head </title> background bgcolor bgsound font link alink vlink topmargin leftmargin marginheight marginwidth <boby> </body> Setingan atribut untuk seluruh dokumen Modifikasi Teks Tag Deskripsi Contoh <b> </b> Teks tebal Teks tebal <I> </I> Teks miring Teks miring <u> </u> Teks garis bawah Teks garis bawah <pre> Preformatted teks Contoh teks Header 1 Header 1 Header 2 Header 2 Header 3 Header 3 Header 4 Header 4 Header 5 Header 5 Header 6 Header 6 </pre> <h1> </h1> <h2> </h2> <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>
  • Subscript Subscript Superscript Superscript <sub> </sub> <sup> </sup> Font Tag Atribut Deskripsi <font> Color Mengubah gaya suatu huruf </font> Size Name Links Tag Atribut Deskripsi <a> Href Membuat link ke dokumen atau situs lain </a> Target Style Class Name id Gambar Tag Atribut Deskripsi <img> Src Menampilkan sebuah gambar Alt Name Border Height width Formatting Tag Deskripsi <blockquote> Digunakan untuk mengatur text dan Sample of text in a </blockquote> gambar dalam suatu tag Contoh block qoute format
  • <ol> </ol> Ordered List (digunakan dengan <li>) 1. Item 1 <ul> </ul> Unordered List (digunakan dengan Item 1 <li>) <li> Elemen List <dd> </dd> Definition List Sample text <dt> Definition Term Sample text <dd> Definition Description Sample text <p> </p> Paragraf Sample Text <br> Ganti baris Sample Text <hr> Garis horizontal <center> Menengahkan elemen Sample </center> Tabel Tag Atribut Deskripsi <table> <table> Border Mengatur semua elemen Cellpadding table Cellspacing Widht Height Name Id Title Bgcolor Background Align valign <tr> </tr> Height Bgcolor Background Membuat baris baru
  • Align Valign title <td> </td> Height Membuat kolom Width Bgcolor Background Align Valign Title Colspan rowspan <th> </th> Height Format yang berlaku bagi Width cell yang diapit tag Bgcolor Background Align Valign Title Colspan rowspan <tbody> Height Format yang berlaku bagi </tbody> Width cell yang diapit tag Align Valign Bgcolor background <colgroup> Height Format yang berlaku bagi </colgroup> Width kolom Align Valign Bgcolor Background
  • colspan Tag Atribut Deskripsi <form> Method Mengatur elemen dari form </form> Acton name <input type=> Text Variasi dari tipe elemen form Password Hidden Radio Checkbox Submit Image reset text Name Value Width maxlength password Name Value Width Maxlenght hidden Digunakan Value radio Name variabel hidden Name value checkbox Name Value Checked submit value untuk membuat
  • image Src Height Width Alt Name border reset Value <select> Name Membuat </select> Size Digunakan combo-box. bersama dengan option <option> Selected Name Value <textarea> Name </textarea> Rows Cols wrap wrap Off No wrap Virtual Word wrap, senta as one line physical Word wrap, sent with breaks 3. Menggunakan Atribut dari Tag Pada bab sebelumnya telah macam-macam atribut dari tag yang terdapat pada HTML. Sekarang saatnya menerapkan atribut tersebut dalam sebuah file. Untuk lebih memudahkan dalam memahami langsung saja pada contoh. • Pertama jalankan software “PHP DESIGNER 2006” • Klik menu File – New – HTML/XHTML Maka akan nampak sebuah ruang kerja mirip dengan dengan Microsoft Word. Untuk contoh yang pertama ini kita akan menggunakan atribut dari tag <p>…</p>.
  • a. Tag <p>...</p> Tag <p> digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas ketik kode di bawah ini. <html> <head> <title>Atribut Tag <P></title> </head> <body> <p align="left"><b>Teks ini berada di kiri</p> <p align="center">Teks ini berada di tengah</p> <p align="right">Teks ini berada di kanan</b></p> <p align="justify">Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya, tag &lt;p&gt;&lt;/p&gt; merupakan default atau bentuk baku tag &lt;p&gt;&lt;/p&gt; dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut <i>align</i> pada tag &lt;p&gt; maka browser akan menganggap rata kiri.</p> </body> </html> Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak dialog Save, arahkan ke drive C: lalu HTML(jika anda membuat folder lain silahkan simpan di folder anda tersebut) lalu Bab 2. Pada isian File Name isikan tag_p.html dan pastikan Save as Type adalah HTML Document. Untuk menjalankan anda cukup tekan tombol F5 maka akan muncul output dari kode anda.
  • Gunakan browser eksternal seperti Internet Explorer atau FireFox. Buka IE atau FireFox klik File – Open, arahkan dimana anda menyimpan file tag_p.html tadi. Hasilnya akan terlihat seperti gambar 2.1.
  • b. Tag <font>....</font> Fungsi tag <font> adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Ketik kode di bawah ini : <html> <head> <title>Atribut dari Tag Font</tile> </head> <body> <p><font face="Arial">Ini Font Arial</font></p> <p><font face="Arial"><i>Ini Font Arial dan miring</i></font></p> <p><font face="verdana" size="4" color="blue"><b>Ini Font Verdana berukuran 12 pt berwarna biru sekaligus tebal</b></font> <p align="center"><font face="Tahoma" color="red"><b>Ini Font Tahoma berwarna merah, tebal dan berada di tengah</b></font><p> <p align="center"><font face="Arial" color="red">Ini Font Arial berwarna Merah, </font><font face="Verdana" color="blue">Sedangkan ini adalah font Verdana berwarna biru</font></p> </body> </html> Outputnya
  • c. Tag <table>...</table> Dalam tag <table> juga terdapat 2 tag yang penting yang penting yaitu tag <tr></tr> untuk membuat baris dan tag <td></td> untuk membuat kolom.Tag <table> adalah tag yang penting dalam pendesainan sebuah tampilan situs.
  • Source codenya : <html> <head> <title>Atribut dari tag tabel</title> </head> <p><b>Membuat Tabel</b></p> <table border="1" bordercolor="black" bgcolor="white" cellpadding="8" cellspacing="0" width="100%"> <tr> <!-- <tr> artinya membuat sebuah baris --> <td>Ini kolom 1 pada baris 1</td> <!-- <td> = membuat sebuah kolom. --> <td>Ini kolom 2 pada baris 1</td> <!-- </td> mengakhiri sebuah kolom --> </tr> <!-- mengakhiri sebuah baris --> <tr> <td>Ini kolom 1 pada baris 2</td> <td>Ini kolom 2 pada baris 2</td> </tr> </table> <p><b>Contoh 2: Membuat Tabel</b></p> <table border="1" bordercolor="black" bgcolor="white" cellpadding="8" cellspacing="0" width="100%"> <tr bgcolor="yellow"> <td align="center">Ini kolom 1 pada baris 1</td> <td align="right">Ini kolom 2 pada baris 1</td> </tr> <tr> <td align="center" bgcolor="red"><font color="white">Ini kolom 1 pada baris 2</font></td> <td align="right">Ini kolom 2 pada baris 2</td> </tr> </table> <p><b><font color="blue">Tabel sebagai bingkai dari paragraf</font></b></p> <table border="1" style="border-collapse: collapse" cellpadding="8" bgcolor="white" width="100%" bordercolor="black"> <tr> <td><p>Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web. Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman web.</p> <p>Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi. Sebenarnya itu adalah tabel hanya saja atribut <font
  • color="red"><b>border="0"</b></font> sehingga tabel seakan tidak ada(transparan).</p> <p>Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama. Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel yang berada di dalam tabel utama</p> <p align="center"> <!-- tag <table> untuk tabel anak --> <table border="1" style="border-collapse: collapse" bgcolor="white" bordercolor="black" cellpadding="8" width="80%"> <tr bgcolor="yellow"> <td><b>Nama Barang</b></td> <td><b>Harga Barang</b></td> </tr> <tr> <td>Monitor</td><td>Rp. 500.000,-</td> </tr> <tr> <td>CDRW</td><td>Rp. 245.000,0</td> </tr> <!-- </table ini untuk menutup tabel anak --> </table> </tr> </table> d. Tag <form>...</form> Tag <form> berguna untuk mengirimkan(mem-post) variabel yang bersisi data ke file tujuan yang memproses variabel tersebut. Tag-tag yang biasa digunakan bersama tag form adalah tag <input> dan <textarea>. Atribut form yang banyak digunakan adalah method dan action. Atribut method menentukan jenis pengiriman data bisa berupa “POST” atau “GET”. Sedangkan action adalah file tujuan yang akan memproses data yang ada diantara tag <form>...</form>. Untuk lebih jelasnya lihatlah cuplikan script di bawah ini. <form action="coba.php" method="post"> ...................................... ISI ...................................... </form>
  • Seperti dikatakan sebelumnya tag form tidak dapat digunakan sendirian. Ia harus mempunyai data didalamnya untuk itulah digunakan tag-tag lain. e. Tag <input> Tag <input> memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox, radio button dan sebagainya. <html> <head> <title>Atribut tag Form dan Input</title> </head> <body><font face="verdana" size="2"> <form action="coba.php" method="post"> <p><b>Tag input dengan atribut type="text"</b><br> <input type="text" name="teks_ku" size="16" maxlength="20"><br> Ini textbox dengan nama <i>teks_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p> <p><b>Tag input dengan atribut type="password"</b><br> <input type="password" name="password_ku" size="16" maxlength="20"<br> Ini passwordbox dengan nama <i>password_ku</i> ukuran <i>16 chr</i> dan maksimal karakrer yang dapat ditampung <i>20 chr(character)</i>.</p> <p><b>Tag input dengan atribut type="radio"</b><br> <input type="radio" name="radio_ku" value="isi_1">Radio 1 --> nama <i>radio_ku</i> isi/value <i>isi_1</i><br> <input type="radio" name="radio_ku" value="isi_2">Radio 2 --> nama <i>radio_ku</i> isi/value <i>isi_2</i><br> <b>Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui perbedannya.</b></p> <p><b>Tag input dengan atribut type="checkbox"</b><br> <input type="checkbox" name="checkbox_ku_1" value="isi_1">Checkbox 1 --> nama <i>checkbox_ku_1</i> isi/value <i>isi_1</i><br> <input type="checkbox" name="checkbox_ku_2" value="isi_2">Checkbox 2 --> nama <i>checkbox_ku_2</i> isi/value <i>isi_2</i><p>
  • <p><b>Tag input dengan atribut type="submit"</b><br> <input type="submit" value="Tombol Submit"><br> Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada pada form ke file tujuan (action="file_tujuan"))</p> <p><b>Tag input dengan atribut type="reset"</b><br> <input type="reset" value="Bersihkan"><br> Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian form. Coba isikan semua textbox dan radio lalu tekan tombol ini.</p> <p><b>Tag input dengan atribut type="hidden"</b><br> <input type="hidden" value="data_ku" name="data"> Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah didefinisikan. Dan tidak menampilkan output apapun.</p> <p><b>Tag input dengan propeti type="image"</b><br> <input type="image" src="letak_file_gambar_anda" height="98" width="98"><br> Image memiliki fungsi yang sama dengan type submit</p> </form></font> </body> </html> Hasilnya :
  • f. Tag <select>...</select> dan <option> Mengapa kita langsung membahas 2 tag?. Pertanyaan yang bagus dan jawabannya sama dengan dengan pembahasan diatas. Tag select tidak bisa berdiri sendiri dan harus menggandeng tag option untuk dapat menampilkan output. Dan cara kerjanya hampir sama dengan tag radio hanya saja tag select lebih singkat. <html> <head> <title>Propeti tag Select dan Option</title> </head> <body> <p><b>Penggunaan select dan dan option</b></p> <p>Daftar kategori silahkan pilih kategori</p> <form action="coba.php" method="post"> Kategori: <select name="Pilihan"> <option value="Kategori 1">Kategori 1 <option value="Kategori 2">Kategori 2 <option value="Kategori 3">Kategori 3 </select> <p><input type="submit" value="KIRIM"></p> </form> </body> </html>
  • g. Tag <a>...</a> Anda tentu sering surfing di internet dan mengklik suatu tulisan atau gambar yang menuju halaman website lainnya. Tulisan atau gambar itu adalah link. Ya, link adalah tulisan atau gambar yang merujuk/membuka halaman suatu website. Segala tulisan atau tag lainnya yang diapit tanda <a> dan </a> akan dianggap link oleh browser. <html> <head> <title>Atribut dari tag A</title> </head> <body> <p>Tag a digunakan untuk menuju/membuka link alamat suatu website. Link merupakan tulisan yang merujuk suatu alamat website. Semua tulisan ataupun tag yang berada dalam tag &lt;a&gt; dan &lt;/a&gt; akan dianggap link oleh browser. Atribut yang sangat penting dalam tag a adalah atribut <i>href</i>. Isi dari atribut ini adalah alamat website yang dituju.</p>
  • <p>Contoh link ke alamat Google</p> <a href="http://www.google.com">Ini link ke google.com</a> <p>Link juga mempunyai atribut <i>target</i> yang fungsinya berhubungan dengan window. Isi dari atribut target dapat berupa "_blank", "_self", "_parent", "_top". Atribut "_blank" akan membuka alamat website pada window yang baru. Isi atribut default dari target adalah "_self" dimana alamat website akan dibuka pada window yang sama. <p>Contoh link dengan atribut target="_blank"</p> <a target="_blank" href="http://www.rahasiawebmaster.com">Bagaimana Menjadi Webmaster dalam 30 Hari</a> <p>Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan bohlam.</p> </body> </html> h. Tag <body>...</body> Seperti namanya body artinya tubuh. Maka atribut yang diset pada tag body akan berpengaruh pada seluruh tubuh/body dokumen. Pada tag body terdapat beberapa atribut namun ada dua yang terpenting yaitu background dan bgcolor. Atribut background digunakan untuk membuat sebuah gambar menjadi latar dari halaman.Sedangkan bgcolor digunakan untuk menset warna dari latar halaman website. Kali ini yang akan dibahas hanyalah tag bgcolor karena tag background nilainya sama dengan tag image yang akan dibahas kemudian.
  • <html> <head> <title>Atribut dari Tag Image</title> </head> <body bgcolor="#000000" link="http://www.google.com"> <font color="#ffffff" face="verdana"> <p><b>Ini body dengan bgcolor="#000000" atau samadengan "black"</b><br> dan font color diset ="#ffffff" atau samadengan "white".</p> <p>Di dalam html anda dapat menggunakan perpaduan warna antara angka dan huruf seperti "#cgcgcg" akan menghasilkan warna abu-abu.</p> </body> </html> i. Tag <img> Suatu website yang bagus pasti memiliki gambar di dalamnya. Dan suatu waktu anda tentu ingin menambahkan gambar didalam website anda. Untuk menampilkan gambar pada halaman dapat digunakan tag <img>. Format file yang dapat didukung oleh tag img bermacam-macam mulai BMP, JPG, GIF, TGA dan lain-lain.Tag img memiliki beberapa atribut yaitu ‐ src : letak file gambar yang akan ditampilkan ‐ border: tebal bingkai gambar ‐ height: menentukan tinggi image/gambar ‐ width: menentukan lebar image/gambar
  • Nilai dari atribut src jika letak file gambar berada pada direktori yang sama dengan direktori file html anda. Maka cukup tuliskan nama filenya saja, contohnya src=”nama_file.jpg”. Dan jika letak filenya berada pada sub folder/direktori maka nilainya adalah src=”sub_folder/nama_file.jpg”. Lalu bagaimana jika letaknya pada folder/direktori diatas file html saya?. Caranya hampir sama hanya saja ditambahkan tanda ../(titik dua dan slash). Yang artinya pindah satu folder keatas, jika letaknya di dua folder diatas file html saya. Sama tinggal menambah ../../ (artinya pindah dua folder ke atas). Contohnya src=”../nama_folder/nama_file.jpg”. Untuk contoh kali ini masuklah ke direktori/folder HTML yang telah anda buat sebelumnya. Buatlah satu buah folder dalam direktori HTML tersebut. Dan berilah nama folder itu gambar. Lalu copykan satu gambar apa saja kedalam folder gambar tersebut. Lalu ketiklah kode berikut ini. Ingat ganti nilai dari src sesusai dengan nama file gambar anda. <html> <head> <head> <title>Atribut dari Tag img</title> </head> <body> <p><b>Tag img hanya dengan atribut <i>src</i></b></p> <img src="../gambar/e-book.jpg"> <p><b>Tag img dengan border="1"</b></p> <img src="../gambar/e-book.jpg" border="1"</b><p> <p><b>Tag img dengan height dan width</b></p> <img src="../gambar/e-book.jpg" border="1" height="300" width="200"> </body> </html>
  • j. Tag <ol>...</ol>, <ul>...</ul> dan <li>...</li> Kali ini kita akan membahas 3 tag sekaligus. Karena masing-masing tag tidak dapat dipisahkan. Tag <ol> dan <ul> keduanya membutuhkan tag <li> agar dapat menampilkan output. Tag-tag ini berguna untuk menyusun suatu daftar yang ingin anda tonjolkan pada pengunjung website. <html> <head> <title>Atribut dari tag ol, ul dan li</title> </head> <body> <p><b>Penggunaan tag ol dengan li</b></p> <ol> <li>Ini nomor 1</li> <li>Ini nomor 2</li> <li>Ini nomor 3</li> </ol> <p><b>Penggunaan tag ul dengan li</b></p>
  • <ul> <li>Ini bullet 1</li> <li>Ini bullet 2</li> <li>Ini bullet 3</li> </ul> <p><b>Gabungan tag ol, ul dan li</b></p> <ul> <li>Ini bullet 1</li> <ol> <li>Ini nomor 1</li> <li>Ini nomor 2</li> </ol> <li>Ini bullet 2</li> <ol> <li>Ini nomor 1</li> <li>Ini nomor 2</li> </ol> </ul> </body> </html>
  • D. Fungsi HTML HTML telah mengubah dunia internet, kurang lebih berikut adalah fungsi utama : 1. Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman Web) dan isinya. 2. Mempublikasikan document secara online sehingga bisa diakses, dilihat dari keseluruh dunia. 3. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. 4. Menambahkan object – object seperti image, audio, video dan juga java applet (aplikasi java seperti java game dll) dalam document HTML.
  • BAB III PENUTUP A. Kesimpulan HTML adalah salah satu bahasa pemprograman web desain dan juga biasa di sebut script untuk menyusun dokumen-dokumen Web. HTML telah berubah dengan dashyat sejak hari pertamanya, konten-konten dari HTML pada masa modern telah ditambahkan ke dalam dokumentasi pertama dan "tags" yang lebih dari setengah dideskripsikan ke dalam dokumen "HTML tags" asli yang masih ada. Dengan disajikannya makalah ini diharapkan pembaca dapat memahami lebih dalam lagi mengenai HTML5. Dengan segala kelebihan dan keunggulan dalam HTML5, tentunya hal ini menjadi pertimbangan parapengguna untuk menggunakan HTML5 sebagai plattform dalam media komunikasi.
  • Daftar Pustaka http://pakdesmart75.wordpress.com/2008/07/25/sejarah-html/ http://design-web11.blogspot.com/2013/06/artikel-html-sejarah-perkembangan-dan.html http://bowotechno.files.wordpress.com/2010/01/html-dan-perkembangannya.doc http://design-web11.blogspot.com/2013/06/artikel-html-sejarah-perkembangan-dan.html http://www.anneahira.com/sejarah-html.html http://irwansyah.students.uii.ac.id/ http://gobalbabali.wordpress.com/tugas-sekolah/pengertian-html-http-url-ftp-domain-hostingdan-www/ Dasar-dasar HTML taufanriyadi@gmail..com http://www.trikaja.co.cc Mastering Kode HTML (Second Edition) © Copyright 2005-2006 Rio Astamal http://www.rahasia-webmaster.com/