SlideShare a Scribd company logo
1 of 18
Oleh:
Siti Husnul Bariah, Skom.,
M.Pd
Pend. Teknologi Informasi dan Komunikasi-
STKIP

 World Wide Web (WWW), lebih dikenal dengan
web, merupakan salah satu layanan yang didapat
oleh pemakai komputer yang terhubung ke internet.
 Web pada awalnya adalah ruang informasi dalam
internet, dengan menggunakan teknologi hyperteks,
pemakai dituntun untuk menemukan informasi.
Pendahuluan

 Web telah diadopsi oleh perusahaan sebagai
sebagian dari strategi teknologi informasinya, karena
beberapa alasan:
1. Akses informasi mudah
2. Setup server lebih mudah
3. Informasi mudah di distribusikan, dan
4. Bebas platform.
Lanjutan...

 Tahun 1993, Tim Berners-Lee dan peneliti lain di
European Particle Physics Lab (Consei Europeen
pour la Recherche Nucleaire, atau CERN) di Geneva,
Swis mengembangkan suatu cara untuk men-share
data antar koleganya menggunakan sesuatu yang
disebut dengan hypertext.
Sekilah Lahirnya Web

 Kode-kode khusus disisipkan ke dalam dokumen
elektronik ini.
 Memungkinkan pemakai untuk meloncat dari satu
dokumen ke dokumen lainnya pada layar dengan
hanya memilih sebuah hyperlink.
Lanjutan...

 Informasi web disimpan dalam dokumen yang disebut
dengan halaman-halaman web (web pages).
 Web page adalah file-file yang disimpan dalam komputer
yang disebut dengan server-server web (web servers).
 Komputer-komputer membaca web page disebut web client.
 Web client menampilkan page dengan menggunakan
program yang disebut dengan browser web (web browser).
 Browser web yang populer adalah mozilla firefox dan
google crome.
Bagaimana WWW Bekerja?

Skema WWW Bekerja

 Browser web adalah software yang digunakan untuk
menampilkan informasi dari server web.
 Cara kerja browser:
• Browser mengambil sebuah web page dari server dengan
sebuah request.
• Sebuah request adalah HTTTP standar yang berisi sebuah
page address.
• Sebuah page address terlihat seperti ebrikut:
http://www.ptisthusnulbariah.blogspot.com
Browser Web

 Browser menampilkan page dengan membaca
intruksi-intruksi.
 Instruksi yang paling umum untuk menampilkan
disebut tag HTML.
 Tag HTML contohnya seperti berikut: <p>ini adalah
paragraf</p>.
Bagaimana Browser Menampilkan Page?

Skema Dasar HTML
<HTML>
<HEAD>
<TITLE>Judul dokumen</TITLE>
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
 HTML: menandai awal dan akhir dokumen HTML
 HEAD: menandai bagian header dokumen HTML
 TITLE: memberi judul pada dokumen HTML
 BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)

 Server web adalah komputer yang digunakan untuk
menyimpan dokumen-dokumen web, komputer ini akan
melayani permintaan dokumen web dari kliennya.
 Browser akan mengirimkan request kepada server untuk
meminta dokumen tertentu atau layanan lain yang
disediakanoleh server.
 Server memberikan dokumen atau layanannya jika
tersedia juga dengan menggunakan protokol HTTP.
Server Web

 HTML (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.
Konsep HTML

 Ada dua cara untuk membuat sebuah web page:
1. HTML editor
2. Editor teks biasa (notepad)
 Penamaan dokumen (pilih suatu nama, sembarang nama,
kemudian tambahkan sebuah ekstensi “.htm” atau “.html”
 Dokumen HTML disusun oleh elemen-elemen.
 Elemen merupakan istilah bagi komponen-komponen dasar
pembentuk dokumen HTML. Contoh (head, body, paragraf,
dll)
Lanjutan...

 Untuk menandai berbagai elemen dalam suatu dokumen HTML,
kita menggunakan tag.
 Tag HTML terdiri dari kurung sudut kiri (<), sebuah nama tag, dan
sebuah kurung sudut kanan (>).
 Tag umumnya berpasangan (misalnya <h1> dengan </h1>.
 Ada beberapa elemen yang tidak mengharuskan tagnya ditulis
secara berpasangan:
o Paragraf dengan tag <p>
o Ganti baris <br>
o Garis datar <hr>
Definisi Tag

Contoh
<html>
<head>
<title>contoh halaman web saya</title>
</head>
<body>
<h1>selamat datang</h1>
<h2>di Halaman pertama web saya</h2>
<p>Perkenalkan, nama saya ..... Ini adalah <i>halaman web</i>
<b>pertama</b> saya, karena saya baru belajar tentang
cara membuat <b><i>halaman web</i></b>.
</p>
</body>
</html> <!-- akhir dokumen HTML -->

Contoh

TAG HTML (Lanjut....)
 <html> Dokumen
 <head> Header
 <title> Judul dokumen
 <body> Isi dokumen
 <h1>…<h6> Judul paragraf
 <p> Paragraf
 <b>,<i>,<u>,<sup>,<sub> Atribut
 <br> Ganti baris
 <font> Font
 <li>,<ol>,<ul> Enumerasi
 <hr> Garis mendatar
 <img> Gambar
 <a> Link (kaitan/rujukan)
 <table> Tabel
 <!-- --> Komentar
 <frame>,<frameset>,<iframe> Frame (bingkai)
 <form> Formulir isian
 <input>,<textarea>,<select> Komponen isian pada formulir
 <map> Link berdasar area pada gambar
 <span>,<div> Pengelompokan elemen dokumen

SELESAI

More Related Content

What's hot

Konsep Teknologi Web
Konsep Teknologi WebKonsep Teknologi Web
Konsep Teknologi WebTeukuMahawira
 
Mozilla Thunderbird
Mozilla ThunderbirdMozilla Thunderbird
Mozilla ThunderbirdAzizahdian
 
Laporan praktikum modul 5 (6rankap)
Laporan praktikum modul 5 (6rankap) Laporan praktikum modul 5 (6rankap)
Laporan praktikum modul 5 (6rankap) nellylawar
 
Laporan Praktikum Modul 5 (internet)
Laporan Praktikum Modul 5 (internet)Laporan Praktikum Modul 5 (internet)
Laporan Praktikum Modul 5 (internet)Faisal Amir
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)daffa12
 
TUTORIAL INTERNET DAN EMAIL
TUTORIAL INTERNET DAN EMAILTUTORIAL INTERNET DAN EMAIL
TUTORIAL INTERNET DAN EMAILAdhe II
 
Materi 1 Kuliah Pemrograman Web
Materi 1 Kuliah Pemrograman Web Materi 1 Kuliah Pemrograman Web
Materi 1 Kuliah Pemrograman Web Antonius Manginsela
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi webTeukuMahawira
 
1) dasar dasar programan web
1) dasar dasar programan web1) dasar dasar programan web
1) dasar dasar programan webImam Fathur
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman webexkun
 
Fasilitas- Fasilitas Internet
Fasilitas- Fasilitas InternetFasilitas- Fasilitas Internet
Fasilitas- Fasilitas InternetFinaKhairani2
 
Laporan praktikum modul 5
Laporan praktikum modul 5Laporan praktikum modul 5
Laporan praktikum modul 5andrisupriadiAS
 

What's hot (16)

Konsep Teknologi Web
Konsep Teknologi WebKonsep Teknologi Web
Konsep Teknologi Web
 
Mozilla Thunderbird
Mozilla ThunderbirdMozilla Thunderbird
Mozilla Thunderbird
 
Laporan praktikum modul 5 (6rankap)
Laporan praktikum modul 5 (6rankap) Laporan praktikum modul 5 (6rankap)
Laporan praktikum modul 5 (6rankap)
 
Html
HtmlHtml
Html
 
Laporan Praktikum Modul 5 (internet)
Laporan Praktikum Modul 5 (internet)Laporan Praktikum Modul 5 (internet)
Laporan Praktikum Modul 5 (internet)
 
Dasar pembuatan web (html)
Dasar pembuatan web (html)Dasar pembuatan web (html)
Dasar pembuatan web (html)
 
TUTORIAL INTERNET DAN EMAIL
TUTORIAL INTERNET DAN EMAILTUTORIAL INTERNET DAN EMAIL
TUTORIAL INTERNET DAN EMAIL
 
Materi 1 Kuliah Pemrograman Web
Materi 1 Kuliah Pemrograman Web Materi 1 Kuliah Pemrograman Web
Materi 1 Kuliah Pemrograman Web
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi web
 
1) dasar dasar programan web
1) dasar dasar programan web1) dasar dasar programan web
1) dasar dasar programan web
 
Modul pemrograman web
Modul pemrograman webModul pemrograman web
Modul pemrograman web
 
Fasilitas- Fasilitas Internet
Fasilitas- Fasilitas InternetFasilitas- Fasilitas Internet
Fasilitas- Fasilitas Internet
 
Internet World Wide Web
Internet World Wide WebInternet World Wide Web
Internet World Wide Web
 
1989249
19892491989249
1989249
 
1234 ppt
1234 ppt1234 ppt
1234 ppt
 
Laporan praktikum modul 5
Laporan praktikum modul 5Laporan praktikum modul 5
Laporan praktikum modul 5
 

Similar to Memahami Dasar-Dasar World Wide Web (WWW

Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiResa Firmansyah
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptRizkyRamdan2
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisrahmantaufik00
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepadSamsuri14
 
Dasar Dasar Tekhnis Web Design.ppt
Dasar Dasar  Tekhnis Web Design.pptDasar Dasar  Tekhnis Web Design.ppt
Dasar Dasar Tekhnis Web Design.pptfikri reza
 
Modul web programing
Modul web programingModul web programing
Modul web programingFitra Sani
 
Pemograman web
Pemograman webPemograman web
Pemograman webMrHilmy
 
Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Arifin Swift
 
storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptxFileArsip
 
Jobsheet Pemrograman
Jobsheet Pemrograman Jobsheet Pemrograman
Jobsheet Pemrograman Rika Pertiwi
 
4. PENGANTAR PEMROGRAMAN PHP.pptx
4. PENGANTAR PEMROGRAMAN PHP.pptx4. PENGANTAR PEMROGRAMAN PHP.pptx
4. PENGANTAR PEMROGRAMAN PHP.pptxNehaTulada
 
World wide web
World wide webWorld wide web
World wide webpeces123
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi webTeukuMahawira
 

Similar to Memahami Dasar-Dasar World Wide Web (WWW (20)

3947109.ppt
3947109.ppt3947109.ppt
3947109.ppt
 
Homepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasiHomepage untuk informasi dan komunikasi
Homepage untuk informasi dan komunikasi
 
fdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.pptfdokumen.com_pengantar-html-56a0e352ed109.ppt
fdokumen.com_pengantar-html-56a0e352ed109.ppt
 
P9 desain-web-statis-dinamis
P9 desain-web-statis-dinamisP9 desain-web-statis-dinamis
P9 desain-web-statis-dinamis
 
Proyek web html menggunakan notepad
Proyek web html menggunakan notepadProyek web html menggunakan notepad
Proyek web html menggunakan notepad
 
Dasar Dasar Tekhnis Web Design.ppt
Dasar Dasar  Tekhnis Web Design.pptDasar Dasar  Tekhnis Web Design.ppt
Dasar Dasar Tekhnis Web Design.ppt
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Pemograman web
Pemograman webPemograman web
Pemograman web
 
Penggunaan html
Penggunaan htmlPenggunaan html
Penggunaan html
 
Modul web programing
Modul web programingModul web programing
Modul web programing
 
Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)Pemrograman Internet - HTML (1)
Pemrograman Internet - HTML (1)
 
storyboard pemrograman web.pptx
storyboard pemrograman web.pptxstoryboard pemrograman web.pptx
storyboard pemrograman web.pptx
 
Jobsheet Pemrograman
Jobsheet Pemrograman Jobsheet Pemrograman
Jobsheet Pemrograman
 
4. PENGANTAR PEMROGRAMAN PHP.pptx
4. PENGANTAR PEMROGRAMAN PHP.pptx4. PENGANTAR PEMROGRAMAN PHP.pptx
4. PENGANTAR PEMROGRAMAN PHP.pptx
 
World wide web
World wide webWorld wide web
World wide web
 
Makalah html 5
Makalah html 5Makalah html 5
Makalah html 5
 
Modul webdesign
Modul webdesignModul webdesign
Modul webdesign
 
Laporan pratikum 1
Laporan pratikum 1Laporan pratikum 1
Laporan pratikum 1
 
Konsep teknologi web
Konsep teknologi webKonsep teknologi web
Konsep teknologi web
 
Jamal's dokumen
Jamal's dokumenJamal's dokumen
Jamal's dokumen
 

More from Dede Alamsyah

Buku Informatika SMK Kelas X | Kurikulum Merdeka
Buku Informatika SMK Kelas X | Kurikulum MerdekaBuku Informatika SMK Kelas X | Kurikulum Merdeka
Buku Informatika SMK Kelas X | Kurikulum MerdekaDede Alamsyah
 
Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)
Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)
Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)Dede Alamsyah
 
Materi Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang Efektif
Materi Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang EfektifMateri Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang Efektif
Materi Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang EfektifDede Alamsyah
 
Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...
Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...
Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...Dede Alamsyah
 
Materi Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan Data
Materi Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan DataMateri Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan Data
Materi Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan DataDede Alamsyah
 
Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...
Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...
Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...Dede Alamsyah
 
Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)
Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)
Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)Dede Alamsyah
 
Materi simkomdig ki kd 3.1-4.1 logika dan algoritma
Materi simkomdig ki kd 3.1-4.1 logika dan algoritmaMateri simkomdig ki kd 3.1-4.1 logika dan algoritma
Materi simkomdig ki kd 3.1-4.1 logika dan algoritmaDede Alamsyah
 
Panduan Penggunaan Siajar LMS
Panduan Penggunaan Siajar LMSPanduan Penggunaan Siajar LMS
Panduan Penggunaan Siajar LMSDede Alamsyah
 
Soal uas mobile learning
Soal uas mobile learningSoal uas mobile learning
Soal uas mobile learningDede Alamsyah
 
Pertemuan 3 pengantar tik (stkip)
Pertemuan 3 pengantar tik (stkip)Pertemuan 3 pengantar tik (stkip)
Pertemuan 3 pengantar tik (stkip)Dede Alamsyah
 
Pertemuan 13 pengantar tik (stkip)
Pertemuan 13 pengantar tik (stkip)Pertemuan 13 pengantar tik (stkip)
Pertemuan 13 pengantar tik (stkip)Dede Alamsyah
 
Pertemuan 12 pengantar tik (stkip)
Pertemuan 12 pengantar tik (stkip)Pertemuan 12 pengantar tik (stkip)
Pertemuan 12 pengantar tik (stkip)Dede Alamsyah
 
Pertemuan 11 pengantar tik (stkip)
Pertemuan 11 pengantar tik (stkip)Pertemuan 11 pengantar tik (stkip)
Pertemuan 11 pengantar tik (stkip)Dede Alamsyah
 
Pertemuan 5 pengantar tik (stkip)
Pertemuan 5 pengantar tik (stkip)Pertemuan 5 pengantar tik (stkip)
Pertemuan 5 pengantar tik (stkip)Dede Alamsyah
 
Pertemuan 8 pengantar tik (stkip)
Pertemuan 8 pengantar tik (stkip)Pertemuan 8 pengantar tik (stkip)
Pertemuan 8 pengantar tik (stkip)Dede Alamsyah
 
Pertemuan 7 pengantar tik (stkip)
Pertemuan 7 pengantar tik (stkip)Pertemuan 7 pengantar tik (stkip)
Pertemuan 7 pengantar tik (stkip)Dede Alamsyah
 
Pertemuan 10 pengantar tik (stkip)
Pertemuan 10 pengantar tik (stkip)Pertemuan 10 pengantar tik (stkip)
Pertemuan 10 pengantar tik (stkip)Dede Alamsyah
 

More from Dede Alamsyah (20)

Buku Informatika SMK Kelas X | Kurikulum Merdeka
Buku Informatika SMK Kelas X | Kurikulum MerdekaBuku Informatika SMK Kelas X | Kurikulum Merdeka
Buku Informatika SMK Kelas X | Kurikulum Merdeka
 
Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)
Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)
Materi Simkomdig KI-KD 3.7-4.7 Menganalisis Pembuatan Ebook (Naskah Digital)
 
Materi Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang Efektif
Materi Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang EfektifMateri Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang Efektif
Materi Simkomdig KI-KD 3.6-4.6 Menerapkan Teknik Presentasi yang Efektif
 
Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...
Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...
Materi Simkomdig KI-KD 3.5-4.5 Menganalisis Fitur yang Tepat untuk Pembuatan ...
 
Materi Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan Data
Materi Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan DataMateri Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan Data
Materi Simkomdig KI-KD 3.4-4.4 Menerapkan Logika dan Operasi Perhitungan Data
 
Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...
Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...
Materi simkomdig ki kd 3.3-4.3 mengevaluasi paragraf deskriptif, argumentatif...
 
Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)
Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)
Materi simkomdig ki-kd 3.2-4.2 peta minda (mind mapping)
 
Materi simkomdig ki kd 3.1-4.1 logika dan algoritma
Materi simkomdig ki kd 3.1-4.1 logika dan algoritmaMateri simkomdig ki kd 3.1-4.1 logika dan algoritma
Materi simkomdig ki kd 3.1-4.1 logika dan algoritma
 
BUKU SAKU RPP 2020
BUKU SAKU RPP 2020BUKU SAKU RPP 2020
BUKU SAKU RPP 2020
 
RPP TERBARU 2020
RPP TERBARU 2020RPP TERBARU 2020
RPP TERBARU 2020
 
Panduan Penggunaan Siajar LMS
Panduan Penggunaan Siajar LMSPanduan Penggunaan Siajar LMS
Panduan Penggunaan Siajar LMS
 
Soal uas mobile learning
Soal uas mobile learningSoal uas mobile learning
Soal uas mobile learning
 
Pertemuan 3 pengantar tik (stkip)
Pertemuan 3 pengantar tik (stkip)Pertemuan 3 pengantar tik (stkip)
Pertemuan 3 pengantar tik (stkip)
 
Pertemuan 13 pengantar tik (stkip)
Pertemuan 13 pengantar tik (stkip)Pertemuan 13 pengantar tik (stkip)
Pertemuan 13 pengantar tik (stkip)
 
Pertemuan 12 pengantar tik (stkip)
Pertemuan 12 pengantar tik (stkip)Pertemuan 12 pengantar tik (stkip)
Pertemuan 12 pengantar tik (stkip)
 
Pertemuan 11 pengantar tik (stkip)
Pertemuan 11 pengantar tik (stkip)Pertemuan 11 pengantar tik (stkip)
Pertemuan 11 pengantar tik (stkip)
 
Pertemuan 5 pengantar tik (stkip)
Pertemuan 5 pengantar tik (stkip)Pertemuan 5 pengantar tik (stkip)
Pertemuan 5 pengantar tik (stkip)
 
Pertemuan 8 pengantar tik (stkip)
Pertemuan 8 pengantar tik (stkip)Pertemuan 8 pengantar tik (stkip)
Pertemuan 8 pengantar tik (stkip)
 
Pertemuan 7 pengantar tik (stkip)
Pertemuan 7 pengantar tik (stkip)Pertemuan 7 pengantar tik (stkip)
Pertemuan 7 pengantar tik (stkip)
 
Pertemuan 10 pengantar tik (stkip)
Pertemuan 10 pengantar tik (stkip)Pertemuan 10 pengantar tik (stkip)
Pertemuan 10 pengantar tik (stkip)
 

Recently uploaded

Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5KIKI TRISNA MUKTI
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfirwanabidin08
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docxbkandrisaputra
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfCandraMegawati
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAAndiCoc
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfElaAditya
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxnerow98
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5ssuserd52993
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxsdn3jatiblora
 
421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptx421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptxGiftaJewela
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxmawan5982
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMmulyadia43
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxazhari524
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDmawan5982
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxIrfanAudah1
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxJamhuriIshak
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxadimulianta1
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...Kanaidi ken
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASKurniawan Dirham
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfCloverash1
 

Recently uploaded (20)

Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5Materi Strategi Perubahan dibuat oleh kelompok 5
Materi Strategi Perubahan dibuat oleh kelompok 5
 
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdfREFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
REFLEKSI MANDIRI_Prakarsa Perubahan BAGJA Modul 1.3.pdf
 
Lembar Observasi Pembelajaran di Kelas.docx
Lembar Observasi Pembelajaran di  Kelas.docxLembar Observasi Pembelajaran di  Kelas.docx
Lembar Observasi Pembelajaran di Kelas.docx
 
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdfContoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
Contoh Laporan Observasi Pembelajaran Rekan Sejawat.pdf
 
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKAMODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
MODUL AJAR MATEMATIKA KELAS 6 KURIKULUM MERDEKA
 
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdfTUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
TUGAS GURU PENGGERAK Aksi Nyata Modul 1.1.pdf
 
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptxPPT Integrasi Islam & Ilmu Pengetahuan.pptx
PPT Integrasi Islam & Ilmu Pengetahuan.pptx
 
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
JAWAPAN BAB 1 DAN BAB 2 SAINS TINGKATAN 5
 
Aksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptxAksi nyata Malaikat Kebaikan [Guru].pptx
Aksi nyata Malaikat Kebaikan [Guru].pptx
 
421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptx421783639-ppt-overdosis-dan-keracunan-pptx.pptx
421783639-ppt-overdosis-dan-keracunan-pptx.pptx
 
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docxtugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
tugas 1 anak berkebutihan khusus pelajaran semester 6 jawaban tuton 1.docx
 
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMMLaporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
Laporan Guru Piket untuk Pengisian RHK Guru Pengelolaan KInerja Guru di PMM
 
soal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptxsoal AKM Mata Pelajaran PPKN kelas .pptx
soal AKM Mata Pelajaran PPKN kelas .pptx
 
tugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SDtugas 1 tutorial online anak berkebutuhan khusus di SD
tugas 1 tutorial online anak berkebutuhan khusus di SD
 
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptxRefleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
Refleksi Mandiri Modul 1.3 - KANVAS BAGJA.pptx.pptx
 
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptxBAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
BAHAN SOSIALISASI PPDB SMA-SMK NEGERI DISDIKSU TP. 2024-2025 REVISI.pptx
 
Perumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptxPerumusan Visi dan Prakarsa Perubahan.pptx
Perumusan Visi dan Prakarsa Perubahan.pptx
 
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...PELAKSANAAN  + Link2 Materi TRAINING "Effective  SUPERVISORY &  LEADERSHIP Sk...
PELAKSANAAN + Link2 Materi TRAINING "Effective SUPERVISORY & LEADERSHIP Sk...
 
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATASMATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
MATERI EKOSISTEM UNTUK SEKOLAH MENENGAH ATAS
 
Kelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdfKelompok 1_Karakteristik negara jepang.pdf
Kelompok 1_Karakteristik negara jepang.pdf
 

Memahami Dasar-Dasar World Wide Web (WWW

  • 1. Oleh: Siti Husnul Bariah, Skom., M.Pd Pend. Teknologi Informasi dan Komunikasi- STKIP
  • 2.   World Wide Web (WWW), lebih dikenal dengan web, merupakan salah satu layanan yang didapat oleh pemakai komputer yang terhubung ke internet.  Web pada awalnya adalah ruang informasi dalam internet, dengan menggunakan teknologi hyperteks, pemakai dituntun untuk menemukan informasi. Pendahuluan
  • 3.   Web telah diadopsi oleh perusahaan sebagai sebagian dari strategi teknologi informasinya, karena beberapa alasan: 1. Akses informasi mudah 2. Setup server lebih mudah 3. Informasi mudah di distribusikan, dan 4. Bebas platform. Lanjutan...
  • 4.   Tahun 1993, Tim Berners-Lee dan peneliti lain di European Particle Physics Lab (Consei Europeen pour la Recherche Nucleaire, atau CERN) di Geneva, Swis mengembangkan suatu cara untuk men-share data antar koleganya menggunakan sesuatu yang disebut dengan hypertext. Sekilah Lahirnya Web
  • 5.   Kode-kode khusus disisipkan ke dalam dokumen elektronik ini.  Memungkinkan pemakai untuk meloncat dari satu dokumen ke dokumen lainnya pada layar dengan hanya memilih sebuah hyperlink. Lanjutan...
  • 6.   Informasi web disimpan dalam dokumen yang disebut dengan halaman-halaman web (web pages).  Web page adalah file-file yang disimpan dalam komputer yang disebut dengan server-server web (web servers).  Komputer-komputer membaca web page disebut web client.  Web client menampilkan page dengan menggunakan program yang disebut dengan browser web (web browser).  Browser web yang populer adalah mozilla firefox dan google crome. Bagaimana WWW Bekerja?
  • 8.   Browser web adalah software yang digunakan untuk menampilkan informasi dari server web.  Cara kerja browser: • Browser mengambil sebuah web page dari server dengan sebuah request. • Sebuah request adalah HTTTP standar yang berisi sebuah page address. • Sebuah page address terlihat seperti ebrikut: http://www.ptisthusnulbariah.blogspot.com Browser Web
  • 9.   Browser menampilkan page dengan membaca intruksi-intruksi.  Instruksi yang paling umum untuk menampilkan disebut tag HTML.  Tag HTML contohnya seperti berikut: <p>ini adalah paragraf</p>. Bagaimana Browser Menampilkan Page?
  • 10.  Skema Dasar HTML <HTML> <HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML>  HTML: menandai awal dan akhir dokumen HTML  HEAD: menandai bagian header dokumen HTML  TITLE: memberi judul pada dokumen HTML  BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)
  • 11.   Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web, komputer ini akan melayani permintaan dokumen web dari kliennya.  Browser akan mengirimkan request kepada server untuk meminta dokumen tertentu atau layanan lain yang disediakanoleh server.  Server memberikan dokumen atau layanannya jika tersedia juga dengan menggunakan protokol HTTP. Server Web
  • 12.   HTML (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. Konsep HTML
  • 13.   Ada dua cara untuk membuat sebuah web page: 1. HTML editor 2. Editor teks biasa (notepad)  Penamaan dokumen (pilih suatu nama, sembarang nama, kemudian tambahkan sebuah ekstensi “.htm” atau “.html”  Dokumen HTML disusun oleh elemen-elemen.  Elemen merupakan istilah bagi komponen-komponen dasar pembentuk dokumen HTML. Contoh (head, body, paragraf, dll) Lanjutan...
  • 14.   Untuk menandai berbagai elemen dalam suatu dokumen HTML, kita menggunakan tag.  Tag HTML terdiri dari kurung sudut kiri (<), sebuah nama tag, dan sebuah kurung sudut kanan (>).  Tag umumnya berpasangan (misalnya <h1> dengan </h1>.  Ada beberapa elemen yang tidak mengharuskan tagnya ditulis secara berpasangan: o Paragraf dengan tag <p> o Ganti baris <br> o Garis datar <hr> Definisi Tag
  • 15.  Contoh <html> <head> <title>contoh halaman web saya</title> </head> <body> <h1>selamat datang</h1> <h2>di Halaman pertama web saya</h2> <p>Perkenalkan, nama saya ..... Ini adalah <i>halaman web</i> <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b><i>halaman web</i></b>. </p> </body> </html> <!-- akhir dokumen HTML -->
  • 17.  TAG HTML (Lanjut....)  <html> Dokumen  <head> Header  <title> Judul dokumen  <body> Isi dokumen  <h1>…<h6> Judul paragraf  <p> Paragraf  <b>,<i>,<u>,<sup>,<sub> Atribut  <br> Ganti baris  <font> Font  <li>,<ol>,<ul> Enumerasi  <hr> Garis mendatar  <img> Gambar  <a> Link (kaitan/rujukan)  <table> Tabel  <!-- --> Komentar  <frame>,<frameset>,<iframe> Frame (bingkai)  <form> Formulir isian  <input>,<textarea>,<select> Komponen isian pada formulir  <map> Link berdasar area pada gambar  <span>,<div> Pengelompokan elemen dokumen