Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Monday, February 15, 2016

Penggunaan Elemen Heading di HTML

Heading adalah termasuk konten umum yang dapat Anda temui dengan mudah di halaman sebuah web. Untuk membuat suatu heading di halaman web, Anda dapat menggunakan elemen HTML mulai dari h1 sampai dengan h6. Heading merupakan elemen blok (block element) yang dapat berisi elemen HTML lainnya dan ketika ditampilkan di browser (peramban) akan memulai di baris baru.

Tiap-tiap elemen heading mempunyai font dan ukuran default yang semuanya ditentukan dari font dasar browser yang digunakan. Font dasar dari browser umumnya adalah Times New Roman dengan ukuran 16 pixel. Namun demikian, Anda masih dapat merubah nilainya dengan menggunakan CSS. Elemen heading tidak dimaksudkan untuk memformat teks (text), melainkan untuk menyediakan struktur yang logis untuk dokumen Anda.
Heading pertama dari halaman web seharusnya adalah elemen h1 yang menandai heading paling penting. Heading penting level berikutnya seharusnya elemen h2. Setelah h2, heading berikutnya seharusnya h3 dan bukan h4, begitu seterusnya. Ini berarti Anda perlu turun satu level dan tidak seharusnya melompat dua atau lebih ke level heading di bawahnya. Ketika Anda menggunakan struktur heading secara benar, ini akan membantu mesin telusur (search engine) melakukan indek (indexing) website secara lebih baik dan memberikan kemudahan akses pada device seperti screen reader. Berikut ini adalah tabel elemen heading dari h1 sampai dengan h6.
Elemen Heading Di HTML
ElemenKeterangan
h1Membuat heading level 1 dengan konten tebal (bold) dan ukuran font 200% dari ukuran font dasar.
h2Membuat heading level 2 dengan konten tebal (bold) dan ukuran font 150% dari ukuran font dasar.
h3Membuat heading level 3 dengan konten tebal (bold) dan ukuran font 117% dari ukuran font dasar.
h4Membuat heading level 4 dengan konten tebal (bold) dan ukuran font 100% dari ukuran font dasar.
h5Membuat heading level 5 dengan konten tebal (bold) dan ukuran font 83% dari ukuran font dasar.
h6Membuat heading level 6 dengan konten tebal (bold) dan ukuran font 67% dari ukuran font dasar.
Berkut ini contoh penggunaan elemen heading (h1 dan h2). Elemen h1 digunakan untuk menandai heading paling penting. Elemen h1 ini memiliki dua sub-heading yang menandai heading penting level berikutnya. Untuk membuat sub-heading ini, digunakan elemen h2. Anda tidak dianjurkan melompat menggunakan dua atau lebih level heading dibawahnya, misalnya h3, h4 atau h5, untuk menjaga tetap terciptanya struktur yang logis.
<!DOCTYPE html>
<html>
<head>
<title>Menggunakan Elemen Heading.</title>
</head>
<body>
<h1>Karakteristik Bahasa Pemrograman Java.</h1>
<p>Tulis penjelasan tentang karakteristik bahasa pemrograman Java di sini...</p>
<h2>Object-Oriented.</h2>
<p>Tulis penjelasan tentang object-oriented di sini...</p>
<h2>Architecture-Neutral.</h2>
<p>Tulis penjelasan tentang Architecture-Neutral di sini...
</body>
</html>

Monday, February 1, 2016

Konsep Dasar HTML (HyperText Markup Language)

HTML atau kalimat panjangnya HyperText Markup Language berupa kode-kode tag yang menginstruksikan penjelajah web untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan penjelajah web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka surel ataupun dari PDA dan perangkat lunak lain yang memiliki kemampuan browser. Dengan menggunakan perintah-perintah HTML memungkinkan pengguna untuk melakukan tugas-tugas berikut:

    * Menentukan ukuran dan alur tulisan.
    * Mengintegerasikan gambar dengan tulisan.
    * Membuat Pranala.
    * Mengintegerasikan berkas suara dan rekaman gambar hidup.
    * Membuat form interaktif.

HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: TAMPIL TEBAL. Tandadigunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan formating di dalam halaman web daripada menentukan penampilannya.Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

Menyunting Format Tulisan

HTML memungkinkan kita untuk menyunting tampilan atau format berkas yang akan kita kirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah :

    * Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
    * Kita dapat menampilkan tulisan dalam bentuk cetakan tebal
    * Kita dapat menampilkan sekelompok kata dalam bentuk miring
    * Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
    * Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Markup/Tanda

Secara garis besar, terdapat 4 jenis elemen dari HTML:

    * structural. tanda yang menentukan level atau tingkatan dari sebuah tulisan  yang akan memerintahkan browser untuk menampilkan sesuai format yang dimasukan.
    * presentational. tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, boldface) akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
    * hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, Wikipedia) akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu,
    * Elemen widget yang membuat objek-objek lain seperti tombol (b u t t o n) , list dan garis horizontal, Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam link yang dapat kita gunakan :

    * Link menuju bagian lain dari page
    * Link menuju page lain dalam satu web site
    * Link menuju resource atau web site yang berbeda.

Selain markup presentational , markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

HEAD

Bagian header dari document HTML di apit oleh tag di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “titile” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag META.

Elemen Body

Bagian BODY, yang dinyatakan dengan tag …, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>). Tag biasanya merupakan suatu pasangan yang disebut dengan : 1. Tag awal, dinyatakan dalam bentuk 2. Tag akhir, dinyatakan dalam bentuk 

Format : teks yang ditampilkan Contoh : untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda.

Atribute

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya :

digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah

dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.