Tutorial Membuat Website Dengan Codeigniter Dan Bootstrap Lengkap Tahap 1
Sreg kesempatan kelihatannya ini kita akan menggosipkan prinsip membuat website dengan menggunakan html dan css. Namun harus di pastikan setidaknya kalian sudah memahami radiks-dasar html.
Sebetulnya saat ini bagi membuat website itu terlampau mudah, bahkan cak semau beberapa CMS yang sudah lalu menyenggangkan fitur website builder sehingga kita apalagi tidak perlu sedikitpun bakal ngoding. Namun lalu baik jikalau kalian memahami cara mewujudkan website berusul zero tanpa bantuan tools alias CMS yang ada saat ini.
Secara publik website nan selalu kita jumpai di internet menggunakan bahasa markup HTML dan CSS (Cascading Style Sheet) serta bahasa pemrograman javascript dan PHP. Sahaja untuk membuat website sederhana bersifat statis cukup dengan HTMLdan CSS saja.
Kenapa Harus Berlatih CSS Juga?
Untuk menjawab pertanyaan ini perhatikan ilustrasi gambar di bawah ini:
Saat membangun sebuah website saya ilustrasikan sebagai halnya menciptakan menjadikan kerangka gedung rumah, html ibaratnya komponen-komponen bikin membangun sebuah apartemen sedangkan CSS akan membuat komponen-komponen tersebut menjadi suatu keekaan yang utuh sehingga flat tersebut bisa dibangun dengan pas dan menarik.
CSS kita gunakan bikin mengatur jarak antar elemen, ukuran (tinggi, lebar), dimensi dan jenis font, corak, efek hover dan masoh banyak lagi.
Jadi kita tidak bisa tetapi mempekerjakan html saja untuk membuat website, kita membutuhkan css sekali lagi.
Oke, Saya harus tiba bersumber mana ?
Lakukan berangkat langkah semula kita butuh
tools
lakukan coding dan menjalankan hasil codingan. Secara sederhana yang kita butuhkan belaka teks pengedit dan broeswer.
1. Bacaan Editor
Bacaan pengedit ini akan menjadi
tools
untuk kalian membuat kode-kode HTML dan CSS yang di butuhkan kerjakan membangun sebuah halaman website.
Notepad menjadi aplikasi nan paling patokan dan sudah tersuguh di podium windows. Jikalau kalian cak hendak yang profesional sebaiknya kalian pakai notepad++ atau sublime text 3. Dari ketiganya yang paling saya rekomendasikan adalah sublime text 3.
Semua aplikasi di atas dapat kalian download secara cuma-cuma di internet.
2. Browser
Website html yang kita bagi melalui teks editor selanjutnya akan kita jalankan di permohonan browser.
Browser yang saya rekomendasikan yakni
chrome
dan
firefox
kalian bisa melembarkan salah satunya.
Mengenal Struktur Dasar Dokumen HTML
Secara umum struktur dasar terbit suatu dokumen HTML adalah seperti mana berikut:
<!DOCTYPE html> <html> <head> <title>Membentuk Web dengan HTML dan CSS - Kelasprogrammer.com</title> </head> <body> <!--Elemen yang ditampilkan di pelataran browser --> </body> </html>
Di internal HTML versi ke-5 setiap membuat dokumen html harus di awali dengan sintak
<!DOCTYPE html>
sintak ini berfungsi cak bagi memberitahu kepada browser bahwa pertinggal html yang dibuat menggunakan versi ke-5, kemujaraban lain sekaligus mendukung browser untuk memajukan setiap elemen html dengan baik (karena menunggangi versi terbaru).
Lebih lanjut dokumen HTML bosor makan di mulai dengan tag pembuka
<html>
dan kemudian di akhiri dengan intiha
</html>
Setiap tag di html di desain n kepunyaan pasangan, ada tag pembuka dan tag intiha, walaupun ada juga beberapa tag nan single (mengirik sendiri) begitu juga
<br>
untuk membuat baris baru
<hr>
untuk membuat garis horizontal dan lainnya.
Tag selanjutnya adalah tag
<head>
yang berfungsi misal heading semenjak dokumen html yang kita cak bagi. Pada bagian
<head>
bisa kita buat judul dokumen, inisialisasi css, desktripsi dan meta tag lainnya.
Di internal tag
<head>
terwalak tag
<title>
kerjakan membuat judul nan nantinya akan di tampilkan pada menu tab di browser.
Bagian utama intern struktur sahifah html adalah bagian
<body>
karena di babak ini berkaitan dengan elemen yang tampil dan di tatap oleh pengguna, kita akan banyak membuat kode-kode html nya.
Belajar Asal-Dasar HTML
Agar artikel ini tak serupa itu tahapan, kerjakan beberapa sub topik sudah saya selidik puas artikel berikut:
- Membuat Gugus kalimat dan Heading
- Membuat List
- Membuat Tabel
- Membuat Link
- Mencadangkan lembaga
- Membuat tombol (button)
- Membuat Form
Belajar Penggunaan Radiks CSS
Bagi memahami pendayagunaan dasar CSS di html coba baca aritikel ini
- Membuat style CSS (Cascading style sheet)
Mari inversi-antagonis pelajari dahulu topik-topik di atas karena kalau kalian belum menguasai nantinya akan kesulitat di tahap berikut.
Menentukan Struktur navigasi
Struktur navigasi web adalah adalah satu struktur untuk melukiskan bagaimana satu halaman di privat website nan silih berbimbing antara satu dengan lainnya.
Bermanfaat buat membuat struktur navigasi sebelum kita takhlik website. Berikut ini sempurna navigasi pekarangan website nan akan kita lakukan:
Saat pertama mungkin pengguna mengakses website, halaman index akan menjadi jerambah penting yang terdiri berbunga menu home, kontak saya dan tentang saya, halaman home bisa kita gunakan sebagai halaman index yang ampuh konten artikel-artikel lega website kita.
Membuat Layout Website
Layout adalah tata letak bersumber setiap komponen elemen di dalam website. Layout berfungsi untuk memetakan putaran-fragmen internal halaman website. Dengan desain layout yang baik akan memberikan kenyamanan kepada pelawat.
Secara umum website memiliki 4 adegan layout yaitu
- Header – Berisi kepala karangan website
- Navigasi – Untuk mewujudkan menu navigasi
- Konten – Bagian utama yang menjadi alamat informasi yang ingin di sampaikan ke pengunjung
- Footer – Bagian paling bawah lazim berisi wara-wara tambahan seperti informasi kepemilikan atau copyright.
Lakukan membuat layout di HTML 5 kita bisa menggunakan tag-tag berikut:
- Bagi membuat header memperalat tag
<header> - Membuat navigasi menggunakann tag
<nav> - Membuat konten/artikel memperalat tag
<article> - Membentuk footer menggunakan tag
<footer>
<!DOCTYPE html> <html> <head> <title>Konseptual Membentuk Layout - www.kelasprogrammer.com</title> </head> <body> <header> <p>Header</p> </header> <nav> <p>Navbar</p> </nav> <article> <p>Konten</p> </article> <footer> <p>Footer</p> </footer> </body> </html>
Agar bisa tertentang lebih jelas tambahkan kode CSS di dalam tag
<head>
sama dengan berikut:
<style> body { width: 65%; height: auto; background: white; margin:auto; margin-top: 5px; padding-bottom: 5px; } p { text-align: center; font-size: x-large; margin:auto; } header,nav,article,footer { border-radius: 3px; margin: 5px 5px 5px 5px; border: 1px solid gainsboro; } header { height: 80px; background-color: aquamarine; } nav { height: 45px; background-color: blanchedalmond; } article { height: 150px; background-color: cornflowerblue; } footer { height: 50px; background-color: darkkhaki; } </style>
Hasil:
Pengkajian Kasus : Mewujudkan Website Tertinggal Dengan HTML dan CSS
Setelah kalian memahami pembahasan diatas , selanjutnya kita akan berlatih membuat website primitif.
Website yang kita bakal bersifat statis karena hanya memperalat HTML dan CSS, kedepannya kalian bisa kembangkan dengan belajar javascript, PHP, maupun python untuk menciptakan menjadikan website dinamis.
Baca pun : Perbedaan web statis dan dinamis
Awalan 1 : Buatlah folder project web
Buatlah sebuah folder baru kerumahtanggaan di rektori kalian, paradigma dibawah ini saya menciptakan menjadikan folder web-saya
Lebih lanjut buatlah folder susuk nan berilmu buram lakukan kebutuhan konten website
Perhatikan untuk label gambar pastikan tidak ada spasi takdirnya nama lebih berusul suatu kata pakailah tera penghubung – (strip) atau _ (underscore).
Kenali setiap ekstensi kerangka apakah memperalat format .png alias jpeg karena nantinya kita akan sertakan kerangka-gambar ini privat sintak html menggunakan tag
<img>.
Langkah 2 : Buatlah file index melalui wacana editor
Buatlah sebuah file dengan etiket index.html melalui pustaka editor yang kalian miliki, saran saya kalian bisa menggunakan
sublime text
atau teks editor lainnya yang kalian miliki dan sukai.
<!DOCTYPE html> <html> <head> <title>Berkamu</title> <link landasan kereta api="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <div class="container"> <header> <div class="logo"> Web Saya </div> </header> <nav> <ul> <li><a href="index.html">Berkamu</a></li> <li><a href="gabungan-saya.html">Kontak Saya</a></li> <li><a href="mengenai-saya.html">Tentang Saya</a></li> </ul> </nav> <article> <div class="konten"> <a href="kura.html"><img src="lembaga/katung.jpg" ></a> <div class="kepala karangan"> <a href="katung.html">Limpa</a> </div> <p>Penyu adalah hewan nan banyak di temukan berakibat di beberapa pesisir pantai di Indonesia sejak lampau.</p> </div> <div class="konten"> <a href="ikan-ogak-ogak.html"><img src="gambar/lauk-badut.jpg" ></a> <div class="judul"> <a href="ikan-pelawak.html">Ikan Badut</a> </div> <p>Ikan komedian ini dapat dikenali dengan warna jingganya ikan ini bertunas mencapai 8 cm serta terjadwal dalam lauk terpopuler didunia. </p> </div> <div class="konten"> <a href="lion-fish.html"><img src="gambar/lion-fish.jpg" ></a> <div class="kepala karangan"> <a href="lion-fish.html">Lion Fish</a> </div> <p>Lionfish atau volitans ialah iwak berbisa milik keluarga yang Scorpaenidae terjemahan verbatim berarti iwak ketonggeng.</p> </div> <div class="konten"> <a href="moorish-idol.html"><img src="gambar/Moorish-Idol.jpg" ></a> <div class="kepala karangan"> <a href="moorish-idol.html">Moorish Idol</a> </div> <p>Iwak Moorish Idol adalah pelecok satu ikan yang cukup populer di lingkaran kiara hobiis ikan solek karena bentuknya nan partikular dan pola warnanya yang menganjur.</p> </div> </article> <footer> Copyright 2022 web-saya.com </footer> </div> </body> </html>
Jika kita menjalankan file
index.html
di browser maka hasilnya akan sama dengan sreg gambar berikut:
Untuk mengatur tampilan pekarangan website kita teristiadat menambahkan style CSS. Coba perhatikan di dalam tag
<head>
saya menyertakan sintak ini:
<link landasan kereta api="stylesheet" type="text/css" href="style.css">
Sintak ini meruapakan cara membilai style css secara eksternal (terpisah dari file html) sehingga kita perlu menciptakan menjadikan file bau kencur bernama
style.css
Langkah 3 : Membuat Style CSS
Buat file dengan logo
style.css
dengan isi kode sebagaimana berikut:
body{ font-family: Arial, Helvetica, sans-serif; background: #e6e6e6; padding: 0; margin:0; } .container{ width: 65%; height: auto; background: white; margin:auto; margin-top: 5px; padding-bottom: 5px; } .label { font-size: xx-large; padding: 30px 0 30px 10px; } nav ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #1a75ff; border: 1px solid gainsboro; } nav li { float: left; } nav li a{ display: inline-block; color:#ffffff; text-align: center; padding: 14px 15px; text-decoration: none; } nav li a:hover { opacity:0.9; background-color: #3385ff; } article { width: 98.8%; height: auto; border-radius: 3px; margin: 5px 5px 5px 5px; border: 1px solid gainsboro; clear: both; } article p { padding: 5px 6px 5px 5px; line-height: 1.5; } article .konten { width: 23.5%; height: auto; margin: 5px 5px 5px 5px; border-radius: 3px; border: 1px solid gainsboro; float: left; } article .isi { width: 98.5%; height: auto; margin: 5px 5px 5px 5px; border-spektrum: 3px; border: 1px solid gainsboro; float: left; } article .isi .judul { font-size: xx-large; margin-bottom: 10px; margin-left: 10px; margin-top: 10px; } article .isi p { margin-top: 0; } article .isi img { float: left; margin: 5px 5px 5px 5px; } article .konten img { width: 95.8%; height: 150px; margin: 5px 5px 5px 5px; } article .konten:hover { opacity:0.9; } article .konten .titel a { margin-left: 5px; text-decoration: none; font-size:x-large; color:#020101; } article .konten a:hover { opacity:0.9; } footer { clear: both; width: 98.8%; height: auto; text-align: center; margin: 5px 5px 5px 5px; border-radius: 3px; border-bottom: 1px solid gainsboro; padding-top: 15px; padding-bottom: 15px; }
Hasil
Bisa di lihat setelah kita menambahkan style CSS tampilan website menjadi lebih mengganjur.
Pada tahap ini kita baru membentuk satu jerambah yaitu halaman index selanjutnya masih ada halaman lainnya yang perlu dibuat.
Langkah 4 : Mewujudkan Halaman Artikel
Agar saat pengguna mengklik salah satu konten artikel lakukan dapat di baca secara keseluruhan isi konten, maka kita terlazim membentuk jerambah cak bagi masing-masing konten tersebut.
Halaman yang harus kita bikin adalah
- penyu.html
- ikan-badut.html
- lion-fish.html
- moorish-idol.html
Contoh : Membuat Halaman ikan-ogak-ogak.html
<!DOCTYPE html> <html> <head> <title>Ikan Komedian</title> <link rel="stylesheet" type="text/css" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> </head> <body> <div class="container"> <header> <div class="tera"> Web Saya </div> </header> <nav> <ul> <li><a href="index.html">Beranda</a></li> <li><a href="kontak-saya.html">Susunan Saya</a></li> <li><a href="tentang-saya.html">Tentang Saya</a></li> </ul> </nav> <article> <div class="isi"> <div class="judul"> Ikan Badut </div> <img src="gambar/ikan-komedian.jpg" > <p>Iwak badut ini bisa dikenali dengan warna jingganya ikan ini tumbuh menyentuh 8 cm serta termasuk dalam iwak terpopuler didunia. Hewan ini masuk kedalam Genus Amphiprion. Ikan giru alias lebih dikenal dengan sebutan ikan pelawak adalah ikan semenjak anak suku Amphiprioninae internal kaki Pomacentridae. Ada 28 spesies yang biasa dikenali, riuk satunya adalah genus Premnas, tentatif sisanya termasuk n domestik genus Amphiprion. </p> <p>Mereka tersebar di lautan Pasifik, Laut Bangkang, ki akbar India, dan karang besar Australia. Di alam bebas mereka bersimbiosis dengan anemon laut. Anemon akan melindungi Ikan komedian dari pemangsa dan Ikan komedian akan menyucikan Anemon dengan memakan tahi - tinja perut Anemon. Ikan badut berwarna asfar, jingga, kemerahan atau kehitaman. </p> <p>Spesies terbesar mencecah panjang 18 cm, tentatif yang terkecil belaka 6 cm. Mereka, plong galibnya, dijumpai sreg laguna-laguna berbatu di seputar terumbu karang, atau lega daerah koastal dengan kedalaman kurang dari 50 meter dan berair jernih. Di perairan Papua New Guinea, dapat ditemukan ikan badut tidak kurang terbit 8 spesies. Di alam, iwak pelawak mengkonsumsi zooplankton, udang-udangan dan algae yang dijumpai di habitat mereka.</p> </div> </article> <footer> Copyright 2022 web-saya.com </footer> </div> </body> </html>
Hasil
Kalian dapat lakukan cara yang sebagaimana cara meng-copy dari file iwak-badut.html lalu mengganti dengan file lainnya.
Langkah 5 : Takhlik Pelataran Gabungan & Tentang saya
Selain mewujudkan pekarangan diatas, kita juga teradat membuat dua halaman lainnya yakni:
- kontak-saya.html
- tentang-saya.html
Momen penjung mengklik menu kontak saya pengunjung tersebut akan di arahkan ke halaman
pergaulan-saya.html
seperti mana dengan pelataran akan halnya saya. Kalian bisa memuat profil kontak kalian plong kedua halaman ini.
Download Source Code
Untuk mempersingkat pelajaran mana tahu ini saya sudah menyediakan
source code
yang bisa kalian download secara gratis.
[sociallocker id=”5349″] [/sociallocker]
Source: https://kelasprogrammer.com/cara-membuat-website-dengan-html-dan-css/
