web dan html dasar - staff.uniku.ac.id · membuat animasi marquee 28 bentuk penulisannya adalah : ....

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>






</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>



</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>


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


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>

web dan html dasar - staff.uniku.ac.id · membuat animasi marquee 28 bentuk penulisannya adalah : ....

Documents