Text Formatting, Link dan Gambar Donny Reza, S.Kom Aplikasi IT-1 Teknik Informatika Universitas Komputer Indonesia 2011
Font <font>, mengubah jenis font, ukuran dan warna. Attribut yang digunakan: color, face, size Contoh: <font color=“red” size=“10” face=“Arial”>Universitas Komputer Indonesia</font>
Latihan Simpan (save) dengan nama latihan2.html pada folder anda. <head> <title>Latihan 2: Mengubah Font</title> </head> <body> <h2>Visi</h2> <p><font color=“blue” size=“15” face=“Arial”>Menjadi Universitas terdepan dibidang Teknologi Informasi & Komputer, berwawasan Global dan menjadi pusat Unggulan dibidang ilmu pengetahuan Teknologi dan seni yang mendukung pembangunan nasional serta berorientasi pada kepentingan masyarakat, bangsa dan Negara </font> </p> </body> </html> Simpan (save) dengan nama latihan2.html pada folder anda.
Text Formatting Membesarkan Text <b> Menebalkan Text <big> Emphasized, Memiringkan Text <i> Italic, Memiringkan Text <small> Mengecilkan Text <strong> Menebalkan Text. Text terlihat lebih kuat. <sub> Subscript. Misalnya: H20 <sup> Superscript. Misalnya: 1000 Celcius <del> Sebagai tanda teks yang dihapus/diperbaiki. <ins> Sebagai tanda teks yang disisipkan.
Text Formatting Kategori: Output Komputer <code> Teks Kode Komputer <kbd> Teks Keyboard <samp> Teks sample <tt> Teletype <var> Variabel <pre> Preformat, menampilkan tulisan sesuai dengan yang diketik.
Text Formatting Kategori: Sitasi, Definisi, Kutipan (1/2) <abbr> Abbreviation, Singkatan <acronym> Akronim, singkatan yang membentuk kata baru. <address> Alamat <bdo> Menentukan arah tulisan, atribut yang digunakan: dir, dengan pilihan nilai atribut: ltr dan rtl. Default bernilai ltr. Contoh: <bdo dir=“rtl”>Isi Tulisan</bdo>
Text Formatting Kategori: Sitasi, Definisi, Kutipan (2/2) <blockquote> Digunakan untuk kutipan panjang <q> Digunakan untuk kutipan pendek <cite> Sitasi, Penghargaan <dfn> Definisi
Latihan Simpan (save) dengan nama latihan3.html pada folder anda. <head> <title>Latihan 3: Text Formatting</title> </head> <body> <h2>Text Formatting</h2> Teks <b>Tebal</b><br/> Teks <em>penting</em><br /> Teks yang <big>Lebih Besar</big><br/> Teks <i>miring</i><br/> <abbr title=“Palang Merah Indonesia”>PMI</abbr><br /> <acrnoym title=“Universitas Komputer Indonesia”>UNIKOM</acronym><br /> <bdo dir=“rtl”>Teks Arab Biasanya ditulis dari sebelah kanan</bdo><br /> <address>Jalan Dipati Ukur No.112-114, Bandung</address><br /> Hukum Newton III: <blockquote>Jika suatu benda mengerjakan gaya pada benda kedua maka benda kedua tersebut mengerjakan juga gaya pada benda pertama, yang besar gayanya = gaya yang diterima tetapi berlawanan arah.</blockquote> </body> </html> Simpan (save) dengan nama latihan3.html pada folder anda.
Gambar (Image) Menampilkan gambar pada website menggunakan tag: <img> Atribut yang dapat digunakan, antara lain: alt, src Contoh Penggunaan: <img src=“logo.jpg” alt=“Logo Unikom” width=“300” height=“150” /> src, alamat file gambar yang akan ditampilkan. alt, teks alternatif yang ditampilkan jika file gambar tidak ditemukan. width, menentukan ukuran lebar gambar. height, menentukan ukuran tinggi gambar.
Latihan Simpan (save) dengan nama latihan4.html pada folder anda. <head> <title>Latihan 4: Menampilkan gambar</title> </head> <body> <h2>Menampilkan Gambar</h2> <img src=“namagambar.jpg” alt=“Logo Unikom” title=“Logo Unikom” width=“200” height=“200” /> </body> </html> Simpan (save) dengan nama latihan4.html pada folder anda.
Link (Tautan) Membuat tautan(link) ke suatu alamat website, atau ke suatu halaman website, menggunakan tag: <a> Atribut yang dapat digunakan antara lain: href, target, title
Link (Tautan) Contoh link ke alamat suatu website: <a href=“http://www.unikom.ac.id” target=“_blank” title=“Website Resmi UNIKOM”>Universitas Komputer Indonesia</a> href: merupakan alamat situs atau file yang dituju. target: dokumen/tab yang digunakan untuk membuka link tersebut. “_blank” akan menyebabkan link dibuka pada tab baru. title: tulisan yang akan ditampilkan saat penunjuk mouse tepat berada di atas link.
Link (Tautan) Contoh link ke suatu halaman pada website yang sama: <a href=“latihan3.html” target=“_blank” title=“Latihan 3”>Latihan 3</a>
Link (Tautan) Contoh link menggunakan gambar: <a href=“latihan3.html” target=“_blank” title=“Latihan 3”><img src=“logo.jpg” alt=“Logo UNIKOM”/></a>
Latihan Simpan (save) dengan nama latihan5.html pada folder anda. <head> <title>Latihan 5: Membuat Link</title> </head> <body> <h2>Membuat Link</h2> <a href=“latihan2.html” title=“Latihan 2”>Latihan 2</a> <a href=“latihan3.html” title=“Latihan 3” target=“_blank”>Latihan 3</a> <a href=“latihan4.html” title=“Latihan 4”><img src=“namagambar.jpg” alt=“Logo” width=“200” height=“300”/></a> </body> </html> Simpan (save) dengan nama latihan5.html pada folder anda.