Skip to main content

Posts

Showing posts with the label Belajar CSS

CSS : Menggabungkan seluruh materi

Menggabungkan seluruh materi  Pada postingan kali ini anda diajak untuk secara spesifik untuk memahami membuat potongan dari suatu website, mulai dari Header, Content, Menu,Right Menu,footer yang mana dalam satu pembahasan sudah saya kupas satu persatu tentang fungsi dari masing-masing perintah CSS.  Pada pembahasan kali ini anda akan menggabungkan mulai dari Header sampai footer untuk menjadi satu kesatuan halaman website. Oke langsung saja saya berikan file HTML yang sudah saya gabung : <html> <head> <title>Membuat Layout Web</title> <link href="style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="header"> </div> <div id="menu"> <a href="index.html">HOME</a> <a href="produk.html">PRODUK</a> <a href="artikel.html">ARTIKEL</a...
Post a Comment
Baca Lebih »

CSS : Mengedit Footer

Mengedit Footer Setelah anda membuat layout , menu, content serta colom kanan, kini anda perlu mengedit footer. Buat dulu folder dengan nama BAB V Mengedit Footer , lalu didalam folder tersebut buat juga folder images, karena anda perlu images untuk footer. Membuat File HTML Footer Ketikkan kode HTML dibawah ini pada notepad ++ <html> <head> <title>Membuat Layout Web</title> <link href="style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="container">         <div id="footer">           <p id="bottom">                   <a href="#">HOME</a>                   <a href="#">PRODUK</a>                 <a href=...
3 comments
Baca Lebih »

CSS : Mengedit Colom Right

Mengedit Colom Right Sebelumnya anda buiat dulu folder dengan nama BAB IV Mengedit Colom Right dan didalamnya anda buat folder lagi dengan nama images, lalu anda copy dari file gambar yang sudah saya sertakan di MATERI PRAKTEK CSS kedalam folder images. Adapun filenya ada 7 file gambar : Membuat File HTML Colom Right Lalu anda buka software notepad ++ atau yang lain sesuai selera andadan anda tuliskan code html berikut ini : <html> <head> <title>Membuat Layout Web</title> <link href="style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="content"> <p>&nbsp;</p> </div> <div id="right"> <h2 class="member">Member Login</h2> <form name="memberLogin" action="#" method="post"> <input type="text" na...
Post a Comment
Baca Lebih »

CSS : Mengedit Content

Mengedit Content Sekarang pada post ini, anda akan mengenal lebih jauh peran dari CSS dalam pengaturan dan design dari suatu website. Kali ini anda akan saya ajak untuk mengatur text content yang terdapat dalam design dari website yang kita buat Pada bab I anda sudah membuat content yang belum di edit dari CSS, maka kelihatan tidak karuan dan pada Bab ini anda akan membuat content text menjadi suatu bagian yang menarik untuk dibaca oleh user. Membuat file HTML dari Content Coba anda ketikan file HTML seperti berikut ini yang saya ambil dari sebagian dari layout website yang sudah dibuat pada Bab I. <head> <title>Mengedit Content</title> <link href="style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="content"> <h1>Protect Natural Resources, Utilize Solar Electric Power</h1> <p id="indent...
1 comment
Baca Lebih »

CSS : Membuat Menu Navigasi

Membuat Menu Navigasi Untuk post kali ini saya akan mengajak anda membuat tutorial menu navigasi dibawah header. Membuat file HTML untuk Menu Navigasi  Baiklah kita langsung saja , ketikkan kode HTML untuk membuat menu navigasi dibawah ini : <html> <head> <title>Membuat Menu Navigasi</title> <link href="style.css" rel="stylesheet" type="text/css" media="all" /> </head> <body> <div id="container"> <div id="menu"> <a href="#">HOME</a> <a href="#">PRODUK</a> <a href="#">ARTIKEL</a> <a href="#">MEMBER</a> <a href="#">TESTIMONIAL</a> <a href="#">KONTAK</a> <a href="#">ABOUT US</a> </div> </div> </body> </html> Keterangan dari kode HTML diatas: Kode tersebut saya ambil hanya bagi...
5 comments
Baca Lebih »

CSS : Membuat Desain Layout Website

Membuat Desain Layout Website Pertama kali jika anda akan membuat suatu website, sebagai dasar dari bentuk awal pembuatan website. Oke kita langsung saja… Saya akan menggunakan software notepad++ karena gratis,untuk membuat layout kali ini saya akan mengajak anda untuk membuat desain dengan 2 kolom dengan bagian content sebelah kiri dan disebelah kanan untuk menaruh navigasi dan segala macam bentuknya. Untuk itu silahkan anda buat dulu folder untuk menaruh file hasil praktek, misalnya saya membuat folder Bab1 Layout website Lalu anda buka folder tersebut dan buatlah lagi folder dengan nama images yang berfungsi untuk menampung images. Copy file gambar dari file download yang saya sertakan dalam POST SEBELUMNYA yang terdapat dalam folder Bab1 Membuat layout, file gambar tersebut ada 2 buah file yaitu header.jpg dan footer.gif. Membuat file HTML layout Oke…sekarang anda buka notepad++ anda, atau jika anda bisa menggunakan software yang biasa and...
6 comments
Baca Lebih »