Bekerja dengan file dan desain web

Slides:



Advertisements
Presentasi serupa
Matakuliah Pengenalan Internet
Advertisements

Oleh Apriliya saputri X ti b
Amy Cintya Fitri Pendidikan B. Jepang 2 A
HTML.
Mengelola isi halaman web
Pertemuan 2.  Dreamweaver adl salah satu program pembuatan website yang mempunyai banyak sekali menu-menu dan tool-tool yang dapat dipergunakan untuk.
Pengembangan Web Pertemuan 2 HTML Basic (Text Formating, Link & Frame)
STMIK PPKIA Pradnya Paramita
DASAR HTML Marina Azizah. Struktur Dokumen HTML Dokumen HTML bisa di bagi mejadi tiga bagian utama: HTML Setiap dokumen HTML harus di awali dan di tutup.
PARAGRAF, GAMBAR DAN BINGKAI
Memilih Tampilan Dokumen
Print Preview Dokumen word berbentuk digital, biasanya akan dicetak kedalam bentuk kertas Untuk melihat bentuk dokumen tercetak digunakan perintah File>
Page properties Cara 1: Cara 2: Menu Modify - Ctrl + J Page Properties
REPORT.
MENGOPERASIKAN APLIKASI PRESENTASI
Membuat Bingkai Dokumen Dan Pangaturan Tabulasi
MENU DAN IKON PERANGKAT LUNAK PENGOLAH KATA
HTML.
HTML (Hypertext Markup Language)
PAKET PROGRAM NIAGA TEKNIK KOMPUTER
MEMULAI MS WORD Klik START > Program > Micorosoft Office >Microsoft Office Word 2007.
HTML (Hypertext Markup Language)
Pengantar Pemrograman WEB
Pemrograman Web/TI/ AK /2 sks
 Pengenalan Dreamweaver sebagai tools pengembangan aplikasi web  Dasar-dasar HTML  Penggunaan Form, Frame dan Layer.
Enumerasi, Images & Table
Bekerja dengan file dan desain web PERTEMUAN 6. Beberapa type file -CSS, (Cascading Style Sheet) ekstensi.css. Untuk format isi HTML dan mengendalikan.
Ega puspitriani Pendidikan B. Jepang 2 A
EDITING TEKS PERTEMUAN 2.
HTML (Hypertext Markup Language)
HTML Achmad Yasid,SKom. HTML Singkatan dari HyperText Markup Language adalah bahasa yang menjelaskan bagaimana suatu teks, video, grafik, animasi dan.
Atribut dalam Body Atribut dan contoh penulisan Fungsi
ADD-ON Dasar HTML.
Pertemuan 2 : HTML.
WEB DESIGN.
Pertemuan 2 1.  Bahasa yang digunakan untuk menampilkan informasi pd halaman web.  bahasa ini menggunakan tanda (markup) untuk menandai perintah- perintahnya.
MEMBUAT DOKUMEN BARU Menggunakan berbagai jenis huruf (font) dan ukuran, Format kolom, membuat Drop Cap.
Microsoft Word Dicky Pratama S.Kom.
Desain Web dengan Tag HTML
KKPI KELAS X SEMESTER 1 Standar Kompetensi : Mengoperasikan Sistem Operasi Software Kompetensi Dasar : Mengoperasikan software pengolah kata.
Mengelola isi halaman web
Cascading Style Sheet (CSS)
Microsoft Word Merupakan program aplikasi pengolah kata yang paling banyak digunakan. Meskipun sudah ada versi terbaru dari Microsoft Word, yaitu Ms.
Lutfi Budi Ilmawan Univ. Muslim Indonesia
Membuat Rumus cara membuat rumus adalah sbb: 1. Letakan kursor mouse Anda pada posisi yang akan disisipi rumus. 2. Aktifkan Ribbon Insert 3. Lalu tekan.
Microsoft Office Word 2007 ( PENGATURAN DOKUMEN )
PERTEMUAN 2 HTML (Lanjutan).
Assalamu’alaikum ^^.
B. Membuat Dokumen Baru.
Amelia Widyastuti Pendidikan B. Jepang 2 A
Materi: Microsoft Word 2007
LATIHAN ULANGAN SEMESTER GENAP
Membuat Format Tabel Membuat tabel Buatlah dahulu nama tabel Buatlah field tabel Bentuklah format tabel sesuai kebutuhan.
Mendesain Halaman WEB.
Microsoft Word 2007.
Pengantar Teknologi Informasi
Pengantar Teknologi Informasi
PAKET PROGRAM APLIKASI
Area Kerja Dreamweaver
Internet dan Web By : Lisda Juliana P..
Microsoft Word 2010 Oleh: Oktavia Nirmala
Mengelola isi halaman web
Microsoft Word.
Internet dan Web Ecking Mendrofha.
Darmawan satyananda Mathematics department State university of malang
Pertemuan 1 KOMPUTER APLIKASI.
APLIKASI KOMPUTER “WEBSITE”
Pemrograman Web PG117 – 3 SKS.
List dan Image pada HTML
MATERI MATAKULIAH PAKET PROGRAM NIAGA (PPN) Oleh : Buyung Solihin Hasugian, S.Kom, M.Kom.
Transcript presentasi:

Bekerja dengan file dan desain web Pertemuan 3 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. 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. XLS (Extensibel Stylesheet Language) ekstensi .xsl atau .xslt . Untuk tipe data XML yang akan ditapilkan di halaman web CFML (ColdFusion Markup Language) ektensinya .cfm . Untuk halaman dinamis 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 halaman menggunakan bahasa css. Apperance(HTML), mengatur properties halaman dalam bentuk kode html. Links (CSS), menentukan font,ukuran,warna links. Heading (CSS), menentukan style untuk teks naskah. Title/Encoding, untuk mengisi judul. 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. 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: Links Color, warna semua teks yang ada link. Visited Links, warna pada link yang sudah pernah dikunjungi Active Links, warna pada saat link saat di masih tekan. Rollover Links, warna yang digunakan saat pointer melewati link tersebut.

Ukuran margin halaman Cara : Masuk ke 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. 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 : Klik tombol CSS pada panel Properties Pilih jenis Ratanya.

Mengatur style teks Cara : Menu Format – Style . Pilih format : Bold Italic Underline Striketrhough, memberi efek coret pada teks. Teletype, meberi efek seperti pada teks telegram Emphasis, efek penekanan/penegasan. 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: Paragraph, untuk mengatur jarak antar paragrap teks ataupun objek. Heading, memiliki tatanan tabel dengan ukuran tertentu sesuai dengan heading yang dipilih. 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 - Indent Untuk menghapus / menghilangkan : - Menu Format - Outdent

Membuat list Cara : Tempatkan kursor di area kerja Menu Format – List Pilih : Ordered List , List atau daftar yang memiliki urutan, bisa berupa angka, huruf atau romawi. 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.