<HTML>

<HEAD>

<TITLE>BLOCKQUOTE</TITLE>

</HEAD>

<BODY>

<H3>Sesuatu yang tidak perlu dicoba</H3>

<BLOCKQUOTE>

Sesuatu yang kelihatan mengasyikkan tapi sebenarnya lebih banyak  menambah masalah pada remaja adalah narkoba, seks, alkohol dan merokok.  Jangan sekali-kali mencoba jika tidak ingin membuat masalah baru

</BLOCKQUOTE>

</BODY>

</HTML>

4. Preformatted Text

Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Contoh:

<HTML>

<HEAD>

<TITLE>Preformatted Text</TITLE>

</HEAD>

<BODY>

<PRE>

Edisi yang lalu dibahas tentang membuat billing system untuk warnet yang dapat langsung mencetak tagihan.

Kali ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa diperoleh beberapa laporan secara periodik.

</PRE>

</BODY>

</HTML>

5. Begin Row (BR)

Tag ini digunakan untuk menulis teks pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya.
Contoh:

<HTML>

<HEAD>

<TITLE>Begin Row</TITLE>

</HEAD>

<BODY>

<P>Banyak cara yang dapat digunakan untuk melakukan instalasi  FreeBSD. Namun ada tiga cara yang paling sering dilakukan ,yaitu:

<BR>Instalasi melalui FTP

<BR>Instalasi melalui CDROM

<BR>Instalasi melalui partisi DOS

</BODY>

</HTML>

6. Ukuran Font

Untuk mengatur huruf dokumen HTML digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:

<HTML>

<HEAD>

<TITLE>Ukuran font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=1>Ukuran font 1</FONT>

<FONT SIZE=2>Ukuran font 2</FONT>

<FONT SIZE=3>Ukuran font 3</FONT>

<FONT SIZE=4>Ukuran font 4</FONT>

<FONT SIZE=5>Ukuran font 5</FONT>

<FONT SIZE=6>Ukuran font 6</FONT>

<FONT SIZE=7>Ukuran font 7</FONT>

</BODY>

</HTML>

7. Jenis Font

Atribut FACE digunakan untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.

Contoh:



<HTML>

<HEAD>

<TITLE>Jenis Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT FACE = "Arial">Arial, contoh AC Milan <P>

<FONT FACE = "Verdana">Verdana , contoh Persebaya <P>

<FONT FACE = "Times New Roman">Times New Roman, contoh Indonesia <P>

</BODY>

</HTML>

8. Warna Font

Atribut COLOR digunakan untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red, Blue, Yellow, White, dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000 untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:

<HTML>

<HEAD>

<TITLE>Warna Font</TITLE>

</HEAD>

<BODY>

<FONT SIZE=5>

<FONT COLOR = "red">PSM Makassar<P>

<FONT COLOR = "#FF0000">tetap PSM Makassar kan?<P>

<FONT COLOR = "#00FF00">Ini baru Persebaya<P>

</BODY>

</HTML>

STRUKTUR DASAR DOKUMEN HTML
HTML merupakan singkatan dari HyperText Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang memerintahkan web browser untuk mengeksekusi perintah-perintah yang dispesifikasikan.
Struktur dasar dokumen HTML adalah sebagai berikut:

<html>
<head>
<title>Disini Judul Dokumen HTML</title>
</head>
<body>
Disini penulisan informasi Web
</body>
</html>

Dari struktur dasar HTML di atas dapat dijelaskan sebagai berikut:
a. Tag
Adalah teks khusus (markup) berupa dua karakter “<” dan “>”, sebagai contoh <body> adalah tag dengan nama body.
Secara umum tag ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkan karakter “/” setelah karakter “<”), sebagai contoh <body> ini adalah tag pembuka isi dokumen HTML, dan </body> ini adalah tag penutup isi dokumen HTML.
b. Element
Element terdiri atas tiga bagian, yaitu tag pembuka, isi, dan tag penutup. Sebagai contoh untuk menampilkan judul dokumen HTML pada web browser digunakan element title, dimana:
<title> ini adalah tag pembuka judul dokumen HTML
Disini Judul Dokumen HTML ini adalah isi judul dokumen HTML
</title> ini adalah tag penutup judul dokumen HTML
Tag-tag yang ditulis secara berpasangan pada suatu element HTML, tidak boleh saling tumpang tindih dengan pasangan tag-tag lainnya.
Contoh penulisan tag-tag yang benar

Contoh penulisan tag-tag yang salah

c. Attribute
Attribute mendefinisikan property dari suatu element HTML, yang terdiri atas nama dan nilai. Penulisannya adalah sebagai berikut:

<TAG>
nama-attr=”nilai-attr”
nama-attr=”nilai-attr”
……………..
>
……………..</TAG>

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untuk membuat warna teks menjadi kuning dan latarbelakang halaman web menjadi hitam, penulisannya adalah <body bgcolor=”black” text=”yellow”>
d. Element HTML
Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML.
Sintaks:
<html>
……….
</html>
e. Element HEAD
Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>.
Sintaks:
<head>
………..
</head>
f. Element TITLE
Merupakan judul dari dokumen HTML yang ditampilkan pada judul jendela browser. Tag <title> dan tag </title> terletak di antara tag <head> dan tag </head>.
Sintaks:
<title>
………
</title>
g. Element BODY
Element ini untuk menampilkan isi dokumen HTML. Tag <body> dan tag </body> terletak di bawah tag <head> dan tag </head>.
Element BODY mempunyai attribute-attribute yang menspesifikasikan khususnya warna dan latarbelakang dokumen yang akan ditampilkan pada browser.
Sintaks:
<body text=”v” bgcolor=”w” background=”uri” link=”x” alink=”y” vlink=”z”>
…………..
</body>
Attribute text memberikan warna pada teks, bgcolor memberikan warna pada latarbelakang dokumen HTML, background memberikan latarbelakang dokumen HTML dalam bentuk gambar, link memberikan nilai warna untuk link, alink memberikan warna untuk link yang sedang aktif, vlink memberikan warna untuk link yang telah dikunjungi.
Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute background yang akan digunakan, akan tetapi jika nilai attribute background (gambar) tidak ditemukan pada dokumen HTML maka attribute bgcolor yang akan digunakan.

LATIHAN

Gunakan teks editor misalkan “Notepad” untuk menyunting dan menyimpan script latihan di bawah ini. Untuk melihat hasilnya bukalah file tersebut dengan menggunakan web browser atau gunakan editor yang telah tersedia pada modul ini dengan mengklik menu Editor.
Latihan 1:
Menampilkan teks:
Belajar bahasa pemrograman web ternyata mudah juga

Nama file: latihan1_1.html

<html>
<head>
<title>Latihan1-1</title>
</head>
<body>
Belajar bahasa pemrograman web ternyata mudah juga

</body>
</html>

Tugas tambahan:
Gantilah teks tersebut dengan teks lainnya.
Latihan 2:
Merubah warna teks menjadi merah:
Belajar bahasa pemrograman web ternyata mudah juga

Nama file: latihan1_2.html

<html>
<head>
<title>Latihan1-2</title>
</head>
<body text=”red”>
Belajar bahasa pemrograman web ternyata mudah juga

</body>
</html>

Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 3:
Merubah warna background menjadi hitam.
Nama file: latihan1_3.html

<html>
<head>
<title>Latihan1-3</title>
</head>
<body text=”red” bgcolor=”black”>
Belajar bahasa pemrograman web ternyata mudah juga

</body>
</html>

Tugas tambahan:
Cobalah untuk warna: maroon, black, yellow, white, lime, green, blue, red, olive, navy, purple, teal, gray, silver, fuchsia, aqua.
Latihan 4:
Merubah background dengan suatu gambar.
Nama file: latihan1_4.html
<html>
<head>
<title>Latihan1-4</title>
</head>
<body text=”red” bgcolor=”aqua” background=”./images/image027.jpg”>
Belajar bahasa pemrograman web ternyata mudah juga

</body>
</html>
Adapun perintah perintah dasar dari HTML adalah sebagai berikut:

<H1> sampai <H6>
<H1> </H1>font ukuran besar
<H2> </H2>
…. ….
<H6> </H6>font semakin kecil
<HR>
Fungsi : perintah untuk membuat garis horizontal penuh layar
cth :
<I>
Fungsi : membuat teks miring
<B>
Fungsi : membuat teks tebal
<U>
Fungsi : membuat teks bergaris bawah
<CENTER>
Fungsi : membuat text ke tengah layar
<ALIGN>
Fungsi : Membuat teks rata kiri dan rata kanan
Sintak
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kananatau<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify> Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2>
<BR>
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya
<!->
Fungsi : membuat komentar
Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
<P>
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
<DD>
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
<BASEFONT>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN TEBAL</B>
<FONT>
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib
<FACE>
Fungsi : mengubah jenis font
<SUP>
Fungsi : membuat cetak naik suatu teks
Contoh :
Kami adalah yang pertama:1^stin the world
<SUB>
Fungsi : membuat suatu teks cetak turun
Contoh :
contoh-contoh teks cetak turun :
H₂O (Disebut Air) dan
C₂₁27No (Disebut Methadon)
<UL> atau Unorder List
Fungsi : membuat bullet
<LI>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
Contoh :
<UL>
<LI>
<H2> Jawa Timur </H2>
<UL>
<LI> SURABAYA </LI>
<LI> MALANG </LI>
<LI> GRESIK </LI>
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </H2>
<UL>
<LI> Bandung </LI>
<LI> Sukabumi </LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
<IMGSRC>
Fungsi : memasukkan gambar ke dalam Website
Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
Sintak :<IMG BORDER=”5″>
“5″ merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda
<BGSOUND>
Fungsi : memasukkan suara atau musik ke dalam Website
Sintak : <BGSOUND loop=infite Src=”d:/Selamat datang.WAV”>

Cari di PC Anda aplikasi NotePad (seharusnya ada). Kemudian ketik sama persis dengan yang di bawah ini (Saya harap Anda tidak melakukan copy & paste. Kalo Anda lakukan itu, percuma dong belajar nulis HTML?)

<HTML>

<HEAD>

<TITLE>Belajar menulis dengan HTML</TITLE>

</HEAD>

<BODY>

<H1>Selamat Datang</H1>

<HR>

<P>Ini adalah halaman web pertama saya. Hore... Saya bisa!!</P>

<HR>

</BODY>

</HTML>

Jika sudah, simpan itu di folder Anda dengan pilihan:
File Name : contoh.html
Save as type: All files
Klik ganda pada file yang sudah Anda buat tadi. Maka seharusnya halaman web Anda tampil seperti ini:

belajar cara membuat website. Oleh:Widodo Purnomosidi

Untuk menuliskan paragraf-paragraf Anda, awali selalu dengan tag <P> dan tutup dengan </P>. Jika Anda ingin meng-editnya, cukup klik kanan pada file html Anda, point to open with, pilih NotePad. Sebagai bahan untuk belajar buat Anda, masih pada halaman ini, silahkan ketik CTRL + U – jika Anda menggunakan Mozila FireFox, atau pilih menu View kemudian Source – jika Anda menggunakan IE.
Cara Membuat Link atau Navigasi
Edit dengan NotePad file contoh.html kemudian tambahkan isi sebagai berikut:

<HTML>

<HEAD>

<TITLE>Belajar menulis dengan HTML</TITLE>

</HEAD>

<BODY>

<H1>Selamat Datang</H1>

<HR>

<P><a href="contoh.html">Home</a> | <a  href="contoh2.html">Halaman 2</a> | <a  href="contoh3.html">Halaman 3</a></P>

<HR>

<P>Ini adalah paragraf pertama dari halaman homepage. Belajar HTML  itu mudah dan tidak susah apalagi harus pake kursus, ngga banget lah  yah...</P>

</BODY>

</HTML>

Jika Sudah, klik SAVE. Masih pada jendela NotePad yang sama, ubah paragraf Anda dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh2.html. Jangan ditutup dulu, ubah lagi paragraf Anda untuk menandakan itu halaman ke-tiga dengan kaliman Anda sendiri, kemudian SAVE AS sebagai contoh3.html.
Sekarang buka salah satu file HTML Anda kemudian coba klik pada navigasi / link yang baru Anda buat. Jika link Anda bekerja, selamat! Anda telah menjadi seorang webmaster. Perlu belajar lagi untuk membuat situs yang lebih menawan tampilannya. Untuk itu, besok ke sini lagi yah..!

MENGGUNAKAN GAMBAR SEBAGAI BACKGROUND

Pada pelajaran-pelajaran yang terdahulu, kita sudah mempelajari cara menggunakan warna sebagai latar
belakang halaman web. Sekarang kita akan mempelajari cara menggunakan gambar sebagai latar belakang.
Untuk warna, kita menggunakan atribut BGCOLOR=”warna”, sedangkan untuk gambar, kita menggunakan
atribut BACKGROUND=”file_gambar”. Kedua atribut ini disisipkan dalam tag BODY. Sangat mudah,
bukan? Misalnya kita ingin memanfaatkan gambar email.gif tadi sebagai latarbelakang halaman web maka
cukup dengan menyisipkan atribut tersebut ke dalam tag BODY seperti di bawah ini:
<HTML><HEAD><TITLE>Latarbelakang Gambar</TITLE>

<H1><FONT COLOR=”yellow”>Maaf, ini hanya contoh, jadi tulisannya tidak serasi dengan

latarbelakangnya</FONT></H1>

</BODY></HTML>

MENGGUNAKAN GAMBAR SEBAGAI LINK

Masih ada satu lagi fungsi gambar. Gambar juga dapat digunakan sebagai link. Pada prinsipnya untuk

membuat link gambar sama saja dengan membuat link teks. Kita tinggal mengganti teks yang bertindak
sebagai link itu dengan tag penyisipan gambar (IMG SRC). Misalnya kita punya link seperti ini: email kami.
Kode HTML dari link ini adalah:

<A HREF=”mailto:adifitrah@maktoob.com”>email kami</A>

Untuk membuat link gambar, kita tinggal mengganti tulisan email kami dengan tag penyisip gambar yaitu

<IMG SRC=”email.gif”>. Sehingga lengkapnya tertulis:

MEMBUAT TABEL

Setiap tabel minimal tersusun dari tiga tag dasar yaitu tag <TABLE> yang menandai sebuah tabel, tag <TR>
yang membentuk baris dan tag <TD> yang membentuk kolom. Masing-masing tag tersebut harus memiliki
tag penutup. <TABLE>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Susunan tag-tag di atas memerintahkan kepada browser untuk menampilkan sebuah tabel yang terdiri dari

satu baris dan satu kolom yang diisi dengan tulisan: kolom 1 dari baris 1. kolom 1 dari baris 1

Mana tabelnya? Sesungguhnya, tabelnya ada, hanya saja tanpa bingkai (border). Ternyata, secara default,
tabel menggunakan nilai border = 0 (nol) alias tanpa bingkai. Jadinya yang tampak hanya tulisan semata.
Untuk membuat bingkai dari tabel tersebut, kita harus menyertakan atribut BORDER. <TABLE
BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
</TR>
</TABLE>

Sehingga tabelnya tampak sebagai berikut:kolom 1 dari baris 1

Silakan coba sendiri mengganti ukuran bingkai menjadi 2, 3 dan seterusnya lalu bandingkan hasilnya.
Sekarang mari kita membagi tabel sebaris tersebut menjadi dua kolom. Artinya kita menambah sepasang tag
TD lagi.<TABLE BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
</TABLE>

Beginilah hasilnya dalam browser:

kolom 1 dari baris 1

kolom 2 dari baris 1

Nah, bila anda ingin menambah sekian baris ke bawah, cukup menyalin ulang dari tag <TR> sampai </TR>.
Sorot (blok) dari tag <TR> hingga </TR> lalu Copy (Ctrl+C). Tempatkan kursor di bawah tag </TR> lalu
Paste (Ctrl+V). Sekian baris yang ingin anda buat, sekian kali pula anda harus menyalinnya (melakukan
perintah Paste). Setelah itu tinggal meng-edit tulisan sesuai keinginan anda. Begini contohnya: <TABLE
BORDER=1>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Tampilannya dalam browser menjadi:kolom 1 dari baris 1

kolom 2 dari baris 1

kolom 1 dari baris 2

kolom 2 dari baris 2

Setelah atribut BORDER, atribut selanjutnya yang perlu kita ketahui adalah atribut CELLSPACING yang
mengatur jarak antar sel dan CELLPADDING yang mengatur jarak antara sel dan tulisan di dalamnya.
Misalnya:<TABLE BORDER=1 CELLSPACING=10>
<TR>
<TD>kolom 1 dari baris 1</TD>
<TD>kolom 2 dari baris 1</TD>
</TR>
<TR>
<TD>kolom 1 dari baris 2</TD>
<TD>kolom 2 dari baris 2</TD>
</TR>
</TABLE>

Dengan penambahan atribut CELLSPACING=10 dalam tag TABLE berarti akan dihasilkan sebuah tabel