Mengenal tag dan element serta atribut HTML
Seperti yang saya katakan pada tutorial sebelumnya tentang 'Syarat dan Ketentuan Pembuatan Website atau Blog'. Bahwa salah satunya yang harus anda pelajari adalah tentang HTML. Dimana Hypertext Markup Language atau HTML adalah bukan sebuah bahasa pemprograman,melainkan sebuah bahasa struktur yang berfungsi sebagai penanda atau untuk memberi tanda bagian-bagian dari sebuah halaman. Oleh sebab itu HTML memiliki pola dan struktur yang baku,yaitu Tag, Elemen dan Atribut.
Ini adalah struktur dasar HTML:
<html>
<head>
<title> Disini Judul Web atau Blog </title>
</head>
<body>
Disini Konten Web atau Blog
</body>
</html>
Berdasarkan susunan atau struktur diatas, dapat kita ketahui manakah Tag, Elemen dan Atribut. File HTML disimpan dalam format teks reguler dimana didalamnya terdapat tag-tag yang memberi perintah web browser(mozilla,firefox,Chrome) untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Catatan: Karena di dalam struktur html juga menggunakan tanda petik(""), maka perhatikan perbedaan antara tanda petik yang merupakan bagian dari struktur html tersebut. Dan tanda petik yang merupakan gaya penulisan saya,untuk memberi tekanan bahwa yang saya ketik dalam tanda petik adalah hal yang di maksud. Perbedaanya adalah:
- Tanda petik yang merupakan bagian dari struktur html akan saya gunakan tanda petik double,atau tanda petik dua("").
- Tanda petik yang merupakan gaya penulisan atau pengetikan saya,menggunkan tanda petik tunggal('').
'Tag' HTML: Tag merupakan teks khusus yang di sebut 'markup' dimana teks tersebut berupa dua karakter yaitu '<' dan '>' teks tersebut merupakan cara atau tanda untuk memberitahu web browser bagaimana suatu text harus ditampilkan. Semua tag dalam HTML hampir seluruhnya ditulis dengan berpasangan,tag pembuka dan tag penutup, dimana objek atau element yang dikenai perintah tag berada di antara tag pembuka dan tag penutup,namun ada juga yang berupa tag tunggal. Sebagai contoh kita akan ambil dari potongan script diatas.
<body> Adalah tag yang memiliki nama body. Tag <body> merupakan tag pembuka yang memiliki tag penutup. Perbedaanya adalah Penulisan tag penutup ditambahkan karakter '/' atau disebut 'slash' setelah karakter '<'. Sebagai contoh tag <body> ini adalah tag pembuka isi dari file HTML, dan tag penutupnya adalah </body>.
'Elemen' HTML: Elemen merupakan isi dari tag yang berada diantara tag pembuka dan tag penutup yang terdiri atas tiga bagian, 'yaitu tag pembuka', 'isi', dan 'tag penutup'. Sebagai contoh untuk menampilkan judul dan konten pada file HTML pada sebuah browser digunakan element title dan elemen body.
Elemen title ditulis atau diketik degan struktur sebagai berikut:
<title> Disini Judul Web atau Blog </title>.
Sedangkan elemen body diketik dengan cara sebagai berikut:
<body> Disini Konten Web atau Blog </body>.
Mengacu pada contoh script diatas, tag <title> adalah tag pembuka judul file HTML. Kalimat 'Disini Judul Web atau Blog' adalah isi judul dari file HTML sedangkan </title> adalah tag penutup judul dari file html.
Sebagai contoh supaya anda dapat lebih memahami tentang strutur 'HTML',silahkan copy struktur file html berikut lalu tempel pada 'Editor Tools HTML multibisnisindo':
<html>
<head>
<title> Belajar Mengenal Struktur HTML </title>
</head>
<body>
Ini adalah materi pelajaran pertama,saya belajar tentang struktur HTML.<br/>
Saya mulai mengerti tentang HTML,saya akan terus belajar.
</body>
</html>
Disana akan anda lihat menghasilkan barisan kalimat berikut:
Ini adalah materi pelajaran pertama,saya belajar tentang struktur HTML.
Saya mulai mengerti tentang HTML,saya akan terus belajar.
'Tag <br/>' diatas merupakan tag tunggal dimana tag tunggal tidak memiliki tag penutup. 'Tag <br/>' memberi perintah kepada web browser untuk menampilkan kalimat berikutnya pada baris baru. Jika pada struktur file HTML diatas tidak diberi atau di tambah 'tag <br/>',maka hasil yang anda lihat adalah:
Ini adalah materi pelajaran pertama,saya belajar tentang struktur HTML. Saya mulai mengerti tentang HTML,saya akan terus belajar.
Kalimat akan ditampilkan tanpa baris baru,melainkan dilanjutkan dalam satu baris. Meskipun dalam penulisanya di ketik dalam baris baru,akan tetapi web browser tidak mendapat atau menerima perintah untuk menampilkan kalimat tersebut dalam baris baru.
'Atribut' HTML: 'Atribut' adalah informasi yang diberikan untuk 'tag'. Informasi ini barmacam-macam fungsinya,ada yang berfungsi untuk memberi instruksi penambahan warna pada sebuah text, ukuran besar-kecilnya huruf, dan lain-lain. Setiap atribut memiliki pasangan nama dan nilai atau disebut 'value' dengan penulisan sebagai berikut: name=”value”.
Sebuah nilai atau value selalu diapit tanda kutip, boleh tanda kutip satu (‘) atau dua (“). Penulisan 'Atribut' harus berada diantara tag pembuka dan penutup, Sebagai contoh, kita akan membuat warna teks menjadi 'hijau' dengan latarbelakang atau background halaman web berwarna abu-abu. Silahkan copy script berikut dan tempel pada 'Editor Tools HTML multibisnisindo':
<html>
<head>
<title> Belajar Mengenal Struktur HTML </title>
</head>
<body bgcolor="#ebebeb" text="green">
Ini adalah materi pelajaran pertama,saya belajar tentang struktur HTML.<br/> Saya mulai mengerti tentang HTML,saya akan terus belajar.
</body>
</html>
Cara lain untuk mencoba atau melakukan praktik adalah dengan menempel script diatas pada notepad,notepad plus-plus(N++),VSCodeSetup,atau editor/sofware lain misalnya dreamweaver. Lalu menyimpan dengan ekstensi '.html',misalnya: 'index.html','belajar.html','materi1,html',serta nama lainya yang terpenting dengan ekstensi '.html'.
Setelah itu silahkan buka(double klik) file html yang baru saja anda buat.
Jika ingin melihat hasilnya secara singkat silahkan gunakan HTML-CSS editor di multibisnisindo.
Pada materi selanjutnya,kita masih akan membahas tentang 'atribut' dalam file HTML diatas. Dimana atribut-atribut tersebut setelah di susun lebih ringkas dalam satu file,menjadi yang namanya file 'CSS'.
Terimakasih telah berkunjung dan membaca tutorial ini,mudah-mudahan apa yang saya berikan melalui tutorial ini berguna bagi anda. Silahkan share artikel ini karena mungkin berguna bagi teman anda,dan memberikan kabar baik serta ilmu berguna bagi orang lain merupakan pahala buat anda.
Komentar
Posting Komentar