Assalamualaikum

#Hallo Semuanya!


Diartikel kali ini , pembahasan tentang HTML Dasar

Kalian,mungkin bingung pas masih awam-awamnya , hemm 🤔 bagaimana ya ,website dapat terbentuk , apakah hanya dengan drag and drop saja dan kasih color dapat terbentuk , hemmm 🤔 tentu tidak , terdapat bahasa markup HTML , style CSS , dan Bahasa Pemograman JavaScript di proses pembuatannya


Di html sendiri terdapat 3 istilah yaitu?

  • Tag
  • Element
  • Attribut

Apakah ituu ??

1.Tag

Tag berupa tanda suatu kode yang punya fungsi tertentu dan didalamnya nanti terdapat isi tag. Tag sendiri digunakan sebagai pembungkus dari sebuah nilai yang ada. Misalnya tag <p> yang berfungsi menampung sebuah paragraf </p>

Penulisan Tag
<tag>Isi tag </tag>
Contoh : <p> Isi Tag </p>


Note :    Untuk Tag harus terdapat tag pembuka dan tag penutup

  • Tag pembuka terdapat tanda < > dan diisi dengan penanda tag. Contoh : <p>
  • Tag penutup terdapat tanda </> dan diisi dengan penanda tag. Contoh : </p>


2.Element

Element adalah rangkaian tag html seperti <p> Isi tag </p> Bisa dibilang element itu kesatuan dari tag dengan isi dari tag

Misal,kita ingin membuat paragraf di html , menggunakan tag <p> , nahh di tag <p> sendiri nanti akan kita isi dengan sebuah tag Hello World,jika kita ubah ke html akan menjadi <p>Hello World</p> .yang dimaksud dengan elemen adalah keseluruhan dari tag tersebut , mulai dari tag pembuka , isi tag , tag penutup


3.Attribute

Attribute merupakan perlengkapan dari sebuah tag yang terdapat di HTML. Attribute digunakan untuk memberikan sebuah aksi atau tindakan pada tag yang diberi attribute

Misal,kita ingin memberikan attribute di hyperlink (tulisan link untuk berpindah halaman satu ke halaman lain)

Contoh = www.Google.com
Ketika teks google diklik maka akan berpindah ke halaman ke google , untuk bisa membuat tersebut kita membutuhkan sebuah attribute


  • Penulisan Attribute : <'tag' 'attribute'> Isi Tag </'tag'>
  • Menjadi : <a href="www.google.com">Ini link google</a>


Penjelasan : Tag <a> digunakan untuk menampung sebuah link, ketika di-klik akan memberikan aksi perpindahan dari halaman sekarang ke halaman yang tertentu. Didalam tag <a>terdapat attribute 'href' yang berisikan sebuah link yang nantinya akan melakukan aksi perpindahan dari halaman sekarang ke halaman tertentu sesuai dengan link yang ada didalam 'href'.

Masih, banyak attribute-attribute yang sering digunakan. Seperti berpindah halaman, memberikan style (merubah warna teks, mengubah warna latar belakang, dll), dan masih banyak lagi.

Selanjutnya , kita belajar struktur dasar HTML

Kerangka Dasar HTML

<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
</body>
</html>


Kode diatas merupakan struktur dasar HTML yang terdiri dari elemen - elemen dasar


<!DOCTYPE html>
Memberikan tanda jika file berupa sebuah dokumen bertipe HTML5. Sebelum HTML5, sudah ada versi HTML sebelumnya dan tidak menggunakan tag ini

<html>
Sebagai pembungkus dari semua kode HTML yang kalian cantumkan

<head>
Tag ini berfungsi untuk membungkus detail dan konfigurasi utama pada HTML, menampilkan judul dari website dan masih banyak lagi kegunaannya.
Misal : untuk memanggil file CSS, Javascript, serta Optimasi sebuah website.
Bisa dibilang tag ini adalah sebuah inti dari kerangka HTML yang bekerja di latar belakang.

<title>
Tag ini berfungsi Penanda judul website.
Tag ini harus berada di dalam tag <head>

Gambar diatas merupakan contoh dari kegunaan tag title

<body>
Tag utama yang menammpung apapun (konten) di browser nanti, baik berupa tulisan, gambar, dan lain-lain kemudian nanti akan menampilkan apapun yang sudah ditampungnya


Satu hal lagi yang cukup penting yaitu penulisan komentar.
Komentar bertujuan untuk memberikan sebuah tanda atau petunjuk mengenai baris kode tertentu.

Penulisan Komentar : <!-- Isi Komentar -->

untuk lebih lengkapnya, kalian bisa berkunjung ke tempat sebelah untuk mempelajari lebih lagi mengenai istilah ataupun pengertian mengenai hal-hal yang bersangkutan dengan HTML

Jangan lupa share artikel ini ke teman atau saudara kalian

SALAM MAHASISWA

SALAM CODINGER

       

Tunggu Artikel selanjutnya....

3 Komentar

Posting Komentar

Lebih baru Lebih lama