Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS

Ukuran: px

Mulai penontonan dengan halaman:

Download "Tutorial CSS Desain Layout 1 Dengan HTML5 dan CSS"

Liani Lesmono
7 tahun lalu
Tontonan:

2 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 saja pada Step by step nya.. pada tutorial ini saya akan mencoba menjelaskan Bagaimana Membuat Desain Layout Website dengan Menggunakan HTML5 dan CSS.. Okeh Langsung saja pada Step by step nya.. sebelum nya kita buat dulu file dan folder nya yaitu index.html (File) untuk membangun halaman Website dengan HTML5 style.css(file) untuk mendefinisikan pengaturan style (gaya) dari halaman html. gbr (Folder) untuk menyimpan file gambar Step By Step.. Step 1. Buka file index.html, masukan kode HTML berikut : <!doctype html> <html> <head> </head> <body> <div id="wrapper"> <header><h1>jagocoding (Layout HTML5 dan CSS)</h1></header> <nav></nav> <article><h2>judul ARTIKEL 1</h2> <section id="article1"></section> <section id="article2"></section> <section id="article3"></section> </article> <aside> ASIDE </aside> <div id="footer"><b> Copyright 2014 By : Ardie Jocong </b> </body> </html> Kemudian Masukan kode berikut untuk menambahkan menu navigasi, letakkan sesudah tag </header>

3 </nav> <nav> <a href="#">home</a> <a href="#">about</a> <a href="#">faq</a> <a href="#">contact </a> sehingga kode lengkap nya seperti berikut <!doctype html> <html> <head> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <div id="wrapper"> <header><h1>jagocoding (Layout HTML5 dan CSS)</h1></header> <nav> <a href="#">home</a> <a href="#">about</a> <a href="#">faq</a> <a href="#">contact </a> </nav> <nav></nav> <article><h2>judul ARTIKEL 1</h2> <section id="article1"></section> <section id="article2"></section> <section id="article3"></section> </article> <aside> ASIDE </aside> <div id="footer"><b> Copyright 2014 By : Ardie Jocong </b> </body> </html> Step selanjutnya Buka file style.css, kemudian masukan kode CSS berikut untuk melakukan pengaturan pada wrapper, dan tambahkan code css untuk background di dalam tag body. body { background-color:#515151; #wrapper{ background-color:#333; float:inherit; width:900px; position:relative;

4 margin:0 auto 0 auto; color:#f0f0f0; kemudian sebelum melakukan pengaturan dan pendefinisian CSS pada komponen yang lainnya.. untuk memanggil file CSS tersebut, kita panggil file style.css tersebut pada file index.html dengan cara memasukan code berikut ke dalam tag <header> <link href="style.css" rel="stylesheet" type="text/css"/> setelah itu kita akan melakukan pengaturan pada header, dengan menambahkan kode berikut ke dalam style.css : header{ float:left; width:875px; /* lebar header */ height:70px; /* tinggi header */ background-color:#333; font-family:arial, Helvetica, sans-serif; /* Jenis Huruf */ font-style:normal; font-size:18px; /* ukuran huruf */ padding:50px 0 5px 25px; color:#fc0; /* warna text */ tambahkan lagi code css berikut untuk melakukan pengaturan pada menu navigasi : nav { float:left; width:875px; height:30px; background-color:#fc0; font-family:tahoma, Geneva, sans-serif; font-weight: bold; font-size:12px; color:#333; padding:17px 0 3px 25px; /* posisi text yang berada di dalam tas nav dengan posisi (atas kiri bawah kanan)*/ langkah selanjutnya,kita buka kembali file index.html, kemudian kita hapus dulu <article> sampai dengan </article>, lalu ganti dengan code berikut, <article> <section id="article1"><h2>judul ARTIKEL 1</h2> class="t_images"> <div

5 <div align="center">judul1<br> <img src="gbr/gbr1.png"height="90px" width="100px"/> <strong><center><a href="#" target="_blank">link Judul 1</a></strong> </section> <section id="article2"> <div class="t_images"> <div align="center">judul 2<br> <img src="gbr/gbr2.png"height="90px" width="100px"/> <strong><center><a href="#" target="_blank">link Judul 2</a></strong> </section> <section id="article3"> <div class="t_images"> <div align="center">judul 3<br> <img src="gbr/gbr3.jpg"height="90px" width="100px"/> <strong><center><a href="#" target="_blank">link Judul 3</a></strong> </section> <section id="article4"> <div class="t_images"> <div align="center">judul 4<br> <img src="gbr/gbr4.jpg"height="90px" width="100px"/> <strong><center><a href="#" target="_blank">link Judul 4</a></strong> </section> </article>

6 setelah itu jangan lupa tambahkan gambarnya ke dalam folder gbr, agar terlihat menarik. kemudian untuk melakukan pengaturan pada artikel dan aside ( menu vertikal ), tambahkan code css berikut : article{ float:left; width:650px; background-color:#333; font-family:arial, Helvetica, sans-serif; font-style:normal; font-size:12px; line-height:21px; color:#ccc; padding:25px 25px 5px 25px; aside{ float:left; width:170px; background-color:#666; font-family:arial, Helvetica, sans-serif; font-style:normal; font-size:12px; color:#ccc; padding:25px 15px 10px 15px; line-height:16px; tambahkan lagi code css berikut untuk melakukan pengaturan pada footer : #footer { clear:both; width:875px; height:30px; background-color:#fc0; font-family:arial, Helvetica, sans-serif; font-weight:normal; font-size:12px; color:#333; padding:20px px; tambahkan kode css berikut untuk melakukan pengaturan pada gambar.t_images { float: left;

7 width: 155px; border: 1px solid #999; margin: 0 15px 25px 15px; padding: 5px; lalu langkah terakhir masukan code css berikut, untuk pengaturan pada text heading, dan pengaturan pada link : h1,h2,h3{ font-family:arial, Helvetica, sans-serif; line-height:21px; nav a{ color:#000; text-decoration:none; nav a:hover{ color:#919191; text-decoration:underline; a{ color:#fc0; text-decoration:none; a:hover{ text-decoration:underline; Berikut adalah tampilan Hasil Akhir dari Layout yang telah dibuat... cukup sekian tutorial dari saya.. nanti saya akan bagikan teknik-teknik pembuatan layout yang lainnya.. Thanks.. :) Tentang Penulis

8 Ardie Jocong let's we learn coding together,.. Learning by doing.. cause the best way of learning about anything is by doing. explore your brain..

dokumen-dokumen yang mirip

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