SUGENG RAWUH WONTEN BLOG KULO:-)

Semoga blog saya lebih bermanfaat bagi kalian:-)

Ayoo kita belajar blog lebih baik lagi dengan cara yang lebih benar.Mari kita memahami seluk beluk pemprogaman web.:-)

Bab Pertama Yang KIta Pelajari Dalam Pemprogaman WEB :)

Yang Akan Kita Pelajari Kali Ini Adalah Pemprogaman Web BAB 1 :)  

  

1.Profesi dalam bidang Teknolog Informasi antara lain :

• Programmer, merupakan orang yang bertugas mengimplementasikan rancangan system analis, yaitu membuat program (baik aplikasi maupun system operasi) sesuai system yang dianalisa sebelumnya.                                                                                                                                             
• Web designer, merupakan orang yang melakukan kegiatan perencanaan, termasuk studi kelayakan, analisis dan desain terhadap suatu proyek pembuatan aplikasi berbasis web.               
• Web programmer, merupakan orang yang bertugas mengimplementasikan rancangan web designer, yaitu membuat program berbasis web sesuai desain yang telah dirancang sebelumnya.

2. Alur Pengembangan Alikasi WEB antara lain :

• 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  :

Tujuan yang bersifat informatif Menyediakan  suatu  informasi  tertentu  kepada  pengguna,  berupa  teks,  grafik, audio, dan video.
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 :

Analisis isi informasi

Mengidentifikasi  isi  yang  akan  ditampilkan  pada  aplikasi  berbasis  web  ini.  Isi informasi dapat berupa teks, grafik, audio, maupun video.

Analisis interaksi

Analisis yang menunjukkan hubungan antara web dengan pengguna.

Analisis fungsional

Analisis tentang proses bagaimana aplikasi berbasis web ini akan menampilkan informasi kepada pengguna.

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 grafi.

 3.DIAGRAM SITUS

4. Implementasi dan Pengujiaan

• Auothoring

Proses persiapan konten nantinya diunggah diweb, menggambarkan isi & fungsi.

• Stayling

Pengambilan hal dlm browser dikendalikan oleh style dlm css.

• Scriping & Pemprogaman

Terkait dng PHP , Ruby, ASP & NET  bertujuan pada server & mengolah data & informasi sblm ditampilkan.

• Tahap Pengujian

Suatu proses pengujian aplikasi berbasis web yg tlh selesai dibuat.

Sugeng Rawuh Wonten Blog Kula:-):-D

BAB Selanjutnya Yang Kita Pelajari Dalam Pemprogaman WEB:-)

Kita akan mempelajari BAB selanjutnya adalah :-)

Menyajikan format teks dalam dokumen web

Struktur Dasar Dokumen HTML

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

 <html>

 <head>

 <title>Judul Halaman</title>

 </head>

 <body> Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web. </body> </html>

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 :

Color

hexadecimal

Color

Hexadecimal White #FFFFFF Black #000000

Red

#FF0000

Green

#00FF00 Blue #0000FF Magenta #FF00FF

Cyan

#00FFFF

Yellow

#FFFF00 Aquamarine #70DB93 Chocolate #5C3317

Violet

#9F5F9F

Brass

#B5A642 Coper #B87333 Pink #FF6EC7

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>.

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

Deskripsi <b> Mendefinisikan teks tebal

<em>

Mendefinisikan teks menekankan <i> Mendefinisikan teks miring

<small>

Mendefinisikan teks kecil <strong> Mendefinisikan teks penting

PEMROGRAMAN WEB SEMESTER 1

56 | P a g e

<sub>

Mendefinisikan teks di bawah garis <sup> Mendefinisikan teks di atas garis

<ins>

Mendefinisikan teks sisipan <del> Mendefinisikan teks dicoret

<mark>

Mendefinisikan teks ditandai

Tag HTML “keluaran computer”

Tag

Deskripsi <code> Mendefinisikan teks kode komputer

<kbd>

Mendefinisikan teks keyboard <samp> Mendefinisikan teks contoh kode

<var>

Mendefinisikan teks variabel <pre> Mendefinisikan teks terformat

HTML Citations, Quotations, and Definition Tags

Tag

Deskripsi <abbr> Mendefinisikan sebuah singkatan

<address>

Mendefinisikan alamat atau kontak informasi <bdo> Mendefinisikan arah teks

<blockquote>

Mendefinisikan sebuah bagian yang dikutip dari sumber lain <q> Mendefinisikan sebuah kutipan pendek

<cite>

Mendefinisikan judul karya <dfn> Mendefinisikan sebuah istilah definisi

2. Pemformatan Paragrap

Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>. Berikut ini contohnya : <p>ini adalah paragrap</p>

Pemrograman Web Semester 1

57 | P a g e

<p>Ini paragrap yang lain</p>

Menyajikan hasil Pembuatan List

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.

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 : 

Langkah-langkah membuat dokumen HTML :

 1. Jalankan aplikasi Text Editor

 2. Isikan kode HTML ke dalam Text Editor 

3. Simpan file dengan ekstension .htm atau .html 

4. Jalankan file HTML menggunakan aplikasi Web browser untuk menampilkan hasilnya

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 : <ol> <li>Urutan Pertama</li>

<li>Urutan Kedua</li> </ol>

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 :

Tipe

Keterangan A Membuat list dengan penomoran berupa karakter A, B, C, dst

a

Membuat list dengan penomoran berupa karakter a, b, c, dst I Membuat list dengan penomoran berupa karakter I, II, III, dst

i

Membuat list dengan penomoran berupa karakter i, ii, iii, dst

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 : Daftar buah : 

 Mangga·

 Jambu · 

 Semangka ·

 Rambutan ·

 Jeruk·

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 : <ul> <li>Item satu</li> <li>Item dua</li> </ul>

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 :

Tipe

Keterangan

Contoh Penulisan Disk Tanda bulatan hitam <ul type=”disk”>

Circle

Tanda bulatan putih

<ul type=”circle”> Square Tanda kotak <ul type=”square”>

5) Daftar Definisi (Definition List)

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

Contoh : HTML Hyper Text Mark-up Language WWW World Wide Web

c. Rangkuman Tag Fungsi

<div> ... </div>

Sebuah wilayah teks yang akan diformat

<dl> ... </dl>

Sebuah daftar definisi

<dt> ... </dt>

Sebuah istilah definisi, sebagai bagian dari daftar definisi.

<dd> ... </dd>

Sesuai untuk istilah definisi, sebagai

bagian dari daftar definisi

<ol> ... </ol>

Ordered List atau daftar berurutan

<ul> ... </ul>

Un-Ordered List atau daftar tidak berurutan

<li> ... </li>

Sebuah daftar item untuk digunakan dengan <ol> atau <ul>.Kita akan mempelajari BAB selanjutnya adalah :-)

 

Menyajikan format teks dalam dokumen web

Struktur Dasar Dokumen HTML

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

 <html>

 <head>

 <title>Judul Halaman</title>

 </head>

 <body> Berisi tentang text, gambar, atau apapun yang tampil pada dokumen web. </body> </html>

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 :

Color

hexadecimal

Color

Hexadecimal White #FFFFFF Black #000000

Red

#FF0000

Green

#00FF00 Blue #0000FF Magenta #FF00FF

Cyan

#00FFFF

Yellow

#FFFF00 Aquamarine #70DB93 Chocolate #5C3317

Violet

#9F5F9F

Brass

#B5A642 Coper #B87333 Pink #FF6EC7

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>.

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

Deskripsi <b> Mendefinisikan teks tebal

<em>

Mendefinisikan teks menekankan <i> Mendefinisikan teks miring

<small>

Mendefinisikan teks kecil <strong> Mendefinisikan teks penting

PEMROGRAMAN WEB SEMESTER 1

56 | P a g e

<sub>

Mendefinisikan teks di bawah garis <sup> Mendefinisikan teks di atas garis

<ins>

Mendefinisikan teks sisipan <del> Mendefinisikan teks dicoret

<mark>

Mendefinisikan teks ditandai

Tag HTML “keluaran computer”

Tag

Deskripsi <code> Mendefinisikan teks kode komputer

<kbd>

Mendefinisikan teks keyboard <samp> Mendefinisikan teks contoh kode

<var>

Mendefinisikan teks variabel <pre> Mendefinisikan teks terformat

HTML Citations, Quotations, and Definition Tags

Tag

Deskripsi <abbr> Mendefinisikan sebuah singkatan

<address>

Mendefinisikan alamat atau kontak informasi <bdo> Mendefinisikan arah teks

<blockquote>

Mendefinisikan sebuah bagian yang dikutip dari sumber lain <q> Mendefinisikan sebuah kutipan pendek

<cite>

Mendefinisikan judul karya <dfn> Mendefinisikan sebuah istilah definisi

2. Pemformatan Paragrap

Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>. Berikut ini contohnya : <p>ini adalah paragrap</p>

Pemrograman Web Semester 1

57 | P a g e

<p>Ini paragrap yang lain</p>

Menyajikan hasil Pembuatan List

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.

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 : 

Langkah-langkah membuat dokumen HTML :

 1. Jalankan aplikasi Text Editor

 2. Isikan kode HTML ke dalam Text Editor 

3. Simpan file dengan ekstension .htm atau .html 

4. Jalankan file HTML menggunakan aplikasi Web browser untuk menampilkan hasilnya

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 : <ol> <li>Urutan Pertama</li>

<li>Urutan Kedua</li> </ol>

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 :

Tipe

Keterangan A Membuat list dengan penomoran berupa karakter A, B, C, dst

a

Membuat list dengan penomoran berupa karakter a, b, c, dst I Membuat list dengan penomoran berupa karakter I, II, III, dst

i

Membuat list dengan penomoran berupa karakter i, ii, iii, dst

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 : Daftar buah : 

 Mangga·

 Jambu · 

 Semangka ·

 Rambutan ·

 Jeruk·

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 : <ul> <li>Item satu</li> <li>Item dua</li> </ul>

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 :

Tipe

Keterangan

Contoh Penulisan Disk Tanda bulatan hitam <ul type=”disk”>

Circle

Tanda bulatan putih

<ul type=”circle”> Square Tanda kotak <ul type=”square”>

5) Daftar Definisi (Definition List)

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

Contoh : HTML Hyper Text Mark-up Language WWW World Wide Web

c. Rangkuman Tag Fungsi

<div> ... </div>

Sebuah wilayah teks yang akan diformat

<dl> ... </dl>

Sebuah daftar definisi

<dt> ... </dt>

Sebuah istilah definisi, sebagai bagian dari daftar definisi.

<dd> ... </dd>

Sesuai untuk istilah definisi, sebagai

bagian dari daftar definisi

<ol> ... </ol>

Ordered List atau daftar berurutan

<ul> ... </ul>

Un-Ordered List atau daftar tidak berurutan

<li> ... </li>

Sebuah daftar item untuk digunakan dengan <ol> atau <ul>.

Mari Kita Belajar Pemprogaman Web Semester Genap Sampai CSS:-)

1) Komponen text area multiline 

       Komponen text area merupakan area tempat untuk menyimpan text atau tulisan baru, atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text. 
Untuk menampung input teks yang panjang dan mungkin tersusun atas lebih dari 1 baris, maka digunakan komponen input ‘textarea’. TEXTAREA dapat digabungkan dengan tag FORM untuk menjadi inputan yang akan diolah oleh file pemroses sebagaimana seperti yang telah dijelaskan pada tag FORM tersebut. 
Format umum penulisan text area multiline 


<textarea atribute=”atribute">


1. NAME 
     Atribut ini digunakan untuk meemberikan nama dari TEXTAREA. Atribut ini akan sangat berguna jika tag TEXTAREA digabungkan dengan tag FORM. 

 Contoh penulisan : 


<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<p><textarea NAME=”papantulis” COLS=40 ROWS=6>
</textarea></p>
</body>
</html>


2. COLS 
     Atribut COLS digunakan untuk menentukan lebar dari TEXTAREA. Contoh berikut menampilkan 3 komponen textarea dengan lebar textarea bervariasi : 


<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<p> Silahkan diisi pada teks area yang tersedia</p>
<TEXTAREA NAME="rendah" COLS=30 ROWS=5></TEXTAREA>
<TEXTAREA NAME="sedang" COLS=30 ROWS=10></TEXTAREA>
<TEXTAREA NAME="tinggi" COLS=30 ROWS=20></TEXTAREA>
</body>
</html>


3. READONLY 
     Atribut ini digunakan agar tulisan yang terdapat didalam TEXT AREA hanya dapat dibaca dan disalin tapi tidak dapat diubah. 
 Contoh : 

<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”untukdibaca” COLS=40 ROWS=6 READONLY>
Tulisan ini tidak dapat diubah tapi bisa disalin. 
</TEXTAREA>
</body>
</html>

4. DISABLED 
Atribut ini digunakan agar tulisan yang terdapat didalam TEXTAREA tidak dapat disalin dan diubah. 
 Contoh : 

<!DOCTYPE html>
<html>
<head>
<title>cek form </title>
</head>
<body>
<TEXTAREA NAME=”terlarang” COLS=40 ROWS=6 DISABLED>
Tulisan ini tidak dapat disalin maupun diubah. 
</TEXTAREA>
</body>
</html>

2) Komponen input text password 
Komponen input text password bertanggung jawab untuk memasukan data password. Dari atribut-atribut tersebut, yang utama dan terutama harus disesuaikan atau diberi nama sesuai dengan item datanya adalah atribut ‘name’, karena file yang dituju pada atribut action di tag form, yang biasanya adalah file server side scripting (PHP) akan mengambil input dari form berdasarkan atribut nama (‘name’) dari komponen input form tersebut.Disamping tipe text, terdapat pula tipe input teks yang lain, yakni ‘password’. Input tpe ‘password’ ini akan menghasilkan input dengan notasi ’●’. Biasanya input tipe ‘password’ digunakan dalam form untuk masukan kata kunci atau password dari pengguna di dalam form login.Format dari elemen input text password HTML-nya adalah sebagai berikut : 

<input type=password name=name>
<input type=password name=name maxlength=length>
<input type=password name=name size=size>
<input type=password name=name value=value>

Berikut adalah penggalan listing program penulisan form input password, dimana form diberi nama=pwd dengan panjang maximal karakternya adalah 6.


<!doctype html>
<html>
<head>
<title>penulisan password </title>
</head>
<body>
<form >
Password: <input type="password" name="pwd" maxlength="6">
</form>
</body>
</html>

3) Komponen input text 
Komponen input text merupakan komponen untuk memasukan data text ke server dalam bentuk textfield.Format tag HTML-nya adalah sebagai berikut : 

<INPUT TYPE=TEXT NAME=name>
<INPUT TYPE=TEXT NAME=name MAXLENGTH=length>
<INPUT TYPE=TEXT NAME=name SIZE=size>
<INPUT TYPE=TEXT NAME=name VALUE=value>

Berikut contoh listing program yang menggunakan form input 
Contoh bentuk tampilannya adalah sebagai berikut : 

<!doctype html>
<html>
<head>
<title>input text</title>
</head>
<body>
<form>
Nama : <input type="text" name="nama"><br>
Sekolah : <input type="text" name="sekolah">
</form>
</body>
</html>

4) Form menggunakan input hidden 
Format tag form input hidden HTML-nya adalah sebagai berikut : 
<INPUT TYPE=HIDDEN NAME=name VALUE=value>
Pada format form input hidden ditandai dengan atribut form type =hidden pada tag <input>, yang artinya ada form inputan yang disembunyikan atau tidak tidak tampilkan. Untuk selengkapnya dapat dilihat pada program berikut 
Bila listing program diatas dijalankan dibrowser akan menghasilkan tampilan sebagai berikut: 

<!doctype html>
<html>
<head>
<title>hidden input file </title>
</head>
<body>
<form >
Nama : <input type=” name=”fnama”><br>
<input type=”hidden” name=”negara” value=”Indonesia”>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>

5) Pembuatan form biodata dengan input text 
Berikut ini adalah contoh dari sebuah halaman web yang berisi form yang sederhana: 

<html>
<head>
<title> Form 1 </title>
</head>
<body>
<form name=”form1” method=”POST” action=”inputdata.php”>
Nama : <input type="text" name="nama"><br><br>
Kelas: <input type="text" name="kelas" 
maxlength="2"><br><br>
No : <input type="text" name="nomor" 
value="10"><br><br>
Hobby: <input type="text" name="hobby" 
size="8"><br><br>
Password: <input type="password" name="password">
<br><br>
<input type="submit" name="submit" 
value="Submit">&nbsp;&nbsp;&nbsp;<input type="reset" 
name="reset" value="Reset">
</form>
</body>
</html>

6) Pembuatan form dengan elemen fieldset 
Berikut adalah contoh pembuatan form dengan menggunakan elemen fielsdet serta input form :
<!DOCTYPE html>
<html>
<head>
<title>Hooya</title>
</head>
<body>
<fieldset >
<legend>Proses Sign in</legend>
<td width="256" align="center" valign="top"><p 
align="center"><font 
color="#000000" size="+3">YAHOO! 
<label for="textfield" ></label>
</font><font color="#000000" size="+3">
<label for="textfield" ></label>
</font><font size="+3">
<label for="textfield" ></label>
</font>
<label for="textfield" ></label>
</p>
<p align="center">
<input type="text" name="textfield" id="textfield" value="ID 
Yahoo" />
</p>
<p align="center">
<label for="textfield2"></label>
<input type="text" name="textfield2" id="textfield2" 
value="Password" />
</p>
<p align="center">
<input type="submit" name="button" id="button" value="Sign in" 
/>
</p>
<p align="center" ><font color="#0000FF">Tidak bisa mengakses 
account 
</font></p>
<p align="center" ><font color="#0000FF">Bantuan Sign 
in</font></p><p 
align="center">------------Atau ------------ </p>
<p align="center">
<input type="submit" name="button2" id="button2" value="Buat 
Account Baru" 
/>
</p>
<p align="center">------------------------------</p>
<p align="center"> Masuk dengan Facebok atau Google</p>
<p>&nbsp;</p></td>
</fieldset>
</body>
</html>



Memahami Anatomi dan Cara Kerja Cascading Style Sheet

Definisi dan fungsi cascading style sheet 


Cascading Style Sheet atau lebih sering disebut dengan istilah CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website.
penggunaan dari CSS dalam pembuatan web akan memberikan beberapa manfaat seperti berikut ini : 
• Kode HTML menjadi lebih sederhana dan lebih mudah diatur. 
• Ukuran file menjadi lebih kecil sehingga load file lebih cepat. 
• Mudah untuk mengubah tampilan, hanya dengan mengubah file 

CSS saja. 
• Dapat berkolaborasi dengan JavaScript dan merupakan pasangan 

setia HTML. 
• Dapat digunakan dalam hampir semua jenis web browser. 

Anatomi dari cascading style sheet 

Bagian – bagian utama dari sebuah CSS itu terdiri dari tiga bagian yaitu: selector, property, value. Jika dalam HTML dikenal ada tag-tag yang menyusun sebuah dokumen HTML maka dalam CSS juga dikenal dengan sebutan selector.
Cara Kerja cascading style sheet 

Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan menulis style (selektor, id dan class), maka secara otomatis style tersebut akan 
bekerja pada dokumen HTML. Dengan mengatur selektor, id, dan class, 
untuk kemudian id dan class tersebut kita sesuaikan dan terapkan pada 
kode HTML . Dan secara otomatis pula CSS itu akan bekerja pada file 
HTML.
Pendefinisian style bisa dilakukan pada tag <style>. Di dalam pasangan tag tersebut, pendefinisian style dilakukan dengan bentuk Selector { … } 
Selector HTML mendefinisikan style bagi suatu tag HTML. Contoh di depan menggunakan selector HTML beruma img. Bentuk umumnya : 
Contoh : 
Nama-elemen { … }h: 
Contoh : 
Img { Margin-topi: 10px; Float: left; }

Inline Style Sheet 

CSS didefinisikan langsung pada tag HTML yang bersangkutan. Cara penulisannya cukup dengan menambahkan atribut style="..." dalam tag HTML tersebut. Style hanya akan berlaku pada tag yang bersangkutan, dan tidak akan mempengaruhi tag HTML yang lain. Contoh penulisan CSS secara inline style sheet, CSS berikut mengatur style di elemen <p></p> atau paragraf. 
<p align="center" style="color:#303; font-size:24px">SMK 
</p>

Embedded Style Sheet 

CSS didefinisikan terlebih dahulu dalam tag <style> ... </style>di atas tag <body>, lebih tepatnya didalam tag <head>

External Style Sheet 

<input type="submit" value="Login" class="btn" 
onClick=parent.location="Home_Iframe.htm" />

CSS didefinisikan secara terpisah pada file yang berbeda. Dan selanjutnya file atau halaman web yang ingin menerapkan style pada file CSS tersebut tinggal memanggil file CSS tersebut. Cara ini umumnya digunakan pada satu aplikasi berbasis web sehingga tampilan antar halaman akan terlihat konsisten. 





Rangkuman

Pada kegiatan belajar memahami anatomi dan cara kerja cascading style sheet dapat disimpulkan menjadi beberapa poin penting seperti berikut :


CSS merupakan salah satu dokumen website yang bertujuan untuk mengatur gaya (style) tampilan website. 
Beberapa manfaat dari penggunaan CSS 
- Kode HTML menjadi lebih sederhana dan lebih mudah diatur. 
- Ukuran file menjadi lebih kecil sehingga load file lebih cepat. 
- Mudah untuk mengubah tampilan, hanya dengan mengubah file CSS 
- Dapat digunakan dalam hampir semua jenis web browser. 
CSS 3 merupakan versi CSS terbaru yang masih dikembangkan oleh W3C dan CSS 2 didukung seutuhnya oleh CSS 3 dan tidak ada perubahan 
Anatomi CSS terbagi ke dalam tiga bagian yaitu: selector, property, dan value. 
Selector{ Property : value; }

Cara kerja CSS dimulai saat deklarasi style yang diinginkan dengan 
menulis style (selektor, id dan class) 
Format penulisan CSS dengan Selector HTML adalah Nama-elemen 
Format penulisan CSS dengan Selector class adalah .nama-class { … } 
Format penulisan CSS dengan Selector id adalah #id { … } 
Penerapan CSS pada sebuah halaman web dapat dilakukan dengan 
beberapa alternatif di antaranya adalah: inline style sheet, embedded 
style sheet, external style sheet
menyajikan cascading style sheet untuk memformat tampilan teks dapat dibuat rangkuman materi sebagai berikut : 
Agar lebih menarik, mudah dalam hal pengaturans serta editing, teks pada sebuah halaman web dapat diberikan sytle dalam kemasan CSS. 
Pengaturan style tersebut meliputi banyak properti, diantaranya color, direction, letter-spacing,line-height, text-align,text-decoration, text-indent, text-shadow, text-transform, unicode-bidi, vertical-align,white-space, word-spacing 
Format penulisan untuk pemberian warna pada text menggunakan CSS adalah sebagai berikut : selector {color:nilai warna}
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { letter-spacing:nilai spasi;}

Format penulisan CSS untuk mengaturan dekorasi teks adalah sebagai berikut selector {text-decoration : nilai text-decoration } 
Format penulisan CSS untuk pengaturan jarak (spasi) antar karakter atau huruf adalah sebagai berikut selector { word-spacing:nilai spasi;} 

Format penulisan untuk pengaturan jarak indentasi text adalah sebagai berikut selector { text-indent:nilai indent} 
. Format penulisan CSS untuk pengaturan text indent adalah sebagai berikut selector { text-transform:nilai text transform} 
format penulisan CSS dengan text-shadow adalah 
Selector {text-shadow: koordinatX koordinatY nilaiWarnaTeksBayangan ;} 
Format penulisan CSS untuk text alignment selector {text-align:nilai text-align;} 

Menyajikan Cascading Style Sheet untuk Memformat Tampilan Multimedia

Cascading style sheet pada tampilan gambar 

CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari dapat diterapkan hampir pada semua objek yang disisipkan dalam tag html baik itu tulisan, tabel dan gambar maupun objek lainya. Untuk mengatur gambar dapat dituliskan secara inline seperti contoh berikut : 
<img src="nama-file-gambar" width="lebar" height="tinggi" 
alt="text" title="text" border="1" />

Cascading style sheet Gambar untuk background 
Seperti penambahan warna latar, penambahan gambar latar belakang juga dilakukan dengan menggunakan dua properti, yaitu background dan background-image. Nilai yang diisikan untuk properti ini ialah url dari gambar, relatif terhadap file CSS, sama seperti pada penambahan font. 

div { background: url(“latar.png”); 
background-image: url(“latar.png”);}

Cascading style sheet pada tampilan video 

Untuk penerapan Cascading style shee pada elemen video dapat dituliskan secara inline seperti contih berikut ini : 

<html>
<head>
<title>Test</title>
</head>
<body>
<video controls="controls" style="display:block; margin: 
0 auto; width:400px ; heigth:400;" >
<source src="movie.mp4" type="video/mp4" />
Your browser does not support the video tag. 
</video>
</body>
Rangkuman 
Dari paparan materi pembahasan kegiatan belajar menyajikan cascading style sheet untuk memformat tampilan multimedia dapat dibuat rangkuman materi sebagai berikut :

CSS berperan penting dalam menyajikan informasi dengan visual yang lebih baik, lebih optimal dari sisi penulisan serta lebih disenangi oleh mesin pencari. 
Untuk mengatur format multimedia dapat dituliskan secara inline, embed maupun eksternal CSS. 
Pemberian style pada gambar dapat menggunakan selector <img>
Pemberian style pada video dapat menggunakan selector <video>
Penambahan gambar sebagai latar belakang menggunakan dua properti, yaitu property background image dengan menggunakan tag div seperti format berikut 

div { background-image: url(“latar.png”); }



Menyajikan Cascading Style Sheet untuk Memformat Tampilan Form

Cascading style sheet pada elemen form 

Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. Dibawah ini adalah style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border, warna border, lebar form, batas form dari sisi layout, dan warna background dari form.

Cascading style sheet pada input text 

Textarea mendefinisikan kontrol input berupa area teks pada form .Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}
menyajikan cascading style sheet untuk memformat tampilan form

Agar form terlihat lebih indah menarik serta mudah dalam pengontrolan desain salah satunya memberikan style CSS. 
Dengan menggunakan style CSS akan mengurangi bebanhalamandankonsumsi bandwidth. 
style yang bisa diberikan pada elemen form diantaranya pengaturan besar dan jenis border,warna border, lebar form, batas form dari sisi layout, dan warna background dari elemen-elemen form. 
Elemen form dapat diatur stylenya dengan menggunakan selector form {…}. 
Elemen form textarea dapat diatur stylenya dengan menggunakan selector textarea {…}. 
Style yang diberikan pada input textfield diantaranya warna, background, border, jenis serta ukuran font dan masih banyak atribut lainya yang bisa digunakan untuk style textfield.