1 / 34

Perintah dan Fungsi Tag pada HTML

Perintah dan Fungsi Tag pada HTML. SRI WAHYUNINGSIH 102904015 PTIKC. <H1> Sampai <H6>. F ungsi   : untuk membuat ( memilih ) ukuran teks . Sintak   : <H1>             </H1> Contoh <HTML> <HEAD><TITLE> Contoh Heading</TITLE></HEAD> <BODY> <H1> Teks dengan Heading 1</H1>

dora-aguilar
Download Presentation

Perintah dan Fungsi Tag pada HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Perintah dan Fungsi Tag pada HTML SRI WAHYUNINGSIH 102904015 PTIKC

  2. <H1> Sampai <H6> Fungsi  : untukmembuat (memilih) ukuranteks. Sintak  : <H1>             </H1> Contoh <HTML> <HEAD><TITLE>Contoh Heading</TITLE></HEAD> <BODY> <H1> Teksdengan Heading 1</H1> <H2> Teksdengan Heading 2</H2> <H3> Teksdengan Heading 3</H3> <H4> Teksdengan Heading 4</H4> <H5> Teksdengan Heading 5</H5> <H6> Teksdengan Heading 6</H6> </BODY> </HTML>

  3. <HR> • Fungsi : perintahuntukmembuatgaris horizontal penuhlayarcth : ----------------------------------------------------

  4. <I> Perintahinidigunakanuntukmembuatteks miring. Sintaks            : <I>    </I> Contoh <HTML> <HEAD><TITLE>     </TITLE></HEAD> <BODY> <I> SelamatDatangKeWebsiteku</I> </BODY> </HTML>

  5. <B> • Perintahinidigunakanuntukmembuattekstebal. Sintaks: <B>   </B> • Contoh <HTML> <HEAD><TITLE>     </TITLE></HEAD> <BODY> <B> SelamatDatangKeWebsiteku</B> </BODY> </HTML>

  6. <U> • Perintahinidigunakanuntukmembuatteksbergarisbawah. Sintaks            : <U>   </U> <HTML> <HEAD><TITLE>     </TITLE></HEAD> <BODY> <U> SelamatDatangKeWebsiteku</U> <U><B> SelamatDatangKeWebsiteku</U></B> </BODY> </HTML>

  7. <CENTER> • Perintahiniuntukmembuatteksketengahlayar. • Sintaks            : <CENTER>  </CENTER> Contoh            : <HTML> <HEAD><TITLE>     </TITLE></HEAD> <BODY> <H1><CENTER> SelamatDatangKeWebsiteku</CENTER></H1> </BODY> </HTML>

  8. <ALIGN> • Fungsi : Membuatteks rata kiridan rata kananSintak : <P ALIGN=right>untuk rata kanan <P ALIGN=left>untuk rata kiri <P ALIGN=center>untuk rata tengah <P ALIGN=justify>untuk rata kiridan rata kananatau<H?ALIGN=right> <H?ALIGN=left> <H?ALIGN=center> <H?ALIGN=justify>Contohpemakaian: <H2 Align=right>SelamatDatangKe Website Kami <H2>

  9. <BR> (Line Break) Perintahinidigunakanuntukmemasukanfungsi Enter. Sebagaicontoh, jikaperintah <BR> diberikandiakhirbaris, makakalimatberikutnyaakandicetakpadabarisberikutnya.

  10. <BR> • Fungsi : memasukkanfungsienter • Cth : Jikaperintah <BR> diberikandiawalataudiakhirbaris, makakalimatberikutnyaakandicetakpadabarisberikutnya

  11. <!– Perintahuntukmembuat KOMENTAR. Semuateksatauperintah yang diapitperintahinitidakakandijalankan. Inihanyakomentaruntuk program. • Sintaks            : <!–    –> • Contoh            : <!—Iniadalahcontohkomentar –>

  12. <BASEFONT> • Fungsi : Mengubahukuran font Contoh :<BASEFONT SIZE=6>WELCOME TO MY WEBSITE<B>WELCOME TO MY WEBSITE DAN TEBAL</B>

  13. <SUP> • Fungsi : membuatcetaknaiksuatuteks • Contoh:Kamiadalah yang pertama:1stin the world

  14. <SUB> • Fungsi : membuatsuatutekscetakturun • Contoh:contoh-contohtekscetakturun :H2O (Disebut Air) danC2127No (DisebutMethadon)

  15. <LI> • Fungsi : jugauntukmembuat bulletCatatan : perintah <LI> harusberadadalamperintahOL,UL,DIR,Menu • Contoh: • <UL><LI><H2> JawaTimur </H2><UL><LI> SURABAYA </LI><LI> MALANG </LI><LI> GRESIK </LI></UL></LI> • </BR><LI><H2> Jawa Barat </H2><UL><LI> Bandung </LI><LI> Sukabumi </LI><LI> Bogor </LI></UL></LI></UL>

  16. <IMGSRC> • Fungsi : memasukkangambarkedalam WebsiteAndadapatjugamemasukkangambarberakhiran *.Jpg, *.Gif, *.Bmp dllSintak :<IMG BORDER=”5″>“5″ merupakanukuran border(Bingkai), gantiangkainisesuaikeinginananda

  17. <BGSOUND> • Fungsi : memasukkansuaraataumusikkedalam Website • Sintak: <BGSOUND loop=infitesrc=”d:/Selamat datang.WAV”>

  18. FACE Untukmengubahjenis font Contoh : <HTML> <HEAD><TITLE>     </TITLE> </HEAD> <BODY> <FONT SIZE =”6” FACE=”Times New Roman”> Teksdenganjenis font Times New Roman. <FONT SIZE =”6” FACE=”Arial”> Teksdenganjenis font Arial. </BODY> </HTML>

  19. Indenting Text • Tag <BLOCKQUOTE> yaituteks yang menjoroklebihkedalamdarigaristepisecaraotomatisdarikirikekanan. • Cobalahcontohberikut:<BLOCKQUOTE>You can use Sound Recorder to record, play, and edit sound files.To use Sound Recorder, you must have a sound card and speakersinstalled on your computer. If you want to record live sound,you also need a microphone.</BLOCKQUOTE>

  20. PenerapanDefinisiListDefinisi List adalahserupadengandaftarkata. Diterapkanmenggunakan tag <DL> dan <DT> sepertiditunjukkan listing dibawahini :<DL><DT>Java<DD>Developed by Sun Microsystems Inc<DT>Yang kedua<DD>Developed by sayasendiri</DL>

  21. Link dengansorot • Berikutadalahcontoh program bagaimanamembuat link hanyadengansorotsaja (link takperludiklik, tetapicukupdisorotdengan mouse.<HTML><HEAD><TITLE> </TITLE><META Name=”description”Content=” “><META Name=”keywords”Content=” “><META Name=”generator”Content=”Cute HTML”></HEAD><BODY BG Color=”#FFFFFF”Text=”#000000=”#”0000FF”VLink=”#800080″><Center><A href=” “target=main on mouse over=”Window.open(‘c:/html/keterangan.html’):”><Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e></CENTER></BODY></HTML>

  22. Link dengantombol • Berikutadalahcontoh program link dengantombol • Sintak:<Input type=”button”Value=”NamaTombol”On Click=”parent.location=”Link andadisini” >

  23. < /HEAD >< BODY BGCOLOR=”#FFFFFF”Text=”#000000″Vlink=”#800080″ >< Center >< h1 > PT.OCTA >< Input Type=”button”value=”TentangKami”on click=”parent.location=”c:/website/tentang_kami.html’” >< Input Type=”button”value=”ProdukKami”on click=”parent.location=”c:/gambar/produk_kami.html’” >< Input Type=”button”value=”caramemesan”on click=”parent.location=”c:/gambar/cara_memesan.html’” >< /Center >< /Body >< /HTML > • ContohBuatlah link dengannamatentang_kami.htmlproduk_kami.htmlcara_memesan.html< HTML >< HEAD >< TITLE > </TITLE>< META name=”description”Content=” “>< META name=”keywords”Content=” “>< META name=”generator”Content=”Cute HTML”>

  24. Membuat Frame -Framecols : membagilayardalambentukkolom-FrameRows : membagilayardenganbentukbaris-Frame Src : menampilkan file dalam frameBentuknya(Frame cols=”30%,*”)(Frame src=”Nama.file Name=”Teks”)(Frame Rows=”40%,*”)(Frame src=”Nama.file”Nama=”teks”)(Frame src=”Nama.file”Nama=”Teks)(/Frameset)

  25. Contoh Program Frame < Html >< Head >< Title >Melinkdengansorot < /Title >< /Head >< Frameset cols=”30%,*” >< Frame src=”Namafile”Nama=”Teks” >< Frame Rows=”40%%,*” >< Frame src=”GambarFile’Nama=”Gambar” >< Frame src=”NamaFile”Nama=”Teks >< /Frameset >

  26. <LABEL>  </LABEL> • Adalahsuatuperintahuntukmembuatketeranganfield (kotak input) dalampembuatan form, danumumnyadigunakandenganperintah INPUT. Sedangkan LABEL terdiridaribeberapaatribut: • ACCESSKEY=character Tombol shortcut. ONFOCUS=script Elemen yang menerimafokus (kursor) ONBLUR=script Elemen yang ditinggalkanfokus (kursor).  

  27. Contoh : <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″> <p> <label accesskey=U>NamaAnda : <input type=”text” name=”username” size=”20″ maxlength=”15″></label> </p> <p> <label accesskey=P>Password : <input type=”password” name=”pw” size=”20″ maxlength=”20″></label> </p> </BODY> </HTML>

  28. FONT COLOR Perintahuntukmemasukanwarnakedalamteks. Contoh : <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″> <basefont size=”6″> <b> <font color=”red”>Teksdenganwarnamerah</font><br> <font color=”black”>Teksdenganwarnahitam</font><br> <font color=”blue”>Teksdenganwarnabiru</font> </b> </BODY> </HTML>

  29. BACKGROUND Adalahperintahuntukmembuatwarnalatarbelakangsebuahteks. KODE-KODE WARNA UNTUK WARNA BACKGROUND • #000000          : Black • #c0c0c0           : Silver • #808080          : Gray • #ffffff             : White • #800000          : Maroon • #ff0000           : Red • #800080          : Purple #ff00ff              : Fuchsia #008000          : Green #00ff00           : Lime #808000          : Olive #ffff00           : Yellow #000080          : Navy #0000ff           : Blue #008080          : Teal #00ffff              : Aqua

  30. Contoh: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″> <table cellpadding=”5″ cellspacing=”5″> <td style=”BACKGROUND: #000000; COLOR: white”>DasarHitam </td> <td style=”BACKGROUND: #ff0000; COLOR: white”>DasarMerah </td> </table> </BODY> </HTML>

  31. IFRAME SRC Adalahperintahuntukmembuatjendeladenganlebardantinggisesuaidengankeinginan programmer, dandapatdiletakandibagiankiri, tengah, ataubagiankanan. Sintaks : <IFRAME SRC=”link” WITDH=400 HEIGHT=105></IFRAME>

  32. Contoh: <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY BGCOLOR=”#FFFFFF” TEXT=”#000000″ LINK=”#0000FF” VLINK=”#800080″> <p align=”center”> <iframesrc=”link” WIDTH=400 HEIGHT=90> </iframe> </p> <p align=”center”> <imgsrc=”link”></p> </BODY> </HTML>

  33. A HREF <A HREF Adalahperintah HTML untukmembuat LINK (membukasebuahhalamatau URL darisebuahhalaman). Ada pun atribut yang dapatdigunakandengan HREF adalahsebagaiberikut: ONCLICK                  : Membuka link setelahtomboldi-klik ONMOUSEOVER     : Membuka link hanyadenganmenyorottombol ONMOUSEOUT        : Membuka link hanyadenganmenyorottombol, dankembalikehalamansemulaapabila mouse dijauhkandari link. Sintaks: <A HREF=”gambaratauhalamanatau URL”> Nama Link</A>

More Related