Element Teks HTML

Setelah kita mengerti bagaimana dasar-dasar HTML bekerja, sekarang kita akan fokus pada elemen-elemen penting dalam HTML. Elemen-elemen ini adalah bagian-bagian yang sering digunakan untuk membuat halaman web, meskipun sebetulnya ada banyak elemen HTML lainnya yang bisa kita gunakan. Dalam materi ini, kita akan fokus pada elemen-elemen yang paling umum digunakan dalam pembuatan halaman web.

Pertama-tama, kita akan belajar tentang elemen-elemen yang digunakan untuk menampilkan teks. Elemen-elemen ini adalah elemen-elemen yang sering kita gunakan untuk menampilkan teks di halaman web.

A. Heading

Heading digunakan untuk membuat judul pada halaman web. Heading terdiri dari 6 level, dimulai dari level 1 hingga level 6. Level 1 adalah heading terbesar dan level 6 adalah heading terkecil. Semakin kecil nomor levelnya, semakin kecil ukuran headingnya.

Contoh :

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Output :

B. Paragraf

Paragraf digunakan untuk menampilkan teks dalam bentuk paragraf. Paragraf akan menampilkan teks secara berurutan, dimulai dari kiri ke kanan, dan dari atas ke bawah.

Contoh :

<p>
    0CTS adalah sebuah platform pembelajaran yang menyediakan berbagai macam materi pembelajaran, seperti pemrograman, desain, dan lain-lain. Biaya pembelajaran di 0CTS semuanya gratis. Walau gratis, 0CTS tetap memberikan materi pembelajaran yang berkualitas.
</p>

<p align="right">
    0CTS memiliki misi untuk memajukan pendidikan di Indonesia. 0CTS ingin membantu para pembelajar di Indonesia untuk mendapatkan akses pendidikan yang berkualitas. 0CTS juga ingin membantu para pembelajar di Indonesia untuk mendapatkan pekerjaan yang lebih baik.
</p>

Output :

Atribut yang digunakan pada paragraf yaitu :

Atribut	Deskripsi	Contoh
align	Digunakan untuk mengatur posisi teks dalam paragraf. Atribut ini memiliki 4 nilai, yaitu left, right, center, dan justify. Nilai default dari atribut ini adalah left.	<p align="right">
lang	Digunakan untuk menentukan bahasa dari teks dalam paragraf. Atribut ini memiliki nilai berupa kode bahasa.	<p lang="en">
dir	Digunakan untuk menentukan arah teks dalam paragraf. Atribut ini memiliki 2 nilai, yaitu ltr dan rtl. Nilai default dari atribut ini adalah ltr.	<p dir="rtl">

🚫 Namun, atribut align sudah tidak direkomendasikan lagi untuk digunakan. Atribut align sudah dianggap usang dan sudah tidak direkomendasikan lagi untuk digunakan. Sebagai gantinya, kita bisa menggunakan CSS untuk mengatur posisi teks dalam paragraf.

C. Teks Formatting

Teks formatting digunakan untuk mengatur tampilan teks. Teks formatting terdiri dari beberapa elemen, yaitu :

Elemen	Deskripsi
<strong>	Membuat teks menjadi tebal
<i>	Membuat teks menjadi miring
<em>	Membuat teks menjadi miring
<u>	Membuat teks menjadi bergaris bawah
<s>	Membuat teks menjadi tercoret
<sub>	Membuat teks menjadi subscript
<sup>	Membuat teks menjadi superscript
<mark>	Membuat teks menjadi highlighted
<small>	Membuat teks menjadi lebih kecil
<del>	Membuat teks menjadi tercoret
<ins>	Membuat teks menjadi bergaris bawah

Contoh :

<p>
    <strong>Ini adalah teks tebal</strong> <br>
    <i>Ini adalah teks miring</i> <br>
    <em>Ini adalah teks miring</em> <br>
    <u>Ini adalah teks bergaris bawah</u> <br>
    <s>Ini adalah teks tercoret</s> <br>
    <sub>Ini adalah teks subscript</sub> <br>
    <sup>Ini adalah teks superscript</sup> <br>
    <mark>Ini adalah teks highlighted</mark> <br>
    <small>Ini adalah teks kecil</small> <br>
    <del>Ini adalah teks tercoret</del> <br>
    <ins>Ini adalah teks bergaris bawah</ins>
</p>

Output :

D. Hyperlink

Hyperlink digunakan untuk membuat tautan ke halaman web lain. Hyperlink memiliki 2 atribut yang wajib digunakan, yaitu href dan target.

Contoh :

<p>
    Kunjungi website 0CTS di <a href="https://www.zerocosttechschool.com/" target="_blank">sini</a>.
</p>

Output :

Atribut yang digunakan pada hyperlink yaitu :

Atribut	Deskripsi	Contoh
href	Digunakan untuk menentukan URL dari halaman web yang akan dituju. Atribut ini memiliki nilai berupa URL dari halaman web yang akan dituju.	<a href="URL">
target	Digunakan untuk menentukan bagaimana halaman web yang akan dituju akan ditampilkan. Atribut ini memiliki 4 nilai, yaitu _blank, _self, _parent, dan _top. Nilai default dari atribut ini adalah _self.	<a target="_blank">

E. Blockquote

Blockquote digunakan untuk menampilkan kutipan teks. Blockquote akan menampilkan teks dengan indentasi di sebelah kiri dan kanan. Blockquote biasanya digunakan untuk menampilkan kutipan teks dari sumber lain.

Contoh :

<h1>Apa itu 0CTS?</h1>

<p>Ini adalah sebuah quote dari website:</p>

<blockquote cite="https://www.zerocosttechschool.com/">
	<blockquote>
    	"0CTS adalah sebuah platform pembelajaran yang menyediakan berbagai macam materi pembelajaran, seperti pemrograman, desain, dan lain-lain. Biaya pembelajaran di 0CTS semuanya gratis. Walau gratis, 0CTS tetap memberikan materi pembelajaran yang berkualitas."
	</blockquote>
</blockquote>

Output :

Atribut yang digunakan pada blockquote yaitu :

Atribut	Deskripsi	Contoh
cite	Digunakan untuk menentukan URL dari sumber kutipan teks. Atribut ini memiliki nilai berupa URL dari sumber kutipan teks.	<blockquote cite="URL">

F. List

List digunakan untuk menampilkan teks dalam bentuk list. List terdiri dari 2 jenis, yaitu ordered list dan unordered list. Ordered list digunakan untuk menampilkan teks dalam bentuk list yang berurutan, sedangkan unordered list

1. Ordered List

Ordered list digunakan untuk menampilkan teks dalam bentuk list yang diurutkan. Untuk membuat ordered list, kita menggunakan elemen <ol> (ordered list) dan <li> (list item). Elemen <ol> menandai awal dan akhir dari list yang diurutkan, sedangkan elemen <li> digunakan untuk menampilkan teks secara individual dalam list tersebut.

Contoh :

<ol>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ol>

Output :

1. HTML
2. CSS
3. JavaScript

2. Unordered List

Unordered list digunakan untuk menampilkan teks dalam bentuk list yang tidak diurutkan. Untuk membuat unordered list, kita menggunakan elemen <ul> (unordered list) dan <li> (list item). Elemen <ul> digunakan untuk menandai awal dan akhir dari list yang tidak diurutkan, sedangkan elemen <li> digunakan untuk menampilkan teks secara individual dalam list tersebut.

Contoh :

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

Output :

• HTML
• CSS
• JavaScript

Atribut yang digunakan pada list yaitu :

Atribut	Deskripsi	Contoh
type	Digunakan untuk menentukan jenis list yang akan ditampilkan. Atribut ini memiliki 3 nilai, yaitu 1, A, dan a. Nilai default dari atribut ini adalah 1.	<ol type="A">
start	Digunakan untuk menentukan angka awal dari list yang akan ditampilkan. Atribut ini memiliki nilai berupa angka.	<ol start="3">
reversed	Digunakan untuk menampilkan list yang berurutan secara terbalik. Atribut ini memiliki nilai reversed.	<ol reversed>
compact	Digunakan untuk mengurangi jarak antar list. Atribut ini memiliki nilai compact.	<ol compact>

G. Komentar

Komentar digunakan untuk menambahkan komentar pada kode HTML. Komentar tidak akan ditampilkan pada halaman web, namun hanya akan ditampilkan pada kode HTML. Komentar biasanya digunakan untuk memberikan penjelasan pada kode HTML.

Contoh :

<!-- Ini adalah komentar -->
<p>
    Ini adalah paragraf
</p>