Langsung ke konten utama

Memformat Karakter HTML - HTML Tutorial

Format terhadap karakter yang ditampilkan akan sangat berguna untuk membuat sebuah dokumen HTML yang menarik.

1.Logical Format

Logical format akan menerapkan layout dokumen secara logis dan terstruktur.Tag-tag yang termasuk logical format adalah sebagai berikut :
  • <cite> digunakan untuk menandai suatu kutipan (Citation).
  • <code> digunakan untuk menampilkan kode-kode pemrograman,misalnya bahasa C.
  • <em> digunakan untuk menandai suatu teks yang ditekankan oleh penulis.
  • <kbd> digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.
  • <samp> digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.
  • <strong> digunakan untuk menandai bagian yang terpenting dari suatu teks.
  • <var> digunakan untuk menampilkan nama variabel.
  • <dfn> digunakan untuk menandai sebuah subdenfinisi dari daftar.
Semua tag tersebut memerlukan tag penutupnya masing-masing.

Contoh (save dengan nama logical format.html) :

 <html>
<head>
<title> Logical Format </title>
</head>
<body>
<cite> Tom Sawyer </citre> adalah satu tokoh penting di dunia sastra Amerika.
<br><br>
Kode yang paling pertama dipelajari oleh programmer C adalah :
<code>puts ("Hello World!") ; </code> <br><br>
Ia berkata , "Sekali tidak tetap <em>tidak</em>." <br><br>
Untuk berpindah ke direktor root , ketikkan <kbd>cd/
</kbd>. <br> <br> Pada abjad terdapat 5 huruf vokal,yaitu <samp>aeiuo</samp>. <br> <br>
Hal yang harus diingat-ingat adalah <strong>Jangan Panik !</strong> <br> <br> Kode program tersebut diiterasi sebanyak <var>n</var> kali. <br><br>
<dfn>Trenggiling adalah hewan pemakan semut. </dfn>
</body>
</html>

2.Physical Format

Physical format adalah format terhadap fisik suatu font.Tag-tag yang termasuk physical format adalah sebagai berikut :
  • <b> untuk menampilkan huruf tebal
  • <i> untuk menampilkan huruf miring
  • <u> untuk menampilkan garis bawah pada teks
  • <tt> untuk menampilkan huruf seperti huruf mesin ketik.
  • <strike> untuk menampilkan garis horizontal pada bagian tengah huruf
  • <big> untuk menampilkan ukuran huruf yang lebih besar
  • <small> untuk menampilkan ukuran huruf yang lebih kecil
  • <sub> untuk menampilkan subscript
  • <sup> untuk menampilkan superscript
Semua tag-tag tersebut memerlukan penutupnya masing-masing.

Contoh (save dengan nama physical format-1.html) :

 <html>
<head>
<title> Memformat Karakter </title>
</head>
<body>
<body>
<b> Kalimat ini akan dicetak tebal. </br><br>
<i> Kalimat ini akan dicetak miring </i><br>
<u> Kalimat ini akan bergaris tengah </strike>
</body>
</html>

3.Tag <blockquote>

Digunakan untuk menandai bagian yang dikhususkan pada sebuah dokumen,misalnya kutipan kitab suci,kata mutiara dll. Teks yang diberi ini akan menjorok ke dalam.

Contoh (save dengan nama blockquote.html)

 <html>
<head>
<title> Penggunaan Blockquote </title>
</head>
<body>
<pre>
Definisi Sistem menurut Steven B Shop adalah :
<Blockquote>Sistem adalah kumpulan dari komponen-komponen yang saling bekerja sama untuk mencapai suatu tujuan.
</blockquote>
</body>
</html>


4. Font <font>

Digunakan untuk mengatur huruf dokumen HTML.Tag font mempunyai attribut,yaitu : SIZE,FACE,COLOR.
  • size : digunakan untuk mengatur ukuran font.Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.
  • face : digunakan untuk mengatur jenis atau nama font.Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma.Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_) .Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita).Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh,gunakan saja font standar.Tapi bila anda ingin menggunakan font yang sedikit "aneh" anda bisa menggunakan graphic.
  • color : digunakan untuk mengatur warna font.Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
Contoh (save dengan nama font.html) :

 <html>
<head>
<title>Mengatur ukuran,jenis dan warna font </title>
</head>
<body>
<font size="1" Face="arial" color="red">ukuran font
1</font><br />
<font size="2" Face="arial" color="green">ukuran font 2 </font><br />
<font size="3" Face="arial" color="blue">ukuran font 3</font><br />
<font size="4" Face="verdana" color="red">ukuran font 4</font><br />
<font size="5" Face="verdana" color="blue">ukuran font 5</font><br />
<font size="6" Face="Tahoma" color="green">ukuran font 6</font><br />
<font size="7" Face="tahoma" color="red">ukuran font 7</font><br />
</body>
</html>

5. Karakter Khusus

HTML menyediakan sejumlah simbol yang berguna untuk menampilkan makna khusus bagi browser.

Contoh (save dengan nama karakter.html) :

 <html>
<head>
<title>Karakter Khusus</title>
</head>
<body>
&copy; 2020 Yadull
</body>
</html>


Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Elemen-elemen dasar HTML untuk memformat halaman web

Sumber gambar peterwebs.com 1.Elemen Head Bagian Head sebenarnya tidak harus ada pada dokumen HTML, tetapi pemakaian head yang benar akan meningkatkan kegunaan suatu dokumen HTML.Isi bagian head kecuali judul dokumen tidak akan terlihat oleh pembaca dokumen tersebut. Elemen-elemen pada bagian head akan mengerjakan tugas-tugas sebagai berikut : Menyediakan judul dokumen Menjabatani hubungan antar dokumen Memberitahu browser untuk membuat form pencarian Menyediakan metode untuk mengirim pesan ke tipe browser Elemen yang mungkin terdapat pada bagian head : 1.Tag <title>,digunakan untuk memberi judul dokumen.Penggunaannya sebagai berikut : <title> Judul </title> 2.Tag <base>,digunakan untuk menentukan basis URL sebuah dokumen.Penggunaannya adalah sebagai berikut : <base href="url"> contoh : <base href="//www.alamat.com/direktori"> 3.Tag <link>,digunakan untuk menunjukkan relasi antar do...
2 komentar
Baca selengkapnya

Pentingnya belajar berfilsafat

 Ingatlah kita ini kayak kereta yang harus dikendalikan oleh akal.Jangan sampai akalnya mati bolak-balik.Kayak katanya Aristoteles itu bilang manusia adalah binatang yang mikir,jangan sampai mikirnya ini mati,karena begitu mikirnya mati yang tersisa tinggal binatangnya,dia pengendalinya. Oke,makanya belajarlah filsafat.Nanti di bagian-bagian awal simposium diskusimu muncul ,,,kenapa kok tiba-tiba ngomong cinta...Ya,karena awalnya ngomong filsafat. Jadi,katanya Socrates kan sering bilang bahwa filsafat itu adalah satu bidang keilmuwan,bidang pengetahuan yang membuat kita bisa hidup lebih baik.Kenapa?karena kita bisa berfikir lebih baik..Socrates kan gitu..pengetahuan keniscayaan kebaikan..pengetahuan yang benar,perbuatan pasti juga benar.Enggak mungkin orang ngerti pengetahuan yang baik,perbuatannya salah..Kenapa orang kayak gini katanya Plato berarti dia belum benar-benar tau,dan dia orang bodoh..Karena kalau orang benar-benar ngerti,kalau dia tau kebaikan dia pasti melakukan kebai...
Posting Komentar
Baca selengkapnya

Membangun Sikap Percaya Diri

Aset paling berharga bagi banyak orang adalah juga aset yang paling belakangan dihargai.Aset itu,apabila ditangani dengan sebenarnya,akan mampu memberikan hasil secara dramatis.Aset yang tidak dapat dikenakan harga setinggi apa pun adalah otak manusia,pikiran dan proses berpikir.             Otak merupakan kawasan penyimpanan dan kapasitasnya luar biasa,menjadi pentingkah untuk berhati-hati di dalam mengisinya.Sebagian orang mempunyai otak yang penuh dengan pemikiran dan pengalaman negatif.Mereka akan secara terus-menerus menanamkan berbagai masukan sehingga ketika dihadapkan pada sebuah kesempatan atau tantangan baru,otak mereka,ketika ditanya,mengirimkan jawaban : Tidak, kamu tidak mampu, atau tanggapan lain semacam itu.Langkah yang diperlukan untuk membangun kepercayaan diri dan yang pada gilirannya membangun rasa percaya diri bagi motivasi diri dari dalam.             Begitu banyak orang mengurungkan niat mereka dengan ...
Posting Komentar
Baca selengkapnya