web dan html dasar
Post on 30-Oct-2021
19 Views
Preview:
TRANSCRIPT
WEB DAN HTML DASAR
1
PENGENALAN WORD WIDE WEB
• Protocol
• Address
• HTML
2
What is an Word Wide Web ?
PENGENALAN WORD WIDE WEB
3
Bagaimana Word Wide Web bekerja?
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
• JSP
7
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
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
13
<HTML>
<HEAD>
<TITLE> Contoh 1 </TITLE>
</HEAD>
<BODY>
UNIVERSITAS KUNINGAN
</BODY>
</HTML>
14
Judul yang dibuat dengan tag <title> </title>
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>
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
CONTOH FORMAT HALAMAN
17
<html>
<head>
<title> contoh background </title>
</head>
<body bgcolor = “green”>
Pewarnaan halaman dengan warna hijau
</body>
</html>
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>
CONTOH BACKGROUND BERGAMBAR
19
<html>
<head>
<title> contoh background bergambar</title>
</head>
<body background = “gambar/logo.gif”>
Background bergambar logo uniku
</body>
</html>
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>
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>
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
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>
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
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>
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>
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>
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)
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>
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
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>
top related