Cara Membuat Halaman HTML Sederhana

Oleh Uboiz -
Membuat halaman website sebenarnya tidaklah sulit. Yang diperlukan hanyalah mencoba.

Tulisan berikut ini adalah berdasarkan pengalaman penulis, tutorial cepat bagaimana membuat halaman HTML untuk membangun sebuah website sederhana.

Perlu diketahui, bahasa pemrograman dasar dari tampilan website adalah HTML, dan saat tulisan ini ditulis, bahasa HTML telah mencapai versi HTML5. Setiap halaman website sebenarnya ditulis dalam bentuk bahasa ini, dan web browserlah yang bertugas untuk merender dari kode HTML tersebut, agar halaman website tidak tampil berupa kode-kode program saja, melainkan dengan tampilan yang dapat dimengerti dengan mudah oleh mata manusia.

Alat yang diperlukan untuk membuat halaman HTML adalah text editor seperti Notepad. Jika diperlukan, dapat digunakan aplikasi Notepad++, untuk mempermudah mengenali tag-tag HTML. Dengan Notepad++ ini pula, akan dapat dengan mudah mengatur indentasi, bagi programer yang membutuhkan kerapian.

Membuat Halaman HTML

Membuat halaman HTML dapat dilakukan sama seperti membuat file pada umumnya. Jika menggunakan Notepad++, pilih menu File-New, maka akan terbuka file baru seperti gambar di bawah ini:


Kemudian pilih menu File-Save As, maka akan terbuka dialog Save As file. Masukkan nama file index.html, atau nama lainnya dengan ketentuan berekstensi .htm atau html. Jangan lupa untuk memlih Save as type ke All types (*.*) agar file tidak tersimpan kedalam bentuk text normal (.txt).


Struktur Kode HTML

Dalam halaman HTML diketahui 3 hal utama, yaitu elemen, tag, dan attribute. Elemen adalah bagian kode HTML yang terdapat dalam tanda kurung sudut (< >), dan bagian ini adalah bagian yang tidak ditampilkan web browser. Sedangkan bagian yang diluar kurung sudut disebut dengan konten. Yaitu bagian yang ditampilkan oleh web browser.

Elemen HTML yang disertai dengan tanda kurung sudut disamping-sampingnya disebut dengan tag. Contoh tag adalah <div> untuk opening div tag, dan </div> untuk closing div tag. Tag berguna bagi web browser untuk mengerti bagaimana seharusnya konten yang berada diantara opening dan closing tag tersebut harus ditampilkan.

Tag dapat digunakan dengan dua cara. Yaitu dengan opening and closing secara bersamaan, atau sebagai orphans tag. Contoh penggunaan tag ini berturut-turut adalah sebagai berikut:

<p>Tulisan</p>

dan

<image/>

Cara penulisan tag kedua di atas disebut juga sebagai Self-Closing Element.

Sedangkan yang disebut dengan Attribute adalah informasi tambahan tag yang diletakkan di opening tags, dan terdiri dari nama dan nilainya. Misalnya suatu halaman website, memiliki konten berbahasa inggris Amerika, maka attribusinya:

<htm lang=”en-US”></html>

Struktur Halaman HTML

Pada halaman website, terdapat lima element HTML dasar pembentuk halaman website. Lima element tersebut yaitu:

  • Decotype or DTD. Document Type Declaration yang mengindikasikan versi HTML yang digunakan.
  • HTML. Tag yang menunjukkan mulai dan diakhirinya dokumen HTML.
  • Header. Bagian <head>, yang berisi tentang informasi umum halaman web. Seperti judul, metadata, atau link ke file eksternal.
  • Body. Bagian <body>, yang berisi mayoritas konten yang ditampilkan oleh web browser.
  • Charset dan Encoding. Tag yang digunakan untuk mengindikasikan jenis encoding yang digunakan, umumnya digunakan UTF-8. Informasi dalam tag ini diperlukan oleh web browser sebagai informasi ketika melakukan penyimpanan file, dan informasi bagaimana menampilkan jika terdapat kerakter-karakter tertentu.

Berdasarkan pengalaman penulis, ketiga tag elemen html, head, dan body harus ada. Sedangkan untuk decotype, charset dan encoding, jika tidak diinisialisasikan pada halaman web yang bersangkutan, biasanya browser akan menganggapnya sama dengan nilai default bawaan browser itu sendiri. Bahkan umumnya browser akan menambahkan secara otomatis, jika ketiga elemen decotype, charset dan encoding tidak ada pada halaman website tersebut.

Halaman HTML Sederhana

Berikut ini adalah contoh kode halaman HTML sederhana
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″>
        <title>Judul Halaman Website</title>
    </head>
    <body>
        <p>Tulisan Konten</p>
    </body>
</html>

Penulisan di Notepad++ adalah sebagaimana Gambar dibawah ini:


Pilih menu File-Save dan untuk melihat hasilnya dapat dilihat menggunakan browser .



Contoh halaman HTML di atas, adalah contoh halaman website sederhana. Selanjutnya di bawah ini contoh kode HTML yang membutuhkan performatan text dan menyertakan gambar.
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”utf-8″>
        <title>Judul Halaman Website</title>
    </head>
    <body>
        <h1>Pemandangan</h1>
        <p>Ini adalah contoh dari paragraph 1</p>
        <img src="images/gambar1.jpg"/>     
        <p>Ini adalah contoh dari paragraph 2, dengan contoh <i>italic</i>, <b>bold</b>, dan <u>underline</u></p>
    </body>
</html>


Untuk menempatkan gambar1.jpg adalah pada folder images yang berada pada folder dimana index.html disimpan.


Kemudian gambar dibawah ini adalah ilustrasi bagaimana file-file di atas diupload ke server yang telah disewa oleh penulis menggunakan software CoreFTP, melalui jalur FTP.


Setelah terupload, maka akan dapat diakses melalui domain dari server yang bersangkutan. Seperti contoh gambar dibawah ini, yaitu melalui domain edugameapp.com, karena contoh upload di atas, adalah upload ke server edugameapp.

Untuk tuorial yang lain, dalam bentuk video dapat dilihat dibawah ini:


Referensi


Komentar

Posting Komentar



Postingan populer dari blog ini

Apps Script untuk Cetak Sertifikat

Oleh Uboiz -
Gambar
Tutorial pembuatan sertifikat menggunakan Google Docs, Sheets dan Apps Script teleh penulias buat dalam video di bawah ini: Sedangkan berikut ini adalah kode Apps Script yang penulis gunakan di dalam tutorial di atas: function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Cetak Sertifikat"); menu.addItem("Cetak Sertifikat", "generateMode"); menu.addToUi(); } function generateMode() { var idtemplate="1qseLMkdYIzmx0rhkKELF0xxlsD13CS1eCk0MlcTKt_g"; var idtarget="1ZLNksdiilEc0mQ88WOfAuU8_JcMVcO6ewXuJes-UU9I"; var ss = SpreadsheetApp.openById("1j1TArXYzRlVGvB9q7ly7NdyF-nsJcCH6RT3rOQik0yQ"); var so=ss.getSheetByName("Source"); var data=so.getRange("A1:C").getValues().map(function(row){return (row[0]!="")?row:null}).filter(function(cellData){return cellData != null;}); const docTemplate=DocumentApp.openById(idtemplate); var docTarget=DocumentApp.open
Baca selengkapnya

Kumpulan Source Code Greenfoot

Oleh Uboiz -
Gambar
Overview Greenfoot adalah aplikasi berbasis Java yang cocok untuk pemula yang sedang belajar OOP Java. Dukungan image processing 2D dapat menjadi satu daya tarik utama penggunaan aplikasi ini. Sehingga selain gratis, dengan Greenfoot anda akan dapat belajar membuat algorithma pembuatan game, terutama yang berbasis game 2D. Greenfoot Sourcecode Collection adalah kumpulan source code Greenfoot yang terdiri dari 36 skenario. Beberapa scenario menunjukkan tentang bagaimana cara memvisualisasikan contoh-contoh bidang kefisikaan, seperti revolusi bulan, gravitasi, pendulum dan sebagainya. Selain itu beberapa contoh juga mengambil tujuan bagaimana cara membuat animasi 2D dengan lebih banyak menulis program, dibanding pengolahan gambar menggunakan software image processing seperti Corel Draw atau Photoshop. Dengan mempelajari source code ini diharapkan anda dapat menguasai dasar bagaimana melakukan atau menerapkan algorithma dalam bentuk kode program untuk pembuatan game 2D
Baca selengkapnya

Menyembunyikan Failed Load Images di Blogger

Oleh Uboiz -
Gambar
Salah satu cara untuk menyembunyikan gambar yang tidak dapat di load pada suatu halaman Blogger adalah menggunakan fungsi remove element Javascript. Namun cara ini tidak penulis jamin dapat berjalan disemua browser. Setidaknya, dapat mempercantik tampilan posting yang hanya menggunakan gambar thumbnail dari Youtube. Dibawah ini adalah kode Javascript dan bagaimana menambahkan di Blogger. Kode <script> var imgs=document.getElementsByTagName("img"); for(var i=0,j=imgs.length;i<j;i++){ imgs[i].onerror = function(e){ this.parentNode.removeChild(this); } } </script> Demo
Baca selengkapnya

Kode Greenfoot Game Flappy Bird

Oleh Uboiz -
Gambar
Penasaran membuat game Flappy Bird, penulis mencoba belajar membuat clone game tersebut menggunakan Greenfoot. Secara keseluruhan, game yang penulis buat dapat di download pada link dibawah ini, dan penulis distribusikan hanya untuk tujuan belajar: CodeFlappy di Google Drive Perlu diperhatikan, assets atau gambar-gambar yang penulis sertakan dalam kode di atas, lebih banyak penulis buat sendiri.  Penulis sengaja membuatnya berbeda dari sumber aslinya, sourabhv (2014) di Github.com, dengan tujuan menghindari pelanggaran hak cipta. Semoga game Flappy Bird clone yang penulis buat menggunakan Greenfoot ini dapat berguna, terutama bagi mereka yang sedang memulai belajar bahasa pemrograman menggunakan Greenfoot. Referensi sourabhv. 2014. FlapPyBird. https://github.com/sourabhv/FlapPyBird . Diakses tanggal 9 Juli 2019.
Baca selengkapnya

Algorithma Coretan Abstrak dengan HTML5 Canvas

Oleh Uboiz -
Gambar
Coretan dengan gradasi sisi kiri dan sisi kanan, dapat dibuat dengan fungsi fillRect dengan lebar 1x1 pixel. Algorithmanya adalah membentuk garis horizontal dengan tinggi juga 1 pixel saja, dengan lebar acak mulai 0 sampai 500 pixel, dengan semakin ke pinggir nilai alphanya semakin transparan. Sedangkan untuk penggambarannya dibagi menjadi tiap seksi. Dimana tiap seksi menggambar 50 garis, dengan posisi dan rotasi tidak jauh dari posisi dan rotasi utama. Setting ulang posisi dan rotasi utama dilakukan tiap seksi, sampai kurang lebih 100 kali. Berikut ini adalah kode HTML5 Canvas yang mengimplementasikan algorithma di atas: <html> <head> <title>Random Pixel</title> </head> <body> <canvas id= "myCanvas" width= "1024" height= "768" > </canvas> <script> var canvas = document.getElementById( "myCanvas" ); var ctx = canvas.getContext( "2d" ); ctx.
Baca selengkapnya

Kebodohan Karyawan Menyalahkan Sistem

Oleh Uboiz -
Untuk kesekian kalinya, penulis melihat, terdapat karyawan yang dengan omong besarnya, menyalahkan sistem yang ada di instansi di mana penulis bekerja. Mulai dari struktur database, kebijakan atasan, dan lain sebagainya. Salah. Semua salah, katanya. Padahal, menurut penulis, justru dialah yang munafik. Kalau memang salah, kenapa juga masih mau di gaji dari instansi ini. Kenapa tidak berani mengundurkan diri, jika memang merasa di dzolimi. Kenapa masih mau mengerjakan pekerjaan, yang dia anggap dari pola pikir 'orang miskin'. Bagi penulis, dengan pola pikir seperti itu, dialah yang justru menambah jumlah orang bodoh di instansi ini, bukan memberikan solusi. Miris. Harusnya dia menyadari, jika instansi menggaji dirinya, sebenarnya adalah untuk memperbaiki hal-hal yang dia anggap salah tersebut. So, what will you do, if that actually your job where the reason you have been paid here? Oleh karena itu, alangkah baiknya ketika perekrutan karyawan baru, setidaknya lebih selektif lagi
Baca selengkapnya

Algorithma Bilangan Prima dengan Javascript

Oleh Uboiz -
Gambar
Untuk belajar pemrograman tingkat dasar, Javascript dapat digunakan untuk mengimplementasikan perhitungan sederhana. Di bawah ini adalah contoh kode Javascript untuk mencari deret bilangan prima sampai angka yang diinputkan. Selain kode berisi algorithma bagaimana mendeteksi bilangan prima, kode javascript juga berisi cara mendeteksi input berupa bilangan angka atau tidak. <html> <head> <title>Prime Algorithm</title> </head> <body> Input : <input type= "text" id= "input" /><button type= "button" onclick= "CalcPrime()" >Calculate</button><br/><br/> Hasil : <span id= "hasil" ></span> <script> function CalcPrime() { var a=document.getElementById( "input" ).value; document.getElementById( "hasil" ).innerHTML= "" ; if (!isNaN(a) && a>=0){ for (i=2;i<a;i++){ var ketemu= false
Baca selengkapnya

Checking Data yang Belum Dimasukkan dalam Daftar Menggunakan Query Google Sheet

Oleh Uboiz -
Gambar
Seringkali untuk urusan data, kita diminta untuk mengecek apakah data sudah dimasukkan atau belum. Biasanya keperluan ini untuk mengecek data terbaru. Misalnya mengecek apakah email siswa sudah masuk daftar atau belum Salah satu caranya adalah menggunakan Query formula berikut ini: =IFNA(QUERY(B2:B,"SELECT B WHERE B IS NOT NULL AND B<>'"&JOIN("' AND B<>'",QUERY(D2:D,"",0))&"'",0)) Di mana B dan D adalah kolom sheet yang implementasinya dapat dilihat pada video dibawah ini: Sedangkan jika diperlukan highlight data untuk menandai data mana saja yang belum masuk dapat menggunakan Conditional Formatting Google Sheet sebagaimana video dibawah ini:
Baca selengkapnya

Mencoba Submit Theme di Wordpress.org

Oleh Uboiz -
Gambar
Sangat penasaran sekali, bagaimana agar theme yang penulis buat, dapat tampil menjadi salah satu theme yang ditawarkan pada halaman tampilan Wordpress. Baru pada tahun 2023 ini, penulis berkesempatan untuk mengoprek lebih dalam Wordpress, mulai dari theme sampai plugin. Belum sampai ke core. Hal ini berkat serangan virus "Slot Gacor" yang beberapa bulan sebelum tulisan ini ditulis, menyerang beberapa website yang penulis kelola. Di mana kode injeksinya, penulis temukan di theme dan plugin yang digunakan. Bukan pada core Wordpress. Artinya, dari serangan tersebut adalah yang membuat penulis semakin berkeinginan untuk membuat theme dan plugin sendiri untuk Wordpress. Maklum, karena pada waktu itu, posisi penulis bukan yang membangun website dari awal, sehingga plugin yang digunakan, adalah sesuai kebutuhan tenaga IT sebelumnya. Dan Wordpress adalah aturan permintaan instansi pemilik website. Ngomong-ngomong bagaimana bisa terkena "Slot Gacor", apakah karena tenaga IT
Baca selengkapnya

Generate Karakter Acak dan Menempatkannya di Sel Google Sheets dengan Apps Script

Oleh Uboiz -
Gambar
Untuk menandai sel dengan susunan karakter random, yang mana kursor mouse sedang menandainya di sel tersebut pada Google Sheets, kita dapat menggunakan mengunakan Apps Script berikut ini: Kode function onOpen() { const ui = SpreadsheetApp.getUi(); const menu = ui.createMenu("Keperluan"); menu.addItem("Generate Random", "createRandom"); menu.addToUi(); } function makeRandomChar(length) { var result = ""; const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@"; let counter = 0; while (counter < length) { result += characters.charAt(Math.floor(Math.random() * characters.length)); counter += 1; } return result; } function generateRandom() { return makeRandomChar(10+Math.floor(Math.random() *40)); } function createRandom() { var sheet=SpreadsheetApp.getActive(); sheet.getActiveSheet().getCurrentCell().setValue(""+generateRandom()); } Kode d
Baca selengkapnya