Bekerja dengan file dan desain web

PERTEMUAN 6

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.

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

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.

Background gambar

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

Background warna

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

Mengatur warna teks

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

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 dikunjungi3.Active Links, warna pada saat link saat di masih tekan.4.Rollover Links, warna yang digunakan saat pointer melewati link tersebut.

Ukuran margin halaman

Cara :-Masuk ke Page Properties.-Pilih Tab Appearance.-Isi kotak Margin:1.Left margin, 2.Top Margin3.Right Margin4.Bottom Margin.

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.

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

Mengatur warna

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

Mengubah ukuran

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

Mengatur perataan teks

Cara1:-Seleksi text.-Menu Format – Align.-Pilih jenis perataan.

Cara2 :-Seleksi text.-Klik tombol CSS pada panel Properties-Pilih jenis Ratanya.

Mengatur style teks

Cara : -Menu Format – Style .-Pilih format :1.Bold2.Italic3.Underline4.Striketrhough, memberi efek coret pada teks.5.Teletype, meberi efek seperti pada teks telegram6.Emphasis, efek penekanan/penegasan.7.Strong, memberi efek tebal.

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.

Mengatur identasi teks

Merupakan jarak teks / paragraf dari tepi halaman.

Cara :-Seleksi paragraf.-Menu Format - IndentUntuk menghapus / menghilangkan :- Menu Format - Outdent

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

Mengatur properties list

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