Pengaturan Teks Di HTML

Dalam menentukan ukuran dan tampilan teks di dalam HTML saat ini, sudah banyak menggunakan CSS. Akan tetapi bukan berarti elemen pengaturan teks standar pada HTML tidak dipakai lagi. Elemen-elemen ini justru sangat diperlukan untuk dipadukan dengan CSS.

Pada topik kali ini, dikarenakan berbagai alasan, tidak diberikan contoh ataupun output dari kode yang dijelaskan. Anda harus mencoba membuat sendiri dokumen HTML yang menggunakan tag-tag berikut, atau dengan cara klik kanan dan "view page source" atau "inspect element" pada berbagai halaman web untuk mempelajari topik ini.

Elemen visual pada HTML memiliki dua jenis perilaku: block dan inline. Elemen yang bersifat block otomatis ditempatkan di baris baru. Elemen sebelum dan sesudah elemen block biasanya berada di baris yang berbeda. Contoh elemen block:
  • h1 - h6
  • div
  • p
  • form
  • pre

Sedangkan elemen inline, berada pada baris yang sama dengan elemen-elemen sebelum dan sesudahnya. Contoh elemen inline:
  • b, i, u, strong, em
  • span
  • a
  • img

Perilaku block dan inline ini dapat dengan mudah diubah dengan CSS dengan properti display. Misalkan kode CSS a.menu { display:block; } akan menyebabkan elemen a dengan class "menu" tampil menurun. Penggunaan CSS akan dibahas pada topik terpisah.

Elemen div dan span bisa dibilang merupakan elemen block dan inline yang polos. Kedua elemen ini biasanya diberi atribut class atau id dan tampilannya diatur dengan CSS.

Heading Pada HTML

Terdapat elemen h1, h2, h3, h4, h5 dan h6 untuk menentukan ukuran teks.
  • <h1>Heading 1</h1>
  • <h2>Heading 2</h2>
  • <h3>Heading 3</h3>
  • <h4>Heading 4</h4>
  • <h5>Heading 5</h5>
  • <h6>Heading 6</h6>

Dibuka lewat browser, hasilnya akan nampak seperti ini (lihat sebelah kanan pada gambar dibawah) :


Selain menentukan ukuran teks, heading juga memiliki makna penting di dalam SEO (Search Engine Optimization). Salah satu parameter yang menentukan ranking suatu halaman pada google adalah kesesuaian teks di dalam h1 dan h2. Terutama elemen h1 paling pertama yang ada pada halaman web tersebut.

Comments

Post a Comment

Popular posts from this blog

ERP ( Enterprise Resource Planning )

Image
Konsep Dasar ERP Posted on May 20, 2016 oleh Agung Brillian ERP singkatan dari 3 elemen kata yaitu, Enterprise (perusahaan/organisasi), Resource (sumber daya), Planning (perencanaan), 3 kata ini mencerminkan sebuah konsep yang berujung kepada kata kerja, yaitu “planning” yang berarti bahwa ERP menekankan kepada aspek perecanaan. ERP adalah sebuah system informasi perusahaan yang dirancang untuk mengkoordinasikan semua sumber daya, informasi dan aktifitas yang diperlukan untuk proses bisnis lengkap. Sistem ERP  didasarkan  pada database pada umumnya dan rancangan perangkat lunak modular.ERP merupakan software yang mengintegrasikan semua departemen dan fungsi suatu perusahaan ke dalam satu system yang dapat melayani semua kebutuhan perusahaan, baik dari departemen penjualan, HRD, produksi atau keuangan. Syarat terpenting dari system ERP adalah Integrasi. Integrasi yang dimaksud adalah menggabungkan berbagai kebutuhan pada satu softwa...
Read more

Membuat CV Dengan HTML

Image
Biasanya beberapa orang membuat CV menggunakan aplikasi pengolah kata (word processor), ada juga yang membuat CV menggunakan aplikasi pengolah gambar supaya CV menjadi lebih menarik. Kali ini saya mau berbagi cara membuat CV sederhana menggunakan HTML (Hyper Text Markup Language).  Berikut langkah-langkahnya, copy skript dibawah ini:  <html>   <head>     <title>Curriculum Vitae</title> <!-- Judul pada suatu web-->   </head>   <body bgcolor="#9E9E9E" width="800px"> <!-- Membuat body memiliki warna dengan menggunakan bgcolor -->   <div align="center">     <!-- Membuat rata tengah-->     <center>     <h1>     Curiculum Vitae</h1>     <!-- Membuat huruf menjadi besar (Ukuran H1) -->     </center>     <hr />     <h2>     Personal...
Read more

Menggunakal Tabel Pada HTML

Image
Untuk menampilkan data dengan tipe tabel dalam HTML, kita bisa menggunakan tag <table>. <table>.....</table> Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di dalam tag table) <table> <tr></tr> </table> Sedangkan untuk menentukan banyaknya kolom, tergantung dari banyaknya tag <td> (table data) yang digunakan di dalam tag <tr>.  1. <table> 2. <tr> 3.      <td>No</td> 4.      <td>Nama</td> 5.      <td>Alamat</td> 6. </tr> 7. </table> Atribut pada tabel: <Table> : menyaakan tag untuk tabel <width> : untuk menyatakan seberapa besar/ lebar yang akan kita buat <border> : ketebalan garis pembatas tabel <tr> : menyatakan sebagai tag kolom <td> : menyatakan sebagai tag cell <cellspacing> : Atribut cellspacing menya...
Read more