Bekerja dengan file dan desain web
Download
1 / 28

Bekerja dengan file dan desain web - PowerPoint PPT Presentation


  • 142 Views
  • Uploaded on

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 .

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Bekerja dengan file dan desain web' - shalom


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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Bekerja dengan file dan desain web

Pertemuan 6

Bekerjadengan file dandesain web


Beberapa type file
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 ini berisi data di dalam suatu form mentah yang dapat diformat dengan menggunakan XSL.

<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 halaman dinamis

<cfset firstName = "World">

Hello <cfoutput>#firstName#</cfoutput>!

This CFML tutorial was designed for

<cfif firstName eq "World"> you!

<cfelse> the world to see. </cfif>



Layout css menyediakan kolom
Layout css menyediakan kolom ; halaman dinamis

  • 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
Page properties halaman dinamis

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
Memberi judul halaman dinamis

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
Background gambar halaman dinamis

Cara :

  • Masukke Page Properties.

  • Pilih Tab Appearance(HTML) atau (CSS).

  • Browse bagianBackgroung Image.

  • Pilih, OK.

  • Apply.


Background warna
Background warna halaman dinamis

Cara :

  • Masukke Page Properties.

  • Pilih Tab Appearance.

  • Klik menu drop-down padabagianBackgroud Color.

  • Pilihwarna.


Mengatur warna teks
Mengatur warna teks halaman dinamis

Cara :

  • Masukke Page Properties.

  • Pilih Tab Appearance.

  • Klik menu drop-down padabagianText Color.

  • Pilihwarna.


Mengatur warna link
Mengatur warna link halaman dinamis

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
Ukuran margin halaman halaman dinamis

Cara :

  • Masukke Page Properties.

  • Pilih Tab Appearance.

  • Isi kotak Margin:

  • Left margin,

  • Top Margin

  • Right Margin

  • Bottom Margin.


Menyisipkan karakter khusus
Menyisipkan karakter khusus halaman dinamis

Cara1 :

  • Menu Insert – HTML - Special Character.

  • Pilihkarakterkhusus.

    Cara2 :

  • Klik Insert di panel group, gantikategorymenjadiTeks.

  • Pilihkarakterkhususnya.


Menambah tanggal
Menambah tanggal halaman dinamis

Cara:

- Taruh Pointer di objek.

  • Menu Insert – Date.

  • Pilih Format.

  • Centang “Update Automatically on Save”

  • Ok


Menyisipkan garis horisontal
Menyisipkan garis horisontal halaman dinamis

Cara :

- Taruh Pointer di objek.

  • Pilih menu Insert.

  • HTML

  • Horizontal Rule


Mengatur format font huruf
Mengatur format/font huruf halaman dinamis

Cara :

  • Seleksiteks.

  • Menu Format – Font.

  • Plih Font.

  • Ok.


Mengatur warna
Mengatur warna halaman dinamis

Cara :

  • Selesiteks yang akandirubah.

  • Menu Format – Color.

  • Pilihwarna, Ok.


Mengubah ukuran
Mengubah ukuran halaman dinamis

Cara :

  • Seleksiteks.

  • Klik CSS pada panel Properties

  • Size

  • Pilihukuran.


Mengatur perataan teks
Mengatur perataan teks halaman dinamis

Cara1:

  • Seleksi text.

  • Menu Format – Align.

  • Pilihjenisperataan.

    Cara2 :

  • Seleksi text.

  • Kliktombol CSS pada panel Properties

  • PilihjenisRatanya.


Mengatur style teks
Mengatur style teks halaman dinamis

Cara :

  • Menu Format – Style .

  • Pilih format :

  • Bold

  • Italic

  • Underline

  • Striketrhough, memberiefekcoretpadateks.

  • Teletype, meberiefeksepertipadateks telegram

  • Emphasis, efekpenekanan/penegasan.

  • Strong, memberiefektebal.


Memilih bentuk paragraf
Memilih bentuk paragraf halaman dinamis

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
Mengatur identasi teks halaman dinamis

Merupakanjarakteks / paragrafdaritepihalaman.

Cara :

  • Seleksiparagraf.

  • Menu Format - Indent

    Untukmenghapus / menghilangkan :

    - Menu Format - Outdent


Membuat list
Membuat list halaman dinamis

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
Mengatur properties list halaman dinamis

Cara :

  • Menu – Format - List – properties

  • Pilih type dan style.

  • Ok.


ad