1 / 28

Bekerja dengan file dan desain web

Pertemuan 6. Bekerja dengan file dan desain web. Beberapa type file. CSS, (Cascading Style Sheet) ekstensi . css . Untuk format isi HTML dan mengendalikan posisi berbagai unsur unsur halaman .

shalom
Download Presentation

Bekerja dengan file dan desain web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pertemuan 6 Bekerjadengan file dandesain web

  2. Beberapa type file • CSS, (Cascading Style Sheet) ekstensi .css . Untuk format isi HTML danmengendalikanposisiberbagaiunsurunsurhalaman. • GIF (Graphics Interchange Format) ekstensi .gif .Untukkartun, logo, grafis, area trasparan, dananimasi. Memilikimaksimum 256 jeniswarna. • JPEG (Joint Photographic Experts Group) ekstensi .jpg . Untukfotodangambardengankualitaswarnatinggi, mengatasiuntuk 256 jeniswarna.

  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 <pesan> <dari>MIS Manager</dari> <buat>HRD Manager</buat> <buat>Bagian rekrut</buat> <buat>Computer Suport team</buat> <subyek>Permohonan Tenaga kerja baru</subyek> <isi>Mohon diberikan tenaga kerja baru untuk mengisi lowongan di Departemen MIS</isi> </pesan>

  5. XLS (Extensibel Stylesheet Language) ekstensi .xsl atau .xslt . Untuk tipe data XML yang akan ditapilkan di halaman web • Contoh • <xsl:template name="CreateLink">  •   <xsl:param name="product" />  •   <xsl:element name="a">  •     <xsl:attribute name="href">  •       <xsl:value-of select="'/product/?id='" /><xsl:value-of select="normalize-space($product/@id)" />  •     <xsl:value-of select="$product/name" />  •   </xsl:element>  • </xsl:template> 

  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 <cfset firstName = "World"> Hello <cfoutput>#firstName#</cfoutput>! This CFML tutorial was designed for <cfif firstName eq "World"> you! <cfelse> the world to see. </cfif>

  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: • Apperance(CSS), mengatur properties halamanmenggunakanbahasacss. • Apperance(HTML), mengatur properties halamandalambentukkode html. • Links (CSS), menentukanfont,ukuran,warna links. • Heading (CSS), menentukan style untukteksnaskah. • Title/Encoding, untukmengisijudul. • Tracing Image, menampilkangambarsementarapadalatarbelakang

  11. Memberi judul Cara1: • Di page properties , masukke Title/Encoding • Ketikjudul di Title. Cara2 : • Menu View, Head Conten, klikikon title. • Ketikjudul di Title. Cara3 : - Bagian bar Document langsungketikjudulnya di Title.

  12. Background gambar Cara : • Masukke Page Properties. • Pilih Tab Appearance(HTML) atau (CSS). • Browse bagianBackgroung Image. • Pilih, OK. • Apply.

  13. Background warna Cara : • Masukke Page Properties. • Pilih Tab Appearance. • Klik menu drop-down padabagianBackgroud Color. • Pilihwarna.

  14. Mengatur warna teks Cara : • Masukke Page Properties. • Pilih Tab Appearance. • Klik menu drop-down padabagianText Color. • Pilihwarna.

  15. Mengatur warna link Cara : • Masukke Page Properties. • Pilih Tab Links. • Ada pilihan: • Links Color, warnasemuateks yang ada link. • Visited Links, warnapada link yang sudahpernahdikunjungi • Active Links, warnapadasaat link saat di masihtekan. • Rollover Links, warna yang digunakansaat pointer melewati link tersebut.

  16. Ukuran margin halaman Cara : • Masukke Page Properties. • Pilih Tab Appearance. • Isi kotak Margin: • Left margin, • Top Margin • Right Margin • Bottom Margin.

  17. Menyisipkan karakter khusus Cara1 : • Menu Insert – HTML - Special Character. • Pilihkarakterkhusus. Cara2 : • Klik Insert di panel group, gantikategorymenjadiTeks. • Pilihkarakterkhususnya.

  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 : • Seleksiteks. • Menu Format – Font. • Plih Font. • Ok.

  21. Mengatur warna Cara : • Selesiteks yang akandirubah. • Menu Format – Color. • Pilihwarna, Ok.

  22. Mengubah ukuran Cara : • Seleksiteks. • Klik CSS pada panel Properties • Size • Pilihukuran.

  23. Mengatur perataan teks Cara1: • Seleksi text. • Menu Format – Align. • Pilihjenisperataan. Cara2 : • Seleksi text. • Kliktombol CSS pada panel Properties • PilihjenisRatanya.

  24. Mengatur style teks Cara : • Menu Format – Style . • Pilih format : • Bold • Italic • Underline • Striketrhough, memberiefekcoretpadateks. • Teletype, meberiefeksepertipadateks telegram • Emphasis, efekpenekanan/penegasan. • Strong, memberiefektebal.

  25. Memilih bentuk paragraf Cara : • Seleksiteks. • Menu Format – Paragraph Format. • Pilihsalahsatu format. Cara lain: • Kliktombol HTML pada panel Properties • Pilih format. Keterangan: • Paragraph, untukmengaturjarakantarparagrapteksataupunobjek. • Heading, memilikitatanantabeldenganukurantertentusesuaidengan heading yang dipilih. • Preformatted, menampilkantekstanpamengabaikan white space/ spasidanmenggunakan font default monospace.

  26. Mengatur identasi teks Merupakanjarakteks / paragrafdaritepihalaman. Cara : • Seleksiparagraf. • Menu Format - Indent Untukmenghapus / menghilangkan : - Menu Format - Outdent

  27. Membuat list Cara : • Tempatkankursor di area kerja • Menu Format – List • Pilih : • Ordered List , List ataudaftar yang memilikiurutan, bisaberupaangka, hurufatauromawi. • Unordered List, List yang tidakmemilikiurutan, dapatberupalinkaranhitam/putih, kotak. - Untukmengakhiri list enter dua kali

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

More Related