SlideShare uma empresa Scribd logo
1 de 10
Pengenalan HTML
HTML
•
Hypertext Markup Language merupakan
standard bahasa yang digunakan untuk
menampilkan dokumen web
•
Untuk membuat dokumen web yang bisa
ditampilkan di browser, perlu menuliskan
kode HTML baik secara langsung misal
pada editor Notepad, maupun secara tidak
langsung misal melalui software Frontpage
1

Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
TAG
•

•
•
•
2

Kode khusus yang merupakan komponen
fundamental pada dokumen web dan akan
dikenali oleh browser
Nama tag ditulis di dalam tanda < > dan untuk
tag penutup tambahkan tanda </ >
Boleh ditulis dengan huruf besar maupun kecil
Digunakan sepasang, contoh : <H1> dan
</H1>
Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
ATRIBUT dan VALUE
•
Beberapa tag mengandung atribut di
dalamnya, contoh : <p align=“center”>
•
Pada contoh di atas, p adalah nama tag,
sedangkan align adalah nama atribut
•
Atribut pada umumnya melibatkan value,
seperti pada contoh, “center” adalah value
untuk atribut align
3

Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
STRUKTUR DASAR DOKUMEN HTML
•
•
•
•

4

Tag utama adalah <HTML>, <HEAD>, <BODY>
Tag HTML berfungsi untuk menyatakan bahwa
dokumen tersebut adalah dokumen HTML
Tag HEAD berfungsi untuk memberikan
informasi tentang dokumen HTML tersebut
Tag BODY berfungsi untuk menyimpan
informasi atau data yang akan ditampilkan
dalam dokumen HTML
Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
STRUKTUR DASAR DOKUMEN HTML
•

5

Struktur Dokumen akan terlihat :
<html>
<head>
bagian head
</head>
<body>
bagian body
</body>
</html>
Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
TITLE
•
Untuk membuat judul pada suatu dokumen
web, digunakan tag <title>..</title>
•
TITLE bukanlah bagian dari teks dokumen dan
hanya berada pada bagian HEAD
•
TITLE biasanya ditampilkan oleh browser pada
title bar dari jendela browser dan biasanya
berfungsi sebagai label dari jendela browser
tersebut
6

Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
HEADING
•
HTML menyediakan 6 buah tag yang digunakan
untuk mengatur ukuran teks yang dijadikan sebagai
judul dalam badan dokumen
•
Tag-tag judul ini berupa :
<h1> ... </h1> sampai dengan <h6> ... </h6>
•

7

Dapat ditambahkan atribut misal align dengan
value : left, right, justify

Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
PARAGRAF, LINE BREAK dan KOMENTAR
•
Tag <p> digunakan untuk membuat paragraf, dan
dapat ditambahkan atribut misal align
Contoh :
<p align=“center”> ...isi paragraf... </p>
•
Untuk membuat baris baru atau berpindah baris
digunakan tag <br>
•
Untuk memberikan komentar yang nantinya akan
diabaikan oleh browser, digunakan tanda <!– dan
diakhiri dengan -->
8

Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
GARIS HORISONTAL
•
Untuk membuat garis horisontal pada dokumen
web digunakan tag <hr>
•
Atribut pada tag <hr>
size : Menentukan ketebalan garis
width : Menentukan lebar garis
align : Menetukan peletakan teks dalam baris
noshade : Mengatur agar garis tidak disertai
bayangan
9

Pemrograman Web 1

Humisar Hasugian, S.Kom
Pengenalan HTML
GARIS HORISONTAL
•
Untuk membuat garis horisontal pada dokumen
web digunakan tag <hr>
•
Atribut pada tag <hr>
size : Menentukan ketebalan garis
width : Menentukan lebar garis
align : Menetukan peletakan teks dalam baris
noshade : Mengatur agar garis tidak disertai
bayangan
9

Pemrograman Web 1

Humisar Hasugian, S.Kom

Mais conteúdo relacionado

Mais procurados

2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)Nacha Evangelion
 
Pengenalan html
Pengenalan htmlPengenalan html
Pengenalan htmlbakpya
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot comantony96
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xiWyitry Jyanth
 
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheetskunidar
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasaredy sinaga
 
HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)Sahrul Sindriana
 
DOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTMLDOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTMLVictor Dilingham
 
Belajar membuat website 2
Belajar membuat website 2Belajar membuat website 2
Belajar membuat website 2Nadya Olivia
 

Mais procurados (18)

2.struktur dasar html (ok)
2.struktur dasar html (ok)2.struktur dasar html (ok)
2.struktur dasar html (ok)
 
Pengenalan html
Pengenalan htmlPengenalan html
Pengenalan html
 
Html dasar iskaruji dot com
Html dasar   iskaruji dot comHtml dasar   iskaruji dot com
Html dasar iskaruji dot com
 
Membuat web-sederhana-xi
Membuat web-sederhana-xiMembuat web-sederhana-xi
Membuat web-sederhana-xi
 
HTML
HTMLHTML
HTML
 
Buku ajar desain web
Buku ajar desain webBuku ajar desain web
Buku ajar desain web
 
Web html
Web htmlWeb html
Web html
 
Materi Web Statis
 Materi Web Statis Materi Web Statis
Materi Web Statis
 
Module desain web
Module desain webModule desain web
Module desain web
 
3.elemen dasar html (ok)
3.elemen dasar html (ok)3.elemen dasar html (ok)
3.elemen dasar html (ok)
 
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style SheetsLaporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
Laporan Pemrograman Berbasis Web Tugas 4 Cascading Style Sheets
 
Html dasar 123
Html dasar 123Html dasar 123
Html dasar 123
 
Modul web statis dasar
Modul web statis dasarModul web statis dasar
Modul web statis dasar
 
HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)
 
DOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTMLDOWNLOAD CARA MEMBUAT HTML
DOWNLOAD CARA MEMBUAT HTML
 
Belajar membuat website 2
Belajar membuat website 2Belajar membuat website 2
Belajar membuat website 2
 
05 XHTML CSS
05 XHTML CSS05 XHTML CSS
05 XHTML CSS
 
Web
WebWeb
Web
 

Destaque

&quot;Sustainability! - I Want that Job!&quot;
&quot;Sustainability! - I Want that Job!&quot;&quot;Sustainability! - I Want that Job!&quot;
&quot;Sustainability! - I Want that Job!&quot;RobertoPiccioni2
 
Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...
Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...
Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...Simon Funge-Smith
 
Ecological Economics !101Pres
Ecological Economics !101PresEcological Economics !101Pres
Ecological Economics !101PresRobertoPiccioni2
 
GDP and Ecological Economics winslow
GDP and Ecological Economics winslowGDP and Ecological Economics winslow
GDP and Ecological Economics winslowmaggiewinslow
 
Ecological economics. Farber & bradley
Ecological economics. Farber & bradleyEcological economics. Farber & bradley
Ecological economics. Farber & bradleyIntrosust
 

Destaque (6)

&quot;Sustainability! - I Want that Job!&quot;
&quot;Sustainability! - I Want that Job!&quot;&quot;Sustainability! - I Want that Job!&quot;
&quot;Sustainability! - I Want that Job!&quot;
 
C01 4085 2
C01 4085 2C01 4085 2
C01 4085 2
 
Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...
Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...
Introducing Essential EAFM: Developing capacity in the ecosystem approach to ...
 
Ecological Economics !101Pres
Ecological Economics !101PresEcological Economics !101Pres
Ecological Economics !101Pres
 
GDP and Ecological Economics winslow
GDP and Ecological Economics winslowGDP and Ecological Economics winslow
GDP and Ecological Economics winslow
 
Ecological economics. Farber & bradley
Ecological economics. Farber & bradleyEcological economics. Farber & bradley
Ecological economics. Farber & bradley
 

Semelhante a Pengenalan HTML Dasar

Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepadSamsuri14
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxssuser71d74a
 
Week 11 (Pengenalan Html 1) Student
Week 11 (Pengenalan Html 1)   StudentWeek 11 (Pengenalan Html 1)   Student
Week 11 (Pengenalan Html 1) Studentimaru.wordpress.com
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxBeeOkee
 
Dasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmlDasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmloyie76
 
materi html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahamimateri html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahamimuhammadazi3
 
belajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkatbelajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkatmuhammadazi3
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar htmlDedy Setiawan
 
dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxAndreianYusuf
 
Pengenalan internet 10
Pengenalan internet 10Pengenalan internet 10
Pengenalan internet 10Suparno Oke
 

Semelhante a Pengenalan HTML Dasar (20)

Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
 
Week 11 (Pengenalan Html 1) Student
Week 11 (Pengenalan Html 1)   StudentWeek 11 (Pengenalan Html 1)   Student
Week 11 (Pengenalan Html 1) Student
 
File Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptxFile Structure, HTML & Supporting Languages.pptx
File Structure, HTML & Supporting Languages.pptx
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Dasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam htmlDasar-dasar penggunaan elemen dan tagging dalam html
Dasar-dasar penggunaan elemen dan tagging dalam html
 
01 html
01 html01 html
01 html
 
Training HTML
Training HTMLTraining HTML
Training HTML
 
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
 
Bab i. html
Bab i. htmlBab i. html
Bab i. html
 
materi html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahamimateri html dasar lengkap dan mudah dipahami
materi html dasar lengkap dan mudah dipahami
 
belajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkatbelajar hatml dasar dengan materi yang lengkap dan singkat
belajar hatml dasar dengan materi yang lengkap dan singkat
 
HTML dan CSS
HTML dan CSSHTML dan CSS
HTML dan CSS
 
Pertemuan1
Pertemuan1Pertemuan1
Pertemuan1
 
Modul 1 - HTML
Modul 1 - HTMLModul 1 - HTML
Modul 1 - HTML
 
Presentasi konsep dasar html
Presentasi konsep dasar htmlPresentasi konsep dasar html
Presentasi konsep dasar html
 
dokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptxdokumen.tips_presentasi-konsep-dasar-html.pptx
dokumen.tips_presentasi-konsep-dasar-html.pptx
 
Pengenalan internet 10
Pengenalan internet 10Pengenalan internet 10
Pengenalan internet 10
 
Modul html
Modul htmlModul html
Modul html
 

Mais de Valentino Selayan

Mais de Valentino Selayan (20)

pert3_4-fuzzy.pptx
pert3_4-fuzzy.pptxpert3_4-fuzzy.pptx
pert3_4-fuzzy.pptx
 
pert7_8-fis-e28093-metode-sugeno.pptx
pert7_8-fis-e28093-metode-sugeno.pptxpert7_8-fis-e28093-metode-sugeno.pptx
pert7_8-fis-e28093-metode-sugeno.pptx
 
tutorial-fuzzy-inferensi-system-dengan-matlab.docx
tutorial-fuzzy-inferensi-system-dengan-matlab.docxtutorial-fuzzy-inferensi-system-dengan-matlab.docx
tutorial-fuzzy-inferensi-system-dengan-matlab.docx
 
Materi 8 Introduction to Fuzzy Logic.pdf
Materi 8 Introduction to Fuzzy Logic.pdfMateri 8 Introduction to Fuzzy Logic.pdf
Materi 8 Introduction to Fuzzy Logic.pdf
 
LOGIKA FUZZY MATERI KULIAH-1.pdf
LOGIKA FUZZY MATERI KULIAH-1.pdfLOGIKA FUZZY MATERI KULIAH-1.pdf
LOGIKA FUZZY MATERI KULIAH-1.pdf
 
LOGIKA FUZZY MATERI KULIAH.pdf
LOGIKA FUZZY MATERI KULIAH.pdfLOGIKA FUZZY MATERI KULIAH.pdf
LOGIKA FUZZY MATERI KULIAH.pdf
 
pert_fuzzy-database.pptx
pert_fuzzy-database.pptxpert_fuzzy-database.pptx
pert_fuzzy-database.pptx
 
pert5_fis.pptx
pert5_fis.pptxpert5_fis.pptx
pert5_fis.pptx
 
pert1_2fuzzy.pptx
pert1_2fuzzy.pptxpert1_2fuzzy.pptx
pert1_2fuzzy.pptx
 
pert6_-fis_mamdani.pptx
pert6_-fis_mamdani.pptxpert6_-fis_mamdani.pptx
pert6_-fis_mamdani.pptx
 
Modul2-Tipe-data-identifier-dan-operator-02.pdf
Modul2-Tipe-data-identifier-dan-operator-02.pdfModul2-Tipe-data-identifier-dan-operator-02.pdf
Modul2-Tipe-data-identifier-dan-operator-02.pdf
 
Modul_Praktikum_Algoritma_and_Pemrograma.pdf
Modul_Praktikum_Algoritma_and_Pemrograma.pdfModul_Praktikum_Algoritma_and_Pemrograma.pdf
Modul_Praktikum_Algoritma_and_Pemrograma.pdf
 
1 3
1 31 3
1 3
 
1 1
1 11 1
1 1
 
1 sist. komputer_00
1 sist. komputer_001 sist. komputer_00
1 sist. komputer_00
 
1 sist. komputer_00
1 sist. komputer_001 sist. komputer_00
1 sist. komputer_00
 
1 sist. komputer_
1 sist. komputer_1 sist. komputer_
1 sist. komputer_
 
1 installasi-xampp-dan-mysql (1)
1 installasi-xampp-dan-mysql (1)1 installasi-xampp-dan-mysql (1)
1 installasi-xampp-dan-mysql (1)
 
Chapter 7 transformers
Chapter 7 transformersChapter 7 transformers
Chapter 7 transformers
 
Lecture 28 360 chapter 9_ power electronics inverters
Lecture 28 360 chapter 9_  power electronics invertersLecture 28 360 chapter 9_  power electronics inverters
Lecture 28 360 chapter 9_ power electronics inverters
 

Pengenalan HTML Dasar

  • 1. Pengenalan HTML HTML • Hypertext Markup Language merupakan standard bahasa yang digunakan untuk menampilkan dokumen web • Untuk membuat dokumen web yang bisa ditampilkan di browser, perlu menuliskan kode HTML baik secara langsung misal pada editor Notepad, maupun secara tidak langsung misal melalui software Frontpage 1 Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 2. Pengenalan HTML TAG • • • • 2 Kode khusus yang merupakan komponen fundamental pada dokumen web dan akan dikenali oleh browser Nama tag ditulis di dalam tanda < > dan untuk tag penutup tambahkan tanda </ > Boleh ditulis dengan huruf besar maupun kecil Digunakan sepasang, contoh : <H1> dan </H1> Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 3. Pengenalan HTML ATRIBUT dan VALUE • Beberapa tag mengandung atribut di dalamnya, contoh : <p align=“center”> • Pada contoh di atas, p adalah nama tag, sedangkan align adalah nama atribut • Atribut pada umumnya melibatkan value, seperti pada contoh, “center” adalah value untuk atribut align 3 Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 4. Pengenalan HTML STRUKTUR DASAR DOKUMEN HTML • • • • 4 Tag utama adalah <HTML>, <HEAD>, <BODY> Tag HTML berfungsi untuk menyatakan bahwa dokumen tersebut adalah dokumen HTML Tag HEAD berfungsi untuk memberikan informasi tentang dokumen HTML tersebut Tag BODY berfungsi untuk menyimpan informasi atau data yang akan ditampilkan dalam dokumen HTML Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 5. Pengenalan HTML STRUKTUR DASAR DOKUMEN HTML • 5 Struktur Dokumen akan terlihat : <html> <head> bagian head </head> <body> bagian body </body> </html> Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 6. Pengenalan HTML TITLE • Untuk membuat judul pada suatu dokumen web, digunakan tag <title>..</title> • TITLE bukanlah bagian dari teks dokumen dan hanya berada pada bagian HEAD • TITLE biasanya ditampilkan oleh browser pada title bar dari jendela browser dan biasanya berfungsi sebagai label dari jendela browser tersebut 6 Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 7. Pengenalan HTML HEADING • HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam badan dokumen • Tag-tag judul ini berupa : <h1> ... </h1> sampai dengan <h6> ... </h6> • 7 Dapat ditambahkan atribut misal align dengan value : left, right, justify Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 8. Pengenalan HTML PARAGRAF, LINE BREAK dan KOMENTAR • Tag <p> digunakan untuk membuat paragraf, dan dapat ditambahkan atribut misal align Contoh : <p align=“center”> ...isi paragraf... </p> • Untuk membuat baris baru atau berpindah baris digunakan tag <br> • Untuk memberikan komentar yang nantinya akan diabaikan oleh browser, digunakan tanda <!– dan diakhiri dengan --> 8 Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 9. Pengenalan HTML GARIS HORISONTAL • Untuk membuat garis horisontal pada dokumen web digunakan tag <hr> • Atribut pada tag <hr> size : Menentukan ketebalan garis width : Menentukan lebar garis align : Menetukan peletakan teks dalam baris noshade : Mengatur agar garis tidak disertai bayangan 9 Pemrograman Web 1 Humisar Hasugian, S.Kom
  • 10. Pengenalan HTML GARIS HORISONTAL • Untuk membuat garis horisontal pada dokumen web digunakan tag <hr> • Atribut pada tag <hr> size : Menentukan ketebalan garis width : Menentukan lebar garis align : Menetukan peletakan teks dalam baris noshade : Mengatur agar garis tidak disertai bayangan 9 Pemrograman Web 1 Humisar Hasugian, S.Kom