web dan html dasar - staff.uniku.ac.id · membuat animasi marquee 28 bentuk penulisannya adalah : ....
TRANSCRIPT
![Page 1: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/1.jpg)
WEB DAN HTML DASAR
1
![Page 2: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/2.jpg)
PENGENALAN WORD WIDE WEB
• Protocol
• Address
• HTML
2
What is an Word Wide Web ?
![Page 3: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/3.jpg)
PENGENALAN WORD WIDE WEB
3
Bagaimana Word Wide Web bekerja?
![Page 4: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/4.jpg)
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
![Page 5: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/5.jpg)
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
![Page 6: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/6.jpg)
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
![Page 7: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/7.jpg)
WEB PROGRAMMING
• Client Side Scripting
• HTML
• Javascript
• CSS
• Server Side Scripting
• PHP
• JSP
7
![Page 8: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/8.jpg)
HTML (HYPER TEXT MARKUP LANGUAGE)
• Bahasa pemrograman yang berbasis web yang
digunakan untuk membuat halaman 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
![Page 9: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/9.jpg)
HTML (HYPER TEXT MARKUP LANGUAGE)
• Web browser
• Teks editor
9
![Page 10: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/10.jpg)
STRUKTUR DASAR DOKUMEN HTML
<html>
<head>
..........Masukkan informasi dokumen disini.......
</head>
<body>
..........Masukkan informasi yang ingin ditampilkan disini....
</body>
</html>
10
![Page 11: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/11.jpg)
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
![Page 12: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/12.jpg)
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
![Page 13: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/13.jpg)
CONTOH SCRIPT DASAR
13
<HTML>
<HEAD>
<TITLE> Contoh 1 </TITLE>
</HEAD>
<BODY>
UNIVERSITAS KUNINGAN
</BODY>
</HTML>
![Page 14: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/14.jpg)
14
Judul yang dibuat dengan tag <title> </title>
![Page 15: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/15.jpg)
MEMFORMAT DOKUMEN HTML
15
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>
![Page 16: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/16.jpg)
FORMAT HALAMAN
16
<body atribut = “value”>. . .isi. . .</body>
Beberapa atribut yang digunakan di dalam tag BODY
adalah :
Atribut Keterangan
Bgcolor menentukan warna backgroud
Background membuat background gambar
Text Warna pada text pada seluruh halaman
Link warna hyperlinkLeftmargin Mengatur jarak margin kiri halaman
Topmargin Mengatur jarak margin atas halaman
Marginwidth Mengatur jarak lebar margin halaman
marginheight Mengatur jarak tinggi margin halaman
![Page 17: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/17.jpg)
CONTOH FORMAT HALAMAN
17
<html>
<head>
<title> contoh background </title>
</head>
<body bgcolor = “green”>
Pewarnaan halaman dengan warna hijau
</body>
</html>
![Page 18: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/18.jpg)
BACKGROUND BERGAMBAR
18
<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>
![Page 19: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/19.jpg)
CONTOH BACKGROUND BERGAMBAR
19
<html>
<head>
<title> contoh background bergambar</title>
</head>
<body background = “gambar/logo.gif”>
Background bergambar logo uniku
</body>
</html>
![Page 20: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/20.jpg)
MENENTUKAN WARNA TEXT
20
<body text = “warna”>. . .isi. . .</body>
Tag ini merupakan parameter yang digunakan untuk
memberikan warna pada text
Contoh :
<body text = “green”> FAKULTAS ILMU KOMPUTER</body>
![Page 21: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/21.jpg)
MENENTUKAN WARNA PADA LINK
21
Link merupakan sebuah simbol yang dijadikan sebagai
acuan menuju ke halaman tertentu pada suatu web.
Adapun bentuk penulisannya adalah :
<body link = “warna”>. . .isi. . .</body>
![Page 22: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/22.jpg)
MEMFORMAT TEXT
22
Tag yang digunakan untuk melakukan pengaturan text :
Tag Keterangan
<B> Membuat huruf tebal (bold)
<I> Membuat huruf miring (Italic)
<U> Untuk mengatur huruf agar memakai garis bawah
<h1> sampai <h6> Untuk mengatur ukuran huruf
<center> Untuk mengatur huruf agar ditengah
<marquee> Untuk membuat tulisan bergerak dari kanan ke kiri
<hr size=n> 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
![Page 23: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/23.jpg)
CONTOH MEMFORMAT TEXT
23
<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>
![Page 24: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/24.jpg)
PENGATURAN WARNA DAN UKURAN HURUF
24
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
![Page 25: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/25.jpg)
MENEMPATKAN KALIMAT DI TENGAH DAN PARAGRAF
25
• 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>
![Page 26: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/26.jpg)
CONTOH KALIMAT DI TENGAH DAN PARAGRAF
26
<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 2017 di Fakultas Ilmu Komputer Universiats
Kuningan</p>
</body>
</html>
![Page 27: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/27.jpg)
MENGGUNAKAN TAG <PRE>
27
Tag PRE digunakan untukmembuat teks keluaran yang
sama persis dengan format yang diketikan dalam tag
HTML.
Bentuk penulisannya adalah :
<pre>. . .text. . .</pre>
![Page 28: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/28.jpg)
MEMBUAT ANIMASI MARQUEE
28
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 Teks bergerak terus menerus
slide Teks bergerak sekali
direction 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)
![Page 29: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/29.jpg)
CONTOH TAG <MARQUEE>
29
<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>
![Page 30: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/30.jpg)
MENCIPTAKAN GARIS HORIZONTAL
30
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
![Page 31: WEB DAN HTML DASAR - staff.uniku.ac.id · MEMBUAT ANIMASI MARQUEE 28 Bentuk penulisannya adalah : . . .text. . . Ada beberapa atribut](https://reader031.vdocuments.net/reader031/viewer/2022020101/5d34156f88c9933c738b7a77/html5/thumbnails/31.jpg)
MENCIPTAKAN GARIS HORIZONTAL
31
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>