Pemrograman Berbasis Web Pertemuan 2
Download
Report
Transcript Pemrograman Berbasis Web Pertemuan 2
Session 2
Pemrograman Berbasi Web
Sintak
&
Tag-tag
Dasar
Html
Session 2
Mark Up Language
Mark up : informasi tambahan yang di tempatkan pada teks
untuk menjelaskan bagaimana teks tersebut diinterpretasi
Mark up ditambahkan bukan untuk tampilan tetapi untuk
memberikan struktur interpretasi / pemberian arti
HTML (Hyper Text Markup Language) merupakan subset dari
SGML (Standard Generalized Markup Language)
Contoh subset lain dari SGML :
XML (eXtensible Markup Language)
SMIL (Synchronized Multimedia Integration Language)
MathML (Mathematical Markup Language)
CML (Chemical Markup Language)
TentangHTML
HTML
Tentang
HTML : format standar untuk membuat dokumen web
HTML versi terakhir: HTML 4.01
Spesifikasi HTML standar:
http://www.w3.org/TR/html4
HTML merupakan bahasa bertanda, menggunakan
rangkaian teks tertentu (tag) untuk menandai teks
yang mempunyai interpretasi khusus
File HTML berupa file teks (plain text file), bukan
binary file
HTML
Authoring
Tools
HTML
Authoring
Tools
Text Editor
OS default
– notepad (Windows)
– vi (Unix)
Third party
– EditPlus, Crimson Editor, UltraEdit (Windows)
– joe(Linux)
– dll
Visual Editor
Macromedia
DreamWeaver
MS Word
dll
Daftar
Daftar Tag
Tag
<html> Dokumen
<head> Header
<title> Juduldokumen
<body> Isidokumen
<h1> Judulparagraf
<p> Paragraf
<b> <i> <u>
<sup> <sub> Atribut
<br> Gantibaris
<font> Fontd
<li> Enumerasi
<hr> Garismendatar
<img> Gambar
<a> Link (kaitan)
<table> Tabel
<!----> Komentar
Mengenal Penulisan Tag
Mengenal Penulisan Tag
Tag dibentuk oleh suatu kata (keyword) yang diapit oleh tanda
kurung lancip(<tag>)
Tag boleh ditulis dalam huruf kecil maupun Kapital
Tag harus berpasangan, yaitu tag awal di ikuti tag akhir, kecuali
tag tunggal
<p> teks</p> <br> <hr />
Di antara tag awal dan tag akhir bisa terdapat tag lain
Penulisan tag tidak boleh tumpang tindih
<tag1><tag2> teks</tag1></tag2> →penulisanyang salah
<tag1><tag2> teks</tag2></tag1> →penulisanyang benar
Skema
Dasar
HTML
Struktur / Skema Dasar HTML
<HTML>
<HEAD>
<TITLE>Juduldokumen</TITLE>
</HEAD>
<BODY>
Isidokumen
</BODY>
</HTML>
HTML
HTML
Contoh Dokumen HTML:
<html>
<head>
<title>Homepage saya</title>
</head>
<body>
<h1>Saya</h1>
<h2>Perkenalan</h2>
<p>Perkenalkan, namasaya..... Iniadalah<i>homepage</i>
<b>pertama</b> saya, karenasayabarubelajartentang
caramembuat<b><i>homepage</i></b>.
</p>
</body>
</html> <!--akhirdokumenHTML -->
Mengenal Penulisan HTML
Browser HTML menginterpretasikan satu atau beberapa space yang
berdekatan sebagai sebuah space
teks teks teks teks
dianggap sebagai:
teks teks teks teks
Browser HTML menginterpretasikan Carriage Return (Enter) dan
indentasi (Tab) sebagai sebuah space
Ada beberapa karakter khusus yang dapat direpresentasikan dengan
kode tertentu
– spasi
– < <
– > >
– & &
– " "
Tag
Tag Dasar
Dasar
HTML: menandai awal dan akhir dokumen HTML
<html>dokumen</html>
Head: menandai bagian header dokumen HTML
<head>header</head>
Title: memberi judul pada dokumen HTML
<title>juduldokumen</title>
Body: menandai awal dan akhir isi dokumen
<body>isidokumen</body>
<body text="#xxxxxx" bgcolor="#xxxxxx"
background="filegambar" link="#xxxxxx"
vlink="#xxxxxx">isidokumen</body>
Tag Judul (Heading)
<hn>Judulparagraf</hn>
n = 1,2,3,4,5,6 (tingkatjudul)
Untukmenuliskanjudulsuatuparagraf
Tag
TagParagraf
Paragraf
<p>paragraf</p>
<p>paragraf</p>
Untuk menandai
menandai suatu
suatu paragraf.
paragraf.
Untuk
Suatu paragraf
paragraf akan
akan terlihat
terlihat dibatasi
dibatasi oleh
oleh satu
satu baris
baris
Suatu
kosong sebelum
sebelum dan
dan sesudahnya.
sesudahnya.
kosong
Tag Atribut
<b>Kalimat yang dicetak tebal</b>
<i>Kalimat yang dicetak miring</i>
<u>Kalimat yang digaris bawahi</u>
Untuk menandai bagian kalimat
tebal,miring, dan / atau digaris bawahi.
agar
dicetak
Tag Atribut
<sup>bagian yang dicetak tinggi</sup>
<sub>bagian yang dicetak rendah</sub>
Untuk menandai bagian karakter agar dicetakTinggi atau
rendah, biasanya untuk rumusMatematika atau kimia.
Tag ganti Baris (Break Line)
<br>
Untuk pindah kebaris berikutnya. Bentuk penulisan lain yang
dianjurkan(XMLstyle) :
<br/>
Tag Font (Size)
Memformat suatu bagian kalimat dengan ukuran,jenis
huruf, atau warna tertentu.Tag : font Parameter : size,
face, color
Tag Font (Face)
Memformat suatu bagian kalimat dengan ukuran,jenis huruf,
atau warna tertentu.Tag : font Parameter : size, face, color
Tag Font (Color)
Memformat suatu bagian kalimat dengan ukuran, jenis huruf,
atau warna tertentu.Tag : font Parameter : size, face, color
Tag List (Daftar)
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan daftar sesuatu.
Jenis-jenis list dalalm HTML ada tiga yaitu list dengan nomor (ordered list), list tanpa nomor
(unordered list) dan list definisi (definition list) :
1. List dengan nomor
Adalah daftar yang setiap itemnya akan diberi nomor. Nomor tersebut dapat berupa angka,
angka romawi maupun huruf. Penu-lisannya dalam tag HTML menggunakan <ol
type=”A”>.....</ol>
Type
”I”
”i”
”A”
”a”
Ditampilkan
Ditampilkan
Ditampilkan
Ditampilkan
dengan
dengan
dengan
dengan
angka
angka
abjad
abjad
Arti
Romawi huruf besar
Romawi huruf kecil
Latin huruf besar
Latin huruf kecil
2. List tanpa nomor
Adalah daftar yang setiap itemnya tidak diberi nomor melainkan hanya berupa bullet saja
dapat berupa kotak atau bulet. Penulisan-nya dalam tag HTML menggunakan <ul
type=”circle”>.....</ul>
Type
”Circle”
”Disc”
”Square”
Arti
Ditampilkan dengan lingkaran putih
Ditampilkan dengan lingkaran hitam
Ditampilkan dengan kotak hitam
3.List definisi
Adalah list yang memberikan uraian terhadap suatu item yang ter-dapat di dalam
daftar. Penulisannya dalam tag HTML mengguna-kan <dl> (def list), <dt> (def term),
dan <dd> (def description).
Output / layout List
Tag Enumerasi
<li>item</li>
Untuk menandai suatu item dari daftar (enumerasi) , diawali dengan
simbol •(bullet) Kelompok item harus diapit oleh tag <ul> </ul>
dalam daftar bertingkat.Untuk menomori enumerasi dengan nomor
urut(1,2,3),apitlah dengan tag <ol> </ol>
Tag Garis Mendatar
<hr>
membentuk garis pemisah mendatar.Bentuk penulisan lain yang
dianjurkan (XML style) :
<hr />
Tag Gambar (Image)
<imgsrc="NamaFileGambar"> NamaFileGambar= file
gambar yang mempunyai ekstensi.GIF, .JPG, atau
.PNG. Untuk menampilkan sebuah file gambar.Bentuk
penulisan lain yang dianjurkan (XML style) :
<imgsrc="NamaFileGambar" />
Tag Link (Anchor)
<a href="Link">Kata yang di-click</a>
<a name="#Acuan">Kata yang dituju</a>
Link = AlamatURL atau nama file dan/atau acuan yang dituju
Acuan= Kata sembarang sebagai penanda
Membentuk link keURL / file / bagian dokumen lain.
Tag Tabel (Data)
<table> definisitabel</table>
Menampilkan data dalam bentuk tabel
Tabel di definisikan dengan cara menyatakan baris-baris dan kolomkolom.
Tag untuk penanda baris adalah<tr> definisi baris</tr>
Tag untuk penanda kolom adalah<td>data</td>
Tag Table (Layout)
Untuk menata letak (layout) isi dokumen (walaupun hakikatnya
bukan untuk keperluan ini)
Tag Marquee (Layout)
Marquee : Sebuah tText berjalan pada dokument HTML, Sintaxnya adlh Sbb :
<Marquee [Propertie]> .. Isi/text Marquee... </marquee>
Keterangan propertie
PROPERTIE
KETERANGAN
Behavior
Cara atau teknik dari marquee utk menjalankan Text, nilainya Scroll :
Menggulung searah Teks, Slide : juga menggulung searah text, dan Alternate :
Tek berjalan bolak balik
Direction
Arah text berjalan
Hight
Tinggi dari marquee nilainya dlm prosentase % atau pixels
Width
Lebar dari marquee nilainya dlm prosentase % atau pixels
Continously
Menggulung text secara terus menerus, nilainya adalh Loop sebanyak n kali,
Bila menginginkan marquee berjalan terusmenerus maka propertie ini tdk
perlu dicantumkan.
Style
Kemampuan utk memformat Font, paragraf, border, numbering, dan position
Bgcolor
Warna latar dari marquee, nilainya bisa dicantumkan tanpa hrs menuliskan
kode warna apabila anda tidak hapal,(misalnya: Yellow, blue, red, dst)
Tag Frame (Layout)
Untuk menata letak (layout) isi dokumen (membagi/frame
beberapa baris dan kolom atau sub baris dan kolom)
secara kolom
secara baris dan kolom
Sekian dan ......