logging in or signing up HTML pramudya Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 667 Category: Entertainment License: All Rights Reserved Like it (0) Dislike it (0) Added: December 05, 2008 This Presentation is Public Favorites: 0 Presentation Description HTML adalah suatu metoda untuk mengimple-mentasikan 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 Comments Posting comment... Premium member Presentation Transcript H T M L (HYPERTEXT MARKUP LANGUAGE ) : H T M L (HYPERTEXT MARKUP LANGUAGE ) suatu metoda untuk mengimple-mentasikan 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 H T M L : 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. Slide 3: 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 dan segala bahasa pemrograman WEB. Slide 4: Contoh Bahasa Pemrograman Web, antara lain: 1. Java 2. JavaScript 3. DHTML 4. Dreamweaver 5. Frontpages, dll Apa itu Website ??? : 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 Dimana kita bisa menulis perintah-perintah HTML??? : Dimana kita bisa menulis perintah-perintah HTML??? Kita bisa menulis perintah-perintah HTML dengan menggunakan Notepad, CuteHTML, dll Slide 7: Apa kelebihan CuteHTMIL 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 Applet3. Sewaktu menuliskan kode-kode HTML ada menu dan toolbar bantuan Hasil rancangan yang sudah jadi (dibuat pakai CuteHTML) trus diapain ??? : 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??? : 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??? : 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 : : Tampilan layar CuteHTML : STRUKTUR DASAR PENULISAN HTML : : STRUKTUR DASAR PENULISAN HTML : <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML> KETERANGAN : KETERANGAN Penulisan HTML diawali dengan tag pembuka dan tag penutup (ada juga beberapa tag HTML yang tidak memerlukan tag penutup, misal tag untuk pengaturan paragraf)Contoh: <B>Pasar Turi</B> KETERANGAN : KETERANGAN <HTML></HTML>Kedua tag diatas berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML KETERANGAN : KETERANGAN <HEAD><TITLE>teks</TITLE></HEAD>Head = digunakan untuk menulis keterangan tentang document web Title = untuk memberi judul di windows browser KETERANGAN : 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 : BEBERAPA TAG HTML <P>…text… = membuat paragraf baru dengan satu baris kosong2.<BR>…text… = membuat paragraf baru tanpa baris kosong3. <Pre>…text…</Pre> = membuat teks dicetak apa adanya4. <B>…text…</B>= membuat teks dicetak tebal5. <I>…text…</I>= membuat teks dicetak miring Slide 18: 6. <U>…text…</U>= membuat teks dicetak bergaris bawah7. <S>…text…</S>= membuat teks dicoret8. <BIG>…text…</BIG>= membuat teks dicetak lebih besar9. <SMALL>…text…</SMALL>= membuat teks dicetak lebih kecil10. <EM>…text…</EM>= membuat teks dicetak mode Empesize11. <TT>…text…</TT>= membuat teks dicetak dengan font Typewriter Slide 19: <STRONG>…text…</STRONG>= membuat teks dicetak lebih terang13. <BLINK>…text…</BLINK>= membuat teks dicetak berkedip14. <SUB>…text…</SUB>= membuat teks Subcript15. <SUP>…text…</SUP>= membuat teks Supercript16. <Hy>…text…</Hy> (y=tingkat heading dari 1 – 6) = membuat heading / judul hingga sub judul. Slide 20: <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 Slide 21: 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 huruf19.<BASEFONT Size=“ukuran” Color=“Warna” Face=“jenis huruf”>….Teks….</FONT> Hampir sama dengan FONT tapi berlaku untuk semua document Slide 22: 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 Slide 23: <OL Type=“type nomor” Start=“angka”><LI> ….Teks….</LI></OL> Utk membuat daftar urutan bertype angka. Type utk bentuk angka, Start utk angka awal23. <IMG SRC=“nama File gambar” Height=“tinggi” Width=“Lebar” Align=“left/right” Border=“ukuran border” untuk menyisip gambar Slide 24: 24.<A Href=“Lokasi dokumen tujuan”> ……Nama Link….</A> Utk membuat link ke dokumen tertentu25. <DL><DT>…Text…</DT><DD> …Text…</DD></DL> Digunakan utk membuat daftar istilah DT = Definition Term DD = Definition Data Slide 25: 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 Slide 26: 27.<BODY BGground=“nama gambar”> Digunakan untuk mengatur background document dengan gambarContoh :<BODY BGground=“sphink,bmp”> Slide 27: 27.Buat tabel<HTML><HEAD><TITLE>….teks… </TITLE></HEAD><BODY><TABLE><TR><TD> baris 1, kolom 1</TD></TR></TABLE></BODY></HTML> Slide 28: 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) Slide 29: 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> Slide 30: <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> Slide 31: <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 ??? : ANY QUESTION ??? You do not have the permission to view this presentation. In order to view it, please contact the author of the presentation.
HTML pramudya Download Post to : URL : Related Presentations : Share Add to Flag Embed Email Send to Blogs and Networks Add to Channel Uploaded from authorPOINT lite Insert YouTube videos in PowerPont slides with aS Desktop Copy embed code: (To copy code, click on the text box) Embed: URL: Thumbnail: WordPress Embed Customize Embed The presentation is successfully added In Your Favorites. Views: 667 Category: Entertainment License: All Rights Reserved Like it (0) Dislike it (0) Added: December 05, 2008 This Presentation is Public Favorites: 0 Presentation Description HTML adalah suatu metoda untuk mengimple-mentasikan 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 Comments Posting comment... Premium member Presentation Transcript H T M L (HYPERTEXT MARKUP LANGUAGE ) : H T M L (HYPERTEXT MARKUP LANGUAGE ) suatu metoda untuk mengimple-mentasikan 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 H T M L : 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. Slide 3: 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 dan segala bahasa pemrograman WEB. Slide 4: Contoh Bahasa Pemrograman Web, antara lain: 1. Java 2. JavaScript 3. DHTML 4. Dreamweaver 5. Frontpages, dll Apa itu Website ??? : 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 Dimana kita bisa menulis perintah-perintah HTML??? : Dimana kita bisa menulis perintah-perintah HTML??? Kita bisa menulis perintah-perintah HTML dengan menggunakan Notepad, CuteHTML, dll Slide 7: Apa kelebihan CuteHTMIL 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 Applet3. Sewaktu menuliskan kode-kode HTML ada menu dan toolbar bantuan Hasil rancangan yang sudah jadi (dibuat pakai CuteHTML) trus diapain ??? : 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??? : 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??? : 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 : : Tampilan layar CuteHTML : STRUKTUR DASAR PENULISAN HTML : : STRUKTUR DASAR PENULISAN HTML : <HTML><HEAD><TITLE></TITLE></HEAD><BODY></BODY></HTML> KETERANGAN : KETERANGAN Penulisan HTML diawali dengan tag pembuka dan tag penutup (ada juga beberapa tag HTML yang tidak memerlukan tag penutup, misal tag untuk pengaturan paragraf)Contoh: <B>Pasar Turi</B> KETERANGAN : KETERANGAN <HTML></HTML>Kedua tag diatas berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML KETERANGAN : KETERANGAN <HEAD><TITLE>teks</TITLE></HEAD>Head = digunakan untuk menulis keterangan tentang document web Title = untuk memberi judul di windows browser KETERANGAN : 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 : BEBERAPA TAG HTML <P>…text… = membuat paragraf baru dengan satu baris kosong2.<BR>…text… = membuat paragraf baru tanpa baris kosong3. <Pre>…text…</Pre> = membuat teks dicetak apa adanya4. <B>…text…</B>= membuat teks dicetak tebal5. <I>…text…</I>= membuat teks dicetak miring Slide 18: 6. <U>…text…</U>= membuat teks dicetak bergaris bawah7. <S>…text…</S>= membuat teks dicoret8. <BIG>…text…</BIG>= membuat teks dicetak lebih besar9. <SMALL>…text…</SMALL>= membuat teks dicetak lebih kecil10. <EM>…text…</EM>= membuat teks dicetak mode Empesize11. <TT>…text…</TT>= membuat teks dicetak dengan font Typewriter Slide 19: <STRONG>…text…</STRONG>= membuat teks dicetak lebih terang13. <BLINK>…text…</BLINK>= membuat teks dicetak berkedip14. <SUB>…text…</SUB>= membuat teks Subcript15. <SUP>…text…</SUP>= membuat teks Supercript16. <Hy>…text…</Hy> (y=tingkat heading dari 1 – 6) = membuat heading / judul hingga sub judul. Slide 20: <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 Slide 21: 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 huruf19.<BASEFONT Size=“ukuran” Color=“Warna” Face=“jenis huruf”>….Teks….</FONT> Hampir sama dengan FONT tapi berlaku untuk semua document Slide 22: 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 Slide 23: <OL Type=“type nomor” Start=“angka”><LI> ….Teks….</LI></OL> Utk membuat daftar urutan bertype angka. Type utk bentuk angka, Start utk angka awal23. <IMG SRC=“nama File gambar” Height=“tinggi” Width=“Lebar” Align=“left/right” Border=“ukuran border” untuk menyisip gambar Slide 24: 24.<A Href=“Lokasi dokumen tujuan”> ……Nama Link….</A> Utk membuat link ke dokumen tertentu25. <DL><DT>…Text…</DT><DD> …Text…</DD></DL> Digunakan utk membuat daftar istilah DT = Definition Term DD = Definition Data Slide 25: 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 Slide 26: 27.<BODY BGground=“nama gambar”> Digunakan untuk mengatur background document dengan gambarContoh :<BODY BGground=“sphink,bmp”> Slide 27: 27.Buat tabel<HTML><HEAD><TITLE>….teks… </TITLE></HEAD><BODY><TABLE><TR><TD> baris 1, kolom 1</TD></TR></TABLE></BODY></HTML> Slide 28: 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) Slide 29: 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> Slide 30: <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> Slide 31: <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 ??? : ANY QUESTION ???