Bekerja dengan file dan desain web PERTEMUAN 6. Beberapa type file -CSS, (Cascading Style Sheet) ekstensi.css. Untuk format isi HTML dan mengendalikan.

Presentasi berjudul: "Bekerja dengan file dan desain web PERTEMUAN 6. Beberapa type file -CSS, (Cascading Style Sheet) ekstensi.css. Untuk format isi HTML dan mengendalikan."— Transcript presentasi:

1 Bekerja dengan file dan desain web PERTEMUAN 6

2 Beberapa type file -CSS, (Cascading Style Sheet) ekstensi.css. Untuk format isi HTML dan mengendalikan posisi berbagai unsur unsur halaman. -GIF (Graphics Interchange Format) ekstensi.gif.Untuk kartun, logo, grafis, area trasparan, dan animasi. Memiliki maksimum 256 jenis warna. -JPEG (Joint Photographic Experts Group) ekstensi.jpg. Untuk foto dan gambar dengan kualitas warna tinggi, mengatasi untuk 256 jenis warna.

3 XML (Extensibel Markup Language) ekstensi.xml. File ini berisi data di dalam suatu form mentah yang dapat diformat dengan menggunakan XSL. XML adalah merupakan suatu bahasa Markup. Markup yaitu bahasa yang berisikan kode-kode berupa tanda-tanda tertentu dengan aturan tertentu untuk memformat dokumen teks dengan tag sendiri agar dapat dimengerti.

4 Contoh XML MIS Manager HRD Manager Bagian rekrut Computer Suport team Permohonan Tenaga kerja baru Mohon diberikan tenaga kerja baru untuk mengisi lowongan di Departemen MIS

5 -XLS (Extensibel Stylesheet Language) ekstensi.xsl atau.xslt. Untuk tipe data XML yang akan ditapilkan di halaman web Contoh

6 CFML (ColdFusion Markup Language) ektensinya.cfm. Untuk halaman dinamis ColdFusion adalah kumpulan-kumpulan halaman yang sangat sederhana yang mirip dengan sebuah static Web site. Tetapi tidak seperti website static, Halaman dalam aplikasi ColdFusion mengandung server-side ColdFusion Markup Language (CFML) sebagai tambahan ke HTML.

7 Contoh cfml Hello #firstName# ! This CFML tutorial was designed for you! the world to see.

8 -PHP (Hypertext Preprocessor) ektensinya.php. Untuk halaman dinamis

9 Layout css menyediakan kolom ; -Fixed, lebar kolom telah ditetapkan dala satuan pixel. User tidak bisa merubah di browser. -Elastic, Lebar kolom ditetapkan berdasarkan suatu unit pengukuran (ems) yang sesuai dengan ukuran teks. Desain akan menyesuaikan jika pengunjung merubah setting teks tanpa merubah ukuran dasar jendela browser. -Liquid, Lebar kolom ditetapkan berdasarkan persentasi dari lebar browser pengunjung site. Desain akan menyesuaikan mengubah browser menjadi panjang pendek tanpa mengubah setting teks. -Hybrid, Kolo kombinasi dari tiga pilihan sebelumnya.

10 Page properties Cara 1: Cara 2: -Menu Modify- Ctrl + J -Page Properties Ada 6 Kategory: 1.Apperance(CSS), mengatur properties halaman menggunakan bahasa css. 2.Apperance(HTML), mengatur properties halaman dalam bentuk kode html. 3.Links (CSS), menentukan font,ukuran,warna links. 4.Heading (CSS), menentukan style untuk teks naskah. 5.Title/Encoding, untuk mengisi judul. 6.Tracing Image, menampilkan gambar sementara pada latarbelakang

11 Memberi judul Cara1: -Di page properties, masuk ke Title/Encoding -Ketik judul di Title. Cara2 : -Menu View, Head Conten, klik ikon title. -Ketik judul di Title. Cara3 : - Bagian bar Document langsung ketik judulnya di Title.

12 Background gambar Cara : -Masuk ke Page Properties. -Pilih Tab Appearance(HTML) atau (CSS). -Browse bagian Backgroung Image. -Pilih, OK. -Apply.

13 Background warna Cara : -Masuk ke Page Properties. -Pilih Tab Appearance. -Klik menu drop-down pada bagian Backgroud Color. -Pilih warna.

14 Mengatur warna teks Cara : -Masuk ke Page Properties. -Pilih Tab Appearance. -Klik menu drop-down pada bagian Text Color. -Pilih warna.

15 Mengatur warna link Cara : -Masuk ke Page Properties. -Pilih Tab Links. -Ada pilihan: 1.Links Color, warna semua teks yang ada link. 2.Visited Links, warna pada link yang sudah pernah dikunjungi 3.Active Links, warna pada saat link saat di masih tekan. 4.Rollover Links, warna yang digunakan saat pointer melewati link tersebut.

16 Ukuran margin halaman Cara : -Masuk ke Page Properties. -Pilih Tab Appearance. -Isi kotak Margin: 1.Left margin, 2.Top Margin 3.Right Margin 4.Bottom Margin.

17 Menyisipkan karakter khusus Cara1 : -Menu Insert – HTML - Special Character. -Pilih karakter khusus. Cara2 : -Klik Insert di panel group, ganti kategory menjadi Teks. -Pilih karakter khususnya.

18 Menambah tanggal Cara: - Taruh Pointer di objek. -Menu Insert – Date. -Pilih Format. -Centang “Update Automatically on Save” -Ok

19 Menyisipkan garis horisontal Cara : - Taruh Pointer di objek. -Pilih menu Insert. -HTML -Horizontal Rule

20 Mengatur format/font huruf Cara : -Seleksi teks. -Menu Format – Font. -Plih Font. -Ok.

21 Mengatur warna Cara : -Selesi teks yang akan dirubah. -Menu Format – Color. -Pilih warna, Ok.

22 Mengubah ukuran Cara : -Seleksi teks. -Klik CSS pada panel Properties -Size -Pilih ukuran.

23 Mengatur perataan teks Cara1: -Seleksi text. -Menu Format – Align. -Pilih jenis perataan. Cara2 : -Seleksi text. -Klik tombol CSS pada panel Properties -Pilih jenis Ratanya.

24 Mengatur style teks Cara : -Menu Format – Style. -Pilih format : 1.Bold 2.Italic 3.Underline 4.Striketrhough, memberi efek coret pada teks. 5.Teletype, meberi efek seperti pada teks telegram 6.Emphasis, efek penekanan/penegasan. 7.Strong, memberi efek tebal.

25 Memilih bentuk paragraf Cara : -Seleksi teks. -Menu Format – Paragraph Format. -Pilih salah satu format. Cara lain: -Klik tombol HTML pada panel Properties -Pilih format. Keterangan: 1.Paragraph, untuk mengatur jarak antar paragrap teks ataupun objek. 2.Heading, memiliki tatanan tabel dengan ukuran tertentu sesuai dengan heading yang dipilih. 3.Preformatted, menampilkan teks tanpa mengabaikan white space/ spasi dan menggunakan font default monospace.

26 Mengatur identasi teks Merupakan jarak teks / paragraf dari tepi halaman. Cara : -Seleksi paragraf. -Menu Format - Indent Untuk menghapus / menghilangkan : - Menu Format - Outdent

27 Membuat list Cara : -Tempatkan kursor di area kerja -Menu Format – List -Pilih : 1.Ordered List, List atau daftar yang memiliki urutan, bisa berupa angka, huruf atau romawi. 2.Unordered List, List yang tidak memiliki urutan, dapat berupa linkaran hitam/putih, kotak. - Untuk mengakhiri list enter dua kali

28 Mengatur properties list Cara : -Menu – Format - List – properties -Pilih type dan style. -Ok.