Bekerja dengan file dan desain web
This presentation is the property of its rightful owner.
Sponsored Links
1 / 28

Bekerja dengan file dan desain web PowerPoint PPT Presentation


  • 97 Views
  • Uploaded on
  • Presentation posted in: General

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 .

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


Bekerja dengan file dan desain web

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.


Bekerja dengan file dan desain web

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>


Bekerja dengan file dan desain web

  • 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([email protected])" /> 

  •     <xsl:value-of select="$product/name" /> 

  •   </xsl:element> 

  • </xsl:template> 


Bekerja dengan file dan desain web

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.


Bekerja dengan file dan desain web

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>


Bekerja dengan file dan desain web

  • PHP (Hypertext Preprocessor) ektensinya .php . Untuk halaman dinamis


Layout css menyediakan kolom

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

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

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

Background gambar

Cara :

  • Masukke Page Properties.

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

  • Browse bagianBackgroung Image.

  • Pilih, OK.

  • Apply.


Background warna

Background warna

Cara :

  • Masukke Page Properties.

  • Pilih Tab Appearance.

  • Klik menu drop-down padabagianBackgroud Color.

  • Pilihwarna.


Mengatur warna teks

Mengatur warna teks

Cara :

  • Masukke Page Properties.

  • Pilih Tab Appearance.

  • Klik menu drop-down padabagianText Color.

  • Pilihwarna.


Mengatur warna link

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

Ukuran margin halaman

Cara :

  • Masukke Page Properties.

  • Pilih Tab Appearance.

  • Isi kotak Margin:

  • Left margin,

  • Top Margin

  • Right Margin

  • Bottom Margin.


Menyisipkan karakter khusus

Menyisipkan karakter khusus

Cara1 :

  • Menu Insert – HTML - Special Character.

  • Pilihkarakterkhusus.

    Cara2 :

  • Klik Insert di panel group, gantikategorymenjadiTeks.

  • Pilihkarakterkhususnya.


Menambah tanggal

Menambah tanggal

Cara:

- Taruh Pointer di objek.

  • Menu Insert – Date.

  • Pilih Format.

  • Centang “Update Automatically on Save”

  • Ok


Menyisipkan garis horisontal

Menyisipkan garis horisontal

Cara :

- Taruh Pointer di objek.

  • Pilih menu Insert.

  • HTML

  • Horizontal Rule


Mengatur format font huruf

Mengatur format/font huruf

Cara :

  • Seleksiteks.

  • Menu Format – Font.

  • Plih Font.

  • Ok.


Mengatur warna

Mengatur warna

Cara :

  • Selesiteks yang akandirubah.

  • Menu Format – Color.

  • Pilihwarna, Ok.


Mengubah ukuran

Mengubah ukuran

Cara :

  • Seleksiteks.

  • Klik CSS pada panel Properties

  • Size

  • Pilihukuran.


Mengatur perataan teks

Mengatur perataan teks

Cara1:

  • Seleksi text.

  • Menu Format – Align.

  • Pilihjenisperataan.

    Cara2 :

  • Seleksi text.

  • Kliktombol CSS pada panel Properties

  • PilihjenisRatanya.


Mengatur style teks

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

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

Mengatur identasi teks

Merupakanjarakteks / paragrafdaritepihalaman.

Cara :

  • Seleksiparagraf.

  • Menu Format - Indent

    Untukmenghapus / menghilangkan :

    - Menu Format - Outdent


Membuat list

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

Mengatur properties list

Cara :

  • Menu – Format - List – properties

  • Pilih type dan style.

  • Ok.


  • Login