12 Langkah Cara Membuat Website Sederhana Menggunakan HTML

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

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
    
    
     <!doctype html>
    
    
    dan tekan  Enter, lalu ketik
    <html>
    
    dan tekan  Enter lagi. Terakhir, ketik
    <head>
    
    dan tekan  Enter. Bagian atas dokumen Anda harus menyerupai berikut ini: 
       

            <!Doctype html>
            < html>
            < head>
       


  3. Tambahkan tab judul untuk halaman web kamu. Ini adalah judul yang akan muncul di tab browser ketika kamu membuka halaman.
    Ketik <title>, masukkan judul tab halaman web kamu, ditutup dengan mengetik </ title>. Anda kemudian akan menambahkan tag "Head" penutup, yang merupakan </head>, pada barisnya sendiri.

    Bagian judul seharusnya terlihat seperti ini:
        
      <title> Halaman Web kamu </title>
      </head>


  4. Ketik <body> 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:
        
          <body>


  5. Selanjutnya membuat judul halaman. Judul halaman ini adalah judul yang akan muncul di bagian atas website kamu. Untuk membuatnya, ketik <h1>, tambahkan judul yang kamu inginkan, lalu tutup dengan tag </ h1>. Silakan ketik seperti di bawah.
        
       <h1> Selamat Datang di Halaman Saya! </ h1>


  6. Tambahkan judul tambahan jika kamu mau. Ada enam tag judul berbeda yang dapat kamu buat dengan menggunakan tag <h1> </ h1> hingga <h6> </h6>.
    Misalnya, untuk membuat tiga judul berukuran berbeda berturut-turut, kamu dapat menulis seperti ini:
        
       <h1>  Selamat Datang di Halaman Saya! </ h1>
       <h2>  Nama saya Bob. </ h2>
       <h3>  Saya harap Anda suka di sini. </h3>


  7. Membuat paragraf. Tag paragraf digunakan untuk membuat blok teks yang berbeda. Untuk menempatkan teks dalam paragraf, ketik <p> lalu ketikkan teks diakhiri tag </p>.
        
       <p> Ini adalah paragraf saya. </p>


    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 </font>, pastikan untuk mengetikkan warna yang kamu sukai ke bagian "warna". Misalnya, untuk mengubah teks paragraf berwarna biru, maka kamu menuliskannya seperti ini:
        
       <p> <font color = "blue"> Paus adalah makhluk agung. </font> </ p>


    Tapi itu dulu. Sekarang kamu harus menuliskannya seperti ini:
        
      <span class = "color"  style = "color: (warna)"> ... </span>


    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 <b> </ b>, tag <i> </ i>, dan tag <u> </ u> . 
    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).
        
      <b> Teks tebal </ b>
      <i> Teks miring </ i>
      <u> Menggarisbawahi teks </u>
      <sub> Teks langganan </sub>
      <sup> Teks superskrip </sup>


  10. Menambahkan gambar ke halaman. Kamu dapat menggunakan tag <img src = "URL" > </ img> untuk menyematkan gambar ke halaman web kamu. Misalnya, jika URL gambar adalah "www.mypicture.com/lake", kamu bisa menuliskannya seperti ini:
        
       <img src =" www.mypicture.com/lake"< </ img>


  11. Link (Tautan) ke halaman lain. Kamu dapat menambahkan tautan ke website lain dengan menggunakan tag <a href="link"> tautan teks </a>, 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:
        
       <a href="www.facebook.com"> Ini adalah tautan ke website Facebook </a>.


  12. Tutup tag halaman web. Seperti halnya tag dalam HTML, kamu harus menutup tag <body> dan <html> yang ada di bagian atas dokumen kamu dengan mengetikkan perintah ini:
        
       </body>
       </ html>


  13. Tinjau halaman web kamu. Kamu dapat menambahkan lebih banyak paragraf, judul, dan teks di mana saja pada halaman di antara tag <body> </ body>. Salah satu contoh dari halaman web yang telah selesai adalah sebagai berikut:
        
      <! DOCTYPE html>
      <html>
      <head>
      <title> Websiteku Keren </title>
      </head>
      <body>
      <h1> Selamat Datang di Halaman Saya! </h1>
      <p> Ini adalah halaman penggemar untuk website ku. Anggap rumah sendiri! </p>
      <h2> Tanggal Penting </h2>
      <p> <i> 15 Januari 2019 </i> - Ulang Tahun wikiHow </p>
      <h2> Tautan </h2>
      <p> Berikut ini tautan ke wikiHow: <a href="www.wikihow.com"> www.wikihow.com </a> </p>
      </ body>
      </ html>


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

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

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

  3. 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).

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

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

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

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

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

Setelah kamu tahu cara membuat website sangat sederhana maka kamu bisa beranjak ke tahap selanjutnya. Tapi perlu diingat bahwa langkah-langkah diatas akan selalu kamu temui dalam setiap pembuatan website, dari yang sederhana hingga yang paling rumit.
Kamu bisa mempelajari cara membuat website yang rumit sendiri atau dengan belajar di sebuah tempat kursus jika kamu tak kuliah di jurusan Teknik Informatika (IT).
Pilihlah tempat kursus yang memiliki pengajar-pengajar yang telah berpengalaman di bidangnya. Babastudio adalah salah satunya. Tempat kursus yang telah mendapatkan banyak penghargaan ini bisa membimbingmu membuat website dengan benar.
Jangan ragu lagi memilih Babastudio sebagai tempat belajarmu.


NAMA PESERTA TEST & PENERIMA BEASISWA

  
  
Loading...



11 January 2019 ADMIN Bagikan di Twitter Bagikan di Facebook Bagikan di Google+ Bagikan di Google+

Artikel menarik lainnya



Previous Post Belajar Internet Marketing Itu Mudah, Mau Tahu Caranya? Ini Dia Next Post 7 Tips Memilih Tempat Kursus Internet Marketing