Dasar-dasar membuat website html #1: Struktur umum

Dasar-dasar membuat website html #1: Struktur umum

resellerhosting murah, ceap reseller hosting

Sebelum kita belajar membuat website dengan HTML, terlebih dahulu kita wajib mengetahui bagaimana struktur penulisan HTML. Dalam tutorial kali ini kita akan belajar mengenal struktur penulisan HTML. Kami sarankan untuk menggunakan editor manual seperti sublimetext atau notepad++ dan hindari menggunakan tools seperti dreamweaver agar anda lebih memahami tutorial ini.

Tutorial Bootstrap 2: Mengenal system Grid
Kiat-Kiat Sukses Membangun Toko Online
Menggunakan Klasik Editor di WordPress 5 Tanpa Plugin tambahan

Sebelum kita belajar membuat website dengan HTML, terlebih dahulu kita wajib mengetahui bagaimana struktur penulisan HTML. Dalam tutorial kali ini kita akan belajar mengenal struktur penulisan HTML. Kami sarankan untuk menggunakan editor manual seperti sublimetext atau notepad++ dan hindari menggunakan tools seperti dreamweaver agar anda lebih memahami tutorial ini.

Struktur umum HTML

1. Menambahkan TAG Doctype

Kita mulai membuat script HTML dengan menambahkan baris berikut di editor anda:

<!doctype html>

tag diatas menjelaskan bahwa jenis dokumen yang berada dibawah tag terbebut adalah dokumen HTML. save file dengan nama “index.html” tanpa tanda petik.

2. Menambahkan TAG html

Kembali pada file index.html yang tadi kita buat, tambahkan tag HTML di baris berikutnya:

<html lang="en">
 
</html>

Kalau kita lihat, tag HTML sedikit berbeda dengan tag doctype. Tag HTML membutuhkan penutup </html> sedangkan tag doctype tidak. Tambahan lang=”en” dalam tag HTML tidak bersifat wajib. tambahan ini memberitahukan pada browser bahwa bahasa lokal yang digunalan adalah bahasa inggris. anda bisa mengganti nilai lang dengan bahsa yang lain, misalnya lang=”id” untuk bahasa indonesia. Jika digabungkan dengan tag sebelumnya, script lengkapnya menjadi seperti ini:

<!doctype html>
<html lang="en">
 
</html>

3. Penambahan TAG Head

Kembali pada file index.html yang tadi kita buat, sekarang kita tambahkan TAG head seperti di bawah ini:

<head>
 
</head>

Tag HEAD ini sama seperti tag HTML yang membutuhkan penutup </head>. Fungsi utama tag head ini adalah sebagai header dari file html kita yang berisi file CSS dan javascript yang dibutuhkan untuk mempercantik tampilan desain web yang kita buat. Selain file CSS dan javascript, dalam TAG HEAD ini juga berisi meta tag yang berisi informasi judul web, deskripsi web, opengraph untuk keperluan sosial media, dan meta tag lain yang dibutuhkan.

Menambahkan TITLE di dalam TAG HEAD

untuk menambahkan judul atau title di dalam tag HEAD, cukup tambahkan script berikut:

<title>Tulis Judul Halaman Web Anda disini</title>

Title ini akan tampil di dalam TAB Browser Anda dan berfungsi juga sebagai judul utama halaman web anda.

Menambahkan Meta tag description di dalam TAG HEAD

untuk menambahkan meta tag description di dalam tag HEAD, cukup tambahkan script berikut:

<meta name="description" content="Tulis deskripsi web anda disini">

Meta tag description ini tidak terlihat di browser dan hanya berfungsi sebagai penunjang SEO yang nantinya akan muncul di deskripsi search engine seperti google.

Setelah kita tambahkan beberapa script tersebut, isi file index.html selengkapnya menjadi sebagai berikut:

<!doctype html>
<html lang="en">
 <head>
<title>Tulis Judul Halaman Web Anda disini</title>
 <meta name="description" content="Tulis deskripsi web anda disini">
</head>


</html>

Setelah anda memahami tutorial dasar-dasar membuat website dengan html di bagian Struktur HTML ini, langkah berikutnya adalah memilih code editor yang tepat untuk Anda.

Loading...
loading...

COMMENTS

WORDPRESS: 0
DISQUS: 0