Langkah 4: Mempelajari Lebih Lanjut Tentang HTML

Untuk membuat website yang lebih kompleks dan interaktif, kamu akan perlu mempelajari lebih lanjut tentang HTML. Ada banyak tutorial online dan kursus gratis yang bisa kamu gunakan.

Untuk membuat website kamu dapat diakses oleh semua orang di Internet, kamu perlu menunggah file HTML ke server web. Ada banyak layanan hosting gratis seperti GitHub Pages dan Neocities yang bisa kamu manfaatkan.

Membuat website dengan HTML adalah suatu kegiatan yang menyenangkan dan edukatif. Dengan langkah-langkah di atas, kamu sekarang harus bisa membuat website basic sendiri. Tetapi jangan berhenti di sini, teruslah belajar dan bereksperimen untuk menjadi lebih baik lagi. Selamat mencoba!

UNMAHA – Membuat website sekolah kini menjadi hal yang penting. Website sekolah bisa digunakan untuk berbagai keperluan, mulai dari pengumuman, jadwal pelajaran, hingga pengenalan lebih jauh tentang sekolah itu sendiri. Kamu mungkin merasa bingung harus mulai dari mana? Jangan khawatir! Kali ini saya akan menjelaskan cara membuat website sekolah dengan HTML yang simpel dan mudah, bahkan bagi pemula sekalipun.

Tidak perlu kemampuan coding yang canggih untuk membuat website sekolah yang fungsional. Dengan HTML, kamu bisa membuat tampilan dasar website yang sederhana namun tetap informatif. Namun, untuk membuat website yang benar-benar menarik, tentu kamu juga perlu sedikit tambahan CSS dan JavaScript. Tapi tenang, kali ini kita akan fokus pada HTML dulu.

Modul yang akan datang

- 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

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 :