Repository Universitas Komputer Indonesia

Kurniasih, Dewi

Desfirmansyah, Gilbran Sera

Symbolic Interaction in Bureaucracy: Communication Strategy of Bandung City Community Towards Participation-Based Administrative Services

Pemrograman Web 1
Materi ini berisi penjelasan pengguaan W3 Css Framework, diantaranya adalah penggunaan Class Container,  Class Panel, Fon

Suryana, Taryana

Materi 13. W3 Css Framework

43055 - Komputer Aplikasi E-Commerce (2 SKS)
Materi ini membahas mengenai berbagai operator yang ada dalam php dan operator pada databas

Materi 3 Operator Pada Php Dan Pada Database

Pemrograman Web 1-2025
Materi ini berisi penjelasan singkat mengenai perkuliahan pemrograman web-1, Pengenalan HTML, Dasar-dasar HTML, HTML5,  Web Browser, dan Text Editor, Pemrograman HTM

 
BAB 1 
PENGENALAN BROWSER 
TEXT EDITOR DAN HTML 
 
Taryana Suryana M.Kom 
Teknik Informatika 
2025 
 
 
 
taryanarx@email.unikom.ac.id 
taryanarx@gmail.com 
HP.081221480577 
 
 
1.1.Pengertian Web Browser 
Web Browser merupakan sebuah Software Aplikasi yang digunukan 
untuk menerima,  menampilkan, dan menerjemahkan informasi dari 
world wide web (wikipedia). Dan salah satu informasi itu dibuat 
dalam format HTML. 
Kode HTML yang kita buat akan diterjemahkan oleh web browser 
agar tampil seperti yang dirancang. Pada dasarnya seluruh web 
browser dapat menampilkan kode HTML sama baiknya, namun jika 
 
sudah berbicara mengenai desain halaman, tiap-tiap browser 
memiliki beberapa perbedaan. 
HTML dirancang dan diatur oleh sebuah badan standarisasi dunia 
yang khusus menangani web, yaitu W3C (World Wide Web 
Consortium). Hal ini dikarenakan tiap-tiap program web browser 
menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di 
perlukan sebuah standar yang sama untuk seluruh browser. 
Namun pada penerapannya, standar ini hanya merupakan 
rekomendasi. Beberapa web browser membuat aturannya sendiri. 
Salah satu yang terkenal adalah Internet Explorer pada sekitar tahun 
2000-an. Hampir 90% web browser yang digunakan saat itu adalah 
Internet Explorer, dan IE tidak sepenuhnya mengikuti rekomendasi 
W3C. Sedangkan web browser Opera yang mencoba menerapkan 
standar W3C tidak terlalu populer. Perbedaan aturan penerjemahan 
HTML di antara web browser inilah yang terus menjadi tantangan 
bagi Programmer web. 
Sekarang Internet Explorer tidak lagi sekuat dulu. Web Browser 
Mozilla Firefox dan Google Chrome telah menguasai lebih dari 50%, 
dan IE juga telah berusaha menerapkan standar W3C, termasuk web 
browser terbaru mereka: Microsoft Edge. 
 
 
1.2.Fungsi Web Browser 
Untuk mempelajari HTML, web browser adalah perangkat utama 
yang kita butuhkan. Ibarat bahasa pemrograman lainnya, Web 
Browser adalah Compiler dan intrepreter HTML. Anda bebas 
menggunakan web browser yang disukai, namun dalam tutorial 
Belajar HTML ini saya akan menggunakan Google Chrome. 
 
1.3.Memilih Aplikasi Text Editor HTML 
 
Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi 
editor HTML digunakan untuk mempermudah kita membuat kode 
HTML. HTML sendiri pada dasarnya hanya text biasa yang ditulis 
dalam kode-kode khusus. Web Browser-lah yang akan 
menerjemahkan kode HTML ini menjadi sebuah tampilan halaman 
web. 
Untuk membuat kode HTML maupun halaman web sederhana, kita 
tidak perlu menggunakan aplikasi yang besar dan berat. Aplikasi 
Notepad bawaan Windows sebenarnya sudah cukup untuk membuat 
kode HTML. Namun untuk tutorial belajar HTML kali ini saya akan 
menggunakan aplikasi Notepad++. 
 
1.3.Text Editor Notepad++ 
Aplikasi Notepad++ bisa di download secara gratis dari 
http://notepad-plus-plus.org/download/ dimana pada saat tutorial 
ini diupdate pada September 2020, versi terakhir adalah v7.8.9, 
berukuran sekitar 3.95MB. Notepad++ merupakan aplikasi editor text 
gratis ringan namun memiliki banyak fitur. Salah satunya adalah fitur 
pewarnaan code (syntax highlighting). Fitur ini akan memudahkan 
penulisan HTML. 
 
Untuk dapat mengikuti Mata Kuliah Pemrograman WEB ada 
beberapa perangkat lunak (software) yang harus disiapkan dan di 
Install di Komputer Anda, yaitu  sebagai berikut: 
1. Text Editor, bisa menggunakan Notepad++, Visual Studio 
Code, Atom, dan lain-lain  
2. Web Browser, bisa menggunakan Chrome, Mozilla, Internet 
Explorer, Microsoft Edge dan lain-lain 
 
 
 
 
 
 
 
 
 
 
Pada Materi ini dan materi selanjutnya Text Editor yang akan 
digunakan adalah dengan menggunakan Notepad++ dan browsernya 
menggunakan chrome 
 
Download Notepad++ ada di : 
https://notepad-plus-plus.org/downloads/ 
 
Gambar 1.1. Download Notepad ++ 
 
Ada 2 Pilihan Flatform Windows, ada yang versi 32 Bit, dan versi 64 
Bit,  
Pada Materi ini penulis menggunakan Notepad++ versi 64-bit x64, 
setelah berhasil didownload, kemudian lanjutkan dengan 
menginstallasikan  notepad++, jika berhasil diinstall kemudian 
jalankan, maka akan ditampilkan jendela seperti berikut: 
 
  
 
1.4.Program Pertama dengan HTML 
Pada jendela editor Notepad++ tuliskan code program berikut: 
 
Gambar 1.2. Menuliskan Kode Program Pada Notepad ++ 
 
1.4.Menyimpan Kode Program 
Setelah mengetikan Kode Program diatas, selanjutnya adalah 
menyimpannya kedalam media penyimpanan anda, caranya adalah 
Pada  Jendela Notepad++, Pilih menu File, kemudian Save, misalnya 
simpan di drive D:\BELAJAR_HTML\pertama.html atau di drive 
lainnya. 
 
 
Gambar 1.3. Menyimpan File HTML 
 
1.5.Membuka File Dengan Browser 
Untuk menampilkan hasil dari kode program pertama.html yang tadi 
sudah dibuat, dapat dilakukan dengan cara, pada Jendela Windows 
Explorer, Click kanan pada file yang akan dibuka, kemudian pilih open 
With->Google Chrome 
 
Gambar 1.4. Menampilkan Halaman Pertama belajar HTML 
 
1.6.HTML (Hypertext Markup Language) 
Hypertext Markup Language (HTML) adalah bahasa yang digunakan 
untuk menulis halaman web. HTML merupakan pengembangan dari 
 
standar pemformatan dokumen teks yaitu Standard Generalized 
Markup Language (SGML).  HTML pada dasarnya merupakan 
dokumen ASCII atau teks biasa, yang dirancang untuk tidak 
tergantung pada suatu sistem operasi tertentu. 
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN 
dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal 
tahun 1990 HTML mengalami perkembangan yang sangat pesat. 
Setiap pengembangan HTML pasti akan menambahkan kemampuan 
dan fasilitas yang lebih baik dari versi sebelumnya.  
Kegunaan bahasa ini ialah untuk memanipulasi browser sehingga 
dapat menampilkan informasi yang dapat dibaca oleh pengguna 
komputer.  
 
Materi yang akan dibahas meliputi diantaranya: 
❖ Dasar–Dasar HTML 
❖ Menambahkan Efek Karakter Fisik pada Halaman Web 
❖ Menambahkan Efek Karakter Logika 
❖ Membuat Tabel 
❖ Membuat Daftar 
❖ Mengatur Tampilan Dokumen 
❖ Membuat Link 
❖ Menempatkan Gambar ke dalam Web 
❖ Menambahkan Obyek-Obyek Multimedia 
❖ Membuat Formulir HTML 
❖ Membuat Frame 
❖ Membuat Web Site 
  
 
 
1.6.1.Struktur Halaman HTML 
Pada dasarnya isi halaman html memiliki visualisasi struktur halaman 
seperti berikut: 
 
Gambar 1.5 Struktur Dokumen HTML 
 
 
Catatan: Konten di dalam bagian <body> (area putih di atas) akan 
ditampilkan di browser. Konten di dalam elemen <title> akan 
ditampilkan di bagian atas judul browser atau di tab halaman. 
 
Penjelasan Contoh 
• <!DOCTYPE html>deklarasi mendefinisikan bahwa dokumen ini 
adalah dokumen HTML5 
• <html>elemen elemen akar halaman HTML 
• <head>elemen berisi informasi meta tentang halaman HTML 
 
• <title>elemen menentukan judul untuk halaman HTML (yang 
ditampilkan dalam bar judul browser atau tab halaman ini) 
• <body>elemen mendefinisikan  dokumen, dan merupakan wadah 
untuk semua isi terlihat, seperti judul, paragraf, gambar, 
hyperlink, tabel, daftar, dll 
• <h1>elemen mendefinisikan judul besar 
• <p>elemen mendefinisikan sebuah paragraf 
 
 
Untuk jelasnya tuliskan kode program berikut pada halaman baru 
notepad++ anda: 
<!DOCTYPE html> 
<html> 
<head> 
<title> 
       Belajar HTML 
</title> 
</head> 
<body> 
Belajar Pemrograman WEB dengan Menggunakan Bahasa HTML 
<br> 
Unikom Bandung 
</body> 
</html> 
 
❖ Setelah selesai menuliskan dokumen tersebut di atas lakukan 
perintah FILE SAVE, atau SAVE AS nama  file latihan1.html dan 
pada bagian perintah SAVE AS TYPES pilih ALL FILES  
 
1.6.2.Menambahkan Isi pada Bagian Body 
Isi dalam dokumen HTML ditempatkan di antara bagian <BODY> 
sampai dengan </BODY>. Untuk menambahkan isi tersebut  dapat 
dilakukan dengan cara sebagai berikut:  
Contoh Program 
 
<!DOCTYPE html> 
<html> 
<head> 
<title> JUDUL HALAMAN </title> 
</head> 
<body> 
 <h1> Potensi Manusia </h1> 
Manusia memiliki potensi diri untuk meraih sukses 
yang didambakannya.  
Sukses sejati tidak hanya diukur melalui pencapaian 
materi, akan tetapi lebih kepada seberapa besar 
peranan kita untuk manusia dan alam ini 
</body> 
</html> 
 
Di bagian <BODY> sampai dengan </BODY> diisi dengan Header 
Halaman contohnya adalah “Potensi Manusia”. Cara membuatnya 
ialah dengan menggunakan perintah <H1> sampai dengan </H1>. 
Perintah H1 digunakan untuk membuat HEADER atau Kepala Berita.. 
Setelah itu ditambahkan Caption atau penjelasan singkat mengenai 
isi halaman tersebut..  
 
Setelah selesai menuliskan semua bagian dokumen tersebut, lakukan 
perintah FILE SAVE AS dengan nama file latihan2.html 
 
 
Gambar 1.6. Tampilan  Halaman latihan2.html 
 
 
DAFTAR PUSTAKA 
 
1. Suryana, Taryana (2024) Pengantar Pemrograman WEB (HTML, 
CSS, PHP, MYSQL) xviii, 181 hlm Deepublish, ISBN:978-623-02-
8181-5 
2. Suryana, Taryana (2024) Materi7. Membagi Layar Dengan Frame Dan 
Iframe. [Teaching Resource] 
3. Suryana, Taryana (2024) Materi 6. Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
4. Suryana, Taryana (2024) Materi 5. Form Dengan Html Dan 
Html5. [Teaching Resource] 
5. Suryana, Taryana (2024) Materi 4. Membuat Tabel Dengan 
Html. [Teaching Resource] 
6. Suryana, Taryana (2024) Materi 3. Membuat List Berurutan Dan List 
Tidak Berurutan. [Teaching Resource] 
7. Suryana, Taryana (2024) Materi 2. Memformat Dokumen Html Dan 
List. [Teaching Resource] 
8. Suryana, Taryana (2024) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor. [Teaching Resource] 
9.  
 
1. Suryana, Taryana (2023) Materi 6. Membuat Tautan Atau Link Dalam 
Html Teknik Informatika 2023-2024. [Teaching Resource] 
2. Suryana, Taryana (2023) Materi 5. Form Dengan Html Dan Html5 
Teknik Informatika Unikom 2023-2024. [Teaching Resource] 
3. Suryana, Taryana (2023) Materi 4. Membuat Tabel Dengan 
Html. [Teaching Resource] 
4. Suryana, Taryana (2023) Materi 3. Membuat List Berurutan Dan List 
Tidak Berurutan. [Teaching Resource] 
5. Suryana, Taryana (2023) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
6. Suryana, Taryana (2023) Materi 1. Pengenalan Pemrograman Web, 
Browser Dan Text Edit. [Teaching Resource] 
7. Suryana, Taryana (2023) Materi 1. Pengenalan E-commerce Dan 
Persiapan Software Pendukungnya. [Teaching Resource] 
8. Suryana, Taryana (2023) Materi 11 Input Dan Label. [Teaching 
Resource] 
9. Suryana, Taryana (2023) Materi 10. Display Layout Dan 
Button. [Teaching Resource] 
10. Suryana, Taryana (2023) Materi 11. Input Dan Label Dalam W3 
Framework. [Teaching Resource] 
11. Suryana, Taryana (2022) Materi 9. Framework Css. [Teaching 
Resource] 
12. Suryana, Taryana (2022) W3 Css Framework. [Teaching Resource] 
13. Suryana, Taryana (2022) Materi 8 Pengenalan Css. [Teaching 
Resource] 
14. Suryana, Taryana (2022) Frame Dalam Html. [Teaching Resource] 
15. Suryana, Taryana (2022) Materi 6 Membuat Tautan Atau Link Dalam 
Html. [Teaching Resource] 
16. Suryana, Taryana (2022) Materi 5 Form Dengan Html Dan 
Html5. [Teaching Resource] 
17. Suryana, Taryana (2022) Materi 4. Membuat Tabel Dalam 
Html. [Teaching Resource] 
18. Suryana, Taryana (2022) Materi 3 Membuat List / Daftar. [Teaching 
Resource] 
19. Suryana, Taryana (2022) Materi 2 Memformat Dokumen 
Html. [Teaching Resource] 
20. Suryana, Taryana (2022) Materi 1 Pengenalan Html. [Teaching 
Resource] 
21. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
22. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
23. https://www.w3schools.com/html, September, 2021 
 
24. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
25. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
26. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
27. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
28. Suryana, Taryana; Koesheryatin (2014),Aplikasi Internet Menggunakan 
HTML, CSS & Java Script, Elexmedia Komputindo, Jakarta 
29. Suryana, Taryana (2021) Bab 1. Pengenalan Html. [Teaching Resource] 
30. Suryana, Taryana (2021) Pelatihan Pembuatan Website Dengan 
Menggunakan Html Dan Dreamweaver. [Teaching Resource] 
31. Suryana, Taryana (2010) Membuat Web Pribadi dan Bisnis dengan 
HTML., Gava Media, Jogyakarta 
32. https://www.w3schools.com/html, September, 2021 
33. Suryana, Taryana (2021) Materi 1. Pengenalan Html Web Browser 
Dan Text Editor.  [Teaching Resource] 
34. Suryana, Taryana (2021) Pengenalan Komputer Aplikasi It 1 Dan 
Pemrograman Web. [Teaching Resource] 
35. Suryana, Taryana (2021) Memformat Dokumen Html. [Teaching 
Resource] 
36. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Materi Jurusan Perancangan Wilayah Dan Kota. [Teaching Resource] 
37. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan Html 
Untuk Jurusan Teknik Sipil. [Teaching Resource] 
38. Suryana, Taryana (2021) Membuat List Atau Daftar Dengan 
Html. [Teaching Resource] 
39. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-wa1-
ul2-2021. [Teaching Resource] 
40. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Ts-
2021-1. [Teaching Resource] 
41. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas Pwk-
2021-1. [Teaching Resource] 
42. Suryana, Taryana (2021) Input Dan Output Data Barang Dan Data 
Member. [Teaching Resource] 
43. Suryana, Taryana (2021) Membuat Aplikasi Pencatatan Perkawinan 
Disdukcapil. [Teaching Resource] 
44. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If3-
2021-1. [Teaching Resource] 
45. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-2-
2021-1. [Teaching Resource] 
46. Suryana, Taryana (2021) Membuat Tabel Dengan Html Kelas If-
12021-1. [Teaching Resource] 
 
47. https://www.w3schools.com/html 
 
 
 
 


Materi 1. Pengenalan Pemrograman Web-1

Pemrograman Web 1
Materi ini berisi penjelasan mengenai penggunaan input dan label CSS dalam Progra

Materi 14 Input Dan Label

43055 - Komputer Aplikasi E-Commerce (2 SKS)
Materi ini membahas mengenai perulangan dalam PHP dan Pembuatan Edit Dat

Materi 6. Perulangan Dan Edit Data

43055 - Komputer Aplikasi E-Commerce (2 SKS)
Materi ini membahas mengenai relasi antar tabel dalam pemrograman e-commerc

Materi 14 Relasi Antar Tabel

Pemrograman Web 2
Materi ini membahas mengenai berbagai jenis perulangan, for, while, do while dan foreac

Materi 3 Perulangan - Looping

Anjani, Maisya Chaluela

Social Welfare of Rural Communities as a Function of Social Workers’ Empowerment

Pemrograman Web 2
Materi ini membahas mengenai Operator yang ada dalam PHP berikut penggunaanya dan Operator dalam Databas

Not a member yet