Membangun Website Sederhana dengan Kode HTML (Hyper Text Markup Language)

Assalamu'alaikum, Hello guys, kali ini saya akan menjelaskan bagaimana para desainer web membangun sebuah situs web (website), dan saya juga akan mengajak kalian kenalan dengan yang namanya HTML (bukan nama orang ya wkwk). Mungkin kata HTML ini udah familiar ya di kalangan orang-orang yang kerjaannya mendesain web. Bagi para blogger juga minimal harus tau sedikit-kurangnya tentang HTML, karena ngeblog itu bukan sekedar membuat postingan.

HTML

Sebuah halaman website dibangun dengan bahasa atau kode yang disebut dengan HTML. Jika kalian ingin melihat kode HTML dari sebuah situs web, kalian bisa tekan Ctrl + U sehingga keluar jendela (tab) baru yang berisi kode HTML seperti pada gambar di bawah ini.

HTML Codes

1. PENGERTIAN HTML

HTML adalah singkatan dari Hypertext Markup Language. HTML adalah bahasa dasar untuk menampilkan halaman web pada web browser. Sebuah file HTML merupakan sebuah file teks berisi tag-tag markup. HTML bukanlah bahasa pemrograman (programming language), melainkan bahasa markup (markup language), disebut demikian karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Markup language ini merupakan sekumpulan tag. Tag inilah yang digunakan untuk menampilkan halaman website dalam tampilan tertentu.

2. Tag, Elemen, dan Atribut HTML

Anatomy of an HTML Element

Tag, Elemen, dan Atribut merupakan dasar dari HTML, dan dasar dari seluruh halaman web yang ada di internet. Berikut ini penjelasannya.

a. Tag HTML

Tag merupakan markup yang terdiri dari nama tag yang diapit oleh karakter "<" dan ">". Tag biasanya ditulis secara berpasangan yaitu tag pembuka dan tag penutup. Format dasar penulisan tag HTML adalah sebagai berikut.

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Hampir semua tag di dalam HTML ditulis secara berpasangan, maksudnya jika ada tag pembuka, harus ada tag penutupnya. Contoh tag yang berpasangan :

<title>...</title>

Keterangan :
<title> adalah contoh tag pembuka
</title> adalah contoh tag penutup

"Bedanya cuma di tanda slash ( / ) kok guys!"

b. Element HTML

Sebuah elemen HTML terdiri dari tag pembuka - isi - tag penutup. Contoh elemen html yaitu :

<body>Ini adalah HTML saya.</body>

Elemen di atas terdiri dari :

- Tag pembuka <body>

- Isi (Ini adalah HTML saya.) : yaitu semua yang ada di antara tag pembuka dan tag penutup.

- Tag penutup </body>

Isi elemen bisa berupa elemen lainnya. Jadi, sebuah elemen dapat terdiri dari elemen-elemen lain (nested element). Dalam "nested element", elemen tag yang ditulis tidak boleh saling tumpang tindih. Berikut ini contoh penulisan yang benar.

<body>Ini adalah HTML saya. <b>Teks ini ditebalkan</b> </body>

c. Atribut HTML

Setiap elemen HTML dapat memiliki atribut. Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi seperti warna dari text, besar huruf dari text, dan lain-lain. Penulisan atribut diletakkan pada tag pembuka setelah nama tag. Format penulisan atribut adalah sebagai berikut.

nama_atribut="nilai_atribut"

Berikut ini contoh elemen yang ada atributnya.

<a href="http://www.google.com">Ini adalah contoh link</a>

Keterangan :
- href adalah nama atribut (attribute name)
- http://www.google.com adalah nilai atribut (attribute value)

3. Struktur Dasar HTML

HTML Main Structure

Struktur paling dasar dari sebuah HTML terdiri dari tag DTD atau DOCTYPE, tag html, tag head, dan tag body. Berikut struktur paling dasar yang harus ada dalam HTML.

<!DOCTYPE html>
<html>
<head>

<title>

Belajar HTML

</title>

</head>
<body>

Ini adalah HTML pertama saya

</body>
</html>

a. DOCTYPE
DTD (Document Type Declaration) berfungsi memberitahu web browser bahwa dokumen yang akan diproses adalah HTML. Contohnya bisa dilihat gambar di atas.

b. Tag <html>

Ini adalah tag yang paling utama dari tag html yang lain. Tag ini berfungsi untuk memulai dan mengakhiri susunan kode HTML.

c. Tag <head>
Tag <head> biasanya berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode lain yang tidak tampil di browser, Salah satunya tag <title> yang digunakan untuk menampilkan judul dari sebuah halaman web, Contohnya yaitu "<title> Belajar HTML </title>", berfungsi menampilkan judul pada tab browser.

d. Tag <body>
Tag ini terletak setelah tag </head> yang berisi semua elemen yang akan ditampilkan pada halaman web, seperti paragraf, link, gambar, video, dan lain sebagainya.

LANGKAH-LANGKAH MEMBUAT WEBSITE DENGAN SOFTWARE

Dreamweaver

Software yang dapat digunakan untuk membuat website sangat banyak, beberapa diantaranya adalah Adobe Dreamweaver, Notepad++, dan Brackets. Berikut ini langkah-langkah membuat website secara umum.

1. Membuat Sketsa Desain
Sebelum melakukan pengkodean, kita harus membuat sketsa desain situs web kita nantinya akan seperti apa dan bagaimana tampilannya.

2. Membuat Layout DesainHal ini dapat dilakukan menggunakan software seperti Adobe Photoshop, Adobe Illustrator, Adobe Fireworks, dan lain sebagainya. Layout website secara umum terdiri dari Header, Navigation Menu, Article, Sidebar, dan Footer.

3. Menyiapkan Gambar yang akan ditampilkan pada Website
Setelah layout jadi, maka yang harus dilakukan adalah menyiapkan gambar-gambar yang akan ditampilkan pada website. Contohnya seperti logo web, gambar background, gambar pendukung artikel maupun widget, ikon-ikon, dan lain sebagainya.

4. Menyiapkan Animasi
Agar sebuah website terlihat menarik, kita bisa membuat dan menambahkan animasi bergerak pada tampilan website.

5. Membuat HTML
Setelah menyiapkan semua objek yang akan ditampilkan pada website, langkah selanjutnya adalah merapikan layout desain seperti menempatkan beberapa tombol dan gambar, menambah teks, mengedit script HTML, dan yang utama adalah membuat layout form ke dalam format HTML.

6. Menambah Programming Script
Programming script dapat dibuat dengan menggunakan ASP, PHP, Visual Basic, dan lain sebagainya. Kalau sudah terkait dengan pengkodean pastinya kamu harus memiliki kemampuan web programming

7. Dapatkan Nama Domain Sendiri
Domain adalah nama unik yang diberikan untuk mengidentifikasi alamat IP (IP adress server komputer seperti web server di internet. Nama domain hanyalah sebuah nama yang terdaftar resmi, dan memperoleh nama domain bukan berarti kamu sudah memiliki website. Untuk memperoleh nama domain, kita harus membayar biaya sewa tahunan sebagai hak penggunaan nama tersebut.

8. Melakukan Upload dan Memilih Web Hosting
Agar dapat diakses di internet oleh semua orang di seluruh dunia, file html beserta script dan gambar-gambar pendukung harus di-upload ke suatu tempat (hosting). Hosting adalah penyewaan tempat untuk menampung data-data yang diperlukan oleh sebuah website, sehingga membuat website kita dapat diakses oleh semua orang lewat internet. Data-data yang dimaksud dapat berupa file, gambar, email, aplikasi/program/script maupun database.

Sekian dari saya, kurang lebih dan jika ada kesalahan mohon maaf.
Wassalamualaikum.

Membangun Website Sederhana dengan Kode HTML (Hyper Text Markup Language)

0 Response to "Membangun Website Sederhana dengan Kode HTML (Hyper Text Markup Language)"

Posting Komentar