12 Langkah Cara Membuat Website Sederhana Menggunakan HTML
Apa kamu berniat punya bisnis online? Jika iya, apakah kamu sudah punya website untuk itu?
Jika belum maka mulailah membuatnya.
Pada dasarnya ada dua pilihan untuk membuat website, membuatnya dari nol atau menggunakan platform Content Management System (CMS) , misalnya WordPress.
Tapi ada baiknya kamu juga mengenal sedikit coding pemrograman karena meskipun menggunakan CMS terkadang kamu perlu mengulik sedikit coding yang ada pada CMS yang kamu gunakan.
Apakah sulit untuk membuat website dari nol? Tidak ada yang sulit jika kamu melakukannya dengan sungguh-sungguh.
Pada tulisan ini, Babastudio hanya akan memberikan sedikit penjelasan tentang tahap awal cara membuat wesbite menggunakan HTML yang mesti kamu tahu.
Tapi sebelumnya…
Apa itu website?
Website atau situs web adalah suatu halaman web yang saling berhubungan yang umumnya berada pada server yang sama berisikan kumpulan informasi yang disediakan secara perorangan, kelompok, atau organisasi.
Sebuah website biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses melalui jaringan seperti Internet, ataupun jaringan wilayah lokal (LAN) melalui alamat Internet yang dikenali sebagai URL, Uniform Resource Locator.
Gabungan atas semua situs yang dapat diakses publik di Internet disebut sebagai World Wide Web atau lebih dikenal dengan singkatan WWW.
Pada umumnya halaman beranda situs Internet dapat diakses publik secara bebas. Tapi ada juga situs yang mewajibkan pengunjung untuk melakukan pendaftaran sebagai anggota, atau bahkan meminta pembayaran agar bisa menjadi aggota untuk dapat mengakses isi yang terdapat dalam website tersebut.
Pembatasan-pembatasan ini umumnya dilakukan karena alasan keamanan, privasi, atau karena tujuan komersial tertentu.
Pada dasarnya, halaman web merupakan berkas yang ditulis sebagai berkas teks biasa (plain text) yang dikombinasikan sedemikian rupa dengan instruksi-instruksi berbasis HTML atau XHTML dan tak jarang pula disisipi dengan sekelumit bahasa skrip lain.
Berkas tersebut kemudian diterjemahkan oleh browser untuk ditampilkan seperti layaknya sebuah halaman pada monitor komputer.
Halaman-halaman web tersebut dapat diakses melalui jaringan protokol komunikasi yang disebut sebagai HTTP. Ada pula HTTPS yang berfungsi sebagai tambahan untuk meningkatkan aspek keamanan dan aspek privasi yang lebih baik.
Pada dasarnya ada 2 golongan umum dari website. Website statis dan website dinamis. Ada juga website interaktif, namun website yang satu ini bisa digabungkan ke dalam golongan website dinamis.
Website statis
Website statis adalah website yang memiliki isi namun tidak dimaksudkan untuk diperbarui secara berkala sehingga pengaturan ataupun pemutakhiran isi dari website tersebut harus dilakukan secara manual.
Website statis dapat diedit menggunakan empat kategori perangkat lunak:
* Editor teks, seperti Notepad atau TextEdit, di mana konten dan markup HTML dimanipulasi langsung dalam program editor.
* Editor offline WYSIWYG (What You See Is What You Get), seperti Microsoft FrontPage dan Adobe Dreamweaver (sebelumnya Macromedia Dreamweaver), dimana situs diedit menggunakan GUI dan hasil akhir markup HTML dihasilkan secara otomatis oleh perangkat lunak editor.
* Editor berbasis template, seperti Rapidweaver dan iWeb dimana pengguna dapat dengan mudah membuat sebuah website tanpa harus mengetahui bahasa HTML. Pengguna hanya perlu menyunting halaman web seperti halnya halaman biasa, pengguna dapat memilih template yang akan digunakan oleh utilitas ini untuk menyunting berkas yang dibuat pengguna dan menjadikannya halaman web secara otomatis.
Website statis mungkin masih menggunakan side server includes (SSI) sebagai bentuk kenyamanan pengeditan, seperti berbagi bilah menu umum di banyak halaman. Karena perilaku situs terhadap pembaca masih statis, ini tidak bisa dianggap sebagai situs dinamis.
Website dinamis
Website dinamis adalah situs yang sering mengubah atau menyesuaikan dirinya dan secara otomatis. Halaman situs dinamis dihasilkan secara “on the fly” oleh kode komputer yang menghasilkan HTML (CSS bertanggung jawab untuk penampilan dan dengan demikian, adalah file statis).
Ada berbagai macam sistem perangkat lunak, seperti CGI, Java Servlets dan Java Server Pages (JSP), Active Server Pages dan ColdFusion (CFML) yang tersedia untuk menghasilkan sistem web dinamis dan situs dinamis.
Berbagai kerangka kerja aplikasi web dan sistem template web tersedia untuk bahasa pemrograman yang umum digunakan seperti Perl, PHP, Python dan Ruby untuk membuatnya lebih cepat dan lebih mudah untuk membuat website dinamis yang kompleks.
Situs dapat menampilkan keadaan dialog saat ini di antara pengguna, memantau situasi yang berubah, atau memberikan informasi dengan cara yang dipersonalisasi sesuai kebutuhan pengguna individu.
Misalnya, ketika halaman depan situs berita dimuat, kode yang berjalan di server web mungkin menggabungkan fragmen HTML yang tersimpan dengan berita yang diambil dari database atau website lain melalui RSS untuk menghasilkan halaman yang menyertakan informasi terbaru.
Situs dinamis dapat bersifat interaktif dengan menggunakan formula HTML, menyimpan dan membaca kembali cookie browser, atau dengan membuat serangkaian halaman yang mencerminkan riwayat klik sebelumnya.
Contoh lain konten dinamis adalah ketika website ritel dengan basis data produk media memungkinkan pengguna memasukkan permintaan pencarian, mis. untuk kata kunci Beatles. Sebagai tanggapan, konten halaman web secara spontan akan mengubah cara melihat sebelumnya, dan kemudian akan menampilkan daftar produk-produk Beatles seperti CD, DVD, dan buku.
HTML dinamis menggunakan kode JavaScript untuk menginstruksikan browser web cara mengubah konten halaman secara interaktif.
Salah satu cara untuk mensimulasikan jenis website dinamis tertentu sambil menghindari hilangnya kinerja dari memulai mesin dinamis pada basis per pengguna atau per koneksi, adalah secara berkala secara otomatis meregenerasi serangkaian besar halaman statis.
Jika kamu masih bingung dengan penjelasan tentang website dinamis maka kamu tak memikirkannya dulu. Apalagi bagi kamu yang baru mulai belajar membuat website dari awal atau dari nol.
Selain tentang jenis website, ada hal lain yang perlu kamu tahu dalam mempelajari pembuatan website. Hal-hal yang akan berkaitan saat kamu akan mengunggah website ke internet.
Domain dan Subdomain. Babastudio akan menjelaskan sedikit mengenai ini.
Domain
Domain adalah adalah alamat sebuah website, sebenarnya alamat dari situs-situs yang eksis di Internet ini bentuk dasarnya berupa angka-angka, contohnya 17.125.135.147. Bila angka ini diketik di addres bar di browser web maka akan terbuka website Google.
Banyak yang salah kaprah kalau penggunaan angka-angka ini sering disebut dengan alamat IP padahal itu sebenarnya adalah alamat domain.
Domain yang menggunakan kata-kata bertujuan agar penggunaannya lebih mudah diingat daripada kamu harus menghafal urutan angka-angka yang panjang. Oleh sebab itu, para ahli Internet membuat sistem penamaan domain dalam bentuk kata sebagai pengganti urutan angka-angka tersebut.
Apa saja bagian-bagian dari domain?
Nama domain dan extension (ekstensi) yang digunakan. Hanya itu saja.
Contohnya: wikipedia.org, yang menjadi nama domain adalah wikipedia dan ekstensi yang digunakan adalah .org.
Pada awalnya, ekstensi domain tidak begitu banyak. Sekarang ekstensi domain sudah sangat banyak, di antaranya .com, .edu, .co.id, .org dan sebagainya.
Ada juga pemberian extensi terhadap sebuah domain yang tidak boleh sembarangan, diantaranya, .edu, .gov, .go.id dan berbagai ekstensi yang hanya disediakan bagi lembaga pendidikan dan pemerintah saja.
Itulah domain.
Subdomain
Subdomain jika analogikan adalah sebuah buku dimana di dalam buku itu ada bab dan juga ada subbab. Begitu juga dengan domain, subdomain merupakan halaman bagian dari sebuah domain.
Contohnya /; wikipedia.org merupakan sebuah domain dan id adalah subdomain dari domain wikipedia.org tersebut. Dibaca dari kanan ke kiri.
Setelah kamu tahu apa itu domain dan subdomain, kini wawasan kamu sudah bertambah. Nah, kini kita bisa belajar cara membuat website sederhana menggunakan HTML.
Website sederhana di sini bukan yang ada bilah menu, tapi hanya menampilkan tulisan saja. Bagaimana bisa membuat menu jika tidak bisa hanya menampilkan tulisan pada browser.
Mulailah dari hal-hal kecil.
Ayo kita mulai.
Cara Membuat Halaman Web Sederhana dengan HTML
1. Membuat Halaman Web
1. Buka editor teks.
Kamu bisa gunakan editor apa saja yang kamu suka. Tapi ada baiknya kamu gunakan Notepad atau Notepad ++. Kenapa? Karena kedua editor itu murni kosong sehingga kamu harus mengetik semua kode dari awal. Ini bagus sebagai latihan. Pada komputer Windows, Anda bisa gunakan Notepad, atau Notepad ++ sedangkan pengguna Mac bisa menggunakan TextEdit. Pada Windows – Buka menu Start pada windows, ketik notepad, atau notepad ++ dan klik Notepad atau “Notepad ++” di bagian atas jendela. Pada Mac – Klik Spotlight di Mac, ketik textedit, dan klik dua kali TextEdit di bagian atas hasil.
2. Atur jenis dokumen untuk HTML. Ketik dan tekan Enter, lalu ketik dan tekan Enter lagi. Terakhir, ketik dan tekan Enter. Bagian atas dokumen Anda harus menyerupai berikut ini:
3. Tambahkan tab judul untuk halaman web kamu. Ini adalah judul yang akan muncul di tab browser ketika kamu membuka halaman.
Ketik , masukkan judul tab halaman web kamu, ditutup dengan mengetik . Anda kemudian akan menambahkan tag “Head” penutup, yang merupakan , pada barisnya sendiri. Bagian judul seharusnya terlihat seperti ini: Halaman Web kamu . Ketik di bawah tag “Head” yang tertutup. Ini memastikan bahwa sisa teks dokumen Anda akan dianggap sebagai teks website sampai kamu menutup tag “Body”. Kamu harus memiliki yang berikut:
5. Selanjutnya membuat judul halaman. Judul halaman ini adalah judul yang akan muncul di bagian atas website kamu. Untuk membuatnya, ketik . Silakan ketik seperti di bawah.
6. Tambahkan judul tambahan jika kamu mau. Ada enam tag judul berbeda yang dapat kamu buat dengan menggunakan tag hingga .
Misalnya, untuk membuat tiga judul berukuran berbeda berturut-turut, kamu dapat menulis seperti ini: Nama saya Bob. Saya harap Anda suka di sini.
7. Membuat paragraf. Tag paragraf digunakan untuk membuat blok teks yang berbeda. Untuk menempatkan teks dalam paragraf, ketik lalu ketikkan teks diakhiri tag . Ini adalah paragraf saya. Kamu dapat menambahkan beberapa baris paragraf berturut-turut untuk membuat serangkaian paragraf di bawah satu judul.
8. Mengubah warna teks. Kamu dapat mengubah warna teks apa pun dengan membingkai teks dengan tag , pastikan untuk mengetikkan warna yang kamu sukai ke bagian “warna”. Misalnya, untuk mengubah teks paragraf berwarna biru, maka kamu menuliskannya seperti ini: Paus adalah makhluk agung. Tapi itu dulu. Sekarang kamu harus menuliskannya seperti ini: … Kamu dapat mengubah teks apa pun (mis., Header) menjadi warna yang berbeda dengan kumpulan tag ini.
HTML mendukung sejumlah besar warna, jadi jangan ragu untuk bereksperimen dengan nama warna yang berbeda
.
9. Menulis teks dengan format berbeda-beda, huruf tebal, miring, atau garis bawah. Teks tebal, teks miring, dan teks yang digarisbawahi dapat dibuat dengan tag , tag , dan tag .
Kamu juga dapat membuat teks subscript (digunakan untuk hal-hal seperti angka sebelum akar persegi) dan teks superskrip (digunakan untuk hal-hal seperti angka squaring). Teks tebal Teks miring Menggarisbawahi teks Teks langganan Teks superskrip . Menambahkan gambar ke halaman. Kamu dapat menggunakan tag untuk menyematkan gambar ke halaman web kamu. Misalnya, jika URL gambar adalah “/lake”, kamu bisa menuliskannya seperti ini: . Link (Tautan) ke halaman lain. Kamu dapat menambahkan tautan ke website lain dengan menggunakan tag tautan teks , di mana “link” adalah URL untuk website tempat kamu ingin menautkan dan tautkan teks adalah teks yang akan bertindak sebagai tautan. Misalnya, untuk menautkan ke Facebook, kamu akan mengetikkan seperti ini: Ini adalah tautan ke website Facebook . . Tutup tag halaman web. Seperti halnya tag dalam HTML, kamu harus menutup tag dan yang ada di bagian atas dokumen kamu dengan mengetikkan perintah ini: