12.33
Komet
HYPER TEXT MARKUP LANGUATE
HTML ( Hyper Text Markup Language ) adalah suatu format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform computer ke platform computer yang lainnya tanpa perlu melakukan suatu perubahan apapun. Dokumen HTML adalah suatu dokumen text biasa, sehingga platform apaun dokumen tersebut dapat dibaca.
Dokumen HTML disebut sebagai Markup Language karena mengadung tanda – tanda tertentu yang digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan dari teks tersebut dalam suatu dokumen
Struktur Dokumen HTML
Dokumen HTMl mempunyai tiga buah tag utama yang membentuk struktur dari dokumen tersebut yakni
HTML yang berfungsi untuk menyatakan suatu dokumen HTML
HEAD yang berfungsi untuk memberikan informasi tentang dokumen HTML
BODY yang berfungsi untuk menyimpan Informasi atau data yang akan ditampilkan dalam dokumen HTML
Struktur Dokumen HTML sebagai berikut :
<Html>
<Head>
<Title>
****** Bagian Head / Title ******
</Title>
</Head>
<Body>
****** Bagian Body ******
</Body>
</Html>
Contoh – Contoh <……… > (dibaca Sintag/Perintah) HTML:
1. Membuat Latar Belakang dengan warna
<bgcolor=”warna” >sintag ini di sisipkan di dalam sintag <body>
Contoh :
<Body Bgcolor=”purple” >
2. Membuat Latar belakang dengan Gambar
<Background=”lokasi gambar dan nama File gambarnya” > sintag ini disisipkan di dalam sintag <body>
Contoh:
<Body Background=”d:\Gambar\pemandangan.jpg” >
Artinya: Nama gambar adalah Pemandangan dengan Ekstensi JPG yang tersimpan pada Folder Gambar dan folder gambar terletak pada Drive D.
NB: Untuk perintah 1 dan 2 mesti dipilih salah satunya saja.
3. Heading/Judul
Ada 6 buah format judul yang tersedia dan masing-masing mempunyai besar huruf standar yaitu:
<h1>….<h6>
Contoh:
<h4>Hyper Text Markup Language</h4>
4. Horizontal Rule / Garis Horizontal
<hr>
Contoh:
<Hr size=ukuran>
<hr color=”warna” >
<hr width=angka %>
atau
<Hr color=”warna” size=ukuran width= angka %>
NB:<hr> tidak memiliki </hr>
5. Membuat Text Miring
<i>…..</i>
Contoh:
<i>Hyper text Markup Language</i>
6. Membuat text Tebal
</b>…..</b>
Contoh:
<b> Hyper text Markup Language</b>
7. Membuat Text bergaris Bawah
<u>…..</u>
Contoh:
<u> Hyper text Markup Language</u>
8. Membuat lebar huruf sama / Mono Spaced Font
<tt>….</tt>
Contoh:
<tt> Hyper text Markup Language</tt>
9. Membuat Text masuk Kedalam
<dd>
Contoh
<dd> text 1 Paragraph
10. Membuat Text Masuk Kedalam Seluruhnya
<Blockquote>
Contoh:
<Blockquote> text 1 Paragraph
11. Membuat Perataan Paragraph
<P align=”Jenis Perataan” >……</p>
Contoh:
<P align=”Right” > text 1 Pargraph </p>
12. Membuat Barisan kosong / Enter
<Br>
Contoh:
Hyper text <Br><Br>Markup Language
Maka Hasilnya:
Hyper text
Markup Language
NB: Semakin Banyak <BR> nya maka semakin banyak baris yang kosong
13. Membuat Teks Turun Kebawah ( Subscript )
<sub>
Contoh:
0<Sub>2 Hasilnya : O2
14. Membuat Teks Naik Ketas ( Superscript)
<Sup>
Contoh:
1<sup>st hasilnya : 1st
15. Membuat teks Tercoret (Strikethrough )
<s>
Contoh:
<s> Hyper text Markup Language Hasilnya: Hyper text Markup Language
16. Pengaturan Text /Font
<Font>
Contoh:
<Font color=”Warna”>Text </font>
<Font size=ukuran> Text </font>
<font face=”Nama Jenis Tulisan” > Text </font>
Atau
<Font color=”warna” size=ukuran face=”nama jenis tulisan> Text </font>
17. Membuat Orderlist / Numbering
<ol>……</ol> untuk mengawali dan mengakhiri Orderlist
<lh>……</lh> untuk heading / judul dari orderlist
<li>……</li> untuk item dari orderlist
Contoh:
<ol>
<lh>daftarbelanja</lh>
<li>Beras</li>
<li>Gula</li>
<li>Garam</li>
</ol>
Hasilnya
Daftar belanja
1. Beras
2. Gula
3. Garam
NB: Perintah diatas adalah orderlies/numbering bertingkat karena perintah diatas memiliki 2 buat perintah <ol>….</ol>
18. Membuat Undorderlist/Bullet
<ul>
Cara penulisannya/penggunaannya sama persis dengan perintah ordelist diatas, kita tinggal menggantikan perintah <ol>…..</ol> menjadi <ul>……</ul>
Contoh:
<ul>
<lh>daftarbelanja</lh>
<li>Beras</li>
<li>Gula</li>
<li>Garam</li>
</ul>
Hasilnya:
Daftar Belanja
• Beras
• Gula
• Garam
19. Membuat Text Bergerak
<marquee>………</marquee>
Contoh:
Menurut jenis pergerakannya
<Marquee direction=”left”>Text</marquee> dicoba right, down, up
<Marquee behavior=”alternate”>text</marquee> dicoba slide
Sintag marquee juga bisa disisipkan beberapa atribut/perintah lainnya misalnya:
• Bgcolor=”warna”
• Title=”isi Pesan”. Pesan akan muncul apabila mouse diletakan di atas tulisan
• Scrollmount=”angka”. Untuk mengatur kecepatan gerakan dalam pixel
• Width=”angka” untuk mengatur lebar blok lintas gerakan text
• onmouseover="this.stop()" onmouseout="this.start()". Untuk memberhentikan pergerakan teks dengan meletakkan mouse di atas teks. Apabila di geser mousenya maka teks akan bergerak lagi. Tidak semua browser yang dapat menggunakan perintah ini
contoh penggunaannya:
<center>
<font color="white">
<marquee behavior="alternate" width=70% Title="komet-Webmail@yahoo.com" direction="right" bgcolor="red" scrollmount=”4”>SELAMAT DATANG</Marquee>
</Font>
<center>
20. bersambung……………..
0 komentar:
Posting Komentar