Tag 2

JENIS-JENIS TAG DAN ATRIBUT
Oleh:
I Gusti Ayu Agung Sri Sasmita Dewi NIM. 1511021029
TEKNOLOGI PENDIDIKAN
FAKULTAS ILMU PENDIDIKAN
UNIVERSITAS PENDIDIKAN GANESHA

2018
JENIS-JENIS TAG DAN ATRIBUT PADA BAHASA HTML
Tag adalah Adalah penandaan yang dikenali oleh browser sebagai suatu instruksi untuk
memformat tulisan, gambar, link, tabel, atau objek pada sebuah tampilan dokumen HTML.
Tag biasanya dituliskan berpasangan, yang maksudnya adalah memberitahukan kepada
browser dimana posisi awal dan posisi akhir sebuah format dokumen.
Atribut dalam HTML adalah perintah yang disisipkan/ditempelkan pada TAG utama yang
tujuanya adalah mengatur bentuk/gaya tampilan sebuah objek.
Value adalah nilai yang diberikan pada sebuah atribut. Value ada beberapa jenis, bisa value
text seperti left, right, center, red, blue, bisa juga angka 1, 2, 3, bisa juga bentuk pixel : 100,
200, atau bentuk persen 100%, 30%, ada juga yang bentuk hexa seperti warna yang ditulis
color="#000" dll.
Untuk value juga harus relevan, tidak bisa sembarangan. Contoh : align (ini untuk mengatur
posisi) tidak boleh ditulis align="1" atau sebaliknya size="center".
Jenis-Jenis Tag, Atribut dan Value :
1. <html></html>
Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file
HTML.
2. <head></head>
Sebagai informasi page header.
3. <title></title>
Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini akan
muncul pada bagian paling atas browser Anda (pada title bar).
Contoh :
<Title>Selamat datang di web ini</Title>
Hasilnya :
4. <body></body>
Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman
web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor,
background, text, link, vlink, alink, dan margin.
Penggunaan tag diikuti dengan atribut dan value. Atribut diantaranya :
1. Bgcolor
Bgcolor menentukan warna latar belakang dari halaman web. Catatan : Warna
pada tag HTML bisa menggunakan kode mulai dari 00-FF dengan pola Red
Green Blue. 00 00 00 untuk warna hitam, dan FF FF FF untuk warna putih.
Contoh :
<body BGCOLOR='cyan'></body>
Hasilnya :
2. Background
Atribut ini digunakan untuk mengeset atau mengatur gambar untuk digunakan
sebagai latar belakang pada sebuah halaman.
Contoh :
<body background='bg2.jpg'> selamat datang di web ini</body>
Hasilnya :
3. Text
Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada
halaman tersebut. Sebenarnya warna standar dari teks adalah hitam tetapi dengan
atribut ini kamu bisa mengubahnya sesuai dengan keinginan kamu menjadi warna
apapun juga.
Contoh :
<body TEXT='Magenta'> selamat datang di web ini</body>
Hasilnya :
4. Margin
TOPMARGIN dan LEFTMARGIN digunakan untuk menentukan jarak atas dan tepian
pada halaman.
Contoh :
<body topmargin='50' leftmargin='50'>HTML atau Hypertext Marksup Language
merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi
yang berjalan dihalaman web. HTTP atau Hypertext Transfer Protokol merupakan
protokol yang digunakan untuk mentransfer data atau document yang berformat HTML
dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll).
Dengan HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat
halaman web. </body>
Hasilnya :
5. <Hn></Hn> (Heading)
Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 -
6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan
<H6> merupakan ukuran terkecil.
Contoh :
<h1>Selamat datang di web ini</h1>
Hasilnya :
6. (Paragraf)
Digunakan untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi
akhiran tapi juga bisa tidak diberi.
Contoh :
Selamat datang di web ini
HTML atau Hypertext Marksup Language merupakan salah satu format yang
digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web.
HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk
mentransfer data atau document yang berformat HTML dari web server ke browser
(Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang
memungkinkan Anda menjelajah internet dan melihat halaman web. 
Hasilnya :
Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan
kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT,
RIGHT, CENTER dan JUSTIFY.
Contoh :
HTML atau Hypertext Marksup Language merupakan salah satu

format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan
dihalaman web. HTTP atau Hypertext Transfer Protokol merupakan protokol yang
digunakan untuk mentransfer data atau document yang berformat HTML dari web
server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan
HTTP inilah yang memungkinkan Anda menjelajah internet dan melihat halaman
web. Untuk membuat dokumen HTML hanya dibutuhkan sebuah aplikasi teks editor
biasa. Namun sekarang ini di pasaran terdapat banyak sekali HTML authoring
(software yang digunakan untuk membuat atau mendesain halaman web).
Macromedia Dreamweaver, Adobe GoLive, MS FrontPage sekedar contohnya.
Dalam tutorial ini Anda akan kami ajak untuk mengetahui dasar-dasar dari desain
web. Yang dibutuhkan hanya sebuah word processor. Anda bisa menggunakan
Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah
menggunakan Notepad. Setelah anda memahami betul semua tag-tag dasar html,
diakhir nanti kita akan belajar membuat halaman web dengan menggunakan web
tool.
Hasilnya :
7. (Break)
Digunakan untuk pindah ke baris baru.

Contoh :
Selamat Pagi!, Selamat datang di web ini.
 Selamat datang di web ini
Hasilnya :
8. (No Break Line)
Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris
bawahnya bila baris pertama sudah terlalu panjang.
Contoh :
Selamat Pagi!, Selamat datang di web ini.
Selamat datang di web ini
Hasilnya :
9. (Font)
Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut,
yaitu: SIZE, FACE, COLOR
Penggunaan tag diikuti dengan atribut dan value. Atribut diantaranya :
1. Face : Digunakan untuk menentukan jenis teks.
Contoh :
Hai, Selamat Pagi.
Selamat datang di web ini
Hasilnya :
Jenis tulisan berubah menjadi algerian sesuai dengan value yang dimasukkan
2. Size : Digunakan untuk menentukan ukuran teks. Ukurannya adalah antara 1
sampai
Contoh :
Hai, Selamat Pagi.
Selamat datang di web ini
Hasilnya :
Ukuran tulisan berubah menjadi “8” sesuai dengan value yang dimasukkan
3. Color : Digunakan untuk menentukan warna teks. Warnanya berupa nama warna
dalam bahasa inggris atau kode hexadecimal
Contoh :
Hai, Selamat Pagi.
Selamat datang di web ini
Hasilnya :
Warna tulisan berubah menjadi biru atau “blue” sesuai dengan value yang
dimasukkan
10. 
Mendefinisikan teks bold atau cetak tebal
Contoh :
selamat datang di web ini
Selamat datang di web ini
Hasilnya :
11. 

Mendefinisikan teks miring atau cetak miring
Contoh :
Selamat datang di web ini
Hasilnya :
12. 

Mendefinisikan teks bergaris bawah atau underline
Contoh :
Selamat datang di web ini
Hasilnya :
13. <TT> </TT>

Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada
HTML5. Mendefinisikan teletype teks
Contoh :
Hai, Selamat Pagi.
<tt>Selamat datang di web ini</tt>
Hasilnya :
14. <S> </S>

Mendefiniskan Strikeout pada teks
Contoh :
<s>Selamat datang di web ini</s>
Hasilnya :
15. <PRE> </PRE>

Mendefinisikan teks preformatted / contoh teks.
Contoh :
Hai, Selamat Pagi.
<pre>Selamat datang di web ini</pre>
Hasilnya :
16. 

Membuat teks tebal, fungsi tag ini sama dengan tag 
Contoh :
Hai, Selamat Pagi.
Selamat datang di web ini
17. 
Memberikan efek subscript pada teks
Contoh :
Hai, Selamat Pagi.
Selamat datang di web ini
Hasilnya :
18. 
Memberikan efek superscript pada teks
Contoh :
Hai, Selamat Pagi.
Selamat datang di web ini
Hasilnya :
19. <img>
Berfungsi untuk menampilkan gambar pada dokumen HTML. Tag IMG mempunyai
atribut, yaitu: SRC, WIDTH & HEIGHT, ALIGN, BORDER
Penggunaan tag <img> diikuti dengan atribut dan value. Atribut diantaranya :
1. Src
SRC merupakan singkatan dari SOURCE yang dalam bahasa Indonesia berarti
sumber. Atribut ini berfungsi untuk memberi tahu dimana letak dari sumber
gambar yang ingin ditampilkan. Sumber gambar dapat diambil dari komputer
sendiri maupun dari sumber yang ada di internet.
Contoh :
<img SRC='Logo.png'>
Hasilnya :
Gambar yang ingin ditampilkan harus berada dalam satu folder.
2. Width & Height

Atribut ini digunakan untuk menentukan ukuran dari gambar. Height digunakan
untuk menentukan tinggi gambar, sedangkan width digunakan untuk menentukan
lebar gambar
Contoh :
<img SRC='Logo.png' width='150' height='150'>

Hasilnya :
Ukuran gambar berubah sesuai dengan value pada atribut lebar dan tinggi yang
dimasukkan
3. Align
Atribut ini digunakan untuk menentukan posisi dari gambar.
Contoh :
<img SRC='Logo.png' align='right'>
Hasilnya :
Posisi gambar berada disebelah kanan sesuai dengan value yang dimasukkan
4. Border
Atribut ini digunakan untuk menambahkan border pada gambar.
Contoh :
<img SRC='Logo.png' border='3'>

Hasilnya :
20. <blockquote></blockquote>
Mendefinisikan sebuah kutipan panjang. Pada saat di browser teks akan tampil
menjorok kedalam
Contoh :
Hai, Selamat Pagi.
<blockquote>HTML atau Hypertext Marksup Language merupakan salah satu
format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan
dihalaman web. </blockquote>
Hasilnya :
21. <li></li>
Digunakan untuk menampilkan informasi dalam bentuk item daftar
Contoh :
<li>Selamat datang di web ini</li>
Hasilnya :
22. <ol></ol>
Mendefinisikan daftar dalam format penomoran. Tag <ol> digunakan bersama
dengan tag <li>. Tag <ol> mempunyai attribut, yaitu: Start, type
Penggunaan tag <ol> diikuti dengan atribut dan value. Atribut diantaranya :
1. Start
Menentukkan awal penomoran untuk individual item dalam daftar (list) yang
diurutkan.
Value = nomor
Contoh :
<ol start='2'>
</ol>
Hasilnya :
Penomoran teks dimulai dari angka “2”sesuai dengan value yang dimasukkan
2. Type
Menentukkan tipe penomoran otomatis.
Value:
1 = Menunjukkan nomor (default)
a = penomoran menggunakan huruf kecil (lowercase)
A = penomoran menggunakan huruf besar (uppercase)
i = penomoran menggunakan huruf kecil Romawi (lowercase Roman numerals)
I = penomoran menggunakan huruf besar Romawi (uppercase Roman numerals)
Contoh :
<ol type='a'>
</ol>
Hasilnya :
23. <ul></ul>
Mendefinisikan daftar dalam format bullet. Tag <ul> digunakan bersama dengan tag
<li>.
Contoh :
<ul>
</ul>
Hasilnya :
Penomoran teks menggunakan bullet sama dengan tag <li> bedanya tag <ul>
penomorannya lebih menjorok kedalam
24. <hr></hr>
Membuat garis horizontal
Contoh :
<hr>Selamat datang di web ini</hr>
Hasilnya :
25. <center></center>
Untuk perataan tengah terhadap teks atau gambar
Contoh :
<center>Selamat datang di web ini</center>
Hasilnya :
26. <a></a>
Mendefinisikan sebuah anchor, tetapi lebih tepat jika diartikan sebagai tautan
dikarenakan tautan ini digunakan untuk saling menautkan antara satu dokumen
HTML ke dokumen HTML yang lain
Tag <a> mempunyai attribut, yaitu: HREF, TITLE, TARGET
Penggunaan tag <a> diikuti dengan atribut dan value. Atribut diantaranya :
1. Href merupakan atribut yang digunakan untuk membuat sebuah link, href sendiri
merupakan perintah yang berfungsi untuk mengarahkan link ke alamat tujuan di
internet atau mengarahkan ke suatu bagian dari dokumen itu sendiri.
Untuk nilai (value) dari atribut href ditulis dengan href="value", value diapit
tanda kutip, boleh menggunakan tanda kutip satu ( ' ) atau dua ( " ).
Contoh
<a href='http://www.undiksha.ac.id'>KLIK DISINI MENUJU UNDIKSHA</a>
Hasilnya :
Tulisan akan menjadi sebuah link, dan bila di klik akan menuju ke situs sesuai
dengan value yang dimasukkan
2. Title
Title merupakan atribut yang berfungsi sebagai keterangan pada sebuah link yang
muncul dalam bentuk tool tip. Keterangan tersebut akan muncul
jika cursor mouse diletakkan pada link yang mempunyai atribut title. Untuk
penulisannya juga diapit dengan tanda kutip.
Contoh :
<a href='http://www.undiksha.ac.id' title='Belajar HTML'>KLIK DISINI

MENUJU UNDIKSHA</a>
Hasilnya :
Teks akan keluar saat kursor diarahkan pada teks yang di link. Teks yang keluar
sesuai dengan value yang dimasukkan
3. Target
Target merupakan atribut yang berfungsi untuk memberikan perintah kepada

web browser apakah link yang dituju dibuka melalui jendela browser saat ini atau
dibuka melalui jendela baru (tab baru). Secara default, link yang kita tulis akan
terbuka pada jendela yang sama atau menimpa halaman web saat ini. Apabila kita
ingin halaman tersebut terbuka pada tab baru kita harus menggunakan
atribut target="_blank".
Contoh :
<a href='http://www.undiksha.ac.id' target='_blank'>KLIK DISINI MENUJU
UNDIKSHA</a>
Hasilnya :
Saat kita mengklik teks yang sudah di link maka situs yang dituju akan otomatis
terbuka pada jendela baru (tab baru) sesuai dengan value yang dimasukkan.
27. 
Membuat teks miring. Fungsi tag ini sama dengan tag tetapi tag yang lebih
dianjurkan/ditekankan pada penggunaan untuk teks miring.
Contoh :
Selamat datang di web ini
Hasilnya :

Tag 2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Tag 2

Diunggah oleh

Hak Cipta:

Format Tersedia

JENIS-JENIS TAG DAN ATRIBUT

I Gusti Ayu Agung Sri Sasmita Dewi NIM. 1511021029

FAKULTAS ILMU PENDIDIKAN

UNIVERSITAS PENDIDIKAN GANESHA

<h3>Selamat datang di web ini</h3>

<h4>Selamat datang di web ini</h4>

<h5>Selamat datang di web ini</h5>

<h6>Selamat datang di web ini</h6>

<p align='justify'>HTML atau Hypertext Marksup Language merupakan salah satu

Digunakan untuk pindah ke baris baru.

<br>Selamat datang di web ini</br>

8. <NOBR> </NOBR> (No Break Line)

<nobr>Selamat datang di web ini</nobr>

9. <FONT> </FONT> (Font)

11. <i> </i>

12. <u> </u>

<u>Selamat datang di web ini</u>

13. <TT> </TT>

14. <S> </S>

15. <PRE> </PRE>

16. <STRONG> </STRONG>

Gambar yang ingin ditampilkan harus berada dalam satu folder.

2. Width & Height

<img SRC='Logo.png' width='150' height='150'>

<img SRC='Logo.png' align='right'>

<img SRC='Logo.png' border='3'>

1 = Menunjukkan nomor (default)

a = penomoran menggunakan huruf kecil (lowercase)

A = penomoran menggunakan huruf besar (uppercase)

i = penomoran menggunakan huruf kecil Romawi (lowercase Roman numerals)

I = penomoran menggunakan huruf besar Romawi (uppercase Roman numerals)

<li>Selamat datang di web ini</li>

<li>Selamat datang di web ini</li>

Tag <a> mempunyai attribut, yaitu: HREF, TITLE, TARGET

<a href='http://www.undiksha.ac.id'>KLIK DISINI MENUJU UNDIKSHA</a>

<a href='http://www.undiksha.ac.id' title='Belajar HTML'>KLIK DISINI

Target merupakan atribut yang berfungsi untuk memberikan perintah kepada

Anda mungkin juga menyukai