Pembuatan Tabel dalam Tabel

1. Tabel di dalam Tabel (Tabel bersarang)

Coba perhatikan gambar tabel berikut ini :

Gambar Tabel Online Order

           Dapat kita lihat bahwa di kolom “Email account note” ada table berisi tentang catatan jenis email. Jadi ada tabel di dalam tabel atau istilahnya “nested table” atau tabel bersarang.

Dalam penulisan HTML “tabel bersarang” ini adalah dengan menuliskan HTML Tabel di dalam sebuah sel dari tabel, letaknya adalah pada <td>….</td>, seperti berikut ini :

       Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).

Berikut ini contoh langkah-demi langkah :

• Buatlah tabel dengan 2 kolom dan 2 baris. HTML tag-nya adalah sebagai berikut :

• Tentukan sel dimana kita ingin menempatkan tabel bersarang. Kita akan menaruh di kolom 2 baris 2.
• Ganti teks dalam sel itu dengan tabel kedua. HTML akan terlihat seperti ini

Hasilnya adalah sebagai berikut :

Trik untuk tabel bersarang adalah untuk selalu menutup tag tabel dalam sebelum menutup sel tabel luar.

            Teknik tabel bersarang adalah salah satu cara untuk menghasilkan layout tabel yang kompleks tanpa membuat tabel yang sangat kompleks. Sehingga ketika harus membuat tabel yang kompleks, maka cara sederhananya adalah membuat tabel di dalam sebuah sel (<td></td>).

Contoh HTML tabel dalam tabel seperti gambar berikut ini:

Hasilnya seperti ini

Menyajikan Pembuatan Tabel dan Tabel Spaning

1) Pembuatan Tabel

        Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table pada HTML, digunakan Tag<Table>.

Elemen table berisi property <tr> untuk menentukan baris(table row) yang didalamnya terdapat properti <td> untuk menampkan data pada setiap sel table(table data).

Struktur elemen table adalah sebagai berikut:

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag "<th> ….. </th>"

Atribut Elemen Table

Atribut Tabel Row

Atribut Tabel Data

Untuk mengatur teks ataupun gambar dalam baris dan kolom, digunakanlah pemformatan Tabel

Tag Utama untuk tabel adalah :

2) Pembuatan Tabel Spaning

       Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris :

Berikut ini contoh tabel yang menggabungkan kolom :

Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan adalah sebagai berikut

Jadi untuk menggabungkan 4 baris seperti table di atas adalah :

Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :

Untuk menggabungkan baris ataupun kolom pada tabel, digunakan atribut :

• Rowspan : untuk baris
• Colspan : untuk kolom

Menyajikan Pembuatan List Kombinasi

1) Pembuatan list Kombinasi

       Perhatikan daftar berikut ini :

        Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan daftar tidak berurutan.

Untuk membuat daftar diatas pada dokumen HTML maka cukup menggabungkan <ol> dangan <ul>.

Perhatikan penggabungan <ol> dengan <ul> berikut ini :

                                 <ol>                                                                     

                                         <li> </li>                                                    

                                         <li>                                                              

                                                  <ul>                                                     

                                                           <li> </li>                                         

                                                           <li> </li>                                       

                                                           <li> </li>                                     

                                                 </ul>                                                   

                                         </li>                                                               

                                 </ol>                                                                         

      Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh browser akan ditampilkan secara otomatis menjadi daftar bullet.

       Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe yang sama dengan daftar berurutan sebelumnya. Contoh :

                                         <ul>                                                                    

                                                     <li> </li>                                                

                                                              <ol type=i>                                   

                                                                      <li> </li>                               

                                                                      <li> </li>                               

                                                              </ol>                                              

                                                      <li>                                                        

                                                              <ol type=i>                                    

                                                                      <li > </li>                              

                                                                      <li> </li>                               

                                                              </ol>                                             

                                                      </li>                                                      

                                                      <li> </li>                                              

                                          </ul>                                                                 

Memulai dengan nomor tertentu

Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1 (nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start” pada elemen tag <ol>.

Misalnya contoh berikut :

                                  <ol start="17">                                                                   

                                           <li>Blok huruf dengan text tool</li>                          

                                           <li>Klik tab karakter</li>                                         

                                           <li>Pilih jenis huruf pada menu pop-up .</li>            

                                  </ol>                                                                                

Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18 dan 19.

Demikian juga apabila :

                              <ol type=”A” start="17">                                                       

                                          <li>Blok huruf dengan text tool</li>                          

                                          <li>Klik tab karakter</li>                                         

                                          <li>Pilih jenis huruf pada menu pop-up .</li>            

                              </ol>                                                                                   

Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R, dan S. Artinya Q=17 dan R=18, selanjutnya S=19 dan seterusnya.

      Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal, biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa paragraph, sehingga ketika dibuat daftar bernomor, secara default akan dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka digunakanlah atribut “start=” tersebut.

   List kombinasi adalah kombinasi daftar berurutan dengan tidak berurutan sekaligus. Untuk membuat daftar/list kombinasi yaitu menggabungkan atau mengkombinasikan tag <ol> dengan <ul>. Daftar berurutan tidak selalu diawali dengan nomor satu, tetapi dapat diawali dengan nomor tertentu, yaitu dengan memberi atribut start=” ”.

Menyajikan Hasil Pembuatan List Minimal

1) Pengertian List

List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema kuliner, list dapat berupa daftar dari makanan dan minuman, beserta harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan dari langkah pertama sampai langkah terakhir.

Contoh List :

2) Tipe Daftar dalam Dokumen HTML

    Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :

• Daftar berurutan (ordered list)
• Daftar tidak berututan (unordered list)
• Daftar definisi (definition list)

3) Daftar Berurutan (Ordered List)

Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter alphabet terntentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak dapat dilakukan secara acak.

Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML, misalnya :

Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.

Contoh penulisan adalah sebagai berikut :

Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam suatu list adalah :

4) Daftar Tidak Berurutan (Unordered List)

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu, misalnya gambar kotak atau bulat (bullet).

Contoh :

Pada contoh di atas, kita dapat mengubah/mengacak secara bebas urutan dari masing-masing item yang ada. Hal ini disebabkan karena setiap item yang ada tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan. Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML, digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag <ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.

Contoh penulisan adalah sebagai berikut :

Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk setiap item berupa tanda bulatan untuk defaultnya..

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list adalah :

5) Daftar Definisi (Definition List)

Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah tertentu, misalnya daftar definisi istilah HTML.

Contoh :

Menyajikan pemformatan Teks dan Paragraf Web

1. Pemformatan Teks
Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen web :

HTML menggunakan tag seperti <b> dan <i> untuk memformat output, seperti teks tebal atau miring.

Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :

                                Tag HTML Pemformatan Teks

                                Tag HTML "Keluaran Komputer"

                                HTML Citations, Quotations, and Definition Tags

2. Pemformatan Paragrap

Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>.

Berikut ini contohnya :  <p> ini adalah paragrap </p>       

                                       <p> ini adalah paragrap lain </p>

Menyajikan Format Teks dalam Dokumen Web

Dasar-Dasar HTML

HTTP (Hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protocol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (Hypertext Markup Language). Dikatakan markup language karena HTML berfungsi untuk ‘memperindah’ file teks biasa untuk ditampilkan pada program web browser hal ini dilakukan dengan menambahkan elemen atu sering disebut sebagai tag-tag pada file teks biasa tersebut.

Saat ini sudah dikenal HTML5 yang menawarkan berbagai fitur menarik yang tidak didukung oleh HTML sebelumnya. Beberapa fitur yang tersedia pada HTML5 antara lain sebagai berikut.

o Canvas. Memungkinkan pembuatan gambar dalam kanvas. Jadi, gambar tidak lagi diambil dari
   gambar utuh, melainkan bisa disusun sendiri, bak menggunakan program Paint.
o Header. Berguna untuk menyatakan suatu judul, yang bisa diisi dengan elemen logo dan nama
   perusahaan.
o Footer. Merupakan kebalikan dari header. Sebagai catatan kaki, elemen ini berguna untuk menaruh
   informasi di bagian bawah halaman web.
o Time. Elemen ini berguna untuk menyajikan informasi tentang waktu.
o Audio. Memungkinkan penyajian player untuk memutar suara.
o Video. Memungkinkan player untuk memainkan film.

Secara prinsip, fitur pada HTML dapat dikelompokkan ke dalam :
   o Struktur halaman ;
   o Presentasi visual ;
   o Peranti penyaji gambar ;
   o Pendukung media ; dan
Peningkatan koneksi dengan JavaScript.

Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan symbol lebih besar (<) dan (>). Pasangan dari sebuah tag ditandai dengan symbol garis miring (/). Misalnya pasangan dari tag <contoh > adalah</contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut:

<contoh atribut1=”nilai_atribut1”atribut2=”nilai_atribut2=”…>.

Dalam penulisan tag HTML tidaklah case sensitive artinya pengguna huruf kecil ataupun capital tidaklah menjadi masalah.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :

Seperti terlihat, struktur file HTML diawali dengan sebuah tag<html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag<head>…</head> dan tag <body>…</body>.

Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <tittle>… </tittle> yang berpungsi untuk mengeluarkan judul pada tittle bar window web browser.

Bagian kedua, yang diapit ole tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini anada akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin sampaikan pada pengguna nantinya.

Pengaturan Properti Dokumen

Properti document diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakng halaman, wana teks, warna link dan lain-lain.

Kode Warna

Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua gigit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kobinasi warna berikut ini adalah contoh kode warna :

Atribut Elemen <body>

BACKGROUND = Lokasi dan nama file (latar belakng dokumen image dokumrn)

BGCOLOR = Warna (warna latar belakng dokumen, default putih)

TEXT = Warna (warna teks dokumen, default hitam)

LINK = Warna (warna link dokumen, default biru)

VLINK = Warna (warna visited link dokumen, default ungu)

ALINK = Warna (warna aktif link dokumen, default merah)

Elemen Heading <h1>… <h6>

Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halam web. Heading ini akan memperbesar ukuran huruf unruk setiap jenis heading. Ad 7 buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h6>.

Elemen yang dihilangkan di HTML5

Berikut ini elemen HTML 4.01 yang dihilangkan di HTML5:

• <acronym>
• <applet>
• <basefont>
• <big>
• <center>
• <dir>
• <font>
• <frame>
• <frameset>
• <noframes>
• <strike>
• <tt>

Dokumen HTML5

Sebuah dokumen HTML5 seperti berikut ini, cukup ditulis dengan Text Editor ataupun HTML 

Editor :

                                  <! DOCTYPE HTML>

                                  <html> 

                                               <head>

                                                      <title>Tes HTML5</title>

                                               </head> 

                                               <body>

                                                Selamat belajar HTML5

                                               </body> 

                                </html>

Berikut ini penjelasan dari dokumen HTML5 di atas :

    o Sebuah dokumen HTML5 diawali dengan <!DOCTYPE HTML>.

    o Tanda seperti <html> disebut tag. Sebuah tag seperti itu menyatakan sebuah elemen 

       dalam dokumen html.

    o Beberapa tag berpasangan. Sebagai contoh, <head> berpasangan dengan </head>.

    o Namun, tidak semua tag berpasangan. Sebagai contoh, <br> tidak punya pasangan. Khusus 

       untuk tag seperti ini, tidak ada keharusan untuk menyertakan tanda / sebelum >. Pada 

       XHTML, tanda seperti / memang diharuskan untuk ditulis.

    o Pasangan <html>..</html> menyatakan awal dokumen HTML.

    o Di dalam <html>..</html> terdapat pasangan <head>..</head> dan <body>..</body>.

    o Pasangan <head>..</head> menyatakan bagian judul dokumen HTML. Isinya paling tidak 

       berupa pasangan <tittle>..</tittle>.

    o Pasangan <body>..</body> menyatakan bagian tubuh dokumen. 

       Pada contoh,  Selamat belajar HTML 5

Muncul pada badan dokumen. Apabila dibuka di web browser tampilannya sebagai berikut :

Gambar Tampilan Dokumen HTML di Web Browser

Gambar berikut ini memperlihatkan penjelasan secara visual terhadap dokumen HTML di depan.

Gambar Penjelasan dokumen HTML

** Untuk selain HTML5 diwajibkan tidak menggunakan kode html ini "<!DOCTYPE HTML>" karena kode tersebut khusus HTML5 jika kode html tersebut digunakan maka, format HTML kalian buat akan bermasalah atau error

THANK'S FOR IS COMING MY BLOG   ^_^

Alur dan Perangkat Pengembangan Aplikasi Web

• Alur Pengembangan Aplikasi Web

               Berdasarkan persepsi dari beberapa pengembang perangkat lunak dan ahli-ahli dalam bidang rekayasa perangkat lunak (software engineering professional), Pengembangan Aplikasi Web tidaklah sama dengan rekayasa perangkat lunak walaupun keduanya melibatkan pemrograman dan pengembangan perangkat lunak. Walaupun banyak mengadopsi prinsip-prinsip rekayasa perangkat lunak, Pengembangan Aplikasi Web memiliki banyak pendekatan, metoda, alat bantu, teknik dan panduan yang memenuhi persyaratan pembuatan sistem berbasis web. Pengembangan sistem berbasis web berbeda dengan pengembangan perangkat lunak konvensional, dimana pengembangan sistem berbasis web lebih banyak menghadapi tantangan. Pengembangan Aplikasi Web adalah gabungan dari print publishing dan pengambangan perangkat lunak, diantara marketing dan perhitungan dan diantara seni dan teknologi.

Alternatif model dari Pengembangan Aplikasi Web adalah sebagai berikut :

Formulasi (formulation)
Kegiatan yang berfungsi untuk merumuskan tujuan dan ukuran dari aplikasi berbasis web serta menentukan batasannya sistem.
Tujuan yang ingin dicapai bisa dibedakan menjadi dua kategori, yaitu :
1. Tujuan yang bersifat informatif
     Menyediakan suatu informasi tertentu kepada pengguna, berupa teks, grafik, audio, dan video.
2. Tujuan yang bersifat fungsional

     Kemampuan untuk melakukan suatu fungsi yang dibutuhkan pengguna, misal dengan
     menggunakan aplikasi tersebut seorang guru dapat memperoleh nilai akhir dan statistik nilai
     guru dari data-data ujian, tugas, kuis yang ia input ke dalam aplikasi.

Perencanaan (planning)

Kegiatan yang digunakan untuk menghitung estimasi biaya proyek pembuatan aplikasi berbasis web ini, estimasi jumlah pengembang, estimasi waktu pengembangan, evaluasi resiko pengembangan proyek, dan mendefinisikan jadwal pengembangan untuk versi selanjutnya (jika diperlukan).

Analisis (analysis)

Kegiatan untuk menentukan persyaratan-persyaratan teknik dan mengidentifikasi informasi yang akan ditampilkan pada aplikasi berbasis web. Analisis yang digunakan pada rekayasa web dilakukan dari empat sisi, yaitu :

1. Analisis isi informasi
    Mengidentifikasi isi yang akan ditampilkan pada aplikasi berbasis web ini. Isi informasi dapat
    berupa teks, grafik, audio, maupun video.
2. Analisis interaksi
    Analisis yang menunjukkan hubungan antara web dengan pengguna.
3. Analisis fungsional
    Analisis tentang proses bagaimana aplikasi berbasis web ini akan menampilkan informasi kepada
    pengguna.
4. Analisis konfigurasi
    Konfigurasi yang digunakan pada aplikasi berbasis web, internet, intranet, atau extranet. Selain
    itu, analisis  ini juga meliputi relasi database dengan web jika diperlukan.

Rekayasa (engineering)

Terdapat dua pekerjaan yang dilakukan secara paralel, yaitu desain isi informasi dan desain arsitektur web.

Pada saat tahap desain, ada beberapa hal yang perlu dilakukan :

• Pembuatan Diagram Wireframe (Gambar Rangka), tujuan dari diagram gambar rangka adalah untuk menunjukkan bagaimana lay out halaman web dan menunjukkan di mana fungsi dan konten seperti navigasi, kotak pencarian, elemen bentuk dan sebagainya, tanpa desain grafis. Berikut ini contohnya :

Gambar Diagram Wireframe sebuah halaman web.

• Diagram Situs, Sebuah diagram situs menunjukkan struktur situs secara keseluruhan dan bagaimana halaman individual berhubungan satu sama lain. Gambar 2.2 menunjukkan diagram situs yang sangat sederhana

Gambar Diagram Situs

• Storyboard dan diagram alir pengguna, Storyboard ini bertujuan untuk menunjukkan langkah-langkah yang diperlukan untuk menyelesaikan tugas-tugas, opsi yang mungkin, dan juga memperkenalkan beberapa standar jenis halaman. Gambar 1-3 menunjukkan storyboard sederhana

Gambar Desain Visual (Sumber: www.idwebhost.com, www.idebagus.com)

Implementasi (page generation) & pengujian (testing)

Suatu kegiatan pengembangan untuk mewujudkan desain menjadi suatu web site. Teknologi yang digunakan tergantung dengan kebutuhan yang telah dirumuskan pada tahap analisis.

Dalam tahap pengembangan ini, meliputi kegiatan:

• Authoring, adalah istilah yang digunakan untuk proses mempersiapkan konten untuk nantinya diunggah di Web, atau lebih khusus, menandai konten dengan tag HTML yang menggambarkan isi dan fungsinya.

• Styling, dalam development web, penampilan halaman dalam browser dikendalikan oleh aturan style yang ditulis dalam CSS ( Cascading Style Sheets )

• Scripting dan pemrograman, ada bahasa pemrograman web terkait diantaranya PHP, Ruby, Python, dan ASP.NET, yang berjalan pada server dan mengolah data dan informasi sebelum dikirim ke browser pengguna.

          Pengujian dilakukan setelah implementasi selesai dilaksanakan. Pengujian meliputi beberapa parameter yang akan menentukan standar aplikasi berbasis web yang telah dibuat. Tahap pengujian adalah suatu proses untuk menguji aplikasi berbasis web yang telah selesai dibuat. Hal ini bertujuan untuk menemukan kesalahan dan kemudian memperbaikinya. Pengembang suatu aplikasi berbasis web mendapat tantangan besar untuk melakukan pengujian karena karakter aplikasi ini yang beroperasi pada jaringan dengan berbagai macam pengguna, berbagai macam sistem operasi, perangkat keras, browser, protokol komunikasi, dll.

Ada beberapa pendekatan yang digunakan untuk melakukan pengujian, yaitu :
1. Pengujian fungsional dan operasional (fungsional and operational testing)

     Bertujuan untuk menguji masukan dan keluaran dari aplikasi ini. Hasil keluaran aplikasi
     bergantung dari teknologi yang digunakan, baik itu bahasa pemrograman maupun bahasa
     skrip yang digunakan. Untuk menguji code HTML dan CSS yang digunakan dapat menggunakan
     alat bantu W3C HTML Validation Service di http://validator.w3.org/ dan W3C CSS
     Validation Service di http://jigsaw.w3.org/css-validator/

2. Pengujian navigasi (navigation testing)

     Hal ini digunakan untuk melihat kesesuaian antara desain navigasi dengan navigasi yang ada di
     aplikasi. Navigasi berhubungan dengan link-link yang terdapat didalam aplikasi. Untuk menguji
     link dapat digunakan alat bantu W3C Link Checker Service di http://validator.w3.org/checklink

3. Pengujian konfigurasi (configuration testing)

     Pengujian ini dilakukan pada sistem operasi, browser, sistem perangkat keras dan perangkat
     lunak pendukung. Pengujian ini dilakukan untuk menentukan batas toleransi kebutuhan aplikasi  
     akan perangkat  lunak dan perangkat keras pendukungnya.

4. Pengujian keamanan dan performansi (security and performance testing)

    Pengujian ini dilakukan untuk melihat tingkat keamanan aplikasi dengan cara menguji aspek-
    aspek yang dapat menimbulkan gangguan keamanan aplikasi maupun server. Keamanan
    aplikasi sangat bergantung pada teknologi pengembangan website, konfigurasi server yang
    digunakan dan kelakuan sistem. Pengujian performansi dapat dilakukan bersamaan dengan
    pengujian keamanan aplikasi, karena keamanan aplikasi berbasis web juga tergantung dari
    performansi server dan aplikasi tersebut.

  

 Evaluasi oleh konsumen (customer evaluation)

           Suatu kegiatan akhir dari siklus proses rekayasa web, akan menentukan apakah web yang telah selesai dibuat tersebut sesuai dengan yang mereka inginkan. Apabila aplikasi berbasis web ini belum sesuai dengan kehendak mereka, maka proses rekayasa web akan terus dilakukan dan dimulai lagi dari tahap formulasi untuk versi berikutnya.

Perangkat pengembangan aplikasi web
               Untuk perangkat pengembangan aplikasi web dapat dikelompokan menjadi perangkat keras dan perangkat lunak.

Perangkat Keras
Untuk lingkungan pengembangan web yang nyaman, berikut ini peralatan yang sebaiknya disediakan:

• Komputer Utama, dengan operating system Macintosh, Windows, ataupun Linux. Perusahaan pengembangan web profesional cenderung berbasis Macintosh.
• Memori tambahan. sebaiknya computer memiliki memori yang besar, karena dalam pengembangan web cenderung kita akan membuka beberapa aplikasi sekaligus.
• Sebuah monitor besar. Meskipun bukan keharusan, monitor besar memudahkan untuk desainer visual. Semakin besar monitor, semakin banyak jendela dan panel kontrol dapat terbuka pada waktu yang sama.
• Sebuah scanner dan / atau kamera digital. Jika mengantisipasi membuat gambar dan tekstur sendiri, akan memerlukan beberapa alat untuk membuat gambar.
• Sebuah komputer kedua. Banyak web designer merasa berguna memiliki komputer penguji yang menjalankan platform yang berbeda dari komputer utama yang mereka gunakan untuk pengembangan. Karena browser kerja yang berbeda pada Mac dan pada mesin Windows, itu penting untuk menguji halaman web dalam sebanyak mungkin system operasi berbeda.
• Perangkat mobile/smartphone. Saat ini banyak orang mengakses web melalui smartphone/tablet, sehingga kita perlu menguji penampilan dan kinerja situs web yang kita buat pada mobile browser pada smartphone atau perangkat tablet. Namun saat ini banyak web emulator yang dapat digunakan sebagai penguji web kita

Perangkat Lunak
Untuk perangkat lunak pengembangan web dapat dikelompokkan menjadi beberapa, diantaranya :


         1. Web page authoring
                    Ini adalah kelompok perangkat lunak seperti desktop publishing tetapi format yang

            dihasilkan adalah halaman web. Aplikasi ini biasanya bersifat “WYSIWYG” (What You See

            Is What You Get, dibaca “whizzy-wig”) yaitu apa yang kamu lihat, itulah yang kamu

            dapatkan. Jadi aplikasi ini biasanya ketika membuat tampilannya seperti yang akan 

            dihasilkan.
            Beberapa contoh aplikasi yang termasuk dalam kelompok ini :

• Adobe Dreamweaver, aplikasi ini berbayar dan dibawah lisensi perusahaan Adobe, aplikasi ini banyak digunakan oleh pengembang web. Memiliki banyak fasilitas dan fiture.
• Microsoft Expression Web (lisensi dari Windows). Bagian dari Microsoft’s suite yang merupakan aplikasi perancangan professional.
• Nvu (Linux, Windows, dan Mac OS X). Tidak ingin membayar untuk Editor WYSIWYG? Nvu (diucapkan N-view, untuk "pandangan baru") adalah sebuah aplikasi open source (sumber terbuka) yang cocok dengan banyak fitur dalam Adobe Dreamweaver, dan dapat diunduh secara gratis di nvu.com.
  

Gambar Tampilan aplikasi Adobe Dreamweaver CS6

   

Gambar  Tampilan aplikasi Microsoft Expression Web 

 Gambar Tampilan aplikasi Nvu 

                 2. Editor
                         Ini adalah kelompok perangkat lunak yang kebalikan dari Adobe Dreamweaver
                  Microsoft Expression Web. Aplikasi ini tidak lagi “WYSIWYG” (What You See Is What                     You Get”) tetapi lebih ke kode HTML. Beberapa contoh aplikasi yang termasuk dalam
                  kelompok ini :

• TextPad (Windows saja). TextPad adalah plain-text sederhana dan murah untuk editor kode di Windows.
• Teks Sublime (Window, Mac, Linux). Editor teks ini terlihat dipreteli namun memiliki banyak fungsi (seperti kode warna dan ikhtisar kode penuh) bagi pengembang web.
• Coda oleh Panic (hanya Macintosh). Pengguna Coda seperti alur kerja yang visual, alat-alat manajemen file, dan built-in akses terminal.
• Textmate oleh MacroMates (hanya Macintosh). Editor teks canggih ini memiliki alat manajemen proyek dan antarmuka yang terintegrasi dengan sistem operasi Mac. Hal ini semakin populer karena disesuaikan, kaya fitur, dan murah.
• BBEdit oleh Bare Bones Software (hanya Macintosh). Untuk pengembang web banyak fitur shortcut yang besar telah membuat editor terkemuka berbasis Mac

       Aplikasi editing gambar dan menggambar

Untuk menambahkan gambar ke halaman web, akan perlu program editing gambar. Berikut ini beberapa aplikasi yang cukup populer :

• Adobe Photoshop. Photoshop dapat dikatakan sebagai standar industri untuk penciptaan gambar baik dalam cetak maupun dunia web.
• Adobe Photoshop Elements. Versi ini lebih ringan dari Photoshop dirancang untuk mengedit foto dan manajemen, tetapi beberapa penggemar menemukan bahwa ia memiliki semua alat yang diperlukan untuk menempatkan gambar pada halaman web.
• Adobe Illustrator. Karena desainer perlu membuat logo, ikon, dan ilustrasi di berbagai ukuran dan resolusi, untuk itu semua aplikasi ini sangat membantu. Aplikasi ini juga dapat dipadukan dengan Photoshop
• Adobe Fireworks. Program grafis web ini menggabungkan editor foto dengan alat untuk membuat ilustrasi berbasis vektor. Ia juga memiliki alat-alat canggih untuk grafis web.
• Corel Paint Shop Photo Pro (Windows saja). Editor gambar yang penuh fitur ini populer di pengguna Windows, terutama karena harga yang rendah.

       Aplikasi Internet

Karena hasil akhir dari pengembangan halaman web digunakan di Internet, maka diperlukan beberapa aplikasi untuk membuka halaman web, biasa disebut “browser”. Berikut ini beberapa aplikasi browser yang cukup populer :

• Windows:

            o Internet Explorer
            o Chrome
            o Firefox
            o Safari
            o Opera

• Macintosh OS X:

            o Safari
            o Chrome
            o Firefox
            o Opera

• Browser perangkat bergerak (mobile)

            o Mobile Safari (iOS)
            o Android Browser (Android)
            o BlackBerry Browser (RIM)
            o Nokia Series 40 dan Nokia Browser for Symbian
            o Opera Mobile dan Mini (installed on any device)
            o Internet Explorer Mobile (Windows Phone)
            o Silk (Kindle Fire)


        Aplikasi transfer file (FTP/File Transfer Protokol).

          Sebuah aplikasi FTP memungkinkan untuk mengunggah dan mengunduh file antara komputer kita dan komputer yang akan menjadi tempat halaman web/web server. Beberapa aplikasi authoring web sebelumnya juga memiliki aplikasi FTP yang terintegrasi langsung. Ada juga aplikasi FTP khusus, seperti yang tercantum di bawah ini:

• Windows
• WS_FTP
• CuteFTP
• AceFTP
• Filezilla
• Macintosh
• Transmit
• Cyberduck

 Fetch