Tutoriall Web Design HTML

WEBDESIGNHTML(HypertextMarkupLanguage)Iniadalahbagianpertamadarimodulwebdesign,padamoduliniberisitentangperkembangan,sejarah,dasardasardanreferensitagHTML

20092010

arissupriadi(aarriiss.com)SMKPerguruanCIKINI

20092010

SMK PERGURUAN CIKINIJl. Alur Laut Blok NN No. 1 Plumpang, Jakart a Utara

Program Keahlian Kelompok Teknologi Komputer dan Jaringan

Modul Program Mata Diklat Web Design--HTML Disusun oleh Aris Supriadi (aarriiss.com) (2

HTML

SEJARAHHTML

Hypertext Markup Language (html) adalah bahasa yang digunakan untukmenulis halamanweb. htmlmerupakanpengembangandaristandarpemformatandokumen teksyaituStandardGeneralizedMarkupLanguage (SGML). html sebenarnya adalah dokumenASCII atau teks biasa, yang dirancang untuk tidaktergantungpadasuatusistemoperasitertentu.htmldibuatolehTimBernersLeeketikamasihbekerjauntukCERNdandipopulerkanpertamakaliolehbrowser Mosaic. Selama awal tahun 1990 html mengalami perkembangan yang sangat pesat. Setiappengembangan html pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versisebelumnya. Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (InternetEngineeringTaskForce).html2.0inimerupakanpenyempurnaandarihtml+(1993).html3.0(1995)memberikankemampuanlebihdaripadaversisebelumnya.SebuahusahadariWorldWideWeb Consortiums (W3C) htmlWorkingGroup pada tahun 1996menghasilkan html 3.2. html versi inisecara resmiditerbitkanpadabulan Januari1997.htmlversi terbaruadalahhtml4.01yangdikeluarkansecara resmiolehW3Cpada tanggal24April1998.htmlmerupakanperbaikandarihtml4.0yang lebihduluditerbitkan.(18Desember1997).

DASARDASARHTML

Mendesainhtmlberartimelakukan suatu tindakanpemrograman.Namunhtmlbukanlah sebuahbahasapemrograman. Namun html hanyalah berisi perintahperintah yang telah terstruktur berupa tagtagpenyusun.Menuliskan tagtaghtml tidaklah sebatashanyamemasukkanperintahperintah tertentuagarhtmlkitadapatdiaksesolehbrowser.Mendesainhtmladalahadalahsebuahseni tersendiri.Homepageyangmerupakanimplementasidarihtmladalahrefleksidariorangyangmembuatnya.Untukitukitaperlumendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang danbermanfaat.Mendesainhtmldapatdilakukandenganduacara:

1. MenggunakanhtmlEditor,sepertiMicrosoftFrontPage,AdobeDreamweaver,danlainlain.2. Dengancaramenuliskansendirisecaramanualsatupersatutagtaghtmlkedalamdokumenhtml.

Ada kelebihan dan kekurangan dari dua cara di atas. Cara pertama kelebihannya adalah html Editormerupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mempublish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologiinternetkedalamdokumenhtmlmakacara inisangatdisukaiolehparapemuladandesaineryangtidakinginbelajarlebihmendalammengenaihtml.Sedangkancarakeduaadalahmenuliskansecaramanualsatupersatu tagtaghtml.Hal inisangatdisarakansulitdikarenakanakanmemakan tenagadanwaktuekstrauntukmelakukannya,ditambah lagiAndaharusmelakukancaracarakonvensionaluntukmelihathasilnyapadawebbrowser.NamunpadacarakeduaadalahdasardarisegalabentukhtmlyangakanAndapelajari,karenadengancara itulahAndaakan lebihpahammengenaicarakerjadanberbagaiperintahyangbiasadipakaipadabahasahtml.



Modul Program Mata Diklat Web Design--HTML

Judul Dokumen html penulisan informasi Web

Daristrukturdasarhtmldiatasdapatdijelaskansebagaiberikut:

a.Tag

Adalahtekskhusus(markup)berupaduakarakter"",sebagaicontohadalahtagdengannamabody.Tag harus ditulis secara berpasangan, yang terdiri atas tag pembuka dan tag penutup (ditambahkankarakter"/"setelahkarakter"




Attributemendefinisikanpropertydarisuatuelementhtml,yangterdiriatasnamadannilai.Penulisannyaadalahsebagaiberikut:

Secara umum nilai attribute harus berada dalam tanda petik satu atau dua. Sebagai contoh, untukmembuatwarnateksmenjadikuningdanlatarbelakanghalamanwebmenjadihitam,penulisannyaadalah

d.Elementhtml

MenyatakanpadabrowserbahwadokumenWebyangdigunakanadalahhtml.Sintaks:

e.Elementhead

Merupakankepaladaridokumenhtml.Tagdantagterletakdiantaratagdantag.Sintaks:

f.Elementtitle

Merupakan judul dari dokumen html yang ditampilkanpada judul jendelabrowser. Tag dan tagterletakdiantaratagdantag.Sintaks:

Judul Halaman HTML

g.Elementbody

Element ini untukmenampilkan isi dokumen html. Tag dan tag terletak di bawah tagdantag.Elementbodymempunyaiattributeattributeyangmenspesifikasikankhususnyawarnadanlatarbelakangdokumenyangakanditampilkanpadabrowser.Sintaks:

text :memberikanwarnapadateksbgcolor:memberikanwarnapadalatarbelakangdokumenhtmlbackground:memberikanlatarbelakangdokumenhtmldalambentukgambarlink :memberikanwarnauntuklinkalink :memberikanwarnauntuklinkyangsedangaktif




vlink :memberikanwarnauntuklinkyangtelahdikunjungi.Contoh:

Judul Dokumen html Penulisan informasi Web Text Link (Tombol) ini berwarna hijau

Catatan : Jika attribute bgcolor dan background keduanya dispesifikasikan maka attribute backgroundyangakandigunakan,akantetapijikanilaiattributebackground(gambar)tidakditemukanpadadokumenhtmlmakaattributebgcoloryangakandigunakan.

Disusun oleh Aris Supriadi (aarriiss.com) (5




REFERENSITAGHTML1. HEADING

Headingadalahsekumpulankatayangmenjadijudulatausubjuduldalamsuatudokumenhtmlhtmlmenyediakanenamtingkatanheading.Headinglevel1biasanyauntukjudulutama.Contoh:Ketiklahdenganprogramnotepaddansimpandengannamafileheading.html

Headings Heading Level 1 Heading Level 2 Heading Level 3 Heading Level 4 Heading Level 5 Heading Level 6

2. PARAGRAF

Untukmembuatparagrafdigunakantag.SetelahtagAndabisamenulisisiparagrafdanparagraftersebutharusdiakhiridenganpenutup.Andabisamengaturposisiparagrafdenganattributalign.Atributaligndiikutidenganposisiyangdiinginkan.left untukratakiri,centeruntukratatengahdanrightuntukratakanan.Contoh:Ketiklahdenganprogramnotepaddansimpandengannamafileparagraf.html





Paragraf Paragraf PERHATIKAN! Paragraf ini rata kanan : If you cant find your answer through the forums, or you wish to contact me for any other reason, the best place to write is [email protected]. SitePoint has a well-manned email support system set up to track your inquiries, and if the support staff are unable to answer your question, they send it straight to me. Suggestions for improvement as well as notices of any mistakes you may find are especially welcome. PERHATIKAN! Paragraf ini berada di tengah : Craig plays bass guitar in Melbourne rock band Look Whos Toxic, 4 and indulges in all the extracurricular activities youd expect of a computer nerd/musician approaching 30 (other than role playingsomehow he never got into that). PERHATIKAN! Paragraf ini rata kiri : All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.




3. BLOCKQUOTE

Perintah tag digunakan untukmenulis kutipan teks.Dengan perintah ini browser akanmenampilkan teksmenjorok kedalam (mengidentasi teks) ataumenampilkan teksdalambentukhurufmiring.Contoh:Ketiklahdenganprogramnotepaddansimpandengannamafileblockquote.html

blockquote Sesuatu yang perlu dicoba Trademark Notice Rather than indicating every occurrence of a trademarked name as such, this book uses the names only in an editorial fashion and to the benefit of the trademark owner with no intention of infringement of the trademark.





4. PREFORMATTEDTEXT

Preformatted Text (pre) digunakan untuk menampilkan teks sama seperti yang Anda ketikkan dalamdokumenhtml.Browser akanmenampikan teks tersebutdalam fontmonospaced, yaitu seperti terlihatdalamteksyangtampilkanolehaplikasiberbasisteks(misalnyatelnet).Contoh:Ketiklahdenganprogramnotepaddansimpandengannamafileperformatted.html

Preformatted Text All rights reserved. No part of this book may be reproduced, stored in a retrieval system or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

5. BEGINROW

Taginidigunakanuntukmenulistekspadabarisberikutnya.Tagmembuatbarisbarutanpamemberibariskosongdibawahnya.Contoh:Ketiklahdenganprogramnotepaddansimpandengannamafilebeginrow.html





Begin Row Software-software yang dibutuhkan yaitu: Adobe Photoshop Adobe Dreamwaever Adobe Flash

6. UKURANFONT

Untukmengaturhurufdokumenhtmldigunakantag.Tagmemilikibeberapaatributuntukmengaturukuranhurufyangakandigunakan.Contoh:Ketiklahdenganprogramnotepaddansimpandengannamafilefont_size.html

Ukuran font Ukuran font 1 Ukuran font 2 Ukuran font 3 Ukuran font 4 Ukuran font 5 Ukuran font 6 Ukuran font 7





7. JENISFONT

Atributfacedigunakanuntukmengaturjenishurufyangdiinginkan.AtributfaceharusdiisidenganstringjenisfontsepertiArial,TimesNewRoman,Verdana,dansebagainya.

Contoh:

Ketiklahdenganprogramnotepaddansimpandengannamafilefont_face.html

Jenis Font Comic Sans MS --- ABCdef123 Small Fonts --- ABCdef123 Symbol --- ABCdef123 WingDings --- ABCdef123

8. ManipulasiTeks





Untukmemberiefek,dekorasiataupunmanipulasitekspadahtmldiantaranyaadalahmenebalkan,tulisanmiring(italic),membericoretandanlainlainnyaContoh:Ketiklahdenganprogramnotepaddansimpandengannamafilemanipulasi_teks.html

Manipulasi Teks Tebal Miring Garis Bawah Tercoret Tercoret juga Berkedip Seperti mesin tik Tulisan Besar Tulisan Kecil Teks subcript Teks supercript

9. WARNAFONT

Atribut color digunakan untukmengaturwarna font yang akan digunakan.Untukmemberi nilai padaatributcolor,adaduacara.CarapertamadenganmenuliskannamawarnasepertiRed,Blue,Yellow,White,dll. Sedangkan cara kedua adalah dengan menggunakan nilai RGB (Red Green Blue) dari suatu warna,misalnyaFF0000untukRed,00FF00untukgreen,dan0000FFuntukBlue.Contoh:Ketiklahdenganprogramnotepaddansimpandengannamafilewarna_font.html





Warna Font Warna merah... Yang ini warna merah Kalo yang ini hijau

10. ORDEREDLIST

Ketiklahdenganprogramnotepaddansimpandengannamafileordered_list.html

Link ORDERED LIST baris pertama baris kedua baris ketiga baris keempat





11. UNORDEREDLISTKetiklahdenganprogramnotepaddansimpandengannamafileordered_list.html Link UNORDERED LIST HTML menyediakan beberapa jenis daftar/list, yaitu : Ordered List / numbered list (daftar berurut / daftar dengan nomor) Unordered List / bulleted list (daftar tak berurut / daftar dengan titik)mempunyai beberapa variasi,yaitu: UnOrdered List dengan tanda cakram (TYPE=disc) UnOrdered List dengan tanda bulatan (TYPE=circle) UnOrdered List dengan tanda kotak (TYPE=square) Menu List (daftar menu) Directory List Definition List (Glossary / daftar istilah)





LATIHAN 01

Buatlahfilehtmlyanghasilnyasepertidibawahini!Simpandengannamafile:(nama_siswa)_Latihan01.html





12. LINK

Perintah anchordigunakanuntukmembuat suatu link.Untukmembuat link kedokumenhtml laindigunakanperintahTekspadabrowser.Anda juga bisamembuat link dalam sebuah dokumen html.Untuk itu perlu dipersiapkan nama anchorlokasi tujuandari link tersebut.Namaanchordibuatdenganmenambahkanatributnamepada tag.Misalnya




---------

Ketiklahdenganprogramnotepaddansimpandengannamafilelinktujuan.html

Link tujuan Maaf, hanya sedikit Chamot Dida Shevchenko kembali





LATIHAN 02

Buatlahfilehtmlyanghasilnyasepertidibawahini!Simpandengannamafile:hal01.html,hal02.html,hal03.htmldansimpansemuafiledalamfolderdengannama(nama_siswa)_latihan02PadatulisanHalaman1dilinkkehal01.html,Halaman2dilinkkehal02.html,Halaman3dilinkkehal03.html.File:hal01.html

File:hal02.html





File:hal03.html

13. TABEL

MembuattabelSimpandengannamafile:tabel_1baris.html

Tabel 1 Baris 1 baris

Keterangan:Lebartabel=200;jumlahbaris=1;jumlahkolom=1

Simpandengannamafile:tabel_2baris.html





Tabel 2 Baris baris ke 1 baris ke 2

Keterangan:Lebarwidthtabel=200;jumlahbaris=2;jumlahkolom=1

LATIHAN 03

Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :(nama_siswa)_Latihan03.htmlKeterangan:

Warnabackground:#66FFCC Cellpadding="2" Border=1 Lebartabel:300





Untukselanjutnyakitaakanmembuatduakolom.

Simpandengannamafile:tabel_2kolom.html

Tabel 2 Kolom Kolom 1 Kolom 2


LATIHAN 04






Title:Latihan04 Warnabackground:#00CCFF Cellpadding="2" Border=3 Lebartabel:800





Kitaakanmembuat2barisdan2kolom.

Ketikfilehtmldibawahinidansimpandengannamafile:tabel_2baris_2kolom.html

Tabel 2 Baris 2 Kolom Kolom 1 , Baris 1 Kolom 2, Baris 1 Kolom 1 , Baris 2 Kolom 2, Baris 2


Simpandengannamafile:table.html

Citra Utama - menyediakan perangkat komputer TOKO KOMPUTER CITRA UTAMA DAFTAR HARGA BARANG Nama Barang Harga Motherboard ASUS Rp. 700.000,- VGA





Rp. 500.000,- Sound Card Rp. 200.000,- Flashdisk 4GB Rp. 100.000,-

Colspan:menggabungkanbeberapakolom

warna-warna warna-warna Hijau Kuning Merah Abu-abu Biru Orange Cokelat Biru muda Merah muda





LATIHAN 05


Title:Latihan05 Warnabackground:#00FFCC Cellpadding="2" Border=2 Lebartabel:600





rowspan:menggabungkanbeberapabaris warna-warna Biru warna-warna Biru muda Hijau Merah Abu-abu Orange Cokelat Merah muda





LATIHAN 06


Title:Latihan06 Warnabackground:#00FFCC Cellpadding="2" Cellspacing=2 Border=2 Lebartabel:600

Padabagianinikitaakanmemasukanbackgroundgambarkedalamtabel

Simpandengannamafile:backgroundimage.html

Background Image Ini adalah image gambar Kita bisa menulis di atas gambar ini





Keterangan:namafilegambariniadalahbattle.jpgdenganmenambahkantagbackground="battle.jpguntukmemasukangambarsebagaibackground.

14. IMAGE

BuatlahfolderwebdesigndifolderMyDocuments

Masukan filefile gambar yang diperlukan ke dalam folder webdesign, contoh file disini adalahbatman.png,men.jpg,pic.jpg,danlainlain





Kitaakanmemasukangambar kehalamanwebsite.Ketiklah filehtmldibawah inidengannotepaddansimpandifolderwebdesigndengannamafile:image.html

Image

Tagutamauntukmemasukangambaradapadabagian




LATIHAN 07

Buatlah satuhalamanwebiste yangmenampilkan(memasukan) suatu gambar, silahkanpilih file gambardenganbebassesuaikeinginan.Simpanfiletersebutdengannama:(nama_siswa)_Latihan07.html

15. BACKGROUNDPADAHALAMAN

Tagyangmenampilkanbackgroundpadahalamanadalah

background="Apple space wallpaper.jpg" Simpandengannamafile:backgroundpage.html

background halaman Background pada halaman ini bergambar logo Aple

Keterangan:namafilegambariniadalahapple.jpg





LATIHAN 08

Buatlah satu halaman webiste dengan background berupa gambar,kemudian masukan 3 gambar padahalamantersebut.Silahkanpilihfilegambardenganbebassesuaikeinginan.Simpanfiletersebut dengannama:(nama_siswa)_Latihan08.html

16. MARQUEE marquee/tulisan bergerak Tulisan ini bergerak




TextField

TextArea

List/Form

RadioButton

CheckBox

Button





Ketiklahfilehtmldibawahinidansimpandengannama:form.html Formulir Formulir Biodata Nama Alamat Tempat Tanggal Lahir 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30




31 Januari Februari Maret April Mei Juni Juli Agustus September Oktober Nopember Desember 2001 2002 2003 2004 2005 2006 2007 2008 2009 Jenis Kelamin Pria Wanita Hobi Olah raga Baca Buku Internetan




LATIHAN 09

Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :(nama_siswa)_Latihan09.html

18. FRAMESET/FRAMEKetiklahfilehtmldibawahinidansimpandengannama:menu01.html Menu 01





Ketiklahfilehtmldibawahinidansimpandengannama:menu02.html Menu 02

Ketiklahfilehtmldibawahinidansimpandengannama:menu03.html Isi Menu Tiga Menu 03

Ketiklahfilehtmldibawahinidansimpandengannama:daftarmenu.html

Menu 1





Menu 2 Menu 3

Ketiklahfilehtmldibawahinidansimpandengannama:frameset.html Frameset

Kemudianbukalahfileframeset.htmlmelaluibrowser!





LATIHAN 10

BuatlahFramesetyangterdiridari3menuataulebih.Jenisisisetiapmenunyadapatberisiapasaja.Simpandalamsatufolderdengannama(nama_siswa)_Latihan10

HTML SEJARAH HTML DASAR-DASAR HTML REFERENSI TAG HTML LATIHAN 01 LATIHAN 02 LATIHAN 03 LATIHAN 04 LATIHAN 05 LATIHAN 06 LATIHAN 07 LATIHAN 08 LATIHAN 09 LATIHAN 10