Kamis, 08 Maret 2018

Membuat Template Sederhana Dengan Css

Diterbitkan Maret 08, 2018

Template sederhana ini ialah buatan aku saat masih berkenalan pertama kali dengan CSS. Agar sanggup menginspirasi banyak orang hasilnya aku buat saja artikel tutorial mengenai Membuat Template Sederhana dengan CSS. Semoga bermanfaat nantinya !! :D

Hal pertama yang harus disiapkan tentu saja text editor, aku sering menggunakan Notepad++.
Kedua ialah web browser, aku menggunakan Mozilla Firefox versi terbaru.

Disini aku menggunakan cara Eksternal CSS, yaitu memanggil file .css untuk ditampilkan di HTML. Cara ini sudah aku tulis di artikel sebelumnya yang berjudul Belajar CSS dimana terdapat cara-cara pemakaian CSS untuk mempercantik halaman web.

Langsung saja, tulis script dibawah ini dan simpan didalam satu folder (terserah anda) dengan nama style.css :

#bungkus { background-color:red; width:800px; height:900px; margin:auto; } #header{ background-color:pink; width:800px; height:100px; float:left; } #navkiri{ background-color:black; width:200px; height:780px; float:left; } #footer{ background-color:blue; width:800px; height:20px; float:left; }

Setelah anda menulis script diatas, lalu buka lembar kerja gres kemudia tulis script menyerupai dibawah ini :

<html> <head><title>Membuat Template Sederhana dengan CSS</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="bungkus"> <div id="header"> </div> <div id="navkiri"> </div> <div id="footer"> </div> </div> </body> </html>

Simpan script diatas dengan nama index.html dan harus satu folder bersama file style.css tadi.
Jalankan file index.html di Mozilla Firefox!!!
Jika tidak ada kesalahan maka tampilannya akan menyerupai berikut ini :

Template sederhana ini ialah buatan aku saat masih berkenalan pertama kali dengan CSS Membuat Template Sederhana dengan CSS

Taraaaaa !!!! anda sudah mempunyai sebuah template sederhana menggunakan CSS. kabari teman-teman anda jikalau anda berhasil :D, sekian terima kasih.
Mungkin dari artikel diatas masih banyak yang belum terang janganlah ragu untuk bertanya ke saya. Mari kita mencar ilmu bareng :D
Sumber http://creativitywhitoutlimits.blogspot.com