Membuat Tampilan Website Dengan Html Dan Css

Membuat Tampilan Website Dengan Html Dan Css

Cara Membuat Website dengan HTML, CSS, dan JavaScript: Panduan Lengkap untuk Pemula

Sahabat Hostnic! Apa kabar sahabat semua? Semoga sehat selalu. Pada kesempatan ini, kita akan membahas cara membuat website dengan menggunakan HTML, CSS, dan JavaScript. Jika Anda adalah seorang pemula yang ingin mempelajari dasar-dasar pembuatan website, artikel ini akan memberikan panduan lengkap untuk memulai. Mari kita mulai pembahasan lengkapnya.

Rencanakan Tata Letak Website

Setelah memilih editor, buat rencana tata letak website yang memuat elemen-elemen seperti header, footer, dan navigasi. Anda bisa menggambar kasar di kertas atau menggunakan Figma atau Adobe XD.

- Pada kesempatan kali ini kita akan membahas Pemrograman Web 1 dimulai dari langkah awal hingga langkah akhir, kali ini admin akan sajikan pada Part 3, silahkan dibaca, dipahami dan dipraktikkan di laptop masing-masing.

Dalam dunia desain, Layout berbicara mengenai bagaimana penataan elemen-elemen dalam  sebuah  halaman  dengan benar.  Sama  seperti  tipografi,  terdapat  sangat  banyak elemen-elemen  pada  layout,  yang  tentunya  tidak  akan  dapat  dibahas  pada  bagian  ini sendiri. Pembahasan layout secara menyeluruh akan memerlukan bukunya tersendiri. Kita akan hanya melihat elemen-elemen layout yang umumnya ditemukan pada dokumen web, dan bagaimana membuat elemen-elemen tersebut dengan HTML dan CSS.

Sebuah dokumen web umumnya memiliki elemen-elemen sebagai berikut:

Seperti namanya, merupakan elemen yang berisi judul dan penjelasan lain dokumen. Biasanya elemen ini diisikan dengan logo website, menu-menu global (seperti login dan logout), maupun nama halaman yang sedang ditampilkan.

Elemen navigasi, yang memberikan akses navigasi ke halaman-halaman lain dalam web.

Elemen pendukung konten, dapat berupa pembantu navigasi konten, ataupun berbagai hal lain seperti daftar konten lain, iklan, atau menu tambahan. Sidebar dapat berada di kiri atau kanan konten, atau bahkan di kiri dan kanan konten, sesuai dengan kreatifitas perancangnya.

Isi utama dari dokumen web. Pengguna biasanya datang ke web untuk melihat teks yang berada pada bagian ini.

Bagian penutup dari website, yang dapat saja berisi informasi lain tentang website, seperti lisensi pengunaan, sitemap, ataupun link ke website lain.

Bagaimana kita dapat membangun layout seperti pada gambar di atas? Berdasarkan apa yang telah kita pelajari sejauh ini, tentunya anda telah dapat membayangkan apa yang harus dilakukan. Sederhananya: width dan height pada seluruh elemen, float pada sidebar dan content, serta clear pada footer. Perlu diingat juga bahwa pada dokumen web yang sebenarnya, properti height jarang digunakan karena tinggi elemen biasanya ditentukan oleh isi dari elemen itu sendiri.

Kita buat file css, beri nama style.css

background: blue; width: 100%; margin: 10px auto;

.wrap .menu ul{ padding: 0; margin: 0;

list-style-type: none;

.wrap .badan .sidebar{

float: left; width: 25%; height: 100%;

.wrap .badan .content{ background: red; float: left; height: 100%; width: 75%;

.wrap .footer{ width: 100%; padding: 10px;

font-family: "Helvetica Neue", Roboto, Arial, "Droid Sans", sans- serif;

font-size:26px; font-weight:bold; color:#666; padding:5px 0; margin-bottom:10px;

border-bottom:1px solid #ccc;

display:inline-block;

Buat file Pertemuan4.php

Pemrograman 1

Tutorial belajar membuat layout website sederhana

  • Home

  • Form

  • CSS

  • PHP

  • Javascript

  • Tutorial HTML dasar

  • Tutorial CSS dasar

  • Tutorial PHP dasar

  • Tutorial JQuery dasar

    • if (empty($_GET['p'])){

    $filename=$_GET['p'];

    require $filename.".php";

    Dan akan ditampilkan seperti gambar di bawah ini

    Fungsi File Indeks.php

    Berfungsi sebagai penampil yang akan terbuka pertama kali di website ,yang mana file indeks.php ini berisi beberapa file-file seperti,file css,bootsrap , js dan home.php yang berisi file-file yang kita buat sebelunya sedangkan file css,bootstrap dan js yang akan memberikan style pada halaman website kita,di file indeks.php ini kita dapat memberi judul (title) pada halaman website kita dengan cara menganti:

    <?php echo "Admin - "; ?>

    ” kita dapat

    mengganti judul website kita menjadi sesuai keinginginan kita ,contoh

    <?php echo "Admin - "; ?>

    <?php echo "Beranda - "; ?>

    Selain itu ada variabel $baseURL :

    $baseURL = 'http://'.$_SERVER['SERVER_NAME'].'/web1/';

    Variabel ini berfungsi untuk mempermudah kita dalam memasukan file (css,bootsrap dan js ) sehingga kita tidak perlu menulis panjang source file nya

    File base_template_topnav.php

    File ini berfungsi untuk membuat topbar navigasi pada halaman website kita ,yang mana di topbar navigasi ini berisi logo website kita ,toggle sidebar,dropdown menu untuk login admin

    Yang mana jika kita ingin memasukan logo pada halaman website kita dengan mengubah :

    logo

    logo

    Dengan syarat pada folder images terdapat gambar “mercu.jpg”

    Dan kita dapat mengubah logo doropdown untuk menu login admin menjadi logo yang kita inginankan

    Dengan cara mengubah:

    Dengan syarat pada folder images terdapat gambar “admin.png”

    Selain itu terdapat kode :