yudwiantoro2008(yudwi_an@yahoo.co.

id)

Tutorial Mandiri

Layout Web Dasar (HTML)

Latiyangaweweb 1

yudwiantoro2008(yudwi_an@yahoo.co.id)

Persiapan
Tutorial ini saya susun untuk mengganti kekurangan jam produktif RPL karena sejak awal semester kalian disibukkan oleh kegiatan 17an dan setelah itu materi ditujukan untuk persiapan dan pelaksanaan PI. Kebanyakandarikalianbelummendapatkanmateriyangseharusnyakaliandapatkandalamsemesterini. Oke, langsung saja. Tutorial ini adalah tutorial mandiri, maksudnya kalian dapat mengerjakan tugastugas dalamtutorialinikapanpundandimanapun.Kalianbisamengerjakannyadilab,ngrental,ditempatPI,pinjam komputere pakde ataudi warnet.Yangpasti,kaliannantinyaakanmengumpulkantugastugaskalianitudalam sebuahfolderyangsudahditentukandikomputerlabwetan.Kalaumaukalianbisasayaberijamtambahandi luarjamsekolahuntukmenggunakanlab.Bisa di harimingguyangtenangatausoreharisetelahsekolah tentu saja selamasayatidakadaacara. AdaduamateriyangakansayaujikandiUUBnantiyaitu HTML dan Photoshop.Meskipun dulukalianpernah mempraktekkanmaterimateritersebuttetapikemarinhanyajugklepattidaksecaratuntas,maklumwaktunya cuma dikit, bahkansekarang mungkin banyak yang sudah lupa. Untuk itu materi tersebut sayaharap dapat tercakupdalamtutorialini.

Tutorial ini akan kita awali dengan membuat sebuahdirektori(folder) khusus yang akankita gunakan untuk menyimpanseluruhfileyangakankitabuatnanti.Setiapanakharusmengerjakanapayangsayatulispada modulinidannantinyaakansayanilai. Supayaseragamdansayatidak usahminum poldanmig saat mencaripekerjaankalianmakakita seragamkan pembuatanfoldersebagaiberikut: 1. Buatsebuahfolderdidrive D:dankasihnama T2RPL1untukanakRPL1 dan T2RPL2untukanak RPL2. (siapayang tidakbisa membuatfolder?) 2. Oke,sekarangmasukkefolderbarutersebut. 3. Buatlagisebuahfolderdidalamnyadan.kasihnamasesuai nama kalian. 4. Bagiyangmemakai1komputeruntukbeberapaorangmakaharusbuat foldersejumlahorangyang memakaikomputertersebut dandiberi nama sesuainama masingmasing. 5. Sebagaigambaran,direktori dalamkomputerkaliandapatterlihat sepertiberikut:
Data (D:) T2RPL1 Finda Fitri T2RPL2 Teguh Intan

Nah, pekerjaan kalian nantinya harus disimpan pada folder kalian masingmasingsupaya saya tidak pusing mencarinya, jugasebagailatihanbagikalianuntukmemanajemenfilesupayatidakberserakan.

Latiyangaweweb 2

yudwiantoro2008(yudwi_an@yahoo.co.id)

bagian pertama

HTML dasar

Latiyangaweweb 3

yudwiantoro2008(yudwi_an@yahoo.co.id)

HTML Dasar
A. Internet
Secara harfiah, internet (kependekan dari 'interconnectednetworking') yaitu rangkaian komputer yang terhubung di dalam beberapa rangkaian. Internet merupakan jaringan global yang menghubungkan suatu network dengan network lainnya di seluruh dunia, TCP/IP menjadi protokol penghubung antara jaringan jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW) merupakan bagiandariinternet yangpalingcepatberkembangdanpalingpopuler. WWW bekerjaberdasarkanpadatigamekanismeberikut: Protokol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP)adalahprotokoluntuk WWW. AddressWWWmemilikiaturanpenamaanalamatwebyaitu URL(Uniform Resource Locator)yangdi gunakansebagai standard alamat internet. HTML digunakanuntukmembuatdokumentyangbisadiaksesmelaluiweb

B. HTML
HTML atau Hypertext Markup Language merupakan salah satu format standar yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan di halaman web. Sebenarnya, dokumen HTML hanyalah sebuahdokumenteksbiasadan disebutsebagai Markup Languageyakni bahasa yang mengandung tanda atau mark yangdisebut tag tertentuyangdigunakanuntukmengaturformattampilansuatu dokumen. Yang bisa kalianlakukandenganHTMLdiantaranya: Mengontroltampilandariwebpagedankontennya. Mempublikasikan dokumen secara online sehinggabisadiakses darijaringan/internet Membuat onlineform yangbisadigunakan untukmenanganipendaftaran,transaksisecara online. Menambahkanobjectobjectseperti image, audio, video danjuga java applet dalam dokumen HTML.

HTTP atau Hypertext Transfer Protocol merupakan protokol yang digunakan untuk mentransfer data atau dokumenyangberformatHTMLdari web serverke browser web.DenganHTTPinilahyangmemungkinkan kalian menjelajahinternetdan melihathalamanweb.

Contoh browser web: Internet Explorer dan Mozilla Firefox

C. Browser dan Editor

BROWSER WEB Browsermerupakansoftwareyangdiinstalldimesinclientyangberfungsiuntukmenterjemahkantagtag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, NeoPlanet, Mozilla Firefox, Opera, Google Chrome danmasihbanyakyanglainnya.

Latiyangaweweb 4

yudwiantoro2008(yudwi_an@yahoo.co.id)

EDITOR Program yang di gunakan untuk membuat dokumen HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Notepad, FrontPage,Dreamweaver, .

UntukmembuatdokumenHTMLhanyadibutuhkansebuahaplikasi teks editor biasa.Padabagianinikalian akanmembuatdanmengeditdokumenHTMLsecaratradisionalyaitumenulisnyadenganeditorteksseperti Notepad, Wordpaddll.Carainimemangtidakefisiendantidakpraktisapalagiuntukdokumendenganlayout yangcukupruwettapikalianharusmelewatibagianiniuntukmemahamiHTML. HariginisangatjarangorangyangmembuatdokumenHTMLdenganmenulisnyasecaramanual.Adabanyak sekali aplikasi yang khusus untuk membuat halamanhalaman web (HTML authoring) dengan lebih mudah seperti Macromedia Dreamweaver, Microsoft Frontpage, Adobe GoLive dll. Tetapi tanpa mengetahui dasardasarHTML kalian tidak akan memperoleh hasilyang maksimal. Mengapa? Meskipunaplikasiaplikasitersebutmemberikansolusitetapitidakseluruhnyadapatdilakukansecaraotomatis, kita masih harus mengedit kodekode HTML dengan tangan (ngetik) supaya sesuai dengan keinginan kita. Oleh karena itu penting untuk memahami editing dengan cara tradisional sebelum menggunakan tooltool khusustersebut. Dalamtutorialinikalianakanmempelajaridasardasardaridesainweb.Yangdibutuhkanhanyasebuahword processor. Kalian bisa menggunakan Notepad, WordPad, MS Word atau yang lainnya. Tapi yang paling mudah adalah menggunakan Notepad. Setelah kalian memahami betul semua tagtag dasar HTML, pada semester2nantikalian akanbelajarmembuathalaman webdenganmenggunakanwebtool.

D. Struktur Dasar Html

Dalam penggunaannya, sebagian besar kode HTML harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dandiakhiridengan </namatag> (terdapattanda garismiring / ). StrukturdasardokumenHTMLberisi elemenelemenatautagsebagaiberikut:
<html> <head> <title>JUDULWEB</title> </head> <body> ISIWEBBERADADISINI </body> </html>

Keterangan:
<html>..</html> Mendefinisikanbahwateksyangberadadiantarakeduatagtersebutadalahfile

HTML.
<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tagtag TITLE,BASE,ISINDEX,LINK,SCRIPT,STYLE &META. <title> .. </title> Sebagai titel atau judul halaman/form. Kalimat yang terletak di dalam tag ini

akanmunculpadabagian palingatasbrowserAnda(padatitlebar). <body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text,link,vlink,alink,leftmargin dantopmargin.

Catatan: SemuadokumenHTMLmempunyaiekstensi *.html (atau *.htm). Semuahalaman web (homepage) harus mempunyaifile index.html.File index.htmlsecaraotomatisakan dipanggilketikaalamatsebuahdomainataudirektoritempatmenyimpanfiletersebutdibukadibrowser. Terdapat pengecualian pada microsoft yang menggunakan web server IIS, file yang dipanggil adalah default.html.

Latiyangaweweb 5

yudwiantoro2008(yudwi_an@yahoo.co.id)

Tugas01
Oke,sekarangmarikitamulaitugaspertama.Sebelumnyasayakatakannantikalianakan banyak mengetik, tetapijangansamakantutorialinidengantutorialmengetik.Kalianharuspahamdenganapayangkaliantulis. Karenainiadalah pengganti waktu belajar kalian yang hilang Jadi,jangan cumawatonnyonto! Sekarang buatdulusebuahfolderdidalamfoldernamakaliandengannama Tugas01,sepertiberikut:
Data (D:) RPL1 Finda Fitri Tugas01

SELURUHFILEYANGKALIANBUATPADABABINISIMPANDIFOLDER TUGAS01 ]!

1. body.html
Tag <body>, digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halamanweb.Didalamtaginibisadiletakkanberbagaipageattributeseperti background, bgcolor, text,link,vlink,alink,leftmargin dantopmargin.

Background =digunakanuntukmengaturlatarbelakangdengan gambar/image. Bgcolor =digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagaidefaultnya. Teks =digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warnadefault. Link =untukmengaturwarnalinkdokumendengan warnadefault biru Vlink =untukmengaturwarnavisitedlinkdokumen dengan warna defaultungu Alink =digunakanuntukmengaturwarnaactivelink dokumendengandefaultmerah. TUGAS: BukaprogramNotepaddantuliskankodeberikut:
<html> <head> <title>TEKSINIADADITITLEBARDANTASKBAR</title> </head> <body>INIADALAHBAGIANBODY</body> </html>

Simpan file tersebut mengunakan FileSave dengan nama body.html di dalam folder Tugas01 dan setiap anak harus bikin di dalam foldernya masingmasing! Ingat, pada bagian Save As Type pilih All Files.

Tutup Notepadnya, kemudian cari file tersebut dan klik ganda untuk membukanya. Akan terbujka web browseryangmenampilkanhalamanwebyangkaliantulistadi.Nah,ingatkanpelajaranini?

Latiyangaweweb 6

yudwiantoro2008(yudwi_an@yahoo.co.id)

Key,tutupwebbrowsernya.Editfilehtmltadi,caranya: klik kananpadafilehtmllalupilih Open With kemudianpilih Notepad. Ubahfiletersebutpadabagianbodymenjadisepertiberikutkemudiansimpanmengunakan FileSave lalu lihathasilnyamenggunakanbrowserweb.Amatilalucatatkalau adayang perlu dicatat.
<bodybgcolor="#FFFFCC">INIADALAHBAGIANBODY</body>

Editlagifiletersebutpadabagianbodymenjadisepertiberikut,simpandanlalulihathasilnya.
<bodybgcolor=beigetext=#003399>INIADALAHBAGIANBODY</body>

Untuk beberapa keadaan kita perlu memberikan komentar pada halaman dokumen HTML kita. Seperti padapemrogramandesktopdahulu.CaramemberikankomentarpadahalamanHTMLadalahdiantara tanda<! dan >sepertiberikut:
<bodybackground="C:\WINDOWS\system32\setup.bmp" bgcolor=beigetext=#FF0000>INIADALAHBAGIANBODY <!Teksinitidakkelihatan,hahaha...> </body>

Simpandanlihathasilnya.Editlagifiletersebutpadabagianbodymenjadisepertiberikut,simpandanlalu lihathasilnya.
<bodybackground="C:\WINDOWS\system32\setup.bmp" bgcolor=beigetext=#FF0000>INIADALAHBAGIANBODY <!Teksinitidakkelihatan,hahaha...></body>

SeharusnyaterdapatgambarbackgroundwindowsXPdibrowser IE / Internet Explorer (karenatutorial ini khusus labwetanyangmenggunakan OS Windows XP SP2,untukOSyanglaindapatmencarialamatfile gambar yanglain bmp/jpg/gif). Untukbeberapabrowser (misalnya Firefox),terdapatperbedaandalam cara menuliskan path (alamat)filedalam komputerlokal.Untuklebihamannyatuliskansebagaiberikutdan lihathasilnya,samakah?
<bodybackground="file:///C|/WINDOWS/system32/setup.bmp" bgcolor= beigetext=#FF0000>INIADALAHBAGIANBODY <!Teksinitidakkelihatan,hahaha...></body>

Oke,sekarangtutupsemuaaplikasi,akansayakasihsedikitmateritentangtagbody.Nantisetiaphabis tugas,dibawahiniakansayasisipkanmateriringkasapayangkalianpelajaritadi.

2. heading.html
Sekarang materi tentang teks heading. Heading: <H#>..</H#> Digunakan untuk mengatur ukuran huruf pada header. # mempunyai nilai antara 1 sampai 6 atau antara <H1> sampai <H6>, dengan <H1> merupakanukuranterbesardan <H6> merupakan ukuranterkecil. TUGAS: Buka Notepadnya, buat dokumen html dan simpan dengan nama heading.html. Untuk menghematkatakata,jikasayakatakan buat sebuah dokumen html makatulislahteksberikut:
<html> <head> <title>TUGASLEZ</title> </head> <body> </body> </html>

Latiyangaweweb 7

yudwiantoro2008(yudwi_an@yahoo.co.id)

Oke? Sekarangpadabagianbodykitaubahmenjadibegini (gunakan copy paste biar cepat!):

<bodybgcolor="#CCFFFF"> <H0>Heading0</H0> <H1>Heading1</H1> <H2>Heading2</H2> <H3>Heading3</H3> <H4>Heading4</H4> <H5>Heading5</H5> <H6>Heading6</H6> <H7>Heading7</H7> </body>

Simpan dan lihat hasilnya. Perhatikan apayang ditampilkan, terutama untuk Heading 0 dan Heading 7, catatpengamatankalian.Modulnyagakpapa diorekorek buatcatatansupayakaliantidak lupa.

3. break.html
LineBreakTag<BR> (Breakline)digunakanuntukmemulaibarisbarupadadokumenHTML,tag

inifungsinyamiripdengancarriagereturn(ENTER). TUGAS: BukaNotepadnya,buat dokumen html dansimpan dengannama break.html. Ubahbagianbody menjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=moccasin> sepasangtanganyanglelah: tariannyaselalusalah genggamannyasatudemisatulepas sentuhannyataklagiemas </body>

Cobabandingkanjikakitaubahmenjadisepertiini:
<bodybgcolor=moccasin> sepasangtanganyanglelah<BR> tariannyaselalusalah<BR> genggamannyasatudemisatulepas<BR> sentuhannyataklagiemas<BR> </body> NoLineBreak<NOBR> Bilataginidigunakanmakateksyangpanjangtidaksecaraotomatispindah

barisbawahnyabilabarispertamasudahterlalupanjang.

Latiyangaweweb 8

yudwiantoro2008(yudwi_an@yahoo.co.id)

4. font.html
Font <FONT> Digunakan untuk mengaturhuruf dokumen HTML. Tag FONT mempunyai attribut, yaitu:

SIZE,FACE,COLOR. SIZE Digunakanuntukmengatur ukuran font.Ukuranfontyang digunakanberkisarantara1 7 dengan1merupakanukuranterkecil dan7merupakanukuranterbesar.

TUGAS:BukaNotepadnya,buat dokumen htmldansimpandengannama font.html.Ubahbagian bodymenjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya

<bodybgcolor=Bisque> <H1>UKURANFONT:</H1> <fontsize=1>ukuranfont1</font><br> <fontsize=2>ukuranfont2</font><br> <fontsize=3>ukuranfont3</font><br> <fontsize=4>ukuranfont4</font><br> <fontsize=5>ukuranfont5</font><br> <fontsize=6>ukuranfont6</font><br> <fontsize=7>ukuranfont7</font><br> <fontsize=8>ukuranfont8</font><br> <fontsize=9>ukuranfont9</font><br> </body>

Perhatikanpadafontsize8dan9.Apakahukurannyasemakinbesar.Tidakkan?Itukarena ukuran maksimal font adalah 7 sehinggajikakitatuliskan100punukurannyaakantetapsamadengan7 FACE Digunakanuntukmengatur jenis atau nama font.Andabisa memilihmaksimal3jenisfont yangmasingmasingdipisahkanolehkoma. Jika nama font terdiri dari dua kata maka diapit dengan tanda petik ganda. Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengakses web kita. Pendeknya kita tidak usah menggunakan fontfont yang bentuknyaanehaneh,gunakansajafontstandar.TapibilaAndainginmenggunakanfont yangsedikit"aneh"Andabisa menggunakan graphic (gambar).

TUGAS: Buka file font.html dengan Notepad, caranya: klik kanan pada file html lalu pilih Open With kemudianpilih Notepad.Ubahlahdenganmemberitambahanberikutdidalamtagbody:
<BR><BR><H1>JENISFONT:</H1> <FONTSIZE=7FACE=COURIER>sepasangtanganyanglelah</FONT> <FONTSIZE=7FACE="ARIALBLACK">tariannyaselalusalah</FONT> <FONTSIZE=7FACE="COOPERBLACK">genggamannyasatudemisatulepas</FONT> <FONTSIZE=7FACE="ARIAL,HELVETICA">sentuhannyataklagiemas</FONT> </body>

Perhatikanpenulisan<FONTFACE=COURIER>dan<FONTFACE="ARIALBLACK">. COLOR Digunakanuntukmengaturwarnafont.Didefinisikandenganmenggunakannilai RGB/HEX ataubisajugalangsung menggunakannamawarna(misalnya:red,yellow,dll.). Pengaturanwarna dalam dokumen HTML menggunakan mode kombinasiRGB (red, green, blue). Setiapwarnaditampilkandalamduadigitnilaiheksadesimal(0,1,2,...,F).Setiapbagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untukwarnakuning,dibuatdenganpencampuranwarnasebagaiberikut:
Red FF Green FF Blue 00.

Berartiuntukwarnakuningdapatdibuatdengankode#FFFF00.

Latiyangaweweb 9

yudwiantoro2008(yudwi_an@yahoo.co.id)

Di sampingitu, pembuatan warna dapat jugadibuat dengan langsung menggunakan nama warna dalam bahasainggris,misalnyakuningadalah yellow. BerikutiniwarnawarnayangdapatdigunakandalamhalamanHTML. Hexadecimal #000000 #FF0000 #00FF00 #0000FF #FFFF00 #00FFFF #FF00FF #FFFFFF Color Black Red Lime Blue Yellow Aqua Fuchsia White Hexadecimal Color #FFA500 Orange #4B0082 Indigo #006400 DarkGreen #FFDEAD NavajoWhite #AFEEEE PaleTurquoise #D87093 PaleVioletRed #000080 Navy dll.(banyak!)

TUGAS: Buka file font.html dengan Notepad, caranya: klik kanan pada file html lalu pilih Open With kemudianpilih Notepad.Ubahlahdenganmemberitambahanberikutdidalamtagbody:
<BR><BR><H1>WARNAFONT:</H1>

<fontsize=7Face=verdanacolor=red> ABANG</font><br> <fontsize=7Face=verdanacolor=#FF0000>ABANG</font><br> <fontsize=7Face=verdanacolor=lime> IJO </font><br> <fontsize=7Face=verdanacolor=#00FF00>IJO </font><br> <fontsize=7Face=verdanacolor=blue> BIRU </font><br> <fontsize=7Face=verdanacolor=#0000FF>BIRU </font><br> </body>

Jadipenulisanwarnadapatdilakukandenganmenulisnyadalambentuk hexadecimal ataunama warna.

Base Font: <BASEFONT> Digunakan untuk mendefinisikan "defaulttext". Attribut sama dengan attributFONT.TagFONTakan mengoverwrite settingpadaBASEFONT,contoh: <basefontsize=2face="arial,helvetica"color="#ff0000">

5. format.html
Berikut ini tagtag yang berhubungan dengan pengaturan teks. Perhatian: Semua tag di bawah ini membutuhkan tag penutup. <B> <I> <U> <TT> <S> <P> <PRE> <DFN> <BLINK> <STRONG> Bold text Italictext Underscore
Typewriter

Strikeoutmenggambargaris didalamteks Menuliskanparagraf. PreformattedText Definition. Style untuk definisi dari suatu istilah. Browser menampilkan definisi dengan cetakmiring. Textberkedip(lebihbaikjangandigunakan) Strong

<ADDRESS> Italic <CITE> Digunakanuntukquotingtext

Latiyangaweweb 10

yudwiantoro2008(yudwi_an@yahoo.co.id)

<CODE> <SAMP> <KBD> <BIG> <SMALL> <SUP> <SUB>

Monospaced font (digunakan bila Anda ingin (memperlihatkan)kodeHTMLpadadokumenHTMLAnda)

meletakkan

Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan)kodeHTMLpadadokumenHTMLAnda)

Monospaced font (digunakan bila Anda ingin (memperlihatkan)kodeHTMLpadadokumenHTMLAnda) meletakkan

Ukuranteksakanlebihbesarsatuukuran
Ukuranteksakanlebihkecilsatuukuran

Membuattekssuperscript membuattekssubscript

<ABBREV> Abbreviations <ACRONYM> Untukakronim <PERSON> <Q> <VAR> Digunakan untuk indexing Membuatshortinlinequotation Membuatvariablename,selaludalamitalics.

TUGAS: Buka Notepadnya, buat dokumen html dan simpan dengan nama format.html. Ubah bagian bodymenjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=beige> TEKS:<B>Bold</B><BR><BR> TEKS:<I>Italics</I><BR><BR> TEKS:<U>Underline</U><BR><BR> TEKS:<S>Strikeout</S><BR><BR> TEKS:<SUP>Superscript</SUP><BR><BR> TEKS:<SUB>Subscript</SUB><BR><BR> TEKS:<TT>Tipewriter</TT><BR><BR> TEKS:<BLINK>Blink</BLINK> </body>

6. preformat.html
PreformattedText:<PRE>. Digunakanuntukmengaturformat tampilanagarsesuaidenganaslinya.

TUGAS:BukaNotepadnya,buat dokumen htmldansimpandengannama preformat.html.Ubahbagian bodymenjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya

<bodybgcolor=beige> <H1>Preformatting</H1> <H4>TanpaPreformat:</H4> XXXXX X x Xxxxxxxxxxxx X x XXXXX <H4>MenggunakanPreformat:</H4> <Pre> XXXXX X x Xxxxxxxxxxxx X x XXXXX </Pre> </body>

Cobabandingkan duabagiantekspadacontoh diatas.Ketorotoperbedaannya?

Latiyangaweweb 11

yudwiantoro2008(yudwi_an@yahoo.co.id)

7. karakter.html
SetelahkalianperhatikantatacarapenulisanHTML,tagtagHTMLsemuanyadiapitolehkurungsegitiga kiri(<)dankanan(>).Bagaimanakalaukalianinginmenuliskantanda<atau>dalamhalamanweb kalian? Itu adalah pertanyaan yang bagus, dan masalah tersebut tidak hanya pada keduasimbol tersebut. Ada sejumlah karakter yang tidak dapat diketik langsung pada bagian body HTML, termasuk symbol untuk bahasaasing. Lihat tabel berikut untuk tata cara pengetikkan untuk menampilkan karakter khusus pada halamanhtmlanda. Entitas
&copy &reg &#153 &nbsp &lt &gt &amp

Keterangan
copyrightsymbol registeredtrademarksymbol trademarksymbol nonbreakingspace lessthansymbol greaterthansymbol ampersand

Contoh
< > &

Untuksimbolyanglainnyacobakaliankerjaakntugasberikut,lalucatat hasilnya! TUGAS:BukaNotepadnya,buat dokumen htmldansimpandengannama karakter.html.Ubahbagian bodymenjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya

<bodybgcolor=beige> <H1>Menggunakankarakterkhusus:</H1> &lt&cent&pound&yen&copy&reg&deg&times &frac14&frac12&frac34&gt </body>

wis dong?Lanjut...

8. list.html
Daftar/listadalahmerupakankumpulanteksyangdisusunsedemikianrupasehinggaitemitemyangada memilikinomorurutataubisajugaberupatandatandakhusus/symbol.Terdapattigatipelistyangdapat digunakan,yaitu: Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet (tidak bernomor). List entries didefinisikan dengan tag <LI>. Pada jenis ini tidak memerlukan pengurutan data. Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan atribut TYPE kedalam tag <UL> dengan nilai circle untuk bentuklingkarantengahnyaputih,squareuntukbentukkotakpadathitamdan discbentuklingkaranpadawarna hitam. Ordered Lists: <OL> Juga digunakan untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan tag <LI>.Atribut yangadapadaOrderedListadalahTYPEdanSTART. Untuk attribut START, dapat menggunakan angka yang menunjukkan nilai awal daripenomoran. UntukattributTYPE,dapatmenggunakan: 1 Defaultnumbers,1,2,3, dst. A Hurufbesar. A,B,C, dst. A Hurufkecil.a,b,c, dst. I Romawihurufbesar.I,II,III, dst. i Romawihurufkecil,i,ii,iii, dst.

Latiyangaweweb 12

yudwiantoro2008(yudwi_an@yahoo.co.id)

Definition Lists: <DL> digunakan untuk menjelaskan istilahistilah. Definition List dinyatakan dengantag<DL>dandiantaratag tersebutditambahkantag<DT>DefinitionTerm yaitubagianistilah yangdijabarkandantag<DD> DefinitionDatayangmerupakan penjabarandariistilah. TUGAS:BukaNotepadnya,buat dokumen htmldansimpandengannama list.html.Ubahbagianbody menjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=beige> <H1>UNORDEREDLIST</H1> <ultype=circle> <li>Turu <li>Maem </ul> <ultype=square> <li>Ngliwet<li>Ngumbai </ul> <ultype=disc> <li>Ngarit<li>Siram </ul> <H1>ORDEREDLIST</H1> <H3>OLdari1</H3> <oltype=1> <li>SD<li>SMP<li>SMA </ol> <H3>OLdari12</H3> <olstart=12> <li>UGM<li>UI<li>ITB </ol> <H1>DEFINITIONLIST</H1> <dl> <dt>BagianPertama. <dd>SubBagianPertama. <dd>SubBagianKedua </dl> </body>

9. garis.html
<HR>, digunakanuntuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.

Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut ALIGN digunakanuntuk menentukan posisi garis (kanan, kiri atautengah). AtributNOSHADEmenyatakanbahwagaristersebutditampilkan tanpabayangbayang3D. TUGAS:BukaNotepadnya,buat dokumen htmldansimpandengannama karakter.html.Ubahbagian bodymenjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=beige> <H1>Menggunakan&ltHR&gtuntukmembuatgarishorisontal</H1> <H3>garis:</H3> <HR><HR> <H3>lebargaris:</H3> <HRwidth=35><HRwidth=35%> <H3>alingmentgaris:</H3> <HRwidth=75%align=right><HRwidth=500align=left> <H3>tebalgaris:</H3> <HRsize=2><HRsize=10><HRsize=20> <H3>Garistanpabayangan:</H3> <HRsize=2noshade><HRsize=10noshade><HRsize=20noshade> <H3>warnagaris:</H3> <HRsize=5><HRsize=15color=green><HRsize=30color=purple> </body>

Latiyangaweweb 13

yudwiantoro2008(yudwi_an@yahoo.co.id)

10. image.html
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda. Tag yang digunakan adalah
<imgsrc=namafilegambar>

Attribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace, border,width danheight. Untuk mengatur ukuran gambar, menggunakan attribut width daan height Jika attribut ukuran gambartidak dituliskan,makagambarditampilkansesuaidenganukuranasllinya.. Attributalign digunakanuntukperataanposisigambar. Attributborder,digunakan untukmemberibingkaipadagambar. Sedangkanalt,digunakanuntuk memberiketeranganpadagambarjikamouseberadadiatasnya. Untuk mengaturletakgambardapatmenggunakanattributhspacedanvspace. TUGAS:Sayaasumsikankalianmenggunakan OS Windows XPyangmemilikisebuahfilepadadirektori system: C:\WINDOWS\system32\oobe\images\wpakey.jpg dan kita akan mencoba untuk menampilkannyadibrowser. Buka Notepadnya,buat dokumen html dansimpan dengannama image.html. Ubahbagianbodymenjadi sepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=beige> <b><fontsize=2Face=tahomacolor=black> <imgsrc="file:///C|/WINDOWS/system32/oobe/images/wpakey.jpg" alt="kunci"> <imgsrc="file:///C|/WINDOWS/system32/oobe/images/wpakey.jpg" hspace=20vspace=5width=800height=125align="left"border=2> <imgsrc="file:///C|/WINDOWS/system32/oobe/images/wpakey.jpg" hspace=10vspace=5width=100height=125align="right"border=20> </font> </body>

Jikaditempatkaliantidakadagambartersebutmakaalternatifnyakitakopisebuahfilegambarkefolder Tugas01,misalnyakitakopifilebernama inulkepleset.jpg makadalamfolderTugas01 harus adafile inulkepleset.jpg sepertigambaranberikut:

Jadi, file inulkepleset.jpg dan image.html beradadalamsatufolder.

Latiyangaweweb 14

yudwiantoro2008(yudwi_an@yahoo.co.id)

Makakodediatas boleh digantimenjadisepertiberikut:

<bodybgcolor=beige> <b><fontsize=2Face=tahomacolor=black> <imgsrc="inulkepleset.jpg"alt="inul"> <imgsrc="inulkepleset.jpg"hspace=20vspace=5 width=800height=125align="left"border=2> <imgsrc="inulkepleset.jpg"hspace=10vspace=5 width=100height=125align="right"border=20> </font> </body>

SehinggahasiltampilannyapadaIEkuranglebihsepertiini:

Filejenenge inulkok gambare bebekyo? Wahjanranyambungki

11. table.html
Tablemerupakancarauntukmenampilkaninformasidalamhalamanweb denganbentukkolomdanbaris. Kebanyakan web site dirancang dengan menggunakan Tabel. Layaknya sebuah spreadsheet yang memiliki sel dan berisi angkaangka, tabel dalam web juga mempunyaisel yang berisi link, gambar dan text. Membuat Tabel Terdapattigatagatauelemen utamayangdigunakandalampembuatan table,yaitu:<TABLE>, <TR>,dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan
</TABLE>

<TABLE>digunakanuntukmendefinisikanpembuatantabel. Taginimemilikiattribut:
align perataan:ratakiri(left),tengah(center)ataukanan(right). valign mengaturbentukperataansecaravertikal bgcolor mengaturwarnalatarbelakang(background)daritabel. background menentukangambaryangdigunakansebagai backgroundtabel color Untukmengaturwarnasuatuseldalamtabel border menentukanukuranbordertabel(dalampixel). rowspan menggabungkanbeberapabaris colspan menggabungkanbeberapakolom cellpadding jarakantaraisicelldenganbatascell(dalampixel). cellspacing mengaturspasi/jarakantarcell(dalampixel). width menentukanlebartabeldalampixelataupercent. height Menentukantinggi table Latiyangaweweb 15

yudwiantoro2008(yudwi_an@yahoo.co.id)

<TR> digunakanuntukmembuatbarisbaru(padatabel).Terdiridari atribut: align perataan:ratakiri(left),tengah(center)ataukanan(right). bgcolor warnalatarbelakangdaribaris. valign perataanvertikal:top,middleataubottom. <TD> digunakanuntukmembuatkolombarupadatabel.Attributnya adalah:
align untukmenentukanperataankolom background untukmenentukanimageyangdigunakansebagailatar belakangdarikolom. bgcolor untukmenentukanwarnalatarbelakang colspan lihatgambarcontoh height untukmengaturukurantinggicelldalampixels. nowrap untukmembuatsupayaisidarikolomtetapberadapada satubaris. rowspan lihatgambarcontoh valign untukmengaturperataanvertikal:top,middleataubottom. width untukmenentukanlebarkolomdalampixelataupercen.

Membuat Warna Pada Tabel Didalampewarnaantabelkitadapatmengaturwarnalatarbelakangdanteks sertawarnabordernya.Untuk menentukan warna latar belakang pada suatu tabel, gunakan atribut BGCOLOR sedangkan untuk warna borderdapat menggunakanbeberapaatributsbb: Atribut
BORDERCOLOR BORDERCOLORLIGHT BORDERCOLORDARK

Fungsi Mengubahwarnakeseluruhanborder Mengubahwarnaborderbagianatasdankiri Mengubahwarnaborderbagianbawahdankanan

TUGAS: Buka Notepadnya, buat dokumen html dan simpan dengan nama image.html. Ubah bagian bodymenjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=beige> <tablewidth=100%border=2align=center bordercolor=#EFFBFCbgcolor=#cc3300cellspacing=4cellpadding=8> <fontface=arialsize=2color=white> <tr> <tdbgcolor=#DFF9F9colspan=2align=center>Kelas</td> <tdbgcolor=#DFF9F9align=centerrowspan=2>Keterangan</td> </tr> <tr> <tdwidth=200bgcolor=#DFF9F9align=center>I</td> <tdwidth=200bgcolor=#DFF9F9align=center>II</td> </tr> <tr> <td>RatnaBudiSetyorini</td> <td>WilujengHandayani</td> <tdalign=center>Lunas</td> </tr> </table> </body>

Latiyangaweweb 16

yudwiantoro2008(yudwi_an@yahoo.co.id)

12. form.html
Digunakanuntukmenerimamasukan/inputdariuserdanmemproseshasilinputantersebutdiserver.User menerima informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa TEXTBOX, CHECKBOX,RADIO BUTTON,PUSH BUTTON,LIST MENU danlainnya. Sintakpenulisanformadalah:
<formmethod=postatauget action=program_pemroses> elemenelemenFORM </form>

Atribut METHOD mempunyai dua nilai yaitu POST dan GET. Metode GET mengirimkan data pada server dengancarameletakkandatapadabagianakhir URL yangditunjuk.Metode POST mengirimkandatanya secara terpisah. Jika data masukan banyak, lebih disarankan untuk menggunakan metode post. Atribut ACTION berisiURL dariprogramyangdipanggilolehform tersebut. TextBOX Textboxdigunakanuntukmemasukkandatastringsebanyaksatubaris.Cara penulisannyaadalah: <inputtype=textname=textbox1size=xxvalue> Atribut TYPE untuk menentukan jenis masukan yang berupa TEXT (textbox), NAME adalah identifikasi/penamaanelemeniniuntukdibacaolehprogrampemrosesnantinya.Atribut VALUE untuk memberi nilai suatu masukan. Sedangkan atribut SIZE digunakan untuk menentukan panjang atau banyaknya karakter sebuah masukan. Untuk menyembunyikan masukan yang ditulis user dalam textbox, dapat menggunakan atribut TYPE=PASSWORD, sehingga tampilan dalam textbox menjadi karakter"*". CHECKBOX Checkboxdigunakanuntukmemberibeberapapilihankepadauser,sehingga userdapatmemilihsalah satu,lebihdarisatupilihanatautidakmemilihsama sekali. Tatacarapenulisannyaadalah:
<inputtype=checkboxname=checkbox1value=onatauoffchecked>Pilihan1

Dimanaattribut TYPE menentukanjenismasukanyangberupa CHECKBOX, NAME adalahidentifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, VALUE menentukan apakah pada keadaan awalCheckbox ini terpilih (ON) atau tidak (OFF). Parameter CHECKED menentukan apakah Checkbox sedangdicentangatautidak RADIO BUTTON Digunakanuntukmembuatpilihan.Userdapatmemilihsalahsatupilihan yangtersedia,sehinggauser tidakbisamemilihkurangataulebihdarisatu pilihanyangdisediakan.AtributCHECKED memberitanda bahwapilihantersebutsedangdiaktifkan, VALUE adalahhargadaripilihanDigunakanuntukmembuat menupilihan. Caramenuliskannyaadalah:
<selectname=menu1> <optionvaluepilihan1>Pilihan1 <optionvaluepilihan2>Pilihan2 <optionvaluepilihan3>Pilihan3 dst </select>

TagOPTION berfungsiuntukmenampilkanpilihanpilihanyangakantersedia. Setiappilihanditentukan isinyadenganparameterVALUE.

Latiyangaweweb 17

yudwiantoro2008(yudwi_an@yahoo.co.id)

TEXT AREA Elemeninidigunakanuntukmenampilkanmasukanberupatextboxyangmampumenerimamasukan berupastringlebihdarisatubaris. Sintaknyaadalah:

<textareaname=textbox1rows=xxcols=xx> IsiAwal </textarea>

Parameter NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, COLS danROWS adalahukurankolomdanbaris textboxinidalambanyaknyakarakter ELEMEN TOMBOL Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol SUMBIT untuk mengirimkan data ke pemroses di server, RESET untuk mengulangi/mengosongkan isian form atau NORMAL yang tidak berfungsi apapun sebelum kita mendefinisikan sebuah fungsi untuknya. Format penulisannyaadalah:
<inputtype=submitvalue=OKname=tombol1>untuktombolSUBMIT <inputtype=resetvalue=resetname=tombol2>untuktombolRESET

Berikutiniadalah contohFormdankodenya:
<formmethod=post> <tableborder=0> <tr> <tdwidth=70>Nama</td> <tdwidth=10>:</td> <tdwidth=30><inputtype=textname=namasize=30></td> </tr> <tr> <tdwidth=70>Alamat</td> <tdwidth=10>:</td> <tdwidth=30> <inputtype=textvalue=Jl.name=alamatsize=30></td> </tr> <tr> <tdwidth=70>Homepage</td> <tdwidth=10>:</td> <tdwidth=30> <inputtype=textvalue=http://name=pagesize=30></td> </tr> </table> </form> <formmethod=post> PilihProgramKeahlianAnda<br> <h3>DaftarProgramKeahlianSMKMaarif1Temon</h3> <inputtype=checkboxname=c1checked> RekayasaPerangkatLunak <br> <inputtype=checkboxname=c2> Akuntansi <br> </form>

Textbox

Checkbox
<formmethod=post> <h3>PilihSalahsatu<br> PendidikanTerakhirAnda:</h3> <inputtype=radiovalue="SD"checkedname=sekolah>SD<br> <inputtype=radiovalue="SLTP"name=sekolah>SLTP<br> <inputtype=radiovalue="SMU"name=sekolah>SMU<br> <inputtype=radiovalue="S1"name=sekolah>S1<br> <inputtype=radiovalue="S2"name=sekolah>S2<br> </form>

RadioButton

Latiyangaweweb 18

yudwiantoro2008(yudwi_an@yahoo.co.id)
<formmethod=post> <h3>Prodi</h3> <selectname=prodi> <optionvalue=DPselected>DesktopProgramming</option> <optionvalue=WD>WebDesign</option> <optionvalue=WP>WebProgramming</option> <optionvalue=GD>GraphicDesign</option> </select> </form>

DropDownMenu
<formmethod=post> <h5>IsikanPesandankesanAnda:</h5> <textareaname=pesanrows=5cols=40> PesanAnda: </textarea> </form>

TextArea
<form> <inputtype=submitvalue=kirimname=b1> UntuktombolSUBMIT<BR> <inputtype=resetvalue=batalname=b2> UntuktombolRESET<BR> </form>

ElementTool

Latiyangaweweb 19

yudwiantoro2008(yudwi_an@yahoo.co.id)

TUGAS:BukaNotepadnya,buat dokumen htmldansimpandengannama form.html.Ubahbagianbody menjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya

<bodybgcolor=beige> <h3><palign=center>DATASISWASMKMAARIF1TEMON</p></h3> <formmethod=post> <tableborder=0align=centerwidth=500> <tr> <tdwidth=11%>Nama</td> <tdwidth=3%>:</td> <tdwidth=86%><inputtype=textname=namasize=20></td> </tr> <tr> <tdwidth=11%>Alamat</td> <tdwidth=3%>:</td> <tdwidth=86%> <inputtype=textvalue=Jl.name=alamatsize=30></td> </tr> <tr> <tdwidth=11%valign=top>Jurusan</td> <tdwidth=3%valign=top>:</td> <tdwidth=86%> <inputtype=radiovalue=RPLname=jurchecked> RekayasaPerangkatLunak<br> <inputtype=radiovalue=AK name=jur> Akuntansi<br> </td> </tr> </table> <palign=center> <inputtype=submitvalue=kirimname=b1> <inputtype=resetvalue=batalname=b2> <hr> </form> </body>

13. link.html
Digunakanuntukmembuatlink/penghubungantarasuatuhalamandengan halamanlain,keURLlain,juga digunakandalamsatuhalamanuntukberpindahkesubjudulyanglainataukelokasitertentudalamsatu halaman yangsama. Sintaktaglinkadalahsebagaiberikut:
<ahref=url_tujuan>nama_link</a> url_tujuan bernilailokasiataunamafileyangakandituju.Sedangkan nama_linkadalahnilaiyangakan ditampilkandibrowsersebagaitekslinkatautombolpenghubung.Tulisanyangterletakantara <A> dan </A> akan terdapatgarisbawahdanatributwarnanyadapatdiaturdalamtag<body>.

Adapunmacammacamlinkadalahsebagaiberikut: Link ke Dokumen Lain Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda, anda harus membuat dokumenyang dituju/target dandisimpandalam direktori tertentu(dokumen target harus ada),baikpadadirektoriyangsamaatauberbedadengan dokumenyangaktifsekarang. Link ke bagian tertentu dalam dokumen yang sama Untuk membuat link ke bagian tertentu dalam dokumen yang sama, harus diberikan nama anchor. Perbedaan dengan link yang berbeda dokumen adalah tujuan/target link, jika dalam dokumen yang sama yang dituju adalah nama anchor tetapi kalau dokumen yang beda yang dituju adalah nama file/dokumenyangbersangkutan.

Latiyangaweweb 20

yudwiantoro2008(yudwi_an@yahoo.co.id)

Untuk memberi nama anchor, atribut yang dipakai adalah NAME pada tag anchor <A> dan untuk membuatlinkcukupmemberikantanda#setelah namafiledalamURL. Misal:
<ahref=#php>Bab1</a>

ataudapatditulislengkap:
<ahref=belajar_php.html#php>Bab1</a>

danuntuknamaanchornya:
<aname=php>AdaapadenganPHP?</a>

Link ke alamat URL atau Website UntukmembuatlinkkealamatURLadalahdenganmenambahkan:

http://nama_URL

Contoh:
<ahref=http://www.smkmaarif1temon.edu>www.smkmaarif1temon.edu</a>

Link ke Alamat Email Linkemailadalahmembuatlinkpadateks,jikatekstersebutdiklikmakaakanmenampilkanprogram pengirimanemailyangterdapatpadakomputeryang dipakaiuntukmengaksesdataatautekstersebut secara otomatis. Untuk membuat link ke alamat email hanya menambahkan atribut mailto:alamat_email kedalamtag<AHREF> Misalnya:
<AHREF="mailto:yudwi_an@yahoo.co.id">Kirimemail</a>

Link File yang akan didownload Link file dalam hal ini adalah apabila dikik pada teks tersebut maka proses selanjutnya adalah mendownloadfileyangtercantumpadadokumen tersebut.Formatpenulisannyaadalah
<ahref=nama_file>

Misal:
<ahref=antivirus.zip>Downloadantivirus</a> <ahref=latih.doc>DownloadlatihanHtml</a> <ahref=mysql.exe>DownloadMYSQL</a>

TUGAS: Pada komputersaya terdapat file start_fr.htm dan stonehenge.jpg di dalamdirektori System. Kitaakancobamenghubungkansebuahfilehtmlyangkitabuatdengafilefiletersebut. BukaNotepadnya,buat dokumen htmldansimpandengannama link.html.Ubahbagianbodymenjadi sepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=moccasin> <H1>MenghubungkanDokumen</H1> <ahref="file:///C|/WINDOWS/Help/Tours/htmlTour/start_fr.htm">Tutorial </a><BR> <ahref="file:///C|/WINDOWS/Web/Wallpaper/stonehenge.jpg">Gambar</a><BR> </body>

Latiyangaweweb 21

yudwiantoro2008(yudwi_an@yahoo.co.id)

14. menu.html
Padabgianini kitaakancobamelink seluruh fileyangtelahkitabuattadidalamsebuah dokumenhtml. TUGAS: BukaNotepadnya,buat dokumen html dansimpan dengannama menu.html. Ubahbagianbody menjadisepertiberikut,simpanlalubukadenganbrowserweb,bagaimanahasilnya
<bodybgcolor=beige> <H3>FileBuatanSaya</H3> <b><fontface="verdana"size="2"> <ultype=disc> <li><ahref="body.html">body</a><HR> <li><ahref="heading.html">heading</a><HR> <li><ahref="break.html">break</a><HR> <li><ahref="font.html">font</a><HR> <li><ahref="format.html">format</a><HR> <li><ahref="preformat.html">preformat</a><HR> <li><ahref="karakter.html">karakter</a><HR> <li><ahref="list.html">list</a><HR> <li><ahref="link.html">link</a><HR> <li><ahref="garis.html">garis</a><HR> <li><ahref="image.html">image</a><HR> <li><ahref="table.html">table</a><HR> <li><ahref="form.html">form</a><HR> </ul> </font></b> </body>

15. frame.html
Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagibagi menjadi beberapa dokumen HTML, dimana setiap bagian merupakan satu halaman HTML terpisah. Sehingga tampilanhalamanHTML yangsalahsatuataubeberapabagianbergantigantiisinyasedangkanbagian lain tetap sehingga dapat menghemat bandwidth internet dan mempercepat proses download secara keseluruhan. Format:nyaadalah:
<html> <head> </head> <frameset> <framesrc> </frameset> </html>

AturanpenggunaanatributROWSdanCOLSpadaframesetadalah:
<framesetrows=tinggi_baris,tinggi_baris,> <framesetcols=lebar_kolom,lebar_kolom,>

AtributatributyangdigunakandalamFRAMEadalah: Atribut
FRAMESETCOLS FRAMESETROWS FRAMESRC NOFRAME

Fungsi Membuatframevertikaldenganlebarkolomtertentu Membuatframehorizontaldengantinggibaristertentu MemasukkandokumenHTMLkedalamFRAME Memasukkanbodyteksuntukbrowser

Latiyangaweweb 22

yudwiantoro2008(yudwi_an@yahoo.co.id)

Modelmodelframedancontohpembuatannya:
1 <FRAMESETcols="*,140"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESRC="menu.htm"NAME="Frame2"> </FRAMESET> 2 <FRAMESETcols="100,*"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESRC="menu.htm"NAME="Frame2"> </FRAMESET> 3 <FRAMESETrows="100,*"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESRC="menu.htm"NAME="Frame2"> </FRAMESET> 4 <FRAMESETrows="*,60"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESRC="menu.htm"NAME="Frame2"> </FRAMESET> 5 <FRAMESETrows="*,60"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESETcols="50%,50%"> <FRAMESRC="menu.htm"NAME="Frame2"> <FRAMESRC="menu2.htm"NAME="Frame3"> </FRAMESET></FRAMESET> 6 <FRAMESETcols="*,50%"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESETrows="15%,15%,70%"> <FRAMESRC="menu.htm"NAME="Frame2"> <FRAMESRC="menu2.htm"NAME="Frame3"> <FRAMESRC="menu3.htm"NAME="Frame4"> </FRAMESET></FRAMESET> 7 <FRAMESETcols="50%,50%"> <FRAMESETrows="50%,50%"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESRC="homepage2.htm"NAME="Frame2"> </FRAMESET> <FRAMESETrows="50%,50%"> <FRAMESRC="menu.htm"NAME="Frame3"> <FRAMESRC="menu2.htm"NAME="Frame4"> </FRAMESET></FRAMESET> 8 <FRAMESETrows="15%,70%,15%"> <FRAMESRC="homepage.htm"NAME="Frame1"> <FRAMESETcols="15%,70%,15%"> <FRAMESRC="menu.htm"NAME="Frame2"> <FRAMESRC="menu2.htm"NAME="Frame3"> <FRAMESRC="menu3.htm"NAME="Frame4"> </FRAMESET> <FRAMESRC="homepage.htm"NAME="BIG"> </FRAMESET></FRAMESET>

Latiyangaweweb 23

yudwiantoro2008(yudwi_an@yahoo.co.id)

TUGAS: BukaNotepad, tulislah sebuah dokumenseperti berikut, simpan dengan nama frame.html lalu bukadenganbrowserweb,bagaimanahasilnya
<html> <head> <title>HASILTUGASKUtitle> </head> <framesetrows=15%,*framespacing="0"border="0"frameborder="0"> <framename=atassrc=judul.htmlscrolling="no"noresize> <framesetcols=25%,*framespacing="0"border="0"frameborder="0"> <framename=kirisrc=navigasi.htmlnoresize> <framename=kanansrc=body.htmlscrolling="yes"noresize> </frameset> </frameset> </html>

Perhatikanapayangkalianlihat. Seharusnyaakantampaksepertiini:

Framebagiankiridanatasmenampilkanpesan error:pagecannotbedisplayed,yangberartibrowser tidakbisamenampilkanhalamanyangdimaksud.Halamanyangmana? Cobalihatpadakodeframe.htmldiatas: Framebagianatasmenunjukpadafile judul.html (bariske6).Adatidakfile judul.html? kitabelumbuatkan? Framebagianatasmenunjukpadafile navigasi.html (bariske8).Kitajugabelumbuat file navigasi.html? Framebagiankananmenunjukpadafile body.html (bariske9).Adatidakfile body.html? Ya, kita sudah bikin tadi di awal bab ini dan seharusnya pada frame tersebut tampil halamanwebdari body.html. Okey,sekarangkitabikin2fileyangbelum kitabuattadi.

Latiyangaweweb 24

yudwiantoro2008(yudwi_an@yahoo.co.id)

16. navigasi.html
File navigasi.html inisayamaksudkansebagainavigasiuntukmelinkseluruhdokumenyangtelahkita buattetapimenampilkannyapadaframekanan dari file frame.html diatas. TUGAS: BukaNotepad, tulislahsebuahdokumensepertiberikut,simpandengannama navigasi.html lalu bukadenganbrowserweb,bagaimanahasilnya
<html> <head> <title>TEKSINIADADITITLEBARDANTASKBAR</title> </head> <bodybgcolor=moccasin> <b><fontface="verdana"size="2"> <ultype=disc> <li><ahref=body.html target=kanan>body</a><HR> <li><ahref=heading.htmltarget=kanan>heading</a><HR> <li><ahref=break.htmltarget=kanan>break</a><HR> <li><ahref=font.htmltarget=kanan>font</a><HR> <li><ahref=format.htmltarget=kanan>format</a><HR> <li><ahref=preformat.htmltarget=kanan>preformat</a><HR> <li><ahref=karakter.htmltarget=kanan>karakter</a><HR> <li><ahref=list.htmltarget=kanan>list</a><HR> <li><ahref=link.htmltarget=kanan>link</a><HR> <li><ahref=garis.htmltarget=kanan>garis</a><HR> <li><ahref=image.htmltarget=kanan>image</a><HR> <li><ahref=table.htmltarget=kanan>table</a><HR> <li><ahref=form.htmltarget=kanan>form</a><HR> <li><ahref=menu.htmltarget=kanan>menu</a><HR> </ul> </font></b> </body> </html>

Perhatikankodediatasdanbandingkandenganmenu.html,pahamibedanya!

17. judul.html
File judul.html iniberisinamakalianyang tampilpadaframeatasdihalamanweb. TUGAS: BukaNotepad, tulislahsebuahdokumensepertiberikut,simpandengannama navigasi.html lalu bukadenganbrowserweb,bagaimanahasilnya
<html> <head> <title>JUDUL</title> </head> <bodybgcolor=Orange> <center> <fontface=arialsize=5color=LightYellow> <b>.:::NAMAKALIAN:::.</b> </body><br> <fontface=arialsize=4color=blue> <i>kelasRPLX</i> <font> </center> </body> </html>

Perhatikan kode di atas, NAMA KALIAN kalian ganti dengan nama lengkap kalian masingmasing dan kelasRPLX kaliangantisesuaikelaskalian,RPL1atauRPL2.

Latiyangaweweb 25

yudwiantoro2008(yudwi_an@yahoo.co.id)

18. akhirnya...
Sekarangsimpansemuapekerjaankalianlalaubukafileframe.html,lihatapayangtampil.Cobalahlink linkpadaframenavigasi,adayangbelumterhubungatautidak.Jikasemuanyasudahberesberartitugas kalianpadababinisudahselesai. Alhamdulillah NOTES: Tuliskodediatasbagianperbagian,amatihasilnyadan catat pengamatan kalian. Apa yang saya tekankan di sini adalah: BELAJAR MANDIRI. Teknologi begitu cepat. Kalian semua harus mampudanbisamenguasaidanmempelajarinyasecaramandiri. Manusia hidup sebagai makhluk sosial, saling membutuhkan satu sama lain. Oleh karena itu banyak sekali tutorialtutorial/bukuyangdapatkalianperoleh:bisapinjambukudaripacar,cariartikeldiinternetataucari bukudiperpustakaan(kalauperpustakaansekolahbukunyaminim,cobalahlihatlihatdiperpustakaandaerah atauperpustakaanumumlainnya,kalodiwatesyadipojoklorkulonalunalun),tukubukudanmasihbanyak sumber lainnyadibumiini. Tutorialtutorialtersebutbertujuanuntukmembantusesamamempelajarihalhalyangsudahmerekaketahui. Walaupun kebanyakan kita harus bayar (mereka para penulis kan juga butuh uang?) cari saja yang gratis, banyakkokdiinternet.Jadikalaujamjamkosongngenetnyajangancumacarigame,caridongtutoriall!!! Membuatcatatancatatankecilmerupakansalahsatucaramembiasakandiri menuliskanpengalamankalian, semacamreferensiataulogbook.Catatanitusuatusaatnantimungkinakansangatbergunabagikaliandan bagiorangbanyak.Buatlahringkasanyangsimpledanmudahdipahami,pinjamkanpadatemanjikamereka membutuhkan.Janganpelitpelitsiapatahubanyakorangyangdapatmemetikmanfaatnya.Kitadapatpahala daninsyaAllohkitajugatidakakandipelitioranglain.Denganmenuliskanapayangkaliantahu,berartikalian telahsatulangkahdalambelajar:amalkanlahilmuyangtelahkalianpelajari meskipunsedikit. Suatu saat nanti kalian akan menjadi guru bagi diri kalian sendiri dan guru bagi masyarakat banyak, itulah harapansaya. Okey?

Latiyangaweweb 26

yudwiantoro2008(yudwi_an@yahoo.co.id)

LAMPIRAN
Berikutinihasiltampilandibrowserdarifilefileyangtelahkalianbuat:

body.html

heading.html

break.html

font.html

format.html

preformat.html

Karakter.html

list.html

garis.html

image.html

tabel.html

form.html

Latiyangaweweb 27

yudwiantoro2008(yudwi_an@yahoo.co.id)

link.html

link.html jikalinktutorialdiklik

menu.html

frame.html

navigasi.html

judul.html

hasilakhir frame.html framekananpadahalaman font.html

Latiyangaweweb 28

yudwiantoro2008(yudwi_an@yahoo.co.id)

Tugas02
Buatlah sebuah folder dengan nama Tugas02 di dalam folder nama kalian (nang jejere folder Tugas01). Buatlahfilefilehtmlsesuaidengantampilanberikut: >>NAMA.COM<<
SitusPribadiNamakalian2008

Nama File : header.html barispertamateksheading1 bariskeduateksberukuran 3 formatteksbold semuajenisteksverdana aligncenterpage warnabackground moccasin

.:Selamatdatangdisitusku:.
kontenkontenkontenkontenkonten kontenkontenkontenkontenkonten kontenkontenkontenkontenkonten kontenkontenkontenkontenkonten kontenkontenkontenkontenkonten kontenkontenkontenkontenkonten kontenkontenkontenkontenkonten

Nama File : home.html teksjudulberupaheading3 aligncenterpage teksisiberukuran3formatnormal garis:tebal2 lebar 100%warna hijau warnabackground beige

.:Galeri:.

Nama File : galeri.html teksjudulberupaheading3aligncenterpage teksisiberukuran3formatnormal kotakkotakberisigambar pengaturanletakdanukuran gambar terserah warnabackground beige

.:DataPribadi:. NoInduk:isi
Nama Alamat Kelas Jurusan isi isi isi isi

Nama File : data.html teksjudulberupaheading3aligncenterpage teksisiberukuran3formatnormal semuajenisteksverdana buatkotakmenggunakan tabel aligncenterpage warnatabelterserah warnabackground beige

.:SarandanKritik:.
Dari Alamat

kirim

batal

Nama File : saran.html teksjudulberupaheading3aligncenterpage teksisiberukuran3formatnormal semuajenisteksverdana kotakke1dan2adalahtextbox kotakke3adalah textarea kotakke5dan6adalah button warna background beige Nama File : index.html framedenganlayoutsepertgambardisamping framedibagi:menjadi:atas,tengahdanbawah atasberisi header.html tinggi 20% tengahnerisi home.html tinggi 90% bawahberisi nav.html

Latiyangaweweb 29

yudwiantoro2008(yudwi_an@yahoo.co.id)

home|galeri|datadiri|saran

Nama File : nav.html semuateksberukuran 2 tipeverdana aligncenter ofpage homemelinkkehomehtml galerimelinkkegaler.html datadirimelinkkedata.html saranmelinkkesaran.html semualinkditujukanpadaframetengah background moccasin

Berikutiniadalahtampilantugasdiataspadahalamangaleri:

Latiyangaweweb 30

yudwiantoro2008(yudwi_an@yahoo.co.id)

Tugas03
Buatlahsebuahfolderdengannama Tugas03didalamfoldernamakalian(berartinangjejerefolder Tugas01 dan Tugas02).Buatlahfilefilehtmlsesuaidengantampilanberikut:

Caramembuatnya: 1. BukaNotepad,buatdokumenHTMLdansimpandengannama order.html 2. Buatlayouthalamandengantabelsepertiini: FORM ORDER BARANG

IsikanDatadataAnda Namadepan NamaAkhir Umur

BagaimanamenghubungiAnda?

AlamatRumah Kota KodePos Negara NomorTelepon TanggalBerakhir

CreditCardVisaM/C Jenisbarang

TerimakasihatasOrderAnda!

Latiyangaweweb 31

yudwiantoro2008(yudwi_an@yahoo.co.id)

3. Selanjutnyapadacellcelltabeldiberiformsepertiberikkut:
radio button text text

FORM ORDER BARANG

IsikanDatadataAnda Namadepan NamaAkhir Umur

BagaimanamenghubungiAnda?

AlamatRumah Kota KodePos Negara NomorTelepon TanggalBerakhir

CreditCardVisaM/C Jenisbarang

TerimakasihatasOrderAnda!
combo box, dengan pilihan: 1. Komputer 2. Printer 3. Scanner 4. 4 buah text 2 buah text text area

4. Simpandanlihathasilnyadenganbrowser.

Evaluasi
Jawablah pertanyaanpertanyaan berikut! 1. Apakahyangdimaksuddengan a) HTML b) HTTP c) URL d) halamanweb e) webbrowser 2. Jelaskanmasingmasingfungsidaritagtagberikut:
a) b) c) d) e) <body> <h1> <p> <br> <hr>

3. Apakahfungsidari: tag, link, form dan frame dalampembuatanweb? 4. Apaperbedaan frame dan frameset? 5. Apaperbedaan checkbox dan radio button?

Maaf,untukbagiankeduadanselanjutnyabelumsayabuat.InsyaAllohminggudepansayaselesaikan. Soalnyasudahmalamdan sudah capek.. taklerendisik Mohontutorialinidipelajaribaikbaik dandikerjakansungguhsungguh semogaadamanfaatnya

Latiyangaweweb 32

yudwiantoro2008(yudwi_an@yahoo.co.id)

bagian kedua

Layout Web dengan Adobe Photoshop

Latiyangaweweb 33

yudwiantoro2008(yudwi_an@yahoo.co.id)

bagian ketiga

Slicing, Optimasi Gambar dan Editing file HTML

Latiyangaweweb 34

yudwiantoro2008(yudwi_an@yahoo.co.id)

Latiyangaweweb 35