Pengenalan HTML. Apa Saja Yang Dibutuhkan. Contoh Bahasa Pemrograman Web, antara lain: ATAU. Hypertext. Markup. Language

Pengenalan HTML HTML (Hyper Text Markup Language) adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. Perintah dalam HTML dikenal dengan istilah Tag “<x>….”. Tag-tag HTML selalu diawali dengan <x> dan diakhiri dengan dimana x tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda seperti tag
, dan lainnya. Sebuah halaman website akan diapit oleh tag ……. File-file HTML selalu berakhiran dengan ekstensi *.htm atau *.html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi *.html maka anda membuat file yang berformat HTML. MICHELLE TANAMAL

ATAU HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. Walaupun HTML itu sendiri belum dapat dikategorikan sebagai bahasa pemrograrnan WEB. Tetapi HTML merupakan dasar dari segala bahasa pemrograman WEB yang akan muncul berikutnya. Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

Hypertext Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.

Markup Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.

Language Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.

Apa Saja Yang Dibutuhkan  

Hardware - Komputer PC / Laptop Software - Text Editor (Cute HTML / Cute HTML pRO 6/ Notepad / Notepad ++ / vi / emacs, dsb) - Web Browser (Internet Explorer / Opera / FireFox, dsb)

Contoh Bahasa Pemrograman Web, antara lain: 1. Java 2. JavaScript 3. DHTML 4. Dreamweaver 5. Frontpages, 6. Adobe GoLive, dll

By : Lab. Komputer Stella Maris Surabaya_______________________________________________

1

Apa itu Website ??? Website/Web/Homepage adalah semua dokumen yang ada di dalam internet (arti luas), arti yang lebih sempit bisa kita artikan sebagai alamat di internet. Contoh Website: - http://www.yahoo.com - http://www.detik.com - http://www.jawapos.com - dll

Apa kelebihan CuteHTML dibanding-kan program editor lain??? Kelebihannya: 1. Hasil bisa langsung kita lihat tanpa harus koneksi dengan internet. 2. Dapat menjalankan HTML, bahasa pemrograman JavaScript, Java Applet 3. Sewaktu menuliskan kode-kode HTML ada menu dan toolbar bantuan

Hasil rancangan yang sudah jadi (dibuat pakai CuteHTML) trus diapain ? Rancangan web tersebut harus dimasukan ke dalam internet (Web server) biar orang diseluruh dunia bisa mengunjungi web kita. Bagaimana caranya??? Anda harus punya program CuteFTP atau sejenisnya. Jadi CuteFTP itu program untuk memasukan website ke dalam internet (upload/publish). Jalankan CuteFTP lalu ikuti perintah-perintahnya.

Bayar tidak kita upload ke internet??? Ada yang bayar dan ada yang gratis Yang bayar : Bisa hubungi Iboost, Dotcom, Doteasy, Solo, Telkomnet, Radnet, dli Contoh alamat yang bayar: - http://www.nama_anda.com/ - http://www.nama_anda.co.id/ Yang Gratis: Kunjungi Tripod, Yahoo (Geocities), dll Contoh alamat gratis : - http://www.geocities.com/nama_anda/

Tampilan layar CuteHTML : Tombol Control Tampilan Main toolbar Menu Bar

Tag toolbar

Area Navigation Pane Status

STRUKTUR DASAR PENULISAN HTML

bar

<TITLE> JUDUL HOMEPAGE

ISI PROGRAM HTML


2

Menggunakan Tag pada HTML Beberapa contoh penggunaan tag HTML :

Ada beberapa tag yang memiliki atribut didalamnya, seperti tag , , dan sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face. Untuk lebih memahami atribut lihatlah contoh berikut ini. Ini Font Arial berwarna merah dan berukuran 12 pt hasil  Ini Font Arial berwarna merah dan berukuran 12 pt  Atribut color digunakan untuk menentukan warna tulisan.  Atribut face digunakan untuk menentukan jenis huruf.  Atribut size digunakan untuk menentukan ukuran huruf. Jika anda lihat bahwa atribut color berada pada awal, lalu yang kedua adalah face dan yang terakhir adalah size. Anda tidak perlu memperdulikan urutan atribut tersebut karena browser hanya membaca isi dari properi bukan urutan atributnya. Daftar Tag pada HTML Berikut ini adalah tabel tag-tag HTML dan fungsinya: Tag Utama


3

Modifikasi Teks

Font

face Links

Formatting


4

Gambar

Tabel


5

Form

Anda tidak perlu menghafal semua tag tersebut, nanti malah kepala anda malah pecah!. Cukup hafalkan yang penting-penting saja seperti

. Tidak hafal pun tidak apa-apa kan kita bisa melihat daftar kalau lupa, yang penting kita paham, BETUL?.


6

Menggunakan Atribut dari Tag A. Tag
…
Tag
digunakan untuk membuat paragraf dalam sebuah halaman web. Kita semua tahu kalau paragraph ada yang bertipe rata kiri, tengah, kanan dan justify. Untuk lebih memperjelas ketik kode di bawah ini. Contoh : Atribut Tag 
Teks ini berada di kiri

Teks ini berada di tengah

Teks ini berada di kanan

Paragraph ini bertipe justify. Dimana semua teks akan dibuat lurus sama dengan batas tepi halaman. Oh ya, tag
merupakan default atau bentuk baku tag
dimana teks atau paragraf akan berformat rata kiri. Jika anda tidak memberi atribut align pada tag
maka browser akan menganggap rata kiri.
Setelah selesai simpan file tersebut dengan mengklik menu File – Save as. Tentukan tempat simpannya. Beri nama file dengan tag_p.html. Klik Save. Pastikan Save as Type adalah HTML Document. Untuk menjalankan kode anda tersebut buka IE atau FireFox klik File – Open, arahkan dimana anda menyimpan file tag_p.html tadi. Hasilnya akan terlihat seperti gambar berikut :


7

B.

Tag
= Line Break Pada pemaparan bagian sebelum ini telah dijelaskan bahwa tag
dapat digunakan untuk memisahkan suatu paragraf dengan paragraf yang berikutnya. Persoalan berikutnya bagaimana jika ingin menyisipkan line break pada akhir baris agar jarak dengan baris berikutnya tidak terlalu jauh (kalau kita menggunakan tag
jarak antara kedua baris relatif lebih jauh). Tentu saja kita dapat melakukan dengan menggunakan tag
untuk menampilkan dokumen dalam bentuk preformat, akan tetapi hal ini kurang diminati karena font ditampilkan dalam format monospace. Untuk mengatasi hal itu kita dapat menggunakan tag
. Tag
ini akan menyisipkan line break pada akhir baris sehingga kita dapat pindah ke baris berikutnya tanpa harus berganti paragraf. Pada contoh berikut akan ditampilkan pada page berupa penggunaan line break dan penyisipan sebuah garis horizontal. <TITLE>Horizontal Rule and Line Break
Using
to force a line break
Hi Everybody !
My Name is Jhon

Using
to add a horizontal rule

C.

Tag
...
= Preformat Pada kondisi biasa web browser akan mengabaikan pemakaian karakter-karakter multi spasi, tab, dan carriage return, namun kita dapat mencegahnya dengan menggunakan tag
. Penggunaan tag
ini membuat web browser akan menampilkan dokumen dalam bentuk apa adanya (karakter multi spasi, tab dan carriage return tidak diabaikan). Tag
merupakan kependekan dari "preformatted", yang artinya naskah ditampilkan dalam bentuk layout yang asli. Pada contoh berikut ditampilkan perbedaan antara naskah dokumen yang menggunakan tag
dan naskah yang lain tidak menggunakannya. Layout asli kedua naskah tersebut dibuat serupa sehingga kita dapat melihat perbedaan dari hasil tampilannya. <TITLE>The
Tag
Without the
Tag:
Here's some ditty Specially done to lay it out all Formatted and pretty. Unfortunately, that is all This junk really means Because I admit I couldn't scrawl Poetry for beans.

With the
Tag:

Here's some ditty Specially done to lay it out all Formatted and pretty.


8

Unfortunately, that is all This junk really means Because I admit I couldn't scrawl Poetry for beans.

Catatan : Pada penggunaan tag
, teks akan ditampilkan dengan menggunakan font dengan format monospace. D.

Tag
= Penyisipan Garis Untuk menambah nilai estetika page maupun untuk memisahkan suatu bagian informasi dari bagian yang lainnya, kita dapat menyisipkan sebuah garis horisontal pada page. Penyisipan garis ini dapat dilakukan dengan menambahkan tag
. Tag
ini juga memiliki beberapa parameter tambahan yang memungkinkan kita untuk memodifikasi tampilan dari garis horisontal yang digunakan ini.

Tag nya :
atau
digunakan untuk membuat Garis Horisontal, Width untuk lebar garis, Align untuk posisi garis, Size untuk tinggi baris, NOSHADE untuk info tanpa kotak luar

E.

Tag Judul = Heading Seperti halnya pada pembuatan buku, kita dapat membagi naskah atau dokumen HTML ke dalam beberapa seksi untuk memudahkan proses pembacaan. Masing-masing seksi atau bagian itu terdapat satu subjudul. Untuk menangani format tampilan yang seperti ini kita dapat menggunakan tag HTML yang khusus untuk kepentingan tersebut. Terdapat enam tag yang dapat digunakan untuk membentuk format heading yakni mulai dari
yang menggunakan ukuran font paling besar hingga ke
yang ukuran font-nya paling kecil.

Contoh penggunaannya dalam file HTML adalah sebagai berikut: <TITLE>A Text Formatting and Headings Extravaganza
From Buck-Naked to Beautiful: Dressing Up Your Page

Sprucing Up Your Text

Yer Basic Text Formatting Styles

Combining Text Formats

Accessorizing: Displaying Special Characters

Sectioning Your Page With Headings

A Few More Formatting Features

Handling Preformatted Text

Them's the Breaks: Using
for Line Breaks

Inserting Horizontal Lines


9

F.

Tag … Fungsi tag adalah untuk memanipulasi baik jenis, ukuran, dan warna huruf. Namun kita akan lebih bereksperimen dengan atribut ini. Seperti biasa klik File – New – HTML/XHTML. Ketik kode di bawah ini.

Setelah selesai simpan dengan nama tag_font.html. Output dari kode di atas dapat anda lihat pada gambar 2.2.

Nb: Tanda Enter pada kode diatas tidak berpengaruh pada tampilan/output pada browser. Enter digunakan agar kode mudah dibaca.

G. Tag untuk Format Teks Dasar Pada umumnya web browser mendukung empat macam format teks yakni bold, italic, monospace, and underline. Keempat format teks ini diimplementasikan dalam format HTML dengan menambahkan tag-tag yang bersesuaian untuk masing-masing format tersebut.


10

Format teks

Tag awal

Tag Akhir

Bold

Italic

Underline

Monospace

dicetak lebih terang



dicetak lebih besar



text dicetak mode Empasize



text Subscript



Text Superscript



<S>

Text dicetak lebih kecil

Text Dicoret Text Berkedip

Sebagai contoh kalau kita ingin menggunakan format-format teks ini maka dalam file HTML harus kita tambahkan: <TITLE>Yer Basic Text Formatting Styles My Excellent Bookstore Adventure
The other day, I went to a unique bookstore called Mary, Mary, Quite Contrary. There were tons of unexpected delights, including, believe it or not, a Self-Helpless section! For real. I saw titles like Got a 50-Cent Head? Here's How To Get a Ten Dollar Haircut! and A Few Geese Shy of a Gaggle-And Proud Of It!

Kita juga dapat mengkombinasikan dua macam format teks secara bersamaan. Misalkan untuk menampilkan kata-kata dalam cetak tebal dan miring kita dapat menuliskan kode HTML seperti ini: Kata-kata yang tercetak tebal dan miring

Selain itu kita juga dapat menampilkan suatu karakter khusus dengan menggunakan kode yang tertentu pula. Ada dua macam kode yang dapat kita gunakan untuk menampilkan karakterkarakter alternatif tersebut yakni dengan menggunakan Character Reference atau Entity Name. Berikut ini terdapat daftar yang memuat beberapa karakter khusus yang dapat ditampilkan dengan menggunakan suatu kode tertentu.


11

Misalkan untuk menuliskan "Tag " dapat kita implementasikan: Tag Symbol

Character Reference

Entity name

<

<

<

>

>

>

¢

¢

¢

£

£

£

¥

¥

¥

©

©

©

®

®

®

°

°

°

¼

¼

¼

½

½

½

¾

¾

¾

×

×

×

H. Tag untuk Teks Berjalan Tag nya : <MARQUEE Bgcolor=”warna” Direction=”left/right” Behavior = ”scroll/slide/alternate” > …Text….

I.



bgcolor untuk warna latar belakang



direction untuk arah gerak text



behavior untuk prilaku gerak text Tag
...
Tag adalah salah satu tag yang memiliki atribut terbanyak. Dalam tag
juga terdapat 2 tag yang penting yang penting yaitu tag untuk membuat baris dan tag untuk membuat kolom. Tag
adalah tag yang penting dalam pendesainan sebuah tampilan situs. Jadi anda harus cukup menguasai tag ini. OK, sekarang buatlah file baru seperti biasa klik File – New – HTML/XHTML. Ketik kode dibawah ini. Jangan tegang santai saja....!. Atribut dari tag tabel
Membuat Tabel


12

Ini kolom 1 pada baris 1 Ini kolom 2 pada baris 1


Contoh 2: Membuat Tabel



Tabel sebagai bingkai dari paragraf

Tabel memiliki peranan sangat penting dalam tampilan sebuah situs web. Tanpa tabel desainer akan mengalamai kesulitan dalam mendesain sebuah halaman web.

Kalau anda perhatikan website yan memiliki tampilan yang tersusun rapi. Sebenarnya itu adalah tabel hanya saja atribut border="0" sehingga tabel seakan tidak ada(transparan).

Situs rahasia-webmaster.com banyak menggunakan tabel sebagai bingkai paragraf. Perlu diingat tag-tag pada html dapat mengandung unsur yang sama. Contohnya di dalam sebuah tabel terdapat tabel lagi. Di bawah ini adalah tabel yang berada di dalam tabel utama


13

Nama Barang Harga Barang

Monitor Rp. 500.000,-

CDRW Rp. 245.000,0

Setelah itu simpan dengan nama tag_tabel.html. Gambar 2.3 menunjukkan output dari kode diatas.


14

Latihan 1 : TABEL

Hasil Tampilan :

<Title>LATIHAN 7

baris 1, kolom 1 baris 1, kolom 2 baris 1, kolom 3

baris 2, kolom 1 baris 2, kolom 2 baris 2 ,kolom 3

Latihan 2 : TABEL <TITLE>LATIHAN MEMBUAT TABEL DAFTAR NILAI KOMPUTER

NO NAMA ALAMAT NILAI KETERANGAN

1. AGUS PARYONO JL. VETERAN NO. 27 SURABAYA 75 BAIK

2. LIDWINA JL. PREGOLAN NO. 007 SIDOARJO 50 KURANG

3. AMI KUSWANDINA JL. PEMUDA NO. 212 MALANG 90 SANGAT MEMUASKAN


15

Hasil Tampilan :

J.

Tag ... Web page memungkinkan kita interaktif dengan pengunjung web , salah satunya dalah dengan penggunaan FORM . Metoda pengiriman data pada form terdapat dua yaitu GET dan POST. Pada HTML metoda ini dinyatakan dengan atribut METHOD di dalam elemen FORM. Metoda GET merupakan default pengiriman suatu data form .metode GET mengirimkan data pada server dengan cara meletakkannya pada bagian akhir URL yang menunjuk pada script pemroses Jadi jika URL anda menunjuk ke CGI Script pada URL “cgi-bin/scriptform” dan ata formnya adalah “Salman” dan “2503645”, maka URL akhir yang dikirim ke server adalah : /cgi-bin/scriptform?kota=Jakarta&telepon=2503645 Metode POST tidak seperti metode GET yang mengirimkan datanya secara terpisah pada suatu standar input.Script mengambil data form dari stabdar input ini , dengan adanya penyimpanan data secara tersendiri membuat metoda POST bisa menyimpan data input dalam jumlah banyak. Latihan FORM <TITLE>LATIHAN 9

Nama : Alamat : E-mail : Telepon :

Contoh form diatas :


16

K. Tag Tag memiliki atribut type yang fungsinya sangat vital dalam output tampilan. Isi dari atribut type dapat menentukan jenis tampilan apakah itu textbox, password box, checkbox, radio button dan sebagainya. Daripada banyak berteori lebih baik kita praktek saja. Seperti biasa buat file baru dan ketik kode di bawah ini. Atribut tag Form dan Input

Tag input dengan atribut type="text"

Ini textbox dengan nama teks_ku ukuran 16 chr dan maksimal karakrer yang dapat ditampung 20 chr(character).

Tag input dengan atribut type="password"
Ini passwordbox dengan nama password_ku ukuran 16 chr dan maksimal karakrer yang dapat ditampung 20 chr(character).

Tag input dengan atribut type="radio"
Radio 1 --> nama radio_ku isi/value isi_1
Radio 2 --> nama radio_ku isi/value isi_2
Jika nama radio tidak sama maka tidak dianggap satu pilihan. Untuk membuktikannya silahkan ganti salah satu nama dari radio diatas untuk mengetahui perbedannya.

Tag input dengan atribut type="checkbox"
Checkbox 1 --> nama checkbox_ku_1 isi/value isi_1
Checkbox 2 --> nama checkbox_ku_2 isi/value isi_2

Tag input dengan atribut type="submit"

Tombol ini berguna untuk mem-post(mengirimkan variabel dan isi variabel yang ada pada form ke file tujuan (action="file_tujuan"))

Tag input dengan atribut type="reset"

Tombol ini berguna untuk membersihkan seluruh tulisan yang ada pada seluruh isian form. Coba isikan semua textbox dan radio lalu tekan tombol ini.

Tag input dengan atribut type="hidden"
Tipe ini berguna jika si webmaster menginkan variabel yang sifatnya sudah didefinisikan. Dan tidak menampilkan output apapun.

Tag input dengan propeti type="image"

Image memiliki fungsi yang sama dengan type submit


17

Simpan dengan nama tag_form_input.html dan jalankan. Hasilnya akan seperti yang terlihat pada gambar 2.4.

L.

Tag <select>... dan

DATA PRIBADI
Nama:	David Joko
Tempat/Taggal lahir:	Surabaya, 10 Nopember 1978
Agama:	Islam
Gol. Darah:	O
Pekerjaan:	Swasta
Hobi:	Traveling, Mancing
Kembali ke halaman utama

Pengenalan HTML. Apa Saja Yang Dibutuhkan. Contoh Bahasa Pemrograman Web, antara lain: ATAU. Hypertext. Markup. Language

Without the
Tag:

With the
Tag:

yang menggunakan ukuran font paling besar hingga ke

yang ukuran font-nya paling kecil.

Contoh penggunaannya dalam file HTML adalah sebagai berikut: <TITLE>A Text Formatting and Headings Extravaganza

From Buck-Naked to Beautiful: Dressing Up Your Page

Sprucing Up Your Text

Yer Basic Text Formatting Styles

Combining Text Formats

Accessorizing: Displaying Special Characters

Sectioning Your Page With Headings

A Few More Formatting Features

Handling Preformatted Text

Them's the Breaks: Using
for Line Breaks

Inserting Horizontal Lines

Minuman:

Disc bullets list:

Circle bullets list:

Square bullets list:

A nested List:

A nested List:

An Ordered List:

Numbered list:

Letters list:

Buah-buahan:

Roman numbers list:

Lowercase Roman numbers list:

Ini kolom 1 pada baris 1	Ini kolom 2 pada baris 1
Ini kolom 1 pada baris 2	Ini kolom 2 pada baris 2

baris 1, kolom 1	baris 1, kolom 2	baris 1, kolom 3
baris 2, kolom 1	baris 2, kolom 2	baris 2 ,kolom 3

NO	NAMA	ALAMAT	NILAI	KETERANGAN
1.	AGUS PARYONO	JL. VETERAN NO. 27 SURABAYA	75	BAIK
2.	LIDWINA	JL. PREGOLAN NO. 007 SIDOARJO	50	KURANG
3.	AMI KUSWANDINA	JL. PEMUDA NO. 212 MALANG	90	SANGAT MEMUASKAN

	Kegiatan Akhir Tahun Bersama Teman Pada akhir tahun 2005 nanti saya dan teman-teman mempunyai acara tahun baruan di Bali. Rencananya kami dibali mulai tanggal 29 Desember sampai 2 Januari.
Kembali ke halaman utama


Kantor	Bromo

Pengenalan HTML. Apa Saja Yang Dibutuhkan. Contoh Bahasa Pemrograman Web, antara lain: ATAU. Hypertext. Markup. Language

Recommend Documents

Without the Tag:

With the Tag:

yang menggunakan ukuran font paling besar hingga ke

yang ukuran font-nya paling kecil. Contoh penggunaannya dalam file HTML adalah sebagai berikut: <TITLE>A Text Formatting and Headings Extravaganza

From Buck-Naked to Beautiful: Dressing Up Your Page

Sprucing Up Your Text

Yer Basic Text Formatting Styles

Combining Text Formats

Accessorizing: Displaying Special Characters

Sectioning Your Page With Headings

A Few More Formatting Features

Handling Preformatted Text

Them's the Breaks: Using for Line Breaks

Inserting Horizontal Lines

Minuman:

Disc bullets list:

Circle bullets list:

Square bullets list:

A nested List:

A nested List:

An Ordered List:

Numbered list:

Letters list:

Buah-buahan:

Roman numbers list:

Lowercase Roman numbers list:

Without the
Tag:

With the
Tag:

yang ukuran font-nya paling kecil.

Contoh penggunaannya dalam file HTML adalah sebagai berikut: <TITLE>A Text Formatting and Headings Extravaganza

Them's the Breaks: Using
for Line Breaks