Fetty Sefty Blog: HTML

1. HTML (HypertextMarkupLanguage)

HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. HTTP atau Hypertext Transfer Protokol merupakan protocol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll).

Dengan HTTP inilah yang memungkinkan Anda menjelajahi internet dan melihat halaman web. Software yang digunakan untuk membuat atau mendesain halaman web yaitu Macromedia Dreamweaver, Adobe GoLive, MS Front Page sekedar contohnya. Tetapi tanpa mengetahui dasar-dasarnya anda tidak akan memperoleh hasil yang maksimal. Dalam tutorial ini anda akan kami ajak untuk mengetahui dasar-dasar dari desain web. Yang dibutuhkan hanya sebuah wordprocessor. Anda bias menggunakan Notepad, WordPad, MSWord atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad.

Ø StrukturDasarHtml

Dalam penggunaannya, sebagian besar kode HTML harus terletak diantara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda"/"). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:

<html>

<head>

<title>JudulForm/Caption</title>

</head>

<body>

ISI WEB

</body>

</html>

Keterangan :

· <html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah fi le HTML.

· <head> ..</head> Sebagai informasi page header. Didalam tag ini kita bias meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

· <title> ..</title> Sebagai title atau judul halaman / form. Kalimat yang terletak didalam tag ini akan muncul pada bagian paling atas browser anda (pada titlebar).

· <body> ..</body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Didalam tag ini bias diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, left margin dan top margin.

Ø Catatan:

1. Semua dokumen HTML mempunyai ekstensi .html (atau .htm)

2. Semua halaman web (homepage) mempunyai file index.html .File index.html secara otomatis akan dipanggil ketika alamat sebuah domain atau direktori tempat menyimpan file tersebut dibuka dibrowser. Terdapat pengecualian pada Microsoft yang menggunakan web server IIS, file yang dipanggil adalah default.html

Ø KodeWarna

Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi. Setiap warna ditampilkan dalam dua digit nilai heksa decimal (0,1,2,...,F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru.

Berikutiniwarna-warnayangdapatdigunakandalamhalamanHTML.

Warna Heksadesimal

White : #FFFFFF

Black : #000000

Red : #FF0000

Green : #00FF00

Blue : #0000FF

Magenta : #FF00FF

Cyan : #00FFFF

Yellow : #FFFF00

Ø Pengaturan Halaman Web dan Teks

a. <body> : digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Didalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

· Background = digunakan untuk mengatur latar belakang dengan gambar/image.

· Bgcolor = digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya.

· Teks = digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default.

· Link = Untuk mengatur warna link dokumen dengan warna biru sebagai warna default.

· Vlink = Untuk mengatur warna visited link dokumen dengan default tungu.

· Alink = digunakan untuk mengatur warna active link dokumen dengan default merah.

b. Heading:<Hn>..</Hn> : Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 – 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.

c. Paragraph Baru : <P> Digunakan untuk pindah alinea atau membuat paragraph baru. Tag ini bias diberiakhiran </P> tapi juga bias tidak diberi. Dalam tag ini juga bias digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribute ALIGN. Attribut align mempunyai nilai : LEFT, RIGHT, CENTER dan JUSTIFY.

d. LineBreak : <BR> Digunakan untuk pindah ke baris baru.

e. No LineBreak : <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

f. Font<FONT> : Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu : SIZE, FACE, COLOR.

1. SIZE : Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 – 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar.

2. FACE : Digunakan untuk mengatur jenis atau nama font. Anda bias memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada computer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila anda ingin menggunakan font yang sedikit "aneh" anda bias menggunakan graphic.

g. COLOR : Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB / HEX atau bias juga langsung menggunakan nama warna (red misalnya).

h. BaseFont : <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribute FONT. Tag FONT akan mengover write setting pada BASEFONT.

Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu:

1. <B> Boldtext

2. <I> Italictext

3. <U> Underscore

4. <TT> Typewriter

5. <S> Strikeout – drawsalinethroughthetext

6. <PRE> PreformattedText <DFN> Definition

7. <BLINK> Textberkedip(lebihbaikjangandigunakan)

8. <STRONG> Strong

9. <ADDRESS>

10. Italic

11. <CITE> Digunakan untuk quoting text

12. <CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

13. <SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

14. <KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

15. <BIG> Ukuran teks akan lebih besar satu ukuran

16. <SMALL> Ukuran teks akan lebih kecil satu ukuran

17. <SUP> Membuat teks superscript

18. <SUB> membuat teks subscript

19. <ABBREV> Abbreviations

20. <ACRONYM> Untuk akronim

21. <PERSON> Digunakan untuk indexing

22. <Q> Membuat short inline quotation

23. <VAR> Membuat variable name, selalu dalam italics.

i. <HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.

Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

j. LISTS adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus / symbol. Terdapat tiga tipe list yang dapat digunakan, yaitu:

1. UnorderedLists : <UL> Untuk membuat daftar item dengan tanda bullet (tidak bernomor). Listen tries didefinisikan dengan tag <LI>.

2. OrderedLists : <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. Listen tries juga didefinisikan dengan <LI> tag.

3. DefinitionLists : <DL>, digunakan untuk menjelaskan istilah-istilah. Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT>.

4. Preformatted Text : <PRE>. Digunakan untuk mengatur format

tampilan agar sesuai dengan aslinya.

5. Extended Quotations : <BLOCKQUOTE>, digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok kedalam.

k. Hypertext Link : Digunakan untuk membuat link/penghubung antara suatu halaman dengan halaman lain, ke URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman yang sama. Sintak tag link adalah sebagai berikut:

url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag <body>. Adapun macam-macam link adalah sebagai berikut:

Link ke Dokumen Lain : Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, anda harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu, baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang. Untuk mencoba membuat link, silahkan buat script berikut dan beri nama dengan link_dokumen_lain.html.

Fetty Sefty Blog

Jumat, 07 Oktober 2011

HTML

3 komentar: