World Wide Web (www)

World Wide Web Lebih dikenal dengan web, merupakan salah satu layanan yang didapat oleh pemakai

computer yang terhubung ke internet.

Web pada awalnya adalah ruang informasi dalam internet dengan menggunakan teknologi hyperteks,

pemakai dituntun untuk menemukan informasi dengan mengikuti link yang disediakan dalam dokumen

web yang ditampilkan dalam browser web.

Web memudahkan pengguna computer untuk berinteraksi dengan pelaku intenet lainnya dna

menelusuri (informasi) di internet.

Sejarah Web

Tahun 1993 Tim Berners-Lee dan peneliti lain di European Particle-Physics Lab (Consei European pour

la recherce nuclaire atau CERN) di Geneva Swiss. Dimana mereka mengembangkan suatu cara untuk

men-share data antar koleganya menggunakan sesuatu yang disebut dengan hypertext. Pemakai di

CERN dapat menampilkan dokumen pada layar computer dengan menggunakan software browser baru.
Kode kode khusus disiapkan ke dalam dokumen elektronik sehingga memungkinkan pemakai meloncat

dari satu dokumen ke dokumen lain pada layar hanya dengan memlilih sebuah hyperlink. Selanjutnya

kemampuan internet dimasukan ke dalam browser ini sehingga memungkinkan satu dokumen mampu

loncat ke dokumen lain tidak dari satu computer saja melainkan ke dokumen lain yang letaknya pada

computer remote.

Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam

HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat

berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan

text inilah yang dinamakan hypertext, walaupun pada implementasinya nanti tidak hanya text yang

dapat dijadikan link.

Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai

bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan

jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.
HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika

hanya menggunakan HTML tampilan web terasa hambar.

Pengertian Web Browser

Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk

menerima, menampilkan, dan menerjemahkan informasi dari world wide web. 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.

Penggunaan Web Browser terbanyak

Berdasarkan situs w3counter.com yang diakses per Februari 2021

Fungsi Web Browser

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.

Memilih Aplikasi Editor HTML (Notepad++)

Setelah web browser berhasil diinstal, untuk membuat kode HTML kita butuh sebuah aplikasi text

editor, diantaranya adalah Notepad++

Memilih Aplikasi Editor HTML

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.
Apa itu dokumen html ?

HTML kependekan dari Hyper Text Markup Language. Dokumen HTML adalah file teks murni yang

dapat dibuat dengan editor teks sembarang.

Dokumen ini dikenal sebagai web page. Dokumen HTML merupakan dokumen yang disajikan dalam

browser web surfer. Dokumen ini umumnya berisi informasi atau interface aplikasi dalam internet.

Penamaan dokumen ?

Pilih suatu nama sembarang nama, kemudian tambahkan sebuah ekstensi “.htm” atau “.html” (tanda

petik ganda tidak perlu dituliskan karena digunakan sebagai penjelas saja).

Definisi elemen

Dokumen html disusun oleh elemen elemen. “elemen” merupakan istilah bagi komponen komponen dasar

pembentuk dokumen html. Beberapa contoh elemen adalah head, body, table, paragraph, dan list.
Definisi tag

Untuk menandai berbagai elemen dalam suatu dokumen html kita menggunakan tag. Tag html

menggunakan terdiri atas sebuah kiri kurung sudut < , sebuah nama tag dan sebuah kurung sudut

kanan >.

Nama elemen ditunjukkan dengan nama tag-nya. Suatu elemen didalam dokumen html harus ditandai

dengan penulisan tag-nya yang berpasangan. Ada beebrapa elemen yang tidak mengharuskan tagnya

dituliskan secara berpasangan, elemen tersebut di antaranya adalah

Paragraph dengan tag <p> ….. tag </p>

Ganti baris – line break tag <br>

Garis datar – horizontal rule dengan tag <hr> … tag </hr>

List item dengan tag <li> … tag </li>

Petunjuk Untuk Menggunakan Tag

Tag html diapit dengan dua karakter kurung bersudut (angle bracket) < dan >

Tag html secara normal selalu berpasangan seperti <b> dan </b>
 Tag pertama dalam suatu pasangan adalah tag awal dan tag kedua merupakan tag akhir

Tag html tidak case sensitive dimana <b> berarti sama dengan <B>

Jika dalam suatu tag ada tag lagi maka penulisan tag akhir tidak boleh bersilang harus berurut

misalnya: tag awal <b> <i> maka tag penutupnya </i> </b>

Note:

Secara umum gunakan tag dengan huruf kecil (lower case)

Elemen html yag dibutuhkan

Elemen yang dibutuhkan untuk membuat suatu dokumen html dinyatakan dengan tag <html>, <head>,

<body> berikut tag-tag pasangannya. Setiap dokumen terdiri dari tag head dan body. Elemen head

berisi informasi tentang dokumen tsb. Dan elemen body berisi teks yang sebenarnya yang tersusun

dari link, grafik, paragraph dan elemen lainnya.

Secara umum dokumen web dibagi menjadi dua section: section head dan section body.

<html>

<head>

Informasi tentang dokumen html

</head>

<body>

Setiap dokumen html diawali dengan menuliskan tag <html> dan tag </html> di akhir dokumen. Tag ini

menandai elemen html yang berarti dokumen ini adalah dokumen html. Dalam satu dokumen hanya ada

satu elemen html.

Section atau elemen body ditandai dengan tag <body> di awal dan tag </body> di akhir.

Section body merupakan elemen terbesar didalam dokumen html, elemen ini berisi isi dokumen yang

akan ditampilkan pada browser meliputi paragraph, link, grafik dsb.

 Tag – tag dasar html

Html

Merupakan tag dasar yang mendefinisikan bahwa dokumen ini adalah dokumen html. Tag ini

merupakan suatu keharusan bagi pemrograman web untuk menuliskannya sebagai tag pertama dalam

dokumen html.

Head

Untuk menuliskan keterangan tentang dokumen web yang akan ditampilkan.

Title

Merupakan tag didalam head yang ahrus dituliskan untuk memberikan judul atau informasi pada

caption browser web tentang topic atau judul dari dokumen web yang ditampilkan dalam browser.
Body

Pada bagian ini semua isi dokumen akan ditampilkan didalam browser

Paragraph

Setiap paragraph harus dimulai dengan memberi tag <p>, namun diakhir paragraph tidak diharuskan

menuliskan </p> sebagai akhir paragraph. Namuns etiap pergantian paragraph harus dimulai dengan

<p> kembali.

Line break

Ganti baris disini dimaksudkan hanya menyajikan informasi pada baris sendiri tapi tidak berganti

paragraph. Menggunakan tag <br>

Heading

Pada dokumen html judul disebut heading. Heading tulisan akan ditampilkan dengan huruf yang lebih

besar atau ditebalkan. Heading juga dimanfaatkan untuk menunjukkan tingkat keberartian dari teks

yang akan dituliskan.

 Mengatur Tata letak heading

Alignment heading:

Kiri – left

Tengah – center

Kanan – right

Langkah Langkah membuat kode html menggunakan notepad

1. Buka aplikasi notepad untuk mengetikkan kode program html

2. Ketikkan kode program html pada aplikasi notepad

3. Kemudian save as file tersebut dengan format .html

Namun sebelumnya silahkan tentukan lokasi penyimpanan file html tersebut pada pc atau laptop

anda, untuk kemudian dibuatkan folder tersendiri. Disini saya membuat folder dengan nama

LATIHAN KODE HTML PKTI 2C yang saya simpan dilokasi document pada pc saya.

Note: lokasi penyimpanan file html dan nama folder silahkan anda tentukan sendiri.
 Pada gambar diatas nama folder LATIHAN KODE HTML PKTI 2C yang disimpan di lokasi document

Selanjutnya untuk file name bebas disini saya contohkan nama filenya: LAT1.html

Jangan lupa untuk menyertakan .html dibelakang nama file untuk menandakan bahwa file tersebut

merupakan file html

Dan untuk Save as type pilih all files kemudian klik save
Kemudian silahkan running kode program html tersebut dengan cara silahkan anda kembali ke folder

tempat anda menyimpan file html yang baru saja anda buat, disini saya akan membuka folder saya

yang bernama LATIHAN KODE HTML PKTI 2C

Pada gambar diatas terlihat kode program html saya tersebut terbaca dan akan running

menggunakan web browser mozilla, tentunya setiap orang akan berbeda web browsernya tergantung

pada pc atau laptop anda menggunakan web browser chrome atau mozilla atau opera mini atau

explorer.

Note: untuk running kode html tersebut silahkan di double click, running tetap dapat dilakukan

walaupun sikon offline (tidak terhubung oleh internet)

Jika pada pc atau laptop anda menggunakan beberapa web browser, maka untuk running kode html

silahkan dipilih saja mau menggunakan web broser yang mana saja:

Silahkan pilih web browser

Misal saya pilih web browser chrome untuk running kode html saya yang berada pada file html

bernama LAT1.html maka hasilnya:

Karena pada program kita menggunakan perintah : <title> Hallo Apa Kabar, Saat ini kita belajar kode

html </title> Maka hasilnya akan menampilkan judul pada browser tersebut berupa tulisan Hallo Apa

Kabar, Saat ini kita belajar kode html

Note: untuk membuat kode program baru lainnya silahkan pilih file >> new pada apliaksi notepad

anda.
Contoh penggunaan tag paragraph <p> pada kode html:

Saya menyimpan file dengan nama LAT2.html kemudian saya running dan outputnya:
Contoh penggunaan tag line break <br> pada kode html:

Saya menyimpan file dengan nama LAT3.html kemudian saya running dan outputnya:
Contoh penggunaan tag penggaris datar <hr> pada kode html:

Saya menyimpan file dengan nama LAT4.html kemudian saya running dan outputnya:
Contoh penggunaan tag heading pada html:

Saya menyimpan file dengan nama LAT5.html kemudian saya running dan outputnya:
Contoh penggunaan alignment pada heading html:

Saya menyimpan file dengan nama LAT5.html kemudian saya running dan outputnya:
TUGAS PKTI 2C – MINGGU KE-1:

Teks dalam dokumen web dapat diformat secara khusus untuk menunjukkan perbedaan penekanan

terhadap isi dan maksud dari teks tersebut. Perbedaan ditampilkan dalam bentuk huruf tebal,

miring (italic), digarisbawahi, subscript, superscript.

1. Silahkan berikan masing- masing contoh kode program beserta outputnya untuk menampilkan:

a) Huruf tebal atau bold

b) Memiringkan huruf atau italic

c) Memberikan tampilan garisbawah

d) Superscript

e) Subscript

2. Apa yang kalian ketahui mengenai fungsi dari tag emphasize ? berikan contoh kode

programnya dan sertakan outputnya.

Note:

 Tugas bersifat individu

 Sertakan screenshoot notepad yang berisi kode program html beserta tampilan outputnya.

 Sertakan penjelasan fungsi dari setiap tag yang anda pergunakan pada kode program html

anda. Contoh: tag <body> … </body> digunakan untuk menuliskan kode program html dst.

 Bagi siapapun yang isi kode program htmlnya sama atau asal boleh copas dari kawan lainnya

dianggap NOL. Jadi silahkan anda berkreasi dengan kreatif menggunakan tag tag html

tersebut.

 Subjek tugas : TGS-M1-HTML-NAMA-KLS

 Format file : .pdf

 Deadline pengumpulan tugas minggu ke-1 : Sabtu , 5 Maret 2022 Pukul 12:00 wib

 Semua tugas dikumpulkan terlebih dahulu di ketua kelas untuk kemudian dikirim ke

gmail tugas:tugasmhsnia2019@gmail.com (alamat gmail bisa dicek di deskripsi wag kelas)

 Bagi yang telat mengumpulkan tugas (lewat dari deadline) mohon maaf saya anggap NOL (tidak

mengerjakan tugas).
Note: saya hanya menerima file tugas yang dikirimkan melalui ketua kelas masing masing (agar

tidak tercecer untuk saya koreksi)