Dasar - Dasar HTML - Hai sobat, pada kesempatan kali ini saya akan membahas tentang Dasar - dasar HTML
APA ITU HTML ?
HTML adalah kepanjangan dari Hyper Text Markup Language, merupakan bahasa interpretasi yang digunakan pada sebuah halaman web.
HTML mendeskripsikan struktur halaman web yang ditulis dengan element atau tag yang yang mengapit konten atau teks didalamnya.
STRUKTUR HTML
<!DOCTYPE HTML>
<html>
<head>
<title>Judul Halaman Web</title>
</head>
<body>
<h1>Ini adalah Judul Konten</h1>
<p>Ini adalah isi paragraf, kamu dapat tulis apapun di sini</p>
</body>
</html>
Di dalam kode HTML, ada 3 istilah yang wajib kita ketahui, yaitu element, tag dan attribute (atribut)
Tag adalah teks khusus yang kita sebut dengan istilah markup yang diawali dengan tanda "<" dan diakhiri dengan tanda ">".
Tag terdiri dari dua bagian, tag pembuka dan tag penutup. Tag pembuka diapit dengan tanda "<>", dan tag penutup diawali dengan tanda "<" dan diakhiri dengan tanda "/>".
Khusus untuk tag tanpa pasangan, bentuknya berbeda, contohnya "br" dan "hr".
Contoh:
<p>Paragraf ini berada dalam tag "p"</p>
<div>Tulisan ini berada dalam tag "div"</div>
Atribut mendefinisikan properti dari suatu tag HTML, yang terdiri atas nama dan nilai.
Contoh:
<img src="gambar.jpg" height="100" width="200">
<p align="center">Teks ini diberi atribut align dengan nilai "center", yang berfungsi untuk mengetengahkan tulisan</p>
Element mempresentasikan isi secara keseluruhan isi dari sepasang tag, attribute, beserta isinya.
Contoh :
<img src="gambar.jpg" height="100" width="200">
<p align="center">Teks ini diberi atribut align dengan nilai "center", yang berfungsi untuk mengetengahkan tulisan</p>
TAG - TAG DASAR HTML
Berikut ini saya jelaskan tag-tag yang biasa dipakai untuk membuat sebuah halaman web. Membuat text judul bagi yang sudah terbiasa membuat dokumen di MS Word, pasti sobat tahu apa itu istilah heading.
Ya, heading adalah judul dari sebuah konten. Heading ada banyak level, mulai dari 1, 2, 3, dan seterusnya.
Sama seperti halaman web, halaman web juga berbentuk persis seperti itu. Untuk membuat heading, kita cukup mengapit teks yang akan kita jadikan judul dengan <h1>, <h2>,<h3> dan seterusnya.
Contoh :
<h1>Ini adalah heading level satu</h1>
<h2>Ini adalah heading level dua</h2>
<h3>Ini adalah heading level tiga</h3>
<h4>Ini adalah heading level empat</h4>
Membuat Paragraf Untuk membuat paragraf, kita cukup mengapit uraian teks dengan tag <p>.
Contoh :
<p> <strong>Lorem Ipsum</strong> adalah contoh teks atau dummy dalam industri percetakan dan penataan huruf atau typesetting. Lorem Ipsum telah menjadi standar contoh teks sejak tahun 1500an, saat seorang tukang cetak yang tidak dikenal mengambil sebuah kumpulan teks dan mengacaknya untuk menjadi sebuah buku contoh huruf. Ia tidak hanya bertahan selama 5 abad, tapi juga telah beralih ke penataan huruf elektronik, tanpa ada perubahan apapun. Ia mulai dipopulerkan pada tahun 1960 dengan diluncurkannya lembaran-lembaran Letraset yang menggunakan kalimat-kalimat dari Lorem Ipsum, dan seiring munculnya perangkat lunak Desktop Publishing seperti Aldus PageMaker juga memiliki versi Lorem Ipsum. </p>
<p> Ada banyak variasi tulisan Lorem Ipsum yang tersedia, tapi kebanyakan sudah mengalami perubahan bentuk, entah karena unsur humor atau kalimat yang diacak hingga nampak sangat tidak masuk akal. Jika anda ingin menggunakan tulisan Lorem Ipsum, anda harus yakin tidak ada bagian yang memalukan yang tersembunyi di tengah naskah tersebut. Semua generator Lorem Ipsum di internet cenderung untuk mengulang bagian-bagian tertentu. Karena itu inilah generator pertama yang sebenarnya di internet. Ia menggunakan kamus perbendaharaan yang terdiri dari 200 kata Latin, yang digabung dengan banyak contoh struktur kalimat untuk menghasilkan Lorem Ipsun yang nampak masuk akal. Karena itu Lorem Ipsun yang dihasilkan akan selalu bebas dari pengulangan, unsur humor yang sengaja dimasukkan, kata yang tidak sesuai dengan karakteristiknya dan lain sebagainya. </p>
Nah sekian penjelasan tentang Dasar - Dasar HTML, Tunggu tutorial yang lainnya disini !!!