CARA PEMBUATAN CSS PADA HTML...
Format Isi Program :
Nama File : one.html,two.html, three.html, four.html, five.html, six.html,dan mystyle.css
Nama Aplikasi: EditPlus
Listing Program :
· Listing program one.html
· Listing program two.html
· Listing program three.html
Bergabunglah Dengan "Icha_Shop Membership Card"!!! Raihlah banyak keuntungan yang lebih dan meriah sewaktu anda berbelanja di Icha_Shop...
*Sebagai anggota "Icha_Shop Membership Card", kami sangat senang apabila anda dapat bergabung sebagai anggota "Icha_Shop Membership Card" dan mendapatkan keuntungan-keuntungan yang lebih dan meriah sewaktu anda berbelanja di Icha_Shop. Silahkan baca keterangan di bawah ini mengenai keuntungan menjadi anggota serta syarat dan ketentuannya.
Manfaat menjadi Anggota : Manfaat yang diperoleh khusus untuk anggota di antaranya Harga spesial, Info spesial, Point Reward, dan Program Promosi spesial lainnya
Syarat Dan Ketentuan Menjadi Anggota:
1. Keanggotaan ini berlaku bagi penduduk Indonesia(WNI) di atas umur 17 tahun dan mempunyai KTP atau SIM.>
2. Untuk menjadi anggota anda cukup menunjukkan struk belanja Icha_Shop senilai minimal Rp 350000 dalam satu kali transaksi. Kami tidak membebankan biaya sepeserpun untuk pembuatan kartu pada saat pendaftaran.
3. Mengisi formulir pendaftaran dan menandatangani pernyataan persetujuan.
· Listing program four.html
· Listing program five.html
Nama : Password : Retype Pass : Alamat : Jenis Kelamin : Laki-Laki Perempuan Hobby : Olahraga Musik Belajar Agama :
· Listing program six.html
PENJELASAN Tentang Membership Card
"Icha_Shop Membership Card" adalah layanan atau fasilitas yang diberikan oleh Icha_Shop untuk para pelanggan yang berkunjung ke Icha_Shop. Banyak keuntungan yang di dapat apabila anda sering berkunjung dan berbelanja di Icha_Shop ini. Seperti Harga yang didapat bisa lebih murah, Banyak Diskon atau potongan harga apabila anda membeli produk-produk tertentu, Mendapatkan info yang spesial, Akan mendapatkan point apabila anda berbelanja Rp 50000 berlaku kelipatannya dan point tersebut bisa ditukar dengan hadiah-hadiah yang menarik, dan Program Promosi lainnya.
Selamat Mencoba!!!
...Dipastikan anda tidak akan menyesal...
· Listing program mystyle.css
h1 {color : blue ;background-color : yellow}
h2 {color : green ;background-color :black}
h3 {color : red ;background-color :black}
h4 {color : yellow ;background-color : green}
p.par1 {color : red ; text-align : center ; border-style : dotted}
p.par2 {color : orange ; text-align : justify ; border-style : groove}
p.par3 {color : purple ; text-align : center ; border-style : dashed}
p.par4 {color : green ; text-align : center ; border-style : dotted}
LOGIKA PROGRAM :
Pada praktikum kita kali ini. Kita akan membuat CSS(Cascading Style Sheets) merupakan suatu bahasa yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup. Pada umumnya CSS digunakan untuk memperindah suatu tampilan HTML. Dengan CSS kita dapat memberikan warna tulisan, background HTML, serta memasukkan gambar dan menambahkan border pada website yang kita buat. Penggunaan yang paling umum dari CSS yaitu memformat halaman website yang ditulis dengan HTML dan XHTML. Ada 3 jenis cara yang digunakan untuk membuat CSS yaitu dengan cara inline style yaitu berlaku untuk tag yang langsung diberikan style. Penggunaan CSS inline digunakan untuk kasus-kasus tertentu, misalnya pada postingan. Yang kedua dengan cara embedded style atau internal. Yaitu dengan cara menempelkan kode CSS diantara tag dan . Dan yang terakhir dengan cara external style yaitu ditulis dalam satu file terpisah yang disimpan dengan akhiran .CSS, lalu perlu memanggil file css tersebut ke dalam semua halaman web yang dibuat. Untuk kali ini kita akan membuat tampilan website dengan menggunakan css inetrnal dan external di dalam suatu FRAME, tabel dan inputan pada HTML. Table yaitu suatu tag yang digunakan untuk membuat tabel pada HTML. Guna dari tabel ini adalah untuk membuat susunan halaman lebih rapih. Penggunaan tag ini disertai dengan tag untuk menyatakan baris, dan tag untuk menyatakan kolom. Inputan yaitu suatu tag yang berguna untuk memberikan inputan berupa data pada dokumen HTML kode yang kemudian akan di proses untuk kode program dengan tag form, sehingga dapat di arah lain ke program yang akan di kirimkan oleh pemroses data melalui tag Input. Sedangkan FRAME yaitu suatu tag yang digunakan untuk membuat sebuah bingkai yang terdapat di dalam tag FRAMESET. Cara kerja frame hampir sama dengan cara kerja yang digunakan untuk membuat sel tunggal di sebuah tabel, begitu juga dengan tag frame yang berguna untuk membuat sebuah bingkai tunggal di sebuah FRAMESET. Untuk membuat tampilan tersebut kita menggunakan aplikasi atau program EditPlus. Ini adalah aplikasi agar apabila program ini dijalankan tidak secara online. Bisa juga digunakan notepad untuk menuliskan kode program tersebut lalu di simpan dengan .html, dan dijalankan di web browser. Akan tetapi ini harus online.
Langkah-langkah yang harus dilakukan untuk membuat CSS di dalam FRAME, tabel dan Inputan pada HTML yang menggunakan aplikasi EditPlus yaitu sebagai berikut:
Langkah pertama yang kita lakukan yaitu membuka aplikasi EditPlus yang telah tersedia, apabila belum ada anda bisa mendownload aplikasi tersebut. Setelah EditPlus dibuka kita pilih menu File dari menu bar. Pilih New - HTML page.
Sesudah kita memilih menu HTML page maka akan terlihat tampilan lembar kerja seperti gambar di bawah ini yang nantinya akan digunakan untuk mengetikkan tag-tag HTML. Pada tag , dan akan dituliskan kode-kode program yang akan di tampilkan pada website yang akan di buat.
Kode program di bawah ini yaitu salah satu jenis cara untuk mebuat CSS, yaitu cara external style yaitu ditulis dalam satu file terpisah yang disimpan pada file .CSS yaitu dengan nama mystyle.css. Ini harus ada pada semua file yaitu one.html, two.html, three.html, four.html, five.html, six.html. Kode program di bawah ini digunakan untuk memanggil file .css tersebut ke dalam semua halaman web yang dibuat.
|
|
Kode program di bawah ini terletak di antara tag dan , yang terletak pada file one.html dan berfungsi untuk menampilkan head(Kepala) atau judul dari HTML yang akan kita buat. Dengan judul ^_"Icha_Shop Membership Card"_^. , ukuran huruf paling besar.
dan warna background yaitu kuning,yang terletak di tengah(center) dengan model border yaitu dotted berupa garis titik putus-putus. , digunakan untuk menggerakkan teks.
| |
Selanjutnya kita ketikkan kembali kode program pada file two.html yaitu sebagai berikut:
|
|
Sama seperti kode program sebelumnya, kode program di atas terletak di antara tag dan . , yaitu ukuran huruf.
, yang terletak di tengah(center) dengan model border yaitu dashed berupa garis strip putus-putus dan warna background yaitu hijau. Kode program ini Home
maksud dari perintah ini yaitu untuk a href digunakan untuk ngelink ke file ke three.html, target itu maksudnya untuk menampilkan file tersebut berada di frame sebelah mana. Target disini maksudnya adalah Home yang akan tampil pada halaman webnya yang terletak pada frame sebelah kiri, dan isi dari Home akan tampil pada frame yang berada pada sebelah kanan. Begitu juga untuk perintah yang lain seperti menu Form dan About, untuk Form akan melinkan ke file five.html sedangkan untuk menu About akan melinkan ke file six.html. yang akan muncul di sebelah kanan frame pada web yang kita buat. Output dari kode program ini yaitu akan menampilkan menu Home, Form, dan About pada frame yang terdapat pada website.
Berikutnya kita ketikkan kembali kode program pada file three.html yang terletak di antara tag dan , adalah sebagai berikut:
|
Bergabunglah Dengan "Icha_Shop Membership Card"!!! Raihlah banyak keuntungan yang lebih dan meriah sewaktu anda berbelanja di Icha_Shop... *Sebagai anggota "Icha_Shop Membership Card", ....dst. Manfaat menjadi Anggota : Manfaat yang diperoleh khusus untuk anggota di antaranya Harga spesial, Info spesial, Point Reward, dan Program Promosi spesial lainnya Syarat Dan Ketentuan Menjadi Anggota:
1. Keanggotaan ini berlaku bagi penduduk Indonesia(WNI) di atas umur 17 tahun dan mempunyai KTP atau SIM.>
2. Untuk menjadi anggota anda cukup menunjukkan struk belanja Icha_Shop senilai minimal Rp 350000 dalam satu kali transaksi. Kami tidak membebankan biaya sepeserpun untuk pembuatan kartu pada saat pendaftaran.
3. Mengisi formulir pendaftaran dan menandatangani pernyataan persetujuan. |
Maksud dari perintah di atas yaitu untuk menampilkan isi dari menu Home yang terdapat pada Frame. Jadi jika anda mengklik menu Home, maka akan keluar kalimat-kalimat di atas. Akan tetapi dengan ukuran huruf yang berbeda-beda. Untuk yang terdapat pada teks "Membership Card" dan Selamat Bergabung, digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par3. Yang nantinya akan digunakan untuk memanggil perintah yang terdapat pada mystyle.css p.par3 {color : purple ; text-align : center ; border-style : dashed}. Maksudnya dalam kelas par3, warna border dan warna tulisan yang dipakai yaitu warna ungu berdasarkan besar huruf yaitu yang terdapat pada teks Sebagai anggota.... dan Syarat dan Ketentuan..., perintah digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par2. Yang nantinya akan digunakan untuk memanggil perintah yang terdapat pada mystyle.css p.par2 {color : orange ; text-align : justify ; border-style : groove}. Maksudnya dalam kelas par2, warna tulisan yang dipakai yaitu warna kuning berdasarkan besar huruf yaitu , maksudnya sama seperti perintah di atas akan tetapi background’a warna hijau. Begitu juga untuk perintah-perintah yang lain fungsinya sama seperti perintah yang sudah dijelaskan sebelumnya. Langkah selanjutnya yaitu kita ketikkan kembali kode program pada file four.html yang terletak di antara tag dan , ini adalah inti dari semua file atau untuk menjalankan dan mengelinkan dari satu frame ke frame yang lain perintahnya adalah sebagai berikut: Maksud dari perintah di atas yaitu untuk perintah maksudnya adalah ukuran atau besar frame sebesar 10%, untuk head atau judul dari web tersebut dengan ketebalan bingkai untuk frame tersebut yaitu 10. Untuk perintah untuk mengelinkan ke file one.html, jadi apabila anda mengklik menu Home maka akan muncul isi dari home tersebut. Yang terletak pada sebelah atas. Dan terdapat scrolling untuk menaikkan atau menurunkan isi dari web yang di buat maka ‘yes’, jika ‘no’ maka scrolling tidak akan di munculkan. Untuk perintah perintah ini maksudnya lebar kolom dari frame untuk menu seperti Home, Form, dan About sebesar 20%, dan untuk lebar isi dari kolom menu sebesar 80%, dengan ukuran bingkai sebesar =1. Begitu juga untuk perintah yang lain untuk menu Form dan About, fungsinya sama seperti perintah menu Home. Langkah berikutnya kita ketikkan kembali kode program pada file five.html yang terletak di antara tag dan , adalah sebagai berikut: Perintah di atas berfungsi untuk menampilkan judul dari isi menu Form yang terdapat pada web, dengan judul ‘Formulir Pendaftaran’. , digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par2. Yang nantinya akan digunakan untuk memanggil perintah yang terdapat pada mystyle.css p.par2 {color : orange ; text-align : justify ; border-style : groove}. Maksudnya dalam kelas par2, warna tulisan yaitu seperti Nama, password, Retype Pass, Alamat, Jenis Kelamin, Agama, dan Hobby yaitu warna orange, yang terletak di rata kanan dan kiri(justify) dengan model border yaitu groove berupa garis lurus. Lalu selanjutnya perintah mengetikkan perintah untuk menampilkan dan memasukkan nama dengan tipe Text Box yang akan menampilkan bentuk kotak segiempat. Begitu juga untuk perintah untuk menampilkan dan memasukkan Password dan Retype Pass, fungsi perintahnya sama seperti perintah Nama akan tetapi bedanya hanya jenis tipe yang di pakai yaitu Password Box. Sedangkan untuk perintah memasukkan nama Alamat, dengan banyaknya kolom sebanyak 3 dan untuk baris sebanyak 20, dengan tipe textarea. Yang berbentuk segiempat akan tetapi terdapat scrolling. Selanjutnya kita ketikkan perintah kembali yaitu: Perintah di atas lanjutan dari file five.html, yang berfungsi untuk menampilkan list menu atau isi dari menu Form, untuk menampilkan list menu Jenis Kelamin terdapat 2 pilihan yaitu Laki-laki dan Perempuan dengan tipe Radio Button, yang berbentuk bulat atau lingkaran dan dapat dipilih. Untuk perintah menampilkan list menu Hobby, fungsi perintahnya sama seperti Jenis Kelamin akan tetapi untuk Hobby bertipe Checkbox yang berbentuk segiempat dan terdapat 3 pilihan yaitu Olahraga, Musik dan Belajar dan dapat dipilih juga. Dan untuk menampilkan dan memilih list menu dari form untuk Agama, dapat anda pilih sesuai dengan keyakinan anda masing-masing. Disini disediakan 5 pilihan yaitu islam, hindu, budha, katolik, dan protestan. Dapat anda pilih sesuai keinginan. Dan kita ketikkan perintah kembali yaitu, yang berfungsi untuk menyimpan data yang telah kita buat tadi dengan tipe submit button. Perintahnya seperti berikut ini : Langkah berikutnya kita ketikkan kembali kode program pada file six.html yang terletak di antara tag dan , adalah sebagai berikut: PENJELASAN Tentang Membership Card "Icha_Shop Membership Card".....dst... Selamat Mencoba!!! ...Dipastikan anda tidak akan menyesal... Perintah di atas berfungsi untuk menampilkan isi dari menu About yang terdapat pada Frame. Yang pertama judul atau head dari About, yaitu “Tentang Icha_Shop Membership Card". , , perintah ini digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par2. Yang nantinya akan digunakan untuk memanggil perintah yang terdapat pada mystyle.css p.par2 {color : orange ; text-align : justify ; border-style : groove}. Maksudnya dalam kelas par2, warna tulisan yang dipakai yaitu warna kuning berdasarkan besar huruf yaitu yang terdapat pada teks ...Dipastikan anda tidak akan menyesal..., digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par3. Yang nantinya akan digunakan untuk memanggil perintah yang terdapat pada mystyle.css p.par3 {color : purple ; text-align : center ; border-style : dashed}. Maksudnya dalam kelas par3, warna border dan warna tulisan yang dipakai yaitu warna ungu berdasarkan besar huruf yaitu adalah ukuran huruf yang paling besar dan untuk
adalah ukuran huruf yang paling kecil untuk perintah di atas. Perintah
, yang terletak di tengah(center) dengan model border yaitu dashed berupa garis strip putus-putus dan warna background yaitu kuning. Perintah agar teks dapat bergerak. Begitu juga untuk perintah
, yaitu ukuran huruf
, yang terletak di rata kanan dan kiri(justify) dengan model border yaitu groove berupa garis lurus dan warna background yaitu hitam. Sedangakan yang
Nama : Password : Retype Pass : Alamat : ukuran huruf paling besar.
dan warna background yaitu kuning, yang terletak di tengah(center) dengan model border yaitu dotted berupa garis titik putus-putus. , digunakan untuk menggerakkan teks. Perintah
Jenis Kelamin : Laki-Laki Perempuan Hobby : Olahraga Musik Belajar Agama :
ukuran huruf paling besar.
dan warna background yaitu kuning, yang terletak di tengah(center) dengan model border yaitu dotted berupa garis titik putus-putus. , digunakan untuk menggerakkan teks. Dan perintah
sama seperti enter yaitu buat paragraf baru. , adalah ukuran huruf
dan warna background yaitu hitam, yang terletak di tengah(center) dengan model border yaitu dotted berupa garis titik putus-putus. Perintah
, yang terletak di rata kanan dan kiri(justify) dengan model border yaitu groove berupa garis lurus dan warna background yaitu hijau. Perintah
, yang terletak di tengah(center) dengan model border yaitu dashed berupa garis strip putus-putus dan warna background yaitu kuning. Jadi jika anda mengklik menu About, maka akan keluar kalimat-kalimat di atas.
Selanjutnya kita ketikkan kode program untuk CSS, yaitu dengan nama mystyle.css. yang berfungsi untuk menghubungkan antara file .html dengan .css. yang berjenis external yaitu sebagai berikut:
| h1 {color : blue ;background-color : yellow} h2 {color : green ;background-color :black} h3 {color : red ;background-color :black} h4 {color : yellow ;background-color : green} p.par1 {color : red ; text-align : center ; border-style : dotted} p.par2 {color : orange ; text-align : justify ; border-style : groove} p.par3 {color : purple ; text-align : center ; border-style : dashed} p.par4 {color : green ; text-align : center ; border-style : dotted} |
Perintah ini h1 {color : blue ;background-color : yellow}, maksudnya huruf yang berukuran h1 mempunyai warna teks biru dan warna background kuning. Perintah ini h2 {color : green ;background-color :black}, maksudnya huruf yang berukuran h2 mempunyai warna teks hijau dan warna background hitam. Perintah ini h3 {color : red ;background-color :black}, maksudnya huruf yang berukuran h3 mempunyai warna teks merah dan warna background hitam. Perintah ini h4 {color : yellow ;background-color : green}, maksudnya huruf yang berukuran h4 mempunyai warna teks kuning dan warna background hijau. Perintah ini p.par1 {color : red ; text-align : center ; border-style : dotted}, maksudnya digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par1. Yaitu dalam kelas par1, warna border adalah merah. Yang terletak di tengah(center) dengan model border yaitu dotted berupa garis titik putus-putus. Perintah ini p.par2 {color : orange ; text-align : justify ; border-style : groove}, maksudnya digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par2. Yaitu dalam kelas par2, warna border adalah orange. Yang terletak pada rata kiri dan kanan dengan model border yaitu groove berupa garis tidak putus-putus. Perintah ini p.par3 {color : purple ; text-align : center ; border-style : dashed}, maksudnya digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par3. Yaitu dalam kelas par3, warna border adalah ungu. Yang terletak di tengah(center) dengan model border yaitu dashed berupa garis strip putus-putus. Perintah ini p.par4 {color : green ; text-align : center ; border-style : dotted}, maksudnya digunakan untuk membagi paragraf berdasarkan kelas. Dengan nama kelas par4. Yaitu dalam kelas par4, warna border adalah hijau. Yang terletak di tengah(center) dengan model border yaitu dotted berupa garis titik putus-putus.
0 komentar:
Posting Komentar