Java Script
December 11, 2009
Format Teks
November 26, 2009
Ada beberapa tag HTML yang digunakan untuk mengatur format teks, seperti misalnya teks miring dan teks tebal. Latihan-latihan berikut akan menjelaskan format teks yang tersedia pada kode HTML.
Latihan 1 : Format Teks
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
<html> |
<body> |
<b>Teks ini tebal</b> |
<strong>Teks ini juga tebal</strong> |
<big>Teks ini besar</big> |
<small>Teks ini kecil</small> |
<u>Teks ini bergaris bawah</u> |
<i>Teks ini miring</i> |
Teks ini berisi <sub>subscript</sub> |
Teks ini berisi <sup>superscript</sup> |
</body> |
</html> |
- Simpan file di My Document sebagai “coba4-1.html” dengan cara klik menu File-Save As.. Di sebelah kiri pilih My Document, kemudian pada bagian Save as type pilih All Files, lalu ketik “coba4-1.html” pada bagian File name, klik tombol Save.
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-1.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-1.html), lalu klik OK.
Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana teks yang terdapat di dalam elemen body ditampilkan pada web browser sesuai format tag HTML yang diberikan :
<b></b> dan <strong></strong> membuat format teks tebal
<big></big> membuat format teks besar
<small></small> membuat format teks kecil
<u></u> membuat teks bergaris bawah
<em></em> membuat format teks penekanan
<i></i> membuat format teks miring
<sub></sub> membuat format teks subscript (huruf kecil di bawah)
<sup></sup> membuat format teks superscript (huruf kecil di atas)
Latihan 2 : Teks Preformat
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
<html>
<body>
<pre>
Ini adalah Teks yang tidak diformat. Hal ini membuat spasi dan pergantian baris tidak berubah.
</pre>
<p>Preformat digunakan untuk penulisan kode program:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
- Simpan file sebagai “coba4-2.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-2.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-2.html), lalu klik OK.
Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana teks yang berada di dalam tag <pre></pre> tidak akan diformat oleh web browser, dan akan ditampilkan apa adanya sesuai dengan apa yang dituliskan.
Spasi dan pergantian baris akan diabaikan oleh web browser. Seperti pada contoh, spasi dan pergantian baris akan ditampilkan persis seperti yang dituliskan pada kode HTML.
Latihan 3 : Teks Kutipan
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
<html>
<body>
Ini adalah teks kutipan panjang:
<blockquote>Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang Ini adalah teks kutipan panjang.</blockquote>
Ini adalah teks kutipan pendek:
<q>Ini adalah teks kutipan pendek</q>
</body>
</html>
- Simpan file sebagai “coba4-3.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-3.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-3.html), lalu klik OK.
Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana teks kutipan ditampilkan pada web browser. Ada dua format teks kutipan dalam HTML :
- Teks kutipan panjang dengan tag <blockquote></blockquote>
- Teks kutipan pendek dengan tag <q></q>
Dengan tag <blockquote> pergantian baris dan batas margin (indent) untuk teks akan secara otomatis diformat oleh web browser. Sedangkan untuk teks kutipan pendek dengan tag <q> teks tidak mengalami format apapun.
Latihan 4 : Teks List
- Jalankan aplikasi Notepad. Klik Start-Programs-Accessories-Notepad.
- Ketik baris perintah berikut ini :
<html>
<body>
<ul>Ini adalah contoh unordered list
<li> apple
<li> banana
<li> citrus
</ul>
<ol>Ini adalah contoh ordered list
<li> satu
<li> dua
<li> tiga
</ol>
</body>
</html>
- Simpan file sebagai “coba4-4.html”
- Jalankan aplikasi Internet Explorer, klik File-Open, pada dialog yang muncul klik Browse, cari file “coba4-4.html” yang baru dibuat tadi (misalnya di C:\My Documents\coba4-4.html), lalu klik OK.
Penjelasan
Contoh latihan di atas mendemonstrasikan bagaimana membuat list (daftar) teks pada HTML. Ada dua jenis list yang dapat dibuat :
- Unordered list (list menggunakan bullet) dengan tag <ul>
- Ordered list (list menggunakan angka) dengan tag <ol>
Kemudian untuk masing-masing teks list digunakan tag <li>
Ringkasan Format Teks HTML
| Tag | Keterangan |
|---|---|
| <b> | Menjelaskan teks tebal |
| <strong> | Menjelaskan teks tebal |
| <big> | Menjelaskan teks besar |
| <small> | Menjelaskan teks kecil |
| <u> | Menjelaskan teks bergaris bawah |
| <em> | Menjelaskan teks penekanan |
| <i> | Menjelaskan teks miring |
| <strong> | Menjelaskan teks tebal |
| <sub> | Menjelaskan teks kecil di bawah |
| <sup> | Menjelaskan teks kecil di atas |
| <blockquote> | Menjelaskan teks kutipan panjang |
| <q> | Menjelaskan teks kutipan pendek |
| <ul> | Menjelaskan list teks unordered |
| <ol> | Menjelaskan list teks ordered |
| <li> | Menjelaskan list teks |
HTML
November 25, 2009
- HTML merupakan kependekan dari HyperText Markup Language
- File HTML adalah file teks yang mengandung tag penanda (markup tags)
- Tag penanda memberitahu web browser bagaimana halaman web harus ditampilkan
- File HTML harus memiliki ekstensi .htm atau .html
- File HTML dapat dibuat dengan menggunakan teks editor sederhana
Ekstensi HTM atau HTML
Saat menyimpan sebuah dokumen atau file HTML ada dua macam ekstensi, yaitu ekstensi .htm atau .html yang dapat digunakan. Ekstensi .htm digunakan mengingat pada awal perkembangan teknologi komputer hanya dapat mendukung penggunaan tiga huruf untuk penyimpanan file. Dengan teknologi informatika yang semakin maju, saat ini disarankan untuk menyimpan file HTML dengan ekstensi .html
Editor HTML
HTML dapat dengan lebih mudah diedit dengan menggunakan aplikasi yang bersifat WYSIWYG (what you see is what you get) seperti Microsoft FrontPage, Macromedia Dreamweaver, Adobe PageMill, dan lain-lain. Aplikasi ini selain mudah digunakan juga menyediakan berbagai fasilitas dalam mengatur tampilan sebuah halaman web.
Namun untuk dapat menjadi seorang Web Developer yang terlatih, disarankan untuk tetap menggunakan teks editor sederhana dalam mempelajari HTML.
Tag HTML
- Tag HTML digunakan untuk menandai elemen HTML
- Tag HTML ditandai dengan penggunaan karakter kurung siku, yaitu < dan >
- Tag HTML umumnya selalu berpasangan, misalnya <b> dan </b>
- Tag pertama adalah tag awal, dan tag kedua adalah tag akhir yang ditandai dengan digunakannya karakter garis miring (/)
- Teks yang berada di antara tag awal dan tag akhir disebut isi elemen
- Tag HTML tidak bersifat “case sensitive”, maksudnya <b> bermakna sama dengan <B>
Elemen HTML
- Elemen HTML dibuka dengan tag awal. Contoh : <body>
- Dan ditutup dengan tag akhir : </body>
- Maksud dari tag <body> adalah untuk mendefinisikan bahwa elemen HTML ini adalah isi dari dokumen HTML tersebut.
Atribut Tag HTML
Tag HTML dapat memiliki atribut.
- Atribut ini berisi informasi tambahan mengenai elemen HTML.
- Atribut selalu ditulis dengan format nama atribut=”nilai atribut”
- Atribut selalu ditulis pada tag awal sebuah elemen HTML
Tag HTML Dasar
Tag HTML yang penting adalah tag yang mendefinisikan heading, paragraf, dan line breaks.
Heading
Heading ditandai dengan penggunaan tag <h1> sampai <h6>. Tag <h1> akan menampilkan heading paling besar, sedangkan tag <h6> akan menampilkan heading terkecil.
Paragraf
Paragraf ditandai dengan digunakannya tag <p>.
Line Breaks
Tag <br> digunakan untuk menandai perpindahan baris (line breaks), yaitu bila ingin berpindah ke baris baru tetapi tidak ingin membuat paragraf baru.
Baris Komentar di HTML
Tag komentar digunakan untuk menyisipkan komentar pada kode HTML. Baris komentar akan diabaikan oleh web browser dan tidak akan ditampilkan. Baris komentar digunakan untuk memudahkan menjelaskan dan menelusuri kode HTML yang dibuat bila suatu saat ingin diedit kembali.
Garis Horizontal
HTML menyediakan tag khusus untuk membuat garis horizontal, yaitu dengan menggunakan tag <hr>. Garis horizontal dapat digunakan untuk memisahkan bagian-bagian pada halaman HTML yang ingin ditampilkan.
