Cara Membuat Website Sederhana HTML

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.

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 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 dim

aksudkan 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 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.
• Editor teks, seperti Notepad atau TextEdit, di mana konten dan markup HTML dimanipulasi langsung dalam program editor.

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.

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.

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 http://id.wikipedia.org/; 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.

Cara membuat website sederhana HTML

1. Membuat Halaman Web

• 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.

• 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:

        
        < html>
        < head>
    

• Tambahkan tab judul untuk halaman web kamu. Ini adalah judul yang akan muncul di tab browser ketika kamu membuka halaman. KETIK

• 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:

• Selanjutnya membuat judul halaman. Judul halaman ini adalah judul yang akan muncul di bagian atas website kamu. Untuk membuatnya, ketik

Tambahkan judul yang kamu inginkan, lalu tutup dengan tag . Silakan ketik seperti di bawah.

Selamat Datang di Halaman Saya! 

• Tambahkan judul tambahan jika kamu mau. Ada enam tag judul berbeda yang dapat kamu buat dengan menggunakan tag.

Misalnya, untuk membuat tiga judul berukuran berbeda berturut-turut, kamu dapat menulis seperti ini:

 
    
  Selamat Datang di Halaman Saya!  
    
  Nama saya Bob.  
    
  Saya harap Anda suka di sini. 
 
 

• 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.

• 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.

• 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 "www.mypicture.com/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:

• Tinjau halaman web kamu. Kamu dapat menambahkan lebih banyak paragraf, judul, dan teks di mana saja pada halaman di antara tag . Salah satu contoh dari halaman web yang telah selesai adalah sebagai berikut:

 
    
    
    
    
    
    
   
 Selamat Datang di Halaman Saya! 
 
   
 Ini adalah halaman penggemar untuk website ku. Anggap rumah sendiri! 
 
   
 Tanggal Penting 
 
   
  15 Januari 2019  - Ulang Tahun wikiHow 
 
   
 Tautan 
 
   
 Berikut ini tautan ke wikiHow:  www.wikihow.com  
 
    
    
 

• Lakukan perubahan pada menit terakhir. Jika kamu merasa ada yang salah dengan kode kamu, perbaiki kesalahannya sebelum melanjutkan. Setelah kamu yakin bahwa HTML kamu sudah sesuai harapan, kamu dapat melanjutkan ke bagian selanjutnya...

2. Menyimpan dan Membuka Halaman Web Anda

• Khusus pengguna Mac, konversikan dokumen kamu ke teks biasa di Mac. Jika kamu pengguna Mac, klik item menu Format di bagian atas layar, lalu klik Make Plain Text di menu drop-down. Langkah ini tidak perlu dan tidak mungkin dilakukan pada Windows.

• Buka menu "Simpan". Karena kamu membuat dokumen teks baru untuk menulis halaman web maka kamu dapat menekan Ctrl + S (Windows) atau ? Command + S (Mac) untuk menyimpan.

Kamu juga dapat mengeklik File dan kemudian klik Save As di menu drop-down. Ini berfungsi pada komputer Windows dan Mac.

• Masukkan nama untuk dokumen HTML kamu. Ketikkan nama apa pun yang kamu inginkan untuk menamai dokumen kamu ke dalam kotak teks "File name" (Windows) atau "Name" (Mac).

• Ubah jenis file dokumen. Kamu harus mengubah dokumen dari file teks menjadi file HTML:

Windows - Klik kotak tarik-turun "Save as type ", pilih “All File”, lalu ketikkan .html di akhir nama file.

Mac - Ganti .txt di akhir nama file dengan .html sebagai gantinya.

• Klik Save. Ada di bagian bawah jendela. Melakukannya akan membuat file HTML. File HTML biasanya terbuka dengan browser web default kamu.

• Tutup editor teks kamu. Kamu sudah siap untuk membuka file HTML kamu di browser kamu agar dapat melihat halaman web kamu.

• Buka dokumen HTML dengan browser kamu. Dalam kebanyakan kasus, kamu harus mengeklik dua kali dokumen HTML untuk membukanya. Jika telah mengeklik dua kali dokumen menghasilkan kesalahan, lakukan hal berikut:

Windows - Klik kanan dokumen, pilih “Open With”, dan klik browser pilihan kamu.Mac - Klik dokumen sekali, klik File, pilih “Open With”, dan klik browser pilihan kamu.

• Edit dokumen HTML jika diperlukan. Kamu mungkin melihat kesalahan di halaman HTML kamu. Untuk mengubahnya, kamu dapat mengedit teks dokumen HTML:

Pada Windows, kamu dapat mengeklik kanan dokumen dan klik Edit di menu drop-down yang muncul (jika kamu telah meng-install Notepad ++ dan membuatnya sebagai default maka file akan otomatis terbuka).

Di Mac, kamu ingin mengeklik dokumen untuk memilihnya, klik “File”, pilih “Open With”, dan klik TextEdit. kamu juga dapat menyeret dokumen ke dalam TextEdit.

Sumber: https://bit.ly/38SaWuy

Share:

Read More