1 KONSEP DASAR DAN TEKNOLOGI WEBPAGE Sebelum belajar membuat halaman web dengan perintah html, sebaiknya perlu mengetahui terlebih dahulu istilah-isti...
Sebelum belajar membuat halaman web dengan perintah html, sebaiknya perlu mengetahui terlebih dahulu istilah-istilah yang berhubungan dengan teknologi web. Beberapa istilah yang sering kita dengar adalah web server, URL, domain, HTTP, HTML, web browser, web editor, internet, www, dll. WEB SERVER
:
Sebuah perangkat lunak yang berjalan pada komputer server, bertindak melayani permintaan-permintaan client terhadap halaman web tertentu, yang memungkinkan dokumen-dokumen web di server ditampilkan pada komputer user. Web server yang sering digunakan saat ini antara lain adalah Apache, Personal Web Server (PWS), MS Internet Information Server (IIS), dan Tomcat.
URL
:
Uniform Resource Locator sebuah alamat yang terdiri atas dua bagian, yaitu pengenal protocol dan pengenal domain. contoh : http://www.facebook.com
Domain
:
Domain adalah nama dari alamat website seperti www.google.com, www.facebook.com. Domain seperti ini disebut Top Level Domain (TLD). Alamat website gratisan yang peroleh dari Geocities merupakan subdomain.
HTTP
:
Hypertext Transfer Protocol. Adalah protokol atau prosedur yang berfungsi untuk mendefinisikan dan menjelaskan bagaimana server dan client berinteraksi dalam mengirim & menerima dokumen web.
HTML
:
Hypertext Mark up Language. Adalah suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. Tidak termasuk dalam bahasa pemrograman HTML merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu: Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML.
[1]
WEB BROWSER :
Adalah perangkat lunak yang berjalan pada komputer user yang berfungsi untuk menampilkan dokumen web. Web browser yang sering digunakan MS Internet Explorer, Netscape Navigator, Mozilla, Opera, dll.
WEB EDITOR
:
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.
INTERNET
:
Merupakan jaringan komputer bersifat global yang menjangkau hampir keseluruh pelosok dunia. Semua informasi dunia luar dapat kita lihat melalui layar monitor tanpa harus beranjak menuju tempat yang kita inginkan
WWW
:
Merupakan suatu sarana pembagian informasi antara pengguna jaringan komputer. Informasi berupa dokumen dalam bentuk teks, gambar, video, program.
Perbedaan antara klien dan server Klien adalah pengguna atau user yang ingin mengakses atau membuka halaman web tertentu dan mencari informasi tertentu dalam bentuk teks, gambar, suara atau video melalui internet. Informasi atau dokumen tersebut akan dikirimkan oleh server ke komputer user.
Bandwidth mempengaruhi transmisi data dan gambar pada layar Semakin besar bandwidth, semakin cepat pula koneksi internet dalam menghubungkan klien dan server. Dalam permintaan data dan gambar oleh klien, besarnya bandwidth akan mempengaruhi kecepatan dalam pengiriman data oleh server dan mempengaruhi kecepatan user dalam mengakses data tersebut.
Ciri-Ciri dan Fungsi Software Teks Editor yang Tersedia untuk Merancang Web Page Beberapa software teks editor yang biasa digunakan untuk merancang halaman web diantaranya adalah Notepad++, Adobe Dreamweaver dan Frontpage. Secara umum ciri-cirinya adalah terdapat halaman untuk mengetikkan tag-tag HTML yang disertai dengan nomor baris. Dapat membuat desain halaman web baik melalui icon yang tersedia atau melalui script. Fungsi dari software teks editor dalam merancang halaman web adalah untuk mengetikkan tag HTML dan mendesain halam web.
[2]
STRUKTUR DOKUMEN HTML Apa itu HTML? HTML(Hyper Text Markup Language) adalah sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan dimana x tag HTML seperti b, i, u dan sebagainya.
Mengenal HTML Lebih Jauh Setelah membaca materi pada bab 1 ini anda diharapkan dapat mengerti tentang: Pengertian HTML Menggunakan tag pada HTML Mengetahui daftar tag pada HTML
Pengertian HTML 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 dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda seperti tag , dan lainnya. Sebuah halaman website akan diapit oleh tag ……. 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.
Tag-Tag Dasar Html Command HTML biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari document HTML. Tag tidak case sensitive, jadi anda bisa gunakan atau keduanya menghasilkan output yang sama. ---------
[3]
Struktur HTML Document Document HTML bisa di bagi mejadi tiga bagian utama: 1. ……. 2. …… 3. …… 1.
……. Setiap document HTML harus di awali dan di tutup dengan tag HTML …….. tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah document HTML.
2.
…… Bagian header dari document HTML di apit oleh tag …….. 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 “titile” 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 lainyan pada tag META. Atribut http-equiv dapat di gunkan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP header. Sehingga jika documents di cached, HTTP akan megetahui kapan untuk mengapdate document tersebut pada cache.
3.
…… Document body di gunakan untuk menampilkan text, image link dan semua isi atau content yang akan di tampilkan pada halaman web.
[4]
[5]
Menggunakan Tag pada HTML Beberapa contoh penggunaan tag HTML. Contoh script Ini tulisan tebalIni tulisan miringIni tulisan bergaris bawah Ini baris 1 Ini baris 2
Hasil Ini tulisan tebal Ini tulisan miring Ini tulisan bergaris bawah Ini baris 1 Ini baris 2
Ada beberapa tag yang memilki atribut didalamnya, seperti tag ,
, dan sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face. Untuk lebih memahami atribut lihatlah contoh berikut ini. Ini Font Arial berwarna merah dan berukuran 12 pt 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.
Daftar Tag pada HTML Berikut ini adalah tabel tag-tag HTML dan fungsinya: Tag Utama Tag
Atribut
background bgcolor bgsound font link alink vlink topmargin leftmargin marginheight marginwidth
Deskripsi Baris paling atas dari setiap file HTML Informasi umum dari sebuah halaman web Judul halaman. Terdapat pada head Settingan atribut untuk seluruh dokumen.
Font Tag
Atribut
Deskripsi
color size name
Mengubah gaya suatu huruf.
[6]
Formatting Tag
Deskripsi
untuk mengatur text dan gambar dalam suatu tag Ordered List (digunakan dengan
) Unordered List (digunakan dengan
) Elemen List Definition List Definition Term Definition Description Paragraf Ganti baris Garis horizontal Menengahkan elemen Sample
Modifikasi Teks Tag
Deskripsi
<pre>
Teks tebal Teks miring Teks garis bawah Preformatted teks
Header 2
Header 3
Header 4
<sub> <sup>
Header 5
Header 1
Header 6 Subscript Super
script
Links Tag
Atribut
Deskripsi
href target style class name id
Membuat link ke dokumen atau situs lainnya.
Tag
Atribut
Deskripsi
src alt name border height width
Menampilkan sebuah gambar
Gambar
[7]
Tabel Tag
Atribut
Deskripsi
border cellpadding cellspacing width height name id title bgcolor background align valign height bgcolor background align valign title height width bgcolor background align valign title colspan rowspan height width bgcolor background align valign title colspan rowspan height width align valign bgcolor background height width align valign bgcolor background colspan
Mengatur semua elemen table
Membuat baris baru
Membuat kolom
Header(kepala tabel). Otomatis ke tengah dan tebal.
Format yang berlaku bagi cell yang diapit tag.
Format yang berlaku bagi kolom
[8]
Form Tag
Atribut
Deskripsi
method action name text password hidden radio checkbox submit image reset name value width maxlength name value width maxlength name value name value name value checked value src height width alt name border value name size selected name value name rows cols wrap Off virtual physical
Mengatur elemen dari form
text
password
hidden radio checkbox
submit image
reset <select> wrap
Variasi dari tipe elemen form
Input berupa teks. Atrribut size digunakan untuk menetukan jumlah character yang bisa ditampilkan, maxlength digunakan untuk menentukan maximum character yang bisa di masukkan. Input berupa password, terlihat karakter tertentu
Digunakan untuk membuat variable hidden. Input berupa pilihan, memiliki satu name yang sama, sehingga user hanya bisa memilih satu option saja Input berupa pilihan, pilihan bisa lebih dari satu
Tombol untuk menerima seluruh input Mirip submit, untuk input berupa gambar yang dapat di klik
Tombol untuk membatalkan seluruh input Membuat combo-box/list box. Digunakan bersama dengan Daftar pilihan untuk combo box, checkbox, radio. Input berupa teks yang panjang atau kalimat untuk komentar atau pesan.
[9]
MENGGUNAKAN ATRIBUT DAN TAG Sebelum memulai sekedar mengingatkan apakah anda sudah membuat folder di drive C:\ yang bernama HTML jika tidak, buatlah sekarang. Lalu buatlah folder yang bernama bab 1, bab3 dan seterusnya. Jika anda praktik pada bab 3 maka simpanlah file anda pada folder bab 3. Demikian untuk seterusnya. Pada bab 3 ini materi yang diharapkan dapat anda kuasai antara lain: Menggunakan berbagai attribut dari tag diantaranya: Tag p, font, table, form, input, select, option, a, body, img, ul, ol, li dan attribute universal
A. Tag
…
Tag
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 simpan dengan nama bab3-tag p.html
Atribut Tag <P>
Teks ini berada di kiri
Teks ini berada di tengah
Teks ini berada di kanan
Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya, tag
merupakan default atau bentuk baku tag dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut align pada tag
maka browser akan menganggap rata kiri.
Setelah selesai simpan file tersebut dengan mengklik menu File – Save. Akan muncul kotak dialog
Gambar file bab3-tag p.html saat dijalankan pada web browser
[10]
B. Tag … Fungsi tag adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Pada bab 1 telah kita singgung penggunaan atribut font. Namun kita akan lebih bereksperimen dengan atribut ini. Dengan tag anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. Atribut color size face
Fungsi Untuk menentukan warna font, anda bisA menggunakan nama font atau hexadecimal (#000000 - #ffffff) Untuk menentukan ukuran dari font Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri. Color Red Green Blue Black White
Alignment Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain. Value Fungsi Left Rata kiri Right Rata kanan Center Rata tengah Justify Rata kanan kiri Ketik kode di bawah ini simpan dengan nama bab3-tag font.html 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><br />
<br />
[11]<br />
<br />
Gambar file bab3-tag font.html saat dijalankan pada web browser<br />
<br />
C. Tag <table>...</table> Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Lihat tabel daftar tag pada bab 1 untuk melihat daftar atributnya. 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. Jadi anda harus cukup menguasai tag ini. Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam satu kesatuan. Sebuah tabel mempunyai judul, tempat anda menjelaskan kolom/baris yang dilibatkan, baris untuk informasi dan sel untuk setiap itemnya. Pada tabel berikut, kolom pertama berisi informasi header, setiap baris menjelaskan sebuah tag tabel HTML dan setiap sel berisi sebuah pasangan tag atau penjelasan dari fungsi tag. Perintah/tag untuk membuat table dalam HTML adalah <table> ……. </table>. Tag <table> adalah salah satu tag yang memiliki atribut terbanyak. Dalam tag <table> juga terdapat 2 tag yang penting yaitu : <tr> …… </tr> untuk membuat baris <td> …... </td> untuk membuat kolom Atribut cellspacing digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah cell. Cellpadding digunakan untuk mengatur jumlah spasi yang terdapat antar batas/border dengan isi atau teks di dalam cell tersebut. Elemen-elemen dalam tag <table> . . . </table><br />
<br />
[12]<br />
<br />
Atribut tabel dan fungsinya<br />
<br />
Ketik kode dibawah ini simpan dengan nama bab3-tag table.html <html> <head> <title>Atribut dari tag tabel
Membuat Tabel
Ini kolom 1 pada baris 1
Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2
Ini kolom 2 pada baris 2
Contoh 2: Membuat Tabel
Ini kolom 1 pada baris 1
Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2
Ini kolom 2 pada baris 2
Tabel sebagai bingkai dari paragraf
Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web. Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman web.
Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi. Sebenarnya itu adalah tabel hanya saja atribut border="0" sehingga tabel seakan tidak ada(transparan).
Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai
[13]
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
Nama Barang
Harga Barang
Monitor
Rp. 500.000,-
CDRW
Rp. 245.000,0
Gambar Output file bab3-tag table.html
D. Tag Tag
[18]
Gambar Output file bab3-contoh form.html
G. Tag ... 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 dan akan dianggap link oleh browser. Salah satu fungsi dari tag HTML adalah membuat suatu karakter, kata atau gambar memiliki kemampuan untuk terhubung ke suatu alamat tertentu. Alamat yang dituju bisa terdapat pada bagian lain dokumen yang sama atau pada dokumen yang lain. Jika alamat yang dituju pada dokumen yang lain maka perlu disertakan Uniform Resource Locator (URL) dari dokumen yang terhubung tersebut. Dokumen tersebut bisa tersimpau pada komputer yang sama atau pada komputer lain yang terhubung ke www. Untuk membuat link tag HTML yang digunakan adalah ……. . Tag ini disebut anchor yang memiliki dua atribut, yaitu href atau name. Atribut href digunakan jika sebuah anchor akan digunakan sebagai link. Atribut name digunakan sebagai tujuan dari suatu link. Syntax name anchor : Membuat link ke name :
Gambar Output file bab3-tag A.html Ketik kode di bawah ini simpan dengan nama bab3-tag A.html Atribut dari tag A
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 dan akan dianggap link oleh browser. Atribut yang sangat penting dalam tag a adalah atribut href. Isi dari atribut ini adalah alamat website yang dituju.
Link juga mempunyai atribut target 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.
Untuk atribut target lainnya silahkan bereksperimen sendiri. Karena Thomas Alfa Eddison pun melakukan ribuan percobaan sebelum akhirnya ia dapat menemukan bohlam.
H. Tag ... 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.
[20]
I. Tag 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 . Format file yang dapat didukung oleh tag img bermacammacam 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
J. List Item >> Tag ...,
...
dan
...
Kali ini kita akan membahas 3 tag sekaligus. Karena masing-masing tag tidak dapat dipisahkan. Tag dan
keduanya membutuhkan tag
agar dapat menampilkan output. Tag-tag ini berguna untuk menyusun suatu daftar yang ingin anda tonjolkan pada pengunjung website atau biasa disebut dengan List Item. List item merupakan salah tag HTML yang digunakan untuk membuat proses pengurutan secara otomatis. Dalam Ms. Office biasanya dikenal dengan istilah bullet dan numbering. List item dalam HTML dituliskan sebagai berikut:
teks
Dua jenis list item yang sering digunakan dalam HTML adalah 1. Ordered List 2. Unordered List Ordered List Merupakan tag HTML yang digunakan untuk membuat proses pengurutan menggunakan angka atau huruf. Dalam Ms. Office dikenal dengan numbering. Cara penulisan ordered list: list entries Type dapat diisi dengan: A A, B, C, .... a a, b, c, ... I I, II, III, .... i i, ii, iii, ... 1 1, 2, 3, ... Secara default, type ordered list yang digunakan adalah pengurutan menggunakan angka 1 Unordered List Merupakan tag HTML yang digunakan untuk membuat list tidak terurut menggunakan simbol. Dalam Ms. Office dikenal dengan bullets. Cara penulisan unordered list:
list entries
Type dapat diisi dengan: Disc Circle Square
● ○ ■ [21]
Secara default, type unordered list yang digunakan adalah pengurutan menggunakan disc. Berikut contoh
Ketik kode di bawah ini simpan dengan nama bab3-list item.html Atribut dari tag ol, ul dan li
Penggunaan tag ol dengan li
Ini nomor 1
Ini nomor 2
Ini nomor 3
Penggunaan tag ul dengan li
Ini bullet 1
Ini bullet 2
Ini bullet 3
Gabungan tag ol, ul dan li
Ini bullet 1
Ini nomor 1
[22]
Ini nomor 2
Ini bullet 2
Ini nomor 1
Ini nomor 2
Gambar Output file bab3-list item.html
K. Atribut universal Yang dimaksud atribut universal dalam hal ini adalah suatu atribut yang pasti terdapat pada tag apapun. Kita semua tahu tidak semua atribut dapat dimasukkan dalam tag tertentu. Contohnya atribut cellpadding milik tag
tidak dapat digunakan oleh tag
. Berikut ini adalah daftar beberapa atribut universal yang penting. Name : atribut ini untuk memberi nama pada tag yang digunakan(sangat penting dalam tag yang memerlukan input dari user. Class : atribut ini digunakan khususnya jika anda menggunakan CSS(akan dibahas pada bab khusus). Title : atribut ini menampilkan keterangan yang telah ditentukan oleh pembuat (istilahnya tooltips pada windows. Gerakkan mouse anda pada jam komputer akan muncul tulisan, itulah tooltips).
