Dasar-Dasar Pembuatan

Web Design

Di Ajukan Untuk Memenuhi

Tugas PRODUKTIF Semester Genap

Disusun Oleh :

Nama : Feri Hidayatulloh

Kelas : XI RPL II

No.Abs : 13

PEMERINTAH KABUPATEN KENDAL

DINAS PENDIDIKAN DAN KEBUDAYAAN

SMK NEGERI 5 KENDAL

TAHUN AJARAN 2010/ 2011

PERSETUJUAN DAN PENGESAHAN

Laporan ini telah disetujui oleh pembimbing dan disahkan oleh Pembimbing Mapel RPL (Rekayasa Perangkat Lunak) SMK NEGRI 5 KENDAL Sebagai tugas Produktif semester gasal Kelas XI SMK NEGERI 5 KENDAL, Pada :

Hari :

Tanggal :

Pembimbing

( )

KATA PENGANTAR

Assalamualaikum Wr. Wb

Pertama – tama kami panjatkan puja dan puji syukur atas kehadirat Allah SWT, yang telah melimpahkan rahmatNya kepada kita semua. Sehingga kami dapat menyelesaikan laporan ini dengan sukses. Laporan ini kami susun untuk memenuhi tugas mid semester kelas IX Semester II tahun pelajaran 2010/2011.

Data – data ini kami peroleh dari hasil Pembelajaran di SMK 5 KENDAL selama ini dan dari browsing di Internet.

Dengan selsainya laporan ini, kami mengucapkan terima kasih yang sebesar – besarnya kepada :

Bapak dan Ibu Guru Pembimbing.
Semua teman – teman yang ikut membantu.
Orang tua yang ikut mendukung.

Dengan ini kami mohon ma’af apabila laporan yang kami tulis ini banyak kekurangan, kami minta Saran dan Kritikan apabila laporan ini masih ada kekurangan agar kami bisa memperbaikinya.

Semoga laporan ini dapat menjadi Sumber inspirasi bagi pembacanya dan bayak memberikan manfaat.

Waalaikumsalam Wr. Wb.

DAFTAR ISI

Halaman Judul....................................................................................................... 1

Persetujuan dan Pengesahan.................................................................................. 2

Kata Pengantar....................................................................................................... 3

Daftar Isi................................................................................................................ 4

Bab I Pendahuluan.............................................................................................. 5

a. Latar Belakang............................................................................. 5

b. Identifikasi Masalah.................................................................... 5

c. Tujuan.......................................................................................... 5

d. Manfaat........................................................................................ 5

e. Metode Penelitian........................................................................ 5

Bab II Pembahasan.............................................................................................. 6

1. Definisi Bandwidth & Data Transfer................................................ 6

2. Belajar HTML ............................................................... 8

3. Web Browser.................................................................. 20

4. Hosting............................................................................................... 22

5. HTTP.................................................................................................. 22

Bab III Penutup................................................................................................... 24

A. Simpulan.................................................................................................... 24

B. Saran.......................................................................................................... 24

BAB 1

PENDAHULUAN

A. Latar belakang

Laporan ini mengambil Judul ‘Dasar-dasar Pembuatan Web’ dengan pertimbangan sebagai berikut:

1. Segenap siswa SMK Negeri 5 Kendal Jurusan RPL pada semester dua kelas XI di wajibkan menyusun laporan.

B. Identifikasi masalah

Dari Penyusunan Laporan ini kami banyak mengalami permasalahan yang muncul, di antaranya sebagai berikut :

1. Bagaimana cara membuat web site sederhana.

2. Dapatkah siswa mempelajari pembuatan web sederhana.

C. Tujuan

Tujuan pembuatan laporan ini adalah sebagai berikut :

1. Memberi gambaran tentang web agar orang yang tertarik pada pemrograman web desain dapat memahaminya.

2. Memenuhi syarat tugas semester genap kelas XI Tahun Pelajaran 2010/2011.

3. Mengidentifikasi Dasar-dasar pembuatan web.

D. Manfaat

Manfaat dari Pembelajaran web adalah :

1. Dapat mendapatkan ilmu / pengalaman tentang web design.

2. Lebih mendalami pengertian dan manfaat sebuah situs web.

Metode Penelitian

Sebelum kami menyusun laporan ini, Kami telah melakukan pembelajaran langsung dan kami telah berusaha mengumpulkan data – data sebagai bahan pembuatan laporan ini

Kajian Pustaka
Pembelajaran langsung
Praktek

BAB II

Definisi Bandwidth & Data Transfer

Perbedaan antara Bandwidth dan Data TransferSangat mudah menemukan 2 istilah ini, Bandwidth dan Data Transfer, yang biasa digunakan dalam internet, khususnya pada paket - paket web hosting. Secara teknis, ada perbedaan mendasar pada dua istilah ini. Bandwidth adalah menunjukkan volume data yang dapat di transfer per unit waktu. Sedangkan Data Transfer adalah ukuran lalu lintas data dari website Anda. Lebih mudah kalau dikatakan bahwa bandwidth adalah rate dari data transfer.

Apabila bandwidth yang disediakan besar, maka website akan ter-load lebih cepat karena server mampu mentransfer data yang lebih besar tiap detiknya. Hal ini tidak membuat data transfer menjadi besar, karena jumlah dari data transfer tergantung pada jumlah pengunjung website dan ukuran file website Anda (termasuk gambar, audia, video dll). Makin besar angka pengunjung, makin besar jumlah data yang ditransfer dari website Anda maka makin besar pula data transfernya.

Bandwidth dan Koneksi Internet

Bandwidth pada umumnya menggunakan nilai dalam satuan bits/detik atau bytes/detik. Hal ini sangat penting untuk mengukur jumlah input output (I/O) sebuah alat. Sebagai contoh sebuah modem yang biasa digunakan untuk menghubungkan dengan internet memiliki ukuran maksimum (katakanlah 56 Kbps). Kemudian alat lain adalah sebuah modem kabel yang mampu mentransfer data lebih banyak tiap detiknya dan biasanya memiliki bandwidth sekitar 200 - 1000 Kbps. T1, sebuah Jalur sambungan internet mampu mentransfer data sampai dengan 1.5 Mbps atau lebih.

Kebutuhan Data Transfer untuk sebuah website

Data transfer di ukur dalam bytes, Kilo bytes (KB), mega bytes (MB) atau giga bytes (GB). Jika sebuah website menyajikan 100.000 halaman tiap bulannya dengan rata - rata besar ukuran halaman adalah 20KB, maka data transfer tiap bulannya adalah 2 GB. Hampir 80% dari website yang beredar di internet menggunakan data transfer kurang dari 5 GB/bulan.

30 Gigabytes dari bandwidth bulanan atau data transfer menunjukan sekitar 30.000 pengunjung unik (unique visitor) per hari. Rata - rata sebuah website menggunakan bandwidth kurang dari 250MB per bulan dan dikunjungi oleh 50 pengunjung per hari. Jadi hanya website yang sangat populerlah yang mampu melebihi batasan maksimum 30GB.

Kebenaran tentang data transfer yang tidak terbatas

Beberapa perusahaan web hosting menawarkan data transfer yang tidak terbatas. Bandwidth yang lebih besar akan memakan biaya yang lebih besar dan menggunakan sumber daya server (memory, hard disk dll) yang lebih besar, jadi apabila ada perusahaan web hosting yang menawarkan data transfer yang tidak terbatas dengan harga yang murah maka perusahaan itu tidak akan mampu bertahan di bisnis ini dalam waktu yang lama. Jika Anda membaca “Term of Service” perusahaan yang bersangkutan maka Anda akan menemukan point di bawah ini atau yang sejenis:

“If at any time the Customer’s website generates enough bandwidth usage to affect the performance of other customer sites on the server, we reserve the full right to terminate the Customer’s domain name without refund.”

“Jika suatu saat website pelanggan telah menggunakan bandwidth dengan batas tertentu yang mengakibatkan performa pelanggan lainnya menurun di dalam server yang sama, maka kami berhak mematikan domain pelanggan tanpa kompensasi apapun.”

Hal diatas berarti jika perusahaan web hosting tersebut merasa bahwa seorang pelanggan menggunakan bandwidth dan memakan biaya lebih banyak dibandingkan dengan jumlah biaya yang dibayarkan oleh pelanggan tersebut maka perusahaan web hosting akan menutup akun pelanggan tersebut tanpa kompensasi apapun. Tentu saja sumber daya tiap server di atur untuk tidak melebihi jumlah lalu lintas data yang sudah ditentukan, jadi makin besar bandwidth yang digunakan oleh pelanggan tersebut maka akan mempengaruhi akun pelanggan lainnya yang terletak pada sever yang sama. Yang perlu dipertanyakan adalah bagaimana pertimbangan sebuah perusahaan web hosting untuk menyatakan bahwa bandwitdh yang digunakan telah melibihi aturan? apakah 1GB, 2GB, 3GB, 5GB atau lebih? Apakah bandwidth yang ditawarkan benar - benar tidak terbatas? Bagaimana sebuah perusahaan web hosting mengetahui jika seorang pelanggannya telah memakai terlalu banyak bandwidth? dan bagaimana sebuah perusahaan web hosting menjaga performa server dari kehabisan sumber daya?

Belajar HTML yang merupakan dasar dari pembuatan website

Ini merupakan artikel pertama yang saya tulis di website saya ini. Karena diwebsite ini saya akan membagi-bagikan ilmu apa aja tentang pembuatan website, maka kita pelajari biangnya dulu, dasar dari semua dasar pembuatan website yaitu HTML.

HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link.

Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view - source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya.

HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org. Standar untuk HTML terbaru adalah HTML 4.0 yang telah didukung oleh bermacam-macam browser seperti Microsoft Internet Explorer, Netscape Navigator, Opera, Mozilla, Safari dan masih banyak lagi. Browser menterjemahkan tag yang terdapat pada dokumen HTML. Kita akan segera membicarakan mengenai tag.

Suatu halaman web merupakan file teks yang berarti anda dapat membuatnya hanya dengan menggunakan notepad saja. Bahkan jika anda masih pertama kali mempelajari HTML, notepad merupakan alat yang tepat. Saya menyarankan untuk menggunakan editplus karena menurut saya enak aja dipakainya, tetapi anda bebas menggunakan teks editor lain.

Jika anda baru pertama kali mengenal HTML, hindari Program WYSIWIG (What You See Is What You Get) seperti Dreamweaver atau Frontpage/Web Expression. Program-program ini memang memudahkan anda membuat website tetapi anda akan kurang memahami HTML, gunakan Frontpage atau Dreamweaver apabila anda sudah paham mengenai HTML.

Sekarang buka saja notepad anda dan kita mulai.

Kode HTML pertama

Buka notepad dan tuliskan kode dibawah ini

Hello World

Simpan file tersebut dengan nama hello.html didalam suatu folder (misal c:\webku) dan buka file HTML tersebut dengan browser kesukaan anda. Hasilnya seperti ini:

Hello <b>World!!</b>

Oke jadi apa yang dimaksud oleh "<" dan ">", ketika anda menuliskan sesuatu diantara tanda "<" dan ">" maka anda membuat sesuatu yang disebut dengan tag, kalau anda lihat dikamus bahasa inggris tag artinya tanda/label. Sebagai contoh tag <b> maksudnya untuk memulai huruf tebal (bold) dan tag </b> merupakan tag penutup untuk menghentikan huruf tebal.

Sebuah halaman HTML yang baik harus memiliki tag <head> dan <body>, tapi kita akan membicarakan masalah ini belakangan. Yang penting sekarang pahami dulu mengenai tag HTML. Sekarang akan kita pelajari lebih jauh mengenai tag HTML.

Tag HTML dibagi menjadi dua, yaitu tag HTML yang memiliki penutup (containers) atau yang berdiri sendiri (standalone).

Containers

Kebanyakan tag HTML adalah containers (kita sebut containers saja sebab sulit mencari terjemahannya dalam bahasa Indonesia) yang berarti tag tersebut memiliki pembuka (batas awal) dan penutup (batas akhir). Teks yang berada diantara tag pembuka dan penutup akan berubah sesuai dengan fungsi dari tag tersebut. Perhatikan contoh berikut:

Hello <i>World!!</i><br>

Hasil:

Hello World!!

Tag <i> berguna untuk memiringkan teks (italic) tag <i> memiliki penutup yaitu </i>. Tag penutup selalu ditandai dengan "/". Contoh diatas terdapat teks World!! diantara tag pembuka <i> dan tag penutup </i> sehingga menghasilkan tulisan World!! yang miring. Tag pembuka memiliki atribut tetapi tag penutup tidak memiliki atribut.

Standalone Tag

Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Sebagai contoh tag <img> yang merupakan tag untuk memasang sebuah gambar didalam halaman web. Tag lain yang tidak memiliki penutup adalah <br> yang berguna untuk memberi jarak antar teks dan tag <hr> untuk memberi garis. Tag HTML cukup banyak jumlahnya, anda dapat mencarinya dibuku-buku atau mencarinya melalui google untuk mengetahui apa saja jenis tag HTML. Tapi saya akan beritahu yangpenting-penting saja.

Atribut

Atribut dipasang didalam tag pembuka untuk menambahkan fungsi dari tag tersebut. Setiap tag memiliki beberapa atribut dan dipasang sesudah nama tag dibatasi oleh spasi. Urutan atribut tidak perlu diperhatikan. Kebanyakan atribut memiliki nilai yang dipanggil dengan menggunakan tanda "=" sesudah nama atribut. Bingung? coba kode berikut ini dijamin anda mengerti:

Hello <font face="verdana" size="2" color="red">World!!</font>

Hasilnya:

Hello World!!

Tulisan World!! terletak ditengah tag <font> nah tag <font> memiliki atribut face, size dan color yang dapat anda ubah nilainya. Cobalah untuk mengubah ukuran (size) menjadi 3 atau jenis fontnya ubahlah dari verdana menjadi arial. Kira-kira seperti itu kegunaan atribut. Bagaimana? lanjut?

HTML Entity

Jika anda ingin menuliskan karakter khusus dalam web, maka anda perlu menulisnya menggunakan kode khusus. Kode khusus ini dikenal dengan istilah HTML entity. Sebagai contoh anda ingin menulis seperti ini:

Saya belajar web

Anda lihat ada jarak spasi antara belajar dan web. Anda tidak bisa membuat spasi dengan menekan tombol space bar berkali-kali. Meskipun pada kode HTML hasilnya terdapat jarak namun browser hanya membacanya sekali, jadi sebanyak apapun space bar yang tekan browser hanya membacanya satu spasi. Lalu bagaimana caranya? Spasi dalam HTML memiliki kode HTML entity yaitu   jadi untuk membuat seperti contoh diatas anda perlu menulisnya seperti ini:

Saya belajar    web

HTML entity selalu diawali dengan "&" dan diakhiri dengan ";" ada banyak sekali HTML entity anda dapat mencarinya, dan lagi-lagi saya akan menyuruh anda mencarinya sendiri melalui google.

Struktur Dokumen HTML

Tadi sudah saya katakan bahwa HTML yang baik memiliki tag <head> dan <body>. <head> mendefiniskan bagian header dari dokumen HTML yang berisi informasi mengenai dokumen HTML tersebut. Tag <head> tidak memiliki atribut tetapi memiliki container khusus didalam header seperti <base>, <meta>, dan <title>. Tag <body> mendefinisikan awal dari isi website dan ditutup dengan </body>. Tag <body> berisi isi dokumen yang akan tampil di browser anda. Oke sekarang cobalah kode berikut ini:

<html>

<head>

<title>Your title</title>

</head>

Hello <b>World!!</b>

</body>

</html>

Hasilnya didalam Microsoft Internet Explorer :
Contoh HTML dasar

Anda lihat teks yang berada diantara tag <title> muncul dibagian atas browser. Apapun yang anda tulis diantara tag <body> akan muncul sebagai isi dari website anda. Jika anda lihat terdapat tag <body bgcolor="#cccccc"> bgcolor merupakan atribut dari <body> yang berguna untuk memberi warna pada background halaman website. Pelajari dan pahami kode tersebut maka anda akan mudah untuk mempelajari kode selanjutnya.

Susun file Anda

Sangat penting untuk meletakkan file-file HTML anda. Akan lebih baik jika anda membuat folder untuk meletakkan file-file HTML dan didalamnya anda membuat subfolder (misalnya images) untuk menyimpan file-file gambar. Semakin sering anda membuat website anda akan semakin berpengalaman dan mengetahui teknik dalam menyusun file. Jadi ini tergantung pengalaman anda.

index.html

Ketika anda membuka dhimasronggobramantyo.com/belajar.html maka otomatis browser akan membuka file belajar.html. Tetapi jika kita membuka dhimasronggobramantyo.com saja, file apa yang dibuka? Semua server web otomatis akan mencari file index.html.

Karena itu jika website anda memiliki banyak halaman, anda harus memiliki sebuah file index.html yang akan menjadi halaman pertama dari website anda.

Oke, sekarang kita pelajari tag-tag HTML yang penting. Semua kode HTML berikut ini harus ditulis didalam tag <body>

Teks dan Paragraf

Header/judul akan membuat mata pembaca tertuju pada judul dan tertarik untuk membacanya. Dengan menggunakan tag heading maka search engine dapat membaca seberapa penting isi dari suatu website.

Heading merupakan container yang diawali dengan tag <h1> dan ditutup dengan tag </h1>. Ada 6 level heading mulai dari h1 sampai h6.

Cobalah kode berikut ini:

<h1>My First HTML</h1>

<h2>My First HTML</h2>

<h3>My First HTML</h3>

<h4>My First HTML</h4>

<h5>My First HTML</h5>

<h6>My First HTML</h6>

Hasil:

Saya rasa anda dapat dengan mudah memahami kode tersebut, sekarang kita coba tag HTML penting lainnya. <p> digunakan untuk membuat paragraf, ini merupakan salah satu tag yang banyak digunakan, tag penting lainnya adalah <b> untuk menebalkan,<i> untuk memiringkan dan <u> untuk garis bawah

Sekarang coba kode berikut ini:

<p>Halo, nama saya <b>Budi</b> dan

saya ingin belajar HTML.</p>

<p>Ini merupakan <i>kode HTML pertama saya</i> dan saya

belajar untuk <u>memformat</u> teks dalam HTML </p>

Bagaimana hasilnya? silahkan anda coba sendiri, jika anda selalu melihat contoh dihalaman ini, anda tidak akan mencoba :)

Beberapa tag mempunyai atribut ALIGN, termasuk <p> dan <h1> - <h6>. ALIGN berguna untuk membuat teks rata kiri, tengah atau kanan. Cobalah kode berikut:

<p>Halo nama saya Jono dan saya lagi belajar HTML</p>

<p align="right">James, 2006</p>

Hasilnya:

Anda dapat mengubah jenis huruf, ukuran dan warna. Untuk mengubah huruf digunakan tag <font>, tag <font> memiliki atribut seperti face, size dan color. Contoh:

<p><font face="Arial" size="2" color="#FF0000">Nama

saya</font>

<b>Bambang</b><font face="Arial" size="2">

dan </font><font face="Tahoma">saya cinta rupiah</font></p>

Silahkan anda coba sendiri untuk melihat seperti apa hasilnya

Didalam HTML, untuk memberi jarak anda tidak bisa hanya menekan "enter" saja. Untuk memberi jarak perbaris kita perlu tag HTML yaitu <br> sedangkan untuk spasi seperti yang sudah saya jelaskan tadi, kita perlu menggunakan HTML entity / character entity, untuk spasi character entitynya adalah  . Langsung saja coba kode berikut ini:

<p>Baris 1<br>Baris 2<br>Baris     3<br>Baris

Hasil:

Baris 1
Baris 2
Baris 3
Baris 4

Untuk memberikan garis horisontal digunakan tag <hr>. Tag <hr> memiliki beberapa atribut. Tag <hr> tidak memerlukan tag penutup jadi tag <hr> merupakan standalone tag. Coba contoh berikut ini:

<p>Saya lagi belajar membuat garis horisontal.</p>

<p>Matur nuwun</p>

Hasil:

Seperti yang anda lihat, anda bisa memasang banyak atribut dalam satu tag. Pada tag <hr> terdapat atribut yang tidak memiliki nilai yaitu noshade. Memang dalam beberapa tag HTML terdapat atribut-atribut yang tidak memiliki nilai. Salah satunya adalah noshade yang berarti menghilangkan bayangan pada garis. Anda dapat melihat perbedaan tag <hr> yang menggunakan noshade dengan yang tidak pada kode diatas.

Bagaimana? mudah kan belajar HTML, jangan senang dulu sekarang kita akan mempelajari yang lebih sulit

Links

Oke anda telah membuat banyak halaman HTML, sekarang bagaimana caranya anda berpindah dari satu halaman ke halaman yang lain? Apakah saya perlu menuliskan alamatnya di browser? Link adalah jawabannya. <a> merupakan tag HTML untuk membuat link agar kita dapat berpindah ke halaman lain. Tag <a> memiliki atribut yang sangat penting yaitu href. Langsung saja coba kode berikut ini:

My <a href="http://www.dhimasronggobramantyo.com">Homepage</a>

Hasil:

My homepage

Jika anda lihat, maka teks homepage telah berubah menjadi link, jika anda klik maka browser akan menuju alamat yang tertera pada atribut href. Sekarang jika anda memiliki banyak file HTML dalam satu folder, apakah saya perlu menggunakan http:// untuk melinknya? tentu tidak anda cukup menulis nama filenya saja, asalkan file tersebut berada satu folder dengan file yang berisi link. Contoh:

My <a href="contact.html">homepage</a>

Hasil:

My homepage

Jika anda klik, maka browser akan membuka file contact.html yang berada pada satu folder. Bagaimana jika filenya berada difolder lain? gampang, gunakan kode berikut:

My <a href="folder/contact.html">homepage</a>

Hasil:

My homepage

Jika anda ingin ketika link diklik dan halaman tersebut muncul pada jendela browser yang baru, gunakan atribut target="_blank" seperti ini:

My <a href="http://www.dhimasronggobramantyo.com"

target="_blank">homepage</a>

Oke silahkan anda coba sendiri untuk melihat hasilnya, sekarang kita akan belajar tentang images

List

Tag list berguna untuk menampilkan list-list. Ada 3 macam jenis list pada HTML. Yang pertama adalah Unordered List <ul>:

<ul>

</ul>

Hasil:

List 1
List 2
List 3

Tag <ul> merupakan tag pembuka. Diantara tag <ul> Anda dapat menambahkan tag <li> untuk setiap list yang akan ditampilkan. Tag list lainnya adalah Ordered List <ol> Anda dapat menggunakannya sama seperti tag <ul> Contoh:

<ol>

</ol>

Hasil:

List 1
List 2
List 3

Jika anda ingin memulai list tidak dari nomor satu tambahkan atribut start. Contoh:

</ol>

Hasil:

List 1
List 2
List 3

Tabel merupakan hal yang paling penting dalam membuat interface website anda. Dengan tabel anda dapat memecah layout website menjadi beberapa kolom atau baris. Dengan tabel halaman website anda akan lebih rapih.

Table merupakan tag html terumit, karena didalam tag table terdapat tag-tag lainnya. Dan table sangat penting. Karena itu sebelum meneruskan, tarik nafas dalam-dalam dan konsentrasi.

Untuk membuat tabel maka diperlukan tag-tag dasar seperti ini :

<TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel.
<TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris.
<TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
<TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.

Setiap tag tabel tersebut memiliki banyak atribut. Oke langsung saja coba kode berikut ini:

Contoh:

<tr>

<td>Contoh Table</td>

</tr>

</table>

Hasilnya:

Contoh Tabel

Tabel diawali dengan tag <table> dan biasanya memiliki atribut border. Jika border="0" maka garis pada tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk memberi jarak antara kolom. Coba kode berikut ini:

<tr>

</tr>

</table>

Hasil:

Cell 1

Cell 2

Coba anda ubah nilai dari atribut cellpadding dan cellspacing untuk melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah nilai-nilai atributnya.

Setiap tabel memiliki baris dengan menggunakan tag <tr>. Didalam baris perlu sebuah kolom atau lebih, kolom dibuat dengan menggunakan tag <td>. Untuk lebih jelasnya cobalah kode berikut ini:

<tr>

<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>

<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td> /

</tr>

<tr>

</tr>

<tr>

<td width="100">cell 4</td> /

</tr>

</table>

Hasil:

Header	Header
cell 1	cell 2
cell 3	cell 4

Bagaimana anda mengerti maksudnya kode diatas, coba anda pahami dulu. Pada kode diatas terdapat atribut bgcolor yang berguna untuk memberi warna pada background. Didalam kolom <td> anda dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <table> didalamnya, yang berarti anda memasang tabel didalam tabel. Contoh lainnya:

<tr>

<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Hasilnya:

Header	Header
cell 1	cell 2
cell 1	cell 4

Anda lihat ada atribut rowspan="2" ini berguna untuk menggabungkan 2 baris menjadi satu, jika anda ingin menggabungkan lebih dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus. Jika sudah coba anda pahami kode berikut ini:

<tr>

<td width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>

</tr>

<tr>

<td width="100" bgcolor="#CCCCCC" align="right">Right</td>

</tr>

<tr>

Table is cool</td>

</tr>

<tr>

But it's not easy</td>

</tr>

</table>

Hasil:

Header	Header
Left	Right
Table is cool
But it's not easy

Anda sudah mengetahui dasar-dasar HTML. Masih banyak lagi tag-tag HTML lainnya seperti frames dan form. Saya akan mengajarkan frames diartikel lainnya, tetapi frames harus dihindari dalam membuat website, alasan utama apa yang ada didalam frames tidak terbaca oleh Search Engine. Tag form hanya dibutuhkan apabila anda membuat website dinamis menggunakan bahasa pemrograman web seperti PHP, ASP, Perl atau JSP.

Sekarang kita akan membicarakan tag <META>. Tag <META> digunakan agar search engine mengenal dan dapat mengkategorisasikan website anda, gampangnya agar search engine mengetahui website anda isinya tentang apa. Tetapi tidak semua search engine membaca tag <META> tetapi sebagian besar membaca tag ini, jadi kita perlu menyertakannya pada website kita. Tag <META> berada diantara tag <head> bukan <body> yang berarti isi tag tersebut tidak ditampilkan dibrowser.

Sebenarnya apa sih kegunaan Search Engine dan apa pengaruhnya untuk website? Saya akan jelaskan secara gampang, anda memiliki website katakan websitesaya.com, nah bagaiman milyaran pengguna internet dapat mengetahui kalau ada sebuah situs websitesaya.com diantara ratusan juta situs lainnya. Pengguna internet banyak yang melakukan pencarian melalui search engine seperti google atau yahoo. Jika mereka melakukan pencarian dan situs anda muncul pada hasil pencarian tersebut, maka anda mendapatkan pengunjung yang mengunjungi website anda. Bagaimana agar website saya ada di google atau search engine lainnya? ya dengan menggunakan <META> maka search engine akan mengenali website anda. Sebenarnya prosesnya jauh lebih rumit, search engine memiliki perhitungannya sendiri seperti ranking, backlink, recipocal link, tetapi kita ambil gampangnya saja.

Oke anda sudah mengerti pentingnya tag <META>Tag <META> memiliki atribut yang paling penting Keywords dan DESCRIPTION dimana kita memasukkan deskripsi dan kata kunci yang berhubungan dengan website kita.

Sebagai contoh misalnya kita memiliki website kecoak.com yang berisi bagaimana cara memelihara dan beternak kecoa. Maka kira-kira kita perlu membuat meta seperti ini:

<html>

<head>

<title>Ternak Kecoak</title>

</head>

Kira-kira seperti itu, ok anda telah mempelajari HTML, sekarang anda tinggal turun gunung dan mempraktekkan apa yang sudah dipelajari. Teruslah mencoba agar anda semakin ahli.

WEB BROWSER

Pengertian web browser atau internet browser adalah sebuah aplikasi perangkat lunak untuk melintasi, mengambil, dan menyajikan sumber informasi di World Wide Web. Sumber informasi diidentifikasi dengan Uniform Resource Identifier (URI) termasuk sebuah halaman web, gambar, video, atau bagian lain dari konten web.

Pengertian Web Browser dari Segi Fungsi

Tujuan utama dari web browser adalah untuk membawa sumber informasi kepada pengguna. Proses ini dimulai ketika pengguna memasukan sebuah Uniform Resource Identifier (URI), misalnya, http://anneahira.com ke dalam browser.

Sumber yang telah diambil web browser akan ditampilkan. HTML ditampilkan ke mesin tata letak browser, dan akan diubah dari markup ke dokumen interaktif. Selain dari HTML, web browser umumnya bisa menampilkan setiap jenis konten yang menjadi bagian dari suatu halaman web.

Kebanyakan browser dapat menampilkan gambar, audio, video, dan file XML, dan sering mempunyai plug-in untuk mendukung aplikasi Flash dan applet Java. Jika menemui tipe file yang ditetapkan untuk didownload, maka browser akan meminta pengguna untuk menyimpan file ke disk.

Rincian Web Browser

Memahami pengertian web browser harus juga memahami tentang rinciannya. Kita semua tahu apa itu web browser seperti yang terlihat, tapi ada baiknya untuk mengetahui rincian lengkap dari berbagai bagian browser web.

Bagian-bagian dari browser termasuk:

Status Bar. Ini adalah kotak di bagian bawah jendela browser Anda. Status bar menampilkan segala macam informasi, tergantung pada apa yang Anda lakukan pada saat itu. Sebagian besar untuk menunjukkan kecepatan beban dan URL dari alamat yang sedang ditunjuk oleh mouse.
Address Bar. Ini adalah kotak di bagian atas jendela browser Anda yang menampilkan seluruh URL atau alamat situs web.
Title Bar. Bar judul ada di bagian paling atas jendela browser Anda. Anda akan melihat judul halaman web di sana, misalnya, Anda akan melihat "Anne Ahira untuk Indonesia" ketika Anda membuka situs anneahira.com.
Toolbar Ikon. Toolbar dan ikon perusahaan browser yang ada di bagian atas kanan jendela browser Anda, di bawah Title Bar. Di sinilah Anda akan melihat tombol Back, tombol Home, tombol Refresh, dll.
Display Window. Jendela Display hanyalah istilah mewah untuk ruang kerja browser Anda. Ini berupa frame di mana Anda melihat halaman website.
Scroll Bar. Jika ketika Anda membuka situs web dan Anda harus "scroll ke bawah" untuk membaca sesuatu, maka Anda telah menggunakan scroll bar.

Macam-Macam Web Browser

Untuk memahami tentang pengertian web browser, berikut adalah beberapa web browser yang tersedia bagi Anda yang bisa didownload secara gratis.

Microsoft Internet Explorer. Sebagian besar pengguna internet menggunakan Internet Explorer karena mudah digunakan dan sebagian besar situs web yang ditulis dengan Internet Explorer, yang berarti bahwa mereka lebih kompatibel.
Opera. Opera merupakan browser populer yang mudah digunakan, namun memiliki beberapa masalah kompatibilitas dengan berbagai situs.
Mozilla Firefox. Firefox adalah web browser yang cukup cepat dalam memperoleh pengguna. Ia berada di belakang Internet Explorer karena memiliki tabbed browsing, fitur keamanan superior, dan akses yang cepat.
Google Chrome. Google Chrome adalah web browser yang dirancang untuk sistem Windows. Ia menawarkan desain minimal dan 'teknologi canggih', untuk membuat akses lebih cepat, aman, dan mudah.
Mac Safari. Khusus untuk pengguna Mac, Safari adalah pilihan yang sangat baik untuk sebuah web browser. Safari berkemampuan akses cepat dan kompatibilitas yang baik.

Pengertian Hosting :

Hosting (disebut juga Web Hosting / sewa hosting) adalah penyewaan tempat untuk menampung data-data yang diperlukan oleh sebuah website dan sehingga dapat diakses lewat Internet. Data disini dapat berupa file, gambar, email, aplikasi/program/script dan database.

Pengertian Hosting dapat diibaratkan sebagai contoh berikut; sebuah website diibaratkan sama dengan kios/ruangan di Mall.

Manajemen Mall menyewakan ruangan, infrastruktur, listrik, telepon dan fasilitas lainnya agar orang-orang dapat membuka usaha. Setiap kios pengelolanya dapat berbeda, dekorasinya berlainan dan beroperasi masing-masing dengan caranya sendiri. Dalam hal ini kios atau ruangan yang disewa tentu mempunyai batasan ruangan (mis: 10m x 7m) dan maksimum adalah besarnya gedung Mall tersebut.

HTTP

HTTP adalah sebuah protokol meminta/menjawab antara klien dan server. Sebuah klien HTTP (seperti web browser atau robot dan lain sebagainya), biasanya memulai permintaan dengan membuat hubungan ke port tertentu di sebuah server Web hosting tertentu (biasanya port 80). Klien yang mengirimkan permintaan HTTP juga dikenal dengan user agent. Server yang meresponsnya, yang menyimpan sumber daya seperti berkas HTML dan gambar, dikenal juga sebagai origin server. Di antara user agent dan juga origin server, bisa saja ada penghubung, seperti halnya proxy, gateway, dan juga tunnel.
HTTP tidaklah terbatas untuk penggunaan dengan TCP/IP, meskipun HTTP merupakan salah satu protokol aplikasi TCP/IP paling populer melalui Internet. Memang HTTP dapat diimplementasikan di atas protokol yang lain di atas Internet atau di atas jaringan lainnya. seperti disebutkan dalam "implemented on top of any other protocol on the Internet, or on other networks.", tapi HTTP membutuhkan sebuah protokol lapisan transport yang dapat diandalkan. Protokol lainnya yang menyediakan layanan dan jaminan seperti itu juga dapat digunakan.
Sebuah sesi HTTP adalah urutan transaksi permintaan dan respons jaringan dengan menggunakan protokol HTTP. Sebuah klien HTTP akan memulai sebuah permintaan. Klien tersebut akan membuka sebuah koneksi Transmission Control Protocol|Transmission Control Protocol (TCP) ke sebuah port tertentu yang terdapat dalam sebuah host (umumnya port 80 atau 8080). Server yang mendengarkan pada port 80 tersebut akan menunggu pesan permintaan klien. Saat menerima permintaan, server akan mengirimkan kembali baris status, seperti "HTTP/1.1 200 OK", dan pesan yang hendak diminta, pesan kesalahan atau informasi lainnya.

>>HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan 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).

Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser

BAB III

PENUTUP

A. SIMPULAN

Demikian telah kami selesaikan, laporan ini kami susun berdasarkan pembelajaran langsung dan dari beberapa data yang kami peroleh dan akhirnya kami mendapatkan beberapa kesimpulan antara lain:

1. Kegiatan pembelajaran Dasar-Dasar Pembuatan Web Design sangat membantu kami pada saat ulangan harian tentang BAB Dasar-Dasar Pembuatan Web Design.

2. Kegiatan ini dapat menambah wawasan tentang Pembuatan Web Design.

B. SARAN

Dari hasil laporan pembelajaran Dasar -Dasar Pembuatan Web Design ini, kami dapat memberikan saran kepada para pembaca antara lain:

1. Belajar tidak hanya di sekolahan saja, tetapi belajar dapat di lakukan di rumah dan itu sangat membantu untuk memahami materi dan juga dari internet.

2. Gunakan waktu luangmu untuk belajar.

Demikian saran yang dapat kami berikan kepada para pembaca, mohon maaf bila ada kesalahan dalam kami menyusun lapooran ini. Semoga dapat menjadi inspirasi yang membangun bagi para pembaca. Kami ucapkan terimakasih atas partisipasinya kepada para pembaca .