Pertemuan 2 - Mengenal Tag, Elemen, dan Atribut dalam HTML.pdf
RamaSaktriaWindarta
8 views
14 slides
Sep 16, 2025
Slide 1 of 14
1
2
3
4
5
6
7
8
9
10
11
12
13
14
About This Presentation
"Panduan Lengkap Membangun Website Modern dengan HTML, CSS, dan PHP"
Buku ini merupakan panduan komprehensif untuk mempelajari tiga teknologi fundamental dalam pengembangan website: HTML, CSS, dan PHP. Dirancang untuk pemula hingga tingkat menengah, buku ini mengajarkan cara membangun webs...
Slide Content
PEMROGRAMAN WEB I
Pertemuanke-2
MengenalTag, Elemen, dan AtributdalamHTML
Riad Sahara, S.SI., MT
Pertemuanke-2
MengenalTag, Elemen, dan AtributdalamHTML
Riad Sahara, S.SI., MT
I. Tag
TagadalahsebauhpenandaawalandanakhirandarisebuahelemendiHTML.Tagdibuatdengan
kurungsiku(<...>),laludidalamnyaberisinamatagdankadangjugaditambahkandenganatribut.
Contoh:<p>,<a>,<body>,<head>,dansebagainya.
Tag selaluditulisberpasangan. Ada tag pembukadan adatag penutupnya. Namun, adajuga
beberapatag yang tidakmemilikipasanganpenutup. Tag penutupditulisdenganmenambahkangaris
miring (/) di depannamatag.
2
TagadalahsebauhpenandaawalandanakhirandarisebuahelemendiHTML.Tagdibuatdengan
kurungsiku(<...>),laludidalamnyaberisinamatagdankadangjugaditambahkandenganatribut.
Contoh:<p>,<a>,<body>,<head>,dansebagainya.
Tag selaluditulisberpasangan. Ada tag pembukadan adatag penutupnya. Namun, adajuga
beberapatag yang tidakmemilikipasanganpenutup. Tag penutupditulisdenganmenambahkangaris
miring (/) di depannamatag.
2
3
Apasemuataginiharuskitahafal?
Jawabannya:
Tidakharus,sajajugatidakbisamenghafal
semanya.Cukupketahuitag-tagdasarsaja.
Berikutinidaftar tag-tag dasar, yang
menurutsayaharuskamuingat.
4
Jawabannya:
Tidakharus,sajajugatidakbisamenghafal
semanya.Cukupketahuitag-tagdasarsaja.
Berikutinidaftar tag-tag dasar, yang
menurutsayaharuskamuingat.
4
1.1.Cara Menulis Tag HTML yang Benar
•AdabeberapatagyangwajibadadiHTML.Taginiharuskamutulis..kalautidak,bisajadikodeHTML-
muakanerrormenurutvalidatorW3C.
•BerikutinidaftartagyangwajibadadiHTML:
•<!DOCTYPEhtml>—untukdeklarasitypedokumen;
•<html>—tagutamadalamHTML;
•<head>—untukbagiankepaladaridokumen;
•<title>—untukjudulweb;
•<body>—untukbagianbodydaridokumen.
5
•AdabeberapatagyangwajibadadiHTML.Taginiharuskamutulis..kalautidak,bisajadikodeHTML-
muakanerrormenurutvalidatorW3C.
•BerikutinidaftartagyangwajibadadiHTML:
•<!DOCTYPEhtml>—untukdeklarasitypedokumen;
•<html>—tagutamadalamHTML;
•<head>—untukbagiankepaladaridokumen;
•<title>—untukjudulweb;
•<body>—untukbagianbodydaridokumen.
5
1.1.2.GunakanHurufKecil
Hindarimenggunakanhurufbesardalammenuliskannaamatagdansebaiknyagunakanhurufkecil
saja.
HurufkecillebihgampangdiketikdanjugaakanmembuatkodeHTMLterlihatlebihbersihdanrapi.
Contoh:(bagus)
<body>
<p>BelajartentangtagdiHTML</p>
</body>
6
Hindarimenggunakanhurufbesardalammenuliskannaamatagdansebaiknyagunakanhurufkecil
saja.
HurufkecillebihgampangdiketikdanjugaakanmembuatkodeHTMLterlihatlebihbersihdanrapi.
Contoh:(bagus)
<body>
<p>BelajartentangtagdiHTML</p>
</body>
6
1.1.3.Pastikan Menutup Tag dengan Benar
TagHTMLnantinyaakanditulisbertumpuk-tumpuk.Artinya,didalamtagadataglagi.Kadangkita
seringsalahdalammenutuptagyangbertumpukini.Akibatnya,kodeHTMLkitatidakvalid.
Tapitenangsaja. sayapunya resepagar kamumudahmengingatnya:
7
TagHTMLnantinyaakanditulisbertumpuk-tumpuk.Artinya,didalamtagadataglagi.Kadangkita
seringsalahdalammenutuptagyangbertumpukini.Akibatnya,kodeHTMLkitatidakvalid.
Tapitenangsaja. sayapunya resepagar kamumudahmengingatnya:
7
II. Elemen
ElemendalamHTML adalahsebuahkomponenyang menyusundokumenHTML. Elemenkadang
juga disebutsebagainode, karenaiamerupakansalah satujenisnodeyang menyusundokumen
HTML dalamdiagram HTML tree.
8
ElemendalamHTML adalahsebuahkomponenyang menyusundokumenHTML. Elemenkadang
juga disebutsebagainode, karenaiamerupakansalah satujenisnodeyang menyusundokumen
HTML dalamdiagram HTML tree.
8
Elemendibentukdaritagpembuka,isitag,dantagpenutup.Kadangjugaditambahkanbeberapa
atribut.
Contoh:
9
atribut.
Contoh:
9
III. Atribut
Atributadalahkata khususyang beradadi dalamtag pembuka. Atributjuga disebut
sebagaimodifieryang akanmenentukanperliakudarielemen.
10
Atributadalahkata khususyang beradadi dalamtag pembuka. Atributjuga disebut
sebagaimodifieryang akanmenentukanperliakudarielemen.
10
Atributdapatditambahkanpadaelemenmanapun.Adajugaelemenyangmewajibkanmenggunakan
atributsepertielemen<a>,<img>,<video>,dll.
Contoh:
<ahref="https://petanikode.com">Petanikode.com</a>
Tag<a>adalahtag untukmembuatlink. Tag inimewajibkanmenambahkanatributhrefuntuk
menyatakanhalamantujuandarilink.
11
atributsepertielemen<a>,<img>,<video>,dll.
Contoh:
<ahref="https://petanikode.com">Petanikode.com</a>
Tag<a>adalahtag untukmembuatlink. Tag inimewajibkanmenambahkanatributhrefuntuk
menyatakanhalamantujuandarilink.
11
Jumlahatributpadaelemenbisalebihdarisatu.
Contoh:
<imgsrc="gambar.jpg"width="100"height="100"/>
Atributsrcadalahatributkhususuntuktag<img>yang fungsinyauntukmenentukangambaryang
akanditampilkan. Lalu atrubutwidthdanheightadalahatributyang mengaturukurannya.
12
Contoh:
<imgsrc="gambar.jpg"width="100"height="100"/>
Atributsrcadalahatributkhususuntuktag<img>yang fungsinyauntukmenentukangambaryang
akanditampilkan. Lalu atrubutwidthdanheightadalahatributyang mengaturukurannya.
12
Referensi
1.Muhardian,Ahmad.2016.TutorialHTMLuntukPemula“BelajarHTMLdaridasarhinggabisahostingwebsendiri”.
PETANIKODE.COM
https://www.petanikode.com/tutorial/html/
2.SarwatiRahayu.2011.PemrogramanWeb.UniversitasMercuBuana,Jakarta.
3.Gregorius,Agung.BukuPintarHTML5+CSS3+DreamWeaverCS6.Penerbit:JubileeEnterprise.Yogyakarta,13September
2012.
4.Lubbers,P.,Albers,B.,&Salim,F.(2011).OverviewofHTML5.InProHTML5Programming(pp.1-22).Apress.
5.West,W.,&Pulimood,S.M.(2012).AnalysisofprivacyandsecurityinHTML5webstorage.JournalofComputingSciencesin
Colleges,27(3),80-87.
6.Zibula,A.,&Majchrzak,T.A.(2012,April).Cross-platformdevelopmentusingHTML5,jQuerymobile,andphonegap:realizing
asmartmeterapplication.InInternationalConferenceonWebInformationSystemsandTechnologies(pp.16-33).Springer,
Berlin,Heidelberg.
7.Garaizar,P.,Vadillo,M.A.,&Lopez-de-Ipina,D.(2012,July).BenefitsandpitfallsofusingHTML5APIsforonlineexperiments
andsimulations.In20129thInternationalConferenceonRemoteEngineeringandVirtualInstrumentation(REV)(pp.1-7).
IEEE.
8.Zibula,A.,Majchrzak,T.A.,Krempels,K.H.,&Cordeiro,J.(2012).DevelopingaCross-platformMobileSmartMeter
ApplicationusingHTML5,jQueryMobileandPhoneGap.InWEBIST(pp.13-23).
9.Kim,T.,Kim,B.,&Kim,J.(2013).DevelopmentofaleverlearningwebappforanHTML5-basedcross-platform.InMultimedia
andUbiquitousEngineering(pp.313-320).Springer,Dordrecht.
10.Brandon,D.(2011).HTML5programming:conferencetutorial.JournalofComputingSciencesinColleges,26(5),61-61.
1.Muhardian,Ahmad.2016.TutorialHTMLuntukPemula“BelajarHTMLdaridasarhinggabisahostingwebsendiri”.
PETANIKODE.COM
https://www.petanikode.com/tutorial/html/
2.SarwatiRahayu.2011.PemrogramanWeb.UniversitasMercuBuana,Jakarta.
3.Gregorius,Agung.BukuPintarHTML5+CSS3+DreamWeaverCS6.Penerbit:JubileeEnterprise.Yogyakarta,13September
2012.
4.Lubbers,P.,Albers,B.,&Salim,F.(2011).OverviewofHTML5.InProHTML5Programming(pp.1-22).Apress.
5.West,W.,&Pulimood,S.M.(2012).AnalysisofprivacyandsecurityinHTML5webstorage.JournalofComputingSciencesin
Colleges,27(3),80-87.
6.Zibula,A.,&Majchrzak,T.A.(2012,April).Cross-platformdevelopmentusingHTML5,jQuerymobile,andphonegap:realizing
asmartmeterapplication.InInternationalConferenceonWebInformationSystemsandTechnologies(pp.16-33).Springer,
Berlin,Heidelberg.
7.Garaizar,P.,Vadillo,M.A.,&Lopez-de-Ipina,D.(2012,July).BenefitsandpitfallsofusingHTML5APIsforonlineexperiments
andsimulations.In20129thInternationalConferenceonRemoteEngineeringandVirtualInstrumentation(REV)(pp.1-7).
IEEE.
8.Zibula,A.,Majchrzak,T.A.,Krempels,K.H.,&Cordeiro,J.(2012).DevelopingaCross-platformMobileSmartMeter
ApplicationusingHTML5,jQueryMobileandPhoneGap.InWEBIST(pp.13-23).
9.Kim,T.,Kim,B.,&Kim,J.(2013).DevelopmentofaleverlearningwebappforanHTML5-basedcross-platform.InMultimedia
andUbiquitousEngineering(pp.313-320).Springer,Dordrecht.
10.Brandon,D.(2011).HTML5programming:conferencetutorial.JournalofComputingSciencesinColleges,26(5),61-61.
TerimaKasih
Riad Sahara, S.SI., MT
Riad Sahara, S.SI., MT
Download
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 8
- Slides 14
- Age 77 days
Related Slideshows
11
8-top-ai-courses-for-customer-support-representatives-in-2025.pptx
JeroenErne2
46 views
10
7-essential-ai-courses-for-call-center-supervisors-in-2025.pptx
JeroenErne2
46 views
13
25-essential-ai-courses-for-user-support-specialists-in-2025.pptx
JeroenErne2
37 views
11
8-essential-ai-courses-for-insurance-customer-service-representatives-in-2025.pptx
JeroenErne2
34 views
21
Know for Certain
DaveSinNM
21 views
17
PPT OPD LES 3ertt4t4tqqqe23e3e3rq2qq232.pptx
novasedanayoga46
26 views