LAPORAN PEMBUATAN WEBSITE DEVELOPER

Ukuran: px
Mulai penontonan dengan halaman:

Download "LAPORAN PEMBUATAN WEBSITE DEVELOPER"

Transkripsi

1 LAPORAN PEMBUATAN WEBSITE DEVELOPER 1. HOMEPAGE (HOME) HTML: <html> <head> <title> TIK Web Developer</title> <link rel="stylesheet" href="index.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body background="red_pattern-t2.jpg"> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="menu"><br> <ul class="navbar"> <li><a href="kontak.html">kontak</a></li> <li><a href="paketweb.html">pesan WEB</a></li> <li><a href="galeri.html">video TUTORIAL CSS</a></li> </ul> <div id="content"> <h2> Selamat Datang di TIK Web Developer</h2> <p> TIK Web Developer adalah tim pengembang web berbasis teknologi dari Universitas Brawijaya, Malang Indonesia. Kata "TIK" merupakan makna ambigu singkatan dari Teknologi Informasi dan Komputer.</p> <p>kami menyediakan layanan <strong>web design</strong>, <strong>web development</strong>, <strong>hosting</strong>, dan <strong>registrasi domain</strong> untuk website Anda. Tim kami akan membantu mengembangkan web yang Anda inginkan, sampai web tersebut Online dan dapat diakses oleh pengunjung.</p> Kami memberi jaminan pengerjaan website Anda tepat waktu. Motivasi kami adalah membuat website yang simple, elegan, powerful, reliable, berpotensi memiliki banyak pengunjung, dan sesuai dengan keinginan dan kebutuhan Anda.</p> Salam. <strong>tik Web Developer</strong> </p>

2 </p> <p>(tugas Desain Web Pendidikan Vokasi TIK Universitas Brawijaya tahun 2014)</p> <p>(muhammad Rifqy Setyanto )</p> <div id="kolom3"> <div id="footer"><marquee> copyright 2013 &copy: TIK Web Developer</marquee> </body> </html> CSS: body{ font : 70%/1.4em verdana, san-serif; color : #00F background : #ccc; a: link, a:visited, a:active{ color: #00F a:hover{ text-decoration: none; #wrap{ width:760px; margin: 0 auto; #main{ background : #fff; margin: 0; overflow:hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline;

3 #head.navbar li a{ padding: 0 10px; font-weight: bold; font-size: 11px; color:#ccc; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ float:left; width:550px; padding:0 20px 20px 20px; background-position: 98.5% 0; #menu{ width:150px; float:left; #footer{ clean: both; texxt-align:right; background:#ddd; padding : 10px; font-size: 8px; color: #333; SCREENSHOT:

4

5 2. HALAMAN 2 (PAKET WEB) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="paketweb.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body background="red_pattern-t2.jpg"> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="content"> <h2> Paket Web </h2> <div id="content2"> <h2> Paket Pembuatan/Pengembangan Website</h2> <p> Dalam proses desain dan pengembangan website langkah pertama harus dilakukan adalah menentukan kebutuhan karena tujuan pengembangan website bisa berbeda-beda seperti untuk profil perusahaan, e-commerce atau aplikasi-aplikasi berbasis web. Anda bisa menuliskan daftar kebutuhan berikut dengan fitur-fitur yang dinginkan. Setelah menentukan kebutuhan selanjutnya kami memberikan pilihan yang mudah untuk mewujudkan website yang Anda inginkan, kami menempatkan kreativitas, orisinalitas dan keahlian untuk mengembangkan website dengan engine CMS yang berbasis WordPress atau Magneto (e-commerce). Kami memberikan layanan pembuatan Website yang mudah untuk Anda! </p> <p><img src="proses_pembuatan_website.jpg" height="250" width="500"></p> <p> <strong>analisa kebutuhan</strong>, Tulis kebutuhan Anda dan fitur apa yang Anda butuhkan dan diskusikan dengan kami.</p> <strong>pemilihan Template dan Domain</strong>, Anda bisa memilih ratusan template website premium dari situs template market place rekanan kami seperti themeforest.net, templatemonster.com, plazathemes.com dan tentukan domain yang Anda inginkan seperti contoh.com, contoh.org, contoh.co.id.</p> <strong>pengembangan</strong>, Proses desain dan penyesuaian website sesuai dengan keingian Anda.</p> <strong>bug Fixing</strong>, Tidak ada yang sempurna disinial proses dimana testing keseluruhan fitur dilakukan jika masih ditemukan error maka kami akan memperbaikinya.</p> <strong>go Live</strong>, publikasikan situs Anda kepada dunia.</p>

6 <strong>kami memonitor website</strong> Anda untuk memastikan layanan Anda tidak memiliki gangguan dan kami akan memberitahukan Anda jika website butuh dioptimasi agar layanan bisa menjadi lebih baik.</p> Kami ingin membuat proses desain dan pengembangan website profesional yang mudah dan tidak menyulitkan biarkan kami membuat website impian Anda yang akan bekerja untuk Anda dan kami memiliki paket pengembangan website yang mencakup banyak hal! Anda bisa memilih paket kami sesuai dengan kebutuhan.</p> <p><img src="untitled.png"</p> <div id="footer"><marquee> copyright 2013 &copy: TIK Web Developer</marquee> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; background-image:url(red_pattern-t2.jpg) a:link, a:visited, a:active{ color: #333; text-decoration:none; a:hover{ text-decoration:none; #wrap{ #main{ width:760px; margin:0px auto; background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%;

7 height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color:#fff; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ width:710px; padding: 30px 20px 20px 20px; background-position: 98.5% 0; #content2{ text-align:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333;

8 SCREENSHOT:

9 3. HALAMAN 3 (PORTOFOLIO) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="portofolio.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="content"> <h2> Portofolio</h2> <div id="content2"> <p> Beberapa Contoh Website Internet yang telah memanfaatkan jasa kami</p> <p><img src="untitled1.png"</p> <div id="footer"><marquee> copyright 2013 &copy: TIK Web Developer</marquee> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; background-image:url(red_pattern-t2.jpg) a:link, a:visited, a:active{ color: #333; text-decoration:none; a:hover{ text-decoration:none;

10 #wrap{ #main{ width:760px; margin:0px auto; background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color:#fff; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ width:710px; padding: 30px 20px 20px 20px; background-position: 98.5% 0;

11 #content2{ text-align:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333; SCREENSHOT:

12 4.HALAMAN 4 (KONTAK) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="kontak.css" type="text/css"> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li> </ul> <h1 class="title"> TIK WEB DEVELOPER</h1> <div id="content"> <h2> Kontak</h2> <div id="content2"> <p>(0341) </p> <p> </p> <p>tik Vokasi Universitas Brawijaya</p> <p>jl. Veteran</p> <div id="footer"><marquee> copyright 2013 &copy: TIK Web Developer</marquee> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; background-image:url(red_pattern-t2.jpg) a:link, a:visited, a:active{ color: #333; text-decoration:none;

13 a:hover{ text-decoration:none; #wrap{ #main{ width:760px; margin:0px auto; background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color:#fff; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #content{ width:710px; padding: 30px 20px 20px 20px;

14 background-position: 98.5% 0; #content2{ text-align:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333; SCREENSHOT:

15 5.HALAMAN 5 (GALERI) HTML: <html> <head> <title>tik Web Developer</title> <link rel="stylesheet" href="galeri.css" type="text/css"> <script src="scripts/swfobject_modified.js" type="text/javascript"></script> <link href="favicon.ico" rel='shortcut ICON'/> </head> <body> <div id="wrap"> <div id="main"> <div id="head"> <ul class="navbar"> <li><a href="index.html">home</a></li> <li><a href="paketweb.html">paket WEB</a></li> <li><a href="portofolio.html">portofolio</a></li> <li><a href="kontak.html">kontak</a></li> <li><a href="galeri.html">galeri</a></li></ul> <h1 class="title">tik Web Developer</h1> <div id="flash"> <h2>capture</h2> <p><img src="721b66e08a1607bf6e064028f jpg" height="480" width="230"></p> <p><img src="css-design-gallery-screenshot.jpg" height="450" width="230"></p> <div id="foto"> <h2>foto</h2> <p><img src="1.jpg" height="400" width="300"></p> <p><img src="browser11.jpg" height="405" width="300"></p> <p><img src="3.jpg" height="400" width="300"></p> <div id="video"> <h2>video</h2> <P> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " width="230" height="230" id="flvplayer"> <param name="movie" value="flvplayer_progressive.swf" /> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video1&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don t want users to see the prompt. -->

16 <param name="expressinstall" value="scripts/expressinstall.swf"> <!-- Next object tag is for non-ie browsers. So hide it from IE using IECC. --> <!--[if!ie]>--> <object type="application/x-shockwave-flash" data="flvplayer_progressive.swf" width="230" height="230"> <!--<![endif]--> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video1&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <param name="expressinstall" value="scripts/expressinstall.swf"> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href=" src=" alt="get Adobe Flash player" /></a></p> <!--[if!ie]>--> </object> <!--<![endif]--> </object></p> <p> <object classid="clsid:d27cdb6e-ae6d-11cf-96b " width="230" height="230" id="flvplayer1"> <param name="movie" value="flvplayer_progressive.swf" /> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt"> <param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video2&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don t want users to see the prompt. --> <param name="expressinstall" value="scripts/expressinstall.swf"> <!-- Next object tag is for non-ie browsers. So hide it from IE using IECC. --> <!--[if!ie]>--> <object type="application/x-shockwave-flash" data="flvplayer_progressive.swf" width="230" height="230"> <!--<![endif]--> <param name="quality" value="high"> <param name="wmode" value="opaque"> <param name="scale" value="noscale"> <param name="salign" value="lt">

17 <param name="flashvars" value="&mm_componentversion=1&skinname=clear_skin_1&streamname=video2&a mp;autoplay=false&autorewind=false" /> <param name="swfversion" value="8,0,0,0"> <param name="expressinstall" value="scripts/expressinstall.swf"> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href=" src=" alt="get Adobe Flash player" /></a></p> <!--[if!ie]>--> </object> <!--<![endif]--> </object></p> <div id="footer"><marquee> copyright 2013 &copy: TIK Web Developer</marquee> <script type="text/javascript"> <!-- swfobject.registerobject("flvplayer"); swfobject.registerobject("flvplayer1"); //--> </script> </body> </html> CSS: body{ font:70%/1.4em Verdana, Geneva, sans-serif; color:#333; background:#ccc; a:link, a:visited, a:active{ color:#333; text-decoration:none; a:hover{ text-decoration:none; #wrap{ width:760px; margin:0px auto;

18 #main{ background:#fff; overflow: hidden; #head{ padding: 10px 5px 17px 5px; background: url("banner.jpg") no-repeat; background-position: 50% 100%; height: 140px; #head.navbar{ padding:0; #head.navbar li{ display:inline; #head.navbar li a{ padding:0px 10px; font-weight:bold; font-size:11px; color: #FFF; #head h1.title{ color:#b22222; font-size:30px; margin:-70; padding: 125px 10px 0 0; #foto{ float:left; width:300px; #flash{ width:230px; float:left;

19 #video{ width:230px; float:left; #footer{ clear:both; text-align:right; background: #ddd; padding:10px; font-size:8px; color:#333; SCREENSHOT:

KAJIAN 3 Web Responsive

KAJIAN 3 Web Responsive KAJIAN 3 Web Responsive Modul 10 Pengantar Web Responsive Modul 11 Perancangan Web Responsive 73 KAJIAN 3 Web Responsive MODUL 10 Pengantar Web Responsive 10.1. TUJUAN Mengetahui dan memahami dasar perancangan

Lebih terperinci

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA

KARTU BIMBINGAN TUGAS AKHIR MAHASISWA DEPARTEMEN PENDIDIKAN NASIONAL UNIVERSITAS SUMATERA UTARA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM (FMIPA) JL. BIOTEKNOLOGI NO. 1 KAMPUS USU Telp. (061) 82144290 MEDAN 20155 KARTU BIMBINGAN TUGAS

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

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

Membuat Themes Wordpress sendiri - Part 1

Membuat Themes Wordpress sendiri - Part 1 Membuat Themes Wordpress sendiri - Part 1 Oleh: asep saepulloh Halo sahabat jaco. Kali ini saya akan membahas bagaimana caranya membuat themes sendiri di CMS Wordpress. Terkadang sahabat jaco muak dengan

Lebih terperinci

Page 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma

Page 1 of 8 Tutorial Font Awesome UTS Stmik El Rahma Page 1 of 8 Tutorial Font Awesome Nama : Faqum Alf a Dwiyanto NIM : 12141368 Prodi : TI / I Buat tutorial cara penggunaan suatu framework CSS yang diimplementasikan pada layout semantik html. Tulislah

Lebih terperinci

CSS Cascading Style Sheet

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:

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

Cara Membuat website dengan Dreamweaver

Cara Membuat website dengan Dreamweaver Cara Membuat website dengan Dreamweaver Pajrin Wurika Sahara [email protected] Abstrak Dreamweaver adalah software aplikasi desain web visual yang biasa dikenal dengan istilah WYSIWYG What You See

Lebih terperinci

Masih tentang bagaimana membuat layout dengan CSS, kita lanjutkan untuk membuat layout yang lain. Berikut ini adalah desain layout yang akan kita buat

Masih 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 terperinci

Membuat Layout Header Diam di Tempat (Fix Header)

Membuat Layout Header Diam di Tempat (Fix Header) Membuat Layout Header Diam di Tempat (Fix Header) Oleh: Christian Rosandhy Fix Header / Header Diam di Tempat adalah salah satu tren layout yang cukup populer (liat aja header Facebook / Twitter). Layout

Lebih terperinci

MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5

MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 MEMBUAT WEBSITE SEDERHANA DENGAN HTML 5 NELI WIDI ASTUTI [email protected] Abstrak Pada kesempatan ini saya akan mencoba menjelaskan tentang membuat website sederhana dengan HTML 5 dan CSS 3,

Lebih terperinci

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 TUTORIAL HTML CSS Langkah Tepat menjadi Web Designer Handal, menguasai HTML & CSS, jalan membuat halaman website cantik dan menarik www.ilmuwebsite.com Bagian 19. Membuat Halaman Website Minimalis 1 Bagian

Lebih terperinci

BAB V DESAIN WEB CSS

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

Lebih terperinci

Design Web Dengan 2 Kolom

Design Web Dengan 2 Kolom Design Web Dengan 2 Kolom Muh Hasan Tanjung [email protected] Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan secara bebas untuk tujuan bukan komersial

Lebih terperinci

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html :

LEMBAR KERJA PRAKTIKUM. - JavaScript Alert yang ditampilkan browser saat membuka halaman home/index.html : LEMBAR KERJA PRAKTIKUM Nim : 13-1401-164 Hari / Tgl TTD Asisten Nama Kelas : Muh. Idrus : DK-13 Mata kuliah : Pemrograman Web I Materi : JavaScript - JavaScript Alert yang ditampilkan browser saat membuka

Lebih terperinci

CSS Eksternal. Instruktur: Arif Nurwidyantoro

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

Lebih terperinci

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 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 terperinci

Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS

Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Cara Memasukan Font Baru Ke Dalam Web Menggunakan CSS Oleh: Rahmat Menghias blog/web boleh saja tetapi tentunya juga harus memperhatikan kenyamanan visitor yang akan berkunjung ke web anda. Oleh sebab

Lebih terperinci

Triswansyah Yuliano

Triswansyah Yuliano Mendesain Menu dengan CSS Triswansyah Yuliano [email protected] http://triswan.wordpress.com Lisensi Dokumen: Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan disebarkan

Lebih terperinci

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna

Langkah Cara Membuat Form Login Menggunakan PHP dan MySQL Langkah 1: Membuat Tabel MySQL User/Pengguna Dalam tutorial cara membuat form login dengan PHP dan MySQL, kita akan belajar membuat halaman login untuk website dengan menggunakan PHP Session. Tutorial ini merupakan tutorial tingkat dasar, sederhana

Lebih terperinci

Teks dan Background SERIF SANS-SERIF MONOSPACE

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

Lebih terperinci

MODUL PRATIKUM 04B PEMROGRAMAN BERBASIS WEB (CCP119)

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

Lebih terperinci

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 Materi 9 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya [email protected] Nama Mahasiswa NIM Kelas Kompetensi Dasar Memahami perkembangan HTML5.

Lebih terperinci

Yayan Mulyana

Yayan Mulyana Yayan Mulyana CSS merupakan materi yang WAJIB kita kuasai sebagai web Designer, karena dengan CSS kita bisa membangun sebuah website dengan rancangan desain yang efektif dan fleksibel

Lebih terperinci

DAFTAR ISI DAFTAR ISI... 1 KATA PENGATAR... 2 BAB I PENDAHULUAN Latar Belakang Rumusan Masalah Tujuannya...

DAFTAR 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 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

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. 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 terperinci

Perancangan Web. Perancangan Web. Oleh : Moh. Sulhan. By : MOH.SULHAN

Perancangan 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 terperinci

LAYER DAN HYPERLINK. B. Kegunaan Layer: 1. Layer

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

Lebih terperinci

BAB IV CASCADING STYLE SHEET (CSS)

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

Lebih terperinci

BAB V IMPLEMENTASI SISTEM

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

Lebih terperinci

PEMBUATAN WEBSITE MENJUAL PERLENGKAPAN FUTSAL

PEMBUATAN WEBSITE MENJUAL PERLENGKAPAN FUTSAL PEMBUATAN WEBSITE MENJUAL PERLENGKAPAN FUTSAL Nama : Yudhi Prasongko NPM : 58410729 Jurusan : Teknik Informatika Pembimbing : Sularno, SKom, MM LATAR BELAKANG 1. Informasi mengenai produk perlengkapan

Lebih terperinci

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL

TUTORIAL APLIKASI WEB Dengan PHP dan MySQL TUTORIAL APLIKASI WEB Dengan PHP dan MySQL Tutorial Aplikasi Web Dengan PHP dan MySQL A. DASAR TEORI PHP merpakan bahasa pemrograman yang sangat popular dalam pengembangan website dewasa ini, pada dasarnya,

Lebih terperinci

Author : Minarni, S.Kom.,MM

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

Lebih terperinci

CSS Cascading Style Sheet

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

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 [email protected] http://multigraphica.com Lisensi Dokumen: Copyright 2011-2015 IlmuKomputer.Com Seluruh dokumen di IlmuKomputer.Com

Lebih terperinci

Membuat Layout Footer Menempel ke Bawah

Membuat Layout Footer Menempel ke Bawah Membuat Layout Footer Menempel ke Bawah Oleh: Christian Rosandhy Kali ini saya mau share lagi salah satu layout wajib buat website, yaitu layout footer menempel kebawah. Di tutorial kali ini kita akan

Lebih terperinci

Membuat Duplikasi Form dengan Jquery (Dynamic Form)

Membuat Duplikasi Form dengan Jquery (Dynamic Form) Membuat Duplikasi Form dengan Jquery (Dynamic Form) Oleh: Dimas Agung Noviyanto Membuat dynamic field mungkin bukan hal baru bagi seorang web programmer, field inputan yang dapat ditambah maupun di hapus

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 Responsive Layout dengan CSS Media Query

Membuat Responsive Layout dengan CSS Media Query Membuat Responsive Layout dengan CSS Media Query Oleh: Christian Rosandhy Di tutorial kali ini kita akan belajar membuat layout CSS Responsive dengan bantuan CSS Media Query, supaya website yang kita buat

Lebih terperinci

Nama : Dwi Untari. Nim : A TUGAS SEMESTERAN 1. HOME 2. MATERI

Nama : Dwi Untari. Nim : A TUGAS SEMESTERAN 1. HOME 2. MATERI Nama : Dwi Untari Nim : A410090202 TUGAS SEMESTERAN 1. HOME 2. MATERI 3. SILABUS DAN RPP 4. GALERY 5. LATIHAN SOAL 6. BERITA 7. LINK SKRIP 1. Membuat frame

Lebih terperinci

How to Create Simple Web (2) - Slice

How to Create Simple Web (2) - Slice How to Create Simple Web (2) - Slice Oleh: Isnu Arief Darmawan Senang sekali, bisa berjumpa lagi dengan Anda :D #masih-presenter dengan Saya Om' Kenu. Sebelumnya, kita sudah membuat template yang sudah

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. [ 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 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

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 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 terperinci

TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER

TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER 1 TUTORIAL WEBDESIGN HTML & CSS DENGAN DREAMWEAVER Membuat website statis dengan menggunakan Dreamweaver tools sebagai editor dengan membuat dokumen XHTML dan CSS sebagai style library external. Rencana

Lebih terperinci

Pemrograman Basis Data Berbasis Web

Pemrograman Basis Data Berbasis Web Pemrograman Basis Data Berbasis Web Pertemuan Ke-5 (CSS) Noor Ifada [email protected] S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan CSS? Contoh sederhana Selector Mekanisme mengaplikasikan

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? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS

CSS? 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 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

Pembuatan Database PT. Fanitra Indotama. CREATE DATABASE fanitra; USE fanitra; Table structure for table 'guestbook'

Pembuatan Database PT. Fanitra Indotama. CREATE DATABASE fanitra; USE fanitra; Table structure for table 'guestbook' Pembuatan Database PT. Fanitra Indotama CREATE DATABASE fanitra; USE fanitra; Table structure for table 'guestbook' CREATE TABLE guestbook ( no int(10) auto_increment PRIMARY KEY, nama char(20), email

Lebih terperinci

TUTORIAL RUBY ON RAILS

TUTORIAL RUBY ON RAILS TUTORIAL RUBY ON RAILS TEKNIK INFORMATIKA-UNIV.NASIONAL Oleh: Slamet nurhadi 083112706450100 UNIVERSITAS NASIONAL DAFTAR ISI: 1. MEMBUAT PROYEK BARU DENGAN SETINGAN DATABASE MySQL 2. MEMBUAT HALAMAN WEB

Lebih terperinci

Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS

Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Tutorial Membuat Layout Website Sederhana dengan HTML dan CSS Oleh: I Wayan Dharmana Halo kawan, apa kabar? Semoga di awal bulan Ramadhan ini kawan pembaca tetap semangat untuk mencari ilmu. Nah, pada

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

Memanfaatkan CSS Animasi [Part 2]

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

Lebih terperinci

C. Ms Powerpoint D. Notepad E. Ms Acces

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:

Lebih terperinci

MODUL PRATIKUM 04A PEMROGRAMAN BERBASIS WEB (CCP119)

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

Lebih terperinci

SMH2D3 Web Programming. 4 BAB IV WEB DESIGN CSS3. H a l IDENTITAS. Kajian Web Design menggunakan HTML5 dan CSS3

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

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

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

IV. HASIL DAN PEMBAHASAN

IV. HASIL DAN PEMBAHASAN IV. HASIL DAN PEMBAHASAN A. TAHAP INVESTIGASI SISTEM Energi terbarukan adalah sumber energi yang dihasilkan dari sumber daya energi yang secara alamiah tidak akan habis dan dapat berkelanjutan jika dikelola

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

Pemrograman Web PRAKTIKUM 3 CSS. TUJUAN BELAJAR Mahasiswa dapat menggunakan css untuk mengatur gaya tampilan elemenhtml

Pemrograman 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 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

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

DASAR-DASAR CSS DASAR-DASAR CSS By: Rohi Abdulloh A. PENGENALAN

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

Lebih terperinci

Memahami CSS Selector - Bagian 1

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

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

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

2011 Ahmad Amarullah

2011 Ahmad Amarullah 1 Silabus Mata Kuliah Program Studi : Sistem Informasi Kode Mata Kuliah : Nama Mata Kuliah : Komputer Aplikasi IT ( XHTML & CSS ) Jumlah SKS : 2 SKS Semester : 1 Deskripsi Mata Kuliah : Mata kuliah ini

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 [email protected] [email protected] http://s.ee.itb.ac.id/~maswahyu http://www.maswahyu.tk

Lebih terperinci

Tutorial Dasar CSS Preprocessor LESS

Tutorial Dasar CSS Preprocessor LESS Tutorial Dasar CSS Preprocessor LESS Oleh: Christian Rosandhy Karena CSS standar udah terlalu mainstream,, nggak ada salahnya kita belajar salah satu CSS Preprocessor yang cukup terkenal, yaitu LESS. Disini

Lebih terperinci

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah

TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah TUTORIAL CODEIGNITER Langkah Tepat menjadi Web Developer Handal, menguasai CodeIgniter, jalan membuat aplikasi berbasis website lebih mudah www.ilmuwebsite.com Bagian 7. Membuat Data Pagination Menggunakan

Lebih terperinci

Tutorial Membuat Template Joomla 1.5

Tutorial Membuat Template Joomla 1.5 Tutorial Membuat Template Joomla 1.5 Tempate joomla sebenarnya sangat sederhana, tidak rumit sama sekali. Satu file layout html bisa kita konversi langsung menjadi template joomla 1.5 yang valid. Tutorial

Lebih terperinci

CSS (Cascading Style Sheets)

CSS (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 terperinci

Pemrograman Web Sisi Client Pertemuan 3 PI

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

Lebih terperinci

Seri Tutorial Template Blogger

Seri Tutorial Template Blogger Struktur dari Template Blogspot Seri Tutorial Template Blogger Sebelum merancang template, kita harus tahu tentang struktur atau bagian-bagian dari template. Setiap template tidak harus memiliki struktur

Lebih terperinci

Komunikasi Multimedia

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

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

Halaman Utama. Tampilan Menu. Universitas Sumatera Utara

Halaman Utama. Tampilan Menu. Universitas Sumatera Utara Halaman Utama Tampilan Menu Tampilan Galeri Tampilan Admin Listing Program Halaman Utama

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

setiap value dipisakan dengan,(koma) dan maksud dari kedua value ini ialah manambah efek dengan dua value tadi.

setiap value dipisakan dengan,(koma) dan maksud dari kedua value ini ialah manambah efek dengan dua value tadi. PERTEMUAN 6 .classshadow font-family: color:#333333; text-shadow: 1px 2px 3px blue; 1px adalah tebal bayangan secara horisontal, kekanan untuk nilai (+) dan kekiri untuk nilai (-), misal -1px; 2px adalah

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

Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage

Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Membuat Responsive dan Fleksibel Image Gallery dengan JQuery Fleximage Oleh: Christian Rosandhy Siapa bilang bikin galeri gambar yang responsive itu susah? Di tutorial kali ini kita akan belajar membuat

Lebih terperinci

Perancangan Desain Web Sistem

Perancangan Desain Web Sistem Perancangan Desain Web Sistem 4.1 Konsep Kerangka Desain Pada Bab 4 ini, secara khusus penulis akan membahas mengenai masalah desain. Jika dalam metode waterfall, tahap ini telah sampai ke dalam tahap

Lebih terperinci

Introduksi. Team Training SMK-TI I-58

Introduksi. Team Training SMK-TI I-58 Introduksi Style Sheet adalah template yang mengontrol pemformatan tag HTML pada halaman web anda. Bila anda telah terbiasa menggunakan Microsoft Word, anda dapat melihat bahwa konsep Style Sheet mirip

Lebih terperinci

Image Slider 3D. Oleh: Anthonius

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

Lebih terperinci

MATERI II CASCADING STYLE SHEETS (CSS) LANJUT

MATERI 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 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

Membuat Simpel Site HTML Layout Menggunakan Tag div

Membuat Simpel Site HTML Layout Menggunakan Tag div Membuat Simpel Site HTML Layout Menggunakan Tag div Oleh: Yudhistira Bayu W Ya, setelah saya memberikan Tutorial Tutorial Simpel HTML pada sebelumnya, Kali Ini saya akan memberikan Cara Membuat Simpel

Lebih terperinci

PENGANTAR KOMPUTER DAN TI 2C

PENGANTAR KOMPUTER DAN TI 2C PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 4 Peg. Komp & TI 2C M4 HyperText Markup Language (HTML) Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di

Lebih terperinci

Trik Mudah Membuat CMS Website dari Nol

Trik Mudah Membuat CMS Website dari Nol Trik Mudah Membuat CMS Website dari Nol Trik Mudah Membuat CMS Website dari Nol Rohi Abdulloh PENERBIT PT ELEX MEDIA KOMPUTINDO Trik Mudah Membuat CMS Website dari Nol Rohi Abdulloh 2016, PT Elex Media

Lebih terperinci

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP

MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP MEMBUAT LAYOUT DENGAN CONTAINER BOOTSTRAP NURLITA [email protected] Abstrak Kali ini kita akan membahas cara membuat layout dengan container bootstrap. Bootstrap adalah suatu framework front-end yang

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

Secara garis besar, terdapat 3 cara menginput kode CSS, yaitu metode Inline Style, Internal Style Sheets, dan External Style Sheets.

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,

Lebih terperinci

Membuat Tabel Responsive dengan CSS

Membuat Tabel Responsive dengan CSS Membuat Tabel Responsive dengan CSS Oleh: Christian Rosandhy CSS Layout Responsive udah jadi salah satu kebutuhan wajib ya dalam pembuatan website kita.. Sama seperti layout, Table juga perlu tampilan

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