Pengenalan HTML. Pemrograman Berbasis Web 1 Oleh : Aririk Japik. S.Kom. copyright by :www.japikinfo.com

Pengenalan HTML Pemrograman Berbasis Web 1 Oleh : Aririk Japik. S.Kom

copyright by :www.japikinfo.com

Apa itu HTML ? • HTML (Hypertext markup language) adalah suatu bahasa markup (bertanda) dengan menggunakan rangkaian teks tertentu (tag) atau simbol untuk mengidentifikasikan berbagai bagian dari halaman web. • Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up) dengan kode-kode tertentu (tag) untuk menjadi dokumen HTML (file *.htm atau *.html).


Lat1.html <TITLE>Judul Halaman Isi dokumen


Lat2.html <TITLE>Judul Halaman Isi dokumen


Memformat Dokumen HTML • Tag
/ Line Break pindah baris Hari ini Belajar Web 1
Mudah2an dapat ilmunya


/ Paragraph Pemisahan Paragraf
World Wide Web (WWW) / Web menggunakan HTTP (HyperText Transfer Protokol) sebagai protokol komunikasi dan menyampaikan informasi berbasis web kepada pemakai dalam bentuk HTML (HyperText Markup Language).

HTML adalah suatu bahasa mark up (bertanda) dengan menggunakan rangkaian teks tertentu (tag) atau simbol untuk mengidentifikasikan berbagai bagian dari halaman web.


/ Horizontal Ruler Atribut Fungsi

align

width

size noshade color

Merupakan posisi vertikal garis perintah. Nilainya adalah left, right atau center. Lebar dari garis batas. Nilai yang dimasukkan dapat berupa pixel ataupun persen dari lebar jendela browser. Menentukan tebal garis batas Menonaktifkan efek tiga dimensi Menentukan warna garis batas copyright by :www.japikinfo.com

ex:

Menggunakan Garis Batas Garis batas biasa
Garis batas dengan posisi di kanan, lebar 250 pixel, warna merah
Garis batas dengan tebal 3 pixel, tanpa efek tiga dimensi


Memformat Dokumen HTML

• Tag / Heading Heading
Ini Heading 1

Ini Heading 2

Ini Heading 3

Ini Heading 4

Ini Heading 5

Ini Heading 6


Memformat Dokumen HTML •

Tag <pre> / Preview

pre <pre> for I = 1 to 10 for j = 1 to 5 A(I,j) = i*j next next


Tag List Untuk membuat daftar pada HTML, kita bisa menggunakan tag List.

• Unordered List (Bullet) bullet

Honda

Yamaha

Suzuki

type bullet

Honda

Yamaha

Suzuki


Tag List

• Ordered List (Numbering) 1 dengan penomoran 1, 2, 3 … A dengan penomoran A, B, C … a dengan penomoran a, b, c … numbering I dengan penomoran I, II, III … i dengan penomoran i, ii, iii …

Sistem Informasi

Teknik Informatika

Sistem Komputer


Definition List

Adalah daftar yang mempunyai keterangan pada itemnya. Untuk memakai definition list digunakan tag
dan tag
. Tag ini bekerja dibantu dengan tag lainnya yaitu tag
yang menandakan item yang dijelaskan dan tag
yang menyatakan definisi dari item.

definition list

DJB
Jambi
MDN
Medan
JKT
Jakarta


Tag Atribut

Fungsi

face

Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri.

color

Untuk menentukan warna font, anda bisa menggunakan nama font atau hexadecimal (#000000 - #ffffff) Untuk menentukan ukuran dari font 1 - 7

size


Tag Ex:

Penggunaan Tag <Font> Arial Times New Roman


Menambahkan Gambar Atribut

Fungsi

src

•Top, bottom, middle digunakan untuk menentukan posisi gambar terhadap teks · Left, right, center untuk menentukan posisi gambar di dokumen

width

Menentukan lebar dari gambar dalam pixel

height

Menentukan tinggi dari gambar dalam pixel

alt

Menampilkan teks pengganti gambar jika gambar tidak dapat ditampilkan. (Pada browser tertentu dapat pula ditampilkan sebagai tool tip)

hspace

Mengatur frame yang mengeliligi gambar secara horizontal

vspace

Mengatur frame yang mengeliligi gambar secara vertikal copyright by :www.japikinfo.com

Menambahkan Gambar ex:

Menambahkan gambar
Default alignment at the bottom

Aligned at Top

Aligned at Middle


Menggunakan Link Link merupakan suatu gambar atau teks yang terkait dengan suatu alamat tertentu. Jika link diklik, maka dokumen HTML akan menuju ke alamat tersebut. Link berhubungan erat dengan apa yang disebut anchor. Anchor merupakan sesuatu yang dapat digunakan untuk menandai sebuah dokumen HTML dan bagian yang ditandai tersebut dapat digunakan sebagai link atau alamat tujuan dari link. Sebuah anchor ditandai dengan tag .

Atribut

Keterangan

Href

Digunakan jika sebuah anchor akan digunakan sebagai link Digunakan jika anchor akan digunakan sebagai tujuan

Name


Menggunakan Link

Ada 3 jenis link : •Link relatif dibuat apabila kita membuat suatu link pada page kita kepage yg lain pada komputer yang sama, tidak memerlukan menggunakan alamat internet yang lengkap.jika 2 page pada direktori yang sama, dapat menuliskan nama file html sebagai berikut : berikutnya •Link absolut Dibuat apabila kita membuat link ke page web yang lain yang berada pada website lain diinternet. Dalam hal ini kita harus menuliskan alamat internet secara lengkao, contoh : kampusku •Link dalam dokumen yang sama. Link jenis ini dibuat untuk dokumen yang panjang sekali, sehingga apabila ditampilkan dibrowser web akan mengharuskan kita melakukan scrool layar berulang-ulang.contoh : bagian tentang link # link berada dalam dokumen yang sama copyright by :www.japikinfo.com

Menggunakan Link ex:

Menggunakan Link Klik di sini untuk menuju www.google.com.
Atau dapat juga mengklik gambar ini:

Jika ini yang diklik akan menuju ke bagian tengah dokumen.

Ini adalah bagian tengah dokumen.


Tabel HTML Digunakan untuk menyajikan data dalam bentuk kolom dan baris.

• Elemen-elemen Tabel Elemen

Penjelasan

…

Mendefinisikan sebuah tabel dalam HTML. Jika atribut border dituliskan, maka browser akan menampilkan tabel dengan border

….

Menspesifikasikan sebuah baris tabel dalam tabel. Kita dapat mendefinisikan atribut untuk seluruh baris:align(left,center,right) atau valign(top,middle,bottom)

Mendefinisikan sel header table. Secara default teks dalam sel ini ditebalkan dan ditampilkan ditengah.

Mendefinisikan sebuah sel data tabel.

Colspan=n

Jumlah n kolom sel diperlebar copyright by :www.japikinfo.com

rowspan=n

Jumlah n baris sel diperbesar

Ex :

… default dari judul adalah ditengah pada bagian paling atas tabel. Atribut align=“bottom” dapat digunakan untuk menempatkan judul pada bagian bawah tabel.

….. ……
setiap tabel dimulai dengan sebuah

100 200 300

tag table
dua baris dan tiga kolom
setiap baris dimulai dengan sebuah tag tr. setiap data dimulai dengan tag td
satu kolom
100 200

300

100

400
500
satu baris dan tiga kolom
600 copyright by :www.japikinfo.com

Tabel headers dan Caption
table headers

CP Bill Gates
name telephone email

Bil gates 555 77 854 [email protected]


Latihan, buat table header secara vertikal


Jawab :
vertical headers

CP Bill Gates
Name Bill Gates

Telephone 555 77 854

email [email protected]


Colspan dan Rowspan

untuk mendefinisikan cell table yg dilebarkan

lebih dari Satu baris atau satu kolom.
Cell that spans two colomns

Name telephone

Bill Gates 555 77 854 555 77 855


Lat. Buat dengan rowspan tampilan dibawah ini


jawab
Cell that spans two rows

First Name Bill Gates

telephone 555 77 854

555 77 855


CellPadding dan Cellspacing

Cellpadding membuat spasi lebih dari antara sel dan bordernya. Cellspacing menambah jarak antarsel cellpadding
without cellpadding
first row

second row

with cellpadding first row second row copyright by :www.japikinfo.com

CellPadding dan Cellspacing

Cellpadding membuat spasi lebih dari antara sel dan bordernya. Cellspacing menambah jarak antarsel cellpadding
without cellspacing
first row

second row

with cellspacing
first row

second row

lat


FRAME • Frame digunakan untuk membagi jendela browser menjadi beberapa bagian dan masing-masing bagian terdiri dari dokumen HTML tersendiri. • Untuk membuat sebuah frame, tag yang digunakan adalah dan . Selain itu terdapat sebuah tag lagi yaitu <noframes> yang digunakan untuk menampilkan sebuah alternative dokumen jika browser tidak mendukung penggunaan frame. Sebuah frame dapat didefenisikan di dalam frame yang lain.


Tag mempunyai beberapa atribut, yaitu:

FRAME

Atribut

Keterangan

rows

Membuat frame secara mendatar (baris) sekaligus mendefenisikan lebar masing-masing

cols

Membuat frame secara vertikal (kolom) sekaligus mendefenisikan lebar masing-masing

bordercolor

Mendefenisikan warna bingkai frame


Untuk mendefenisikan lebar frame pada atribut rows dan cols dengan menggunakan: • Dengan nilai tetap. Setiap frame didefenisikan dalam ukuran pixel • Dengan nilai persentase. Lebar setiap frame didefenisikan sebagai persentase dari lebar jendela browser • Dengan nilai proposional. Lebar setiap frame juga didefenisikan sebagai persentase dari jendela browser


Tag juga mempunyai beberapa atribut, yaitu: Atribut

Keterangan

Src

Menentukan nama file HTML yang digunakan sebagai isi frame

Marginheight

Menentukan batas atas dan bawah antara dokumen dengan bingkai dalam pixel

Marginwidth

Menentukan batas kiri dan kanan antara dokumen dengan bingkai dalam pixel

Scrolling

Menentukan apakah frame dapat memiliki scroll bar. Nilainya adalah yes, no atau auto

Noresize

Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya

Name

Mendefenisikan nama dari objek frame. Nama ini dapat digunakan sebagai tujuan sebuah link

Border

Menentukan ukuran bingkai frame copyright by :www.japikinfo.com

Buatlah tiga buah file HTML dengan nama satu.htm, dua.htm, dan tiga.htm, masing-masing sebagai berikut:

Menggunakan Frame INI FRAME KE n


Setelah itu buatlah file HTML dengan nama frame.htm sebagai berikut: Menggunakan Frame


Lat :buat tampilan dibawah ini :


Jawab : Contoh Frame


Form dan Input HTML • Field text Nama :
NIM :


checkbox Saya Suka Buah
Tomat
Apel


Radio button Saya Suka Buah
Tomat
Apel


dropdown

jurusan Anda
<select name="jur">


Pengenalan HTML. Pemrograman Berbasis Web 1 Oleh : Aririk Japik. S.Kom. copyright by :www.japikinfo.com

Recommend Documents

Ini Heading 1

Ini Heading 2

Ini Heading 3

Ini Heading 4

Ini Heading 5

Ini Heading 6

dua baris dan tiga kolom

satu kolom

satu baris dan tiga kolom

table headers

vertical headers

Cell that spans two colomns

Cell that spans two rows