Memodifikasi Tampilan Gambar (Image) dengan CSS

Ukuran: px
Mulai penontonan dengan halaman:

Download "Memodifikasi Tampilan Gambar (Image) dengan CSS"

Transkripsi

1 Memodifikasi Tampilan Gambar (Image) dengan CSS Sebuah file gambar (image) yang disisipkan pada dokumen HTML akan tampil tanpa dekorasi apapun pada saat dilihat di browser. Kita dapat memberi garis pembatas di sekitar gambar tersebut dengan menambahkan atribut border atau mengatur posisinya dengan atribut align pada tag <img> yang bertugas memanggil gambar bersangkutan. Perhatikan contoh berikut! <img src="gambar.gif" border="10" align="right" /> Pada contoh di atas, gambar (foto gadis cantik) diletakkan di sebelah kanan teks dan tampak dikelilingi garis pembatas setebal 10 pixel berwarna hitam. Warna garis pembatas ini tidak bisa diganti dengan warna atau dengan gambar lain apabila kita hanya menggunakan HTML. Lain halnya jika kita menggunakan CSS. Dengan CSS kita dapat memodifikasi tampilan gambar dengan lebih wah! CSS bukan hanya bisa mengganti warna garis, pun ia dapat mengatur tingkat kerenggangan antara gambar dengan garis pembatas atau dengan bagian-bagian lain dari dokumen HTML, memberikan variasi (tipe) bentuk garis pembatas, memberi warna latar, atau membingkainya dengan gambar lain. Dalam CSS, ada beberapa property yang bisa kita gunakan untuk membuat tampilan gambar lebih menarik dan dekoratif, yaitu:

2 1. background, digunakan unruk memberi latar pada gambar baik berupa warna atau gambar lain; 2. padding, digunakan untuk mengatur kerenggangan antara gambar dengan border; 3. margin, digunakan untuk mengatur kerenggangan antara gambar dengan elemen-elemen HTML lainnya; 4. border, digunakan untuk memberi garis pembatas seperti contoh sebelumnya; 5. border-style, digunakan untuk menentukan gaya atau tipe border. Ada beberapa pilihan yang bisa kita gunakan untuk property ini, yakni: solid, dotted, dashed, groove, double, inset, dan outset. (Contoh penggunaanya akan diberikan di bagian akhir posting ini;) 6. border-width, digunakan untuk menentukan tingkat ketebalan border; dan 7. border-color, digunakan untuk menentukan warna border. Sekarang, kita akan mulai mendekorasi gambar dengan spesifikasi sebagai berikut: 1. background: putih 2. padding: 10px 3. border-style: solid 4. border-width: 2px 5. border-color: merah Sintaks penulisan CSS untuk spesifikasi di atas ialah sebagai berikut: <img src="filegambar" style="background:#ffffff; padding:10px; border-style:solid; border-width:2px; border-color:red;" /> Sekarang tampilan gambar akan tampak seperti berikut: Cara penulisan di atas dapat dipersingkat dengan menyatukan property style, width, dan color di bawah property border. Cara penulisan ini disebut CSS shorthand yang bertujuan untuk meringankan ukuran file. Berikut adalah contoh penulisannya: <img src="filegambar" style="background:#ffffff; padding:10px; border:solid 1px #cccccc;" /> Coba Anda ganti nilai warna #ffffff untuk background dan #cccccc untuk border dengan warna favorit Anda. Bila perlu, beri nilai yang berbeda untuk padding dan tebal border. Bim salabim! lihat apa yang terjadi! :)

3 Membingkai Gambar dengan Gambar Lain Sekarang kita akan mengganti property background dengan file gambar yang lain sehingga gambar akan tampak seperti dibingkai. File gambar yang akan dijadikan latar sebaiknya memiliki ukuran lebih besar dari gambar yang akan diberi bingkai. Di sini saya menyiapkan sebuah gambar yang saya buat dengan bantuan Photoshop. Selanjutnya, tulis kode berikut: <img src="filegambar" style="background:url(alamat gambar); padding:20px;" /> Pada bagian alamat gambar diisi dengan lokasi gambar latar yang akan digunakan. Jika gambar (yang akan dijadikan latar berada pada folder yang sama dengan file HTML, maka kita tinggal menuliskan nama file gambar tersebut, misalnya: <img src="filegambar" style="background:url(gambar.gif); padding:20px;" /> Jika berada pada folder yang berbeda dari file HTML, maka terlebih dahulu harus menyebutkan nama folder tersebut. <img src="filegambar" style="background:url(images/gambar.gif); padding:20px;" /> Jika gambar diambil dari situs lain (seperti dari Photobucket), maka alamat gambar ditulis langsung dengan menggunakan misalnya: <img src="filegambar" style="background:url(http://i278.photobucket.com/ albums/kk82/jomantara/gambar.gif); padding:20px;" /> Hasil yang kita peroleh akan tampak seperti berikut:

4 <img src="gambar.jpg" style="background:url(gambar.gif); padding:20px; / > Sekarang coba Anda ganti gambar latar dengan gambar lain. Anda dapat pula menambahkan property border dengan nilai, ukuran, dan warna kesukaan Anda. Seperti tampak di bawah ini. Tipe-tipe Border untuk Gambar pada CSS <img src="filegambar" style="border:dashed 2px #000000;" />

5 <img src="filegambar" style="border:dotted 6px #000000;" /> <img src="filegambar" style="border:double 10px #000000;" /> <img src="filegambar" style="border:groove 10px #000000;" />

6 <img src="filegambar" style="border:inset 10px #000000;" /> <img src="filegambar" style="border:outset 10px #000000;" /> <img src="filegambar" style="border:ridge 10px #000000;" /> Selamat mencoba dan semoga bermanfaat! Collect by ifitady

TUGAS BOXES. 1. Percobaan 1

TUGAS BOXES. 1. Percobaan 1 TUGAS BOXES 1. Percobaan 1 Analisa : Pada percobaan 1, style pada elemen div ditetapkan width dan heightnya 400px dan 300px dengan background color pink, dan pada elemen p, width dan height ditetapkan

Lebih terperinci

CSS Lanjut Pertemuan - 5

CSS Lanjut Pertemuan - 5 CSS Lanjut Pertemuan - 5 Semester Ganjil 2009/2010 CSS Lanjut Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value: auto Nilai / Value ukuran

Lebih terperinci

CSS Cascading Style Sheet

CSS Cascading Style Sheet CSS Cascading Style Sheet Pengenalan CSS CSS adalah singkatan dari Cascading Style Sheets CSS (Cascading Style Sheet) digunakan untuk melengkapi file HTML, dan tugas utamanya adalah menetapkan aturan tampilan/style

Lebih terperinci

NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS.

NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS. PRAKTIKUM : Borders NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS. B. DASAR TEORI Border jika diartikan adalah

Lebih terperinci

APLIKASI WEB DAY 3. (Cascading Style Sheets)

APLIKASI WEB DAY 3. (Cascading Style Sheets) APLIKASI WEB DAY 3 (Cascading Style Sheets) VII. Pengenalan Style Sheet Style Sheets merupakan feature yang sangat penting dalam membuat Dynamic HTML. Meskipun bukan merupakan suatu keharusan dalam membuat

Lebih terperinci

XHTML dan Dasar-dasar CSS XHTML

XHTML dan Dasar-dasar CSS XHTML XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language

Lebih terperinci

CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM

CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM CSS RANDY CAHYA WIHANDIKA, S.ST., M.KOM CSS Cascading Style Sheet Bahasa yang digunakan untuk mengatur tampilan dan format dari dokumen markup (HTML) CSS didesain untuk memisahkan antara dokumen yang mendeskripsikan

Lebih terperinci

MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR

MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR MODUL 1 STYLE SHEET UNTUK TAMPILAN DASAR PENDAHULUAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman Web dalam perkuliahan sebelumnya, kini tiba saatnya untuk membuat halaman web Anda tampil

Lebih terperinci

MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR)

MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MODUL PRAKTIKUM PEMROGRAMAN WEB (DASAR) MATERI KULIAH SEMESTER 3 D3 TEKNIK INFORMATIKA STMIK AMIKOM YOGYAKARTA 2009 Disusun Oleh : ANGGIT DWI HARTANTO, S.KOM MODUL II CASCADING STYLE SHEET (CSS) I. PENGERTIAN

Lebih terperinci

: Choirul Anam : D3 CC PJJ/Teknik Informatika. No NRP : Percobaan 1 Mengatur tampilan tipe list. Kode : Hasil :

: Choirul Anam : D3 CC PJJ/Teknik Informatika. No NRP : Percobaan 1 Mengatur tampilan tipe list. Kode : Hasil : Nama : Choirul Anam Kelas : D3 CC PJJ/Teknik Informatika No NRP : 2103157012 Percobaan 1 Mengatur tampilan tipe list Kode : Hasil : Analisa : Value lower-roman dari property CSS list-style-type membuat

Lebih terperinci

Modul 5 Macromedia Dreamweaver 8

Modul 5 Macromedia Dreamweaver 8 Laporan Praktikum Modul 5 Macromedia Dreamweaver 8 Mata kuliah : CF 1310 Pengantar Teknologi Informasi Disusun oleh : Nama Route Gemilang 5208 100 073 Semester Ganjil 2008/2009 Jurusan Sistem Informasi

Lebih terperinci

Sekilas Mengenai HTML

Sekilas Mengenai HTML Sekilas Mengenai HTML Halaman di website-website yang sering anda lihat di internet pada umumnya dibuat dengan menggunakan bahasa HTML. Tidak seperti bahasa lainnya, untuk membuat halaman HTML, kita tidak

Lebih terperinci

Metode Penulisan Dasar CSS

Metode Penulisan Dasar CSS Metode Penulisan Dasar CSS Pada pembahasan kali ini, kita akan menelusuri pemograman CSS lebih dalam lagi. Ada beberapa penulisan dasar dalam CSS yang wajib kita ketahui. Beberapa penulisan itu terdiri

Lebih terperinci

Membuat Layout Desain Awal dengan Photoshop

Membuat Layout Desain Awal dengan Photoshop 2 Websiteku Membuat Layout Desain Awal dengan Photoshop jalankan aplikasi photoshop anda dan siapkan sebuah kanvas baru, caranya pilih file - new lalu gunakan setting berikut: Width : 700 pixel Height

Lebih terperinci

: Tag ini merupakan inti dari perintah untuk membuat.
: Tag ini merupakan penutup dari perintah untuk membuat

<table> : Tag ini merupakan inti dari perintah untuk membuat. </table> : Tag ini merupakan penutup dari perintah untuk membuat : Tag ini merupakan inti dari perintah untuk membuat tabel pada dokumen HTML : Tag ini merupakan penutup dari perintah untuk membuat tabel pada dokumen HTML : Tag ini digunakan untuk membuat

Lebih terperinci

CSS dan Tata Letak Pemrograman Internet (TKE ) Program Studi Teknik Elektro, Unsoed

CSS dan Tata Letak Pemrograman Internet (TKE ) Program Studi Teknik Elektro, Unsoed CSS dan Tata Letak Pemrograman Internet (TKE 074082) Program Studi Teknik Elektro, Unsoed Iwan Setiawan Tahun Ajaran 2011/2012 a, a:visited { text-decoration:none; } a:hover { text-decoration:underline;

Lebih terperinci

CSS (Cascade Style Sheet)

CSS (Cascade Style Sheet) CSS (Cascade Style Sheet) CSS merupakan bahasa (script) yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup / markup language. Jika kita berbicara dalam konteks web, bisa

Lebih terperinci

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website

Lebih terperinci

TUGAS PRAKTIKUM 9. Nama : Surya Wahyusantoso NRP : Percobaan 1 Mengatur tampilan tipe list. Analisa :

TUGAS PRAKTIKUM 9. Nama : Surya Wahyusantoso NRP : Percobaan 1 Mengatur tampilan tipe list. Analisa : TUGAS PRAKTIKUM 9 Nama : Surya Wahyusantoso NRP : 2103157024 1. Percobaan 1 Mengatur tampilan tipe list Gambar di atas Menggunakan Value lower-roman dari property CSS list-style-type membuat tampilan bullet

Lebih terperinci

Faa Akmal-Tugas-Pemrograman-web-Bab-4- halaman-159s/d164

Faa Akmal-Tugas-Pemrograman-web-Bab-4- halaman-159s/d164 08018244-Faa Akmal-Tugas-Pemrograman-web-Bab-4- halaman-159s/d164 CHAPTER 4 - CSS Salah satu tantangan bagi anda saat membuat halaman Web adalah saat mengatur letak posisi elemen. Sebuah halaman Web tidak

Lebih terperinci

Cara Membuat website dengan Dreamweaver

Cara Membuat website dengan Dreamweaver Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara Wurika.sahara@gmail.com Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See

Lebih terperinci

Cara Mudah Mengedit Cascading Style Sheet (CSS)

Cara Mudah Mengedit Cascading Style Sheet (CSS) Cara Mudah Mengedit Cascading Style Sheet (CSS) Riska Islaminati riska.islaminati@raharja.info :: http://www.komputeran.com/2012/04/cara-mudahmengedit-cascading-style.html Abstrak CSS salah satu teknik

Lebih terperinci

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\

Persiapan. File latihan.rar diekstrak. Contoh apabila Bahan diekstrak di d:\ CSS & CSS Framework CSS Cascading Style Sheets (CSS) adalah sebuah bahasa yang digunakan untuk menampilkan style dari sebuah dokumen HTML. CSS menjelaskan bagaimana elemen HTML harus ditampilkan. Persiapan

Lebih terperinci

CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa

CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa CSS (Cascading Style Sheet) Oleh : Devie Rosa Anamisa Pembahasan Pengertian CSS CSS (FONT, TEXT, COLOR) CSS - Image PENGERTIAN CSS Singkatan dari Cascading Style Sheet Digunakan dalam kode HTML untuk menciptakan

Lebih terperinci

CSS. Cascading Style Sheet. Spesifikasi lengkap di :

CSS. Cascading Style Sheet. Spesifikasi lengkap di : CSS Cascading Style Sheet Spesifikasi lengkap di : http://www.w3..org/tr/css2 Mengubah Text Mengubah Warna Mengubah Posisi Mengubah Ukuran Bagaimana cara menempatkan CSS? Ada 3 cara yaitu : Inline ( pada

Lebih terperinci

Hover Putar CSS3. Oleh: Mohammad Nur Huda

Hover Putar CSS3. Oleh: Mohammad Nur Huda Hover Putar CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Haha... Sebenarnya ini adalah tulisan pertama saya pada situs berbagi ilmu ini :-). Pada kali ini kita akan membuat efek hover memutarkan objek

Lebih terperinci

4. Berikut ini termasuk tag tag yang biasanya diletakkan di dalam kelompok tag Body, kecuali. a. bgcolor c. link b. font d. meta

4. Berikut ini termasuk tag tag yang biasanya diletakkan di dalam kelompok tag Body, kecuali. a. bgcolor c. link b. font d. meta LATIHAN SOAL HTML DASAR 1 1. Singkatan HTML adalah. a. Hyper Text Markup Language b. Hygher Text Markup Language c. Hyper Terminal Markup Language d. Hyper Text Make Language 2. Dibawah ini merupakan tag

Lebih terperinci

TAG PENGOLAH TEKS DAN IMAGE PADA HTML (LANJUTAN)

TAG PENGOLAH TEKS DAN IMAGE PADA HTML (LANJUTAN) TAG PENGOLAH TEKS DAN IMAGE PADA HTML (LANJUTAN) Syaiful Hamzah Nasution Jurusan Matematika, FMIPA UM. Tag , , dan Pengertian dan Kegunaan. dl merupakan kependekan dari definition list, dt

Lebih terperinci

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id

MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id 1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha

Lebih terperinci

MODUL 3 STYLE SHEET RINGKASAN

MODUL 3 STYLE SHEET RINGKASAN MODUL 3 STYLE SHEET RINGKASAN Setelah semua yang Anda ketahui tentang dasar pembuatan halaman web, kini tiba saatnya untuk membuat halaman web Anda tampil lebih meyakinkan. Untuk keperluan tersebut, Anda

Lebih terperinci

MODUL III CASCADING STYLE SHEET

MODUL III CASCADING STYLE SHEET MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami struktur dasar dokumen HTML. Mampu membuat dokumen HTML yang baik dan benar. Mampu memanfaatkan elemen-elemen dasar untuk menampilkan informasi. B. PETUNJUK

Lebih terperinci

Membuat Aplikasi GPS & Suara Antrian dengan PHP. Ronald Rusli.

Membuat Aplikasi GPS & Suara Antrian dengan PHP. Ronald Rusli. Membuat Aplikasi GPS & Suara Antrian dengan PHP Ronald Rusli www.bukulokomedia.com MEMBUAT APLIKASI GPS DAN SUARA ANTRIAN DENGAN PHP Perpustakaan Nasional : Katalog Dalam Terbitan (KDT) Penulis : Ronald

Lebih terperinci

Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS

Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS Oleh: Ardie Jocong pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung

Lebih terperinci

Area kerja. Gambar 1. Tampilan awal MS FrontPage

Area kerja. Gambar 1. Tampilan awal MS FrontPage Microsoft FrontPage I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain, dan mengedit halaman World Wide Web seperti menambahkan text, images,

Lebih terperinci

MENAMPILKAN GAMBAR. 5.1 Pendahuluan

MENAMPILKAN GAMBAR. 5.1 Pendahuluan Menampilkan Gambar 32 10 5 MENAMPILKAN GAMBAR Tujuan Pembelajaran : Dapat menampilkan gambar pada dokumen HTML dengan menggunakan tag tertentu. Bisa memformat tampilan gambar dalam berbagai bentuk dan

Lebih terperinci

: PRAKTIKUM CSS 3 [Color dan Background] NAMA : KELAS : TANGGAL PRAKTIKUM :

: PRAKTIKUM CSS 3 [Color dan Background] NAMA : KELAS : TANGGAL PRAKTIKUM : PRAKTIKUM : PRAKTIKUM CSS 3 [Color dan Background] NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta mengimplementasikan property color pada halaman web. 2. Siswa dapat

Lebih terperinci

Artikel HTML Dasar. World Wide Web ( WWW ) yang biasa disebut web merupakan suatu kumpulan

Artikel HTML Dasar. World Wide Web ( WWW ) yang biasa disebut web merupakan suatu kumpulan Universitas Muhammadiyah Sukabumi Artikel HTML Dasar Oleh : Baden Badru Jaman Artikel HTML Dasar Artikel HTML PENGERTIAN WEB & HTML World Wide Web ( WWW ) yang biasa disebut web merupakan suatu kumpulan

Lebih terperinci

CSS. Auriza Akbar 1 Juni 2012

CSS. Auriza Akbar 1 Juni 2012 CSS Auriza Akbar auriza.akbar@gmail.com 1 Juni 2012 Apa itu CSS? CSS = Cascading Style Sheets Mekanisme sederhana untuk menambahkan style (seperti font, warna, spasi) ke dalam dokumen web http://www.w3.org/style/css/

Lebih terperinci

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa

Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: Pengertian struktur dasar tag-tag HTML membuat aplikasi dengan perintah-perintah HTML HTML Hyper Text Markup

Lebih terperinci

TRAINING. Basic HTML & CSS. Jan-2013 USER BAGIAN 3

TRAINING. Basic HTML & CSS. Jan-2013 USER BAGIAN 3 TRAINING Jan-2013 Basic HTML & CSS USER BAGIAN 3 Table of Contents 1 BASIC HTML...3 1.1 Text & Paragraph...3 Paragraf (Paragraph)...3 Pindah Baris (Break Row)...3 Tengah (Center)...3 Header (Heading)...3

Lebih terperinci

Chapter 1. Pengenalan HTML

Chapter 1. Pengenalan HTML Chapter 1. Pengenalan HTML 1.1. Pengenalan HTML HTML atau HyperText Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. HTML adalah

Lebih terperinci

LAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Image dan Link

LAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Image dan Link LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB Image dan Link Dosen Pembimbing : Dwi Susanto Oleh : Laras Intansari (4103131054) 3 D3 MMB B PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA

Lebih terperinci

CSS Layouting. Antonius RC Pemrograman Web

CSS Layouting. Antonius RC Pemrograman Web CSS Layouting Antonius RC Pemrograman Web CSS Selector Tambahan Tanda > artinya select child element Contoh: ul > li Maka akan terambil 2 elemen li CSS Selector Tambahan Tanda + artinya select adjecent

Lebih terperinci

/* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center;}

/* styling paragraf, teks paragraf berwarna biru dan rata tengah */ p {color:blue;text-align:center;} II CSS INTRO CSS (Cascading Style Sheet) adalah bahasa untuk mendefinisikan bagaimana suatu dokumen dan elemen pada suatu dokumen ditampilkan oleh browser. File CSS memiliki ekstensi.css SYNTAX SYNTAX

Lebih terperinci

KURSUS ONLINE JASA WEBMASTERS

KURSUS ONLINE JASA WEBMASTERS KURSUS ONLINE JASA WEBMASTERS HTML Tables, Frame, Image JASA WEBMASTERS Jl. Ringin Raya No 124A Condong Catur, Sleman, Yogyakarta Tebel 6.1 Tabel Tabel banyak digunakan karena dapat menampilkan informasi

Lebih terperinci

Edisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L

Edisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L Edisi 1 UNIVERSITAS NEGERI SEMARANG Badan Pengembangan Teknologi Informasi dan Komunikasi Modul Pelatihan H T M L U N I V E R S I T A S N E G E R I S E M A R A N G Modul Pelatihan HTML Akhmad Munawar http://about.me/akhmad.munawar

Lebih terperinci

BAB III CASCADING STYLE SHEET

BAB III CASCADING STYLE SHEET BAB III CASCADING STYLE SHEET A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan

Lebih terperinci

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya.

Analisa Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. TUGAS CSS LAYAOUT PRAKTIKUM 6 1. Percobaan 1 Pada percobaan ini, menunjukan flow dalam kondisi normal atau sesuai dengan default dan sifat masing-masing tag HTML-nya. 2. Percobaan2 Position: relative;

Lebih terperinci

HTML Scripting Desain Visual dan Tata Letak dengan CSS 3

HTML Scripting Desain Visual dan Tata Letak dengan CSS 3 Tujuan : Memahami dan dapat menggunakan konsep CSS3 Memahami dan dapat mengetahui kelebihan maupun kekurangan CSS 3 Menerapkan CSS 3 dengan fitur lainnya 8.1 CSS 3 CSS3 adalah standar untuk CSS yang paling

Lebih terperinci

Bab 6 FRAME. A. Maksud dan Tujuan 1. Maksud : Mahasiswa dapat mendesain website dengan membagi jendela windows menjadi beberapa frame.

Bab 6 FRAME. A. Maksud dan Tujuan 1. Maksud : Mahasiswa dapat mendesain website dengan membagi jendela windows menjadi beberapa frame. Bab 6 FRAME A. Maksud dan Tujuan 1. Maksud : Mahasiswa dapat mendesain website dengan membagi jendela windows menjadi beberapa frame. 2. Tujuan : Mahasiswa dapat membagi halaman windows dengan beberapa

Lebih terperinci

Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE

Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE Membangun Web Statis Menggunakan Dreamweaver Oleh : Mochamad Subecha, SE Langkah-langkah membuat web statis 1. Pastikan bahwa server localhost sudah berjalan. Untuk Windows biasanya menggunakan Xampp for

Lebih terperinci

Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :

Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah : PERTEMUAN 5 Membuat Tabel Tabel biasanya digunakan untuk menempatkan data secara spreadsheet, tapi untuk desain suatu web, selain untuk menempatkan data, tabel digunakan untuk merapikan teks, ataupun gambar.

Lebih terperinci

Tutorial Lengkap Memahami CSS Display

Tutorial Lengkap Memahami CSS Display Tutorial Lengkap Memahami CSS Display Oleh: Christian Rosandhy Dalam dunia CSS, property Display adalah salah satu property terpenting yang menentukan hasil akhir sebuah website. Kali ini kita akan banyak

Lebih terperinci

Pemrograman Web Week 2. Team Teaching

Pemrograman Web Week 2. Team Teaching Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting

Lebih terperinci

Panduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono

Panduan Lengkapp HTML dan CSS bagian 2 Wahyu Setiyono Panduan HTML dan CSS bagian 2 A. Apa itu CSS CSS (Cascading Style Sheets) merupakan kode pemrograman untuk membuat tampilan pada HTML. Selain menggunakan HTML para programer website sering menggunakan

Lebih terperinci

Triswansyah Yuliano

Triswansyah Yuliano Mendesain Menu dengan CSS Triswansyah Yuliano triswansyah_yuliano@yahoo.com http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan

Lebih terperinci

Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language)

Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language) Pembuatan Website Sederhana Menggunakan HTML (Hyper Text Markup Language) Oleh : Tri Wahyu Nugroho triwahyunugroho@yahoo.com maswahyu@students.ee.itb.ac.id http://s.ee.itb.ac.id/~maswahyu http://www.maswahyu.tk

Lebih terperinci

Membuat Button Dengan CSS

Membuat Button Dengan CSS Membuat Button Dengan CSS Dari sekian banyak pertanyaan yang muncul dari para pemula di CSS adalah pertanyaan bagaimana sih membuat tombol dengan CSS?, hmmm bagi saya ini adalah pertanyaan yang simple

Lebih terperinci

BAB VII Tabel. Susanto, S.Kom. Bab VII Tabel

BAB VII Tabel. Susanto, S.Kom. Bab VII Tabel BAB VII Tabel Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag yang menandai sebuah tabel, tag yang membentuk baris dan tag yang membentuk kolom. Masing-masing tag tersebut harus

Lebih terperinci

A. LATAR BELAKANG ATAU BACKGROUND

A. LATAR BELAKANG ATAU BACKGROUND A. LATAR BELAKANG ATAU BACKGROUND Latar belakang background dalam CSS dibedakan menjadi 2: 1. Latar Belakang Dengan Menggunakan Warna: Warna background memiliki dua nilai: Transparent : membuat wearna

Lebih terperinci

MODUL 3 HTML & CSS KELAS ZEROZERO Membuat Halaman Web Sederhana Training Online Ilmuwebsite

MODUL 3 HTML & CSS KELAS ZEROZERO Membuat Halaman Web Sederhana Training Online Ilmuwebsite MODUL 3 HTML & CSS KELAS ZEROZERO Membuat Halaman Web Sederhana Training Online Ilmuwebsite http://www.ilmuwebsite.com Lisensi Dokumen: Copyright 2007-2008 Ilmuwebsite.Com Hanya untuk kalangan intern,

Lebih terperinci

Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web

Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web MODUL TIK KELAS XI SEMESTER I TAHUN AJARAN 2008-2009 2009 SMA KOLESE DE BRITTO YOGYAKARTA Modul dapat di download di: Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman

Lebih terperinci

PEMROGRAMAN WEB 1 CSS

PEMROGRAMAN WEB 1 CSS PEMROGRAMAN WEB 1 CSS RIO ANDRIYAT KRISDIAWAN, M.KOM Definisi CSS CSS adalah kepanjangan dari Cascading Style Sheet dan digunakan para web designer untuk mengatur style elemen yang ada didalam halaman

Lebih terperinci

FLASH, FRAME, BEHAVIOR

FLASH, FRAME, BEHAVIOR FLASH, FRAME, BEHAVIOR 1. Flash Menyisipkan Flash Button a. Pilih menu : insert image interactive flash button b. Tentukan property : Style : pilih bentuk / jenis tombol flash Button text : tulis label

Lebih terperinci

Tutorial Mengedit Halaman HTML dengan Dreamweaver

Tutorial Mengedit Halaman HTML dengan Dreamweaver Tutorial Mengedit Halaman HTML dengan Dreamweaver Oleh : Ruth Ema Febrita Pada tutorial sebelumnya, kita sudah berhasil melakukan konversi dari desain website yang kita buat menggunakan Photoshop menjadi

Lebih terperinci

MODUL 7. Pengantar jquery

MODUL 7. Pengantar jquery MODUL 7 Pengantar jquery Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang 2016 Pertemuan 7 7.1 Tujuan : 1. Mahasiswa dapat memahami mengenai PHP dengan jquery 2. Mahasiswa dapat mengaplikasikan

Lebih terperinci

Bab 5. Cascading Style Sheet (CSS)

Bab 5. Cascading Style Sheet (CSS) Bab 5. Cascading Style Sheet (CSS) Overview Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan

Lebih terperinci

CSS. inheritance (pewarisan)

CSS. inheritance (pewarisan) {CSS} lanjut CSS inheritance (pewarisan) sebuah elemen mewarisi beberapa nilai dari properti yang dimiliki oleh elemen parent-nya http://www.w3.org/tr/css21/cascade.html#inheritance http://www.slideshare.net/diniscorreia/htmlcss-3-introduction-to-css

Lebih terperinci

Membangun website dinamis berbasis PHP-mySQL (3)

Membangun website dinamis berbasis PHP-mySQL (3) Membangun website dinamis berbasis PHP-mySQL (3) Agus Subardjo multigraphica@yahoo.com http://multigraphica.com Lisensi Dokumen: Copyright 2011-2015 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com

Lebih terperinci

Nama : Yohandes Efindo NIM : Kelas : F. Terjemahan halaman 4-5. Tag HTML

Nama : Yohandes Efindo NIM : Kelas : F. Terjemahan halaman 4-5. Tag HTML Nama : Yohandes Efindo NIM : 09018198 Kelas : F Terjemahan halaman 4-5 Tag HTML Pada dasarnya, sebuah halaman web adalah file teks yang berisi petunjuk dalam bentuk kode-kode HTML (disebut tag) dan atribut.

Lebih terperinci

Membuat Display Produk dalam Layout Box 4 Kolom

Membuat Display Produk dalam Layout Box 4 Kolom Membuat Display Produk dalam Layout Box 4 Kolom Oleh: Debrian Ruhut Saragih Selamat pagi Sobat sekalian, saat ini kita banyak menemukan toko online bertebaran di Internet. Saya sering memperhatikan bagaimana

Lebih terperinci

DAFTAR ISI Bab 1 Mengenal Teknologi Internet dan Web... 1 Bab 2 Tentang CSS... 9

DAFTAR ISI Bab 1 Mengenal Teknologi Internet dan Web... 1 Bab 2 Tentang CSS... 9 DAFTAR ISI Kata Pengantar... vii Daftar Isi... ix Bab 1 Mengenal Teknologi Internet dan Web... 1 1.1 Sejarah Internet...1 1.2 Web dan Browser...3 1.3 Mengenal Teknologi Web...4 1.4 Sekilas Tentang HTML...5

Lebih terperinci

LAPORAN PRAKTIKUM 4 PENGENALAN CSS

LAPORAN PRAKTIKUM 4 PENGENALAN CSS LAPORAN PRAKTIKUM 4 PENGENALAN CSS Dosen Pembimbing : Dwi Susanto S.ST, MT Oleh : Noer Rhiannah A ( 4103131052 ) PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK

Lebih terperinci

LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI

LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI LAPORAN RESMI PRAKTIKUM TEKNOLOGI WEB PENGENALAN CSS OLEH : LISTHYA KUMALASARI 4103131060 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI SURABAYA

Lebih terperinci

Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web

Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web HTML DASAR BAGIAN 1 Oleh: Heribertus Heri Istiyanto Tujuan: Siswa dapat membuat desain situs menggunakan perangkat lunak desain dan pemrograman web Materi: 1. HTML Dasar 2. Desain Layout di Photoshop 3.

Lebih terperinci

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah mengubah keseluruhan

Lebih terperinci

BAB 5 PROSES EDITING 5.1. EDITING AWAL

BAB 5 PROSES EDITING 5.1. EDITING AWAL BAB 5 PROSES EDITING Ada sebagian web designer dalam membuat situs professional tidak memanfaatkan Adobe Photoshop dalam merancang web, padahal dengan software tersebut kita akan lebih mudah dan lebih

Lebih terperinci

{CSS} Cascading Style Sheet

{CSS} Cascading Style Sheet {CSS} Cascading Style Sheet mekanisme sederhana yang mengatur gaya / style (cth: warna, ukuran, posisi, dll) pada halaman web. http://www.w3.org/style/css sebelum CSS sebelum CSS sebelum CSS sebelum

Lebih terperinci

Gambar, Link dan Marquee Menyisipkan Gambar

Gambar, Link dan Marquee Menyisipkan Gambar Menyisipkan Gambar Selain teks, halaman web juga dapat memuat gambar/image. Terdapat beberapa jenis format gambar yang dapat digunakan pada halaman web, antara lain : GIF (Grafical Interchange Format)

Lebih terperinci

Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial

Publish: 7 Juni 2012 Author & Copyright: Johan Status: FREE tutorial Kumpulan Tutorial dan belajar ilmu website mulai dari hosting dan coding seperti belajar HTML, CSS, Javascript, Javascript, JQuery, ASP.Net hingga SEO dan Desain web dengan Dreamweaver dan Photoshop untuk

Lebih terperinci

Tabel, List. Tempatkan kursor pada dokumen windor, kemudian pilih salah satu cara berikut : Insert Table

Tabel, List. Tempatkan kursor pada dokumen windor, kemudian pilih salah satu cara berikut : Insert Table Tabel, List 1. Tabel Tabel adalah objek yang terdiri dari kolom dan baris. Tabel dalam halaman / dokumen Web sebenarnya terdiri dari tag-tag HTML, yaitu tag , tag , tag . 1.1. Menyisipkan

Lebih terperinci

Materi latihan yang akan Anda dapatkan dalam Buku Student Exercise Series Pemrograman Web dengan HTML, CSS, dan JavaScript ini mencakup:

Materi latihan yang akan Anda dapatkan dalam Buku Student Exercise Series Pemrograman Web dengan HTML, CSS, dan JavaScript ini mencakup: Kata Pengantar Buku Student Guide Series Pemrograman Web dengan HTML, CSS, dan JavaScript ditujukan untuk para siswa-siswi SMP/SMA dan pemula pengguna komputer agar dapat lebih memahami, menguasai, dan

Lebih terperinci

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.

Desain Web. Oleh : Ady Purna Kurniawan, ST., MT. Desain Web HTML Layout Oleh : Ady Purna Kurniawan, ST., MT. Materi HTML Layout 1. Tabel 2. Frame TABLE Digunakan untuk membuat tabel (kolom dan baris) Diperbolehkan membuat tabel di dalam tabel (nested

Lebih terperinci

SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom.

SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. SIMPLE TUTORIAL - ADOBE DREAMWEAVER CS 5 Oleh: H. Heri Istiyanto, S.Si., M.Kom. Dreamweaver merupakan aplikasi yang digunakan untuk membuat website secara profesional. Pada tutorial ini akan dijelaskan

Lebih terperinci

Memanfaatkan CSS Animasi dan Transisi [Part 1]

Memanfaatkan CSS Animasi dan Transisi [Part 1] Memanfaatkan CSS Animasi dan Transisi [Part 1] Oleh: Christian Rosandhy Transition dan Animation itu adalah salah satu perintah wajib di dunia CSS3 sekarang untuk menghasilkan web yang lebih unik. Di part

Lebih terperinci

Table, List, Form DWI SETIYA.N. /

Table, List, Form DWI SETIYA.N. / LIST, TABLE DAN FORM Alat dan Bahan Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai

Lebih terperinci

KELAS TANGGAL PRAKTIKUM

KELAS TANGGAL PRAKTIKUM PRAKTIKUM NAMA KELAS TANGGAL PRAKTIKUM : Margins, Padding dan Dimensi : : : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan margin dan padding. 2. Siswa dapat mengenal, memahami

Lebih terperinci

Percobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html

Percobaan 1: Pengenalan Syntax Simpan file berikut dengan nama percobaan1.html Alat dan Bahan -- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya -- Bahan-bahan gambar berupa gambar-gambar kecil yang akan digunakan sebagai icon pada list

Lebih terperinci

PENGGUNAAN SLICE. Tujuan Instruksional

PENGGUNAAN SLICE. Tujuan Instruksional PENGGUNAAN SLICE Suatu halaman web harus didesain secara representatif namun bisa diakses secara cepat. Sebuah halaman web yang yang dibuat berupa gambar full color dengan menggunakan Adobe Photoshop,

Lebih terperinci

PROPERTIES. Pemrograman Web Teknik Informatika Fakultas Teknologi Industri

PROPERTIES. Pemrograman Web Teknik Informatika Fakultas Teknologi Industri PROPERTIES 12 Font Syntax: font: Properti Font Possible Values: [ ]? [ / ]? Contoh: P { font: italic bold 12pt/14pt

Lebih terperinci

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Pertemuan ke 4 Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi adalah suatu teknologi yang digunakan untuk memperindah halaman website (situs), dengan CSS kita dapat dengan mudah

Lebih terperinci

MODUL III CASCADING STYLE SHEET

MODUL III CASCADING STYLE SHEET MODUL III CASCADING STYLE SHEET A. TUJUAN Memahami jenis dan struktur dasar dokumen CSS. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk menghasilkan halaman

Lebih terperinci

WEB DEVELOPMENT by Hestiasari Rante-Pasila. Week 3 Cascading Style Sheets (CSS) Part 1

WEB DEVELOPMENT by Hestiasari Rante-Pasila. Week 3 Cascading Style Sheets (CSS) Part 1 WEB DEVELOPMENT by Hestiasari Rante-Pasila Week 3 Cascading Style Sheets (CSS) Part 1 WHAT IS CSS? CSS: Cascading Style Sheets Styles ini mendeskripsikan bagaimana menampilkan elemen-elemen HTML Styles

Lebih terperinci

Tag HTML Container. Nuryani Sofia Dewi / / Kelas A

Tag HTML Container. Nuryani Sofia Dewi / / Kelas A Tag HTML Container Pada dasarnya, sebuah halaman web adalah teks file yang berisi petunjuk dalam bentuk kode-kode HTML(disebut tag) dan atribut. Tag adalah perintah Web browser yang nantinya ikut memformat

Lebih terperinci

CSS (Cascading Style Sheets)

CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) Instruktur: Arif Nurwidyantoro Intro Cascading Style Sheets (CSS) digunakan untuk mendefinisikan bagaimana sebuah elemen HTML ditampilkan. Sebuah elemen HTML dapat ditampilkan

Lebih terperinci

Diktat CSS. Cascading Style Sheet. L. Erawan

Diktat CSS. Cascading Style Sheet. L. Erawan Diktat CSS Cascading Style Sheet L. Erawan DAFTAR ISI PENDAHULUAN... 6 CSS Adalah Suatu Solusi... 6 CSS Mengefisienkan Pekerjaan... 6 SINTAKS... 7 Memberi Komentar... 7 CLASS DAN ID... 8 ID CSS... 8 CLASS

Lebih terperinci

Teknologi Multimedia untuk Teknologi Web

Teknologi Multimedia untuk Teknologi Web Teknologi Multimedia untuk Teknologi Web Multimedia mencakup segala sesuatu yang dapat dilihat dan/atau didengar baik dalam media cetak, elektronik maupun yang lainnya. Multimedia sangat dibutuhkan dalam

Lebih terperinci

LAYOUT. Alat dan Bahan. Cara Kerja. Percobaan. Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP :

LAYOUT. Alat dan Bahan. Cara Kerja. Percobaan. Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : Nama : Dwi Setiya Ningsih Kelas : PJJ D3 T1 NRP : 2103157025 LAYOUT Alat dan Bahan --- Software HTML Editor seperti Notepad++, Adobe Dreamweaver, Text Wrangler atau yang lainnya --- Bahan-bahan gambar

Lebih terperinci

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) - Konsep dasar CSS - CSS properties Definisi Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) adalah suatu teknologi yang digunakan untuk memperindah halaman website

Lebih terperinci

BAB 13 MEMPERCANTIK TAMPIL WEB

BAB 13 MEMPERCANTIK TAMPIL WEB BAB 13 MEMPERCANTIK TAMPIL WEB Website yang baik bukan terletak pada banyaknya animasi yang ditampilkan, tidak juga karena banyaknya video yang disediakan atau banyaknya warna yang dikombinasikan. Website

Lebih terperinci