Format Text

Belajar HTML5

Pendahuluan

Kalian mau format text didalam html tapi masih ga ngerti sama tag-nya? Oke oke tenang, kali ini aku bakal buat tutorialnya.
Ayo Langsung ke tutorialnya!

Isi halaman web
Format Text
Membuat List
Membuat Hyperlink

Basic Format

Kalian Mau format text kayak gimana?, mau memformat bold, italic, underline, dan masih banyak lagi!

Format Text

Pertama yang harus kalian lakuin itu adalah mengingat tag di dibawah ini ya!

Tag	Fungsi
`<b>`	Untuk memberikan efek bold atau menebalkan teks.
`<i>`	Untuk memberikan efek italic atau memiringkan teks.
`<del>`	Untuk untuk menunjukkan konten yang telah dihapus / ~~(delete)~~ dari dokumen.
`<u>`	Untuk untuk memberikan efek underline atau garis miring.
`<mark>`	Untuk untuk memberikan efek highlight atau tanda pada teks.
`<strong>`	Untuk untuk memberikan efek bold yang menyatakan hal penting.
`<em>`	Untuk menandai teks yang memiliki stress emphasis atau Italic seperti tadi
`<ins>`	untuk menandai suatu Text disisipkan pada suatu kalimat
`<small>`	untuk membuat teks kalian menjadi small atau kecil
`<sup>`	Untuk membuat teks menjadi kecil dan berada ^diatas
`<sub>`	Untuk membuat teks menjadi kecil dan berada _dibawah

<!DOCTYPE html>
<html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
          <meta name="viewport" 
          content="width=device-width, 
          initial-scale=1" />
          <title>Document</title>
        </head>
        <body>
          <p>
            <br>Ini adalah <b>teks Bold</b>
            <br>Ini adalah <i>teks Italic</i>
            <br>Ini adalah <u>teks underline</u>
            <br>Ini adalah <mark>teks mark</mark>
            <br>Ini adalah <strong>teks strong</strong>
            <br>Ini adalah <em>teks em</em>
            <br>Ini adalah <ins>teks ins</ins>
            <br>Ini adalah <small>teks small</small>
            <br>Ini adalah <sup>teks sup</sup>
            <br>Ini adalah <sub>teks sub</sub>
          </p>
        </body>
</html>

Hasil :

Ini adalah teks Bold
Ini adalah teks Italic
Ini adalah teks underline
Ini adalah teks mark
Ini adalah teks strong
Ini adalah teks em
Ini adalah teks ins
Ini adalah teks small
Ini adalah ^{teks sup}
Ini adalah _{teks sub}

Membuat List

Membuat List Pada HTML bisa menggunakan tag <ul> atau unordered list yang fungsinya mengurutkan daftar dengan menggunakan simbol tertentu pada HTML. Sedangkan <ol> fungsinya adalah mengurutkan dengan menggunakan huruf, angka, angka romawi, dan lainnya.

Jangan lupa untuk menambahkan <li> atau list item untuk menambahkan list pada tag <ul> maupun <ol>

Contoh cara kerja ol dan ul ada pada command dibawah ini:

<!DOCTYPE html>
    <html lang="en">
        <head>
          <meta charset="UTF-8">
          <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
          <meta name="viewport" 
          content="width=device-width, 
          initial-scale=1">
          <title>Document</title>
        </head>
        <body>
          <ul>
            <li>ini adalah list item dari ul </li>
            <li>ini adalah list item dari ul </li>
          </ul>
          <ol>
            <li>ini adalah list item dari ol </li>
            <li>ini adalah list item dari ol </li>
          </ol>
        </body>
    </html>

Hasil yang didapat adalah :

ini adalah list item dari ul
ini adalah list item dari ul

ini adalah list item dari ol
ini adalah list item dari ol

Membuat Anchor (Hyperlink)

Hyperlink? Apa itu hyperlink?
Pernahkah kalian menekan sebuah tulisan dan tulisan itu mengarah ke browser?, ya! itu adalah hyperlink!
Hyperlink adalah suatu cara untuk menghubungkan suatu bagian tertentu di dalam slide, file dokumen, program, atau halaman website.
Contohnya?
Coba tekan tombol dibawah ini:
Kesini
Contohnya ada dibawah ini :

<a href="https://flixdz.github.io/flixpseal">Website</a>

Website

Link diatas mengarahkan kamu ke website ini halaman beranda tetapi memakai url bukan document seperti :

<a href="index.html">Website</a>

Website

Sekilas si sama saja ya? tetapi ini berbeda, satu memakai url (https) dan satu lagi menggunakan .html
oh iya!, tulisannya juga bisa kalian sesuaikan dengan keinginan kalian, tapi memakai css ya!
nih aku kasih contohnya!

Pertama kalian buat dulu CSS nya

/* contohnya yaa */
a {
  text-decoration: none;
  color: green;
  background: white;
  padding: 3px;
  border-radius: 8px;
  /* Ketika kalian mengarahkan mouse diatasnya, warna background dan font akan berubah */
  transition: color 2s, background 2s, border-radius 3s;
}
a:hover {
  color: white;
  background: green;
  border-radius: 15px;
}

Lalu kalian buat hyperlink-nya

<a href="index.html">Website</a>

hasilnya?

Website

Sekarang coba kalian arahkan mouse atau jika kalian di hp tahan teks tersebut tapi jangan di tekan, dan kalian bisa melihat perbedaanya, jadi lebih keren bukan?😎

Oiya ada satu lagi hyperlink lagi nihh, yaitu adalah Linking same page, yang berfungsi mengarahkan kalian ke halaman itu sendiri sesuai dengan perintah ingin mengarahkan ke atas / bawah halaman dengan memanfaatkan fungsi id dan tanda # jika kita gabung akan menjadi seperti ini
<a href="#contoh">
Contohnya seperti ini ya :

<a href="#buatlist">Website</a>

Kembali

Tag diatas akan membawa kalian kembali ke atas yaitu bagian "Membuat List"