Scribd Logo
Unggah

Selamat datang di Scribd!

  • Pem Rogram An HTML

    Diunggah oleh

    Taufik Hadayattullah
    7 tayangan9 halaman
    qw

    Judul Asli

    Pem Rogram an HTML

    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
    qw

    Hak Cipta:

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

    Pem Rogram An HTML

    Diunggah oleh

    Taufik Hadayattullah
    qw

    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 adan 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 " ody#. erikut akan diberikan $ontoh 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 di$oba &h'...h()

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) % b tulisan tebal % i tulisan itali$ % u tulisan bergaris ba*ah

    2.

    ambar dan Bac!ground

    +ntuk memberikan tampilan yang menarik dan memang merupakan kelebihan dari dokumen HTML, dapat disertakan gambar dalam dokumen tersebut, dapat berupa gambar diam ataupun animasi. -ambar dapat pula sebagai gambar tunggal di bagian area halaman atau memenuhi area halaman sebagai ba$kground. ".M- S/012nama 3ile gambar2# untuk memanggil 3ile gambar tunggal " ody ba$kground12nama 3ile gambar2# untuk memanggil 3ile gambar sebagai ba$kground <html> <head> <title> Homepage Pribadi </title> </head> <body bac!ground"#gambar1.$pg#> <center> <h1>Homepage-Ku</h1> <I% &'("#gambar2.gi)#> Inilah Homepage Pribadi-Ku <i>Yang Pertama</i> </center> </body> </html> *ampilan + Homepage%Ku ,

    .nilah Homepage Pribadi%Ku Yang Pertama Ket ! % gambar1.jpg harus ada 2

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) % gambar'.jpg harus ada % e4tension gambar jpg atau gi3

    5. 6ont dan List


    Pada $ontoh dokument Html berikut terdapat perintah tambahan yaitu ! 678T, Didalam 678T dapat ditambahkan beberapa perintah seperti S.9: &ukuran huru3), 6;0: &<enis huru3 sesuai yang ada pada sistem *indo*s%nya) dan 07L7/ &*arna huru3). Dan juga dalam dokumen yang sama diberikan $ontoh perintah yang menghasilkan suatu L.ST atau Da3tar, L.ST dapat berupa 7rdered L.ST &7L) atau +nordered L.ST &+L), jika memakai 7L berarti L.ST kita terurut &bisa angka atau abjad). <html> <head> <title> Homepage Pribadi </title> </head> <body bac!ground"#gambar1.$pg#> <center> <h1>Homepage-Ku</h1> <I% &'("#gambar2.gi)#> <-ont .i/e"0 -ace"#arial# color"#blue#> Inilah Homepage Pribadi-Ku <i>Yang Pertama</i> </-ont> </center> <)ont )ace"#arial# .i/e"0 color"#red#> <ol> <li>1ama + &umi$an <li>2lamat + Komp. Palm riya Indah <li>Hoby + Baca Hadi. dan *a).ir 2l-3ur4an </ol> </)ont> </body> </html>

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) *ampilan + Homepage%Ku

    .nilah Homepage Pribadi%Ku Yang Pertama 1. 8ama ! Sumijan '. ;lamat ! Komp. Palm -riya .ndah 5. Hoby ! a$a Hadis dan Ta3sir ;l%=uran

    >. T; :L
    Tabel adalah suatu tampilan yang mengandung unsur baris dan kolom, untuk menampilkan tabel dalam homepage diperlukan beberapa tag yaitu ! "Table# ....... "/table# +ntuk set dokumen tabel "T/# ......... "/T/# +ntuk set baris &Table /o*) "TD# ......... "/TD# +ntuk set kolom &Table Data) "TH# ......... "/TH# +ntuk set Header &Table Header) "0aption# ....."/0aption# +ntuk set <udul Tabel 0ontohnya seperti berikut ! <html> <head> <title> Homepage Pribadi </title> </head> <body bac!ground"#gambar1.$pg#> <center> <h1>Homepage-Ku</h1> <I% &'("#gambar2.gi)#> <-ont .i/e"0 -ace"#arial# color"#blue#> Inilah Homepage Pribadi-Ku <i>Yang Pertama</i> </-ont>

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) </center> <)ont )ace"#arial# .i/e"0 color"#red#> <ol> <li>1ama + &umi$an <li>2lamat + Komp. Palm riya Indah <li>Hoby + Baca Hadi. dan *a).ir 2l-3ur4an </ol> </)ont> <B'> <center> <table border"2> <caption> 5a)tar 1ilai 6$ian </caption> <*'> <*5><B'></*5> <*H>%I5</*H> <*H>2KHI'</*H> </*'> <*'> <*H>2gama</*H> <*5>78</*5> <*5>9:</*5> </*'> <*'> <*H>Panca.ila</*5> <*5>;:</*5> <*5>98</*5> </*'> </table></center> </body> </html>

    *ampilan +

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming)

    Homepage%Ku

    .nilah Homepage Pribadi%Ku Yang Pertama 1. 8ama ! Sumijan '. ;lamat ! Komp. Palm -riya .ndah 5. Hoby ! a$a Hadis Dan Ta3sir ;l%=ur?an 5a)tar 1ilai 6$ian M.D ;KH./ ;gama 78 9: 98

    Pan$asila ;:

    @. 6/;M:
    6rame adalah perintah untuk tampilan yang home yang terbagi dalam beberapa bingkai sesuai kehendak kita. Dapat dibagi se$ara mendatar atau se$ara horiAontal. "6rameset# ....... "/6rameset# +ntuk set bingkai homepage "6rame# ......... "/6rame# +ntuk isi dan nama bingkai 0ols dan /o*s +ntuk set baris atau kolom 0ontohnya seperti berikut ! &sebelum menulis $ontoh, anda harus mempunyai minimal ' dokumen HTML yang akan di panggil pada bingkai yang akan dibuat).

    <html> <head> <title>%y Per.onal Homepage</title> Dosen : Ir. H. Sumijan, M.Sc 6

    Modul : Pemrograman Berbasis Internet (Web Programming) </head> <)rame.et col."#2:<=># )rameborder"#8# )rame.pacing"#8#> <)rame .rc"#!iri.html# name"#le)t# nore.i/e .crolling> <)rame .rc"#!anan.html# name"#right# nore.i/e .crolling> </)rame.et> </html> <ika program ini anda jalankan, maka hasilnya seperti homepage yang anda lihat ini, terbagi menjadi ' bingkai dengan bagian '@B berisi kiri.html dan C@B berisi kanan.html. <ika menginginkan terbagi ' tetapi horiAontal atau baris, dapat mengganti $ols dengan ro*s dan dokumen html%nya diganti atas dan ba*ah. <html> <head> <title>%y Per.onal Homepage</title> </head> <)rame.et ro?."#2:<=># )rameborder"#8# )rame.pacing"#8#> <)rame .rc"#ata..html# name"#le)t# nore.i/e .crolling> <)rame .rc"#ba?ah.html# name"#right# nore.i/e .crolling> </)rame.et> </html>

    (. L.8K
    Link adalah menghubungkan dengan obyek lain, dapat berupa Deb Page, -ambar, Suara, ataupun ke komputer serEer yang lain. Link adalah merupakan pembeda antara mode te4t HTML dengan te4t yang lain. +ntuk perintah Link dapat menggunakan elemen ;n$hor ! ";# ..."/;# dan tambahan perintah H/:6. 0ontoh jika ada perintah ! "; H/:612$ontoh.htm2#Menuju ke Dokumen 0ontoh.htm "/;# ;rtinya ! ah*a kalimat "Menuju ke Dokumen Contoh.htm" akan diberi tanda &biasanya garis ba*ah) dan jika pointer mouse berada pada kalimat tersebut, maka akan menjadi gambar jari tangan Dan apabila di Kli$k, maka $ontoh.htm akan ditampilkan. do!umen

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming) <html> <head> <title>%y Per.onal Homepage</title> </head> <Body> <h>(ontoh @in!</h> <a hre)"#contoh.htm#>@in! !e do!umen (ontoh</a> </Body> </html>

    *ampilan

    (ontoh @in! !e do!umen (ontoh

    @in!

    Seperti yang anda lihat pada pelajaran 6rame, tampilan pada layar dapat dibagi menjadi dua atau beberapa. ;gar anda dapat me%link ke daerah yang dituju, misalnya bagian kanan atau kiri, dapat dilihat lagi pada dokumen 3rame%nya pada perintah 8;M:, pada $ontoh terdahulu anda membagi dua halaman menjadi kiri dan kanan dengan memberi nama name12le3t2 dan yang kanan diberi nama name12right2, sehingga misal kita ingin menampilkan dokumen $ontoh.htm ke halaman kiri dapat diberi perintah T;/-:T, $ontoh! "a hre312$ontoh.htm2 target="left" #Link ke dokumen 0ontoh "/a#

    Pema$u link tidak harus tulisan, dapat juga pema$u link menggunakan gambar atau image ! F "a hre312$ontoh.htm2# "img sr$12gambar.gi3# "/a# &-ambar.gi3 akan menjadi pema$u link ke dokumen $ontoh.htm)

    Dosen : Ir. H. Sumijan, M.Sc

    Modul : Pemrograman Berbasis Internet (Web Programming)

    0ontoh link yang lain ! F "a hre312http!//***.stmikdinus.a$.id2#Link ke Homepage%nya STM.K "/a# Link ke Homepage%nya STM.K F "a hre312mailto!mendoanGmail$ity.$om2#Link ke alamat e%mail "/a# Link ke alamat e%mail

    Dosen : Ir. H. Sumijan, M.Sc

    Anda mungkin juga menyukai