Scribd Logo
Unggah

Selamat datang di Scribd!

  • HTML Turtorial

    Diunggah oleh

    Ova Imam Aditya
    7 tayangan12 halaman
    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
    html

    Hak Cipta:

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

    HTML Turtorial

    Diunggah oleh

    Ova Imam Aditya
    html

    Hak Cipta:

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

    Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan

    halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag dan diakhiri dengan <!namatag (terdapat tanda "!"). #ebuah halaman web minimal mempunyai empat buat tag$ yaitu % <HTML> #ebagai tanda awal dokumen HTML. <HEAD> #ebagai in&ormasi page header. Di dalam tag ini kita bisa meletakkan tag'tag T(TL)$ *+#)$ (#(,D)-$ L(,.$ #/0(1T$ #TYL) 2 M)T+. <TITLE> #ebagai titel atau 3udul halaman. .alimat yang terletak di dalam tag ini akan mun4ul pada bagian paling atas browser +nda (pada title bar). /ontoh % <T(TL) Tips HTML '' www.klik'kanan.4om<!T(TL) <*5DY Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang$ warna teks$ warna link$ warna 6isited link$ warna a4ti6e link dan lain'lain. +tribut % *7/5L50$ *+/.7058,D$ T)-T$ L(,.$ 9L(,.$ +L(,.$ L):TM+07(, 2 T51M+07(,. /ontoh % <*5DY bg4olor;"<======" ba4kground;"images!p4b.gi&" text;"<::::::" link;"<::====" 6link;"::::==" alink;"<====::" #ebuah 4ontoh sederhana dokumen HTML % <HTML <H)+D <T(TL) Halaman pembuka <!T(TL) <!H)+D <*5DY bg4olor;"<::::::" ba4kground;"images!gambar>.gi&" text;"<::====" Letakkan text$ images$ dan link +nda di sini <!*5DY <!HTML

    Pengaturan Teks 8ntuk mendapatkan halaman web yang baik +nda harus melakukan pengaturan terhadap teks seperti memilih 3enis dan ukuran huru&$ perataan$ dll. Tag'tag di bawah ini yang biasa digunakan dalam pengaturan teks % Headers: <Hn>..</Hn> Digunakan untuk mengatur ukuran huru& pada header. "n" mempunyai nilai antara > ' ? atau antara <H> sampai <H? $ dengan <H> merupakan ukuran terbesar dan <H? merupakan ukuran terke4il. /ontoh % <H@ Tutorial Html<!H@ Hasilnya akan terlihat seperti % Tutorial Html Paragrap !aru: <P> Digunakan untuk pindah alinea atau paragra&. Tag ini bisa diberi akhiran <!1 tapi 3uga bisa tidak diberi. Line !reak: <!"> Digunakan untuk pindah ke baris baru. #o Line !reak: <#$!"> *ila digunakan tag ini maka teks yang pan3ang tidak se4ara otomatis pindah baris bawahnya bila baris pertama sudah terlalu pan3ang. %ont <%$#T> 8ntuk mende&inisikan berbagai attribut :5,T$ yaitu % #(A)$ :+/)$ /5L50. SI&E: 8kuran &ont yang digunakan$ berkisar antara > ' B dengan > merupakan ukuran terke4il dan B merupakan ukuran terbesar. %A'E: Cenis atau nama &ont. +nda bisa memilih maksimal D 3enis &ont yang masing' masing dipisahkan oleh koma. *ila terdapat spasi yang terletak pada nama &ont maka harus digunakan tanda garis bawah ( E ). Dalam memilih 3enis &ont ini harus dipertimbangkan apakah &ont yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). 1endeknya kita tidak usah menggunakan &ont'&ont yang bentuknya aneh'aneh$ gunakan sa3a &ont standar. Tapi bila +nda ingin menggunakan &ont yang sedikit "aneh" +nda bisa menggunakan graphi4. '$L$": Farna &ont$ dide&inisikan dengan menggunakan nilai 07*!H)- atau bisa 3uga langsung menggunakan nama warna (red misalnya). /ontoh %

    <:5,T #(A);G :+/);"9erdana$ +rial$ Hel6eti4a" /5L50;"<::====" /ontoh teks yang berwarna merah<!:5,T Hasilnya akan terlihat seperti % /ontoh teks yang berwarna merah /ontoh lainnya % <:5,T #(A);@ :+/);"TimesE,ewE0oman" /5L50;"<==??//" !ase %ont: <!ASE%$#T> Digunakan untuk mende&inisikan "de&ault text". +ttribut sama dengan attribut :5,T. Tag :5,T akan mengoverwrite setting pada *+#):5,T. /ontoh % <*+#):5,T #(A);@ :+/);"+rial$Hel6eti4a" /5L50;"<::====" #elain tag dan atribut di atas$ masih terdapat lagi tag'tag yang berhubungan dengan pengaturan teks$ yaitu % Per atian : #emua tag di bawah ini membutuhkan tap penutup. <!> !old te(t <I> Italic text <)> 8nders4ore <TT> Typewriter <S> #trikeout ' draws a line through the text <P"E> 1re&ormatted Text <D%#> Definition <!LI#*> Text berkedip (lebih baik 3angan digunakan) <ST"$#+> Strong <ADD"ESS> Italic <'ITE> Digunakan untuk quoting text <'$DE> Monospa4ed &ont (digunakan bila +nda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML +nda) <SAMP> Monospa4ed &ont (digunakan bila +nda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML +nda) <*!D> Monospa4ed &ont (digunakan bila +nda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML +nda) <!I+> 8kuran teks akan lebih besar satu ukuran <SMALL> 8kuran teks akan lebih ke4il satu ukuran <S)P> Membuat tekssupers4ript <S)!> membuat tekssub s4ript

    <A!!"E,> +bbre6iations <A'"$#-M> 8ntuk akronim <PE"S$#> Digunakan untuk indexing <.> Membuat short inline Huotation <,A"> Membuat variable name, selalu dalam italics.

    Lists Terdapat tiga tipe list yang dapat digunakan$ yaitu % )nordered Lists: <)L> 8ntuk membuat da&tar item dengan tanda bullet. List entries dide&inisikan dengan tag <L( . /ontoh % <8L <L( (tem nomer > <L( (tem nomer @ <L( (tem nomer D <!8L Hasil dari kode di atas adalah%

    (tem nomer > (tem nomer @ (tem nomer D

    Dengan atribut TY1) +nda dapat mende&inisikan bentuk dis4$ 4ir4le atau sHuare bullet point. /ontoh % <8L /5M1+/T TY1);sHuare I $rdered Lists: <$L> Cuga digunakan untuk membuat da&tar item$ dengan tiap item dapat menggunakan angka arab atau romawi. List entries 3uga dide&inisikan dengan <L( tag. /ontoh % <5L TY1);( <L( (tem nomer > <L( (tem nomer @

    <L( (tem nomer D <!5L Hasil dari kode di atas adalah % >. (tem nomer > @. (tem nomerr @ D. (tem nomerr D 8ntuk TY1) +nda dapat 3uga menggunakan % >' De&ault numbers$ >$ @$ D$ et4. +' Huru& besar. +$ *$ /$ et4. a' Huru& ke4il. a$ b$ 4$ et4. (' 0omawi huru& besar. ($ (($ ((($ et4. i' 0omawi huru& ke4il $ i$ ii$ iii$ et4. De/inition Lists: <DL> /ontoh % <DL <DT <DD <DT <DD <!DL (tem pertama. 1en3elasan tentang item pertama. (tem kedua. 1en3elasan tentang item kedua

    Hasil dari kode di atas adalah % (tem pertama. 1en3elasan tentang item pertama. (tem kedua. 1en3elasan tentang item kedua

    Images Images : Digunakan untuk menampilkan image atau animasi gi& pada halaman web +nda. +tribut % alt$ align;(4enter$ le&t$ right)$ hspa6e$ 6spa4e$ border$ width 2 height

    /ontoh % <(M7 #0/;"logo.gi&" alt;"(ni adalah logo halaman pembuka" width;@== height;>== <(M7 #0/;"logo.gi&" hspa4e;>= 6spa4e;J align;right border;@ Links : Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <+ dan <!+ akan terdapat garis bawah. /ontoh % <+ H0):;"halaman@.html" .lik di sini<!+ 8ntuk membuat link ke halaman lain. <+ H0):;"mailto%webmasterKklik'kanan.4om" .lik di sini<!+ 8ntuk membuat link pada alamat e'mail. <+ H0):;"<aplikasi" .lik di sini<!+ 8ntuk membuat link ke bagian lain pada halaman yang sama. <+ H0):;"halamanlain.html<aplikasi" .lik di sini<!+ 8ntuk membuat link kebagian lain pada halaman yang berbeda. <+ H0):;"halaman@.html" <(M7 #0/;"gambar.gi&" <!+ 8ntuk membuat link dengan menggunakan gambar. Ta0el Tabel sangat penting artinya dalam desain web. .arena dengan menggunakan tag table +nda dapat membuat halaman web "terbagi" pada beberapa kolom atau baris. /ontohnya seperti pada halaman web yang sedang +nda ba4a ini. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table % <T+*L) $ <T0 $ dan <TD . Yang perlu diingat adalah bahwa tab <T0 dan <TD harus terletak di antara tag <T+*L) dan <!T+*L) <TA!LE> Terdiri dari atribut %

    align ' perataan % rata kiri (le&t)$ tengah (4enter) atau kanan (right). 0g1olor ' warna latar belakang (ba4kground) dari tabel. 0order ' ukuran lebar border tabel (dalam pixel). 1ellpadding ' 3arak antara isi 4ell dengan batas 4ell (dalam pixel). 1ellspa1ing ' 3arak antar 4ell (dalam pixel). 2idt ' ukuran tabel dalam pixel atau per4ent.

    /ontoh % <T+*L) align;"4enter" bg4olor;"<====::" border;"@" 4ellpadding;"J" 4ellspa4ing;"@" width;"L=M"

    <T"> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut%

    align ' perataan % rata kiri (le&t)$ tengah (4enter) atau kanan (right). 0g1olor ' warna latar belakang dari baris. 3align ' perataan 6ertikal % top$ middle atau bottom.

    /ontoh % <T0 align;"right" bg4olor;"<====::" 6align;top <TD> Tag ini digunakan untuk membuat kolom baru pada tabel.

    align ' perataan 0a1kground ' image yang digunakan sebagai latar belakang dari kolom. 0g1olor ' warna latar belakang 1olspan ' lihat gambar 4ontoh eig t ' ukuran tinggi 4ell dalam pixels. no2rap ' membuat supaya isi dari kolom tetap berada pada satu baris. ro2span ' lihat gambar 4ontoh 3align ' perataan 6ertikal %top$ middle atau bottom. 2idt ' ukuran kolom dalam pixel atau per4en.

    /ontoh % <TD align;"right" ba4kground;"ba4k.gi&" bg4olor;"<====::" 4olspan;"D" height;"@==" nowrap rowspan;"@" 6align;"bottom" width;"D==" <table width;">==" border;">" 4ellspa4ing;"@" 4ellpadding;"@" <tr <td bg4olor;"<====::" 2nbspN<!td <td bg4olor;"<::::??" 2nbspN<!td <td rowspan;"@" bg4olor;"<::DD??" 2nbspN<!td <!tr <tr <td 4olspan;"@" bg4olor;"<DD//??" 2nbspN<!td <!tr <tr <td 4olspan;"D" bg4olor;"<:://LL" 2nbspN<!td <!tr <!table

    <table width;">==" border;"=" 4ellspa4ing;"=" 4ellpadding;"=" <tr <td bg4olor;"<====::" 2nbspN <!td <td bg4olor;"<::::??" 2nbspN<!td <td rowspan;"@" bg4olor;"<::DD??" 2nbspN<!td <!tr <tr <td 4olspan;"@" bg4olor;"<DD//??" 2nbspN<!td <!tr <tr <td 4olspan;"D" bg4olor;"<:://LL" 2nbspN<!td <!tr <!table

    %rames

    4 <:0+M)#)T 4ols;"O$>G=" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M) #0/;"menu.htm" ,+M);":rame@" <!:0+M)#)T 5 <:0+M)#)T 4ols;">==$O" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M) #0/;"menu.htm" ,+M);":rame@" <!:0+M)#)T 6 <:0+M)#)T rows;">==$O" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M) #0/;"menu.htm" ,+M);":rame@" <!:0+M)#)T 7 <:0+M)#)T rows;"O$?=" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M) #0/;"menu.htm" ,+M);":rame@" <!:0+M)#)T 8 <:0+M)#)T rows;"O$?=" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M)#)T 4ols;"J=M$J=M" <:0+M) #0/;"menu.htm" ,+M);":rame@" <:0+M) #0/;"menu@.htm" ,+M);":rameD" <!:0+M)#)T <!:0+M)#)T 9 <:0+M)#)T 4ols;"O$J=M" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M)#)T rows;">JM$>JM$B=M" <:0+M) #0/;"menu.htm" ,+M);":rame@" <:0+M) #0/;"menu@.htm" ,+M);":rameD" <:0+M) #0/;"menuD.htm" ,+M);":rameG" <!:0+M)#)T <!:0+M)#)T : <:0+M)#)T 4ols;"J=M$J=M" <:0+M)#)T rows;"J=M$J=M" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M) #0/;"homepage@.htm" ,+M);":rame@"

    <!:0+M)#)T <:0+M)#)T rows;"J=M$J=M" <:0+M) #0/;"menu.htm" ,+M);":rameD" <:0+M) #0/;"menu@.htm" ,+M);":rameG" <!:0+M)#)T <!:0+M)#)T ; <:0+M)#)T rows;">JM$B=M$>JM" <:0+M) #0/;"homepage.htm" ,+M);":rame>" <:0+M)#)T 4ols;">JM$B=M$>JM" <:0+M) #0/;"menu.htm" ,+M);":rame@" <:0+M) #0/;"menu@.htm" ,+M);":rameD" <:0+M) #0/;"menuD.htm" ,+M);":rameG" <!:0+M)#)T <:0+M) #0/;"homepage.htm" ,+M);"*(7" <!:0+M)#)T <!:0+M)#)T

    *umpulan Tag HTML <<== ==> Memberi komentar atau keterangan. .alimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut Membuat nama bagian yang dide&inisikan pada link pada halaman yang sama #ebagai awal dari Ca6a applets Mende&inisikan daerah yang dapat diklik (link) pada image map Membuat teks tebal

    <a re/> <a name> <applet> <area> <0>

    <0ase/ont> Membuat atribut teks de&ault seperti 3enis$ ukuran dan warna &ont <0gsound> Memberi (suara latar) ba4kground sound pada halaman web <0ig> <0link> <0od>> <0r> <1aption> <1enter> Memperbesar ukuran teks sebesar satu point dari de&aultnya Membuat teks berkedip Tag awal untuk melakukan berbagai pengaturan terhadap text$ warna link 2 6isited link 1indah baris Membuat 4aption pada tabel 8ntuk perataan tengah terhadap teks atau gambar

    <1omment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada

    browser <dd> <di3> <em0ed> </n> </ont> </orm> </rame> < 4> ... < 9> < ead> < r> < tml> <i> <img> <input> <li> <map> <no0r> <ol> <p> <pre> <s1ript> <ta0le> <td> <title> <tr> <u> (ndents teks 0epresents di&&erent se4tions o& text. Menambahkan sound or &ile a6i ke halaman web #eperti tag <a name Mengganti 3enis$ ukuran$ warna huru& yang akan digunakan utk teks Mende&inisikan input &orm Mende&inisikan &rame

    </rameset> Mende&inisikan attribut halaman yang akan menggunakan &rame 8kuran &ont Mende&inisikan head do4ument. Membuat garis horiPontal *ararti dokumen html Membuat teks miring (mage$ imagemap atau an animation Mende&inisikan input &ield pada &orm Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir $ <menu $ <ol and <ul ) Mende&inisikan 4lient'side map Men4egah ganti baris pada teks atau images Mende&inisikan awal dan akhir list 7anti paragra& Membuat teks dengan ukuran huru& yg sama Mende&inisikan awal s4ript Membuat tabel .olom pada tabel Mende&inisikan title *aris pada tabel Membuat teks bergaris bawah

    <mar?uee> Membuat s4rolling teks (teks ber3alan) ' hanya pada M# () <no/rames> Cika browser user tidak mendukung &rame

    *ode untuk karakter k usus Sim0ol 2HuotN 2ampN 2ltN 2gtN 25)ligN 2oeligN 2#4aronN 2s4aronN 2YumlN 24ir4N 2tildeN 2enspN 2emspN 2thinspN 2Pwn3N 2Pw3N 2lrmN 2rlmN 2ndashN 2mdashN 2lsHuoN 2rsHuoN 2sbHuoN 2ldHuoN 2rdHuoN 2bdHuoN 2daggerN 2DaggerN 2permilN 2lsaHuoN 2rsaHuoN 2euroN *arakter >g ditampilkan " 2 < Q R S T U V W X Y

    Z [ \ ] ^ _ ` a b c d e f g

    Anda mungkin juga menyukai