SlideShare a Scribd company logo
1 of 8
Download to read offline
1 
Bab I 
HYPER TEXT MARKUP LANGUAGE 
Pengertian HTML (HYPER TEXT MARKUP LANGUAGE) 
HTML (HYPER TEXT MARKUP LANGUAGE) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser internet. Pada bab ini kita akan mempelajari bahasa markup atau markup language kegunaan bahasa ini ialah untuk memanipulasi browser sehingga dapat menampilkan informasi yang dapat dibaca oleh computer. 
Html Berupa kode-kode tag yang mengntruksikan browser untuk menghasilkan tampilan yang di inginkan. Sebuah file Html dapat dibuka menggunakan browser web seperti Microsoft Internet Exploler , Mozila Firefox, Google chrome, Opera, Safari, Dan lain-lain. 
a. Dasar-Dasar HTML 
Fungsi utama HTML memberikan perintah kepada browser tampilan melalui Tag-tag yang di tulis dalam HTML. Dengan demikian browser menghasilkan tampilan yang sesuai dengan perintah-perintah yang sudah dibuat atau di perintahkan terlebih dahulu. 
Untuk menuliskan suatu dokumen HTML Dapat digunakan perangkat sederhana yang khusus diantaranya : 
 Notepad 
 Dreamweaver 
 Ultraedit 
Setelah selesai menuliskan dokumen tersebut lakukan save dengan format Nama_file.html dan pada bagian perintah SAVE TYPES pilih ALL FILES. 
b. Struktur HTML 
Dokumen Html dapat terdiri dari teks, Gambar, Suara ataupun video. Satu hal yang membedakan HTML dengan dokumen lainya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag ini berfungsi untuk memformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga menentukan struktur bagian tersebut dalam dokumen HTML. 
c. Elemen HTML 
Pada dasarnya elemen HTML terdiri dari 2 kategori : 
1. Elemen <HEAD> berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut. 
2. Elemen <BODY> berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser
2 
d. Tag 
Pada dokumen HTML sebuah teks bias memuat intruksi yang ditandai dengan kode atau lebih dikenal dengan TAG. Tag ini dinyatakan dengan sebuah tanda lebih kecil dan lebih besar “ < > “. Tag biasanya berpasangan awal tag dinyatakan dalam bentuk <Nama_tag> dan akhir Tag dinyatakan dalam bentuk </Nama_tag>. Contoh diawali dengan <HTML> dan diakhiri dengan </HTML>
3 
BAB II 
DASAR-DASAR HTML 
1. Membuat dokumen HTML 
Dokumen HTML dimulai dengan perintah Awal <HTML>, Kemudian <HEAD> dan <TITLE>. Antara perintah <TITLE> dengan </TITLE> adalah bagian judul dokumen yang akan dibuat. Misalkan diberi nama “Web pertama aku” , Kemudian ditutup dengan perintah </HEAD> Ini merupakan bagian pertama dari bagian Dokumen HTML. Bagian kedua atau isi dimulai dengan perintah <BODY> dan </BODY>. Antara kedua perintah tersebut berisi bagian dari isi HTML. Pada bagian akhir di tutup dengan </HTML>. 
Contoh Program : 
<html> 
<head> 
<title> 
Belajar html 
</title> 
</head> 
<body> 
Ini web pertama aku ! 
</body> 
</html> 
Hasil tampilan : 
Gambar 1
4 
2. Menambahkan background pada Halaman Web 
Halaman HTML dapat ditambahkan background baik berupa warna ataupun gambar. Tag dilakukan pada perintah <BODY>. Untuk menambahkan background warna perintahnya adalah : 
<BODY BGCOLOR=”Warna”> 
Sedangkan untuk menambahkan Background gambar perintahnya adalah : 
<BODY BACKGROUND=”Nama_gambar.JPG”> 
Format gambar tidak hanya .JPG bias juga format gambar .PNG, .Gif, Dll. 
Contoh program : 
Background Warna 
<html> 
<head> 
<title> 
Belajar html 
</title> 
</head> 
<body Bgcolor="Blue"> 
Ini web pertama aku ! 
</body> 
</html> 
Hasil tampilan : 
Gambar 2
5 
Background Foto 
<html> 
<head> 
<title> 
Belajar html 
</title> 
</head> 
<body Background="Fotoku.Jpg"> 
Ini web pertama aku ! 
</body> 
</html> 
Hasil tampilan 
Gambar 3 
3. Mengganti warna text 
Untuk mengganti warna text di tambahkan perintah <FONT COLOR=”WARNA”> Pada text yang akan di ganti warnanya dan di akhiri dengan </FONT COLOR> 
Contoh Program : 
<html> 
<head> 
<title> 
Belajar html 
</title> 
</head>
6 
<body Bgcolor="yellow"> 
<font color="RED"> ini warna merah !</font color> <br> 
<font color="green">Ini warna hijau</font color> <br> 
<font color="Pink">Ini warna Merah jambu</font color> <br> 
</body> 
</html> 
Hasil Tampilan 
Gambar 4 
4. Mengenter dan menambahkan garis pada halman HTML 
Tag untukmeng enter adalah <BR> sedangkan Tag untuk menambahkan garis adalah <HR> . 
Contoh Program : 
<html> 
<head> 
<title> 
Belajar html 
</title> 
</head> 
<body Bgcolor="yellow"> 
<font color="RED"> ini warna merah !</font color> 
<br> 
<hr> 
<font color="green">Ini warna hijau</font color> 
<br> 
<hr> 
<font color="Pink">Ini warna Merah jambu</font color> 
<br> 
<hr> 
</body>
7 
</html> 
Hasil tampilan 
Gambar 5 
5. Hyperlink 
Untuk membuat hyperlink sederhana pada web gunakan perintah <A HREF=”NAMA_HTML_YANG_DI_TUJU.HTML”> Keterangan Link </A> 
Contoh Program : 
<html> 
<head> 
<title> Belajar html </title> 
</head> 
<body> 
Halaman Pertama , Untuk melanutkan silahkan klik 
<br> 
<A HREF="LINK2.HTML"> Masuk ke halaman selanjurnya </A> 
</body> 
</html> 
Simpan dengan nama Link1.HTML 
<html> 
<head> 
<title> Belajar html </title> 
</head> 
<body> 
halaman kedua , Untuk kembali silahkan klik 
<br> 
<A HREF="LINK1.HTML"> kembali ke halaman sebelumnya ! </A> 
</body> 
</html> 
Simpan dengan nama Link2.HTML
8 
Hasil Tampilan

More Related Content

What's hot (20)

Pemrograman web modul 1 dan 2
Pemrograman web  modul 1 dan 2Pemrograman web  modul 1 dan 2
Pemrograman web modul 1 dan 2
 
Modul Dasar HTML
Modul Dasar HTMLModul Dasar HTML
Modul Dasar HTML
 
PWEB HTML
PWEB HTMLPWEB HTML
PWEB HTML
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
 
Asp pertemuan02
Asp pertemuan02Asp pertemuan02
Asp pertemuan02
 
Html power point
Html power pointHtml power point
Html power point
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
Laporan pratikum II web
Laporan pratikum II webLaporan pratikum II web
Laporan pratikum II web
 
Belajar html
Belajar htmlBelajar html
Belajar html
 
Dasar pemrograman web HTML
Dasar pemrograman web HTMLDasar pemrograman web HTML
Dasar pemrograman web HTML
 
Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
 
Modul html
Modul htmlModul html
Modul html
 
Modul HTML Lanjut
Modul HTML LanjutModul HTML Lanjut
Modul HTML Lanjut
 
Html dasar
Html dasarHtml dasar
Html dasar
 
Mpw
MpwMpw
Mpw
 
Pengenalan struktur elemen html
Pengenalan struktur elemen htmlPengenalan struktur elemen html
Pengenalan struktur elemen html
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Modul 2-form html-css
Modul 2-form html-cssModul 2-form html-css
Modul 2-form html-css
 
Pertemuan1
Pertemuan1Pertemuan1
Pertemuan1
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 

Similar to MENGERTI_DASAR_HTML

Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptNansyeDeboraLitaay
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML fikrinurfahmi1
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxFAUZY38
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxssuser71d74a
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)Toni Tegar Sahidi
 
Tugas2 1300631019
Tugas2 1300631019Tugas2 1300631019
Tugas2 1300631019setiyo muji
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepadSamsuri14
 
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphpAfdi Njomplank
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + phpSaikhu Zaenul
 
Pertemuan 1 b
Pertemuan 1 bPertemuan 1 b
Pertemuan 1 bf fr
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)T Ghazali
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptEdiyono3
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptAkhmadAlbari1
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptsopi20
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.pptreskieki4
 

Similar to MENGERTI_DASAR_HTML (20)

Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.pptPraktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
Praktikum_Pengenalan_HTML oleh STMIK AMIKOM Yogyakarta.ppt
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
 
PPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptxPPT_HTML_DASAR.pptx
PPT_HTML_DASAR.pptx
 
MEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptxMEDIA BELAJAR PENGANTAR HTML.pptx
MEDIA BELAJAR PENGANTAR HTML.pptx
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
 
Tugas2 1300631019
Tugas2 1300631019Tugas2 1300631019
Tugas2 1300631019
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
Tutoria html mysqdanphp
Tutoria html mysqdanphpTutoria html mysqdanphp
Tutoria html mysqdanphp
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
1
11
1
 
Pertemuan 1 b
Pertemuan 1 bPertemuan 1 b
Pertemuan 1 b
 
Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)Langkah demi langkah menguasai html 5 (versi alpha)
Langkah demi langkah menguasai html 5 (versi alpha)
 
Tutorial html + my sql + php
Tutorial html + my sql + phpTutorial html + my sql + php
Tutorial html + my sql + php
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
Makalah html5
Makalah html5Makalah html5
Makalah html5
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 
01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt01. Dasar-dasar HTML.ppt
01. Dasar-dasar HTML.ppt
 

More from Sahrul Sindriana

PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...
PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...
PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...Sahrul Sindriana
 
laporan prakarya dan kewirausahaan ( Observasi )
laporan prakarya dan kewirausahaan ( Observasi )laporan prakarya dan kewirausahaan ( Observasi )
laporan prakarya dan kewirausahaan ( Observasi )Sahrul Sindriana
 
Kata pengantar,daftar isi prakarya
Kata pengantar,daftar isi prakaryaKata pengantar,daftar isi prakarya
Kata pengantar,daftar isi prakaryaSahrul Sindriana
 
Cover prakarya dan kewirausahaan
Cover prakarya dan kewirausahaanCover prakarya dan kewirausahaan
Cover prakarya dan kewirausahaanSahrul Sindriana
 
Perancangan perangkat lunak
Perancangan perangkat lunakPerancangan perangkat lunak
Perancangan perangkat lunakSahrul Sindriana
 
Laporan menentukan gaya gravitasi dengan bandul sederhana
Laporan menentukan gaya gravitasi dengan bandul sederhanaLaporan menentukan gaya gravitasi dengan bandul sederhana
Laporan menentukan gaya gravitasi dengan bandul sederhanaSahrul Sindriana
 

More from Sahrul Sindriana (7)

PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...
PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...
PROSES TERCIPTANYA MANUSIA DARI SARIPATI TANAH dan TUGAS MANUSIA SEBAGAI KHAL...
 
Constructor
ConstructorConstructor
Constructor
 
laporan prakarya dan kewirausahaan ( Observasi )
laporan prakarya dan kewirausahaan ( Observasi )laporan prakarya dan kewirausahaan ( Observasi )
laporan prakarya dan kewirausahaan ( Observasi )
 
Kata pengantar,daftar isi prakarya
Kata pengantar,daftar isi prakaryaKata pengantar,daftar isi prakarya
Kata pengantar,daftar isi prakarya
 
Cover prakarya dan kewirausahaan
Cover prakarya dan kewirausahaanCover prakarya dan kewirausahaan
Cover prakarya dan kewirausahaan
 
Perancangan perangkat lunak
Perancangan perangkat lunakPerancangan perangkat lunak
Perancangan perangkat lunak
 
Laporan menentukan gaya gravitasi dengan bandul sederhana
Laporan menentukan gaya gravitasi dengan bandul sederhanaLaporan menentukan gaya gravitasi dengan bandul sederhana
Laporan menentukan gaya gravitasi dengan bandul sederhana
 

MENGERTI_DASAR_HTML

  • 1. 1 Bab I HYPER TEXT MARKUP LANGUAGE Pengertian HTML (HYPER TEXT MARKUP LANGUAGE) HTML (HYPER TEXT MARKUP LANGUAGE) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser internet. Pada bab ini kita akan mempelajari bahasa markup atau markup language kegunaan bahasa ini ialah untuk memanipulasi browser sehingga dapat menampilkan informasi yang dapat dibaca oleh computer. Html Berupa kode-kode tag yang mengntruksikan browser untuk menghasilkan tampilan yang di inginkan. Sebuah file Html dapat dibuka menggunakan browser web seperti Microsoft Internet Exploler , Mozila Firefox, Google chrome, Opera, Safari, Dan lain-lain. a. Dasar-Dasar HTML Fungsi utama HTML memberikan perintah kepada browser tampilan melalui Tag-tag yang di tulis dalam HTML. Dengan demikian browser menghasilkan tampilan yang sesuai dengan perintah-perintah yang sudah dibuat atau di perintahkan terlebih dahulu. Untuk menuliskan suatu dokumen HTML Dapat digunakan perangkat sederhana yang khusus diantaranya :  Notepad  Dreamweaver  Ultraedit Setelah selesai menuliskan dokumen tersebut lakukan save dengan format Nama_file.html dan pada bagian perintah SAVE TYPES pilih ALL FILES. b. Struktur HTML Dokumen Html dapat terdiri dari teks, Gambar, Suara ataupun video. Satu hal yang membedakan HTML dengan dokumen lainya adalah adanya elemen-elemen HTML beserta tag-tagnya. Elemen dan tag ini berfungsi untuk memformat atau menandai suatu bagian tertentu dari dokumen HTML dan juga menentukan struktur bagian tersebut dalam dokumen HTML. c. Elemen HTML Pada dasarnya elemen HTML terdiri dari 2 kategori : 1. Elemen <HEAD> berfungsi untuk memberikan informasi atau mendeklarasikan dokumen tersebut. 2. Elemen <BODY> berfungsi untuk menentukan bagaimana isi suatu dokumen ditampilkan pada browser
  • 2. 2 d. Tag Pada dokumen HTML sebuah teks bias memuat intruksi yang ditandai dengan kode atau lebih dikenal dengan TAG. Tag ini dinyatakan dengan sebuah tanda lebih kecil dan lebih besar “ < > “. Tag biasanya berpasangan awal tag dinyatakan dalam bentuk <Nama_tag> dan akhir Tag dinyatakan dalam bentuk </Nama_tag>. Contoh diawali dengan <HTML> dan diakhiri dengan </HTML>
  • 3. 3 BAB II DASAR-DASAR HTML 1. Membuat dokumen HTML Dokumen HTML dimulai dengan perintah Awal <HTML>, Kemudian <HEAD> dan <TITLE>. Antara perintah <TITLE> dengan </TITLE> adalah bagian judul dokumen yang akan dibuat. Misalkan diberi nama “Web pertama aku” , Kemudian ditutup dengan perintah </HEAD> Ini merupakan bagian pertama dari bagian Dokumen HTML. Bagian kedua atau isi dimulai dengan perintah <BODY> dan </BODY>. Antara kedua perintah tersebut berisi bagian dari isi HTML. Pada bagian akhir di tutup dengan </HTML>. Contoh Program : <html> <head> <title> Belajar html </title> </head> <body> Ini web pertama aku ! </body> </html> Hasil tampilan : Gambar 1
  • 4. 4 2. Menambahkan background pada Halaman Web Halaman HTML dapat ditambahkan background baik berupa warna ataupun gambar. Tag dilakukan pada perintah <BODY>. Untuk menambahkan background warna perintahnya adalah : <BODY BGCOLOR=”Warna”> Sedangkan untuk menambahkan Background gambar perintahnya adalah : <BODY BACKGROUND=”Nama_gambar.JPG”> Format gambar tidak hanya .JPG bias juga format gambar .PNG, .Gif, Dll. Contoh program : Background Warna <html> <head> <title> Belajar html </title> </head> <body Bgcolor="Blue"> Ini web pertama aku ! </body> </html> Hasil tampilan : Gambar 2
  • 5. 5 Background Foto <html> <head> <title> Belajar html </title> </head> <body Background="Fotoku.Jpg"> Ini web pertama aku ! </body> </html> Hasil tampilan Gambar 3 3. Mengganti warna text Untuk mengganti warna text di tambahkan perintah <FONT COLOR=”WARNA”> Pada text yang akan di ganti warnanya dan di akhiri dengan </FONT COLOR> Contoh Program : <html> <head> <title> Belajar html </title> </head>
  • 6. 6 <body Bgcolor="yellow"> <font color="RED"> ini warna merah !</font color> <br> <font color="green">Ini warna hijau</font color> <br> <font color="Pink">Ini warna Merah jambu</font color> <br> </body> </html> Hasil Tampilan Gambar 4 4. Mengenter dan menambahkan garis pada halman HTML Tag untukmeng enter adalah <BR> sedangkan Tag untuk menambahkan garis adalah <HR> . Contoh Program : <html> <head> <title> Belajar html </title> </head> <body Bgcolor="yellow"> <font color="RED"> ini warna merah !</font color> <br> <hr> <font color="green">Ini warna hijau</font color> <br> <hr> <font color="Pink">Ini warna Merah jambu</font color> <br> <hr> </body>
  • 7. 7 </html> Hasil tampilan Gambar 5 5. Hyperlink Untuk membuat hyperlink sederhana pada web gunakan perintah <A HREF=”NAMA_HTML_YANG_DI_TUJU.HTML”> Keterangan Link </A> Contoh Program : <html> <head> <title> Belajar html </title> </head> <body> Halaman Pertama , Untuk melanutkan silahkan klik <br> <A HREF="LINK2.HTML"> Masuk ke halaman selanjurnya </A> </body> </html> Simpan dengan nama Link1.HTML <html> <head> <title> Belajar html </title> </head> <body> halaman kedua , Untuk kembali silahkan klik <br> <A HREF="LINK1.HTML"> kembali ke halaman sebelumnya ! </A> </body> </html> Simpan dengan nama Link2.HTML