storyboard pemrograman web.pptx

Menu Utama
PEMROGRAMAN WEB DAN
PERANGKAT BERGERAK
Materi
Praktikum
Evaluasi
X

PEMROGRAMAN WEB DAN
PERANGKAT BERGERAK
Materi
Praktikum
Evaluasi
X

Materi
Sejarah dan
Perkembangan
World Wide Web
(www)
Penginstalan
editor text
notepad++
Struktur dasar
pemrograman
web dengan
HTML
Tag-tag yang ada
didalam HTML
Format teks
dalam script html

Internet adalah suatu teknologi yang saat ini bukan menjadi barang langka untuk dikonsumsi. Internet dapat
diakses oleh semua orang di dunia untuk mencari berbagai informasi yang ingin diketahui. Namun tahukah kamu?
Jika pada tahun 1989 internet hanya dapat digunakan oleh sebagian orang dari kalangan tertentu saja. Internet
pada masa itu juga hanya terbatas untuk mengirim e-mail.
Sering kita jumpai World Wide Web (WWW) saat berselancar di internet. WWW terdiri dari milyaran situs web di
seluruh dunia, yang tersebar dengan menggunakan komputer server yang juga serta terhubung dengan internet.
Fungsi dari WWW adalah sebagai penyedia data dan informasi yang diperlukan oleh pengguna internet. WWW
dapat secara langsung menghubungkan pengguna internet ke berbagai macam web server, sehingga pengguna
internet tersebut bisa mengakses data, dokumen dan berbagai macam informasi yang terdapat di dalam sebuat
situs.

Secara umum pengertian WWW adalah kumpulan sumber daya internet (seperti FTP, telnet, Usenet), teks
hyperlink, file audio, dan video, dan situs jarak jauh yang dapat diakses dan dicari oleh browser berdasarkan
standar seperti HTTP dan TCP / IP.
Berners-Lee sendiri pertama kali memberanikan diri untuk mengembangkan web, karena kebutuhannya untuk
menyimpan berkas-berkas pribadinya. Dia membuat sistem bernama ENQUIRE yang merupakan database
pengguna personal dan model software. Tetapi saat awal kehadirannya, Lee merasa ada yang tidak optimal dengan
penggunaan internet yang menurutnya sangat memiliki potensi besar sebagai media berbagi informasi secara
masif. Sebagai peneliti, konsep internet yang sangat terbatas saat itu dirasa sama sekali tidak dapat membantunya
dalam meraih informasi yang dibutuhkan.

Lee menyadari adanya potensi besar yang dimiliki oleh internet, Tim Benners-Lee bersama dua orang temannya
Vannevar Bush dan Douglas Engelbart akhirnya mulai merintis konsep World Wide Web. Hal pertama yang
dilakukan oleh mereka adalah merancang HyperText Transfer Protocol (HTTP). Bahasa program tersebut mengatur
bagaimana sebuah data didistribusikan ke banyak komputer. Setelah itu Lee pun menciptakan Hyper Text Markup
Languange (HTML) sebagai pondasi sebuah laman website.
Hingga 1990, Berners-Lee membangun semua alat yang diperlukan agar web bekerja, seperti HyperText Transfer
Protocol (HTTP) 0,9, HyperText Markup Language (HTML), web browser pertama (bernama World Wide Web yang
juga web editor), perangkat lunak server yang pertama HTTP (kemudian dikenal sebagai CERN httpd), serta web
server pertama.
X

Materi
Sejarah dan
Perkembangan
World Wide Web
(www)
Penginstalan
editor text
Struktur dasar
pemrograman
web dengan
HTML
Tag-tag yang ada
didalam HTML
Format teks
dalam script html

EDITOR TEXT
Editor text adalah sebuah aplikasi yang biasa dipakai programmer untuk menyusun kode program sehingga
menjadi aplikasi baru.
Berikut ini langkah-langkah penginstalan editor text menggunakan notepad++ :
 Tahap pertama, kita perlu medownloadnya langsung di situs https://notepad-plus-plus.org.
 Selanjutnya, klik versi paling terbaru dari notepad++ yang dirilis selanjutnya akan diarahkan kehalaman
tombol download. Untuk mengunduhnya kalian perlu sesuaikan berdasarkan versi windows yang kalian
gunakan apakah 32 bit atau 64 bit. Klik link Installer untuk mengunduh file installer notepad++nya.
Apabila error atau muncul pesan “Request time out” dicoba kembali dengan cara refresh halaman browser
atau cara optionalnya kalian bisa download menggunakan file installer yang sudah di comprase ke dalam
bentuk zip package.

 Setelah kalian berhasil Mengunduh file installer notepad++ nya selanjutnya buka file tersebut untuk memulai
instalasi. Pilih bahasa yang akan digunakan saat instalasi, Pilih saja bahasa inggris lalu tekan Ok.
 Tahap selanjutnya, masuk ke setup awal penginstalan notepad++ v7.8.1
 Masuk pada halaman lisensi. Langsung saja klik tombol I Agree

 Pada tahap selanjutnya untuk pemilihan lokasi direktori yang akan diinstal. Seacara default destination folder
yang dipilih berada pada C:Program FilesNotepad++. Klik Next untuk melanjutkan. Setelah mengklik tombol
Next, selanjutnya akan masuk pada pemilihan komponen yang akan diinstall. Secara default sistem sudah
mencentang komponen yang perlu diinstal,namun jika kalian menghendaki beberapa komponen yang tidak
perlu diinstall bisa unchecklist pada list komponennya.
 Setelah pemilihan komponen, selanjutnya centang create Shortcut on Desktop.
 Terakhir Klik Finish untuk menyelesaikan instalasi.
X

• HTML adalah singkatan dari Hypertext Markup Language. HTML sendiri memungkinkan seorang pengguna
untuk membuat dan menyusun teks pada bagian paragraf, heading, link atau tautan, dan blockquote untuk
halaman web dan aplikasi.
• Dokumen HTML adalah file yang diakhiri dengan .html. Dokumen HTML ini bisa dilihat dengan mengunakan
web browser apa pun seperti Google Chrome, Safari, Mozila Firefox, atau lainnya. Browser tersebut membaca
file HTML dan menjalankan kontennya sehingga pengguna internet bisa melihat dan membacanya.

Kelebihan:
• Bahasa yang digunakan secara luas dan memiliki banyak sumber serta komunitas yang besar.
• Dijalankan secara alami di setiap web browser.
• Memiliki learning curve yang mudah.
• Open-source dan sepenuhnya gratis.
• Bahasa markup yang rapi dan konsisten.
• Standard web yang resmi di-maintain oleh World Wide Web Consortium (W3C).
• Mudah diintegrasikan dengan bahasa backend, seperti PHP dan Node.js.

Kekurangan:
• Paling sering digunakan untuk halaman web statis. Untuk fitur dinamis, Anda bisa menggunakan JavaScript atau
PHP.
• HTML tidak memungkinkan user untuk menjalankan logic. Alhasil, semua halaman web harus dibuat terpisah
meskipun menggunakan elemen yang sama, seperti header dan footer.
• Fitur-fitur baru tidak bisa digunakan secara cepat di sebagian browser.
• Terkadang perilaku browser susah untuk diprediksi (misalnya, browser lama tidak selalu bisa render tag yang
lebih baru).

Document HTML bisa di bagi mejadi tiga bagian utama: html, head, dan body.
<html>
<head>
<TITLE>Judul dokumen</TITLE>
</head>
<body>
bagian isi
</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)
X

DAFTAR TAG
• <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

DAFTAR TAG
• <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

TAG JUDUL (HEADING)
• Tag judul adalah tag yang menuliskan sebuah judul pada suatu paragraf. Tag judul ini diawali dengan <hn> dan
diakhiri dengan </hn>. Huruf n ini merupakan tingkatan judul.
• Contohnya : Hasilnya :
Judul Tingkat 1
Judul Tingkat 2
Judul Tingkat 3
Judul Tingkat 4
Judul Tingkat 5
Judul Tingkat 6

TAG PARAGRAF (PARAGRAPH)
• Tag paragraf adalah sebuah tag yang membentuk suatu paragraf. Jika kita menuliskan sebuah kalimat dengan
mengklik enter pada keyboard maka tulisan tersebut tetap menjadi paragraf dan tidak akan berpengaruh pada
kalimat baris berikutnya. Tag paragraf ini diawali dengan <p> dan diakhiri dengan </p>.
X

TAG BOLD, ITALIC, UNDERLINE
• Tag Bold adalah sebuah tag yang menandai kalimat dicetak tebal. Tag paragraf ini diawali dengan <b> dan
diakhiri dengan </b>. Tag Italic adalah sebuah tag yang menandai kalimat dicetak miring. Tag Italic ini diawali
dengan <i> dan diakhiri dengan </i>. Tag Underline adalah sebuah tag yang menandai kalimat dicetak garis
bawah. Tag Underline ini diawali dengan <u> dan diakhiri dengan </u>.

TAG GANTI BARIS (BREAK LINE)
• Tag ganti baris adalah sebuah tag untuk memindah baris baru ke bawah. Tag ganti baris ini diawali dengan <br>
dan diakhiri dengan </br>.

TAG FONT COLOR
• Tag font color adalah sebuah tag untuk membuat baris baru. Tag font color diawali dengan <font color=“#kode
warnanya”>kalimat. Dan diakhiri dengan </font>. Jika kalian tidak menghafal kode warna bisa diganti dengan
tulisan, misalnya <font color=“#FF0000”>uyeah</font> diganti menjadi <font color=“red”>uyeah</font>.

TAG FONT FACE
• Tag font face adalah sebuah tag untuk menentukan jenis tulisan. Tag font face ini diawali dengan <font
face=“nama font”> kalimat dan diakhiri dengan </font>

TAG FONT SIZE
• Tag font size adalah sebuah tag untuk menentukan ukuran huruf. Tag font size ini diawali dengan <font
size="n">kalimat dan diakhiri dengan </font>.

TAG ENUMERASI
• Tag enumerasi adalah sebuah tag yang ditandai dengan daftar enumerasi. Tag enumerasi ini dibagi menjadi 2,
yaitu simbol bullets dan penomoran (numbering). Simbol bullets ini diawali dengan tag <li> dan diakhiri dengan
</li>, sedangkan penomoran (numbering) diapit dengan tag <ol> </ol>.

TAG GARIS MENDATAR (HORIZONTAL)
• Tag garis mendatar adalah sebuah tag yang dibentuk sebagai pemisah. Tag garis mendatar ini diawali dengan tag
<hr> dan diakhiri dengan </hr>.
X

Praktikum
Buatlah tampilan biodata kalian pada halaman web!
Cek output

Lanjutannya
Cek output
Nama :
NIM :
TTL :
Agama :
Hobi :
•Hobi 1
•Hobi 2
•Hobi 3

PEMROGRAMAN WEB DAN
PERANGKAT BERGERAK
Materi
Praktikum
Evaluasi
X
Di klik

Profile
X
Profile
Adhityas Nugraheni Basqoro
A710160102
Foto

Kompetensi Dasar
X
Kompetensi Dasar
KD 3.1 Memahami konsep teknologi aplikasi web
KD 3.2 Menerapkan format teks pada halaman web
a. Sejarah dan Perkembangan World Wide Web
(www)
b. Menginstalasi aplikasi editor text dan
menjalankan aplikasi web dengan browser
a. Struktur dasar pemrograman web dengan HTML
b. Tag-tag yang ada didalam HTML
c. Format teks dalam script html

1. Internet mulai digunakan pada tahun …
A. 1988
B. 1989
C. 1990
D. 1991
2. Pada saat itu, internet hanya digunakan untuk …
A. Mengirim email
B. Mencari hiburan
C. Bermain games
D. Mencari informasi
3. Singkatan dari WWW adalah …
A. Web world wide
B. World web wide
C. Wide world web
D. World wide web
4. Penemu World Wide Web adalah …
A. Benners-Lee
B. Bill Gates
C. Karl Max
D. Linus tordavos
5. Kepanjangan dari HTML adalah …
A. Hyper Markup Language
B. Hyper Team Markup Language
C. Hypertext Markup Language
D. Hypertext Team Markup Language
6. Fungsi perintah <br/> adalah ..
A. Memindah baris baru ke kanan
B. Memindah baris baru ke atas
C. Memindah baris baru ke kiri
D. Memindah baris baru ke bawah

7. Perintah untuk menuliskan judul pada website adalah …
a. <hn> </hn>
b. <html> </html>
c. <hr> </hr>
d. <head> </head>
8. sebuah aplikasi yang biasa dipakai programmer untuk menyusun
kode program sehingga menjadi aplikasi baru disebut dengan …
A. Sublime Text
B. Editor Text
C. Komodo Edit
D. Visual Studio
9. Fungsi perintah <font face=“nama font”>kalimat</font> adalah …
A. Membuat paragraf
B. Mengganti warna tulisan
C. Mengganti baris baru
D. Mengganti jenis tulisan
10. Perintah untuk mengganti warna tulisan pada website adalah …
A. <font face=“nama font”>kalimat</font>
B. <font color=“#FF0000”>kalimat</font>
C. <font size="n">kalimat</font>.
D. <br> </br>

storyboard pemrograman web.pptx

Recommended

Recommended

More Related Content

Similar to storyboard pemrograman web.pptx

Similar to storyboard pemrograman web.pptx (20)

Recently uploaded

Recently uploaded (12)

storyboard pemrograman web.pptx