MODUL II
MEMAHAMI TAG UTAMA HTML
Tag dasar html sangat mutlak diperlukan browser untuk mengenali sebuah dokumen html, karena pada dasarnya dokumen html tidak akan memiliki keistimewaan apapun apabila tidak dieksekusi pada sebuah browser. Sedangkan browser hanya dapat mengeksekusi sebuah dokumen html apabila di dalam dokumen tersebut telah dilengkapi tag-tag dasar html yang meliputi <html>, <head>, <title>, dan <body> berikut tag penutupnya.
Tag utama HTML adalah tag yang digunakan untuk memanipulasi dokumen html. Misalnya untuk mengatur paragraf, ganti baris, dan lain-lain. Tag utama dari html terdiri dari :
- Heading
- Paragraf
- Font
- Break line
- Horizontal line
- Marquee
- Blink
Heading
Tag heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen html. Tag heading mempunyai 6 buah bilangan terdiri dari 1, 2, 3, 4, 5, dan 6. Masing-masing bilangan yang terdapat pad tag heading berfungsi untuk mewakili ukuran dari besarnya tag heading. Bilangan pertama merupakan ukuran terbesar dari tag heading, sedangkan bilangan terakhir pada tag heading merupakan ukuran terkecil. Sintaksnya adalah sebagai berikut :
<hn[properti]>................................</hn[properti]>
Keterangan.
1. n adalah bilangan yang terdiri dari 1 sampai dengan 6
2. properti adalah kemampuan tambahan yang dimiliki tag heading
Properti
Keterangan
Align
Pengaturan letak heading
Contoh :
<html>
<head>
<title>Penggunaan Heading rata Kiri-dengan Notepad</title>
</head>
<body>
<h1 align=”left”>Penggunaan Heading 1 Rata Kiri</h1>
<h2 align=”left”>Penggunaan Heading 2 Rata Kiri</h2>
<h3 align=”left”>Penggunaan Heading 3 Rata Kiri</h3>
<h4 align=”left”>Penggunaan Heading 4 Rata Kiri</h4>
<h5 align=”left”>Penggunaan Heading 5 Rata Kiri</h5>
<h6 align=”left”>Penggunaan Heading 6 Rata Kiri</h6>
</body>
</html>
Paragraf
Infromasi yang ditampilkan pada sebuah dokumen html harus mengikuti kaidah-kaidah penulisan yang benar, diantaranya penggunaan paragraf. Di dalam format sebuah dokumen html, fungsi dari paragraf telah ditambah pada sebuah browser web untuk mengenalinya. Sintak yang digunakan untuk menuliskan paragraf dalam doumen html adalah sebagai berikut :
<p[properti]..........................</p>
1. Properti adalah kemampuan yang ditambahkan pada tag paragraf
Properti
Keterangan
Align
Pengaturan letak paragraf. Nilainya adalah left(rata kiri, center(rata tengah), right(rata kanan), dan justify(rata kanan-kiri)
Contoh:
<html>
<head>
<title>Penggunaan Paragraf rata Kiri-dengan Notepad</title>
</head>
<body>
<h1 align=”left”>HOME PAGE SERBA GRATIS</h1>
<p align=”left”>Mengapa harus bayar kalau ada yang gratis, mengapa harus beli kalau ada yang Cuma-Cuma. Yess....Situs ini berisi informasi yang dibutuhkan untuk membuat sebuah home page gratis........ </p>
</body>
</html>
Font
Tag font digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam dokumen html. Sintaksnya adalah sebagai berikut :
<font[properti]> .........................</font>
1. Properti adalah kemampuan yang dimiliki pada tag font
Properti
Keterangan
Face
Bentuk dan nama huruf
Size
Ukuran huruf
Color
Warna huruf
Contoh:
<html>
<head>
<title>Contoh font dengan propertinya - Notepad</title>
</head>
<body>
<font face="Comic san MS"color=#0000ff size=4>
<h1 align="center">Belajar HTML</h1></font>
<font face="arial" size=2>
<p align="justify"> HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan yang digunakan dalam dokumen web.
Dokumen HTML adalah sebuah dokumen teks murni yang dapat dibuat
dengan editor web sembarang seperti notepad. </p>
</body>
</html>
Break Line
Untuk memotong kalimat di dalam dokumen html digunakan fungsi break line. Sintaksnya adalah sebagai berikut :
........kalimat..<br>.....kalimat.........<br>
<html>
<head>
<title>Contoh penggunaan tag break line - Notepad</title>
</head>
<body>
<h2 align="center">Belajar HTML</h2>
<p align="justify"> HTML adalah kependekan dari Hyper Text Markup Language<br>
yang artinya tata cara penulisan yang digunakan dalam dokumen web.
........... </p>
</body>
</html>
Horizontal Line
Horizontal line atau garis mendatar digunakan sebagai pemisah antar paragraf dalam sebuah dokumen html.
Sintaknya adalah sbb
<hr [proverti]>
Properti
Keterangan
Align
Letak dari horizontal line. Nilainya adalah left, center, right, justify. Secara default tag horizontal line akan diletakan rata kiri
atau justify.
Size
Ukuran ketebalan dari tag horizontal line. Defaultnya adalah 2
Width
Lebar dari horizontal line. Satuaannya dalam persen atau pixels
Color
Warna dari horizontal line Anda dapat menyebut warna dari horizontal line, apabila anda tidak hapal nilai dari suatu warna. Misalnya Blue, Green, red, dsb
NoShade
Efek bayangan atau shading pada tag horizontal line. Apabila anda menginginkan efek bayangan pada garis mendatar yang anda buat, maka properti ini tidak perlu dituliskan.
Contoh 1 :
<html>
<head>
<title>Contoh penggunaan tag garis mendatar Notepad</title>
</head>
<body>
<h3 align=”center”>FBI Peringatkan kemungkinan Serangan di kilang minyak Texax<br> </h3>
</h4 align=”center”>Wasington, Jum’at</h4>
<p align=”justify”>Biro penyelidik Federal AS (FBI) memperingatkan industri minyak di Texax bahwa mereka mungkin menjadi sasaran serangan teror, namun badan badan tersebut tidak memberikan penjelasan terinci mengenai ancaman potensial tertentu, kata sejumlah pejabat FBI, Kamis</p>
<p align=”right”>Sumber Kompas, Kamis, 24 Dsember 2008</p>
<hr color=”#000000”noshade size=”3” align=”left” width=90%>
</body>
</html>
Contoh 2
<body bgcolor="#c0c0c0">
<hr width="80%" align="left"><br>
<hr width="80%" align="left">
<hr width="80%" align="right"><br>
<hr width="80%" align="right">
<hr width="80%" align="center"><br>
<hr width="80%" align="center">
<hr size="20" align="center" width ="50%"><br>
<hr size="20" align="center" width ="50%">
<hr align="center" size="5" noshade><br>
<hr align="center" size="20" noshade>
<hr widht="65" align="center" size="5" size 15 nosade><br>
<hr align="center" size="20" noshade>
Marquee
Marquee adalah sebuah teks berjalan pada dokumen HTML..Sintaksnya adalah sebagai berikut :
<marquee [properti]>....Isi/Text Marquee....</marquee>
Keterangan :
Properti
Keterangan
Behavior
Cara atau teknik dari marquee untuk menjalankan teks. Nilainya adalah scrool atau mengulang searah teks, slide atau mengulang searah teks, dan alternate teks berjalan bolak balik.
Direction
Arah teks berjalan
Height
Tinggi dari marquee nilainya dalam prosentase % atau pixel
Wdth
Lebar dari marquee nilainya dalam prosentase % atau pixel
Countinously
Pengulangan teks secara terus menerus, maka properti ini tidak perlu dicantumkan karena secra default properti countinously akan mengulang secara otomatis
Bgcolor
Warna latar dari marquee. Nilainya bisa anda cantumkan tanpa harus menuliskan kode warna apabila anda tidak hapal. Misalnya blue, yellow dll.)
Style
Kamamapuan tambahan unutk memformat font, paragraf, border, numbering dan posisiton.
Contoh :
<html>
<head>
<title>Contoh penggunaan text berjalan-Notepad</title>
</head>
<body>
<p>
<marquee bgcolor=”C0C0C0”>Text Berjalan ini menggunakan MARQUEE </marquee></p>
</body>
</html>
Blink
Blink adalah sebuah teks berkedip pada dokumen HTML..Sintaksnya adalah sebagai berikut :
<blink>....Isi/Text Berkedip....</blink >
C. PRAKTEK
1. Ketik program dibawah ini, simpan dengan nama modul2.html
2. Jalankan, dan amati hasilnya.
<html>
<head>
<title>Memahami tag utama HTML - Notepad</title>
</head>
<body>
<font face="Comic sans MS"color="#FF0000">
<h1 align="center">Belajar<blink> HTML</blink></h1></font>
<hr>
<font face="arial" color="blue" size="3">
<marquee behavior=”alternate” bgcolor=”orange”>Belajar HTML dengan menggunakan Editor NOTEPAD</marquee>
<p align="justify"> HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan yang digunakan dalam dokumen web.<br>
Dokumen HTML adalah sebuah dokumen teks murni yang dapat dibuat dengan editor web sembarang seperti notepad, dokumen ini akan di eksekusi oleh sebuah web browser, sehingga browser mampu menghasilkan suatu dokumen yang sesuai dengan keinginan seorang designer atau progremer web.
Dokumen ini mempunyai kemampuan untuk menampilkan gambar, suara, teks, maupun penyediaan link terhadap halaman web lainnya, baik alamat yang sama maupun alamat yang berbeda. </p>
</body>
</html>
MEMAHAMI TAG UTAMA HTML
Tag dasar html sangat mutlak diperlukan browser untuk mengenali sebuah dokumen html, karena pada dasarnya dokumen html tidak akan memiliki keistimewaan apapun apabila tidak dieksekusi pada sebuah browser. Sedangkan browser hanya dapat mengeksekusi sebuah dokumen html apabila di dalam dokumen tersebut telah dilengkapi tag-tag dasar html yang meliputi <html>, <head>, <title>, dan <body> berikut tag penutupnya.
Tag utama HTML adalah tag yang digunakan untuk memanipulasi dokumen html. Misalnya untuk mengatur paragraf, ganti baris, dan lain-lain. Tag utama dari html terdiri dari :
- Heading
- Paragraf
- Font
- Break line
- Horizontal line
- Marquee
- Blink
Heading
Tag heading adalah tag yang digunakan untuk membuat judul dari isi sebuah dokumen html. Tag heading mempunyai 6 buah bilangan terdiri dari 1, 2, 3, 4, 5, dan 6. Masing-masing bilangan yang terdapat pad tag heading berfungsi untuk mewakili ukuran dari besarnya tag heading. Bilangan pertama merupakan ukuran terbesar dari tag heading, sedangkan bilangan terakhir pada tag heading merupakan ukuran terkecil. Sintaksnya adalah sebagai berikut :
<hn[properti]>................................</hn[properti]>
Keterangan.
1. n adalah bilangan yang terdiri dari 1 sampai dengan 6
2. properti adalah kemampuan tambahan yang dimiliki tag heading
Properti
Keterangan
Align
Pengaturan letak heading
Contoh :
<html>
<head>
<title>Penggunaan Heading rata Kiri-dengan Notepad</title>
</head>
<body>
<h1 align=”left”>Penggunaan Heading 1 Rata Kiri</h1>
<h2 align=”left”>Penggunaan Heading 2 Rata Kiri</h2>
<h3 align=”left”>Penggunaan Heading 3 Rata Kiri</h3>
<h4 align=”left”>Penggunaan Heading 4 Rata Kiri</h4>
<h5 align=”left”>Penggunaan Heading 5 Rata Kiri</h5>
<h6 align=”left”>Penggunaan Heading 6 Rata Kiri</h6>
</body>
</html>
Paragraf
Infromasi yang ditampilkan pada sebuah dokumen html harus mengikuti kaidah-kaidah penulisan yang benar, diantaranya penggunaan paragraf. Di dalam format sebuah dokumen html, fungsi dari paragraf telah ditambah pada sebuah browser web untuk mengenalinya. Sintak yang digunakan untuk menuliskan paragraf dalam doumen html adalah sebagai berikut :
<p[properti]..........................</p>
1. Properti adalah kemampuan yang ditambahkan pada tag paragraf
Properti
Keterangan
Align
Pengaturan letak paragraf. Nilainya adalah left(rata kiri, center(rata tengah), right(rata kanan), dan justify(rata kanan-kiri)
Contoh:
<html>
<head>
<title>Penggunaan Paragraf rata Kiri-dengan Notepad</title>
</head>
<body>
<h1 align=”left”>HOME PAGE SERBA GRATIS</h1>
<p align=”left”>Mengapa harus bayar kalau ada yang gratis, mengapa harus beli kalau ada yang Cuma-Cuma. Yess....Situs ini berisi informasi yang dibutuhkan untuk membuat sebuah home page gratis........ </p>
</body>
</html>
Font
Tag font digunakan untuk mengatur bentuk dan tampilan suatu huruf dalam dokumen html. Sintaksnya adalah sebagai berikut :
<font[properti]> .........................</font>
1. Properti adalah kemampuan yang dimiliki pada tag font
Properti
Keterangan
Face
Bentuk dan nama huruf
Size
Ukuran huruf
Color
Warna huruf
Contoh:
<html>
<head>
<title>Contoh font dengan propertinya - Notepad</title>
</head>
<body>
<font face="Comic san MS"color=#0000ff size=4>
<h1 align="center">Belajar HTML</h1></font>
<font face="arial" size=2>
<p align="justify"> HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan yang digunakan dalam dokumen web.
Dokumen HTML adalah sebuah dokumen teks murni yang dapat dibuat
dengan editor web sembarang seperti notepad. </p>
</body>
</html>
Break Line
Untuk memotong kalimat di dalam dokumen html digunakan fungsi break line. Sintaksnya adalah sebagai berikut :
........kalimat..<br>.....kalimat.........<br>
<html>
<head>
<title>Contoh penggunaan tag break line - Notepad</title>
</head>
<body>
<h2 align="center">Belajar HTML</h2>
<p align="justify"> HTML adalah kependekan dari Hyper Text Markup Language<br>
yang artinya tata cara penulisan yang digunakan dalam dokumen web.
........... </p>
</body>
</html>
Horizontal Line
Horizontal line atau garis mendatar digunakan sebagai pemisah antar paragraf dalam sebuah dokumen html.
Sintaknya adalah sbb
<hr [proverti]>
Properti
Keterangan
Align
Letak dari horizontal line. Nilainya adalah left, center, right, justify. Secara default tag horizontal line akan diletakan rata kiri
atau justify.
Size
Ukuran ketebalan dari tag horizontal line. Defaultnya adalah 2
Width
Lebar dari horizontal line. Satuaannya dalam persen atau pixels
Color
Warna dari horizontal line Anda dapat menyebut warna dari horizontal line, apabila anda tidak hapal nilai dari suatu warna. Misalnya Blue, Green, red, dsb
NoShade
Efek bayangan atau shading pada tag horizontal line. Apabila anda menginginkan efek bayangan pada garis mendatar yang anda buat, maka properti ini tidak perlu dituliskan.
Contoh 1 :
<html>
<head>
<title>Contoh penggunaan tag garis mendatar Notepad</title>
</head>
<body>
<h3 align=”center”>FBI Peringatkan kemungkinan Serangan di kilang minyak Texax<br> </h3>
</h4 align=”center”>Wasington, Jum’at</h4>
<p align=”justify”>Biro penyelidik Federal AS (FBI) memperingatkan industri minyak di Texax bahwa mereka mungkin menjadi sasaran serangan teror, namun badan badan tersebut tidak memberikan penjelasan terinci mengenai ancaman potensial tertentu, kata sejumlah pejabat FBI, Kamis</p>
<p align=”right”>Sumber Kompas, Kamis, 24 Dsember 2008</p>
<hr color=”#000000”noshade size=”3” align=”left” width=90%>
</body>
</html>
Contoh 2
<body bgcolor="#c0c0c0">
<hr width="80%" align="left"><br>
<hr width="80%" align="left">
<hr width="80%" align="right"><br>
<hr width="80%" align="right">
<hr width="80%" align="center"><br>
<hr width="80%" align="center">
<hr size="20" align="center" width ="50%"><br>
<hr size="20" align="center" width ="50%">
<hr align="center" size="5" noshade><br>
<hr align="center" size="20" noshade>
<hr widht="65" align="center" size="5" size 15 nosade><br>
<hr align="center" size="20" noshade>
Marquee
Marquee adalah sebuah teks berjalan pada dokumen HTML..Sintaksnya adalah sebagai berikut :
<marquee [properti]>....Isi/Text Marquee....</marquee>
Keterangan :
Properti
Keterangan
Behavior
Cara atau teknik dari marquee untuk menjalankan teks. Nilainya adalah scrool atau mengulang searah teks, slide atau mengulang searah teks, dan alternate teks berjalan bolak balik.
Direction
Arah teks berjalan
Height
Tinggi dari marquee nilainya dalam prosentase % atau pixel
Wdth
Lebar dari marquee nilainya dalam prosentase % atau pixel
Countinously
Pengulangan teks secara terus menerus, maka properti ini tidak perlu dicantumkan karena secra default properti countinously akan mengulang secara otomatis
Bgcolor
Warna latar dari marquee. Nilainya bisa anda cantumkan tanpa harus menuliskan kode warna apabila anda tidak hapal. Misalnya blue, yellow dll.)
Style
Kamamapuan tambahan unutk memformat font, paragraf, border, numbering dan posisiton.
Contoh :
<html>
<head>
<title>Contoh penggunaan text berjalan-Notepad</title>
</head>
<body>
<p>
<marquee bgcolor=”C0C0C0”>Text Berjalan ini menggunakan MARQUEE </marquee></p>
</body>
</html>
Blink
Blink adalah sebuah teks berkedip pada dokumen HTML..Sintaksnya adalah sebagai berikut :
<blink>....Isi/Text Berkedip....</blink >
C. PRAKTEK
1. Ketik program dibawah ini, simpan dengan nama modul2.html
2. Jalankan, dan amati hasilnya.
<html>
<head>
<title>Memahami tag utama HTML - Notepad</title>
</head>
<body>
<font face="Comic sans MS"color="#FF0000">
<h1 align="center">Belajar<blink> HTML</blink></h1></font>
<hr>
<font face="arial" color="blue" size="3">
<marquee behavior=”alternate” bgcolor=”orange”>Belajar HTML dengan menggunakan Editor NOTEPAD</marquee>
<p align="justify"> HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan yang digunakan dalam dokumen web.<br>
Dokumen HTML adalah sebuah dokumen teks murni yang dapat dibuat dengan editor web sembarang seperti notepad, dokumen ini akan di eksekusi oleh sebuah web browser, sehingga browser mampu menghasilkan suatu dokumen yang sesuai dengan keinginan seorang designer atau progremer web.
Dokumen ini mempunyai kemampuan untuk menampilkan gambar, suara, teks, maupun penyediaan link terhadap halaman web lainnya, baik alamat yang sama maupun alamat yang berbeda. </p>
</body>
</html>
Tidak ada komentar:
Posting Komentar