Web programming

Day 1
</> ptcindonesia;
Review Materi
agar tidaklupa
 Outline
apa saja yang akan kita pelajari hariini?
Day 1
1. Pendahuluan
3. Elemen-elemen HTML
a. Web Browser
a. Heading dan Paragraph
b. Client-side vs Server-side language
b. Anchor / Link
c. HTML - CSS – Javascript
c. Images
d. Memilih Aplikasi Editor HTML
d. Text Formatting
e. Ekstensi VSCode
e. List
2. Pengenalan HTML f. Table
a. HTML
b. Struktur HTML
c. Elemen HTML
d. Atribut HTML
Day 1
PengenalanHTML
Pendahuluan
Web Browser
Web browser merupakan aplikasi yang bisa menjelajahi,
menyajikan, maupun mengambil konten yang ada di
berbagai sumber informasi pada jaringan internet atau
WWW.

Melihat fungsi peramban web yang begitu banyak,

maka peramban web memiliki manfaat sebagai berikut :

• Memberikan kemudahan untuk pengguna ketika

mengakses berbagai informasi yang ada di internet.
• Membantu pengguna dalam menyimpan berbagai
konten di internet menuju dokumen di computer.
• Bisa digunakan membuka berbagai macam situs yang
bermanfaat untuk kegiatan manusia.
Client-side vs Server-side language
Client side scripting merupakan salah satu jenis Server side scripting merupakan bahasa
bahasa pemrograman web yang proses pengolahannya pemrograman web yang pengolahannya dilakukan dalam
dilakukan di sisi client. server, maksudnya ialah web server yang sudah telah
terintegrasi oleh web engine.
Proses penerjemahan atau pengolahannya dilakukan
oleh web browser sebagai client-nya, didalam web Disini peran web engine ialah memproses semua script
browser sudah terdapat library yang mampu yang ada termasuk kategori client side scripting. Web
menerjemahkan semua perintah dihalaman web yang engine biasanya harus diinstal dalam komputer terlebih
menggunakan client side scripting. dahulu dari bagian terpisah web server.
Contoh dari client side scripting ini antara lain Contoh dari server side scripting ialah

• HTML, • Active server pages (ASP),

• XHTML, • PHP : Hypertext preprocessor (PHP),
• CSS, • Java sever pages (JSP).
• JavaScript, • ColdFusion
• XML. • ASP (Active Server Page)
• JQUERY
HTML - CSS - Javascript

HTML (Hyper Text Markup Language) adalah bahasa markup CSS (Cascading Style Sheets) adalah bahasa
yang digunakan untuk membuat Halaman web. HTML adalah yang digunakan untuk mengatur tampilan (gaya)
markup yang digunakan untuk mendefinisikan struktur halaman elemen-elemen HTML. Dengan CSS, kita dapat
web. Hal ini seperti misalnya membuat elemen paragraf, gambar, memberikan warna background, border,
link dan lain sebagainya. HTML tersusun atas elemen-elemen mengatur posisi elemen, ukuran font dan lain
HTML. Elemen html didefinisikan dengan tag-tag HTML. sebagainya.

Javascript adalah bahasa pemrograman (berjalan pada web browser) yang digunakan untuk membuat halaman web
yang lebih interaktif. Beberapa fungsi yang bisa anda tambahkan menggunakan Javascript seperti misalnya
menampilkan elemen tertentu hanya pada browser tertentu saja, membuat fitur yang memungkinkan pengguna untuk
dapat menyesuaikan ukuran font pada blog, dan lain sebagainya.
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.

Aplikasi Visual Studio Code bisa di download secara gratis di

https://code.visualstudio.com/. aplikasi editor text lumayan ringan
namun memiliki banyak fitur. Salah satunya adalah fitur pewarnaan
code (syntax highlighting). Fitur ini akan memudahkan penulisan
HTML.
Ekstensi VSCode
Auto Rename Tag untuk memudahkan kalian
melakukan rename tag secara otomatis.

Beautify . Untuk merapikan susunan kode

JavaScript, HTML, CSS, dan JSON yang sesuai
standar.

Indent Rainbow . Ekstensi untuk menambahkan

warna pada jarak tab dan spasi (indent) . Cukup
membantu untuk menampilkan indent pembuka dan
indent penutup. Terutama pada file HTML, JS, CSS,
pada file Python, dst.

One Dark Pro. Ini bukan tools untuk development,

tapi One Dark Pro adalah tema pada VSCode.
Pengenalan HTML
ApaituHTML
 Contoh sebuah halaman HTML sederhana:

HTML
HTML merupakan singkatan dari Hyper
Text Markup Language. HTML adalah
sebuah bahasa standar untuk pembuatan
halaman web. Dengan adanya HTML, kita
dapat membedakan struktur yang tersusun
dari sebuah halaman melalui tag atau
elemen-elemen penyusunnya.

Elemen atau tag pada HTML dikenali oleh Dari contoh di atas kita dapat mengidentifikasi elemen-elemen nya
browser seperti google chrome, firefox atau seperti berikut
Ms Edge, dll. Browser tersebut
mengidentifikasi setiap elemen penyusun • element <!DOCTYPE html> mengartikan bahwa dokumen ditulis
HTML dan ditampilkan sesuai karakteristik dengan versi HTML5
elemen tersebut. Contohnya sebuah • elemen <html> adalah elemen induk atau elemen utama yang
elemen paragraph akan ditampilkan sering disebut juga root element dari sebuah halaman HTML.
sebagai tulisan panjang, atau sebuah • elemen <head> berisi informasi tentang halaman HTML yang
elemen pranala/link akan dicetak dengan sedang dibuat
warna biru dan ketika mouse mendekat • elemen <title> adalah judul dari halaman HTML yang akan tampil
kursornya berubah menjadi telunjuk, dsb. di tab browser.
Elemen pada HTML
Elemen atau sering disebut dengan tag
pada HTML adalah penyusun dari sebuah pada ilustrasi di atas merupakan sebuah elemen paragraph dibuka dengan
halaman web yang dapat dikenali oleh tag pembuka <p> . Di dalam tag pembuka tersebut terdapat atribut class
browser dan ditampilkan oleh browser yang disematkan ke dalam tag. Isi atau content dari sebuah tag paragraph
sesuai karakteristik masing-masing. <p> akan ditampilkan sebagai paragraf. lalu terakhir sebuah tag ditutup
dengan sebuah tag penutup.
Sebuah elemen HTML terdiri dari tag
pembuka(start/open tag), atribut (attribute), catatan
isi (content), dan tag penutup(close tag). Tidak semua elemen HTML memiliki tag penutup seperti <input> <img> <meta> .

Elemen di dalam elemen (nested element)

Pada contoh di samping elemen <html> adalah root
sebuah elemen HTML dapat
element dan merupakan elemen utama di dokument
terisi dengan elemen-
HTML. elemen tersebut dibuka dengan tag pembuka
elemen lain di dalamnya.
<html> dan ditutup dengan </html>. Lalu di dalam
Semua dokumen HTML
elemen <html> terdapat elemen <body> . elemen
yang kita lihat di halaman
<body> merupakan elemen yang akan ditampilkan ke
web terdiri dari kumpulan
halaman web yang diawali dengan tag pembuka
elemen bersarang atau
<body> dan ditutup dengan sebuah tag penutup
elemen yang mengandung
</body> , dan seterusnya sehingga terciptalah sebuah
elemen lain di dalamnya.
halaman web yang utuh.
Atribut pada HTML
Atribut adalah informasi tambahan yang diberikan Tidak semua tag membutuhkan atribut, tapi anda akan sering
kepada tag. Informasi ini bisa berupa instruksi untuk melihat sebuah tag dengan atribut, terutama
warna dari text, besar huruf dari text, dll. Setiap atribut atribut id dan class yang sering digunakan untuk manipulasi
memiliki pasangan nama dan nilai (value) yang ditulis halaman web menggunakan CSS maupun JavaScript.
dengan name=”value”. Value diapit tanda kutip, boleh
menggunakan tanda kutip satu (‘) atau dua (“).

Contoh Kode HTML :

Pada kode HTML diatas, href=”https://www.ptcindonesia.com” adalah atribut.

href merupakan nama dari atribut, dan https://www.ptcindonesia.com adalah value atau
nilai dari atribut tersebut.

HTML memiliki banyak atribut yang beberapa diantaranya hanya cocok untuk tag
tertentu saja. Sebagai contoh, atribut “href” diatas hanya digunakan untuk tag <a>
saja (dan beberapa tag lain).
Elemen HTML
Heading dan Paragraph
Heading element digunakan untuk membuat judul Tag paragraph digunakan untuk membuat
(heading) di dalam halaman HTML. teks biasa, bisa berupa kalimat yang
Heading element terdiri dari 6 level atau 6 tingkatan, berparagrap
yakni dari <h1> sampai dengan <h6>.
Berikut contoh tampilan tag <h1> sampai
dengan tag <h6> di dalam web browser:

Selain tag p, dalam penulisan HTML ada beberapa tag lain

seperti tag break <br>, tak untuk penekanan em dan strong
Cara Membuat link di HTML
Tujuan kata Hypertext dari HTML adalah membuat
sebuah text yang ketika di-klik akan pindah ke halaman
lainnya. HTML menggunakan tag <a>untuk keperluan
ini.

Link ditulis dengan <a> yang merupakan singkatan cari

anchor (jangkar). Setiap tag <a> setidaknya memiliki
sebuah atribut href. Dimana href berisi alamat yang
dituju (href adalah singkatan dari hypertext reference).

Atribut penting lainnya dari tag <a> adalah

target. Atribut ini digunakan untuk
menentukan apakah link yang dituju terbuka
di jendela browser saat ini, atau terbuka di
jendela baru.

Secara default, setiap link yang kita tulis

akan terbuka pada jendela yang sama
(menimpa halaman web saat ini). Tetapi
apabila kita ingin halaman tersebut terbuka
pada tab baru, gunakan atribut
target=”_blank”.
Images
Atribut src adalah singkatan dari source, merupakan
atribut yang berisi alamat dari gambar yang akan
ditampilkan.

Atribut alt adalah singkatan dari alternative

description, dimana alt digunakan untuk keterangan
dari gambar jika gambar tersebut gagal ditampilkan
oleh browser. Atau jika web broser telah disetting untuk
tidak menampilkan gambar.

Atribut lainnya membolehkan kita untuk menentukan

besar dari gambar yang ditampilkan, yaitu width dan
height.
Text Formating
Tag yang digunakan untuk mengubah format text pada
html. Untuk melihat list format text di html. Buka link
berikut:
https://www.w3schools.com/html/html_formatting.
asp
List
Dalam HTML, tag list terdiri dari 2 jenis, ordered list
(berurutan) dan unordered list (tidak berurutan). Ordered
list akan ditampilkan dengan angka atau huruf,
sedangkan unordered list dengan bulatan atau kotak.
Ordered list menggunakan tag <ol>, dan unordered list
menggunakan tag <ul>, sedangkan untuk list sendiri
menggunakan tag <li>. Penjelasan ini akan lebih mudah
jika menggunakan contoh.

Berikut adalah contoh kode HTML untuk

membuat ordered list menggunakan tag<ol>:

Cara Membuat Description List dalam HTML

Untuk membuat Description List, seluruh list harus berada di
dalam pasangan tag <dl> dan </dl>. Untuk setiap deskripsi atau
judul istilah, kita menggunakan tag <dt>. Sedangkan untuk
penjelasan istilah tersebut, kita menggunakan tag <dd>.
Table
Untuk membuat tabel di HTML, kita membutuhkan setidaknya 3
tag, yaitu tag <table>, tag <tr>, dan tag <td>:

• Tag <table> digunakan untuk memulai tabel

• Tag <tr> adalah singkatan dari table row, digunakan untuk
membuat baris dari tabel.
• Tag <td> adalah singkatan dari table data, digunakan untuk
menginput data ke tabel.
Challenge
Table
Buatlah 2 halaman html, terdiri dari index.html dan daftarpeserta.html yang dimana dihalaman index.html terdapat
link untuk menuju ke halaman daftarpeserta.html
Thankyou