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 web browser 3
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 <html> <head>...masukkan informasi dokumen disini... </head> <body>...masukkan informasi yang ingin ditampilkan disini... </body> </html> 10
Struktur Dasar Dokumen HTML Contoh dokumen HTML Index.html <html> <head> <title>contoh dokumen HTML</title> </head> <body bgcolor= blue > Ini adalah contoh dari dokumen HTML. </body> </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 <HTML> <HEAD> <TITLE> Contoh 1 </TITLE> </HEAD> <BODY> UNIVERSITAS KUNINGAN </BODY> </HTML> 13
Judul yang dibuat dengan tag <title> </title> 14
Memformat Dokumen HTML Heading (judul) heading.html <html> <head> <title>belajar Heading</title> </head> <body> <h1>judul Level 1</h1> <h2>judul Level 2</h2> <h3>judul Level 3</h3> <h4>judul Level 4</h4> <h5>judul Level 5</h5> <h6>judul Level 6</h5> </body> </html> 15
Format Halaman <body atribut = value >...isi...</body> 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 <html> <head> <title> contoh background </title> </head> <body bgcolor = green > Pewarnaan halaman dengan warna hijau </body> </html> 17
Background Bergambar <body background = alamat file >...isi...</body> Tag ini merupakan parameter yang digunakan untuk menyisipkan gambar sebagai latar atau background pada script. Contoh : <body background = gambar/logo.gif > UNIKU </body> 18
Background Bergambar Contoh <html> <head> <title> contoh background bergambar</title> </head> <body background = gambar/logo.gif > Background bergambar logo uniku </body> </html> 19
Menentukan Warna Text <body text = warna >...isi...</body> Tag ini merupakan parameter yang digunakan untuk memberikan warna pada text Contoh : <body text = green > FAKULTAS ILMU KOMPUTER</body> 20
Menentukan Warna pada Link Link merupakan sebuah simbol yang dijadikan sebagai acuan menuju ke halaman tertentu pada suatu web. Adapun bentuk penulisannya adalah : <body link = warna >...isi...</body> 21
Memformat Text Tag yang digunakan untuk melakukan pengaturan text : Tag Keterangan <B> <I> <U> <h1> sampai <h2> <center> <marquee> <hr size=n> <SUB> <SUP> Membuat huruf tebal (bold) Membuat huruf miring (Italic) Untuk mengatur huruf agar memakai garis bawah Untuk mengatur ukuran huruf Untuk mengatur huruf agar ditengah Untuk membuat tulisan bergerak dari kanan ke kiri Untuk membuat garis horizontal, dengan n sebagai lebar dari garis tersebut Membuat huruf menjorok ke bawah / Subscribe Membuat huruf menjorok ke atas / Superscribe 22
Memformat Text Contoh <html> <head> <title> format halamn text </title> </head> <body> <b>ini huruf tebal</b> <i>ini huruf miring</i> <u>ini huruf bergaris bawah </u> </body> </html> 23
Pengaturan Warna dan Ukuran Huruf Berikut adalah tag yang digunakan untuk pengaturan huruf : <font size = value color= warna face= huruf > Atribut yang digunakan dalam tag <font> 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 <center> yang kemudian diikuti oleh karakter / kalimat dan ditutup dengan tag </center> Sedangkan tag <p> digunakan untuk membuat paragraf <p> kalimat <br> kalimat <br> kalimat <br> </p> 25
Menempatkan Kalimat di Tengah dan Paragraf Contoh <html> <head> <title>kalimat tengah dan paragraf</title> <body> <center>text ini di tengah halaman</center><br> <p>dafa adalah seorang mahasiswa Teknik Informatika angkatan 2012 di Fakultas Ilmu Komputer Universiats Kuningan</p> </body> </html> 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...</pre> 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...</marquee> Ada beberapa atribut dalam tag <marquee> Atribut Value Keterangan behavior Alternate Teks bergerak ke kanan/ke kiri Scroll slide Teks bergerak terus menerus Teks bergerak sekali direction Left Kiri Top Down Right Atas Bawah 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) 28
Tag <marquee> Contoh <html> <head> <title>membuat animasi marquee</title> </head> <body> <marquee behavior= alternate bgcolor= #0099ff > ANIMASI MARQUEE(ALTERNATE)</marquee> <br><br> <marquee behavior= scroll bgcolor= #0099ff direction= left > ANIMASI MARQUEE(SCROLL)</marquee> <br><br> </body> </html> 29
Menciptakan Garis Horizontal Dalam HTML disediakan sebuah tag yang berguna untuk menciptakan garis dengan posisi horizontal, untuk membuatnya dapat menggunakan tag <hr> Adapun penulisannya sebagai berikut : <hr atribut= > Sedangkan atribut yang digunakan dalam tag <hr> 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 <html> <head> <title>membuat Garis</title> </head> <body> <h1 align= right >Fakultas Ilmu Komputer</h1> <hr align= right width= 60% color= #ff0000 size= 3 > </body> </html> 31