View
44
Download
4
Category
Preview:
DESCRIPTION
Dasar HTML
Citation preview
Pemrograman Web
Siti Ulfatur Rohmah | http://siti8842.blogspot.com/
1
MATERI I
DASAR PEMROGRAMAN WEB
Apa sih itu pemrograman web???? Tahukah kalian ketika browsing di internet ternyata didalamnya
terdapat program program coding yang rumit. Yuks kit belajar bareng bagaimana cara membuat
pemrograman di web.
A. PENGERTIAN WEB SERVER DAN WEB BROWSER
Web Server merupakan penyedia informasi dan memproses perintah dari client. Server juga
mengirimkan perintah ke client bagaimana cara menampilkan informasi dlm bentuk HTML
(Hypertext Markup Laguage)
Web Browser merupakan software yang dirancang untuk mengambil informasi dari suatu server
komputer ke jaringan internet.
Contoh web browser:
1. Internet Exprorer dari Microsoft
2. OPERA dari Opera Software ASA
3. Nescape Navigator dari Nescape Communication.
B. WEBSITE
Website adalah alamat URL (Uniform Resource Locator) yang berfungsi sebagai tempat
penyimpanan data dan informasi dengan topik tertentu. Website terdiri dari :
a. Webpage adalah halaman khusus dari web tertentu yang tersimpan dalam bentuk file
b. Homepage adalah halaman pertama dari suatu website yang biasanya digunakan untuk
memberikan informasi isi website dan siapa pemiliknya.
Kategori website :
1. Website statis adalah web yang berisi informasi yang sifatnya tetap.
2. Web dinamis dan interaktif adalah web yang menampilkan informasi secara dinamis dan
up to date serta dapat melakukan interaksi dengan user.
C. PEMROGRAMAN WEB
Pemrograman Web
Siti Ulfatur Rohmah | http://siti8842.blogspot.com/
2
Teknologi pemrograman web dibagi menjadi yaitu :
1. Client side progaming yaitu teknik pemrograman web dimana perintah program dijalankan
di web browser sehingga ketika client meminta dokumen yang mengandung script, maka
scrip tersebut akan didownload dari servernya kemudian akan dieksekusi pd web broser
yang bersangkutan. Contoh : Javascript, Vbscript, dan HTML.
2. Server side programming yaitu perintah perintah program (script) dieksekusi dahulu di web
server kemudian hasilnya dikirim ke browser dalam bentuk HTML biasa. Contoh : PHP, JSP
dan ASP
D. BELAJAR HTML
HTML (Hypertext Markup Language) merupakan suatu format yang digunakan dalam
pembuatan dokumen dan aplikasi yang berjalan di halaman web, disebut markup language karena
menggunakan tanda tanda tertentu yang disebut tag untuk mengatur bagaimana dokumen
ditampilkan dalam web browser.
Beberapa aplikasi dalam pembuatan halaman web yaitu :
1. Macromedia Dreamwever
2. Netscape Composer
3. Microsoft Fontpage
4. Sublime
E. STRUKTUR HTML
Elemen HTML ditandai dengan tag berpasangan berupa simbol . Penulisan HTML bersifat
tidak case sensitive, script html dapat ditulis dalam teks editor notepat kemudian disimpan
dalam ekstensi htm atau html.
Contoh struktur dasar html
Pemrograman Web
Pemrograman Web
Siti Ulfatur Rohmah | http://siti8842.blogspot.com/
3
Semoga bermanfaat ya. Yuks belajar dulu
Lalu simpanlah dengan format ekstensi .html contoh : belajar.html
BAGIAN HEAD
Bagian head tidak harus ada pada sebuah dokumen HTML, tetapi pemakaian
head yang benar akan meningkatkan kegunaan suatu dokumen HTML. Bagian ini
menyimpan informasi yang berguna mengenai dokumen. Isi bagian head tidak
ditampilkan ketika dokumen HTML diakses melalui browser, kecuali bagian title
yang merupakan judul dokumen. Elemen- elemen yang terdapat pada bagian head
antara lain:
a. Tag
Tag ini digunakan untuk memberi judul dokumen. Judul dokumen
sebaiknya tidak terlalu panjang, tetapi mampu mencerminkan isi dari dokumen.
judul dokumen
b. Tag
Tag ini berfungsi untuk menentukan basis URL sebuah dokumen. Basis URL ini
berguna bila dalam dokumen tersebut terdapat link-link yang bersifat relatif,
agar link tersebut tetap bekerja meskipun dokumen dipindahkan ke direktori
lain atu ke komputer lain. Elemen mempunyai sebuah atribut, yaitu href
yang menunjukkan sebuah alamat URL.
c. Tag
Tag ini berfungsi untuk menunjukkan relasi antar dokumen HTML. Penggunaanya
d. Tag
Tag ini sangat berguna untuk memberikan deskripsi mengenai suatu dokumen
HTML, seperti refresh, description, author (pengarang), keyword (kata kunci),
dan lain-lain. Properti description dan keyword merupakan properti yang
penting dan dijadikan referensi bagi kebanyakan program search engine yang ada
di internet untuk menemukan suatu situs.
Pemrograman Web
Siti Ulfatur Rohmah | http://siti8842.blogspot.com/
4
BAGIAN BODY
Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen
. Sebagai contoh adalah pengaturan warna latar belakang halaman,
warna teks, warna link, dan lain-lain.
Atribut elemen body
background = lokasi dan nama file latar belakang image dokumen
bgcolor = warna latar belakang dokumen, default putih
text = warna teks dokumen, default hitam
link = warna link dokumen, default biru
vlink = warna visited link dokumen, default ungu
alink = warna active link dokumen, default merah
bgproperties = [fixed|none] (mengatur properti gambar latar belakang)
topmargin = batas atas dokumen (pixel)
leftmargin = batas kiri dokumen (pixel)
Pemrograman Web
Siti Ulfatur Rohmah | http://siti8842.blogspot.com/
5
PENGATURAN FORMAT DOKUMEN HTML
2.1.4. Heading
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari
suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading.
Ada enam buah heading yang dikenal di HTML, yaitu dari sampai .
Latihan01.html
Latihan-1: Heading
TOKO BUKU SERBA MURAH
Toko kami menyediakan
Alat Tulis
Pensil, Ballpoint, Penggaris, Dll.
Buku-buku Pelajaran
Ilmu pasti, Ilmu bumi, Sejarah, Dll .
Peralatan Kantor
Meja, Kursi, File manager, Dll.
2.1.5. Paragraph
Tag paragraph berfungsi layaknya untuk pengaturan antar paragraf dalam halaman web
Anda. Untuk mengatur perataan paragraf, digunakan atribut: align=[ left | center | right],
sebagai defaultnya adalah left.
2.1.6. Break
Tag break berfungsi untuk memberikan baris baru dalam halaman web Anda.
Pemrograman Web
Siti Ulfatur Rohmah | http://siti8842.blogspot.com/
6
Walaupun dalam pengetikan pada text editor terdapat perpindahan baris, namun
browser akan membacanya sebagai satu baris apabila tidak terdapat tag .Tag
break tidak memerlukan tag penutup .
2.1.7. Horizontal Rule
Tag horizontal rule berfungsi untuk menampilkan garis horisontal di halaman web
Anda. Tag ini sekaligus akan membuat baris baru. Tag tidak memerlukan elemen
penutup . Atribut elemen horizontal rule
align = [ left | center | right ] (perataan horisontal, default center)
size = tebal garis, pixel, default 2
width = lebar garis, pixel atau persen, default 100%)
color = warna garis batas
noshade (garis solid)
Latihan02.html
Selamat Belajar. Semoga Bermanfaat
Recommended