H T M L (HYPERTEXT MARKUP LANGUAGE ) suatu metoda untuk mengimple-mentasikan konsep hypertext dalam suatu naskah atau dokumen supaya bisa ditampilkan di web browser. sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program Catatan : Perintah dalam HTML dikenal dgn istilah Tag <X>. Ada tag buka <X> dan tag tutup </X>
H T M L 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. HTML Walaupun HTML itu sendiri belum dapat dikategorikan sebagai bahasa pemrograrnan WEB. Tetapi HTML merupakan dasar dari segala bahasa pemrograman WEB.
Contoh Bahasa Pemrograman Web, antara lain: 1. Java 2. JavaScript 3. DHTML 4. Dreamweaver 5. Frontpages, 6. Adobe GoLive, dll
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
YANG DIBUTUHKAN UNTUK MENDESAIN WEBSITE 1. Hardware - Komputer PC / Laptop 2. Software - Text Editor (Cute HTML / Cute HTML pRO 6/ Notepad / Notepad ++ / vi / emacs, bahasa pemrograman web,dsb) - Web Browser (Internet Explorer /Opera/ FireFox, dsb)
Apa kelebihan CuteHTML dibanding-kan program editor lain 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 : Area Navigation Pane Status bar Tag toolbar Main toolbar Menu Bar Tombol Control Tampilan
STRUKTUR DASAR PENULISAN HTML : <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
KETERANGAN Penulisan HTML diawali dengan tag pembuka <x> dan tag penutup </x>. Contoh: <B>Pasar Turi</B> ada juga beberapa tag HTML yang tidak memerlukan tag penutup, misal <p>,<br>, <Pre>, <input>, dsb
KETERANGAN <HTML> </HTML> Kedua tag diatas berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML
KETERANGAN <HEAD> <TITLE>teks</TITLE> </HEAD> Head = digunakan untuk menulis keterangan tentang document web Title = untuk memberi judul di windows browser
KETERANGAN <BODY> </BODY> body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page.
BEBERAPA TAG HTML <P>…text… = membuat paragraf baru dengan satu baris kosong 2.<BR>…text… = membuat paragraf baru tanpa baris kosong 3. <Pre>…text…</Pre> = membuat teks dicetak apa adanya 4. <B>…text…</B>= membuat teks dicetak tebal 5. <I>…text…</I>= membuat teks dicetak miring
6. <U>…text…</U>= membuat teks dicetak bergaris bawah 7 6. <U>…text…</U>= membuat teks dicetak bergaris bawah 7. <S>…text…</S>= membuat teks dicoret 8. <BIG>…text…</BIG>= membuat teks dicetak lebih besar 9. <SMALL>…text…</SMALL>= membuat teks dicetak lebih kecil 10. <EM>…text…</EM>= membuat teks dicetak mode Empesize 11. <TT>…text…</TT>= membuat teks dicetak dengan font Typewriter
<STRONG>…text…</STRONG>= <STRONG>…text…</STRONG>= membuat teks dicetak lebih terang 13. <BLINK>…text…</BLINK>= membuat teks dicetak berkedip 14. <SUB>…text…</SUB>= membuat teks Subcript 15. <SUP>…text…</SUP>= membuat teks Supercript 16. <Hy>…text…</Hy> (y=tingkat heading dari 1 – 6) = membuat heading / judul hingga sub judul.
<HR> atau <HR Width=“60%” Align=“Center” Size=“15” NOSHADE> digunakan untuk membuat garis horisontal, Width utk lebar garis, Align utk perataan garis, Size utk tinggi garis, NOSHADE tanpa garis tepi luar
18. <FONT Size=“ukuran”. Color=“Warna” Face=“jenis. huruf”>… 18. <FONT Size=“ukuran” Color=“Warna” Face=“jenis huruf”>….Teks….</FONT> Digunakan utk mengatur Font/huruf, Size utk ukuran, color utk warna, face utk jenis huruf 19.<BASEFONT Size=“ukuran” Color=“Warna” Face=“jenis huruf”>….Teks….</FONT> Hampir sama dengan FONT tapi berlaku untuk semua document
20. <MARQUEE Bgcolor=“warna”. Direction=“left/right” 20 .<MARQUEE Bgcolor=“warna” Direction=“left/right” Behavior=“scroll/slide/alternate” …Text….</MARQUEE> Utk membuat teks berjalan, Bgcolor utk warna latar belakang, Direction utk arah gerak teks, Behavior utk prilaku gerak teks 21. <UL Type=“disc/circle/square”><LI> ….Teks….</LI></UL> Untuk membuat daftar bertipe bullet
<OL Type=“type nomor”. Start=“angka”><LI>. …. Teks… <OL Type=“type nomor” Start=“angka”><LI> ….Teks….</LI></OL> Utk membuat daftar urutan bertype angka. Type utk bentuk angka, Start utk angka awal 23. <IMG SRC=“nama File gambar” Height=“tinggi” Width=“Lebar” Align=“left/right” Border=“ukuran border” untuk menyisip gambar
24. <A Href=“Lokasi dokumen tujuan”>. ……Nama Link…. </A> 24.<A Href=“Lokasi dokumen tujuan”> ……Nama Link….</A> Utk membuat link ke dokumen tertentu 25. <DL><DT>…Text…</DT><DD> …Text…</DD></DL> Digunakan utk membuat daftar istilah DT = Definition Term DD = Definition Data
26. <BODY BGCOLOR=“Warna” TEXT. =“Warna” LINK =“Warna” VLINK 26. <BODY BGCOLOR=“Warna” TEXT =“Warna” LINK =“Warna” VLINK =“Warna”> Digunakan untuk mengatur warna warna background document, TEXt utk warna teks, LINK utk warna link, VLINK utk warna link yg pernah dikunjungi
27. <BODY Background=“nama gambar”> 27.<BODY Background=“nama gambar”> Digunakan untuk mengatur background document dengan gambar Contoh : <BODY BackGround=“sphink.bmp”>
27. Buat tabel <HTML> <HEAD> <TITLE>… 27.Buat tabel <HTML> <HEAD> <TITLE>….teks… </TITLE> </HEAD> <BODY> <TABLE> <TR> <TD> baris 1, kolom 1</TD> </TR> </TABLE> </BODY> </HTML>
KETERANGAN : <TABLE>… KETERANGAN : <TABLE>….</TABLE> = untuk membuat tabel <TR>…</TR> = untuk mengisi/menulisi baris yang didalamnya (buat baris) <TD>…</TD> = untuk menampilkan data pada setiap sel (buat kolom)
27. Buat tabel <HTML> <HEAD> <TITLE>… 27.Buat tabel <HTML> <HEAD> <TITLE>….teks… </TITLE> </HEAD> <BODY> <TABLE BORDER=3> <TR> <TD> baris 1, kolom 1</TD> <TD> baris 1, kolom 2</TD> <TD> baris 1, kolom 3</TD> </TR> <TR> <TD> baris 2, kolom 1</TD> <TD> baris 2, kolom 2</TD> <TD> baris 2 ,kolom 3</TD> </TR> </TABLE> </BODY> </HTML>
<HTML> <HEAD> <TITLE>LATIHAN MEMBUAT TABEL</TITLE> </HEAD> <BODY> <CENTER><B>DAFTAR NILAI KOMPUTER</B></CENTER> <P> <TABLE BORDER=4> <TR> <TD ALIGN="CENTER">NO</TD> <TD ALIGN="CENTER">NAMA</TD> <TD ALIGN="CENTER">ALAMAT</TD> <TD ALIGN="CENTER">NILAI</TD> <TD ALIGN="CENTER">KETERANGAN</TD> </TR> <TR> <TD>1.</TD> <TD>AGUS PARYONO</TD> <TD>JL. VETERAN NO. 27 SURABAYA</TD> <TD ALIGN="CENTER">75</TD> <TD ALIGN="CENTER">BAIK</TD> </TR>
<TR> <TD>2 <TR> <TD>2.</TD> <TD>LIDWINA</TD> <TD>JL. PREGOLAN NO. 007 SIDOARJO</TD> <TD ALIGN="CENTER">50</TD> <TD ALIGN="CENTER">KURANG</TD> </TR> <TR> <TD>3.</TD> <TD>AMI KUSWANDINA</TD> <TD>JL. PEMUDA NO. 212 MALANG</TD> <TD ALIGN="CENTER">90</TD> <TD ALIGN="CENTER">SANGAT MEMUASKAN</TD> </TR> </TABLE> </BODY> </HTML>
ANY QUESTION ???