Skip to content

Materi Y: Get HTML Element & Atributs

Jump to bottom
Asep Septiadi edited this page Feb 1, 2018 · 4 revisions

Kembali Ke Halaman Utama WiKi

Get HTML Element & Atributs

Setelah HTML Basic selanjutnya kita akan Membahas beberapa HTML Element & Atributs dasar yang ada di HTML berikut:

A. List Pembahasan Materi Element:

  • Penggunaan Elemen pada HTML
  • Beberapa Hal yang Harus di Perhatikan dalam Penggunaan Nested pada Elemen HTML
  • Penggunaan & Implementasi Element HTML pada File Dokumen HTML

B. List Pembahasan Materi Atribut:

  • Mengenal Atribut pada HTML
  • Penggunaan Atribut href
  • Penggunaan Atribut src
  • Penggunaan Atribut widht & height
  • Penggunaan Atribut alt
  • Penggunaan Atribut sytle
  • Penggunaan Atribut lang
  • Penggunaan Atribut title

Berikut pembahasannya.

A. List Pembahasan Materi Element

Bag. 1: Penggunaan Elemen pada HTML

  • Elemen HTML biasanya terdiri dari tag awal dan tag akhir, dengan konten disisipkan di antaranya:
  • <tagname> Konten berjalan di sini ... </ tagname>
  • Elemen HTML adalah segalanya mulai dari tag awal hingga tag akhir:
  • <p> paragraf pertama saya. </ p>

Note: Elemen HTML tanpa konten disebut elemen kosong. Elemen kosong tidak memiliki tag akhir, seperti elemen
(yang menunjukkan jeda baris).

Bag. 2: Beberapa Hal yang Harus di Perhatikan dalam Penggunaan Nested pada Elemen HTML

  • Elemen HTML bisa disarangkan (elemen bisa 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>

Penjelasan Contoh:

  • Elemen <html> mendefinisikan keseluruhan dokumen.
  • HTML ini memiliki tag awal <html> dan tag akhir </ html>.
  • Konten HTML elemen adalah elemen HTML lainnya (elemen <body>).
<html>
<body>

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

</body>
</html>

Penjelasan Contoh:

  • Elemen <body> mendefinisikan badan dokumen.
  • Elemen <body> ini memiliki tag awal <body> dan tag akhir </ body>.
  • Isi elemen adalah dua elemen HTML lainnya (<h1> dan <p>).
<body>

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

</body>

Penjelasan Contoh:

  • Elemen <h1> mendefinisikan judul.
  • Elemen ini memiliki tag awal <h1> dan tag akhir </ h1>.
  • Isi elemennya adalah: My First Heading.
<h1>My First Heading</h1>

Penjelasan Contoh:

  • Elemen <p> mendefinisikan sebuah paragraf.
  • Elemen ini memiliki tag awal <p> dan tag akhir </ p>.
  • Isi elemennya adalah: paragraf pertama saya.
<p>My first paragraph.</p>

Bag. 3: Penggunaan & Implementasi Element HTML pada File Dokumen HTML

Jangan Lupakan Tag Akhir Beberapa Elemen HTML akan ditampilkan dengan benar, bahkan jika Anda lupa tag akhir:

<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. Jangan pernah mengandalkan ini. Ini mungkin menghasilkan hasil dan / atau kesalahan yang tidak diharapkan jika Anda lupa tag akhir.

Elemen HTML Kosong

  • Elemen HTML tanpa konten disebut elemen kosong.
  • <br> adalah elemen kosong tanpa tag penutup (tag <br> mendefinisikan jeda baris).
  • Elemen kosong bisa "ditutup" di tag pembuka seperti ini: <br />.
  • HTML5 tidak memerlukan elemen kosong untuk ditutup. Tetapi jika Anda menginginkan validasi lebih ketat, atau jika Anda perlu membuat dokumen Anda dapat dibaca oleh parser XML, Anda harus menutup semua elemen HTML dengan benar.

Gunakan huruf kecil (Lowercase)

  • Tag HTML tidak sensitif huruf: <P> sama dengan <p>.
  • Standar HTML5 tidak memerlukan tag huruf kecil, namun W3C merekomendasikan huruf kecil dalam HTML, dan meminta huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.

Praktikum Bag. 1:

Tugas Praktikum!

Buat file index.html, buat dengan ketentuan:

  • Masukkan standar dokument HTML5
  • Tambahkan Title & Icon (Header) & Body
  • Tambahkan Element <h1>s/d<h6>, <p>, <b>, <i>, <u>.
  • Tugasnya: Buat sebuah artikel didalamnya minimal 5 paragraph dengan menyisipkan gambar & mengandung link

Arsipkan Tugas

Jika tugas sudah selesai lakukan berikut:

  • Buat folder dengan nama PRAK-TANGGALBULANTAHUN (tanggal sesuai waktu selesai) ex: PRAK-31012018
  • Simpan File Tugas didalam folder tersebut
  • Pada file index.html tugas, sisipkan Nama Lengkap, NIS, Kelas, Mata Pelajaran: (Praktikum Pemrograman Website)

B. List Pembahasan Materi Atribut

Bag. 1: Mengenal Atribut pada HTML

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

Sample Sourcecode:

<html>
<body>

<p align="center">This is a paragraph</p>
<p>This is a paragraph</p>

</body>
</html>

Bag. 2: Penggunaan Atribut href

  • Tautan HTML ditentukan dengan tag <a>. Alamat link ditentukan dalam atribut href:

Sample Sourcecode:

<html>
<body>

Contoh Link:<br>
<li> <a href="https://github.com/septiyadii/">My Profile on GitHub</a>

</body>
</html>

Bag. 3: Penggunaan Atribut src

  • Gambar HTML didefinisikan dengan tag <img>.
  • Nama file dari sumber gambar ditentukan dalam atribut src

Sebelumnya pastikan directory root folder seperti berikut:

septiyadii@webserver:~/praktikumWEB/PRAK-01022018$ tree
.
└── img
    └── address-512.png

1 directory, 1 file
septiyadii@webserver:~/praktikumWEB/PRAK-01022018$

Sample Sourcecode:

<html>
<body>

Internet<br>
<img src="img/address-512.png"/>

</body>
</html>

Bag. 4: Penggunaan Atribut widht & height

  • Gambar dalam HTML memiliki seperangkat atribut ukuran, yang menentukan lebar dan tinggi gambar:
  • Ukuran gambar ditentukan dalam piksel: width = "500" berarti lebar 500 piksel.

Sample Sourcecode:

<html>
<body>

Internet<br>
<img src="img/address-512.png" width="500" height="600"/>

</body>
</html>

Bag. 5: Penggunaan Atribut alt

  • Atribut alt menentukan teks alternatif yang akan digunakan, bila gambar tidak dapat ditampilkan.
  • Nilai atribut bisa dibaca oleh pembaca layar. Dengan cara ini, seseorang "mendengarkan" ke halaman web, mis. Orang buta, bisa "mendengar" unsurnya.

Sample Sourcecode:

<html>
<body>

Internet<br>
<img src="img/addess-512.png" alt="Internet URL"/>

</body>
</html>

Bag. 6: Penggunaan Atribut sytle

  • Atribut Style digunakan untuk menentukan style sebuah elemen, seperti warna, font, ukuran, dll.

Sample Sourcecode:

<html>
<body>

Internet<br>
<p style="color:red">Rabbaanii Islamic School Cikarang</p>

</body>
</html>

Bag. 7: Penggunaan Atribut lang

  • Bahasa dokumen dapat dinyatakan dalam tag <html>.
  • Bahasa dideklarasikan dengan atribut lang.
  • Mendeklarasikan bahasa penting untuk aplikasi aksesibilitas (pembaca layar) dan mesin telusur:

Sample Sourcecode:

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

...

</body>
</html>

Bag. 8: Penggunaan `Atribut title'

  • Di sini, atribut judul ditambahkan ke elemen <p>. Nilai atribut judul akan ditampilkan sebagai tooltip saat Anda mengarahkan mouse ke paragraf:`

Sample Sourcecode:

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

<p title="I'm a tooltip">
This is a paragraph.
</p>

</body>
</html>

Saran & Penggunaan Lowercasae

  • Standar HTML5 tidak memerlukan nama atribut huruf kecil.
  • Atribut judul dapat ditulis dengan huruf besar atau huruf kecil seperti judul atau TITLE.
  • W3C merekomendasikan huruf kecil dalam HTML, dan meminta huruf kecil untuk jenis dokumen yang lebih ketat seperti XHTML.

Saran & Penggunaan Quote Value Atribut

  • Standar HTML5 tidak memerlukan tanda kutip di sekitar nilai atribut.
  • Atribut href, yang ditunjukkan di atas, dapat ditulis sebagai:

Sample Sourcecode:

<a href=https://www.w3schools.com>
  • W3C merekomendasikan kutipan dalam HTML, dan menuntut penawaran untuk jenis dokumen yang lebih ketat seperti XHTML. Terkadang perlu menggunakan tanda petik. Contoh ini tidak akan menampilkan atribut judul dengan benar, karena mengandung spasi:

Sample Sourcecode:

<p title=About W3Schools>

Done.

Tugas

Setelah cara diatas coba praktikkan pembelajaran diatas dan kemudian coba implementasikan kedalam aplikasi webserver kamu serta kerjakan tugas jika ada, dan tuangkan ke dalam tulisan, tulisan boleh di simpan di WiKi, Website atau Tulisan bentuk Softcopy dalam aplikasi Word.

  • Dikumpulkan Paling Lambat Besok Pada Jam Pertama Kelas

Copyright 2018 © Asep Septiadi. All right reserved.

Clone this wiki locally