Friday, December 23, 2016

HTML Part 4 : Elemen dan Atribut HTML


Assalamu'alaikum Wr Wb.
Dalam pertemuan kali, saya akan memaparkan mengenai elemen dan atribut HTML. Sebuah elemn HTML biasanya terdiri dari start tag dan end tag, dengan konten yang dimasukkan di antara:
<Tagname> Konten disini...</tagname> HTML elemen adalah segalanya dari awal tag ke tag akhir: <p>My First Tag</p>

Elemen HTML tanpa konten yang disebut elemen kosong. Elemen kosong tidak memiliki tag akhir, seperti unsur Situs (yang menunjukkan satu baris).

Bersarang HTML Elemen
Elemen HTML dapat bersarang (elemen dapat mengandung unsur). Semua dokumen HTML terdiri dari elemen HTML bersarang.
Contoh ini berisi empat elemen HTML:
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html> 

Keterangan:
tag <html> elemen mendefinisikan seluruh dokumen. Memiliki start tag<html> dan akhir tag </html>. Unsur konten adalah elemen HTML lain(<body> unsur).

<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

Tag <body> elemen mendefinisikan tubuh dokumen. Memiliki start tag <body> dan akhir tag </body>. Unsur konten adalah dua elemen HTML lainnya (<h1> dan <p>).

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

Tag <h1> elemen mendefinisikan heading. Memiliki start tag <h1> dan akhir tag </h1>. Unsur konten adalah : Heading Pertama Saya. <h1> Heading Pertama Saya</h1>

Tag <p> elemen mendefinisikan ayat. Memiliki start tag<p> dan akhir tag</p>. Unsur konten adalah : My First Paragraf. <p>My First Paragraf</p>.

Jangan Lupakan End Tag
Beberapa elemen HTML akan ditampilkan dengan benar, bahkan jika Anda lupa tag akhir.
Contoh :
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
Contoh di atas bekerja di semua browser, karena tag penutup dianggap opsional. Tidak pernah bergantung pada ini, ini mungkin menghasilkan hasil yang tak terduga dan / atau kesalahan jika Anda lupa tag akhir.
Kosong HTML Elemen
Elemen HTML tanpa konten yang disebut elemen kosong. Situs adalah elemen kosong tanpa tag penutup (tag <br> mendefinisikan satu baris). Elemen kosong bisa "tertutup" dalam tag pembuka seperti ini: <br />. HTML5 tidak memerlukan elemen kosong harus ditututp. Tetapi jika Anda ingin validasi ketat, atau jika Anda perlu membuat dokumen Anda dibaca oleh parser XML, Anda harus menutup semua elemen HTML dengan benar.

Gunakan huruf kecil Tags
Tag HTML tidak case sensitif: <p> berarti sama dengan<p>. HTML5 standar tidak memerlukan tag huruf kecil, tapi W3C merekomendasikan huruf kecil di HTML, dan menuntut huruf kecil untuk jenis dokumen ketat seperti XHTML.

Atribut HTML
Semua elemen HTML dapat memiliki atribut. Atribut memberikan informasi tambahan tentang elemen Atribut selalu ditentukan dalam tag awal. Atribut biasanya datang dalam pasangan nama / nilai seperti : name ="value".

Bahasa Atribut
Bahasa dokumen dapat dinyatakan dalam <html> tag. Bahasa dinyatakan dengan lang atribut. Mendeklarasikan bahasa adalah penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin pencari.

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

Dua arah pertama menentukan bahasa (en). Jika ada dialek, menggunakan dua  huruf lebih (AS).

Judul Atribut
Di sini, judul atribut ditambahkan ke <p> elemen. Nilai dari atribut judul akan ditampilkan sebagai tooltip ketika Anda mengarahkan mouse ayat:
Contoh:
<p title="I'm a tooltip">
This is a paragraph.
</p>

Href Atribut
Link HTML didefinisikan dengan <a> tag. Alamat link ditentukan daam href atribut.

Contoh
<a href="http://www.allifsulthonia.blogspot.co.id>This is a link</a>

Anda akan belajar lebih banyak tentang link dan tag <a> nanti dalam tutorial ini.

Ukuran Atribut
Gambar HTML didefinisikan dengan <img> tag.
Nama file dari sumber (src) , dan ukuran gambra (lebar dan tinggi) semua disediakan sebagai atribut:
Contoh :
<img src="allif.jpg" width="104" height="142">

Ukuran gambar ditentukan dalam pixel: width="104" berarti 104 layar pixel.
Anda akan belajar lebih banyak tentang gambar dan <img> tag kemudian dalam tutorial ini.

Alt Atribut
Tag alt atribut menentukan sebuah teks alternatif yang akan digunakan, jika gambar tidak dapat ditampilkan.
Nilai atribut yang dapat dibaca oleh pembaca layar. Dengan cara lain, seseorang "mendengarkan" untuk halaman web, misalnya orang buta, bisa "mendengar" elemen.
Contoh:
<img src="allif.jpg" alt="allifsulthonia.blogspot.co.id" width="104" height="142">

Saya sarankan : Gunakan huruf kecil Atribut
HTML 5 standar tidak memerlukan nama atribut huruf kecil. Atribut judul dapat ditulis dengan huruf besar atau huruf kecil seperti judul dan / atau TITLE. W3C merekomendasikan huruf kecil di HTML, dan menuntut huruf kecil untuk jenis dokumen ketat seperti XHTML.

Saya Sarankan : Quote Nilai Atribut
HTML5 standar tidak memerlukan tanda kutip di nilai atribut. Tag href atribut, ditunjukkan di atas, dapat ditulis sebagai:
<a href=ww.allifsulthonia.blogspo.co.id>

W3C menganjurkan kuripan dalam HTML, dan menuntut kutipan untuk jenis dokumen ketat seperti XHTML.

Kadang-kadang diperlukan untuk menggunakan tanda kutip. Contoh ini tidak akan menampilkan atribut judul dengan benar, karena mengandung spasi.
Contoh
<p title=About allifsa>

Menggunakan tanda kutip adalah yang paling umum. Menghilangkan tanda kutip bisa menghasilkan kesalahan.

Quote tunggal atau ganda?
 Tanda kutip ganda di sekitar nilai atribut adalah yang paling umum di HTML, tapi tanda kutip tunggal juga dapat digunakan. Dalam beberapa situasi, ketika nilai atribut itu sendiri berisi tanda kutip ganda, maka perlu menggunakan tanda kutip tunggal.
<p title='Allif Sulthoni A'>
Atau sebaliknya:
<p title="Allif Sulthoni A">

REFERENSI
http://www.w3schools.com/html/html_attributes.asp 

TAG HTML


TAG Merupakan kode yang digunakan untuk memperkenalkan pada web browser untuk apa text HTML tersebut ditulis. HTML membutuhkan cara memperkenalkan text yang ditulis didalamnya kepada web browser baik text itu berupa list, paragraf, link maupun yang lainya. Disinilah kita gunakan tag, dimana objek yang dimasukkan berada diantara pembuka dan penutup tag. Berikut contoh penulisan tag HTML


    <tag>Objek Yang Diisi</tag>


Perbedaan antara pembuka dan penutup yaitu, pada tag pembuka diawali kurung sudut pembuka, tag yang dimaksud, dan diakhiri kurung sudut penutup. Sedangkan pada penutup tag diawali kurung sudut pembuka, backslash (/), dan kurung sudut penutup.



JENIS TAG YANG SERING DIGUNAKAN DALAM HTML


Berikut beberapa jenis tag yang sering dijumpai dalam web programing


Tag




Keterangan


<!– ….–>




Digunakan untuk memberi sebuah komentar atau keterangan


<!DOCTYPE html>




digunakan untuk Mendefinisikan tipe document


<a>




Mendefinisikan sebuah anchor, digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain


<b>




membuat teks menjadi tebal


<p>




membuat pargraf


<h1>




membuat heading satu


<h2>




membuat heading dua


<body>




mendefinisikan body/isi dokument html


<head>




mendefinisikan bagian kepala dokumen html


<title>




memdefiniskan judul halaman


<div>




mendefinisikan halaman


<link>




mendefinisikan hubungan antar dokumen


<script>




Mendefinisikan client-side script


<table>




mendefinisikan tabel


<th>




Mendefinisikan sel header di dalam sebuah tabel


<td>




Mendefinisikan sel di dalam sebuah tabel


<tr>




Membuat baris di dalam sebuah tabel


<ul>




Mendefinisikan daftar dalam format bullet


<li>




mendefinisikan list


ELEMENT DAN STRUKTUR DASAR HTML


Atribut merupakan informasi tambahan yang digunakan di dalam tag pembuka. Informasi  ini bisa berupa intruksi untuk memberikan efek warna, ketebalan, rata tengah kiri kanan dll. Atribut biasanya memiliki 2 bagian yaitu nama dan nilai, dapat ditulis name="value" . Penulisan nilai/value diapit oleh dua tanda kutip (bisa kutip satu dan juga kutip dua)



HTML Memiliki struktur dasar yaitu <html><head><title><body> jika tidak ada tag tersebut web tidak dapat dijalankan. Lanjut ke atribut HTML, Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri berikut contoh penulisan atribut & Struktur Dasar pada HTML :

Jika Script Dijalankan
Keterangan :


    <html> Berfungsi untuk mendefinisikan dokumen html

    <head> Adalah kepala dari website, Pada tag ini anda bisa menambahkan banyak informasi seperti meta, css, javascript, font dan lain lain

    <title> Berfungsi untuk menatakan title/judul website sobat dan disimpan dalam tag <head>

    <body> Adalah isi dari sebuah website semua yang ditampilkan akan tampil dalam tag <body>

    <h2> Adalah tag heading

    align Adalah nama dari atribut

    center Adalah nilai dari atribut

    Pengenalan Atribut HTML Adalah element dari tag H2

    </> ( Slash ) Adalah penutup dari sebuah Tag


Tidak semua tag membutuhkan atribut di dalamnya, namun bagi sobat yang bergelut dalam web programing akan sering menemukan tag yang didalamnya terdapat atribut. Pada HTML ini banyak sekali atribut yang bisa digunakan tetapi hanya cocok untuk tag-tag tertentu saja. Misalkan penggunaan atribut href yang hanya digunakan pada tag <a> dan pada beberapa tag lain

REFERENSI

No comments:

Post a Comment