Belajar HTML Kode Dasar Untuk Pemula Tahap 3

  • 4 min read
  • Sep 02, 2020
3
Hosting Unlimited Indonesia

Tahap 3 pembelajaran koding HTML ini bertemakan text formatting. Mengatur bagaimana format sebuah teks tampil. Entah itu dengan gaya miring, tebal, dicoret, diberi garis bawah, dan lain-lain. Pelajaran ini sangatlah penting, karena elemen utama dalam sebuah web adalah teks. Teks adalah salah satu dari 5 elemen multimedia yang bersifat wajib.

Sangat sulit menemukan, alat multimedia, tanpa sebuah teks sama sekali. Nantinya admin akan menjelasakan apa sih itu multimedia pada artikel yang akan datang. teks dalam sebuah html, dapat ditulis dengan atau tanpa tag. Namun, untuk memudahkan, penulisan teks selalu disertakan di dalam sebuah tag. Contoh tag p, yang berarti paragraph.

Ada banyak tag yang digunakan untuk menformat sebuah teks. Panduan yang admin gunakan, menjelaskan bahwa ada 17 tag yang digunakan untuk menformat sebuah teks. Kita akan mempelajari 8 diantaranya. 8 ini adalah tag yang admin rasa, paling banyak digunakan.

Selebihnya kamu dapat menklik panduan admin di bagian sumber artikel ini.

Tag P

Seperti yang sudah kita katakan sebelumnya, tag ini mengatur teks agar tampil sebagai sebuah paragraf. Tag ini bersifat couple, yang artinya memiliki penutup. Berikut adalah contoh penulisannya;

Tag P, dapat diatur agar dapat tampil dengan left style, center style, right style, dan justify style. Untuk dapat mengaturnya, maka diperlukan bantuan berupa atribut. Atribut yang digunakan adalah align (rata tepi). Align ini dapat diisi dengan 4 value yang telah disebut, left style dan kawan-kawan.

Perlu diketahui, bahwa nilai default align teks adalah left.  Jadi, mubazir bila menggunakan atribut ini dengan mengisi value-nya dengan left.

Cobalah contoh kode di bawah ini. Pastikan kamu membuat bagian html, head, title, body juga ya. Tempatkan tag P di antara tag <body> dan </body>.

Kode di atas akan menampilkan paragraf dengan gaya teks berada di tengah.

Selain langsung menformat rata tepi dengan atribut align, kamu juga dapat menggunakan mengatur rata tepi dengan properti CSS. CSS property tersebut adalah text-align. Properti tersebut dituliskan dengan terlebih dahulu menyertakan atribut style dan tanda =. Contoh;

Hasilnya akan sama seperti tag p dengan atribut bernilai center sebelumnya.

Gaya penulisan style=”text-align”, termasuk ke dalam gaya penulisan CSS mode inline. Kamu dapat gunakan penulisan CSS untuk format teks dengan mode internal style.

Ingatlah untuk selalu membuat tag dasar, yakni html, head, title, dan body.

Tag a (bukan A)

Tag a (bukan A), adalah tag yang digunakan untuk membuat jangkar atau pengait. Artinya tag ini dapat membuat teks memanggil/mengait file lainnya. Atribut penting dalam tag ini adalah href, (hypertext references). Nilai dari atribut ini adalah alamat dari halaman/file yang dituju.

Ada 2 jenis alamat sebagai nilai dari atribut ini yang perlu kamu ketahui. 2 jenis alamat tersebut adalah alamat absolut dan relatif.

Apa itu Alamat Absolut ?

Alamat absolut adalah alamat yang menyertakan secara lengkap URL (Uniform Resource Locator). Terdiri dari protocol, domain, dan juga nama file. Contohnya ; http://www.lautanit.com/login-page.html

Apa itu Alamat Relatif

Alamat relatif adalah alamat yang mengacu pada struktur folder agar sampai pada file tujuan. Agar kita dapat memahaminya, kita akan gunakan contoh struktur folder di bawah ini.

Tahap 3 HTML
Arsip lautanit

Untuk dapat membuat link menuju login_page.html, dari file index.html, maka tag anchor ditulis seperti di bawah ini;

<a href=”kode 1/login_page.html”>Laman Login</a>.

Jika kita ingin membuat link dari laman side_menu.html menuju footer.html, maka tag a ditulis seperti di bawah ini;

<a href=”../kode 2/footer.html”>Footer</a>.

Tanda .. menunjukkan bahwa link naik satu folder, dan kode di atas menunjukkan bahwa setelah link naik satu folder, ia beralih masuk ke folder kode 2 lalu ke file yang dituju.

Tag a, tidak hanya mendekatkan kita dengan yang jauh, namun juga yang terdekat sekalipun. Filosofis banget ya. Ya, tag a, dapat digunakan untuk membuat link dalam satu halaman. Link model ini biasa digunakan untuk daftar isi artikel web, agar penunjung bisa langsung menuju bagian tertentu, tanpa harus scroll.

Banyak digunakan juga untuk landing page. 

Contoh kode

Tag a, akan memberikan warna biru sebagai warna default bersamaan dengan garis bawah. Pada kode sebelumnya, admin telah membuat underline pada link menjadi tidak ada. Kode yang digunakan adalah atribut text-decoration, dengan value : none. Untuk merubah warna, ubah nilai atribut color, menjadi warna selain biru.

Heading

Tag heading, digunakan untuk membuat judul pada laman HTML. Heading ada 6 jenis, yakni heading 1, heading 2, heading 3, heading 4, heading 5, heading 6. Semakin besar nilai heading, semakin kecil heading tersebut.

Contoh kode

Emphasis, Italic, Strong, Bold, Underline, Strikethrough.

Masing-masing dari tag emphasis italic, dan strong bold, memiliki fungsi yang sama yakni memiringkan font dan menebalkan font. Underline, untuk memberikan garis bawah, dan strikethrough (<s>), untuk memberikan efek coretan.

Contoh ;

Superscript dan Subscript

Superscript digunakan untuk penulisan pangkat, seperti 3^2, sedangkan subscript, digunakan untuk penulisan senyawa kimia, seperti CO2.

Contohnya;

Cite, Qoute, Blockquote, Abbr

3 tag ini digunakan untuk membuat kutipan.

Tag cite digunakan untuk menandai hasil karya seseorang seperti judul buku,lagu, film dan lain-lain. Cite akan menampilkan font dalam keadaan miring.

Quote, atau <q>, digunakan untuk membuat kutipan singkat. Tampilan teks akan sedikit berbeda dengan adanya tanda kutip.

Blockquote <blockquote>, sama seperti tag sebelumnya, namun membentuk garis baru.

Abbr merupakan singkatan dari abbreviation yang berarti singkatan. Digunakan untuk menunjukkan kepanjangan dari suatu singkatan.

Kesimpulan

Itulah beberapa tag yang harus kamu ketahui ketika mempelajari penformatan teks dalam html. Materi ini tidaklah susah, dan bahkan tag-tag yang ada sangat mudah dipahami bahkan dihafal. Tahap 3 bisa kamu pahami lebih dalam bila sudah membaca tahap 1 dan 2. Yaps, tahap sebelumnya, akan memberikan penjelasan lebih pada kamu di tahap 3 ini.

sumber : di bawah

Pratama, Andre. 2015. HTML Uncover Panduan Belajar HTML untuk Pemula.Padang Panjang :www.duniailkom.com.

petanikode.com, w3schools.com

Hosting Unlimited Indonesia
Related Post :

Leave a Reply

Your email address will not be published. Required fields are marked *