Selamat bertemu lagi teman, postingan sebelumnya
kita sudah membahas tentang pemrograman web dan HTML. Kali ini saya akan
melanjutkan pembahasan lagi yaitu tentang Tag Dasar HTML.
Tag berfungsi untuk menandai sebuah elemen dalam HTML, yang di tandai dengan simbol < dan >. elemen HTML selalu terdiri dari Tag pembuka < nama tag> dan tag penutup <nama tag/> . tag penutup selalu di tandai dengan simbol garis miring (/) sebelum nama tag. contoh
<body>.....................</body>
<body> sebagai tag pembuka dan </body> sebagai tag penutup.
Tag HTML juga mempunyai atribut untuk masing-masing tag walaupun tidak semuanya. atribut ini berfungsi untuk memperindah HTML seperti untuk mengganti font atau warna. contoh
<p color="red"> .......................... </p>
color dalam tag <p> sebagai atribut untuk mengganti warna sedangkan red untuk warna yang di inginkan.
Di HTML ada banyak tag yang bisa membantu kita untuk membuat sebuah web. di postingan sebelumnya kita sudah mempelajar struktur dasar sebuah HTML yang berisi tag-tag paling dasar dalam html, seperti head,title,body dan tag html itu sendiri.
di postingan ini saya akan membahas tag-tag lain selain tag dasar, seperti heading, bold, italic, dll.
1. Heading <h..>
untuk memberi heading dalam sebuah dokumen. tag ini mempunyai 6 tingkatan dari 1 sampai 6. semakin tinggi tingkatan semakin kecil heading yang di hasilkan. penulisannya
<html>
<head>
<title></title>
<head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
ketik baris diatas dalam notepad dan simpan dengan ekstensi *.html kemudian buka dengan browser dan hasilnya seperti di bawah ini.
2. Paragraf <p>
untuk membuat sebuah paragraf dalam sebuah dokumen html. tag ini mempunyai atribut align yang memiliki value ;
a. left : rata kiri
b. right : rata kanan
c. center : rata tengah
d. justify ; rata kanan-kiri
penulisannya ;
<html>
<head>
<title></title>
<head>
<body>
<p align=left >...Isi peragraf........</p>
<p>...Isi peragraf........</p>
<p>...Isi peragraf........</p>
<p>...Isi peragraf........</p>
</body>
</html>
hasilnya :
3. breakline <br>
breakline berfungsi untuk memindahkan baris 1 tingkat ke bawah atau kalau dalam keyboard enter. untuk tag ini berbeda dengan tag lain yaitu tidak menggunakan tag penutup. penulisannya
<html>
<head>
<title></title>
<head>
<body>
<p align=left >...Isi pe<br>ragraf........</p>
<p>...Isi peragraf........</p>
<p>...Isi<br> peragraf........</p>
<p>...Isi peragraf........</p>
</body>
</html>
hasilnya :
4. bold <b>, italic <i>, underline <u>
tag <b> berfungsi untuk memberi efek tebal pada teks.
tag <i> berfungsi untuk memberi efek miring pada teks.
tag <u> berfungsi untuk memberi efek garis bawah pada teks. penulisannya
<html>
<head>
<title></title>
<head>
<body>
<p align=left ><b>...Isi peragraf........</b></p
<p align=right ><i>...Isi peragraf........</i></p
<p align=center ><u>...Isi peragraf........</u>.</p
</body>
</html>
hasilnya :
5. Font <font>
tag ini mempunyai tiga atribut yaitu size(mengatur ukuran font), color(warna font), face(jenis font). Penulisannya ;
<html>
<body>
<p><font size="3" color="red">This is some text!</font></p>
<p><font size="2" color="blue">This is some text!</font></p>
<p><font face="verdana" color="green">This is some text!</font></p>
</body>
</html>
hasilnya ;
6. Tag untuk list item
ada 2 macam list item :
a. unordered list menggunakan tag <ul>.....</ul
b. ordered list menggunakan tag <ol>..........</ol>
dan untuk list nya/ daftarnya menggunakan tag <li>........</li>
<head>
<title></title>
<head>
<body>
<h3>editor html</h3>
<ul type="circle">
<li>fontpage</li>
<li>dreamweaver</li>
</ul
<h3>struktur dasar html</h3>
<ol type="1" set="2">
<li>head</li>
<li>title</li>
<li>body</li>
</ol
</body>
</html>
hasilnya :
Sebenarnya masih banyak lagi tag-tag dalam html akan tetapi saya tidak bisa membahas semuanya sekaligus, tetapi saya akan memberi sebuah referensi jika temen-temen ingin belajar tentang pemrograman web dari yang dasar sampai tingkat lanjut temen-temen dapat pelajari di W3 Schools. Hanya ini yang dapat saya sampaikan dan tunggu postingan selanjutnya.
Tag berfungsi untuk menandai sebuah elemen dalam HTML, yang di tandai dengan simbol < dan >. elemen HTML selalu terdiri dari Tag pembuka < nama tag> dan tag penutup <nama tag/> . tag penutup selalu di tandai dengan simbol garis miring (/) sebelum nama tag. contoh
<body>.....................</body>
<body> sebagai tag pembuka dan </body> sebagai tag penutup.
Tag HTML juga mempunyai atribut untuk masing-masing tag walaupun tidak semuanya. atribut ini berfungsi untuk memperindah HTML seperti untuk mengganti font atau warna. contoh
<p color="red"> .......................... </p>
color dalam tag <p> sebagai atribut untuk mengganti warna sedangkan red untuk warna yang di inginkan.
Di HTML ada banyak tag yang bisa membantu kita untuk membuat sebuah web. di postingan sebelumnya kita sudah mempelajar struktur dasar sebuah HTML yang berisi tag-tag paling dasar dalam html, seperti head,title,body dan tag html itu sendiri.
di postingan ini saya akan membahas tag-tag lain selain tag dasar, seperti heading, bold, italic, dll.
1. Heading <h..>
untuk memberi heading dalam sebuah dokumen. tag ini mempunyai 6 tingkatan dari 1 sampai 6. semakin tinggi tingkatan semakin kecil heading yang di hasilkan. penulisannya
<html>
<head>
<title></title>
<head>
<body>
<h1>heading 1</h1>
<h2>heading 2</h2>
<h3>heading 3</h3>
<h4>heading 4</h4>
<h5>heading 5</h5>
<h6>heading 6</h6>
</body>
</html>
ketik baris diatas dalam notepad dan simpan dengan ekstensi *.html kemudian buka dengan browser dan hasilnya seperti di bawah ini.
2. Paragraf <p>
untuk membuat sebuah paragraf dalam sebuah dokumen html. tag ini mempunyai atribut align yang memiliki value ;
a. left : rata kiri
b. right : rata kanan
c. center : rata tengah
d. justify ; rata kanan-kiri
penulisannya ;
<html>
<head>
<title></title>
<head>
<body>
<p align=left >...Isi peragraf........</p>
<p>...Isi peragraf........</p>
<p>...Isi peragraf........</p>
<p>...Isi peragraf........</p>
</body>
</html>
hasilnya :
3. breakline <br>
breakline berfungsi untuk memindahkan baris 1 tingkat ke bawah atau kalau dalam keyboard enter. untuk tag ini berbeda dengan tag lain yaitu tidak menggunakan tag penutup. penulisannya
<html>
<head>
<title></title>
<head>
<body>
<p align=left >...Isi pe<br>ragraf........</p>
<p>...Isi peragraf........</p>
<p>...Isi<br> peragraf........</p>
<p>...Isi peragraf........</p>
</body>
</html>
hasilnya :
4. bold <b>, italic <i>, underline <u>
tag <b> berfungsi untuk memberi efek tebal pada teks.
tag <i> berfungsi untuk memberi efek miring pada teks.
tag <u> berfungsi untuk memberi efek garis bawah pada teks. penulisannya
<html>
<head>
<title></title>
<head>
<body>
<p align=left ><b>...Isi peragraf........</b></p
<p align=right ><i>...Isi peragraf........</i></p
<p align=center ><u>...Isi peragraf........</u>.</p
</body>
</html>
hasilnya :
5. Font <font>
tag ini mempunyai tiga atribut yaitu size(mengatur ukuran font), color(warna font), face(jenis font). Penulisannya ;
<html>
<body>
<p><font size="3" color="red">This is some text!</font></p>
<p><font size="2" color="blue">This is some text!</font></p>
<p><font face="verdana" color="green">This is some text!</font></p>
</body>
</html>
hasilnya ;
6. Tag untuk list item
ada 2 macam list item :
a. unordered list menggunakan tag <ul>.....</ul
b. ordered list menggunakan tag <ol>..........</ol>
dan untuk list nya/ daftarnya menggunakan tag <li>........</li>
penulisannya ;
<html><head>
<title></title>
<head>
<body>
<h3>editor html</h3>
<ul type="circle">
<li>fontpage</li>
<li>dreamweaver</li>
</ul
<h3>struktur dasar html</h3>
<ol type="1" set="2">
<li>head</li>
<li>title</li>
<li>body</li>
</ol
</body>
</html>
hasilnya :
Sebenarnya masih banyak lagi tag-tag dalam html akan tetapi saya tidak bisa membahas semuanya sekaligus, tetapi saya akan memberi sebuah referensi jika temen-temen ingin belajar tentang pemrograman web dari yang dasar sampai tingkat lanjut temen-temen dapat pelajari di W3 Schools. Hanya ini yang dapat saya sampaikan dan tunggu postingan selanjutnya.
0 komentar:
Posting Komentar