modul prakikum pemprograman web ( html ) 1 MODUL PRAKTIKUM PEMPROGRAMAN WEB HTML (Hypertext Markup Language) Oleh :I Nyoman Budi Brata, A.Md SMK NEGERI 1 GIANYAR 2008 By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 2By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 3PENGENALANHTML (HYPERTEXT MARKUP LANGUAGE)

HTML Dasar HTML(HypertextMarkupLanguage)merupakanbahasapemrogramanwebyang digunakanuntukmembuathalamansitus.ntukbelajarHTMLdasarsebaiknyaAnda ketikkan di Notepad. Beberapa istilah yang sebaiknya Anda ketahui sebelum belajar HTML: 1.http 2.url 3.domain 4.hosting 5.browser 6.server 7.internet Tujuan : 1. Memahami tentang konsep WWW 2. Memahami tentang struktur dokumen HTML 3. Memahami tentang dasar-dasar HTML 4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta. A. World Wide Web Internetmerupkanjaringanglobalyangmenghubungkansuatunetworkdengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi. World Wide Web (WWW)merupakanbagiandariinternetyangpalingcepatberkembangdanpaling populer. WWW bekerja merdasarkan pada tiga mekanisme berikut: Protocolstandardaturanyangdigunakanuntukberkomunikasipadacomputer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW. Address WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource Locator) yang di gunakan sebagai standard alamat internet. By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 4HTML digunakan untuk membuat document yang bisa di akses melalui web. B. Pengenalan HTML HypertextMarkupLanguagemerupkanstandardbahasayangdigunakanuntuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu: Mengontrol tampilan dari web page dan contentnya. Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia. Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online. Menambahkanobject-objectsepertiimage,audi,videodanjugajavaappletdalam document HTML. Bentuk umum:

Letakkan judul situs di sini

Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini. Ini halaman situs Anda. Letakkan perintah-perintah HTML di sini.

Setelah diketikkan, Anda simpan dengan nama latihan.html. Untuk mengeceknya Anda double click file yang telah Anda simpan. Sebenarnya Anda dapat menggunakan ekstensi .htm, tetapi supaya sama, maka sebaiknya digunakan ekstensi .html. By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 5 J udul situs di tampilkan disini (dalam html diletakkan diantara ..... Gambar 1.1 Hasil perintah HTML di browser Internet Explorer (IE) CobaAndaketikkanperintah-perintahHTMLberikutini,kemudianAndajalankandi browser !

Latihan Pertamaku

Paragraf ini akan rata kiri
Paragraf ini akan rata kiri
Paragraf ini akan rata kiri

br digunakan untuk ganti baris

Kalimat ini akan dicetak Bold
Kalimat ini akan dicetak Italic
Kalimat ini akan dicetak Bold dan Italic
Perintah hr digunakan untuk membuat garis

By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 6Simpan perkerjaan Anda dengan nama latihan_2.html. J ika benar, seharusnya ditampilkan seperti berikut ini: Gambar 1.2 Hasil dari latihan_2.html Perhatikan perintah berikut ini: tagatributPpadaperintahdiatasdisebutdengantag,sedangkanalign disebut dengan atribut. Atribut merupakan perintah yang menyertai tag. Berikut beberapa perintah HTML dan fungsinya: By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 7 C. Browser dan Editor 1.Browser Browsermerupakansoftwareyangdiinstalldimesinclientyangberfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakanbiasanyaInternetExplorer,NetscapeNavigatordanmasihbanyakyang lainya. 2.Editor ProgramyangdigunakanuntukmembuatdocumentHTML,adabanyak HTMLeditoryangbisaandagunakandiantaranya:MsFrontPage,Dreamweaver, Notepad. By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 8D. BASIC TAG HTML D.1. Struktur HTML Document Document HTML bisa di bagi mejadi tiga bagian utama: 1.HTMLSetiap document HTML harus di awali dan di tutup dengan tag HTML

2.HEAD Bagian header dari document HTML di apit oleh tag di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul dari halamanpadatitlenyabrowser.HeaderjugamemuattagMETAyang biasanyadigunakanuntukmenentukaninformasitertentumengenai documentHTML,andabisamenentukanauthorname,keywords,dan lainyan pada tag META. 3.BODY Document body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page. D.2. Basic HTML Element 1.Block Level Element Block level element yang sering di gunakan : Heading (H1 sampai H6) 2.Paragraf (P) List Item(LI) List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list). Ada dua macam list yang bisa anda tambahkan ke document HTML: 1. Unordered List (Bullet) : 2. Ordered List (Numbering) Contoh : By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 9Definition List Definition List terdiri diapit oleh tag dan tag menentukan definition term serta tag menentukan definition itu sendiri. Horizontal Rules(HR) Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam document HTML. D.3. Pemformatan Page Break Tag
digunakanuntukmemulaibarisbarupadadocumentHTML,tagini fungsinya mirip dengan carriage return. Font Dengan tag anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya. Contoh: By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 10Color Color merupakan attribute yang bisa anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number. #RRGGBB Alignment Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain. Format text Physical Formatting By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 11Preformatted text Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya. Hyperlink Link Address AbsoluteAddress- merupakan full internet address (URL) yang meliputi protocol, network location dan path dan nama file. Contoh: http ://www.yahoo.com/index.html Relatif Address - URL yang tidak menyebutkan protocol dan network locationya (hanya path dan nama filenya). Anchor Anchor tag untuk menentukan hyperlink dalam document HTML. HREF property digunakan untuk menentukan tujuan dari hyperlink tersebut. E.TABLE Membuat table Tag digunaka untuk membuat table dalam document HTML , bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag . Berikutnya kalo anda ingin membuat beberapa baris cell dalam table gunakan tag . Menambahkan Heading cell Untuk menambahkan heading pada table tambahkan tag pada table yang sudah di buat. Pemformatan table UntukmemformatperataantextdidalamtableandabisagunakanattributeAligndanValign (vertical Alignment) By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 12 Merge cell Tag memiliki atribut colspanuntuk merge column dan rowspanuntuk merge baris. Beberapa perintah penting untuk membuat tabel: 1....._merupakanperintahutamadalampembuatan tabel, tabel dengan ketebalan 1px 2. ... _ tag untuk membuat baris 3. ... _ tag untuk membuat kolom/cell 4. colspan _ merge/melebarkan kolom/cell 5. rowspan _ merge/melebarkan baris Atribut tabel dan fungsinya Agar cell dalam tabell kosong, maka dapat digunakan perintah Contoh 1: Tulislah perintah HTML untuk membuat tabel seperti berikut ini: By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 13Jawab:

Latihan Table

SatuDua

TigaEmpat

Contoh 2: Tulislah perintah HTML untuk membuat tabel seperti berikut ini: Jawab:

Latihan Table Dua

Satu

By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 14

DuaTiga

By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 15Latihan3 Tulislah perintah-perintah HTML-nya agar diperoleh bentuk tabel seperti berikut (1 tabel =1 file): 1. 2. 3. 4. 5. 6. By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 16Latihan4 etikklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan g aksimal ! Pahami setiap perintah/tag HTML-nya ! html>head>le>Latihan Pertemuan 2 /head>body bgcolor="#000000" text="#FFFFFF">table border="1" align="center" width="80%">>td colspan="2" align="center" height="100" bgcolor="#3A2BD1">font size="16" face="Arial">SITUSKU.COM
hr width="500">
arquee direction="right">Terdepan Dalam Berita dan osip/td>/tr>tr valign="top"> width="200" height="450" bgcolor="green">Hometd bgcolor="#F75454">Selamat Datang di SITUSKU.COM
itusku.Com akan selalu konsisten dengan berita-berita terbaru dari gala penjuru Indonesia.

apatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip rtis dan kuliner di Indonesia. /td>/tr>

Kyanmtampilan m

Daf t ar Def i ni si

KamusTeknol ogi I nf or masi : HTMLBahasayangdi gunakanunt ukmenyusunWeb menentukan judul tabel l kolom / TH>RedFl ash35. 000RedFi r e60. 00002.an sel dengan tag dan a.Atribut ROWSPAN ditempatkan pada tag ahmar ang>Sol oENGGUNAAN TABEL Tag-tag yang digunakan : Semar ang15. 000TD>11. 0003. DING mengatur jarak teks terhadap tepi kiri. >Hal amanUt amakdengan ODY>gambar
TML>aksud. Menggunakan bookmark pada suatu halaman web yang panjang. A>
Cont ohPenggunaanFor mul i r BuahyangBasketALUE= " Lai n- l ai n" >Lai n- l ai n SELECT>FORM>ubahlahbarisselectdiatasdengan:, perhatikan perbedaannya dengan yang diatas. H. PENder, dan biasanya diletakkan setelah . formasi. elaluiFrontPage2000akanmuncultag TENT=Microsoft FrontPage 4.0>isertakanketikamesinpencariweb(mbah akukanpencarian,gunakanatributkeywords,semakinbanyak words yang dimasukkan, akan semakin besar halaman web disebutkan dalam ncarian. NAME=keywordsCONTENTS=teknologi,komputer, unikasi>Cont ohSELECT- Model Dr opDown my home page O UNDERLINE"> H1>Membuat link tanpa garis bawah: P> his Link , /P> Link ke bagian lain dalam dokumdalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antar bagian, dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada tempat di dalam dokumen akan ada bagian yang bernama, dan di bagian lainnya dapat diletakkan link untuk menuju ke bagian-bagian tersebut. beri nama suatu bagian dalam dokumen, SisipMembuat link yang menuju pada bagian dokumen yang sama dapat dilakukan dengan carayangsamasepertilinkabsolutataurelatif,namunnamadokumendalamlink diganti dengan nama bagian dokumen dengan ditambah tanda #yang ditulis sebelum nama bagian tersebut. Contoh: Bag Contoh Link.html Link relatif
Link Absolut
Link with New Window
hage.html: Yengan ukuran default:engan ukuran ditentukan:
bar1.jpg" WIDTH=200 HEIGHT=300>Y By; I Nyoman Budi Brata,A.Md modul prakikum pemprograman web ( html ) 37 ALI"./images/bihrt05.gif" ALIGN="bottom" WIDTH=75 HEIGHT=50>dalam text P>Sebuah gambar dalam text P>Sebuah gambar dalam text >Bottom Alignment adalah defaultnya dari image lignmentG SRC="./images/bart1.jpg" WIDTH=80 HEIGHT=100>Sebuah gambar31.gif"> GNMENT IMAGE: Contoh:

Sebuah gambar