FORMAT TEKS HALAMAN WEB

Format Teks Halaman Web

A.Anatomi dokumen web

B.Pemformatan teks dan paragrap

C.Pembuatan list minimal

   D.Pembuatan list kombinasi

A.  Anatomi dokumen web

Ketika pertama kali membuka browser web, biasanya dengan mengklik dua kali pada icon di desktop Anda, halaman web yang telah ditetapkan muncul. Halaman ini disebut sebagai halaman “home” atau halaman awal. Dengan Firefox misalnya, mungkin akan dibawa ke halaman rumah Mozilla atau ke halaman yang dipilih oleh penyedia layanan Internet. Tetapi jika ingin, dapat dengan mudah mengubah halaman awal.

The World Wide Web sampai saat ini adalah bagian yang paling populer dari Internet. Setelah menghabiskan waktu di Web akan merasa bahwa tidak ada batas untuk apa yang dapat temukan. Web memungkinkan kaya dan beragam komunikasi dengan memungkinkan untuk mengakses dan berinteraksi dengan teks, grafis, animasi, foto, audio dan video.

Jadi apa saja yang membentuk web ini? Pada tingkat yang paling sederhana, Web secara fisik terdiri dari komputer pribadi atau perangkat mobile, perangkat lunak web browser, sambungan ke penyedia layanan Internet, komputer yang disebut server yang disebut hosting dan router dan switch yang mengarahkan aliran informasi.

Ada banyak pilihan perangkat lunak server, tetapi dua yang paling populer adalah Apache ( perangkat lunak open source ) dan Layanan Informasi Internet Microsoft ( IIS ). Apache tersedia secara bebas untuk komputer berbasis Unix dan dapat diinstal pada Mac menjalankan Mac OS X. Ada versi Windows juga. Microsoft IIS adalah bagian dari keluarga Microsoft.

Setiap komputer dan perangkat (modem, router, smartphone, mobil, dll) yang terhubung ke Internet diberi alamat IP numerik yang unik (IP singkatan dari Internet Protocol). Sebagai contoh, komputer yang dihosting oreilly.com memiliki alamat IP 208.201.239.100. Semua angka-angka tersebut dapat memusingkan, untungnya ada Domain Name System (DNS) yang dikembangkan untuk memungkinkan kita untuk merujuk ke server dengan nama domainnya, " oreilly.com ", juga. Alamat IP numerik berguna untuk perangkat lunak komputer, sedangkan nama domain adalah lebih mudah diakses oleh manusia. Pencocokan nama domain teks ke alamat IP numerik masing-masing adalah tugas dari server DNS yang terpisah.

Hal ini dimungkinkan untuk mengkonfigurasi server web sehingga lebih dari satu nama domain dipetakan ke satu alamat IP, yang memungkinkan beberapa situs untuk berbagi server tunggal.

Sebuah halaman web adalah dokumen elektronik yang ditulis dalam bahasa komputer yang disebut HTML, singkatan dari Hypertext Markup Language. Setiap halaman web memiliki alamat yang unik, yang disebut URL atau Uniform Eerources Locator yang mengidentifikasi di mana web server yang memuat dokumen web.

Sebuah website memiliki satu atau lebih halaman web terkait, tergantung pada bagaimana itu dirancang. Halaman web pada situs yang dihubungkan bersama melalui sistem hyperlink, memungkinkan untuk melompat di antara halaman web dengan mengklik pada link.

Bila menelusuri World Wide Web akan melihat istilah yang sering disebut “home page”. Ini adalah halaman sebagai titik awal dari sebuah situs web. Seperti daftar isi dari buku atau majalah, “home page” biasanya memberikan gambaran tentang apa yang akan temukan di website. Situs dapat memiliki satu halaman, yang panjang beberapa atau ribuan halaman. Jika tidak ada banyak informasi, “home page” mungkin satu-satunya halaman. Tapi biasanya akan menemukan setidaknya beberapa halaman lainnya.

Halaman Web bervariasi dalam desain dan konten, tetapi banyak menggunakan format majalah tradisional. Di bagian atas halaman adalah masthead atau grafis banner, maka daftar item, seperti artikel, sering dengan penjelasan singkat. Item dalam daftar biasanya link ke halaman lain di situs, atau situs lain. Kadang-kadang link ini disorot kata-kata dalam tubuh teks, atau disusun dalam daftar, seperti indeks. Mereka juga dapat menjadi kombinasi dari keduanya. Sebuah halaman web mungkin juga "panas" gambar yang link ke konten lainnya.

Bagaimana bisa membedakan mana teks yang ada tautan/link? Link muncul dalam warna yang berbeda dari teks - biasanya dengan warna biru dan sering digarisbawahi. Bila memindahkan kursor di atas link teks atau melalui link grafis, perubahan icon dari panah ke tangan.

Web adalah media yang dinamis. Untuk mendorong pengunjung untuk kembali ke sebuah situs, banyak penerbit web memperbarui konten sering. Itulah yang membuat Web sangat menarik.

B.  Pemformatan teks dan paragrap

Berikut ini adalah contoh yang dihasilkan pemformatan teks pada dokumen

web :

HTML menggunakan tag seperti <b> dan <i> untuk memformat output,

seperti teks tebal atau miring.

Tag HTML ini disebut tag format, selengkapnya dalam tabel berikut :

Tag HTML Pemformatan Teks

Tag Deskripsi

<b> Mendefinisikan teks tebal

<em> Mendefinisikan teks menekankan

<i> Mendefinisikan teks miring

<small> Mendefinisikan teks kecil

<strong> Mendefinisikan teks penting

<sub> Mendefinisikan teks di bawah garis

<sup> Mendefinisikan teks di atas garis

<ins> Mendefinisikan teks sisipan

<del> Mendefinisikan teks dicoret

<mark> Mendefinisikan teks ditandai

Tag HTML “keluaran computer”

Tag Deskripsi

<code> Mendefinisikan teks kode komputer

<kbd> Mendefinisikan teks keyboard

<samp> Mendefinisikan teks contoh kode

<var> Mendefinisikan teks variabel

<pre> Mendefinisikan teks terformat

HTML Citations, Quotations, and Definition Tags

Tag Deskripsi

<abbr> Mendefinisikan sebuah singkatan

<address> Mendefinisikan alamat atau kontak informasi

<bdo> Mendefinisikan arah teks

<blockquote> Mendefinisikan sebuah bagian yang dikutip dari sumber

lain

<q> Mendefinisikan sebuah kutipan pendek

<cite> Mendefinisikan judul karya

<dfn> Mendefinisikan sebuah istilah definisi

2. Pemformatan Paragrap

Tag HTML untuk paragrap adalah <p>, dengan tag penutup </p>. Berikut ini

contohnya :

<p>ini adalah paragrap</p>

<p>Ini paragrap yang lain</p>

C.Pembuatan list minimal

Pengertian List

List adalah bagian teks di dalam dokumen yang berisi daftar item dari suatu

kelompok atau grup tertentu. Sebagai contoh, dalam situs web yang bertema

kuliner, list dapat berupa daftar dari makanan dan minuman, beserta

harganya. List dapat juga berupa prosedur (urutan langkah-langkah) dari

suatu pekerjaan tertentu, yang sifatnya harus dilakukan secara berurutan

dari langkah pertama sampai langkah terakhir.

Contoh List :

Daftar Makanan :

􀁸 Bakso

􀁸 Soto

􀁸 Sate

􀁸 Gule

Daftar Minuman :

􀁸 Juice Jambu

􀁸 Juice Alpukat

􀁸 Juice Tomat

2) Tipe Daftar dalam Dokumen HTML

Dalam dokumen HTML, tipe daftar dibedakan menjadi tiga, yaitu :

􀁸 Daftar berurutan (ordered list)

􀁸 Daftar tidak berututan (unordered list)

􀁸 Daftar definisi (definition list)

3) Daftar Berurutan (Ordered List)

Daftar yang berurutan biasanya ditandai dengan penggunaan penomoran

tertentu. Penomoran ini bias menggunakan angka (1, 2, 3,…) maupun karakter

alphabet terntentu (a, b, c,… atau i, ii, iii,…). Daftar yang berurutan umumnya

dipakai untuk item-item yang saling berhubungan satu sama lain, atau untuk

menuliskan langkah-langkah atau prosedur dari kegiatan terntentu yang tidak

dapat dilakukan secara acak.

Contoh daftar yang berurutan adalah pada cara membuat dokumen HTML,

misalnya :

Langkah-langkah membuat dokumen HTML :

1. Jalankan aplikasi Text Editor

2. Isikan kode HTML ke dalam Text Editor

3. Simpan file dengan ekstension .htm atau .html

4. Jalankan file HTML menggunakan aplikasi Web browser

untuk menampilkan hasilnya

Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan

tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan

untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk

menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item,

yang kemudian perlu ditutup dengan tag </li>.

Contoh penulisan adalah sebagai berikut :

<ol>

<li>Urutan Pertama</li>

<li>Urutan Kedua</li>

</ol>

Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis

penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2,

3, 4 dst.

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran

dalam suatu list adalah :

Tipe Keterangan

A Membuat list dengan penomoran berupa karakter A, B, C, dst

a Membuat list dengan penomoran berupa karakter a, b, c, dst

I Membuat list dengan penomoran berupa karakter I, II, III, dst

i Membuat list dengan penomoran berupa karakter i, ii, iii, dst

4) Daftar Tidak Berurutan (Unordered List)

Daftar yang tidak berurutan adalah daftar yang item-itemnya dapat diubah

posisinya secara acak. Daftar seperti ni tidak menggunakan penomoran seperti

di atas, melainkan hanya dengan menggunakan tanda atau symbol tertentu,

misalnya gambar kotak atau bulat (bullet).

Contoh :

Daftar buah :

􀁸 Mangga

􀁸 Jambu

􀁸 Semangka

􀁸 Rambutan

􀁸 Jeruk

Pada contoh di atas, kita dapat mengubah/mengacak secara bebas

urutan dari masing-masing item yang ada. Hal ini disebabkan karena setiap item

yang ada tidak memiliki keterkaitan satu sama lain dengan item lainnya, berbeda

dengan suatu urutan langkah tertentu yang harus ditulis secara berurutan.

Untuk membuat suatu daftar yang tidak berurutan dalam dokumen HTML,

digunakan tag <ul> (unordered list), yang berpasangan dengan tag </ul>. Tag

<ul> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ul>

berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item,

yang kemudian perlu ditutup dengan tag </li>.

Contoh penulisan adalah sebagai berikut :

<ul>

<li>Item satu</li>

<li>Item dua</li>

</ul>

Adapun atribut untuk tag <ul> adalah “type” yang menunjukan jenis tanda untuk

setiap item berupa tanda bulatan untuk defaultnya..

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan unordered list

adalah :

Tipe Keterangan Contoh Penulisan

Disk Tanda bulatan hitam <ul type=”disk”>

Circle Tanda bulatan putih <ul type=”circle”>

Square Tanda kotak <ul type=”square”>

5) Daftar Definisi (Definition List)

Daftar Definisi adalah suatu daftar yang berisi kumpulan definisi dari suatu istilah

tertentu, misalnya daftar definisi istilah HTML.

Contoh :

HTML

Hyper Text Mark-up Language

WWW

World Wide Web

Browser

Aplikasi untuk membuka dokumen html/situs

web.

D.Pembuatan list kombinasi

Pembuatan list Kombinasi

Perhatikan daftar berikut ini :

Daftar Menu

1. Makanan

􀁸 Bakso

􀁸 Mie Ayam

􀁸 Soto

2. Minuman

􀁸 Teh Panas

􀁸 Jeruk Panas

􀁸 Kopi

Dapat dilihat bahwa daftar di atas adalah gabungan daftar berurutan dan

daftar tidak berurutan.

Untuk membuat daftar diatas pada dokumen HTML maka cukup

menggabungkan <ol> dangan <ul>.

Perhatikan penggabungan <ol> dengan <ul> berikut ini :

<ol>

<li></li>

<li>

<ul>

<li></li>

<li></li>

<li></li>

</ul>

</li>

</ol>

Ketika kita menggabungkan tag tidak berurutan <ul> tipe bullet dengan tag

tidak berurutan <ul> pada daftar berikutnya, maka daftar yang kedua oleh

browser akan ditampilkan secara otomatis menjadi daftar bullet.

Tidak demikian dengan daftar berurutan <ol>, maka agar tipenya sama

dengan daftar berurutan sebelumnya, kita harus memberikan atribut tipe

yang sama dengan daftar berurutan sebelumnya. Contoh :

<ul>

<li> </li>

<ol type=i>

<li > </li>

<li> </li>

</ol>

<li>

<ol type=i>

<li > </li>

<li> </li>

</ol>

</li>

<li>

</li>

</ul>

Memulai dengan nomor tertentu

Untuk membuat daftar bernomor dengan urutan yang tidak dimulai dengan 1

(nomor/huruf awal), maka kita harus mendefinisikan dengan atribut “start”

pada elemen tag <ol>.

Misalnya contoh berikut :

<ol start="17">

<li>Blok huruf dengan text tool</li>

<li>Klik tab karakter</li>

<li>Pilih jenis huruf pada menu pop-up .</li>

</ol>

Maka urutan daftar yang ditampilkan akan dimulai dengan 17, selanjutnya 18

dan 19.

Demikian juga apabila :

<ol type=”A” start="17">

<li>Blok huruf dengan text tool</li>

<li>Klik tab karakter</li>

<li>Pilih jenis huruf pada menu pop-up .</li>

</ol>

Maka urutan daftar yang ditampilkan akan dimulai dengan Q, selanjutnya R,

dan S.

Penggunaan daftar bernomor yang tidak dimulai dengan nomor awal,

biasanya diperlukan apabila daftar yang kita buat sudah diselingi beberapa

paragraph, sehingga ketika dibuat daftar bernomor, secara default akan

dimulai dari awal, padahal harusnya melanjutkan nomor sebelumnya. Maka

digunakanlah atribut “start=” tersebut.