Tutoriall Web Design HTML
-
Upload
ade-rio-suhardani -
Category
Documents
-
view
38 -
download
0
description
Transcript of 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.
-
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
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"
-
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) (4
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
-
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
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
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (6
-
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) (7
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.
-
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
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.
Disusun oleh Aris Supriadi (aarriiss.com) (8
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (9
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (10
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (11
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (12
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (13
-
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
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)
Disusun oleh Aris Supriadi (aarriiss.com) (14
-
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) (15
-
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
LATIHAN 01
Buatlahfilehtmlyanghasilnyasepertidibawahini!Simpandengannamafile:(nama_siswa)_Latihan01.html
Disusun oleh Aris Supriadi (aarriiss.com) (16
-
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) (17
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
-
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
---------
Ketiklahdenganprogramnotepaddansimpandengannamafilelinktujuan.html
Link tujuan Maaf, hanya sedikit Chamot Dida Shevchenko kembali
Disusun oleh Aris Supriadi (aarriiss.com) (18
-
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
LATIHAN 02
Buatlahfilehtmlyanghasilnyasepertidibawahini!Simpandengannamafile:hal01.html,hal02.html,hal03.htmldansimpansemuafiledalamfolderdengannama(nama_siswa)_latihan02PadatulisanHalaman1dilinkkehal01.html,Halaman2dilinkkehal02.html,Halaman3dilinkkehal03.html.File:hal01.html
File:hal02.html
Disusun oleh Aris Supriadi (aarriiss.com) (19
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (20
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (21
-
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
Untukselanjutnyakitaakanmembuatduakolom.
Simpandengannamafile:tabel_2kolom.html
Tabel 2 Kolom Kolom 1 Kolom 2
Keterangan:Lebartabel=300;jumlahbaris=1;jumlahkolom=2
LATIHAN 04
Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :(nama_siswa)_Latihan04.htmlKeterangan:
Disusun oleh Aris Supriadi (aarriiss.com) (22
-
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
Title:Latihan04 Warnabackground:#00CCFF Cellpadding="2" Border=3 Lebartabel:800
Disusun oleh Aris Supriadi (aarriiss.com) (23
-
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
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
Keterangan:Lebartabel=300;jumlahbaris=2;jumlahkolom=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
Disusun oleh Aris Supriadi (aarriiss.com) (24
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (25
-
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
LATIHAN 05
Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :(nama_siswa)_Latihan05.htmlKeterangan:
Title:Latihan05 Warnabackground:#00FFCC Cellpadding="2" Border=2 Lebartabel:600
Disusun oleh Aris Supriadi (aarriiss.com) (26
-
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
rowspan:menggabungkanbeberapabaris warna-warna Biru warna-warna Biru muda Hijau Merah Abu-abu Orange Cokelat Merah muda
Disusun oleh Aris Supriadi (aarriiss.com) (27
-
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
LATIHAN 06
Buatlah file html dengan hasil seperti di bawah ini dan simpan dengan nama :(nama_siswa)_Latihan06.htmlKeterangan:
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
Disusun oleh Aris Supriadi (aarriiss.com) (28
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (29
-
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
Kitaakanmemasukangambar kehalamanwebsite.Ketiklah filehtmldibawah inidengannotepaddansimpandifolderwebdesigndengannamafile:image.html
Image
Tagutamauntukmemasukangambaradapadabagian
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (31
-
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
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
-
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
TextField
TextArea
List/Form
RadioButton
CheckBox
Button
Disusun oleh Aris Supriadi (aarriiss.com) (33
-
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) (34
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
-
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) (35
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
-
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) (36
-
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
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
Disusun oleh Aris Supriadi (aarriiss.com) (37
-
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
Ketiklahfilehtmldibawahinidansimpandengannama:menu02.html Menu 02
Ketiklahfilehtmldibawahinidansimpandengannama:menu03.html Isi Menu Tiga Menu 03
Ketiklahfilehtmldibawahinidansimpandengannama:daftarmenu.html
Menu 1
Disusun oleh Aris Supriadi (aarriiss.com) (38
-
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
Menu 2 Menu 3
Ketiklahfilehtmldibawahinidansimpandengannama:frameset.html Frameset
Kemudianbukalahfileframeset.htmlmelaluibrowser!
Disusun oleh Aris Supriadi (aarriiss.com) (39
-
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) (40
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