Web dan HTML Dasar
Siti Maesyaroh, M.Kom
1
Pengenalan Word Wide Web
What is an Word Wide Web ?
• Protocol • Address • HTML
2
Pengenalan Word Wide Web
Bagaiman Word Wide Web bekerja? • Informasi disimpan dalam dokumen yang disebut dengan halaman-halaman web (web pages) • Web page adalah berkas-berkas yang disimpan dalam komputer yang disebut dengan serverserver web (web server) • Komputer-komputer yang mengakses web page disebut web client • Web client menampilkan web page dengan menggunakan program yang disebut dengan 3 web browser
HTTP • Protokol yang digunakan untuk mentransfer dokumen dalam www • HTTP mendefinisikan bagaimana suatu pesan bisa diformat dan dikirimkan dari server ke client • HTTP mengatur aksi-aksi yang dilakukan oleh web server dan juga web server sebagai respon atas permintaan-permintaan yang lewat dalam protokol http
4
URL • Alamat dari sebuah resource yang dapat di akses di internet. • Resource merupakan berkas halaman web http : //www.uniku.ac.id/~bun10026/index.html
5
Jenis Web • Web statis : dibentuk menggunakan client side scripting • Web dinamis : dibentuk menggunakan aplikasi tambahan (server side scripting dan database) sehingga data dapat diupdate tanpa harus mengubah script, namun cukup dengan mengubah data yang ada dalam database
6
Web Programming • Client Side Scripting – HTML – Javascript – CSS
• Server Side Scripting – PHP – ASP
7
HTML (Hyper Text Markup Language) • Bahasa pemrograman yang berbasis web yang digunakan untuk membuat halam web dan menampilkan berbagai informasi di dalam sebuah browser • Dokumen HTML terdiri dari elemen-elemen yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan
8
HTML (Hyper Text Markup Language) • Web browser • Teks editor
9
Struktur Dasar Dokumen HTML ..........Masukkan informasi dokumen disini....... ..........Masukkan informasi yang ingin ditampilkan disini....
10
Struktur Dasar Dokumen HTML Contoh dokumen HTML Index.html
Contoh dokumen HTML Ini adalah contoh dari dokumen HTML.
11
Dokumen HTML Dokumen HTML terdiri dari elemen-elemen :
• Elemen dalam dokumen HTML ditandai dengan penulisan tag yang berpasangan • Tag diapit dengan dua karakter kurung bersudut < dan > • Tag pertama dalam suatu elemen adalah tag pembuka dan yang kedua merupakan tag penutup • Tag case-sensitive
12
Contoh Script Dasar <TITLE> Contoh 1 UNIVERSITAS KUNINGAN
13
Judul yang dibuat dengan tag
14
Memformat Dokumen HTML • Heading (judul) heading.html
Belajar Heading
Judul Level 1
Judul Level 2
Judul Level 3
Judul Level 4
Judul Level 5
Judul Level 6
15
Format Halaman . . .isi. . .
Beberapa atribut yang digunakan di dalam tag BODY adalah : Atribut Bgcolor Background Text Link Leftmargin Topmargin Marginwidth marginheight
Keterangan menentukan warna backgroud membuat background gambar Warna pada text pada seluruh halaman warna hyperlink Mengatur jarak margin kiri halaman Mengatur jarak margin atas halaman Mengatur jarak lebar margin halaman Mengatur jarak tinggi margin halaman 16
Format Halaman Contoh contoh background Pewarnaan halaman dengan warna hijau
17
Background Bergambar . . .isi. . .
Tag ini merupakan parameter yang digunakan untuk menyisipkan gambar sebagai latar atau background pada script. Contoh : UNIKU
18
Background Bergambar Contoh contoh background bergambar Background bergambar logo uniku
19
Menentukan Warna Text . . .isi. . .
Tag ini merupakan parameter yang digunakan untuk memberikan warna pada text Contoh : FAKULTAS ILMU KOMPUTER
20
Menentukan Warna pada Link Link merupakan sebuah simbol yang dijadikan sebagai acuan menuju ke halaman tertentu pada suatu web. Adapun bentuk penulisannya adalah : . . .isi. . .
21
Memformat Text Tag yang digunakan untuk melakukan pengaturan text : Tag
Keterangan
Membuat huruf tebal (bold) Membuat huruf miring (Italic) Untuk mengatur huruf agar memakai garis bawah
sampai
Untuk mengatur ukuran huruf
Untuk mengatur huruf agar ditengah
<marquee>
Untuk membuat tulisan bergerak dari kanan ke kiri
Untuk membuat garis horizontal, dengan n sebagai lebar dari garis tersebut
<SUB>
Membuat huruf menjorok ke bawah / Subscribe
<SUP>
Membuat huruf menjorok ke atas / Superscribe 22
Memformat Text Contoh format halamn text ini huruf tebal ini huruf miring ini huruf bergaris bawah 23
Pengaturan Warna dan Ukuran Huruf Berikut adalah tag yang digunakan untuk pengaturan huruf : Atribut yang digunakan dalam tag Atribut
Value
Keterangan
Size
1-7
Menentukan besar ukuran huruf
Color
#00000
Menentukan warna huruf
face
font
Menentukan jenis huruf yang digunakan
24
Menempatkan Kalimat di Tengah dan Paragraf • Untuk menempatkan kalimat di tengah hanya memerlukan tag yang kemudian diikuti oleh karakter / kalimat dan ditutup dengan tag • Sedangkan tag digunakan untuk membuat paragraf
kalimat………
kalimat………
kalimat………
25
Menempatkan Kalimat di Tengah dan Paragraf Contoh kalimat tengah dan paragraf text ini di tengah halaman
Dafa adalah seorang mahasiswa Teknik Informatika angkatan 2012 di Fakultas Ilmu Komputer Universiats Kuningan
26
Menggunakan Tag <pre> Tag PRE digunakan untukmembuat teks keluaran yang sama persis dengan format yang diketikan dalam tag HTML. Bentuk penulisannya adalah : <pre>. . .text. . .
27
Membuat Animasi Marquee Marquee adalah sebuah bentuk animasi teks sederhana yang dapat diciptakan oleh HTML. Dengan tag <marquee> dapat menciptakan gerakan-gerakan teks maupun paragraf di dalam halaman web. Bentuk penulisannya adalah : <marquee atribut=“”>. . .text. . . Ada beberapa atribut dalam tag <marquee> Atribut
Value
Keterangan
behavior
Alternate
Teks bergerak ke kanan/ke kiri
Scroll
Teks bergerak terus menerus
slide
Teks bergerak sekali
Left
Kiri
Top
Atas
Down
Bawah
Right
Kanan
Loop
n
Perulangan yang bernilai n
bgcolor
color
Untuk warna latarbelakang
scrolldelay
n
Mengatur waktu tunda gerakan (milidetik)
scrollamount
n
Mengatur kecepatan gerakan (pixel)
direction
28
Tag <marquee> Contoh membuat animasi marquee <marquee behavior=“alternate” bgcolor=“#0099ff”> ANIMASI MARQUEE(ALTERNATE)
<marquee behavior=“scroll” bgcolor=“#0099ff” direction=“left”> ANIMASI MARQUEE(SCROLL)
29
Menciptakan Garis Horizontal Dalam HTML disediakan sebuah tag yang berguna untuk menciptakan garis dengan posisi horizontal, untuk membuatnya dapat menggunakan tag
Adapun penulisannya sebagai berikut :
Sedangkan atribut yang digunakan dalam tag
adalah Atribut
Value
Keterangan
Size
n
Ukuran garis
Color
Color
Warna garis
Align
Left, right
Letak posisi garis
Width
lenght
Lebar garis
30
Menciptakan Garis Horizontal Contoh Membuat Garis Fakultas Ilmu Komputer
31
