Cara Membuat tampilan web / layout dengan HTML

Assalamualaikum WR. Wb.

Hai kawan masih dengan blog saya , tetap dengan "Semangat pagi,,!". Selasa, 26 July 2016 akan share tentang membuat tampilan web/ layout dengan html.

Untukmembuat website kita harus memiliki pemikiran tentang bagaimana layout dari sebuah website tersebut. Maka dari itu tutorial ini sangatlah penting bagi kawan pembaca yang baru mau mengenal HTMK dan CSS.

Pengertian HTML:

Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

Pengertian CSS:

CSS adalah bahasa style sheet yang digunakan untuk mengatur tampilan dokumen. Dengan adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format yang berbeda.

Pengertian Layout :

Layout adalah tata letak dari suatu elemen desain yang di tempatkan dalam sebuah bidang menggunakan sebuah media yang sebelumnya sudah di konsep terlebih dahulu. Simplenya layout itu mengatur desain supaya menjadi indah dan enak dilihat serta memanjakan mata.

Latar Belakang :

Perkembangan aplikasi web yang semakin pesat sejak munculnya teknologi internet sangat membantu dalam kemudahan serta kecepatan pengiriman, penyampaian dan penerimaan informasi. Mulai dari perusahaan, sekolah, perguruan tinggi, dan lembaga atau organisasi lainnya telah banyak memanfaatkan aplikasi web dalam kegiatan penjualan, promosi, belajar dan kegiatan lainnya dimana dibutuhkan pengiriman, penyebaran dan penerimaan informasi sehingga memberikan kemudahan bagi pengguna (user) yang membutuhkan.

Alat dan Bahan:

Komputer / Laptop.
Sublime Text.

Maksud dan Tujuan:

Maksud dan tujuan pembuatan web, untuk merancang suatu aplikasi web yang dinamis yang dimanfaatkan untuk menyebarkan informasi yang baik dengan cepat dan mudah.

Langkah-langkah pembuatan web seperti gambar diatas:

Buka sublime text
ketikkan syntax HTML seperti ini:

<!DOCTYPE html>
<html>
<head>
    <title>Latihan Dasar</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="head">
    <center>Header</center><br><br><br><br><br><br><br><br>
</div>
<div id="kiri">
    Kiri
</div>
<div id="nav">
    Navigasi
</div>
<div id="foot"><
Footer</div>

</body>
</html>

3. Untuk mempercantik penampilan web , ketikkan syntax CSS:

#head {
   background-color: #6C7A89;
   height: 90px;
   width: 85%;
   border-radius: 15px ;
   border-left: 30px;
   margin-left: 70px;
   margin-right: 70px;
}

#kiri{
   background-color: #19B5FE;
   height: 330px;
   width: 15%;
   margin-left: 70px;
   border-radius: 15px;
}
#nav{
   background-color: #2ECC71;
   width: 70%;
   height: 330px;
   margin-left: 210px;
   border-radius: 15px;
   margin-top: -330px;
}
#foot{

   background-color: black;
   height: 40px;
   width: 85%;
   border-radius: 15px ;
   border-left: 30px;
   margin-left: 70px;
   margin-right: 70px;
}

Teman-teman bisa mengembangkan sendiri warna dan letaknya sesuai keinginan. Karena pada tutorial ini kita hanya menjelasakan dasarnya, dengan warna yang berbeda-beda agar pemula yang ingin belajar bisa lebih mudah memahami fungsi dan letaknya. Dan pastikan anda selalu mempraktekkannya langsung bisa mudah untuk memahami setiap baris dari kode html.