Dasar HTML dan Pemformatan Teks
Saturday, 13 October 2018
2 Comments
1. Struktur dokumen HTML5
Struktur dasar HTML5 dapat dijabarkan sebagai berikut :
Setiap dokumen HTML terdiri atas
<html></html>, <head></head> ,
<title></title>
dan <body></body>. Antara <html> sampai
<head> disebut sebagai bagian pertama. Antara <body> sampai
dengan </html> disebut bagian kedua / isi. Ada beberapa elemen yang
dapat digunakan untuk menampilkan informasi berupa teks dalam HTML yaitu :
Paragraf, Blockquote dan divider.
2. Paragraf dan line break
Elemen paragraf menggunakan tag <p>.....</p> untuk menandai sekumpulan teks suatu paragraf. Tag <p> menyatakan awal paragraf sedangkan tag </p> menyatakan akhir dari satu paragraf. Sedangkan untuk membuat line break tag yang digunakan adalah tag <br/>. Contoh penggunaannya sbb :
3. Block Quotation
Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya. Ditulis menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting. Contoh pendeklarasian nya sebagai berikut :
4. Divider
Elemen divider digunakan untuk membagi-bagi dokumen HTML dalam suatu hierarki yang terstruktur. Teks yang ditempatkan dalam tag <div></div> akan ditampilkan sesuai dengan nilai atribut ALIGN tersebut . Nilai atribut ALIGN yaitu left, right dan center.
5. Page Title dan Meta tag
Di antara perintah <title> dengan </title> terdapat bagian judul. Meta adalah elemen atau tag HTML / XHTML yang berfungsi sebagai penyampai informasi metadata dari sebuah halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain. Secara umum, terdapat beberapa macam meta tag dengan fungsi yang berbeda.
6. Heading
Tag <h1> sampai dengan <h6> digunakan untuk mendefinisikan heading HTML. Value <h1> sampai dengan <h6> pada sebagian besar browser memiliki rincian sbb :
7. Bold dan Italic
Untuk memberikan efek cetak tebal (Bold) pada teks dapat digunakan tag <b>....</b>. Contoh penggunaannya :
Sedangkan Cetak Miring (Italic) menggunakan tag <i>....</i>.
8. Superscript dan subscript
Untuk penulisan superscript kode ditulis di antara tag <sup>....</sup>
Sedangkan Subscript menggunakan tag <sub>...</sub>
9. Monospace dan teks preformat
Pada penulisan menggunakan mode HTML, sekalipun diberikan spasi yang panjang, maka hasilnya akan tetap seperti biasa. Dengan menggunakan tag pre maka hasilnya akan sama dengan yang tertulis, baik dalam white space, line break atau tab.
Dengan menggunakan tag pre, spasi akan dipertahankan, berbeda dengan penggunaan tag <p>. Tanpa CSS pun tag pre akan menampilkan huruf monospace, dimana huruf 'W' akan sama dengan huruf 's' atau huruf lainnya dalam segi ukuran.
Struktur dasar HTML5 dapat dijabarkan sebagai berikut :
| <!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"/> <link href="css/some-stylesheet.css" rel="stylesheet"/> <script src="scripts/some-script.js"> </script> </head> <body> <p>Your webpage content goes here.</p> </body> </html> |
Baca Juga : cara membuat garis vertikal di html
2. Paragraf dan line break
Elemen paragraf menggunakan tag <p>.....</p> untuk menandai sekumpulan teks suatu paragraf. Tag <p> menyatakan awal paragraf sedangkan tag </p> menyatakan akhir dari satu paragraf. Sedangkan untuk membuat line break tag yang digunakan adalah tag <br/>. Contoh penggunaannya sbb :
| <p> Will Mateson<br/>
Box 61<br/> Cleveland, Ohio<br/> </p> |
3. Block Quotation
Blockquote adalah kutipan penting dan menonjol dari tulisan lainnya. Ditulis menjorok ke dalam dari batas tepi kiri dan tepi kanan area posting. Contoh pendeklarasian nya sebagai berikut :
| <blockquote>
<p>Here is a long quotation here is a long quotation.</p> </blockquote> |
4. Divider
Elemen divider digunakan untuk membagi-bagi dokumen HTML dalam suatu hierarki yang terstruktur. Teks yang ditempatkan dalam tag <div></div> akan ditampilkan sesuai dengan nilai atribut ALIGN tersebut . Nilai atribut ALIGN yaitu left, right dan center.
5. Page Title dan Meta tag
Di antara perintah <title> dengan </title> terdapat bagian judul. Meta adalah elemen atau tag HTML / XHTML yang berfungsi sebagai penyampai informasi metadata dari sebuah halaman web. Elemen meta ini harus diletakkan pada bagian “head” dalam HTML tersebut. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web dan untuk menjelaskan mengenai kata kunci (keyword) yang terkait serta untuk metadata lain. Secara umum, terdapat beberapa macam meta tag dengan fungsi yang berbeda.
6. Heading
Tag <h1> sampai dengan <h6> digunakan untuk mendefinisikan heading HTML. Value <h1> sampai dengan <h6> pada sebagian besar browser memiliki rincian sbb :
| h1 {
display: block; font-size: 2em; margin-top: 0.67em; margin-bottom: 0.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h2 { display: block; font-size: 1.5em; margin-top: 0.83em; margin-bottom: 0.83em; margin-left: 0; margin-right: 0; font-weight: bold; } h3 { display: block; font-size: 1.17em; margin-top: 1em; margin-bottom: 1em; margin-left: 0; margin-right: 0; font-weight: bold; } h4 { display: block; margin-top: 1.33em; margin-bottom: 1.33em; margin-left: 0; margin-right: 0; font-weight: bold; } h5 { display: block; font-size: .83em; margin-top: 1.67em; margin-bottom: 1.67em; margin-left: 0; margin-right: 0; font-weight: bold; } h6 { display: block; font-size: .67em; margin-top: 2.33em; margin-bottom: 2.33em; margin-left: 0; margin-right: 0; font-weight: bold; } |
7. Bold dan Italic
Untuk memberikan efek cetak tebal (Bold) pada teks dapat digunakan tag <b>....</b>. Contoh penggunaannya :
| <p><b>Cardio:</b> Latin word meaning of the heart.</p> |
| Italic <i>tag</i>! |
8. Superscript dan subscript
Untuk penulisan superscript kode ditulis di antara tag <sup>....</sup>
| <p>This text is <sup>superscripted!</sup></p> |
| <p>H<sub>2</sub>0 – Water
<p>O<sub>2</sub> - Oxygen <p>CO<sub>2</sub> - Carbon Dioxide |
9. Monospace dan teks preformat
Pada penulisan menggunakan mode HTML, sekalipun diberikan spasi yang panjang, maka hasilnya akan tetap seperti biasa. Dengan menggunakan tag pre maka hasilnya akan sama dengan yang tertulis, baik dalam white space, line break atau tab.
Dengan menggunakan tag pre, spasi akan dipertahankan, berbeda dengan penggunaan tag <p>. Tanpa CSS pun tag pre akan menampilkan huruf monospace, dimana huruf 'W' akan sama dengan huruf 's' atau huruf lainnya dalam segi ukuran.
Sumber : kodekreasi.com
Bermanfaat sekali, lanjutin kak
ReplyDeletesiap
Delete