NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami serta dapat melakukan pengaturan-pengaturan border dengan CSS.
|
|
- Veronika Kurniawan
- 7 tahun lalu
- Tontonan:
Transkripsi
1 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 pembatas. Pada umumnya seorang designer web akan membuat sebuah pembatas yang digunakan untuk membatasi beberapa element. Penggunaan border mengijinkan Anda untuk memberi pembatas terhadap beberapa element web seperti seperti text, paragraph, maupun gambar yang Anda tampilkan di halaman web. Berikut ini merupakan syntax penggunaan property border: selector { border: width style color; Property border merupakan property shortcut untuk menetapkan width, style, dan color dari border hanya dengan satu langkah.
2 border-top border-left border-right Border-bottom Contoh : border : 2px solid blue Keterangan : 2px menyatakan ukuran ketebalan bingkai Solid menyatakan bentuk bingkai yang berupa garis utuh Blue menyatakan warna bingkai a) Pengaturan ukuran border (border-width) Property border-width memiliki syntax sebagai berikut: selector { border-width : Value Berikut adalah ukuran yang dapat digunakan pada property border-width: Properties Value Border-width cm px em % Selain value bentuk diatas dapat juga digunakan value dalam bentuk lain, yaitu: thin, medium dan thin, seperti yang ditunjukkan pada gambar berikut ini. b) Pengaturan border width pada tiap sisi Untuk melakukan pengaturan tiap sisi border maka dapat menggunakan property bordertop-width, border-right-width, border-left-width, dan border-bottom-width. Berikut adalah penulisan syntaxnya:
3 selector { border-top-width: value; border-right- width: value; border-down- width: value; border-left- width: value; c) Pengaturan warna border (border-color) Pada saat melakukan perubahan warna border, property yang digunakan adalah property border-color. Value yang digunakan dapat berupa bentuk RGB, nama warna dalam bahasa inggris maupun kode hexa, contohnya: "#123456", "rgb(123,123,123)", "yellow". Berikut adalah penulisan syntax border-color: selector { border-color: value
4 d) Pengaturan warna pada setiap sisi border Properties yang digunakan pada tahap perubahan warna border disesuaikan dengan sisi yang akan diubah, misalnya akan dilakukan pengubahan warna pada sisi bagian kanan, maka properties yang digunakan adalah border-right-color dan begitu juga pada sisi kiri, atas maupun bawah. Berikut adalah penulisan syntax dalam pengaturan warna border: selector { border-top-color: value; border-right-color: value; border-down-color: value; border-left-color: value; Properties Value Keterangan border-top-color border-color Merubah warna border atas border-right-color border-color Merubah warna border kanan border-down-color border-color Merubah warna border bawah border-left-color border-color Merubah warna border kiri e) Pengaturan bentuk border (border-style) Property border-style digunakan untuk menciptakan border dengan bentuk-bentuk yang berbeda, berikut adalah penulisan syntax border-color: selector { border-style: value value value Dari penulisan syntax diatas, property border-style digunakan dalam pembuatan border, sedangkan value adalah nilai yang berkaitan dengan bentuk style yang dikehendaki. Berikut adalah bentuk-bentuk style yang dapat digunakan: Properties border-style Value none hidden dotted dashed solid double groove ridge inset outset Contoh 1 : h1,h2,h3 { border-style : groove;
5 Contoh 2 : # border2.css.tombol { border : grove cyan; width : 200px ; text-align : center ; background-color : blue; color : white-; # border2. html <title>border</title> <link rel = stylesheet type = text/css href = border2.css /> <p class = tombol >Aku seperti tombol </p> f) Pengaturan style border kanan, kiri, atas dan bawah Property border-right-style, border-left-style, border-top-style dan border-bottom-style digunakan untuk pengaturan style pada sisi border kanan, kiri, atas dan bawah. Contoh: h1{ border-right-style: dotted; border-bottom-style: solid; border-left-style: outset; border-top-style: ridge;
6 C. PRAKTIKUM Ketentuan Praktikum: 1. Ketik dokumen halaman web pada Notepad 2. Capture Screen hasil tampilan pada browser. 3. Buat analisa dan kesimpulan dari praktikum yang Anda kerjakan di akhir praktikum. 1. Pengaturan ukuran border (border-width) <title>border Width</title> p{ text-align:center; font-size:14pt; fontstyle:italic; backgroundcolor:orange; p.one{ border-width:6px; border-style:solid; p.two{ border-width:10px; border-style:solid; p.three{ border-width:thin; border-style:dashed; p.four{ border-width:medium; border-style:dashed; p.five{ border-width:thick; border-style:dashed; <p class="one">border width 6px</p> <p class="two">border width 10px</p> <p class="three">border width thin</p> <p class="four">border width medium</p> <p class="five">border width thick</p>
7 2. Pengaturan border width pada tiap sisi <title>pengaturan Border Width</title> p.ubah{ border-top-width:6px; border-right-width:8px; border-bottom-width:20px; border-left-width:15px; border-color:#448866; border-style:dashed; font-size:18px; font-style:italic; width:500px; height:75px; text-align:center; <p class="ubah">menggunakan pengaturan border width pada tiap sisinya</p>
8 3. Pengaturan warna border (border-color) <title>border Color</title> p{ text-align:center; font-size:14pt; font-style:italic; border-width:6px; p.blue{ border-color:#0000ff; border-style:solid; p.red{ border-color:red; border-style:dashed; p.purple{ border-color:purple; border-style:double; <p class="blue">border color blue</p> <p class="red">border color red</p> <p class="purple">border color purple</p>
9 4. Pengaturan warna pada setiap sisi border <title>pengaturan Warna Border Tiap Sisi</title> p.warna{ color:white; background-color:grey; border-style:dashed; border-width:10px; border-top-color:red; border-right-color:black; border-bottom-color:yellow; border-left-color:blue; width:300px; padding:20px <p class="warna">contoh Text yang dikelilingi border style double dengan pengaturan warna tiap sisi bordernya</p>
10 5. Pengaturan bentuk border (border-style) <title> Border Style</title> <div style="border:5px none #08088A; width:300px; padding:20px"> Border none <div style="border:5px solid #08088A; width:300px; padding:20px"> Border Solid <div style="border:5px dashed #08088A; width:300px; padding:20px"> Border dashed <div style="border:5px dotted #08088A; width:300px; padding:20px"> Border dotted <div style="border:5px double #08088A; width:300px; padding:20px"> Border double <div style="border:5px groove #08088A; width:300px; padding:20px"> Border groove <div style="border:5px inset #08088A; width:300px; padding:20px"> Border inset <div style="border:5px outset #08088A; width:300px; padding:20px"> Border outset <div style="border:5px ridge #08088A; width:300px; padding:20px"> Border ridge </div>
11 6. Pengaturan style border kanan, kiri, atas dan bawah <title>pengaturan Border</title> p.ubah{ border-right-style:dotted; border-bottom-style:solid; border-left-style:dashed; border-top-style:double; border-color:green; border-width:7px; font-size:16px; width:500px; height:100px; text-align:center; <p class="ubah">menggunakan pengaturan style border pada tiap sisinya</p> 7. Penggunaan Property Border <title>property Border</title> p.ubah{ border:7px dashed purple; font-size:16px; width:500px; height:100px; text-align:center; <p class="ubah">menggunakan Property Border</p>
12 D. LATIHAN SOAL 1. Jelaskan fungsi tag <div>! 2. Jelaskan maksud syntax css berikut ini! p{ border:7px dashed purple; 3. Jelaskan maksud syntax css berikut ini, kemudian capture tampilannya pada browser! <title>property Border Style</title> #test2{ border-style:dashed dotted dashed dotted; border-color:red; border-width:20px 8px 10px 8px; width:400px; height:75px; background-color:grey; color:white; text-align:center; <p id="test2">test text test text test text test text</p> 4. Bagaimana cara membuat bingkai seperti berikut ini? Klik Saya! Perhatikan bahwa garis pada tepi kiri dan atas berupa abu-abu dan tipis, sedangkan garis pada tepi bawah dan kanan berwarna hitam dan tebal. E. KESIMPULAN
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 terperinciBAB 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
Lebih terperinciAuthor : 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
Lebih terperinciCSS 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 terperinciCascading 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 terperinciWEB 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 terperinciDASAR-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
Lebih terperinciCSS 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
Lebih terperinciAPLIKASI 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 terperinciA. 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: 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 terperinciCSS 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
Lebih terperinciCSS 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 terperinciA. 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 terperinciMODUL 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
Lebih terperinciPercobaan 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
Lebih terperinciCascading 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 terperinciCSS 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:
Lebih terperinci[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.
[ MODUL 4 ] PEMROGRAMAN WEB [ CSS ] Modul Ini Disusun Untuk Membantu Proses Pembelajaran Bagi Mahasiswa DOSEN : CEPI RAHMAT HIDAYAT, S.KOM STMIK TASIKMALAYA SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
Lebih terperinciLAYER 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
Lebih terperinciKELAS 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 terperinciMetode 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 terperinciCascading 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 terperinciPemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml
PRAKTIKUM 3 CSS TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml MATERI Sintaks CSS, cara memakai CSS, jenis-jenis selektor, satuan ukuran, satuan warna, properti
Lebih terperinciMODUL 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
Lebih terperinciCascading 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 terperinciMODUL 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 terperinciTeks 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
Lebih terperinci{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 terperinciXHTML 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 terperinciIankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com
Lebih terperinciPRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL PRAKTIKUM :
PRAKTIKUM : PRAKTIKUM CSS 2 NAMA : KELAS : TANGGAL PRAKTIKUM : A. TUJUAN 1. Siswa dapat mengenal, memahami penggunaan groupping, class dan id pada CSS. 2. Siswa dapat mengimplementasikan groupping, class
Lebih terperinciSecara 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,
Lebih terperinciCSS 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 terperinciCSS (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 terperinciMemodifikasi Tampilan Gambar (Image) dengan CSS
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
Lebih terperinciMATERI 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
Lebih terperinciPemrograman Web. Cascading Style Sheets. Created by : Rifqi Sambas Khairurrohman
Pemrograman Web Cascading Style Sheets Created by : Rifqi Sambas Khairurrohman Home Page Anatomi CSS Macam Selector Cara Kerja Anatomi CSS CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector,
Lebih terperinciKeuntungan 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
Lebih terperinciModul 3 CSS CASCADE STYLE SHEET
Modul 3 CSS CASCADE STYLE SHEET Fungsi: Mengatur style elemen yang ada di halaman web, mulai dari memformat text dan format layout. Mengatur kekonsistenan style pada elemen tertentu Keuntungan CSS: Ukuran
Lebih terperinciMasih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat
Contoh ke dua layout menggunakan CSS Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat HEADER ISI NAVIGASI
Lebih terperinciMODUL 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 terperinciCSS. 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 terperinciCSS 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
Lebih terperinciMODUL 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 terperinciPenulis :
Daftar Isi Dasar-Dasar HTML Cara Membuka Notepad dan Structure Dasar HTML 1 Heading dan Cara Menyimpan dengan Ekstensi HTML 4 Basic HTML Code 6 Style 11 Formating 18 Dasar Dasar HTML Cara Membuka Notepad
Lebih terperinciCSS (Cascading Style Sheets)
KAJIAN 2 CSS (Cascading Style Sheets) Modul 5 Pengantar CSS Modul 6 Layout dan Display Modul 7 Font, Text, Color, Background Modul 8 Layer dan Hyperlink Modul 9 Layout Website Sederhana 40 KAJIAN 2 CSS
Lebih terperinciCara Value keterangan
Pertemuan 11 Pengaturan property CSS Style Sheet adalah rangkaian suatu perintah yang disebut juga dengan statement. Setiap statement mempunyai 2 (dua) buah komponen utama yaitu, selector dan deklarator.
Lebih terperinciNilainya berupa nama font yang diinginkan dan. Memasukkan nilai dari beberapa font sekaligus dengan pemisah tanda koma (,):
A. Font 1. Font-Family Nilainya berupa nama font yang diinginkan dan generic font Memasukkan nilai dari beberapa font sekaligus dengan pemisah tanda koma (,): Nilai Nama font Generic font Contoh Font-family:verdana
Lebih terperinciMODUL I PENGENALAN HTML. a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2.
MODUL I PENGENALAN HTML A. MAKSUD DAN TUJUAN 1. Maksud a. Mengenalkan kepada mahasiswa mengenai pemrograman WEB dengan menggunakan HTML b. Mengenalkan kode-kode HTML 2. Tujuan a. Mahasiswa dapat membuat
Lebih terperinciLAPORAN 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 terperinciCSS 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 terperinciCSS. 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 terperinciTampilan di website (Tidak Tampil karena hanya memberi informasi bagi pembuat )
MEMBUAT WEBSITE DENGAN HTML Dibuat oleh : Dea Arri Rajasa, SE., S.Kom HTML (Hyper Text Markup Language) STRUKTUR HTML Judul Website ditulis disini Kode kode HTML
Lebih terperinciModul 10 DreamWeaver MX Suendri, S.Kom
Modul 10 DreamWeaver MX 2004 Suendri, S.Kom -- Untuk Indonesia Tanah Air Tercinta -- Suendri, S.Kom 2 Lisensi Dokumen Seluruh isi dokumen ini dapat digunakan, dimodifikasi dan disebarluaskan secara luas
Lebih terperinciPRAKTIKUM 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
Lebih terperinciStandar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML
Pengenalan CSS Standar Kompetensi Memahami Pengertian Cascading Style Sheets (CSS), Struktur CSS, Cara kerja CSS, menempatkan CSS dalam HTML Indikator Hasil Belajar Dapat menjelaskan pengertian CSS. Dapat
Lebih terperinciDaftar isi. West PoinT edu
Daftar isi 1.font-weight...2 2.Font-style...2 3.Font-family...2 4.font-size...2 5.color...3 6.text-align...3 7.vertical-align...3 8.text-decoration...4 9.text-transform...4 10.text-shadow...4 11.word-spacing...5
Lebih terperinciTUTORIAL 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
Lebih terperinciBAB 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
Lebih terperinciPerancangan Web. Perancangan Web. Oleh : Moh. Sulhan. By : MOH.SULHAN
Oleh : Moh. Sulhan 1 Apa itu CSS? - Merupakan bahasa style sheet yang digunakan untuk mengatur tampilan dokumen - Sebuah metode yang digunakan untuk mempersingkat penulisan tag HTML, seperti font, color,
Lebih terperinciCSS. 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 terperinci1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.
A SOAL PILIHAN GANDA 1 Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah A ikan Badut (Clownfish) B ikan Badut (Clownfish) C
Lebih terperinciCascading Style Sheet
Cascading Style Sheet Manfaat: Memperindah tampilan halaman website. Mempermudah mengubah secara keseluruhan warna dan tampilan. Memformat ulang situs Anda secara cepat. Menghemat kode dan waktu dalam
Lebih terperinciSImple Pop-Up Modal dengan CSS3 dan Jquery
SImple Pop-Up Modal dengan CSS3 dan Jquery Oleh: d-newbie Assalamualaikum wr.wb. bertemu lagi dengan saya, kali ini saya akan menulis tutorial tentang pop-up, apa itu pop-up? Kalo menurut wikipedia pop-up
Lebih terperinciDAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya...
DAFTAR ISI COVER DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN... 3 1.1 Latar Belakang... 3 1.2 Rumusan Masalah... 3 1.3 Tujuannya... 3 BAB II PEMBAHASAN... 4 2.1 Pengertian CSS... 4 2.2 Format
Lebih terperinci6. 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
Lebih terperinciBAB 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
Lebih terperinciMODUL 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
Lebih terperinci/* 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 terperinciPROPERTIES. Pemrograman Web Teknik Informatika Fakultas Teknologi Industri
PROPERTIES 12 Font Syntax: font: Properti Font Possible Values: [ ]? [ / ]? Contoh: P { font: italic bold 12pt/14pt
Lebih terperinciPerancangan & Pemrograman Web
Perancangan & Pemrograman Web Week2. Cascading Style Sheet Oleh: Chaerul Anwar, MTI CSS Cascading Style Sheets (CSS) adalah merupakan aturan untuk mengendalikan beberapa komponen dalam sebuah web sehingga
Lebih terperinciMODUL 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 terperinciPengenalan 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
Lebih terperinciCSS 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 terperinciCascading 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)
Lebih terperinciCSS (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 terperinciPemrograman 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
Lebih terperinciMATERI II CASCADING STYLE SHEETS (CSS) LANJUT
MATERI II CASCADING STYLE SHEETS (CSS) LANJUT Tujuan : 1. Memformat text pada web 2. Memahami pengaturan bentuk font 3. Membuat pengaturan tabel dan pewarnaannya 4. Membuat hyperlink dan tombol yang menarik
Lebih terperinciAnalisa 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 terperinciCSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS
PERTEMUAN 4 CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS Singkatan dari Cascading Style Sheet Merupakan suatu cara untuk memformat atau membuat layout halaman web menjadi
Lebih terperinciBAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Lebih terperinciContoh Syntax: Contoh di atas menunjukkan. S e l e c t o r : h 1. P r o p e r t y : c o l o r. V a l u e : r e d. (red).
Apa Itu CSS? PENGENALAN CSS CSS adalah singkatan dari Cascading Style Sheets. Kalau baca di kamus, cascading itu artinya air terjun. Tapi dalam hal ini, yang di maksud adalah, aliran dari suatu kode ke
Lebih terperinciLAPORAN 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
Lebih terperinciPENGGUNAAN SINGKATAN
PENGGUNAAN SINGKATAN Adakalanya kita hanya mencantumkan singkatan dari suatu istilah dalam suatu dokumen. Misalnya, WWW untuk menyingkat World Wide Web. Dengan menggunakan tag , Anda
Lebih terperinciPemrograman 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
Lebih terperinciPercobaan 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 terperinciBAB 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 terperinciPEMROGRAMAN 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 terperinciCSS (Cascading Style Sheet)
1. CSS CSS (Cascading Style Sheet) adalah sebuah cara untuk memisahkan isi dengan layout dalam halaman-halaman web yang dibuat. CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color,
Lebih terperinciHTML (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
Lebih terperinciMateri. I. Pengenalan HTML II. Basic Tag HTML III. Table IV. Image
Pengenalan HTML Materi I. Pengenalan HTML II. Basic Tag HTML III. Table IV. Image I. Pengenalan HTML WWW HTML Browser dan Editor I. PENGENALAN HTML World Wide Web Internet merupakan jaringan global yang
Lebih terperinciCSS (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 terperinciMateri 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.
Lebih terperinciMultiple 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
Lebih terperinciPemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-5 (CSS) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan CSS? Contoh sederhana Selector Mekanisme mengaplikasikan
Lebih terperinciKomunikasi 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
Lebih terperinciTutorial 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 terperinciKONSEP DASAR HTML. HTML ( HyperText Mark up Language )
KONSEP DASAR HTML HTML ( HyperText Mark up Language ) hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskahnaskah lainnya markup menunjukkan bahwa pada file HTML berisi
Lebih terperinciMembuat Layout Web Mengunakan Table
Page 1 INFO : ILMUKOMPUTER.ID.AI By PRASETYO UTOMO Web : http://www.prasetyo771.wordpress.com Facebook : facebook.com/tyo777 No Hp : 08982069172 Email : prasetyoutomo771@gmail.com Page 2 1. Pengenalan
Lebih terperinci