Kamis, 30 Mei 2019

memodifikasi tampilan teks di html



setelah dulu (lama .. lama ... sekali) belajar struktur dasar html, sekarang aku akan belajar bahasa dasar html kedua, yaitu modifikasi teks hml. kalian tahu, sebenarnya kebanyakan isi halaman html adalah teks, jadi bahasa html lebih banyak berfungsi memodifikasi teks agar tampilannya berubah menjadi lebih baik. istilah lainnya "markup" jadi html singkatan dari hypertext markup language.

bagaimana cara memodifikasi teks di html?

caranya dengan menambahkan kode-kode di depan dan dibelakang suatu teks. jadi teks itu diapit dua kode. kode pertama adalah kode pembuka sedangkan kode kedua adalah penutup. struktur umumnya seperti ini: <kode>teks</kode>.

kode-kode ini bermacam-macam sesuai fungsinya. kode-kode itu antara lain sebagai berikut:

1). h. kode ini untuk membuat judul atau heading paragraf. kode h berisi dari angka 1 sampai 6. jadi h1, h2,h3 ... h6. teks h1 yang paling besar. yang berikutnya semakin kecil, semakin kecil seterusnya sampai yang paling kecil adalah h6. semua bercetak tebal. contoh: <h1>judul</h1>. hasilnya:

judul


2). p untuk membuat paragraf. di dalam kode ini bisa diberi atribut align kemudian diisi right, center atau left. artinya masing-masing kanan, tengah dan kiri. contoh: <p>setiap blog memiliki identitas yang khusus yang membedakannya dengan blog yang lain. dengan identitas itu setiap blog memiliki keunikan sehingga menarik perhatian pengunjung walau dia memiliki konten yang hampir sama dengan blog-blog yang lain.</p> hasilnya:

setiap blog memiliki identitas yang khusus yang membedakannya dengan blog yang lain. dengan identitas itu setiap blog memiliki keunikan sehingga menarik perhatian pengunjung walau dia memiliki konten yang hampir sama dengan blog-blog yang lain.

3). b, untuk bercetak tebal. contoh: <b>tebal</b>. hasilnya: tebal.
4). i untuk bercetak miring. contoh: <i>miring</i>.Hasilnya:miring.
6). sup, untuk membuat tanda pangkat. contoh: x<sup>3</sup>Hasilnya: x3
7). sub untuk membuat tanda indeks, yaitu angka kecil di bawah. contoh: u<sub>n</sub> = a + (n - 1)b. Hasilnya: un = a + (n - 1)b.
8). strong, untuk membuat teks kuat. efeknya sama dengan b. contoh: <strong>orang yang kuat adalah orang yang mampu menahan dirinya di waktu marah</strong>.Hasilnya: orang yang kuat adalah orang yang mampu menahan dirinya di waktu marah.
9). em, untuk membuat teks emphasize. efeknya sama dengan i. contoh: <em>orang itu ... dasar! kalau tidur matanya merem!</em.orang itu ... dasar! kalau tidur matanya merem!.
10). big, untuk membuat teks menjadi lebih besar. <big> perhatian! perhatikan kiri kanan sebelum menyeberang jalan!</big>Hasilnya: perhatian! perhatikan kiri kanan sebelum menyeberang jalan!
11). small, untuk membuat teks menjadi lebih kecil. <small>semut di seberang lautan tampak, tapi gajah di pelupuk mata tidak tampak</small>.Hasilnya: semut di seberang lautan tampak, tapi gajah di pelupuk mata tidak tampak.
12). pre, untuk membuat teks terlihat tidak diformat. jadi dia terlihat seperti saat diketik. belum dirapikan oleh browser. contoh:
<pre>begin
writeln("halo");
end.</pre>

hasilnya:
begin
writeln("halo");
end.

13). kbd, untuk menampilkan teks hasil buatan keyboard. contoh: <kbd>qwertyuiop, asdfghjkl, zxcvbnm</kbd>Hasilnya: qwertyuiop, asdfghjkl, zxcvbnm
14). samp untuk memperlihatkan teks sebagai sampel. contoh: <samp> sample: 2236</samp>.Hasilnya: sample: 2236.
15). var, untuk memperlihatkan teks sebagai variabel program. efeknya sama seperti i. contoh: <var> var : int nilaiint = 10;</var>.Hasilnya: var : int nilaiint = 10;.
16). address, untuk memperlihatkan sistem alamat seseorang/lembaga/ instansi. efeknya bisa dirapikan rata kiri dan miring. Contoh:
<address>
Wika Nurviana
Jl. M. Natsir No. 8
Distrik 1 Kota Patria
</address>

hasilnya:

Wika Nurviana
Jl. M. Natsir No. 8
Distrik 1 Kota Patria
17). abbr untuk menampilkan dan menyembunyikan kepanjangan dari suatu singkatan. contoh: <abbr title="Dewan perwakilan rakyat">DPR</abbr>. hasilnya:  DPR.
18). blockquote, untuk menampilkan teks kutipan panjang. efeknya hampir sama dengan i, tapi dibuat seperti menjorok di tengah, tapi tetap rata kiri, bukan rata tengah. contoh: <blockquote>
Hidup yang ku jalani, masalah yang ku hadapi

Semua yang terjadi pasti ada hikmahnya (pasti ada hikmahnya)

Ku kan terus berjuang, ku kan terus bermimpi

Tuk hidup yang lebih baik, tuk hidup yang lebih indah (lebih indah)</blockquote>.

hasilnya:
Hidup yang ku jalani, masalah yang ku hadapi
Semua yang terjadi pasti ada hikmahnya (pasti ada hikmahnya)
Ku kan terus berjuang, ku kan terus bermimpi
Tuk hidup yang lebih baik, tuk hidup yang lebih indah (lebih indah)

19). q, untuk menampilkan kutipan pendek. teks berkode ini tetap tegak. contoh: <q>pengetahuan adalah kekuatan (Francis Bacon)</q> hasilnya: pengetahuan adalah kekuatan (Francis Bacon)
20). cite, untuk kutipan atau judul pekerjaan. kode ini juga bisa untuk kutipan. contoh: <cite>aku berpikir, maka aku ada. (Descartes)</cite>. hasilnya: aku berpikir, maka aku ada. (Descartes).
21). ins, untuk menyisipkan teks lain di dalam suatu teks. contoh: 1 lusin adalah <ins>12</ins> lusin. hasilnya: 1 lusin adalah 12 lusin.
22). del untuk mencoret suatu teks di dalam teks yang lain. contoh: manusia adalah keturunan <del>monyet</del> Nabi Adam. hasilnya: manusia adalah keturunan monyet Nabi Adam.
23). tt, untuk menuliskan teks teletype. contoh: <tt>quick fox jumps over lazy dog</tt>. hasilnya: quick fox jumps over lazy dog.

itu saja kode-kode untuk mmemodifikasi teks di html yang bisa aku ceritakan di sini. sebenarnya ada lebih banyak lagi, tapi takutnya nanti kepanjangan. jadi aku tulis sebagian saja.

untuk bagian lain sebenarnya masih ada, misalkan gambar, video dan musik, bahkan ada bagian ganti baris, garis mendatar, komentar, frame dan form. tapi belakangan.

itu saja kode html untuk teks hari ini. wassalam.

Tidak ada komentar:

Posting Komentar