Scribd Logo
Unggah

Selamat datang di Scribd!

  • Web Pro

    Diunggah oleh

    amdtur79
    5 tayangan9 halaman
    pemrogrman web dasar

    Judul Asli

    web pro

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOC, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    pemrogrman web dasar

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    5 tayangan9 halaman

    Web Pro

    Diunggah oleh

    amdtur79
    pemrogrman web dasar

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOC, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 9

    Modul : Pemrograman Berbasis Internet (Web Programming)

    1. Struktur Dokumen
    Syarat perlu mempelajari suatu bahasa pemrograman adalah mengetahui Strukturnya. Program/dokumen HTML terdiri dari Kepala Program/Dokumen dan Badan Program/Dokumen dengan bentuk sbb : <html> <head> ......... Kepala Program </head> <body> ............. Badan Program </body> </html> Dokumen HTML adalah suatu dokumen yang diapit dengan tag <HTML> Kepala program diapit dengan tag <Head> dan untuk badan program diapit dengan tag <Body>. Berikut akan diberikan contoh program HTML yang sederhana : <html> <head> <title> Homepage Pribadi </title> </head> <body> <center> <h1>Homepage-Ku</h1> Inilah <b>Homepage </b> Pribadi-Ku <i>Yang Pertama</i> </center> </body> </html> Tampilan program : Homepage-Ku Inilah Homepage Pribadi-Ku Yang Pertama

    Ket :

    - h1 tulisan Header dapat pula dicoba (h2...h6)

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) - b tulisan tebal - i tulisan italic - u tulisan bergaris bawah

    2. Gambar dan Background


    Untuk memberikan tampilan yang menarik dan memang merupakan kelebihan dari dokumen HTML, dapat disertakan gambar dalam dokumen tersebut, dapat berupa gambar diam ataupun animasi. Gambar dapat pula sebagai gambar tunggal di bagian area halaman atau memenuhi area halaman sebagai background. <IMG SRC="nama file gambar"> untuk memanggil file gambar tunggal <Body background="nama file gambar"> untuk memanggil file gambar sebagai background <html> <head> <title> Homepage Pribadi </title> </head> <body background="gambar1.jpg"> <center> <h1>Homepage-Ku</h1> <IMG SRC="gambar2.gif"> Inilah Homepage Pribadi-Ku <i>Yang Pertama</i> </center> </body> </html> Tampilan : Homepage-Ku +

    Inilah Homepage Pribadi-Ku Yang Pertama Ket : - gambar1.jpg harus ada 2

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) - gambar2.jpg harus ada - extension gambar jpg atau gif

    3. Font dan List


    Pada contoh dokument Html berikut terdapat perintah tambahan yaitu : FONT, Didalam FONT dapat ditambahkan beberapa perintah seperti SIZE (ukuran huruf), FACE (Jenis huruf sesuai yang ada pada sistem windows-nya) dan COLOR (warna huruf). Dan juga dalam dokumen yang sama diberikan contoh perintah yang menghasilkan suatu LIST atau Daftar, LIST dapat berupa Ordered LIST (OL) atau Unordered LIST (UL), jika memakai OL berarti LIST kita terurut (bisa angka atau abjad). <html> <head> <title> Homepage Pribadi </title> </head> <body background="gambar1.jpg"> <center> <h1>Homepage-Ku</h1> <IMG SRC="gambar2.gif"> <Font size=3 Face="arial" color="blue"> Inilah Homepage Pribadi-Ku <i>Yang Pertama</i> </Font> </center> <font face="arial" size=3 color="red"> <ol> <li>Nama : Sumijan <li>Alamat : Komp. Palm Griya Indah <li>Hoby : Baca Hadis dan Tafsir Al-Qur`an </ol> </font> </body> </html>

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) Tampilan : Homepage-Ku

    Inilah Homepage Pribadi-Ku Yang Pertama 1. Nama : Sumijan 2. Alamat : Komp. Palm Griya Indah 3. Hoby : Baca Hadis dan Tafsir Al-Quran

    TABEL
    Tabel adalah suatu tampilan yang mengandung unsur baris dan kolom, untuk menampilkan tabel dalam homepage diperlukan beberapa tag yaitu : <Table> ....... </table> Untuk set dokumen tabel <TR> ......... </TR> Untuk set baris (Table Row) <TD> ......... </TD> Untuk set kolom (Table Data) <TH> ......... </TH> Untuk set Header (Table Header) <Caption> .....</Caption> Untuk set Judul Tabel Contohnya seperti berikut : <html> <head> <title> Homepage Pribadi </title> </head> <body background="gambar1.jpg"> <center> <h1>Homepage-Ku</h1> <IMG SRC="gambar2.gif"> <Font size=3 Face="arial" color="blue"> Inilah Homepage Pribadi-Ku <i>Yang Pertama</i>

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) </Font> </center> <font face="arial" size=3 color="red"> <ol> <li>Nama : Sumijan <li>Alamat : Komp. Palm Griya Indah <li>Hoby : Baca Hadis dan Tafsir Al-Qur`an </ol> </font> <BR> <center> <table border=2> <caption> Daftar Nilai Ujian </caption> <TR> <TD><BR></TD> <TH>MID</TH> <TH>AKHIR</TH> </TR> <TR> <TH>Agama</TH> <TD>90</TD> <TD>85</TD> </TR> <TR> <TH>Pancasila</TD> <TD>75</TD> <TD>80</TD> </TR> </table></center> </body> </html>

    Tampilan :

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming)

    Homepage-Ku

    Inilah Homepage Pribadi-Ku Yang Pertama 1. Nama : Sumijan 2. Alamat : Komp. Palm Griya Indah 3. Hoby : Baca Hadis Dan Tafsir Al-Qur`an Daftar Nilai Ujian MID AKHIR Agama 90 Pancasila 75 85 80

    FRAME
    Frame adalah perintah untuk tampilan yang home yang terbagi dalam beberapa bingkai sesuai kehendak kita. Dapat dibagi secara mendatar atau secara horizontal. <Frameset> ....... </Frameset> Untuk set bingkai homepage <Frame> ......... </Frame> Untuk isi dan nama bingkai Cols dan Rows Untuk set baris atau kolom Contohnya seperti berikut : (sebelum menulis contoh, anda harus mempunyai minimal 2 dokumen HTML yang akan di panggil pada bingkai yang akan dibuat).

    <html> <head> <title>My Personal Homepage</title>

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) </head> <frameset cols="25%,*" frameborder="0" framespacing="0"> <frame src="kiri.html" name="left" noresize scrolling> <frame src="kanan.html" name="right" noresize scrolling> </frameset> </html> Jika program ini anda jalankan, maka hasilnya seperti homepage yang anda lihat ini, terbagi menjadi 2 bingkai dengan bagian 25% berisi kiri.html dan 75% berisi kanan.html. Jika menginginkan terbagi 2 tetapi horizontal atau baris, dapat mengganti cols dengan rows dan dokumen html-nya diganti atas dan bawah. <html> <head> <title>My Personal Homepage</title> </head> <frameset rows="25%,*" frameborder="0" framespacing="0"> <frame src="atas.html" name="left" noresize scrolling> <frame src="bawah.html" name="right" noresize scrolling> </frameset> </html>

    LINK
    Link adalah menghubungkan dengan obyek lain, dapat berupa Web Page, Gambar, Suara, ataupun ke komputer server yang lain. Link adalah merupakan pembeda antara mode text HTML dengan text yang lain. Untuk perintah Link dapat menggunakan elemen Anchor : <A> ...</A> dan tambahan perintah HREF. Contoh jika ada perintah : <A HREF="contoh.htm">Menuju ke Dokumen Contoh.htm </A> Artinya : Bahwa kalimat "Menuju ke Dokumen Contoh.htm" akan diberi tanda (biasanya garis bawah) dan jika pointer mouse berada pada kalimat tersebut, maka akan menjadi gambar jari tangan Dan apabila di Klick, maka contoh.htm akan ditampilkan. dokumen

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) <html> <head> <title>My Personal Homepage</title> </head> <Body> <h>Contoh Link</h> <a href="contoh.htm">Link ke dokumen Contoh</a> </Body> </html>

    Tampilan

    Contoh Link ke dokumen Contoh

    Link

    Seperti yang anda lihat pada pelajaran Frame, tampilan pada layar dapat dibagi menjadi dua atau beberapa. Agar anda dapat me-link ke daerah yang dituju, misalnya bagian kanan atau kiri, dapat dilihat lagi pada dokumen frame-nya pada perintah NAME, pada contoh terdahulu anda membagi dua halaman menjadi kiri dan kanan dengan memberi nama name="left" dan yang kanan diberi nama name="right", sehingga misal kita ingin menampilkan dokumen contoh.htm ke halaman kiri dapat diberi perintah TARGET, contoh: <a href="contoh.htm" target="left" >Link ke dokumen Contoh </a>

    Pemacu link tidak harus tulisan, dapat juga pemacu link menggunakan gambar atau image : * <a href="contoh.htm"> <img src="gambar.gif> </a> (Gambar.gif akan menjadi pemacu link ke dokumen contoh.htm)

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming)

    Contoh link yang lain : * <a href="http://www.stmikdinus.ac.id">Link ke Homepage-nya STMIK </a> Link ke Homepage-nya STMIK * <a href="mailto:mendoan@mailcity.com">Link ke alamat e-mail </a> Link ke alamat e-mail

    Dosen : Ir. H. Sumijan, M.Sc

    Anda mungkin juga menyukai