1. Heading
Headings adalah elemen yang di gunakan untuk menampilkan judul dari konten HTML, tag Heading sendiri ada 6 jenis, mulai dari <h1>,<h2>,<h3>,<h4>,<h5>,<h6>. Angka-angka tersebut merupakan tingkat kepentingan dari sebuah judul.Tag <h1> itu akan menampilkan teks yang besar, sedangkan <h2> lebih kecil dari <h1> , dan <h3> lebih kecil dari <h2> dan bagitu seterusnya.
Jika hendak membuat judul maka gunakanlah <h1>, jika hendak membuat subjudul gunakanlah <h2>. jika hendak membuat sub-subjudul gunakanlah <h3>
nah untuk contoh penggunaan mari perhatikan kode berikut ini
<html>
<head>
<title>belajar heading</title>
</head>
<body>
<h1>INI H1</h1>
<h2>INI H2</h2>
<h3>INI H3</h3>
<h4>INI H4</h4>
<h5>INI H5</h5>
<h6>INI H6</h6>
</body>
</html>
2. Paragraf
Unuk membuat paragraf kita menggunakan tag <p> teks yang menggunakan tag <p> akan memiliki jarak dengan teks di bawahnya, sedangkan jika ingin turun baris saja menggunakan tag <br>. jika hanya di tekan enter saja maka di code nya memang turun baris, tapi setelah dokumen html di buka tiadak akan turun baris. Untuk lebih jelasnya coba perhatikan kode berikut:
hanya mempertegas, Jangan copy paste, ketik ulang saja agar anda dapat benar-benar memahami struktur HTML
hanya mempertegas, Jangan copy paste, ketik ulang saja agar anda dapat benar-benar memahami struktur HTML
<html>
<head>
<title>belajar heading</title>
</head>
<body>
<h1>Lorem ibsum dulur sit amet</h1>
<p>ini teks dengan tag p </p>
ini teks dengan tag br <br/>
ini dengan enter
Enter itu tidak membuat baris turun
</body>
</html>
3. Text Formatting
Di HTML kita juga bisa merubah format teks seperti mencetak tebal, miring, garis bawah dan lain lain. berikut beberapa contoh text formatting
- <b> - Mencetak tebal (bold)
- <strong> - Hampir sama dengan bold, untuk menandai teks penting
- <i> - Untik mencetak miring
- <mark> - Untuk menyoroti (memblok) teks
- <small> - Membuat teks lebih kecil
- <del> - Memberi coretan
- <u> - Menggaris bawah
- <sub> - Membuat tulisan berada dibawah garis
- <sup> - Membuat tulisan diatas garis
<html>
<head>
<title>belajar heading</title>
</head>
<body>
Membuat tulisan <b>tebal (bold) </b> <br/>
Strong berguna untuk <strong>menandai teks penting </strong> <br/>
Tag i berguna untuk <i>mencetak miring </i> <br/>
Tag mark berguna untuk <mark>menyoroti (memblok) teks </mark> <br/>
Tag small berguna untuk<small> Membuat teks lebih kecil </small> <br/>
Tag del berguna untuk <del>Memberi coretan </del> <br/>
Tag u berguna untuk <u>Menggaris bawah </u> <br/>
Tag sub berguna untuk<sub> Membuat tulisan berada dibawah garis </sub> <br/>
Tag sup berguna untuk<sup> Membuat tulisan diatas garis </sup> <br/>
</body>
</html>
4. Link
Link adalah elemen yang di gunakan untuk menghubungkan dokumen yang satu dengan dokumen yang lain. ketika link itu sendiri di klik maka halaman browser akan berpindah ke halaman lain, link biasanya / defaultnya di cetak berwarna biru dengan garis bawah, namun tentunya hal itu bisa di customize atau di rubah.
untuk membuat link menggunakan tag anchor , yang di tulis seperti ini <a> namun tidak hanya seperti itu saja karna tag <a> ini memiliki atribut "href" dan "target", dan selain mengisi atribut, anda juga perlu mengisi nilai atribut-atribut tersebut.
href di isi dengan url / halaman yang akan dituju
contoh
maka setelah di klik link tersebut akan mengarah ke halaman yang di tuju tersebut
Target , Atribut target sendiri digunakan untuk menentukan dimana link itu akan di buka sedankan nilai dari Atribut target itu sendiri memiliki banyak macam seperti di bawah ini
Belaar HTML #part2.4 macam macam link
untuk praktek dan contoh penggunaan kita perlu sebuah gambar. buatlah 1 file html dan masukan 1 gambar ke dalam file html tersebut
lalu isikan kode seperti di bawah ini kedalam file htmlnya
output dari code diatas akan seperti ini
maka outputnya hanya seperti ini
Teks yang berada di elemen komenar tidak akan di tampilkan di browser.
Itu saja untuk elemen-elemen dasar, pada bab selanjutnya membahas tentang Styling
PreviousNext
href di isi dengan url / halaman yang akan dituju
contoh
<a href="www.amicoder.com/p/about.html">klik di sini</a>maka setelah di klik link tersebut akan mengarah ke halaman yang di tuju tersebut
Target , Atribut target sendiri digunakan untuk menentukan dimana link itu akan di buka sedankan nilai dari Atribut target itu sendiri memiliki banyak macam seperti di bawah ini
- _self - membuka link di tab/jendela browser yang sama, ini adalah nilai default jika attribut target tidak ada.
- _blank - membuka link di tab/jendela browser yang baru.
- _parent - membuka alamat link di frame induk.
- _top - membuka alamat link di jendela penuh
- _framename - membuka alamat link di frame yang namanya sudah di tentukan
Belaar HTML #part2.4 macam macam link
5. Images
Nah elemen ini sepertinya sudah jelas sekali ya fungsinya, yah untuk menampilkan gambar, hampir sama dengan tag link yang memiliki atribut wajib yaitu href, Tag img ini juga memiliki atribut wajib yaitu src yang di gunakan untuk menentukan lokasi gambar yang akan di tampilkan.untuk praktek dan contoh penggunaan kita perlu sebuah gambar. buatlah 1 file html dan masukan 1 gambar ke dalam file html tersebut
<html>
<head>
<title>tes img</title>
</head>
<body>
tes gambar <br/>
<img src="tes.png">
</body>
</html>output dari code diatas akan seperti ini
6. Block and Inline
Setiap elemen HTML memiliki mode tampilan (display) masing-masing, yang umumnya hanya antara dua nilai yaitu block dan inline
Block
Elemen blog ini akan menampilkan full width atau kesamping kanan dan kiri secara penuh, sehingga elemen apapun yang di tulis di sebelahnya akan otomatis turun. beberapa contoh elemen yang memiliki mode display inline adalah <h1>,<h6>,<p>,<form>,<div>,<pre>
Inline
Tiak seperti block elemen dengan mode ini akan di tamplikan satu baris width, contoh elemen dengan mode inline ini adalah elemen-elemen formating seperti <b><strong> dan lain-lain.
7. Comment
Komentar ini berfungsi untuk menandai bagian bagian tertentu / penjelasan dari sebuah kode yang di khawatirkan lupa. dan elemen ini tidak akan tampil di browser. untuk penggunaan komentar ini di awali dengan kode <!-- dan di akhiri dengan kode --> contoh penggunaan
<html>
<head>
<!--disini beisi informasi dokumen -->
<title>tes comment <!-- disini berisi judul --></title>
</head>
<body>
<!-- disini berisi teks inti -->
lorem ibsum dulur ku kabeh
</body>
</html>
maka outputnya hanya seperti ini
Itu saja untuk elemen-elemen dasar, pada bab selanjutnya membahas tentang Styling
PreviousNext
1 komentar untuk Belajar HTML #part2 Elemen umum HTML.
Perlihatkan Semua Komentar Tutup Semua Komentar
mantap lah infonya buat tambah2 ilmu edit template blog, jgn lupa kunbal ke yudhistiramawardi.com hehe
Balas Hapus