0% menganggap dokumen ini bermanfaat (0 suara)
6 tayangan7 halaman

Panduan Lengkap Tag HTML dan Atribut

Dokumen ini memberikan gambaran umum tentang tag dan konsep HTML. Ini membahas tag umum seperti , , , , judul, paragraf, daftar, tabel, dan formulir. Dokumen ini menjelaskan untuk apa tag digunakan, atributnya, dan bagaimana mereka menyusun dan mengatur konten dalam dokumen HTML. Berbagai tag pemformatan teks dan karakter khusus juga dibahas. Dokumen ini bertujuan untuk mengajarkan dasar-dasar HTML melalui penjelasan dan contoh tag.

Diterjemahkan oleh

ScribdTranslations
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
0% menganggap dokumen ini bermanfaat (0 suara)
6 tayangan7 halaman

Panduan Lengkap Tag HTML dan Atribut

Dokumen ini memberikan gambaran umum tentang tag dan konsep HTML. Ini membahas tag umum seperti , , , , judul, paragraf, daftar, tabel, dan formulir. Dokumen ini menjelaskan untuk apa tag digunakan, atributnya, dan bagaimana mereka menyusun dan mengatur konten dalam dokumen HTML. Berbagai tag pemformatan teks dan karakter khusus juga dibahas. Dokumen ini bertujuan untuk mengajarkan dasar-dasar HTML melalui penjelasan dan contoh tag.

Diterjemahkan oleh

ScribdTranslations
Hak Cipta
© All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd

kunjungi @[Link]

in

Bab 11 & 12 - HTML

HTML: HTML adalah singkatan dari Hypertext Markup Language. Ini adalah tata letak dokumen dan spesifikasi hyperlink.
bahasa yaitu bahasa yang digunakan untuk merancang tata letak dokumen web.

Q1. Apa itu Tag?


Tag adalah perintah HTML yang dikodekan yang menunjukkan bagaimana bagian dari halaman web harus ditampilkan.

Q2. Apa itu Atribut?


Atribut adalah kata khusus yang digunakan di dalam tag untuk menentukan informasi tambahan pada tag seperti warna,
penyelarasan dll.

TAG HTML

1. TAG HTML: Tag ini mengidentifikasi bahwa dokumen adalah dokumen HTML. Setiap dan setiap HTML
dokumen dimulai dengan <HTML> dan diakhiri dengan </HTML>

2. Tag HEAD: Tag ini berisi informasi tentang dokumen, termasuk judul, skrip, gaya, dll.

3. Tag JUDUL: Tag ini berisi judul dokumen. Judul muncul di bilah judul halaman web.

4. Tag BODY: Tag ini mencakup semua tag, atribut, dan informasi yang akan ditampilkan di situs web.

STRUKTUR DOKUMEN HTML


<HTML>
<KEPALA>
<TITLE> . . . . . . . . </TITLE>
</KEPALA>
<TUBUH>
.....
.....
</TUBUH>

Pendidikan Komputer INFOTECH, Kishangarh (Raj) 9829171122 Page 1


kunjungi @[Link]

Q3. Apa itu Elemen Kontainer?


Jenis elemen HTML ini membutuhkan tag pasangan yaitu tag awal serta tag akhir.

Q4. Apa itu Elemen Kosong?


Jawab. Tipe Elemen HTML ini hanya memerlukan tag pembuka dan tidak memerlukan tag penutup.

Tag HTML DASAR dan Atributnya

1. Tag HTML: Tag ini digunakan untuk menandai awal dan akhir dari dokumen HTML.
Atribut
(a) DIR : Atribut ini menentukan bagaimana browser harus menyajikan teks di seluruh dokumen.
nilai dapat berupa ltr(dari kiri ke kanan) atau rtl(dari kanan ke kiri)

(b) LANG: Atribut ini menentukan bahasa yang umumnya Anda gunakan dalam dokumen. nilainya
dapat menjadi en (Inggris), it (Italia), fr (Prancis) dll.

2. Tag HEAD: Ini digunakan untuk mendefinisikan header dokumen. Ini berisi informasi tentang gaya, skrip, judul, dll.

3. Tag TITLE: Ini berisi judul dokumen yang akan ditampilkan di bilah judul halaman web.
4. Tag BODY: Tag ini mencakup semua tag, atribut, dan informasi yang akan ditampilkan di halaman web.
Atribut
(a) bgcolor: Atribut ini digunakan untuk menentukan warna latar belakang halaman web. Warna dapat ditentukan sebagai
nama warna atau kode warna. Kode warna adalah kombinasi enam huruf dan digit yang dimulai dengan simbol #.
digit berada antara 0 hingga 9 dan huruf dapat berada antara a hingga f. beberapa kode warna
#00FFFF #000000

(b) latar belakang: Atribut ini digunakan untuk menentukan gambar apa pun yang akan ditampilkan di latar belakang
halaman web.

Atribut ini digunakan untuk menentukan warna teks

(d) tautan: Atribut ini digunakan untuk menentukan warna tautan.

(e) alink :Atribut ini digunakan untuk menentukan warna tautan aktif.

(f) vlink :Atribut ini digunakan untuk menentukan warna tautan yang telah dikunjungi.

(g) leftmargin: Ini digunakan untuk menentukan margin kiri dari konten tag body

(h) margin atas : Digunakan untuk menentukan margin atas dari isi tag body

INFOTECH Pendidikan Komputer, Kishangarh (Raj) 9829171122 Page 2


kunjungi @[Link]

5. Hx(x=1 hingga 6) Tag: HTML memiliki enam level judul yang diberi nomor dari 1 hingga 6. Judul 1 adalah yang terbesar dan 6 adalah

terkecil.

6. Tag Paragraf: Tag yang digunakan untuk Paragraf adalah <p> .... </p>
Atribut
Penjajaran: Atribut ini menentukan penjajaran paragraf. Nilai dapat berupa kiri, tengah, kanan, atau sesuaikan.

7. Tag Pemisah: Tag yang digunakan untuk ini adalah <br>. Ini adalah elemen kosong dan membawa kontrol ke yang berikutnya.
garis. itu tidak memiliki atribut.

8. Tag Center: Ini digunakan untuk meratakan konten di tengah halaman. Ini dimulai dengan <center> dan diakhiri dengan
</center>. Ini tidak memiliki atribut.

9. Tag Basefont: Tag ini memungkinkan Anda untuk menentukan ukuran dasar untuk font. Ini digunakan dengan atribut ukurannya yang.
nilai menentukan ukuran teks.
Atribut
Atribut ini digunakan untuk menentukan ukuran teks. Ukuran juga dapat ditentukan sebagai negatif atau positif.
inkremen.

2. wajah: Digunakan untuk menentukan nama font

3. warna: Ini digunakan untuk menentukan warna font.

10. Tag Font: Tag yang digunakan untuk ini adalah <font>......</font>. Ini digunakan untuk mengubah ukuran, jenis huruf, dan warna dari
teks.
Atribut
Ini digunakan untuk menentukan nama font
2. warna: Ini digunakan untuk menentukan warna
Dipakai untuk menentukan ukuran font

11. Tag HR: Tag ini digunakan untuk menyisipkan Garis Horizontal di halaman web.
Atribut
itu digunakan untuk menentukan tinggi dari Garis Horisontal
2. lebar : digunakan untuk menentukan lebar Garis Horizontal
3. noshade :itu akan menampilkan aturan dalam format 2d
ini digunakan untuk menentukan warna aturan
5. rata : penyelarasan Aturan Horizontal

12. Komentar <!.... dan ...> :Tag ini digunakan untuk menentukan komentar dalam HTML. komentar dalam HTML hanyalah
seperti Java. Sebuah baris komentar tidak dirender oleh browser.

Pendidikan Komputer INFOTECH, Kishangarh (Raj) 9829171122 Page 3


kunjungi @[Link]

Berbagai Tag Gaya Teks

12. <b> Tag :Tag ini digunakan untuk menentukan Teks Tebal.

13. <i> Tag :Tag ini digunakan untuk menentukan Teks Italik.

14. <u> Tag :Tag ini digunakan untuk menentukan Teks yang diberi garis bawah.

15. <tt> Tag: Tag ini digunakan untuk menentukan Teks Teletype.

16. <strong> Tag :Tag ini sama seperti tag tebal. Ini membuat teks menjadi kuat atau tebal.

17. <small> Tag :Tag ini membuat teks sedikit lebih kecil dari yang normal

<big> Tag :Tag ini membuat teks sedikit lebih besar dari teks normal

19. <sup> Tag :Tag ini membuat teks menjadi superskrip

20. <sub> Tag: Tag ini menjadikan teks menjadi subskrip.

Karakter Khusus : Dalam dokumen HTML kita harus menggunakan berbagai jenis tag karakter khusus untuk ditampilkan
beberapa karakter khusus seperti
< untuk simbol <
> untuk simbol >
& untuk tanda ampersand dll

Bab 12 HTML - II

Ada tiga jenis daftar dalam HTML


(a) Daftar Bernomor (Juga disebut sebagai Daftar Terurut) - Tag yang Digunakan adalah <OL>
(b) Daftar Tanpa Nomor (Juga disebut sebagai Daftar Tidak Terurut) - Tag yang Digunakan adalah <UL>
(c) Daftar Definisi - Tag yang Digunakan adalah <DL>

<OL> -Tag ini disebut sebagai Tag Daftar Terurut. Daftar Terurut dapat berupa jenis berikut.
1
2. Tipe="a"
3. Tipe="A"
i

INFOTECH Pendidikan Komputer, Kishangarh (Raj) 9829171122 Page 4


kunjungi @[Link]

5. Tipe="I"

<UL> -Tag ini disebut Tag Daftar Tidak Terurut. Daftar Tidak Terurut bisa berupa Tipe Berikut.
disk
lingkaran
persegi

Catatan: kita dapat menggunakan atribut start dengan tag OL dan UL yang digunakan untuk menentukan titik awal daftar.

<DL> -Tag ini disebut sebagai Tag Daftar Definisi. Ini ditampilkan tanpa simbol peluru.
Daftar definisi adalah sebagai berikut -
(a) DL - Daftar Data
(b) DT - Istilah Data
(c) DD - Definisi Data

Daftar Bersarang - Ketika sebuah daftar ditentukan di dalam daftar lain, maka itu disebut sebagai daftar bersarang.

TAG TABEL dalam HTML


(a) <table>- Tag ini digunakan untuk membuat tabel yang berisi semua atribut tabel utama
(b) <tr> -Tag Ini Mendefinisikan Baris Tabel
(c) <th> -Tag ini Mendefinisikan Judul Tabel atau Header Tabel
(d) <td> -Tag ini Mendefinisikan Data Tabel dari Isi Sel Tabel
(e) <caption> -Tag ini mendefinisikan judul atau keterangan dari tabel
- Tag ini digunakan untuk mendefinisikan satu set baris header.
(g) <tfoot> -Tag ini digunakan untuk mendefinisikan footer tabel.
(h) <tbody> -Tag ini digunakan untuk menentukan badan tabel.

Atribut Tag Tabel


------------------------------
1. Border - digunakannya untuk menentukan lebar batas
2. WarnaBatas - digunakan untuk menentukan Warna batas (dapat berupa nama warna atau kode)
3. Bingkai - digunakan untuk menentukan bingkai sebagai batas tabel (nilai bisa - di atas, di bawah, batas, kotak, sisi-h.)
lhs, rhs, sisi vs dll)
4. Aturan - digunakan untuk menentukan batas mana dari tabel yang harus terlihat (nilai dapat berupa all, cols, rows, dll)
5. Jarak sel - digunakan untuk menentukan jarak antara sel tabel
6. Cellpadding - digunakan untuk menentukan ukuran sel
7. Align - digunakan untuk menentukan perataan tabel (nilai dapat berupa kiri, kanan, tengah, dll)
8. Latar Belakang - digunakan untuk menentukan gambar yang akan ditampilkan sebagai latar belakang tabel
9. Bgcolor - digunakan untuk menentukan warna latar belakang atau tabel
10. Tinggi - digunakan untuk menentukan tinggi tabel
11. Lebar - digunakan untuk menentukan lebar tabel

INFOTECH Pendidikan Komputer, Kishangarh (Raj) 9829171122 Page 5


kunjungi @[Link]

12. ringkasan - digunakan untuk menentukan ringkasan tabel

Atribut Tag TD
1. Rata - digunakan untuk menentukan perataan konten sel tabel
2. Lebar - digunakan untuk mendefinisikan lebar sel tabel
3. Bgcolor -digunakan untuk menentukan warna latar belakang sel tabel
4. Latar Belakang - digunakan untuk menentukan gambar latar belakang sel tabel
5. Rowspan - digunakan untuk menentukan rentang baris (baris yang dicakup oleh sel) dari sel tabel
6. Colspan - digunakan untuk menentukan rentang kolom (kolom yang dicakup oleh sel) dari sel tabel
7. Valign - digunakan untuk menentukan penjajaran vertikal sel tabel

FORMULIR HTML
Formulir HTML adalah cara untuk mengumpulkan informasi/data dari pengunjung situs. Ini dilakukan dengan bantuan
kontrol yang mengumpulkan informasi dan mengirimkannya

Kontrol
1. Tombol - Ada tiga jenis Tombol
(a). Tombol Kirim - diaktifkan ketika kita mengirimkan formulir
(b). Tombol Reset - diaktifkan ketika kami mereset formulir
(c). Tombol Tekan - tombol ini tidak memiliki perilaku default, kita harus menulis skrip spesifik untuknya

2. Kotak centang - Ini adalah tombol toggle yang dapat dinyalakan/dimatikan. Beberapa kotak centang dapat dipilih sekaligus.
waktu.

3. Tombol radio - Ini adalah tombol toggle seperti kotak centang tetapi kita hanya dapat memilih satu tombol radio pada satu waktu.

waktu

4. Menu - Menu menawarkan pengguna pilihan untuk dipilih.

5. Kata Sandi - Kontrol ini digunakan untuk meminta kata sandi dari pengguna. Teks yang dimasukkan tidak akan ditampilkan kepada pengguna.

6. Input Teks - Seorang pengguna dapat membuat dua jenis kontrol untuk memasukkan teks. Yang satu adalah Kotak Teks dan yang lainnya adalah

TextBox digunakan untuk memasukkan teks yang terbatas atau kecil sedangkan textarea digunakan untuk teks yang besar

7. Kontrol Tersembunyi - Ini adalah kontrol yang tidak ditampilkan tetapi nilainya dikirimkan dengan sebuah
formulir.

Pendidikan Komputer INFOTECH, Kishangarh (Raj) 9829171122 Page 6


kunjungi @[Link]

Cara Membuat Kontrol Formulir

1. Form -<form action="script belakang" method="metode pengiriman">

2. Kotak Teks -<input type="text" name="tname" value="Tuan." size=20 maxlength=50>

3. Kotak Kata Sandi -<input type="password" name="pass">

4. TextArea -<Textarea rows=50 cols=80 name="deskripsi"> </Textarea>

<input type="submit" name="submit" value="kirim">

6. Tombol Reset- <input type="reset" name="reset" value="reset">

7. Tombol Sederhana -<input type="button" value="Klik Saya">

8. Kotak centang- <input type="checkbox" name="hobi1" value="Renang">Renang

9. RadioBox - <input type="radio" name="sex" value="Laki-laki">Laki-laki


<input type="radio" name="sex" value="Perempuan">Perempuan

10. Kotak Pilihan - <select name="stream">


<option>Perdagangan</option>
<option> Ilmu Pengetahuan </option>

Seni
</select>

Pendidikan Komputer INFOTECH, Kishangarh (Raj) 9829171122 Page 7

Anda mungkin juga menyukai