Pengenalan HTMLOleh:Taryana Suryana M.Kom Teknik Informatika [email protected]@gmail.

com Line/Te

Join Zoom Meeting https://us04web.zoom.us/j/3629329963?pwd=ZUhWcXl6RHp3dTNKZmlxWkUrV2ZCQT09Meeting ID: 362 932 9963

Pendahuluan
 Pengenalan Web Browser
 Electronic Mail (E-Mail)
 Pengantar Desain Website dengan HTML
Pengertian Web Browser
Web Browser adalah 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.

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.
Memilih Aplikasi 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++.
Text Editor Notepad++
Aplikasi Notepad++ bisa di download secara gratis dari http://notepad-plus- plus.org/download/

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:

Program Pertama dengan HTML

Pada jendela editor Notepad++ tuliskan code program berikut:
Gambar 1.2. Menuliskan Kode Program Pada Notepad ++
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
Gambar 1.3. Menyimpan File HTML
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
Pengertian E-Mail
E-Mail adalah singkatan dari Electronics Mail atau dalam bahasa Indonesia disebut Surat Elektronik
merupakan sarana dalam mengirim surat yang dilakukan melalui media internet. Media internet
yang dimaksud bisa melalui komputer atau handphone yang memiliki akses internet. Pada umumnya
mengirim surat biasa akan di kenakan biaya (Membeli Perangko) namun pada Surat Elektronik
hanya dibutuhkan
sambungan internet.
Fungsi E-mail
E-mail adalah alamat resmi kita di dunia maya. Dengan menggunakan email kita dapat terhubung
dalam berbagai kegiatan internet, seperti bergabung di situs jejaring sosial semisal Facebook, Twitter
atau Instagram maka saat pendaftaran akan membutuhkan email. Saat ini, Email telah berkembang
hingga memiliki fungsi yang sangat beragam. Mengirim file, foto, video dengan teman dan keluarga
menjadi lebih mudah
Anda Mahasiswa yang kuliah di Unikom akan memiliki E-Mail dengan domain
@email.unikom.ac.id, E-mail ini digunakan untuk seluruh aktivitas akademik yang ada di Unikom,
seperti mengikuti perkuliahan online, registrasi, perwalian, nilaionline dan lain sebagainya.
Cara menggunakan E-Mail unikom sama halnya seperti anda menggunakan Gmail (Google Mail) hal
ini dikarenakan Unikom yang sudah bekerja sama dengan Google dalam hal Pemanfaatan Google
Apps for Education.

Gambar 1.5. Halaman inbox E-Mail Unikom Penulis

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

Tampilan Dokumen HTML Sederhana

Suatu dokumen HTML yang paling sederhana setidak-tidaknya mempunyai elemen-elemen seperti di
bawah ini..
<html>
<head>
<title> </title>
</head>
<body> Isi
</body>
</html>

Gambar 1.6 Struktur Dokumen HTML

  Setiap dokumen HTML terdiri atas <HTML></HTML>, <HEAD></HEAD>, <TITLE></TITLE> dan
<BODY></BODY>
 Diantara perintah <TITLE> dengan </TITLE> terdapat bagian judul untuk dokumen yang akan dibuat, sebagai contoh
“Belajar html”
 Antara <HTML> sampai dengan </HEAD> disebut sebagai bagian pertama.
 Antara <BODY> sampai dengan </HTML> disebut bagian kedua / isi

Untuk jelasnya tuliskan kode program berikut pada halaman baru notepad++ anda:
<html>
<head>
<title>
Belajar HTML
</title>
</head>
<body>
Belajar Pemrograman WEB dengan Menggunakan Bahasa HTML<br> Unikom Bandung
</body>
</html>

Gambar 1.7. Latihan1.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

Gambar 1.8. Hasil tampilan latihan1.html

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

<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>

Gambar 1.9. kode Program Latihan.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.10. Tampilan Halaman latihan2.html

Upload Latihan ke https://Kuliahonline.unikom.ac.id

Setelah program latihan1.html dan latihan2.html selesai dibuat dan hasilnya sesuai dengan tampilan
yang ada di materi ini:
Dengan menggunakan Word Copy Paste Kode program latihan1.html dan latihan2.html
beserta tangkapan layar hasil keluarannya (screenshot), kemudian kirim ke Modul Tugas yang ada
di kuliahonline.unikom.ac.id, Nama Filenya Laporan Tugas1, Bisa dalam format Docs atau PDF
Dikumpulkan Paling Lambat Setiap Hari Minggu Sore

Terimakasih, selamat belajar

*Aplikasi Internet Menggunakan HTML, CSS & Java Script, Taryana Suryana, Koesheryatin,
Elexmedia Komputindo
 [email protected] Line/Telegram: 081221480577

09Meeting ID: 362 932 9963 Passcode: 8HQiXn

ma, menampilkan,
rmasi itu dibuat

ti yang dirancang.
a, namun jika
perbedaan.
us menangani web,
eb browser
uah standar yang

web browser

mpir 90% web

uhnya mengikuti
an standar W3C
owser inilah yang

Google Chrome
dar W3C, termasuk
n. Ibarat bahasa
bebas
ya akan

ML digunakan untuk
text biasa yang
HTML ini menjadi

u menggunakan
sudah cukup untuk
unakan aplikasi

s- plus.org/download/ dimana pada saat tutorial ini diupdate pada September 2020, versi terakhir adalah v7.8.9, be

kat lunak (software)

n lain-lain

lah dengan

didownload,
mudian jalankan,
nya kedalam media
, kemudian

dapat dilakukan
uka, kemudian pilih

Surat Elektronik
t. Media internet
t. Pada umumnya
Surat Elektronik
 pat terhubung
Facebook, Twitter
lah berkembang
an dan keluarga

da di Unikom,
gainya.
(Google Mail) hal
nfaatan Google
web.
rd Generalized Markup
g untuk tidak

oleh browser Mosaic.

n HTML pasti akan

ng

di
dibuat, sebagai contoh

SAVE AS nama file

ntuk menambahkan isi

si Manusia”. Cara
gunakan untuk
engenai isi halaman
n

kom.ac.id

dengan tampilan

n latihan2.html
Tugas yang ada
t Docs atau PDF

Koesheryatin,