280 likes | 454 Views
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 .
E N D
Pertemuan 6 Bekerjadengan file dandesain web
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.
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.
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>
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>
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.
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>
PHP (Hypertext Preprocessor) ektensinya .php . Untuk halaman dinamis
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.
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
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.
Background gambar Cara : • Masukke Page Properties. • Pilih Tab Appearance(HTML) atau (CSS). • Browse bagianBackgroung Image. • Pilih, OK. • Apply.
Background warna Cara : • Masukke Page Properties. • Pilih Tab Appearance. • Klik menu drop-down padabagianBackgroud Color. • Pilihwarna.
Mengatur warna teks Cara : • Masukke Page Properties. • Pilih Tab Appearance. • Klik menu drop-down padabagianText Color. • Pilihwarna.
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.
Ukuran margin halaman Cara : • Masukke Page Properties. • Pilih Tab Appearance. • Isi kotak Margin: • Left margin, • Top Margin • Right Margin • Bottom Margin.
Menyisipkan karakter khusus Cara1 : • Menu Insert – HTML - Special Character. • Pilihkarakterkhusus. Cara2 : • Klik Insert di panel group, gantikategorymenjadiTeks. • Pilihkarakterkhususnya.
Menambah tanggal Cara: - Taruh Pointer di objek. • Menu Insert – Date. • Pilih Format. • Centang “Update Automatically on Save” • Ok
Menyisipkan garis horisontal Cara : - Taruh Pointer di objek. • Pilih menu Insert. • HTML • Horizontal Rule
Mengatur format/font huruf Cara : • Seleksiteks. • Menu Format – Font. • Plih Font. • Ok.
Mengatur warna Cara : • Selesiteks yang akandirubah. • Menu Format – Color. • Pilihwarna, Ok.
Mengubah ukuran Cara : • Seleksiteks. • Klik CSS pada panel Properties • Size • Pilihukuran.
Mengatur perataan teks Cara1: • Seleksi text. • Menu Format – Align. • Pilihjenisperataan. Cara2 : • Seleksi text. • Kliktombol CSS pada panel Properties • PilihjenisRatanya.
Mengatur style teks Cara : • Menu Format – Style . • Pilih format : • Bold • Italic • Underline • Striketrhough, memberiefekcoretpadateks. • Teletype, meberiefeksepertipadateks telegram • Emphasis, efekpenekanan/penegasan. • Strong, memberiefektebal.
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.
Mengatur identasi teks Merupakanjarakteks / paragrafdaritepihalaman. Cara : • Seleksiparagraf. • Menu Format - Indent Untukmenghapus / menghilangkan : - Menu Format - Outdent
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
Mengatur properties list Cara : • Menu – Format - List – properties • Pilih type dan style. • Ok.