SlideShare a Scribd company logo
HTML atau Hyper Text Markup Language merupakan sebuah bahasa markah untuk membuat
halaman web.
Membuat file HTML
Dapat di buat menggunakan teks editor Notepad++, Sublime Text, dll. Ekstensi file harus .html
Contoh untuk menampilkan informasi :
silahkan kunjungi Situs Web Darmawan maka penulisan kodenya seperti ini :
Maka tampilan di browser akan seperti ini :
Gambar 1.
tag dari html harus di akhiri dengan dengan /, misal seperti penulisan tag diatas pembukaan <body>
dan di tutup dengan </body>.
Next kita menggunakan tag <title> dan <head> , <head> merupakan kepala (ndas) “bhs jawa”
dokumen. Dari kode di atas seperti gambar 1, tambahkan tag <head> dan <title>, contoh :
<title> untuk judul website, <head>
untuk membuat kepala dokumen. dan hasilnya sepeti gambar di bawah ini :
<!DOCTYPE html>
<html>
<body>
Situs Web darmawan
</bodyl>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Situs Web</title>
</head>
<body>
Situs Web darmawan
</bodyl>
</html>
Gambar 2.
Next...menggunakan tag <h1> dan tag <p> , tag <h1> fungsinya untuk membuat judul suatu artikel,
h1 maksudnya adalah untuk ukuran teksnya,. Untuk tag <p> fungsinya membuat paragraf. Contoh :
Maka akan
tampil
seperti
gambar di bawah ini :
Gambar 3.
Teks yang ada di <h1> dan di tutup </h1> teks nya lebih besar. Dan teks yang berada di tag <p>
ukurannya normal.
<!DOCTYPE html>
<html>
<head>
<title>Situs Web</title>
</head>
<body>
<h1>Situs Web darmawan</h1>
<p> situs web darmawan adalah situs yang bertujuan
belajar tentang HTML, dengan cara begini, khususnya
saya bisa lebih memahami dan mengerti kegunaan
beberapa tag HTML.</p>
</body>
</html>
Kesimpulanya, HTML adalah bahasa yang wajib dipelajari sebelum mempelajari bahasa pemograman
yang lainya,dan siapa saja yang ingin menjadi pembuat website (Web Developer). Karena HTML
merupakan dasar untuk membuat website. Contoh di atas sudah menjelaskan bagaimana kode HTML
itu berfungsi. Kuncinya adalah sering berlatih membuat file HTML. InsyAllah anda khususnya saya
akan selalu ingat tag tag nya.
Cukup sekian pengenalan HTML nya, tujuan penuliasan ini adalah untuk pembejaran saya khususnya
agar selalu bisa mengingat dan lebih memahami tentang HTML. Terimakasih wassalam...semoga sehat
selalu.
Salam Stay at home. Work from Home.
Referensi:
 https://www.w3schools.com/html/default.asp
 https://www.w3.org/standards/webdesign/htmlcss

More Related Content

What's hot (19)

Tutorial web programing
Tutorial web programingTutorial web programing
Tutorial web programing
 
Pemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSSPemrograman Berbasis Web - CSS
Pemrograman Berbasis Web - CSS
 
Jamal's dokumen
Jamal's dokumenJamal's dokumen
Jamal's dokumen
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
 
Modul web-design
Modul web-designModul web-design
Modul web-design
 
Modul html
Modul htmlModul html
Modul html
 
9. b.. . .
9. b.. . .9. b.. . .
9. b.. . .
 
Tugas 2 - Rekayasa Web
Tugas 2 - Rekayasa WebTugas 2 - Rekayasa Web
Tugas 2 - Rekayasa Web
 
Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2Presentation 1 - Desain dan pemrograman web 2
Presentation 1 - Desain dan pemrograman web 2
 
Belajar membuat website
Belajar membuat websiteBelajar membuat website
Belajar membuat website
 
Html power point
Html power pointHtml power point
Html power point
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
01 html
01 html01 html
01 html
 
Laporan pemrograman berbasis web
Laporan pemrograman berbasis webLaporan pemrograman berbasis web
Laporan pemrograman berbasis web
 
Ardian css-01-pengenalan-css-september-2015
Ardian css-01-pengenalan-css-september-2015Ardian css-01-pengenalan-css-september-2015
Ardian css-01-pengenalan-css-september-2015
 
Pertemuan1
Pertemuan1Pertemuan1
Pertemuan1
 
Html dasar
Html dasarHtml dasar
Html dasar
 
Proyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepadProyek 3 proyek web html menggunakan notepad
Proyek 3 proyek web html menggunakan notepad
 
Web disain
Web disainWeb disain
Web disain
 

Similar to Belajar dasar html

Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
Desma_susanti
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
Toni Tegar Sahidi
 
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libreIlmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
Uniska Lam
 
Basic html
Basic htmlBasic html
Basic html
dand_01
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
Hamdani Nurdin
 

Similar to Belajar dasar html (20)

Cara membuat html (desma susanti)
Cara membuat html (desma susanti)Cara membuat html (desma susanti)
Cara membuat html (desma susanti)
 
Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_HTML Praktikum_Pengenalan_HTML
Praktikum_Pengenalan_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.ppt
 
3 pemrograman internet html (1)
3 pemrograman internet   html (1)3 pemrograman internet   html (1)
3 pemrograman internet html (1)
 
Modul 2a html
Modul 2a htmlModul 2a html
Modul 2a html
 
Ilmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daunIlmuwebsite.com html css-dari_akar_ke_daun
Ilmuwebsite.com html css-dari_akar_ke_daun
 
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libreIlmuwebsite.com html css-dari_akar_ke_daun-libre
Ilmuwebsite.com html css-dari_akar_ke_daun-libre
 
HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)HTML (HYPER TEXT MARKUP LANGUAGE)
HTML (HYPER TEXT MARKUP LANGUAGE)
 
Basic html
Basic htmlBasic html
Basic html
 
Modul html
Modul htmlModul html
Modul html
 
Desain web 1
Desain web 1Desain web 1
Desain web 1
 
Modul html
Modul htmlModul html
Modul html
 
Modul html
Modul htmlModul html
Modul html
 
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)
 
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
 
Caramembuat website sederhana
Caramembuat website sederhanaCaramembuat website sederhana
Caramembuat website sederhana
 
Web design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptxWeb design (Pertemuan 1).pptx
Web design (Pertemuan 1).pptx
 
Buku ajar desain web
Buku ajar desain webBuku ajar desain web
Buku ajar desain web
 
HTML, CSS, JavaScript
HTML, CSS, JavaScriptHTML, CSS, JavaScript
HTML, CSS, JavaScript
 

Recently uploaded

Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdfPaparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
SEMUELSAMBOKARAENG
 

Recently uploaded (20)

Presentasi visi misi revisi sekolah dasar.pptx
Presentasi visi misi revisi sekolah dasar.pptxPresentasi visi misi revisi sekolah dasar.pptx
Presentasi visi misi revisi sekolah dasar.pptx
 
RENCANA + Link2 MATERI Training _PEMBEKALAN Kompetensi_PENGELOLAAN PENGADAAN...
RENCANA + Link2 MATERI  Training _PEMBEKALAN Kompetensi_PENGELOLAAN PENGADAAN...RENCANA + Link2 MATERI  Training _PEMBEKALAN Kompetensi_PENGELOLAAN PENGADAAN...
RENCANA + Link2 MATERI Training _PEMBEKALAN Kompetensi_PENGELOLAAN PENGADAAN...
 
Sapawarga - Manual Guide PPDB Tahun 2024.pdf
Sapawarga - Manual Guide PPDB Tahun 2024.pdfSapawarga - Manual Guide PPDB Tahun 2024.pdf
Sapawarga - Manual Guide PPDB Tahun 2024.pdf
 
KERAJINAN DARI BAHAN LIMBAH BERBENTUK BANGUN RUANG
KERAJINAN DARI BAHAN LIMBAH BERBENTUK BANGUN RUANGKERAJINAN DARI BAHAN LIMBAH BERBENTUK BANGUN RUANG
KERAJINAN DARI BAHAN LIMBAH BERBENTUK BANGUN RUANG
 
Repi jayanti_2021 B_Analsis Kritis Jurnal
Repi jayanti_2021 B_Analsis Kritis JurnalRepi jayanti_2021 B_Analsis Kritis Jurnal
Repi jayanti_2021 B_Analsis Kritis Jurnal
 
Modul P5 Berekayasa dan Berteknologi untuk Membangun NKRI.pptx
Modul P5 Berekayasa dan Berteknologi untuk Membangun NKRI.pptxModul P5 Berekayasa dan Berteknologi untuk Membangun NKRI.pptx
Modul P5 Berekayasa dan Berteknologi untuk Membangun NKRI.pptx
 
Sosialisme Kapitalis Karl Marx (Dosen Pengampu: Khoirin Nisai Shalihati)
Sosialisme Kapitalis Karl Marx (Dosen Pengampu: Khoirin Nisai Shalihati)Sosialisme Kapitalis Karl Marx (Dosen Pengampu: Khoirin Nisai Shalihati)
Sosialisme Kapitalis Karl Marx (Dosen Pengampu: Khoirin Nisai Shalihati)
 
Najwa Qarina_2021 B_Analisis Kritis Jurnal.pdf
Najwa Qarina_2021 B_Analisis Kritis Jurnal.pdfNajwa Qarina_2021 B_Analisis Kritis Jurnal.pdf
Najwa Qarina_2021 B_Analisis Kritis Jurnal.pdf
 
1. Standar Operasional Prosedur PPDB Pada paud
1. Standar Operasional Prosedur PPDB Pada paud1. Standar Operasional Prosedur PPDB Pada paud
1. Standar Operasional Prosedur PPDB Pada paud
 
Solusi dan Strategi ATHG yang di hadapi Indonesia (Kelas 11).pptx
Solusi dan Strategi ATHG yang di hadapi Indonesia (Kelas 11).pptxSolusi dan Strategi ATHG yang di hadapi Indonesia (Kelas 11).pptx
Solusi dan Strategi ATHG yang di hadapi Indonesia (Kelas 11).pptx
 
perumusan visi, misi dan tujuan sekolah.ppt
perumusan visi, misi dan tujuan sekolah.pptperumusan visi, misi dan tujuan sekolah.ppt
perumusan visi, misi dan tujuan sekolah.ppt
 
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
LAPORAN TUGAS TAMBAHAN PEMBINA PRAMUKA..
 
Program Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdfProgram Kerja Kepala Sekolah 2023-2024.pdf
Program Kerja Kepala Sekolah 2023-2024.pdf
 
Dokumen Tindak Lanjut Pengelolaan Kinerja Guru.docx
Dokumen Tindak Lanjut Pengelolaan Kinerja Guru.docxDokumen Tindak Lanjut Pengelolaan Kinerja Guru.docx
Dokumen Tindak Lanjut Pengelolaan Kinerja Guru.docx
 
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
ppt-menghindari-marah-ghadab-membiasakan-kontrol-diri-dan-berani-membela-kebe...
 
Laporan Piket Guru untuk bukti dukung PMM.pdf
Laporan Piket Guru untuk bukti dukung PMM.pdfLaporan Piket Guru untuk bukti dukung PMM.pdf
Laporan Piket Guru untuk bukti dukung PMM.pdf
 
Susi Susanti_2021 B_Analisis Kritis Jurnal.pdf
Susi Susanti_2021 B_Analisis Kritis Jurnal.pdfSusi Susanti_2021 B_Analisis Kritis Jurnal.pdf
Susi Susanti_2021 B_Analisis Kritis Jurnal.pdf
 
Modul Ajar Bahasa Indonesia Kelas 2 Fase A Kurikulum Merdeka - abdiera.com
Modul Ajar Bahasa Indonesia Kelas 2 Fase A Kurikulum Merdeka - abdiera.comModul Ajar Bahasa Indonesia Kelas 2 Fase A Kurikulum Merdeka - abdiera.com
Modul Ajar Bahasa Indonesia Kelas 2 Fase A Kurikulum Merdeka - abdiera.com
 
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdfPaparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
Paparan Kurikulum Satuan Pendidikan_LOKAKARYA TPK 2024.pptx.pdf
 
Naufal Khawariz_2021 B_Analisis Kritis Jurnal.pdf
Naufal Khawariz_2021 B_Analisis Kritis Jurnal.pdfNaufal Khawariz_2021 B_Analisis Kritis Jurnal.pdf
Naufal Khawariz_2021 B_Analisis Kritis Jurnal.pdf
 

Belajar dasar html

  • 1. HTML atau Hyper Text Markup Language merupakan sebuah bahasa markah untuk membuat halaman web. Membuat file HTML Dapat di buat menggunakan teks editor Notepad++, Sublime Text, dll. Ekstensi file harus .html Contoh untuk menampilkan informasi : silahkan kunjungi Situs Web Darmawan maka penulisan kodenya seperti ini : Maka tampilan di browser akan seperti ini : Gambar 1. tag dari html harus di akhiri dengan dengan /, misal seperti penulisan tag diatas pembukaan <body> dan di tutup dengan </body>. Next kita menggunakan tag <title> dan <head> , <head> merupakan kepala (ndas) “bhs jawa” dokumen. Dari kode di atas seperti gambar 1, tambahkan tag <head> dan <title>, contoh : <title> untuk judul website, <head> untuk membuat kepala dokumen. dan hasilnya sepeti gambar di bawah ini : <!DOCTYPE html> <html> <body> Situs Web darmawan </bodyl> </html> <!DOCTYPE html> <html> <head> <title>Situs Web</title> </head> <body> Situs Web darmawan </bodyl> </html>
  • 2. Gambar 2. Next...menggunakan tag <h1> dan tag <p> , tag <h1> fungsinya untuk membuat judul suatu artikel, h1 maksudnya adalah untuk ukuran teksnya,. Untuk tag <p> fungsinya membuat paragraf. Contoh : Maka akan tampil seperti gambar di bawah ini : Gambar 3. Teks yang ada di <h1> dan di tutup </h1> teks nya lebih besar. Dan teks yang berada di tag <p> ukurannya normal. <!DOCTYPE html> <html> <head> <title>Situs Web</title> </head> <body> <h1>Situs Web darmawan</h1> <p> situs web darmawan adalah situs yang bertujuan belajar tentang HTML, dengan cara begini, khususnya saya bisa lebih memahami dan mengerti kegunaan beberapa tag HTML.</p> </body> </html>
  • 3. Kesimpulanya, HTML adalah bahasa yang wajib dipelajari sebelum mempelajari bahasa pemograman yang lainya,dan siapa saja yang ingin menjadi pembuat website (Web Developer). Karena HTML merupakan dasar untuk membuat website. Contoh di atas sudah menjelaskan bagaimana kode HTML itu berfungsi. Kuncinya adalah sering berlatih membuat file HTML. InsyAllah anda khususnya saya akan selalu ingat tag tag nya. Cukup sekian pengenalan HTML nya, tujuan penuliasan ini adalah untuk pembejaran saya khususnya agar selalu bisa mengingat dan lebih memahami tentang HTML. Terimakasih wassalam...semoga sehat selalu. Salam Stay at home. Work from Home. Referensi:  https://www.w3schools.com/html/default.asp  https://www.w3.org/standards/webdesign/htmlcss