materi html viii rsbi - be your self | selalu ... html 2 b. struktur dokumen html secara sederhana...
TRANSCRIPT
Dasar-dasar HTML i
Dasar-dasar HTML 1
A. SEJARAH HTMLp Hypertext Markup Language (HTML) adalah bahasa yang digunakan
untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993).
HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada bulan Januari 1997.
HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember 1997).
B. DASAR-DASAR HTML
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman, karena sifatnya yang hanya memberikan tanda (Marking Up) pada suatu dukumen teks dan bukan sebagai program. HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya.
Mendesain HTML dapat dilakukan dengan dua cara:
1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML, seperti notepad.
Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi, harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan dipelajari, karena dengan cara itulah akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.
Dasar-dasar HTML 2
B. STRUKTUR DOKUMEN HTML Secara sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML diapit
oleh tag awal <HTML> dan tag akhir </HTML>. Standar penulisannya adalah:
<HTML> <HEAD> Deskrisi dokumen </HEAD> <BODY> Isi dokumen </BODY> </HTML>
Contoh:
<HTML> <HEAD> <TITLE>Selamat datang di Homepage Saya</TITLE> </HEAD> <BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY> </HTML>
Dari Struktur dasar HTML dapat dijelaskan : Tag : 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.
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 : <p> <b> …… </b> </p>
Contoh penulisan tag yang salah: <p> <b> …… </p> </b>
Dasar-dasar HTML 3
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"> Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB Hexadecimal Color #FF0000 Red #00FF00 Green #0000FF Blue #000000 Black #FFFFFF White
Element HTML
: Menyatakan pada browser bahwa dokumen Web yang digunakan adalah HTML. Sintaks: <html> …....... </html>
Element Head
: Merupakan kepala dari dokumen HTML. Tag <head> dan tag </head> terletak di antara tag <html> dan tag </html>. Sintaks: <head> …........ </head>
Elemet 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>
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
Dasar-dasar HTML 4
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.
Contoh Sederhana : Gunakan teks editor misalkan "Notepad" untuk menyunting dan menyimpan script latihan di bawah ini.
<HTML> <HEAD> <TITLE>Latihan HTML</TITLE> </HEAD> <BODY> Saya belajar HTML, harus semangat! Pasti BI SA! </BODY> </HTML>
Simpan dengan format html, seperti di bawah ini :
Gambar 1. Menyimpan hasil ketikan Untuk melihat hasilnya, silakan jalankan browser pilihan yang digunakan, seperti contoh di bawah ini digunakan MozilaFirefox.
Gambar 2. Hasil Ketikan di Browser
Dasar-dasar HTML 5
C. HTML FORMAT TEXT 1) Heading
Heading pada HTML mengenal 6 level heading, mulai 1 (terbesar) sampai 6. Heading level 1 biasanya untuk judul utama. Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. Element ini mempunyai attribute yaitu align yang bernilai "left" , "center" , "right" yang menspesifikasikan posisi horizontal dari header (default: "left"). Contoh: <HTML> <HEAD> <TITLE>Headings</TITLE> </HEAD> <BODY> <H1>Heading Level 1</H1> <H2>Heading Level 2</H2> <H3>Heading Level 3</H3> <H4>Heading Level 4</H4> <H5>Heading Level 5</H5> <H6>Heading Level 6</H6> </BODY> </HTML>
Gambar 3. Heading pada HTML
2) Paragraf
Untuk membuat paragraf digunakan tag <P>. Setelah tag <P>, bisa menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P> . Mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata tengah dan RIGHT untuk rata kanan.
Dasar-dasar HTML 6
Contoh: <HTML> <HEAD> <TITLE>Paragraf</TITLE> </HEAD> <BODY> <P ALIGN="right">
Pernah mendengan istilah browsing atau nge-browsing ? Seperti telah disampaikan pada materi sebelumnya bahwa internet d apat diibaratkan sebagai sebuah perkampungan maya. Anda dapat memasu ki dan berkeliling atau menjelajahi perkampungan tersebut untuk menget ahui segala apa yang ada. Kegiatan menjelajahi kampung internet ser ing disebut dengan istilah browsing.Anda dapat menjelajahi berbagai ma cam informasi yang ada dengan browsing .
<P ALIGN="center"> Informasi di internet biasanya diletakkan pada berb agai halaman web yang menggunakan teknologi HTML yang berupa kode-ko de yang dapat dibaca oleh komputer yang dilengkapi program browse r. Dengan demikian browser berfungsi untuk menterjemahkan kode-kode HT ML ke dalam sebuah halaman web. Banyak browser yang dapat digunakan un tuk membaca HTML namun yang paling umum digunakan adalah Netscape Na vigator dan Internet Explorer.
<P ALIGN="left"> Internet Explorer adalah browser yang disertakan de ngan sistem operasi windows,maka ketika menginstalasi windows internet explorer terinstalkan. Bagaimana jika Anda ingin menggunakan Netscape Navigator? Tentu harus meng-installnya sendiri seca ra terpisah.
</P> </BODY> </HTML>
Gambar 4. Paragraf pada HTML
Dasar-dasar HTML 7
3) Format Text Physical Formatting Element B berfungsi untuk membuat tampilan teks tercetak tebal (bold). <b> atau <strong> Element I berfungsi untuk membuat tampilan teks tercetak miring (italic). <i> atau <em> Element U berfungsi untuk membuat tampilan teks tercetak garis bawah (underline). <u> atau <ins> Contoh: <HTML> <HEAD> <TITLE>BOLD ITALIC UNDERLINE</TITLE> </HEAD> <BODY> <P>
<B> Pernah mendengan istilah browsing atau nge-browsing ? Seperti telah disampaikan pada materi sebelumnya bahwa internet d apat diibaratkan sebagai sebuah perkampungan maya.
</B> <P ALIGN="center">
<I> Informasi di internet biasanya diletakkan pada berb agai halaman web yang menggunakan teknologi HTML yang berupa kode-ko de yang dapat dibaca oleh komputer yang dilengkapi program browse r.
</I> <P ALIGN="left">
<U> Internet Explorer adalah browser yang disertakan de ngan sistem operasi windows,maka ketika menginstalasi windows i nternet explorer terinstalkan.
</U> </P> </BODY> </HTML>
Gambar 5. Bold, Italic, Underline pada HTML
Dasar-dasar HTML 8
Element BIG berfungsi untuk membuat ukuran text lebih besar dari normal, <big> Element SMALL berfungsi untuk membuat ukuran text lebih kecil dari norma, <small> Element STRIKE/DEL berfungsi untuk member garis di tengah text/text dicoret, <strike> Element SUP berfungsi untuk memformat text menjadi superscript text, <sup> Element SUB berfungsi untuk memformat text menjadi subscript text, <sub> Contoh:
<HTML> <HEAD> <TITLE>BIG SMALL STRIKE SUP SUB</TITLE> </HEAD> <BODY> <P> text ukuran biasa <P> <BIG>text besar</BIG> <P> <SMALL>text kecil</SMALL> <P> <STRIKE>text dicoret</STRIKE> <P> text ukuran biasa <SUP>text superscript</SUP> <P> text ukuran biasa <SUB>text subscript</SUB> </P> </BODY> </HTML>
Gambar 6. Big, Small, Strike, Sup, Sub pada HTML
Dasar-dasar HTML 9
4) Extended Quatations/Blockquote Perintah tag <BLOCKQUOTE> digunakan untuk menulis kutipan teks panjang. Dengan perintah ini browser akan menampilkan teks menjorok ke dalam (meng-identasi teks). Contoh: <HTML> <HEAD> <TITLE>BLOCKQUOTE</TITLE> </HEAD> <BODY> <H3>Browsing</H3>
<BLOCKQUOTE> Informasi di internet biasanya diletakkan pada berb agai halaman web yang menggunakan teknologi HTML yang be rupa kode-kode yang dapat dibaca oleh komputer yang dilengkap i program browser.
</BLOCKQUOTE> </BODY> </HTML>
Gambar 7. Blockquote pada HTML
5) Preformatted Text
Preformatted Text (PRE) digunakan untuk menampilkan teks sama seperti yang diketikkan dalam dokumen HTML. Browser akan menampikan teks tersebut dalam font monospaced, yaitu seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks (misalnya telnet).
Dasar-dasar HTML 10
Contoh: <HTML> <HEAD> <TITLE>Preformatted Text</TITLE> </HEAD> <BODY>
<PRE> Informasi di internet biasanya diletakkan pada berb agai halaman web yangmenggunakan teknologi HTML yang berupa kode -kode yang dapat dibaca oleh komputer yang dilengkapi program browser.
</PRE> </BODY> </HTML>
Gambar 8. Preformatted pada HTML
6) Begin Row (BR)/Line Break
Tag ini digunakan untuk menulis teks pada baris berikutnya atau berfungsi untuk ganti baris. Tag <BR> membuat baris baru tanpa memberi baris kosong di bawahnya. Element BR ini tidak mempunyai tag penutup. Contoh: <HTML> <HEAD> <TITLE>Begin Row</TITLE> </HEAD> <BODY>
<P> Banyak cara yang dapat digunakan untuk melakuka n instalasi FreeBSD. Namun ada tiga cara yang paling sering dil akukan ,yaitu: <BR>Instalasi melalui FTP <BR>Instalasi melalui CDROM <BR>Instalasi melalui partisi DOS
</BODY> </HTML>
Dasar-dasar HTML 11
Gambar 9. Begin Row pada HTML
7) 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>
Gambar 10. Ukuran Font pada HTML
Dasar-dasar HTML 12
8) 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 Internet <P> <FONT FACE = "Verdana">Verdana , contoh Jaringan Ko mputer <P> <FONT FACE = "Times New Roman">Times New Roman, con toh Akses Internet <P> <FONT FACE = "Courier New">Courier New, contoh Inte rnet Service Provider <P>
</BODY> </HTML>
Gambar 11. Jenis Font pada HTML
9) Horizontal Rule
Element HR berfungsi untuk membuat suatu garis horizontal. Element ini tidak mempunyai tag penutup dan mempunyai attribute align untuk menempatkan posisi secara horizontal ("left", "center", "right"), size untuk ukuran ketebalan garis ("pixel"), width untuk ukuran panjang garis ("persen"), dan noshade (garis solid). Sintaks: <hr align="left"|"center"|"right" size="pixel" widt h="persen" noshade>
Contoh:
<HTML> <HEAD> <TITLE>Latihan HR</TITLE> </HEAD> <BODY> <hr align="left" size="10" width="30%"> <hr align="left" size="10" width="30%" noshade > </BODY> </HTML>
Dasar-dasar HTML 13
Gambar 12. HR pada HTML
10) Element DL, DD, & DT Penggunaan tag <DL>, <DT>, <DD> untuk menampilkan daftar khusus dengan tampilan menjorok ke kanan. Contoh: <HTML> <HEAD> <TITLE>Daftar Definisi</TITLE> </HEAD> <BODY> <B>Kamus Teknologi Informasi:</B> <DL> <DT>HTML</DT> <DD>Bahasa yang digunakan untuk menyusun Web< /DD> <DT>HTTP</DT> <DD>Protokol yang dipakai untuk mentransfer H TML</DD> </DL> </BODY> </HTML>
Gambar 13. DL, DT, & DD pada HTML
Dasar-dasar HTML 14
11) Base Font Element BASEFONT berfungsi untuk merubah dasar ukuran huruf tampilan dari web browser. Attribute dari element ini adalah size yang merupakan ukuran huruf dengan nilai "1" sampai dengan "7" pixel, atau berupa ukuran relatif ( + atau - ), default nya adalah "3" pixel. Element ini tidak mempunyai tag penutup. Contoh:
<HTML> <HEAD> <TITLE>Latihan Base Font</TITLE> </HEAD> <BODY>
<BASEFONT size="1">Teks ini mempunyai size=1<BR> <BASEFONT size="2">Teks ini mempunyai size=2<BR> <BASEFONT size="3">Teks ini mempunyai size=3<BR> <BASEFONT size="4">Teks ini mempunyai size=4<BR> <BASEFONT size="5">Teks ini mempunyai size=5<BR> <BASEFONT size="6">Teks ini mempunyai size=6<BR> <BASEFONT size="7">Teks ini mempunyai size=7
</BODY> </HTML>
Gambar 14. Base Font pada HTML
Dasar-dasar HTML 15
12) Font Color 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">INTERNET<P> <FONT COLOR = "#FF0000">AKSES INTERNET<P> <FONT COLOR = "#00FF00">INTERNET SERVICE PROVIDER<P > <FONT COLOR = "#00FF00">INTERNET SERVICE PROVIDER<P >
</BODY> </HTML>
Gambar 15. Font Color pada HTML
Dasar-dasar HTML 16
D. HTML DAFTAR URUTAN 1) Element OL (Ordered List/Numbering)
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI. Sintaks: <ol start="number" type="A"|"a"|"I"|"i"|"1"> ........................ </ol>
2) Element UL (Unordered List/Bullet) Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle/lingkaran", "square/kotak" dan "disc/titik" . Dalam element UL harus terdapat beberapa element LI. Sintaks: <ul type="circle"|"square"|"disc"> .......................... </ul>
3) Element LI (List Item) Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type. Sintaks: <li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"dis c"> .......................... </li>
Contoh:
<HTML> <HEAD> <TITLE>Latihan Daftar List</TITLE> </HEAD> <BODY> Mata Pelajaran SMP <OL> <LI>Bahasa Inggris</LI> <LI>Bahasa Indonesia</LI> <LI>Matematika</LI> <LI>Agama</LI> <LI>PKN</LI> <LI>IPS</LI> </OL> <UL> <LI>IPA</LI> <LI>TIK</LI> <LI>Seni Budaya</LI> <LI>Bahasa Bali</LI> <LI>Budi Pekerti</LI> <LI>Penjas</LI> </UL> </BODY> </HTML>
Dasar-dasar HTML 17
Gambar 16. Daftar Urutan pada HTML
Dasar-dasar HTML 18
E. HTML TABEL 1) Element Table
Element TABLE befungsi untuk membuat suatu data multidimensi yang terdiri atas kolom dan baris. Element ini mempunyai attribute seperti align, bgcolor, border, cellpadding (jarak antara tepi sel dengan isi sel), cellspacing (jarak antara sel), width (lebar tabel), height (tinggi tabel). Element TABLE berisikan element CAPTION, TH, TR dan TD. Sintak: <table align="left"|"center"|"right" bgcolor="color" border="pixel" cellpadding="pixel" cellspacing="pixel" width="pixel"|"%" height="pixel"|"%" > ........................ </table>
2) Element Caption Element CAPTION berfungsi untuk membuat judul dari tabel. Element ini harus berada di dalam element TABLE dan mempunyai attribute align dengan nilai top (judul terletak di atas tabel), dan bottom (judul terletak di bawah tabel). Sintaks: <caption align="top"|"bottom"> .......................... </caption>
3) Element TR Element TR mendefinisikan baris pada tabel dan element ini harus berada di dalam element TABLE. Pada element TR terdapat element TH dan TD. Attribute yang terdapat pada element ini adalah align, valign (posisi vertikal), dan bgcolor. Sintaks: <tr align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color"> .......................... </tr>
4) Element TH dan TD Element TH dan TD merupakan informasi pada tabel. TH mendefinisikan isi sel sebagai header sel pada kolom tabel dan datanya tercetak tebal dan dengan posisi ditengah sel. Element TH dan TD ini harus terletak di dalam element TR. Attribute kedua element ini adalah align, valign, bgcolor, colspan, rowspan.
Dasar-dasar HTML 19
Sintaks: <th align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color" colspan="number" rowspan="number"> </th> <td align="left"|"center"|"right" valign="top"|"middle"|"bottom" bgcolor="color" colspan="number" rowspan="number"> </td>
Contoh: <HTML> <HEAD> <TITLE>Latihan Table</TITLE> </HEAD> <BODY> <TABLE ALIGN="center" border="2" bgcolor="cyan " cellpadding="5"
cellspacing="0" > <CAPTION ALIGN="top"><b>Tabel 1.1</b></CAPTION>
<TR> <TH>No.</TH> <TH>Nama</TH>
</TR> <TR>
<TD>1.</TD> <TD>Artha Bagus</TD>
</TR> <TR>
<TD>2.</TD> <TD>Komang Apel</TD>
</TR> <TR>
<TD>3.</TD> <TD>Putu Ayu</TD>
</TR> </TABLE>
</BODY> </HTML>
Gambar 17. Table pada HTML
Dasar-dasar HTML 20
Untuk menggabungkan cell dengan menggunakan tag <ROWSPAN> dan <COLSPAN>. Contoh penggunaannya bisa dilihat pada contoh di bawah ini. Atribut ROWSPAN ditempatkan pada tag <TD>. <HTML> <HEAD> <TITLE>Penggunaan ROWSPAN</TITLE> </HEAD> <BODY> <TABLE BORDER = "1"> <CAPTION>Jaringan Komputer</CAPTION> <TR> <TD ROWSPAN = "5">Perangkat Keras</TD> <TD>Komputer Server</TD> </TR> <TR><TD>Komputer Client</TD></TR> <TR><TD>Kabel</TD></TR> <TR><TD>Hub</TD></TR> <TR><TD>Repeater</TD></TR> </TABLE> </BODY> </HTML>
Gambar 18. Penggunaan Rowspan pada HTML
Atribut COLSPAN bisa ditempatkan pada tag <TD> atau <TH>. <HTML> <HEAD> <TITLE>Penggunaan COLSPAN</TITLE> </HEAD> <BODY> <TABLE BORDER = "1"> <CAPTION>Akses Internet</CAPTION> <TR> <TH COLSPAN = "2">Software Akses Internet</TH > </TR> <TR> <TD>Browser</TD> <TD>Mozila</TD> </TR> <TR> <TD></TD> <TD>Internet Explorer</T D> </TR> <TR> <TD>Utility</TD> <TD>Yahoo Mesangger</TD> </TR> <TR> <TD>Anti Virus</TD> <TD>Karpesky</TD> </TR> </TABLE> </BODY> </HTML>
Dasar-dasar HTML 21
Gambar 19. Penggunaan Colspan pada HTML
Dasar-dasar HTML 22
F. HTML IMAGE (GAMBAR) Element IMG Element IMG befungsi untuk menampilkan gambar. Element ini tidak mempunyai tag penutup dan mempunyai attribute yaitu align, alt (teks alternatif jika gambar tidak tampil), border, height, width, hspace (jarak kosong posisi horizontal, vspace (jarak kosong posisi vertikal), src (lokasi dari gambar itu disimpan beserta nama file-nya). Sintaks: <img align="left"|"right"|"top"|"middle"|"bottom" alt="text" border="pixel" width="pixel"|"%" height="pixel"|"%" hspace="pixel" vspace="pixel" src="uri">
Contoh : Di bawah ini sintak HTML untuk menampilkan gambar bernama k7.jpg dengan ukuran 159 x 175 pixel, dan dengan meletakkannya ditengah. <HTML> <HEAD> <TITLE>Latihan Tampil Gambar</TITLE> </HEAD> <BODY> <P ALIGN="CENTER"> <IMG width="159" height="175" src="k7.jpg"> </BODY> </HTML>
Gambar 20. Image/Gambar pada HTML
Dasar-dasar HTML 23
G. HTML HYPERLINK/LINK Element A Element A/perintah anchor <A> berfungsi untuk menghubungkan ke internal ataupun eksternal
halaman web atau digunakan untuk membuat suatu link. Element ini mempunyai attribute href, name, dan target. Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.
Untuk membuat link ke dokumen HTML lain digunakan perintah attribute tersebut, <A HREF =
“nama_dokumen”>Teks pada browser</A> . Link bisa dibuat dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A> . Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A> . Sintaks: <a href="uri" name="name" target="_blank"|"parent"| "_top"|"_self"> ........................... </a>
Contoh:
<HTML> <HEAD> <TITLE>Link</TITLE> </HEAD> <BODY>
<A NAME="lengkap">Pemain-pemain AC Milan menurut ab jad</A> <BLOCKQUOTE>
<P>Abbiati ,<A HREF="#abbiati">info lengkap</A> <P>Ayala <P>Ambrosini <P>Albertini <P>Boban <P> <A HREF="Latihan Sambung Link.html">kalo mau tahu l agi klik disini</A>
</BLOCKQUOTE> <P><A NAME="abbiati">Abbiati</A>
<BLOCKQUOTE> <P>Kiper ketiga timnas Italia runner up Euro 2000 <BR>Kiper utama U-21 juara Piala Eropa U-21 <BR>Kiper utama AC Milan juara Seri-A 1998-1999
/BLOCKQUOTE> <P><A HREF="#lengkap">kembali ke atas</A>
</BODY> </HTML>
Ket : No 1 � Link dibuat dalam sebuah dokumen HTML, jika di klik akan mengarah ke arah tanda
panah, karena sudah berisi indentitas sesuai dengan linknya. Ini sama halnya dengan no. 3 No 2 � Link dibuat untuk menyambung dokuman HTML yang lain, yaitu Latihan Sambung
Link.html
Dasar-dasar HTML 24
Gambar 21. Link pada HTML
Ket : No 1 � Ketika diklik akan tersambung atau menampilkan Abbiati tersebut (yang berisi
kotak), tetap pada satu dokumen HTML. No 2 � Ketika diklik akan tersambung halaman HTML yang lain, pada contoh tersebut
yaitu halaman HTML: Lanjut Link.html No 3 � Sama dengan no 1, link terdapat pada satu halaman HTML tersebut, yaitu
menampilkan pemain-pemain AC Milan
Dasar-dasar HTML 25
Dokumen HTML yang dilink, yaitu:
<HTML> <HEAD> <TITLE>Lanjut Link</TITLE> </HEAD> <BODY>
<BLOCKQUOTE> <P>Abbiati <P>Ayala <P>Ambrosini <P>Albertini <P>Boban <P> (Ini Coba Lanjut Link)
</BLOCKQUOTE> </BODY> </HTML>
Dasar-dasar HTML 26
H. HTML FORM 1) Element Form
Element FORM berfungsi untuk mendefinisikan form interaktif. Element ini mempunyai attribute yaitu action, dan method. Attribute action berisikan aksi terhadap form yang dikirim (URI) dan attribute method berisikan metode form melakukan proses pengiriman(GET/POST). Sintaks: <form action="action" method="GET"|"POST"> ........................... </form>
2) Element Input Element INPUT berfungsi untuk mendefinisikan input yang akan dimasukkan pengguna. Element ini mempunyai attribute yaitu name, size, type, value, checked. Attribute name mendefinisikan nama dari input kontrol form, attribute size mendefinisikan ukuran teks pada input kontrol, type mendefinisikan bentuk-bentuk input kontrol, value mendefinisikan nilai awal/reset/submit, checked mendefinisikan pilihan terpilih pada type radio/checkbox. Element ini tidak mempunyai tag penutup dan harus berada di dalam element FORM. Sintaks: <input name="name" size="number" type="text"|"checkbox"|"radio"|"submit"|" reset" value="value" checked >
3) Element Select Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION. Sintaks: <select name="name" size="number" multiple > ..................... </select>
4) Element Options Element OPTION mendefinisikan opsi pilihan pada menu SELECT. Element ini mempunyai attribute selected, dan value. Attribute selected opsi terpilih dan attribute value berisikan nilai element OPTION. Sintaks: <option selected value="number" > ..................... </option>
Dasar-dasar HTML 27
5) Element Textarea Element TEXTAREA berfungsi sebagai input kontrol form untuk memasukkan teks lebih dari satu baris. Element ini mempunyai attribute yaitu name, cols, rows. Attribute name mendefinisikan nama input kontrol form element textarea, attribute cols mendefinisikan jumlah kolom textarea yang terlihat, dan attribute rows mendefinisikan jumlah baris textarea yang terlihat. Element ini harus berada di dalam element FORM Sintaks: <textarea name="name" cols="number" rows="number" > ..................... </textarea>
Contoh: <HTML> <HEAD> <TITLE>Latihan Form</TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="mailto:teknisi@jardikna s.org"> <H4>FORM</H4> <INPUT TYPE="text" NAME="var1" SIZE="30" VALUE=" Enter your name here."> <BR><BR> <B>Are you a student?</B> <INPUT TYPE="checkbox" NAME="var2"> <BR><BR> <B>How old are you?</B> <BR> <INPUT TYPE="radio" NAME="var3" VALUE="r1">10 - 15 <BR> <INPUT TYPE="radio" NAME="var3" VALUE="r2">16 - 20 <BR> <INPUT TYPE="radio" NAME="var3" VALUE="r3">21 - 25 <BR><BR> <INPUT TYPE="submit" NAME="var4" VALUE="Send"> <INPUT TYPE="reset" NAME="var5" VALUE="Clear"> </FORM> </BODY> </HTML>
Dasar-dasar HTML 28
Gambar 22. Form pada HTML
Dasar-dasar HTML 29
I. HTML FRAME 1) Element Frameset
Element FRAMESET berfungsi untuk membagi isi jendela web browser menjadi beberapa bagian. Element ini mempunyai attribute yaitu cols (membagi jendela berdasarkan kolom), rows (membagi jendela berdasarkan baris), border , bordercolor, frameborder (untuk menampilkan border frame), dan framespacing (spasi antara frame). Element FRAMESET terletak di antara element HEAD dan BODY. Sintaks: <frameset cols="list" rows="list" border="pixel" bordercolor="color" frameborder="yes"|"no" framespacing="pixel"> ........................... </frameset>
2) Element Frame Element FRAME mendefinisikan frame yang terdapat dalam frameset. Element ini mempunyai attribute yaitu name (nama frame), marginheight, marginwidth, bordercolor, frameborder, noresize, scrolling, src (dokumen yang ditampilkan pada frame). Element ini tidak mempunyai tag penutup. Sintaks: <frame name="name" marginheight="pixel" maginwidth="pixel" bordercolor="color" frameborder="yes"|"no" noresize scrolling="yes"|"no" src="uri">
3) Element Noframe
Element NOFRAME mendefinisikan isi yang akan ditampilkan jika suatu frame tidak dapat diakses . Sintaks: <noframes> ..................... </noframes>
Dasar-dasar HTML 30
Contoh: <html> <head> <title>Latihan Frame</title> </head> <frameset cols="40%,60%"> <frame src="left.html"> <frame src="right.html"> </frameset> <body> </body> </html>
Gambar 23. Contoh 1 Frame pada HTML
<html> <head> <title>Latihan8-3</title> </head> <frameset cols="40%,*" border="10" bordercolor="red "> <frame src="left.html"> <frame src="right.html" marginheight="50" marginwid th="50"> </frameset> <body> </body> </html>
Gambar 24. Contoh 2 Frame pada HTML
Dasar-dasar HTML 31
SUMBER :
http://hans.polinpdg.ac.id/html/, Maret 2011 http://www.sejutablog.com/dasar-dasar-html, Maret 2011
Dasar-dasar HTML 32