MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
|
|
|
- Djaja Hermanto
- 7 tahun lalu
- Tontonan:
Transkripsi
1 1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR
2 2 Modul 6 CSS3 Tujuan: Mahasiswa mengenal komponen CSS 3 sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha Sidik Ir dan Husni I. Pohan, 2002» Buku Pintar Webmaster: Adhi Prasetio, 2015» w3schools.com Pada modul sebelumnya telah dibahas mengenai penggunaan CSS, tujuan, jenis dan kemudahan dari penggunaan CSS. Seiring dengan perkembangan HTML (saat ini dikenal dengan nama HTML5), CSS juga mengalami perkembangan. CSS generasi baru ini lebih dikenal dengan nama CSS3. 1. CSS3 Berikut beberapa kelebihan yang terdapat pada CSS3 adalah sebagai berikut:» CSS3 lebih detail dalam mendeklarasikan object yang akan diberikan style» CSS3 kaya akan fitur baik untuk animasi, efek untuk teks atau object, yang sebelumnya tidak bisa dilakukan CSS1 dan CSS2» Penggunaan CSS3 dapat menghasilkan website yang lebih interaktif dengan pengunjung» Penggunaan CSS3 dapat mengurangi ukuran file yang di-load dan lebih ringan, secara otomatis dapat mengurangi bandwith inbound/outbound website
3 3 Beberapa fitur baru yang ada pada CSS3 antara lain:» Backgounds dan Borders» Text Effects» 2D/3D Transformations» Animations 2. Border CSS3 memungkinkan kita untuk membuat border dengan sudut bundar, menambahkan bayangan, dan bahkan menggunakan gambar sebagai border. Untuk membuat border, CSS3 menyediakan beberapa parameter seperti:» border-radius» box-shadow Sebelumnya tampilan default dari sebuah border adalah sudut tajam. Dengan menggunakan parameter border-round, kita dapat menciptakan sebuah border dengan tampilan sudut yang tumpul. Berikut ini contoh penggunaan CSS3 untuk membuat border dengan sudut bundar. <html> <title>contoh membuat border-radius</title> div { border: 2px solid #333; padding: 10px 40px; background: #69F; width: 300px; border-radius: 20px; <div> Fungsi untuk membuat tampilan border dengan sudut bulat </div>
4 4 Untuk membuat sebuah tampilan border yang meiliki sebuah bayangan dapat digunakan parameter box-shadow. Untuk mengatur box-shadow ada 4 hal yang perlu diatur yaitu jarak horizontal, jarak vertikal, blur dan warna bayangan. Berikut ini contoh penggunaan CSS3 untuk membuat bayangan. <html> <title>contoh membuat box-shadow</title> div { width: 300px; height: 100px; background-color: #FFF; padding: 10px; box-shadow: 10px 10px 5px #333; <div> membuat tampilan border memiliki bayangan </div> 3. Background CSS3 memiliki parameter baru untuk mendukung pembuatan background (latar belakang) halaman web yang lebih baik. Beberapa parameter tersebut antara lain:» background-size» background-origin» multiple background images Dengan menggunakan parameter background-size, memberikan kemudahan bagi kita untuk mengubah ukuran gambar yang kita gunakan sebagai background. Ukuran background dapat diubah dalam bentuk pixel maupun presentase terhadap ukuran elemen utamanya. Berikut ini contoh penggunaan parameter background-size. <html> <title>contoh penggunaan background-size</title>
5 5 div { background: url( edu.png ); background-size: 60px 80px; background-repeat: no-repeat; padding-top: 40px; <p> background-size digunakan untuk mengatur ukuran gambar terhadap ukuran elemen utamanya</p> Parameter background-origin digunakan untuk menentukan posisi area di mana background berada. Posisi gambar background bisa berada dalam content-box, padding-box atau borderarea. Berikut ini contoh penggunaan parameter background-origin. <title>contoh CSS3</title> div { border: 1px solid #000; padding: 35px; background-image: url('black.png'); background-repeat: no-repeat; background-position: left; #div1 { background-origin: border-box; #div1 { background-origin: content-box; <p>background-origin: border-box</p> <div id="div1">posisi background akan berada di border</div> <p>background-origin: content-box</p> <div id="div2">posisi background akan berada di content</div>
6 6 CSS3 memungkinkan penggunaan beberapa gambar sekaligus sebagai latar belakang (multiple background images). Untuk mencoba penggunaan beberapa gambar sebagai background gunakan gambar yang memiliki latar belakang transparant. Berikut ini contoh penggunaan multiple background images. <title>contoh CSS3</title> body { background-image: url('black.png'), url('edu.png'); Contoh penggunaan beberapa gambar sebagai latar belakang 4. Efek Teks CSS3 juga memiliki beberapa fitur tambahan yang berhubungan dengan teks. Beberapa fitur tersebut antara lain:» text-shadow» word-warp Selain pada border, efek bayangan juga dapat dibuat pada teks. Untuk membuat efek bayangan pada teks digunakan parameter text-shadow. 4 hal yang dapat diatur pada text-shadow yaitu jarak horizontal, jarak vertikal, blur dan warna bayangan. Berikut ini contoh penggunaan textshadow. <title>contoh CSS3</title> body { text-shadow: 5px 5px 5px #333; Membuat efek bayangan pada teks
7 7 Kadang kita menemui situasi dimana ukuran content melebihi ukuran elemen penampangnya. Misalnya ketika kita akan memasukan sebuah alamat url dari sebuah web ke dalam sebuah div yang sudah diatur ukurannya. Alamat url yang terlalu panjang dapat menyebabkan teks keluar dari penampangnya. Hal tersebut akan menghasilkan tampilan web yang kurang indah. Untuk mengatasi hal tersebut, CSS3 memiliki fitur word-warp yang akan memotong sebuah kata yangpanjang apabila melewati batas. Berikut ini contoh penggunaan word-warp. <title>contoh CSS3</title> p.test { width: 15em; border: 1px solid #000; word-wrap: break-word; <p class="test"> Kadang kita menemui situasi dimana ukuran content melebihi ukuran elemen penampangnya. Misalnya ketika kita akan memasukan sebuah alamat url dari sebuah web ke dalam sebuah div yang sudah diatur ukurannya. Alamat url yang terlalu panjang dapat menyebabkan teks keluar dari penampangnya. Hal tersebut akan menghasilkan tampilan web yang kurang indah. Untuk mengatasi hal tersebut, CSS3 memiliki fitur word-warp yang akan memotong sebuah kata yangpanjang apabila melewati batas. Berikut ini contoh penggunaan word-warp. </p> 5. Transformasi 2D/3D Fitur yang menarik dari CSS3 adalah fitur grafis seperti transformasi dan animasi. Dengan CSS3 sekarang kita dapat melakukan perubahan pada elemen web seperti memindahkan, memutar, mengubah ukuran, dll.
8 8 Pada umumnya semua browser terbaru mendukung transformasi, namun Chrome dan Safari memerlukan penambahan prefix -webkit- di depan setiap parameternya. Dua jenis transformasi yang disediakan CSS3 yaitu transformasi 2D dan 3D. Perbedaannya terletak pada jenis perubahannya. Gambar dibawah ini menjelaskan perbedaan transformasi 2D dan 3D. Perputaran 2D Perputaran 3D 5.1 Transformasi 2D Beberapa jenis transformasi 2 dimensi yang bisa dilakukan antara lain:» translate()» rotate()» scale()» skew()» matrix() Translate memungkinkan kita untuk membuat duplikasi dari sebuah elemen web ke tempat lain dalam sebuah halaman web. Translate membutuhkan 2 parameter ukuran x dan y. Berikut ini contoh penggunaan translate. -ms-transform: translate(50px, 100px); /* IE 9 */ -webkit-transform: translate(50px, 100px); /* Safari */
9 9 transform: translate(50px, 100px); Rotate memungkinkan kita untuk memutar sebuah elemen web. Perputarannya searah jarum jam jika nilainnya positif, jika nilainya negatif maka berlawanan arah jarum jam. Berikut ini contoh penggunaan rotate. -ms-transform: rotate(20deg); /* IE 9 */ -webkit-transform: rotate(20deg); /* Safari */ transform: rotate(20deg); Scale memungkinkan kita untuk mengubah ukuran elemen dalam sebuah web. Berikut ini contoh penggunaan scale. -ms-transform: scale(2,3); /* IE 9 */ -webkit-transform: scalee(2,3); /* Safari */ transform: scale(2,3);
10 10 Skew memungkinkan kita untuk mengubah bentuk sudut sebuah elemen web berdasarkan sudut x dan y. Berikut ini contoh penggunaan skew. -ms-transform: skew(30deg,0deg); /* IE 9 */ -webkit-transform: skew(30deg,0deg); /* Safari */ transform: skew(30deg,0deg); Untuk perubahan yang lebih fleksibel, dapat menggunakan matrix yang merupakan gabungan dari semua transformasi yang telah dibahas sebelumnya. Matrix menggunakan 6 parameter yaitu ukuran fungsi matematika yang memungkinkan kita untuk melakukan rotate, scale, translate, dan skew. Berikut ini contoh penggunaan matrix. -ms-transform: matrix(1, -0.3, 0, 1, 0, 0); /* IE 9 */ -webkit-transform: matrix(1, -0.3, 0, 1, 0, 0); /* Safari */ transform: matrix(1, -0.3, 0, 1, 0, 0); 5.2 Transformasi 3D Transformasi 3D yang disediakan oleh CSS3 antara lain:» rotatex()» rotatey()» rotatez() Dengan rotatex kita dapat memutar sebuah elemen dengan axis x sebagai sumbunya. Berikut ini contoh penggunaan rotatex. -webkit-transform: rotatex(100deg); /* Safari */ transform: rotatex(100deg);
11 11 Dengan rotatey kita dapat memutar sebuah elemen dengan axis y sebagai sumbunya. Berikut ini contoh penggunaan rotatey. -webkit-transform: rotatey(150deg); /* Safari */ transform: rotatey(150deg); Dengan rotatez kita dapat memutar sebuah elemen dengan axis z sebagai sumbunya. Berikut ini contoh penggunaan rotatez. -webkit-transform: rotatez(180deg); /* Safari */ transform: rotatez(180deg); 6. Animasi Dengan CSS3, kita bisa membuat beberapa animasi dan transisi yang dulunya hanya bisa dengan menggunakan Flash atau Javascript. 6.1 Transisi Transisi memungkinkan kita untuk mengubah elemen dari suatu web ke bentuk yang lain secara gradual. Misalnya dari bentuk kotak ke bentuk persegi panjang. Berikut ini contoh penggunaan transisi. width: 100px; height: 100px; background: red; -webkit-transition: width 2s; /* Safari 3.1 to 6.0 */ transition: width 2s; div:hover { width: 300px;
12 12 Jika kita memindahkan kursor ke dalam kotak, maka secara perlahan kotak akan memanjang ke kanan. Proses perpanjangan ini memerlukan waktu 2 detik. 6.2 Animation Untuk membuat animasi pada CSS3, kita adalah tempat kita mendefinisikan animasi yang akan dibuat. Dengan mendefinisikan style CSS maka animasi akan terjadi secara gradual sesuai dengan definisi yang kita buat. Contoh script berikut ini akan mengubah warna dan posisi kotak secara gradual sesuai dengan warna pelangi dari merah, kuning, hijau, dan biru, kemudian kembali lagi ke warna merah. Posisi berubah secara gradual dalam formasi segi empat. <html> div { width: 100px; height: 100px; background-color: red; position: relative; -webkit-animation-name: example; /* Chrome, Safari, Opera */ -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */ animation-name: example; animation-duration: 4s; /* Chrome, Safari, Opera example { 0% {background-color:red; left:0px; top:0px; 25% {background-color:yellow; left:200px; top:0px; 50% {background-color:blue; left:200px; top:200px; 75% {background-color:green; left:0px; top:200px; 100% {background-color:red; left:0px; top:0px; /* Standard syntax example { 0% {background-color:red; left:0px; top:0px; 25% {background-color:yellow; left:200px; top:0px; 50% {background-color:blue; left:200px; top:200px; 75% {background-color:green; left:0px; top:200px; 100% {background-color:red; left:0px; top:0px;
13 13 <p><b>catatan:</b> Contoh ini tidak berjalan di Internet Explorer 9 dan versi terbaru</p> <div></div>
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
Animasi Dengan CSS3. Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi
Tujuan Animasi Dengan CSS3 Mahasiswa memahami konsep dasar animasi CSS3 Mahasiswa memahami konsep transisi Mahasiswa memahami konsep transformasi Dasar Teori Pada praktikum-praktikum sebelumnya, kita telah
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
Percobaan 1 : Mengatur Width Dan Height Hasil :
Percobaan 1 : Mengatur Width Dan Height Analisa : Terlihat di atas kalau width dan height dari tag dan berbeda sesuai value yang telah diinputkan yang bias dibedakan dengan background-color
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 6 CSS For Layout Tujuan: Mahasiswa mengenal komponen-komponen CSS yang dapat digunakan untuk mengatur tata letak element HTML dalam membangun website
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
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 1 Mengenal Website & HTML Tujuan: Mahasiswa mengenal konsep-konsep dan komponen dasar dari suatu website dan mampu membangun suatu website statis.
Memanfaatkan CSS Animasi dan Transisi [Part 1]
![Memanfaatkan CSS Animasi dan Transisi [Part 1]](/thumbs/56/39606242.jpg "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
Author : Minarni, S.Kom.,MM
S Cascading Style Sheets Author : Minarni, S.Kom.,MM Universitas Darwan Ali Sampit Kalimantan Tengah Internet Multimedia Keuntungan Menggunakan CSS Mempermudah dan mempersingkat pembuatan dan pemeliharaan
7 Cara Mempercantik Tampilan Blog
7 Cara Mempercantik Tampilan Blog Primo Riveral primo@raharja.info Abstrak Memiliki blog dengan tampilan keren dan enak dilihat tentu pasti menjadi kembanggaan tersendiri untuk seorang yang menggemari
DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN
DASAR-DASAR CSS DASAR-DASAR CSS 2015 A. PENGENALAN CSS merupakan kependekan dari Cascading Style Sheet yaitu suatu skrip yang digunakan untuk mempercantik tampilan HTML atau mengatur bagaimana elemen HTML
Komunikasi Multimedia
Komunikasi Multimedia Modul ke: Fakultas Ilmu Komunikasi Teknik Lanjutan Corporate Website: HTML Editing dengan Macromedia Dreamweaver MX Anindita, S.Pd, M.Ikom Program Studi Public Relations www.mercubuana.ac.id
CSS BOXES. Langkah Kerja. Percobaan
Tugas : Percobaan Praktikum 8 Materi : CSS Boxes Nama : Dwi Setiya Ningsih NRP : 2103157025 Langkah Kerja CSS BOXES Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan
: 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
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
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
Teks dan Background SERIF SANS-SERIF MONOSPACE
Tujuan Teks dan Background Mahasiswa dapat memahami pengaturan teks melalui CSS Mahasiswa dapat memahami berbagai jenis ukuran teks Mahasiswa dapat memahami pengaturan background melalui CSS Dasar Teori
BAB VI DESAIN WEB RESPONSIF
BAB VI DESAIN WEB RESPONSIF A. KOMPETENSI DASAR Memahami konsep dasar desain halaman web responsif Mampu menerapkan konsep desain web responsif ke dalam aplikasi Mampu menghasilkan desain aplikasi web
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 CSS Lanjut CSS Dimension Berfungsi untuk mengatur panjang dan lebar dari sebuah elemen HTML. contoh: height:100px; width:200px; Nilai/ value:
CSS Cascading Style Sheet
CSS Cascading Style Sheet Pemrograman Web 1 Genap 2011-2012 Pengenalan CSS CSS = Cascading Style Sheet. Suatu style yang digunakan untuk menampilkan elemen HTML. Dapat mengatur dan mengontrol tampilan
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04A Cascading Style Sheets
Image Slider 3D. Oleh: Anthonius
Image Slider 3D Oleh: Anthonius Kali ini saya akan berbagi cara membuat image slider dengan tampilan 3D. Cara ini sangat efisien karena hanya menggunakan sedikit script. Untuk CSS nya agan bisa copy langsung
LAPORAN RESMI. Boxes
LAPORAN RESMI Boxes Dosen Pembimbing : Dwi Susanto,ST, MT Oleh Hamidah Nur Hidayati 4103131038 PROGRAM STUDI TEKNOLOGI MULTIMEDIA BROADCASTING DEPARTEMEN MULTIMEDIA KREATIF POLITEKNIK ELEKTRONIKA NEGERI
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
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
Notifikasi Keren dengan CSS3
Notifikasi Keren dengan CSS3 Oleh: Sendy PK Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini
Cara Mengelola Isi Halaman Web
Cara Mengelola Isi Halaman Web MEMBUAT, MEMBUKA, DAN MENYIMPAN DOKUMEN HTML Membuat dokumen HTML kosong baru : - Pada tampilan windows, pilih menu File > New. Untuk membuka file HTML yang sudah ada : -
CSS Eksternal. Instruktur: Arif Nurwidyantoro
CSS Eksternal Instruktur: Arif Nurwidyantoro Definisi CSS, selain diletakkan dalam file yang sama dengan file HTML, dapat juga diletakkan pada file terpisah. Pernyataan untuk menyambungkan file HTML dengan
LAYER DAN HYPERLINK. B. Kegunaan Layer: 1. Layer
1. Layer A. Dasar Layer Untuk membuat layer, yang harus anda butuhkan adalah menentukan atribut posisi untuk style anda. Posisi tersebut dapat sebagai posisi absolute atau posisi relative Posisi diatas
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
Dasar Dasar TRANFORMASI 2D DI CSS3
Dasar Dasar TRANFORMASI 2D DI CSS3 Oleh: Irvansyah Jumpa Lagi dengan sobat jaco,.. udah gak sabar ne mau share lgi bareng tman2 jaco.. Halaman postingan saya kali ini membahas tentang transform 2D di css.
Objek Bergoyang CSS3
Objek Bergoyang CSS3 Oleh: Mohammad Nur Huda Assallamualaikum... Gak terasa nih udah mulai banyak yang mudik... Di sela-sela waktu masih aja nih saya update tutorial buat temen-temen jagocoding sekalian...
Keuntungan Memisahkan presentation sebuah dokumen dari content document itu sendiri Mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen w
Tentang CSS Adalah standart pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text dan table menjadi lebih ringkas sehingga
Pengenalan Perancangan Web 2017
5. Marquee Marquee merupakan tag non-standard elemen HTML yang menyebabkan suatu teks/gambar bergerak ke atas dan ke bawah, kanan atau kiri secara otomatis. Tulisan berjalan ini dapat digunakan untuk menuliskan
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 4 Cascading Style Sheets Tujuan: Mahasiswa mengenal komponen CSS sebagai pelengkap element HTML dalam membangun website statis. Pustaka:» HTML dan
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
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE
PEMBUATAN BAHAN AJAR KIMIA BERBASIS WEB MENGGUNAKAN MICROSOFT FRONTPAGE Oleh: Asyti Febliza I. Mengenal Microsoft FrontPage Microsoft FrontPage (MS FrontPage) adalah sebuah program untuk membuat, mendesain,
CARA MUDAH BELAJAR HTML,XHTML,
IMZEN SITORUS CARA MUDAH BELAJAR HTML,XHTML, dan CSS 3 (Langkah awal menjadi programmer web, beserta contoh-contoh program) Penerbit nulisbuku CARA MUDAH BELAJAR HTML, XHTML, DAN CSS 3 (Langkah awal menjadi
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
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,
Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan
Sanksi Pelanggaran Pasal 72 Undang-undang Nomor 19 Tahun 2002 Tentang Hak Cipta 1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan sebagaimana dimaksud dalam Pasal 2 Ayat (1) atau
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
Dasar Dasar Transisi Di CSS3
Dasar Dasar Transisi Di CSS3 Oleh: Irvansyah Jumpa lagi ne sama sobat JagoCoding, tutor saya hari ne tentang transisi di CSS3.. Mungkin diantara teman2 pasti ada yang udah tahu tapi masih bingung ataupun
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
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
C. Ms Powerpoint D. Notepad E. Ms Acces
1. Apakah kepanjangan dari HTML? A. Hyper Text Mark Up Language B. Hyper Text Mark Language C. Hight Text Mark Up Language D. Hight Text Mark Language 2. Berikut ini adalah termasuk Software Browser, Kecuali:
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 10 XML - extensible Markup Language Tujuan: Mahasiswa mengenal fungsi XML dan komponen XML sebagai pelengkap element HTML dalam membangun website statis.
Cascading Style Sheet (CSS) Didik Dwi Prasetya
Cascading Style Sheet (CSS) Didik Dwi Prasetya didikdwi@gmail.com CSS vcss à Cascading Style Sheet vstyle à mendefinisikan aturan untuk menampilkan elemen HTML. vdefinisi: Cascading Style Sheets (CSS)
MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)
MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119) Disusun oleh : KARTINI, SKom.,MMSI LABORATORIUM KOMPUTER FAKULTAS ILMU KOMPUTER UNIVERSITAS ESA UNGGUL MODUL PRATIKUM PBW 04B CSS : Layout dan Posisi
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
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML) Oleh: Noor Ifada S1 Teknik Informatika - Unijoyo 1 HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan
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
Latihan 4 Efek Teks Terbakar
Latihan 4 Efek Teks Terbakar Efek teks terbakar adalah sebuah teks yang dibuat tampak meleleh terbakar dan sedang mengeluarkan asap. Efek ini mungkin hampir sama dengan efek teks pada Latihan 3, namun
BAB V DESAIN WEB CSS
BAB V DESAIN WEB CSS A. KOMPETENSI DASAR Memahami konsep dan strategi desain web yang rapi berbasis HTML dan CSS/CSS3. Mampu mengoptimalkan fitur-fitur CSS dalam desain web. Mampu memanfaatkan pendekatan
Interactive Broadcasting
Modul ke: Interactive Broadcasting HTML Fakultas Ilmu Komunikasi Bagus Rizki Novagyatna Program Studi Broadcasting www.mercubuana.ac.id Pengertian HTML Program adalah kata, ekspresi, pernyataan atau kombinasi
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
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
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
Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya
Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar Memahami perkembangan HTML5.
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
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
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
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
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur
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
Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.
Sebagaimana telah dipelajari pada saat pembahasan tentang HTML (pada artikel tutorial belajar HTML), HTML pada dasarnya adalah kumpulan dari tag-tag yang disusun sehingga memiliki bagian-bagian tertentu,
Pemrograman Web Sisi Client Pertemuan 3 PI
Pemrograman Web Sisi Client Pertemuan 3 PI Oleh : Hasanuddin, S.T. Program Studi Teknik Informatika Fakultas Teknologi Industri Universitas Ahmad Dahlan Yogyakarta Topik Pendahuluan HTML CSS JavaScript
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
PENGENALAN MACROMEDIA FLASH 8
Macromedia FLASH (LULY) 1 MODUL-1 PENGENALAN MACROMEDIA FLASH 8 Pada modul pertama ini kita akan melihat secara sekilas area kerja Macromedia Flash Pro 8 yang akan digunakan dalam pembuatan animasi pada
Handout 2 Banner dan Logo
1 I. Pendahuluan Banner dan Logo adalah dua cara untuk mempromosikan website. Banner dapat di-exchange artinya dipertukarkan dengan website lain yang bersedia menempatkan banner website kita. Kali ini
: PRAKTIKUM CSS 3 [Color dan Background] NAMA : KELAS : TANGGAL PRAKTIKUM :
![: PRAKTIKUM CSS 3 [Color dan Background] NAMA : KELAS : TANGGAL PRAKTIKUM :](/thumbs/54/33811089.jpg ": 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
DASAR-DASAR MACROMEDIA FLASH
DASAR-DASAR MACROMEDIA FLASH Flash merupakan program grafis animasi yang diproduksi oleh Macromedia corp, yaitu sebuah vendor software yang bergerak di bidang animais web. Macromedia Flash pertama kali
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik
TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 18. Lebih Dalam Bekerja dengan CSS 1 Bagian
Memanfaatkan CSS Animasi [Part 2]
![Memanfaatkan CSS Animasi [Part 2]](/thumbs/55/36591100.jpg "Memanfaatkan CSS Animasi [Part 2]")
Memanfaatkan CSS Animasi [Part 2] Oleh: Christian Rosandhy Ini adalah tutorial lanjutan dari Part 1,, Kali ini kita akan belajar menggunakan CSS 3 Animation untuk membuat animasi yang jauh lebih dinamis
BAB V IMPLEMENTASI SISTEM
BAB V IMPLEMENTASI SISTEM Pada bab ini merupakan tahapan penerjemahan kebutuhan pembuatan software ke dalam representasi perangkat lunak sebeleum penulisan kode program dimulai sesuai dengan hasil analisis
CSS background mengizinkan kita untuk mengatur warna, setting image, repeat image secara horizontal dan vertical.
CSS Background Background biasa digunakan untuk mempercantik tampilan keseluruhan, biasa di pakai background adalah foto, image dan lainnya. Background berlaku pula untuk penghias halaman web. Dalam desain
{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
LAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO
LAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO OLEH : LUTHFI HDIAYAT (4103131035) http://luthfihidayat.mb.student.pens.ac.id/ TEKNOLOGI MULTIMEDIA BROADCASTING POLITEKNIK ELEKTRONIKA NEGERI SURABAYA 2015 Praktikum
6. HTML & CSS. PTI15010 Pemrograman Web. Agi Putra Kharisma, S.T., M.T. Genap 2014/2015. Desain slide ini dadaptasi dari University of San Fransisco
6. HTML & CSS PTI15010 Pemrograman Web Agi Putra Kharisma, S.T., M.T. Genap 2014/2015 Desain slide ini dadaptasi dari University of San Fransisco HTML, CSS, JavaScript HTML (Struktur Dokumen) CSS (Tampilan
Multiple Style akan meng-cascade kedalam Style Lain
CSS Pendahuluan Apakah CSS? CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen Styles umumnya disimpan dalam Style Sheets Styles ditambahkan pada HTML 4.0 untuk
Pertemuan V. Semester 1
Frames dan iframes ++ Video dan Audio Pertemuan V Pemrograman Web Dasar Semester 1 Frame HTML Frame digunakan untuk menampilkan banyak dokumen html lainnya dalam satu halaman browser pada saat yang sama.
Memahami CSS Selector - Bagian 1
Memahami CSS Selector - Bagian Hendriono Kamis, Agustus 02, 202 (X)HTML, CSS 8 komentar Bismillah. Alhamdulillah. Perkembangan bahasa markup Cascading Style Sheet (CSS) cukuplah pesat dan ini membuat tampilan
Modul 6 Macromedia Flash 8
Laporan Praktikum Modul 6 Macromedia Flash 8 Mata kuliah : CF 1310 Pengantar Teknologi Informasi Disusun oleh : Nama Route Gemilang 5208 100 073 Semester Ganjil 2008/2009 Jurusan Sistem Informasi Fakultas
BAB 6 CSS 6.1. CSS SYNTAX. Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi.
BAB 6 CSS 6.1. CSS SYNTAX Syntax CSS memiliki dua bagian utama yaitu, selector dan deklasi. Selector berupa tag HTML dan pendeklarasian Class dan Id. Selector berfungsi untuk menentukan bagian mana pada
MODUL 5 MACROMEDIA FIREWORKS
MODUL 5 MACROMEDIA FIREWORKS Tujuan : 1. Memahami penggunaan Fireworks dalam mendesign suatu web. 2. Memahami pembuatan tombol dalam Fireworks. 3. Memahami langkah-langkah pembuatan Fireworks dari awal.
Pemrograman Web WEEK 03 HTML LANJUT
1 Pemrograman Web WEEK 03 HTML LANJUT 2 Introduction IMAGE HYPERLINK IMAGE MAP DIV & SPAN META 1 HTML Image 3 Menampilkan gambar pada halaman web Tag: (tidak memiliki tag penutup) align Atribut Value
BAB IV CASCADING STYLE SHEET (CSS)
BAB IV CASCADING STYLE SHEET (CSS) A. KOMPETENSI DASAR Memahami jenis dan struktur dasar dokumen CSS dan CSS3. Mampu memanfaatkan CSS untuk memformat dokumen HTML. Mampu memanfaatkan pendekatan CSS untuk
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur dokumen HTML Contoh HTML
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
SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3
4 BAB IV WEB DESIGN CSS3 41 IDENTITAS Kajian Web Design menggunakan HTML5 dan CSS3 Topik Penggunaan CSS3 untuk Design dan Layout Web Kompetensi Utama 1 Mengetahui penggunaan script HTML5 dan CSS3 2 Penggunaan
Pengenalan HTML dan CSS
Pengenalan HTML dan CSS Pengenalan HTML dan CSS Jubilee Enterprise PENERBIT PT ELEX MEDIA KOMPUTINDO Pengenalan HTML dan CSS Jubilee Enterprise 2016, PT Elex Media Komputindo, Jakarta Hak cipta dilindungi
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
MODUL 1 HTML. (HyperText Mark-Up Language)
MODUL 1 HTML (HyperText Mark-Up Language) Laboratorium STIMIK Komputer PPKIA Pradnya Paramita Malang PERTEMUAN PRAKTIKUM 1 1.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah dasar
Web dan HTML Dasar. Siti Maesyaroh, M.Kom
Web dan HTML Dasar Siti Maesyaroh, M.Kom 1 Pengenalan Word Wide Web What is an Word Wide Web? Protocol Address HTML 2 Pengenalan Word Wide Web Bagaiman Word Wide Web bekerja? Informasi disimpan dalam dokumen
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;
Modul Web Design. Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman
Modul Web Design Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman Materi: Pertemuan ke- Materi 1, 2 & 3. Konsep Dasar Web Design: Perencanaan WebSite Typografi,
P - 5 Bab 4 : HTML (Hypertext Markup Language)
P - 5 Bab 4 : HTML (Hypertext Markup Language) 4.1 Tujuan Mengerti konsep dasar, struktur, gaya penulisan, sound & background sound, hyperlink serta images, table, form & frame HTML. 4.2 Materi 1. Konsep
PRAKTIKUM 3 Pengenalan CSS
Tujuan: - - - PRAKTIKUM 3 Pengenalan CSS Mahasiswa mampu memahami konsep dasar CSS Mahasiswa mampu memahami struktur dasar syntax CSS Mahasiswa mampu memahami penerapan warna pada CSS Dasar Teori CSS merupakan
MATERI II CASCADING STYLE SHEETS (CSS) DASAR
MATERI II CASCADING STYLE SHEETS (CSS) DASAR Tujuan : 1. Memahami tentang konsep CSS 2. Memahami aturan penulisan pada CSS 3. Memahami selector sebagai pengontrol design 4. Memahami pembuatan background
A. Pengantar B. Membuka program Power Point: Programs Catatan
A. Pengantar Power point merupakan salah satu dari program microsoft (MS) office. Program yang lain adalah MS-Word, MS-Exell, MS-Access, dll. Power point adalah paket program yang digunakan untuk membantu