Pengolahan Informasi Berbasis Bahasa Pemrograman Script

Slides:



Advertisements
Presentasi serupa
Cascading Style Sheets (CSS)
Advertisements

Nine: Pengantar HTML The Net Language. 2 Objectives Setelah menyelesaikan bab ini, anda diharapkan dapat: Memahami konstruksi dasar halaman web. Mengerti.
STMIK PPKIA Pradnya Paramita
HTML Basic Heading Paragraf & Text. Paragraf Breaks & Horizontal Rulez Creating and HTML Page Quoted Text Preformated Text Phrase Elements Formating Elements.
Pertemuan 9 Cascading Style Sheet (css)
CSSCSS ADVANCE. CSS Dimension Sifat Dimensi CSS memungkinkan kita untuk mengontrol tinggi dan lebar suatu elemen. 4/7/20152By : Suwondo, S.Kom.
CSS(Cascading style sheet) Rina Dewi Indah Sari, S.Kom
 HTML merupakan bahasa paling standard yang digunakan untuk membuat suatu website  HTML Singkatan dari H yper T ext M arkup L anguage  HTML bukanlah.
HTML - CSS Cascading Style Sheet.
Web and Multimedia based Programming K2133 Pemrograman berbasis Web dan Multimedia 1.
Latihan CSS.
Pemrograman Berbasis Web CSS
PERTEMUAN 6. .classshadow { font-family: color:#333333; text-shadow: 1px 2px 3px blue; } kita juga bisa menambah value lagi misal : text-shadow: 1px 2px.
HTML (Hypertext Markup Language)
FORM Kegunaan Form : memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan. memperoleh informasi pembelian.
CSS (Cascading Style Sheet)
Desain Web dengan Tag HTML
HTML Universitas Muhammadiyah Surakarta Yogiek Indra K.
IRAWATI, S.Kom.,MT. PEMROGRAMAN WEB
Cascading Style Sheet (CSS)
Desain Web 1 Oleh Dita Rizki Amalia.
Modul 3 STMIK IKMI CIREBON Oleh Dita rizki amalia.
Lutfi Budi Ilmawan Univ. Muslim Indonesia
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
X/HTML - CSS - Javascript
Evaluasi Soal UTS.
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
Pemrograman Berbasis Web CSS
PERTEMUAN 2 HTML (Lanjutan).
Pemrograman Berbasis Web
WEB 1 (HTML) STMIK A. Yani.
Pemrograman berbasis web
(Cascading Style Sheet)
Pemrograman Basis Data Berbasis Web
HTML CSS.
Cascading Style Sheets (CSS)
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
Perancangan & Pemrograman Web
CASCADING STYLE SHEETS (CSS)
Firman Wahyudhie Cascading STYLE SHEET.
S1 Teknik Informatika - Unijoyo
Cascading Style Sheet (CSS)
Text Formatting, Link dan Gambar
Komputer aplikasi it-I (html)
Pengolahan Informasi Berbasis Bahasa Pemrograman Script
Komputer aplikasi it-I (html)
Text Formatting, Link dan Gambar
Pemrograman Berbasis Web
Internet dan Web By : Lisda Juliana P..
S1 Teknik Informatika - Unijoyo
( HyperText Markup Language)
Pemrograman Berbasis WEB
CSS.
Internet dan Web PERTEMUAN IV By : Lisda Juliana P.
Pemrograman Basis Data Berbasis Web
Internet dan Web Ecking Mendrofha.
Pemrograman Basis Data Berbasis Web
Internet dan Web PERTEMUAN III.
Triyanna Widiyaningtyas
Pemrograman Web I --CSS--
Dasar HTML Hypertext Markup Language Dasar HTML.
Darmawan satyananda Mathematics department State university of malang
Internet dan Web PERTEMUAN III LISDA JULIANA.
Implementasi CSS Ada 4 cara memasang kode CSS ke dalam halaman situs, yaitu: Inline CSS Embedded (memasang kode ke dalam bagian External.
Pengenalan HTML HTML Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan dokumen web Untuk membuat dokumen web yang bisa.
...Lanjutan Pokok Bahasan Bahasa Style CSS L. Erawan.
STMIK PPKIA Pradnya Paramita Pemrograman berbasis Web
CSS (Cascading Style Sheet)
Web Design CSS.
Pemrograman Basis Data Berbasis Web
Transcript presentasi:

Pengolahan Informasi Berbasis Bahasa Pemrograman Script CSS Visual Model

CSS Visual Model Lines & Boxes Semua Web browser masa kini sudah mengimplementasikan dua hal berikut; CSS Visual Model, dan Layout Content berbasis lines and boxes Konsep inline dan block : Inline  suatu element inline (contoh; <span>), jika berada diantara teks atau elemen lain, maka dia akan inline (tidak menyebabkan line break) Block  suatu element block (contoh; <div>), jika berada diantara teks atau elemen lain, maka akan membentuk block, dan akan menyebabkan line break antara element block tersebut dengan teks atau element lain.

Daftar HTML Tag Level Inline b, big, i, small, tt abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var a, bdo, br, img, map, object, q, script, span, sub, sup button, input, label, select, textarea

Daftar HTML Tag Level Block p h1, h2, h3, h4, h5, h6 ol, ul pre address blockquote dl div fieldset form hr noscript table

CSS Visual Model Lines & Boxes Box Model Setiap element akan menciptakan suatu box

CSS Visual Model Flow and Floats Normal Flow Normal flow merupakan aliran standar dari elemen- elemen dalam suatu document yaitu; Jika lebar browser diperkecil, konten akan flow ke bawah dan ke kiri. Jika lebar browser diperbesar, konten akan flow ke atas dan ke kanan.

CSS Visual Model Flow and Floats Merupakan penggunaan CSS terkait visual layout. Float Digunakan untuk memungkinkan teks atau element lain akan mengalir di sekitar element dengan style float, perhatikan gambar dibawah; <img> dengan style float: left; <img> dengan style float: right;

CSS Visual Model Float Behavior Setting float: float: none|left|right|initial|inherit; Nilai Deskripsi none Element tidak floated. (default) left Element akan float di kiri right Element akan float di kanan initial Mengembalikan nilai ke Default value (tidak berlaku di IE & Opera) inherit Menurunkan/mengikuti nilai dari induk elemen

CSS Visual Model Float Behavior Contoh: <style> . gbrHTML5 { float: left; } . gbrCSS3 { float: right; } </style> <body> <img class=“gbrHTML5" src="img/HTML5.png"> <img class=“gbrCSS3" src="img/css3.png"> </body>

CSS Visual Model Float Behavior Contoh: <style> . gbrHTML5 { float: left; } . gbrCSS3 { float: left; } </style> <body> <img class=“gbrHTML5" src="img/HTML5.png"> <img class=“gbrCSS3" src="img/css3.png"> </body> FYI: Untuk mendapatkan Layout yang dinamis dan web responsive, biasanya float diberi nilai left untuk semua element, agar mengikuti flow dan posisinya auto adjust

CSS Visual Model Float Behavior Contoh: <style> . gbrHTML5 { float: left; } . gbrCSS3 { float: left; } </style> <body> <img class="gbrHTML5" src="img/HTML5.png"> <img class="gbrCSS3" src="img/css3.png"> </body> Note: Perhatikan 3 gambar output di samping. Begitu lebarnya browser dikecilkan, maka element akan flow ke bawah

CSS – Contoh: Membuat HighLight <!DOCTYPE html> <html lang="en"> <head> <title>latihanKelas_3e – Highlight</title> </head> <link rel="stylesheet" href="latihanKelas_3c.css" /> <body> <h1 id="cth1">Membuat HighLight dengan CSS</h1> <p> <span class="highlight">This is a text.</span> This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. This is a text. <span class="highlight">This is a text.</span> </p> </body> </html> latihanKelas_3e.css .highlight { background-color: yellow; font-weight: bold; color: blue; }

CSS – Contoh: Membuat Dropcap <!DOCTYPE html> <html lang="en"> <head> <title>latihanKelas_3e – Highlight</title> </head> <link rel="stylesheet" href="latihanKelas_3c.css" /> <body> <h1 id="cth1">Membuat HighLight dengan CSS</h1> <span class="dropcap">c</span> <span class="normal"> ascading Style Sheet</span>, Salah satu fasilitas yang diberikan untuk pemrograman HTML sehingga pengaturan / disain tampilan web-page menjadi lebih baik. CSS dapat didefinisikan langsung pada tag HTML yang bersangkutan, atau dedefinisikan pada area head atau dibuat pada file terpisah. CSS dapat didefinisikan langsung pada tag HTML yang bersangkutan, atau dedefinisikan pada area head atau dibuat pada file terpisah. </body> </html> latihanKelas_3e.css body { text-align: justify; } .dropcap { font-size: xx-large; font-weight: bolder; color: blue; text-transform: capitalize; float: left; .normal { font-size: medium;

Referensi Augury, et. al, “Cara mudah membuat web dengan penguasaan CSS dan HTML”, Andi Publishing, 2009. Molly E. Holzschlag, “Dzone Refcardz, Core CSS: Part II”, Dzone Inc., 2008. Molly E. Holzschlag, “Dzone Refcardz, Core CSS: Part III”, Dzone Inc., 2008.

That’s All Thank’s