Pengertian Dasar HTML lengkap Pemula

Advertisement
Your Ads Here
TECHPEDIA - Tutorial ini dibuat kalian yang ingin belajar HTML untuk membuat website dari dasar. Supaya anda kalian memahaminya, pastikan membacanya dan sambil praktek dengan urutan dari awal.




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:


  1. Nama attribut diikuti oleh tanda sama dengan =.
  2. Nilai attribut diapit oleh dua tanda petik pembuka dan penutup.
  3. jika lebih dari satu attribut, diberi jarak spasi.
Berikut contoh element yang disertai sebuah attribut:

<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".
Untuk mempercapat pemahaman kalian dalam belajar HTML dasar ini, silahkan ikuti langkah selanjutnya.

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.
Mungkin itu saja penjelsan dasar HTML dari kami, semoga dengan adanya artikel ini dapat memahami kalian untuk lebih mengerti lagi dengan HTML.



Advertisement
Your Ads Here
Previous
This Is The Oldest Page

You might also like

0 Comments


EmoticonEmoticon