Membuat Paragraf, Daftar, dan Memformat Karakter di HTML
Pada artikel ini akan dibahas mengenai cara membuat teks preformat, address atau alamat, kutipan, komentar, singkatan atau akronim, paragraf, karakter spesial, daftar list bernomor dan tanpa nomor, dan daftar list definisi di HTML.
Membuat Paragraf, Daftar, dan Memformat Karakter di HTML - Melalui artikel ini diharapkan dapat membuat dokumen HTML sederhana menggunakan text editor dan menampilkannya lewat browser.
baca juga:
<html>
<body>
<pre>
Teks di elemen awal
Ditampilkan dalam lebar tetap
Font, dan itu diawetkan
Baik spasi maupun
Jeda baris
Membuat Paragraf, Daftar, dan Memformat Karakter di HTML - Melalui artikel ini diharapkan dapat membuat dokumen HTML sederhana menggunakan text editor dan menampilkannya lewat browser.
- Dasar-Dasar HTML dan Format Pada Dokumen HTML
- Memahami Dokumen HTML Dalam Pembuatan Website
- Pengertian HTML, Fungsi, Contoh, dan Cara Membuat HTML
- Macam-Macam Elemen HTML, Pengertian, Contoh, dan Fungsinya
- Contoh dan Cara Membuat Script Tag HTML Dasar
- Pengertian dan Cara Membuat HTML Beserta Fungsi dan Contohnya
Membuat Teks Preformat di HTML
Jarak antar kata atau kalimat pada dokumen HTML yang ditampikan oleh browser adalah satu spasi. Untuk membuat browser menampilakn text dengan apa adanya, sesuai degan yang kita tulis pada dokumen html maka gunakanlah tag pre yang merupakan tag berpasangan <pre>....</pre>.
Contoh 1:
Jarak antar kata atau kalimat pada dokumen HTML yang ditampikan oleh browser adalah satu spasi. Untuk membuat browser menampilakn text dengan apa adanya, sesuai degan yang kita tulis pada dokumen html maka gunakanlah tag pre yang merupakan tag berpasangan <pre>....</pre>.
Contoh 1:
<html>
<body>
<pre>
Teks di elemen awal
Ditampilkan dalam lebar tetap
Font, dan itu diawetkan
Baik spasi maupun
Jeda baris
</pre>
</body>
</html>
Hasil 1:
Membuat Address di HTML
Pada kebanyakan website pasti menginformasikan alamat dari pemilik website untuk memudahkan pengunjung website berinteraksi. Untuk kebutuhan tersebut pada dokumen html disediakan juga tag <address>...</address> agar penulisan alamat dapat distandarkan. Penggunaan tag ini akan memberikan penekanan text yang menginformasikan kepada mesin perambah bahwa text yang diapait oleh tag address merupakan text yang berisi informasi mengenai alamat. Agar terlihat rapi maka disetiap baris dari alamat dipisahkan oleh tag <br>.
Contoh 2:
<html>
<body>
<address>
Ditulis oleh <a href="mailto:modulmakalah@gmail.com">Modul Makalah</a>.<br>
Kunjungi Kami di:<br>
modulmakalah.blogspot.com<br>
Box 564, Padang<br>
INA
</address>
</body>
</html>
Hasil 2:
Ditulis oleh Modul Makalah.
Kunjungi Kami di:
modulmakalah.blogspot.com
Box 564, Padang
INA
Membuat Kutipan di HTML
Untuk memformat kalimat sebagai kutpan pada dokumen HTML digunakan tag <blockquote>... </blockquote>.
Dengan tag <blockquote> akan membuat text sebagai kutipan akan diblok sendiri pada paragraf lain.
Contoh 3:
<html>
<body>
<h1>Tentang Modul Makalah</h1>
<p>Ini adalah sebuah quote dari situs Modul Makalah:</p>
<blockquote >
Modul Makalah adalah sebuah wadah ilmu pengetahuan yang didedikasikan untuk mengembangkan khasanah ilmu pendidikan saat ini. Di situs ini kami menyajikan sejumlah artikel pendidikan dan teori-teori pendidikan modern beserta penerapannya dalam kehidupan sehari-hari.
</blockquote>
</body>
</html>
Tampilan 3:
Membuat Komentar di HTML
Pada setiap bahasa pemrograman pasti disediakan suatu text yang dijadikan semacam komentar disetiap baris program. Pada html cara penulisan komentar adalah dengan menuliskan komentar yang diapait oleh karakter <!-- komentar --> . Tag tersebut berguna untuk menandai fungsi-fungsi dari sebuah program sehingga memudahkan programer mengetahui letak script beserta penjelasanya.
Ketika dokumen html di eksekusi melalui browser kalimat komentar yang diapit tag tersebut tidak akan ditampilkan.
Membuat Singkatan atau Akronim di HTML
Seringkali kita menuliskan kata dalam dokumen dengan singkatan /akronim, contohnya dalam penullisan Komisi Pemberantasan Korupsi disingkat menjadi KPK.
Pada dokumen HTML singkatan dapat diberikan penjelasan kepanjaganya secara tersembunyi yang akan ditampilkan bila kursor mouse berada di atas tulisan singkatan tersebut.
Tag yang digunakan untuk keterangan singkatan tersebut adalah <abbr> dan <acronym> dimana atribut title memiliki value keterangan dari singkatan tersebut.
Contoh 4:
<html>
<body>
<p><abbr title="Komisi Pemberantasan Korupsi">KPK</abbr> dibentuk pada tahun 2002.</p>
</body>
</html>
Hasil 4:
KPK dibentuk pada tahun 2002.
Contoh 5:
<html>
<body>
<p><acronym title="Komisi Pemberantasan Korupsi">KPK</acronym> dibentuk pada tahun 2002.</p>
</body>
</html>
Hasil 5:
KPK dibentuk pada tahun 2002.
Paragraf
Tag yang digunakan dalam membuat paragraf pada dokumen HTML adalah <p>........</p>
Salah satu atribut dalam tag <p> adalah align yang memiliki value sebagai berikut:
Karakter Spesial
Adalah kode-kode tertentu yang telah didefinisikan dan apabila ditampilkan di browser akan menampilkan karakter-karakter simbol. Kode-kode pada karakter special bersifat case sensitive, dimana memiliki hasil perlakuan yang berbeda antara huruf besar dan kecil.
Pada karakter spesial beberapa memiliki kode dalam nama dan angka atau hanya angka saja. Berikut ini contoh dari karakter spesial:
Daftar / List
List merupakan bentuk umum yang kita gunakan untuk menguraikan daftar sesuatu.
Untuk membuat list pada dokumen HTML dapat digunakan beberapa list berikut ini:
Membuat List atau Daftar Tanpa Nomor (UnOrderedList)
Berikut ini langkah-langkah dalam membuat List/daftar tanpa nomor:
Membuat List atau Daftar bernomor (OrderedList)
Berikut ini langkah-langkah dalam membuat List/daftar dengan nomor:
Contoh 6:
<html>
<body>
<p>Daftar Tanpa Nomor:</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>
<html>
<body>
<p>Daftar Bernomor:</p>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil 6:
Daftar Bernomor:
Daftar Bernomor:
Membuat List / Daftar Definisi
Berikut ini langkah-langkah dalam membuat List/daftar definisi:
Untuk membuat daftar definisi digunakan tag awal <dl>
Sedangkan kata yang akan didefinisikan diapit oleh tag berpasangan <dt>....</dt>
Untuk kalimat yang mendefinisikannya diapit oleh tag <dd>...</dd>
Bila kalimat dan definisainya telah dibuat jangan lupa untu menutupnya dengan tag <dl>
Contoh 7:
<html>
<body>
<dl>
<dt>Kopi</dt>
<dd>Minuman Panas Hitam</dd>
<dt>Susu</dt>
<dd>Minuman Dingin Putih</dd>
</dl>
</body>
</html>
Hasil 7:
Sekian artikel tentang Membuat Paragraf, Daftar, dan Memformat Karakter di HTML. Semoga bermanfaat.
</body>
</html>
Hasil 1:
Teks di elemen awal Ditampilkan dalam lebar tetap Font, dan itu diawetkan Baik spasi maupun Jeda baris
Membuat Address di HTML
Pada kebanyakan website pasti menginformasikan alamat dari pemilik website untuk memudahkan pengunjung website berinteraksi. Untuk kebutuhan tersebut pada dokumen html disediakan juga tag <address>...</address> agar penulisan alamat dapat distandarkan. Penggunaan tag ini akan memberikan penekanan text yang menginformasikan kepada mesin perambah bahwa text yang diapait oleh tag address merupakan text yang berisi informasi mengenai alamat. Agar terlihat rapi maka disetiap baris dari alamat dipisahkan oleh tag <br>.
Contoh 2:
<html>
<body>
<address>
Ditulis oleh <a href="mailto:modulmakalah@gmail.com">Modul Makalah</a>.<br>
Kunjungi Kami di:<br>
modulmakalah.blogspot.com<br>
Box 564, Padang<br>
INA
</address>
</body>
</html>
Hasil 2:
Ditulis oleh Modul Makalah.
Kunjungi Kami di:
modulmakalah.blogspot.com
Box 564, Padang
INA
Membuat Kutipan di HTML
Untuk memformat kalimat sebagai kutpan pada dokumen HTML digunakan tag <blockquote>... </blockquote>.
Dengan tag <blockquote> akan membuat text sebagai kutipan akan diblok sendiri pada paragraf lain.
Contoh 3:
<html>
<body>
<h1>Tentang Modul Makalah</h1>
<p>Ini adalah sebuah quote dari situs Modul Makalah:</p>
<blockquote >
Modul Makalah adalah sebuah wadah ilmu pengetahuan yang didedikasikan untuk mengembangkan khasanah ilmu pendidikan saat ini. Di situs ini kami menyajikan sejumlah artikel pendidikan dan teori-teori pendidikan modern beserta penerapannya dalam kehidupan sehari-hari.
</blockquote>
</body>
</html>
Tampilan 3:
Tentang Modul Makalah
Ini adalah sebuah quote dari situs Modul Makalah:Modul Makalah adalah sebuah wadah ilmu pengetahuan yang didedikasikan untuk mengembangkan khasanah ilmu pendidikan saat ini. Di situs ini kami menyajikan sejumlah artikel pendidikan dan teori-teori pendidikan modern beserta penerapannya dalam kehidupan sehari-hari.
Membuat Komentar di HTML
Pada setiap bahasa pemrograman pasti disediakan suatu text yang dijadikan semacam komentar disetiap baris program. Pada html cara penulisan komentar adalah dengan menuliskan komentar yang diapait oleh karakter <!-- komentar --> . Tag tersebut berguna untuk menandai fungsi-fungsi dari sebuah program sehingga memudahkan programer mengetahui letak script beserta penjelasanya.
Ketika dokumen html di eksekusi melalui browser kalimat komentar yang diapit tag tersebut tidak akan ditampilkan.
Membuat Singkatan atau Akronim di HTML
Seringkali kita menuliskan kata dalam dokumen dengan singkatan /akronim, contohnya dalam penullisan Komisi Pemberantasan Korupsi disingkat menjadi KPK.
Pada dokumen HTML singkatan dapat diberikan penjelasan kepanjaganya secara tersembunyi yang akan ditampilkan bila kursor mouse berada di atas tulisan singkatan tersebut.
Tag yang digunakan untuk keterangan singkatan tersebut adalah <abbr> dan <acronym> dimana atribut title memiliki value keterangan dari singkatan tersebut.
Contoh 4:
<html>
<body>
<p><abbr title="Komisi Pemberantasan Korupsi">KPK</abbr> dibentuk pada tahun 2002.</p>
</body>
</html>
Hasil 4:
KPK dibentuk pada tahun 2002.
Contoh 5:
<html>
<body>
<p><acronym title="Komisi Pemberantasan Korupsi">KPK</acronym> dibentuk pada tahun 2002.</p>
</body>
</html>
Hasil 5:
KPK dibentuk pada tahun 2002.
Paragraf
Tag yang digunakan dalam membuat paragraf pada dokumen HTML adalah <p>........</p>
Salah satu atribut dalam tag <p> adalah align yang memiliki value sebagai berikut:
- Left
- Right
- Center
- Justify
Karakter Spesial
Adalah kode-kode tertentu yang telah didefinisikan dan apabila ditampilkan di browser akan menampilkan karakter-karakter simbol. Kode-kode pada karakter special bersifat case sensitive, dimana memiliki hasil perlakuan yang berbeda antara huruf besar dan kecil.
Pada karakter spesial beberapa memiliki kode dalam nama dan angka atau hanya angka saja. Berikut ini contoh dari karakter spesial:
- “ = " = " = tanda kutip
- ‘ = ' = ' = tanda apostrof
- < = < = < = kurang dari
- > = > = > = lebih dari
- ∑ = ∑ = ∑ = sum
- √ = √ = √ = square root
- ∫ = ∫ = ∫ = integral
- ≠ = ≠ = ≠ = not equal
- ≤ = ≤ = ≤ = less or equal
- ≥ = ≥ = ≥ = greater or equal
Daftar / List
List merupakan bentuk umum yang kita gunakan untuk menguraikan daftar sesuatu.
Untuk membuat list pada dokumen HTML dapat digunakan beberapa list berikut ini:
- List tanpa nomor
- List dengan nomor
- List definisi
Membuat List atau Daftar Tanpa Nomor (UnOrderedList)
Berikut ini langkah-langkah dalam membuat List/daftar tanpa nomor:
- Membuat list tanpa nomor diawali dengan tag pembuka <ul>
- Dan untuk item-itemnya digunakan tag <li>....</li>
- Setelah item-itemnya dibuat, akhiri dengan tag penutup </ul>
- Tag <ul> memiliki atribut type dengan value disk dan box
- Untuk membuat nested list masukan tag <ul> ...</ul> diantara tag <ul>....</ul> utama
Membuat List atau Daftar bernomor (OrderedList)
Berikut ini langkah-langkah dalam membuat List/daftar dengan nomor:
- Membuat list tanpa nomor diawali dengan tag pembuka <ol>
- Dan untuk item-itemnya digunakan tag <li>....</li>
- Setelah item-itemnya dibuat, akhiri dengan tag penutup </ol>
- Tag <ol> memiliki atribut type dengan value I, i, a, A
- Selain atribut type ada juga aribut start untk mendefinisikan nilai awal.
- Untuk membuat nested list masukan tag <ol> ...</ol> diantara tag <ol>....</ol> utama
Contoh 6:
<html>
<body>
<p>Daftar Tanpa Nomor:</p>
<ul>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ul>
</body>
</html>
<html>
<body>
<p>Daftar Bernomor:</p>
<ol>
<li>Kopi</li>
<li>Teh</li>
<li>Susu</li>
</ol>
</body>
</html>
Hasil 6:
Daftar Bernomor:
- Kopi
- Teh
- Susu
Daftar Bernomor:
- Kopi
- Teh
- Susu
Membuat List / Daftar Definisi
Berikut ini langkah-langkah dalam membuat List/daftar definisi:
Untuk membuat daftar definisi digunakan tag awal <dl>
Sedangkan kata yang akan didefinisikan diapit oleh tag berpasangan <dt>....</dt>
Untuk kalimat yang mendefinisikannya diapit oleh tag <dd>...</dd>
Bila kalimat dan definisainya telah dibuat jangan lupa untu menutupnya dengan tag <dl>
Contoh 7:
<html>
<body>
<dl>
<dt>Kopi</dt>
<dd>Minuman Panas Hitam</dd>
<dt>Susu</dt>
<dd>Minuman Dingin Putih</dd>
</dl>
</body>
</html>
Hasil 7:
- Kopi
- Minuman Panas Hitam
- Susu
- Minuman Dingin Putih
Sekian artikel tentang Membuat Paragraf, Daftar, dan Memformat Karakter di HTML. Semoga bermanfaat.
