Advertisement
Your Ads Here
Untuk kalian yang beranggapan jika membuat website itu sulit, dengan menyelesaikan tutorial yang kami buat, anggapan itu tidak berlaku selagi kalian bersungguh-sungguh untuuk memplajarinya.
Meskipun tutorial ini masih belum bisa membahas secara kesulurahan bagaimana membuat website, tapi kalian memahami bagaimana dasar membuat webiste dengan cara yang benar.
Berikut langkah Belajar Dasar HTML
1. Persiapan
Hal yang pertama dibutuhkan untuk memplajari HTML tentunya adalah sebuah browser, seperti yang kalian gunakan untuk membuka artikel ini.
Kalian dapat menggunakan berbagai jenis browser yang biasa kalian gunakan, seperti Mozilla, Chrome, Safari, dll.
Untuk aplikasi pendukung lain kallian hanya perlu memerlukan text editor sederhana yang ada pada windows, yaitu notepad. Aplikasi ini dapat kalian buka melalui Start menu diwindows. Disarankan untuk memudahkan anda megelola code HTML, kami menyarankan kalian menggunakan Notepad++, yang bisa kalian cari di Google.
Jadi untuk mempelajari HTML kalian hanya memerlukan sebuah browser dan text editor saja.
2. Pahami Web browser
Web browser adalah sebuah aplikasi yang dapat digunakan untuk mengakses dan menampilkan halaman website.
Untuk halaman website biasanya dibuat dengan HTML, XML dan lainya.
Browser akan menerjemahkan sebuah halaman website yang dikirimkan melalui HTTP (Hypertext Transfer protocol) kedalam tampilan yang dipahami manusia.
3. Pahami Element, Tag, dan Attribut
Element pada HTML membentuk sebuah struktur dan memberitahu browser untuk halaman website yang akan ditampilkan. Biasanya untuk element terdiri dari Tag pembuka, konten, dan tag penutup.
Tag sendiri digunakan untuk menandai sebuah element pada bagian awal dan akhir, dengan format yang sama diawali dengan tanda < dan ditutup dengan >.
Untuk tag terdiri dari dua jenis, yaitu tag pembuka <html> dan tag penutup </html>. Dua jenis tag ini hanya dibedakan dengan tanda garis miring.
Contoh :
Sebagai contoh untuk element td (table) terdiri dari semua code mulai dari tag pembuka <td> dan penutup </td>.
Contoh Code :
<td>halaman</td>
Untuk membuat sebuah heading atau subjudul, digunakan element h1, h2, h3, h4, h5, atau h6. Dimana kepanjangan h adalah heading. Untuk ukuran paling besar diawali dengan h1 samapai h6 adalah ukuran terkecil.
<h1>Contok code HTML</h1>
<h2>Contok code HTML</h2>
<h3>Contok code HTML</h3>
<h4>Contok code HTML</h4>
<h5>Contok code HTML</h5>
<h6>Contok code HTML</h6>
Dibrowwser akan menampilkan seperti gambar di bawah:
Contoh code HTML
Contoh code HTML
Contoh code HTML
Contoh code HTML
Contoh code HTML
Seperti yang terlihat dari code diatas, pada sebuah element terdapat tag pembuka dan tag penutup. Ini tidak berlaku untuk beberapa element seperti code untuk membuat ENTER atau baris aru, yaitu <br>.
4. Attribut
Setelah kalian memahami element dan tag, kalian perlu memahami apa itu attribut pada. Seperti diketahui jika sebuah element berupa struktur pada HTML yang berfungsi untuk memberitahu browser mengenai apa yang akan ditampilkan.
Aturan penulisan sebuah attribut:
- Nama attribut diikuti oleh tanda sama dengan =.
- Nilai attribut diapit oleh dua tanda petik pembuka dan penutup.
- jika lebih dari satu attribut, diberi jarak spasi.
<p>ini adalah contoh penerapan atribut <a href="https://pediaakhir.blogspot.com/" title="Halaman belajar">belajar terbaik</a></p>
dari contooh diatas untuk element <a> berguna untuk memberikan batasan pada Hypertext dengan beberapa attribut di dalamnya:
- Href - Ini merupakan attribut untuk menentukan sebuah website, dimana ketika tautan diklik akan diarahkan ke halaman sesui dengan tautan yang diisi, pada contoh ini adalah halaman href="https://pediaakhir.blogspot.com/".
- title - Attribut ini berguna untuk menambahkan informasi pda tautan ketika kursor mause diarahkan pada tautan. Pada contoh ini untuk title yang digunakan adalah title="Halmat belajar".
5. Struktur HTML
setelah anda memahami element HTML, selanjutnya adalah menggabungkannya menjadi satu di dalam dokumen HTML.
Coba perhatikan code berikut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Halaman Petama</title>
</head>
<body>
<p>Ini adalah halaman petama</p>
</body>
</html>
Penjelasan:
- <!DOCTYPE html> - merupakan deklarasi ari type dokumen
- <html></html> - element utama karena semua element berada didalamnya.
- <head></head> - berfugsi untuk memasukan konten yang tidak ingin ditampilkan. Konten tersebut dapat berupa keyword, deskripsi, CSS, dll.
- <meta charset="utf-8"> - Berfungsi untuk memberitahu browser mengenai pengkodean karakter yang sesui dengan ketentuan UTF-8.
- <title></title> - Merupakan judul dari halaman website yang muncul pada bagian tab browser.
- <body></body> - Berisi konten yang ditampilkan pada browser ketika pengunjung mengakses halaman tersebut, contohnya seperti kalian mengakses artikel ini.
Advertisement
Your Ads Here
0 Comments
EmoticonEmoticon