PEMROGRAMAN BERBASIS WEB ** - HTML...

PEMROGRAMAN BERBASIS WEB ** -

HTML LANJUTAN

MINGGU KE 3

2

OUTLINE

• TAG DASAR HTML

BASIC TEXT FORMATTING

IDENTIFYING RESOURCES

USING GRAPHIC IMAGES - BASICS

BACKGROUND IMAGES

• HTML INTERMEDIATE

FORMATTING WITH TABLES, FRAMES

COLLECTING INFORMATION FROM

THE USER USING FORMS

PEMROGRAMAN BERBASIS WEB ** (4KA)

3

TAG DASAR HTML


•HTML merupakan bahasa bertanda, menggunakan

rangkaian teks tertentu (tag) untuk menandai teks

yang mempunyai interpretasi khusus

•Tag HTML adalah kata kunci yang diapit oleh

kurung sudut/kurung lancip

<tag>informasi</tag>

•Tag boleh ditulis dalam huruf kecil maupun kapital

•Tag HTML umumnya berpasangan, dimulai dengan

start tag dan diakhiri dengan end tag

•End tag ditulis seperti start tag, tapi dengan garis

miring sebelum nama tag

4

TAG DASAR HTML (Lanjutan)


•Penulisan tag tidak boleh tumpang tindih

<tag1><tag2> teks </tag1></tag2> → penulisan yang salah

<tag1><tag2> teks </tag2></tag1> → penulisan yang benar

•Dibuat dengan menggunakan Notepad atau Notepad++

•File format HTML akan berekstensi .htm atau .html

•Web browser tidak menampilkan tag HTML tapi

menggunakannya untuk menentukan bagaimana

menampilkan dokumen

5PEMROGRAMAN BERBASIS WEB ** (4KA)

TAG

HTMLKETERANGAN

TAG

HTMLKETERANGAN

<html> Mendefinisikan sebuah dokumen

HTML<h1> Mendefinisikan judul paragraf

<head>Mendefinisikan elemen kepala

dokumen Mendefinisikan sebuah paragraf

<title> Mendefinisikan judul dokumen

HTML Ganti baris berikutnya.

<body>

Mendefinisikan tubuh dokumen,

berisi informasi yang hendak

ditampilkan



Memformat suatu bagian kalimat dengan

ukuran, jenis

huruf, atau warna tertentu.

Tag Atribut 1 <li> Menandai suatu item dari daftar (enumerasi)

 Kalimat yang dicetak tebal <hr> Membentuk garis pemisah mendatar.

 Kalimat yang dicetak miring <img> Menampilkan sebuah file gambar.

 Kalimat yang digarisbawahi <a> Alamat URL atau nama file dan/atau acuan

yang dituju

Tag Atribut 2 <table> Menampilkan data dalam bentuk tabel

 Bagian yang dicetak tinggi <frameset>

Membagi layar dalam beberapa jendela,

dimana masing-masing layar menampilkan

web page yang berbeda.

 Bagian yang dicetak rendah FORMMemperoleh data-data user baik nama,

alamat dan data lainnya

6

SKEMA DASAR HTML


<HTML>

<HEAD>

<TITLE>Judul Dokumen</TITLE>

</HEAD>

<BODY>

Isi Dokumen

</BODY>

</HTML>

Keterangan :

• <HTML> …. </HTML> menandai awal dan akhir dokumen HTML

• <HEAD> …. </HEAD> menandai awal dan akhir header dokumen

• <TITLE>Judul dokumen</TITLE> memberi judul pada dokumen

• <BODY> Isi dokumen</BODY> menandai awal dan akhir isi dokumen

7

SKEMA DASAR HTML (Lanjutan)


1. Ketik tulisan di samping dengan

menggunakan Notepad

2. Simpan file tersebut dengan nama :

belajar.html

3. Ganti pilihan Save As Type menjadi All files

4. Jika sudah di Save

5. Buka program tadi menggunakan web

browser

6. Akan muncul tampilan seperti di bawah ini

JUDUL NAMA

BERKAS

TEKS DALAM

BADAN DOKUMEN

8

TAG JUDUL (HEADING) - <hn>


<hn>Judul Paragraf</hn>

n = 1,2,3,4,5,6 (tingkat judul)

Untuk menuliskan judul suatu paragraf

9

TAG JUDUL (HEADING) - <hn> - (Lanjutan)


Mengatur Letak Heading : Tag heading mempunyai atribut

yang digunakan untuk mengatur letak heading dalam baris –

align. Alignment heading : Kiri (Left), Tengah (Center),

Kanan (Right)

Jika atribut align tidak diisi maka heading secara default

akan ditampilkan sebelah rata kiri

10

TAG PARAGRAF (PARAGRAPH) - 


Paragraf

Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi

oleh satu baris kosong sebelum dan sesudahnya.

11

TAG GANTI BARIS (BREAK LINE) - 


 Ganti Baris Berikutnya

Ganti baris dimaksudkan hanya menyajikan informasi pada baris

sendiri tetapi tidak berganti paragraf. Untuk berganti baris yang

baru tanpa berganti paragraf baru maka harus digunakan TAG 

sebelum teks yang dimaksudkan dituliskan. Penulisan TAG 

dapat dilakukan tanpa harus menuliskan tag pasangannya.

12

TAG FONT (SIZE, FACE, COLOR) - 


• kalimat

kalimat

n = 1, 2, 3, dll (ukuran huruf)

m = -2, -1, +0, +1, +2, dll (ukuran huruf)

Memformat suatu bagian kalimat dengan ukuran

• kalimat

Nama font = Times New Roman, Arial, Cambria, dll

Memformat suatu bagian kalimat dengan jenis huruf

• kalimat

Warna = Red, Green, Blue, dll

Memformat suatu bagian kalimat dengan jenis warna

• <marquee direction=left>kalimat</marquee>

Direction Marquee : Down (atas ke bawah), Left (kanan ke kiri), Right (kiri

ke kanan) , Up (dari bawah ke atas)

Untuk membuat efek teks berjalan

13

TAG FONT (SIZE, FACE, COLOR) - - (Lanjutan)

14

TAG ATRIBUT 1 (BOLD, ITALIC, UNDERLINE) - , , 


• Kalimat yang dicetak tebal

• Kalimat yang dicetak miring

• Kalimat yang digarisbawahi

Untuk menandai bagian kalimat agar dicetak tebal, miring, atau digarisbawahi.

15

TAG ATRIBUT 2 (SUPERSCRIPT, SUBSCRIPT) - . 


• Bagian yang dicetak tinggi

• Bagian yang dicetak rendah

Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk

rumus matematika atau kimia.

16

TAG ATRIBUT 2 (SUPERSCRIPT, SUBSCRIPT) - . 


• Bagian yang dicetak tinggi

• Bagian yang dicetak rendah

Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk

rumus matematika atau kimia.

17

TAG ENUMERASI (LIST, ORDERED LIST, UNNUMBERED LIST) -

<li>, <ol>, <ul>


<li>item</li>

Untuk menandai suatu item dari daftar (enumerasi), diawali dengan

simbol • (bullet)

<ol>item</ol>

Untuk membuat daftar dimana tiap bagiannya memiliki nomor secara

berurut. Untuk menyatakan tiap bagiannya digunakan Tag <LI> dan tidak

diperlukan tag penutup.

TAG ENUMERASI (LIST, ORDERED LIST, UNNUMBERED LIST) -

<li>, <ol>, <ul> - (Lanjutan)

<ul>item</ul>

Membuat daftar item dengan tanda bullet. Kelompok item harus diapit oleh

tag <ul> </ul> dalam daftar bertingkat.

TAG ENUMERASI (LIST, ORDERED LIST, UNNUMBERED LIST) –

<li>, <ol>, <ul> - (Lanjutan)

<hr> atau bentuk penulisan lain yang dianjurkan (XML style) <hr/>

Sebuah garis dapat disisipkan dalam dokumen web, umumnya digunakan sebagai pemisah

antar bagian atau paragraf.

TAG GARIS MENDATAR (HORIZONTAL LINE) - <hr> ATAU <hr/>

<img src="NamaFileGambar"> atau bentuk penulisan lain yang dianjurkan

(XML style) <img src="NamaFileGambar" />

Untuk menampilkan sebuah file gambar. NamaFileGambar = file gambar yang

mempunyai ekstensi .GIF, JPG, atau PNG.Disertai dengan atribut :• SRC menentukan sumber gambar• ALT alternatif bila browser berbasis teks / alternatif teks apabila gambar

tidak dapat ditampilkan• ALIGN perataan teks (LEFT/CENTER/RIGHT)

TAG GAMBAR (IMAGE) - <img>

• <a href =“nama link page.html”>kalimat </a>

Link Relatif : Digunakan jika membuat suatu link

pada page anda ke page lain pada komputer yang

sama. Bila dua page berada pada direktori sama, anda

dapat menuliskan nama file html.

• <a href =“nama link page web”>kalimat</a>

Link Absolut : Digunakan apabila anda membuat link

ke page web lain yang berada pada web site lain di

internet.

TAG LINK - <a>

TAG LINK - <a> - (Lanjutan)• Link Relatif

Jika klik di sini di klik, maka akan

muncul tampilan di bawah ini

TAG LINK - <a> - (Lanjutan)• Link Absolut

Jika BAAK di klik, maka akan

muncul tampilan di bawah ini

TAG TABEL (TABLE) - <table>

<table> definisi tabel </table>

Menampilkan data dalam bentuk tabel. Tabel didefinisikan dengan cara

menyatakan baris-baris dan kolom-kolom.

• Tag untuk penanda baris adalah <tr> definisi baris </tr>

• Tag untuk penanda kolom adalah <td>data</td>

FRAME - <frameset>

Tag Dasar :

• <frameset> ...</frameset>

• <frame />

• <noframes> .. </noframes>

Basic Attributes

• cols = “values” ….(value biasanya besar pembagian area)

• rows = “values”

• name = “frame_name”

• src = “frame_source(url)”

• target = “frame_name”

Frame membagi layar dalam beberapa jendela, dimana masing-

masing layar menampilkan web page yang berbeda.

FRAME - <frameset> - (Lanjutan)

FORM - <form>Kegunaan Form dalam web :

• Memperoleh data-data user baik nama, alamat dan data lainnya

• Untuk mendaftar pada service yang disediakan

• Memperoleh informasi pembelian secara online

• Memperoleh feedback dari user mengenai website anda

FORM - <form> - (Lanjutan)

Terima Kasih

PEMROGRAMAN BERBASIS WEB ** - HTML...

Documents

Transcript of PEMROGRAMAN BERBASIS WEB ** - HTML...