Selasa, 10 Maret 2015

PEMROGRAMAN WEB

  • PENGENALAN HTML
HTML = Hyper Text Markup Language
Dokumen HTML (web pages) merupakan file teks murni yang dapat dibuat dengan sembarang editor teks.
Penamaan Dokumen
Nama : sembarang
Ekstensi : ".htm" atau ".html"
Elemen, Tag, Attribut
Dokumen HTML disusun oleh elemen-elemen, contoh : head, body, paragraf, table, list, dsb. Penandaan berbagai elemen dalam suatu dokumen HTML menggunakan Tag (Markup).



Format penulisan tag terdiri atas tanda "<", ">", " /" yaitu
<namatag> ………. </namatag>
Penulisan Tag umumnya berpasangan
Contoh:
<P> -> untuk mengawali suatu paragraf.
</P>-> untuk mengakhiri suatu paragraf.
Setiap tag dapat dilengkapi dengan attribut, attribut setiap tag berbeda-beda.
Format penulisan :
<namatag atr1="nilai-atr1" atr2="nilai-atr2"> …… </namatag>
Struktur file HTML
<Format HTML> =
<Blok identifikasi><Tag HTML><Blok Head><Blok Body><Tag /HTML>
<Blok identifikasi> tidak mutlak harus ada, dan kalau ada biasanya diisi dengan informasi pembuat page dan dibuat dengan apa page tersebut

    <html>
    <head>
      <TITLE> ……………………  </TITLE>
    </head>
    <body>
 ……………………………
 ……………………………
 ……………………………
    </body>
    </html>
Contoh : 

    <html>
    <head>
    <TITLE>Contoh HTML sederhana</TITLE>
    </head>
    <body>
    <H1>HTML itu mudah dipelajari</H1>
    <P>Selamat datang di dunia HTML. 
    Ini adalah paragraph pertama. Meskipun pendek kalimat
    Ini juga bagian dari paragraph!</P>
    <P>Dan ini adalah paragraph kedua.</P>
    </body>
    </html>
<Tag HTML> merupakan tag dasar yang mendefinisikan bahwa doukmen ini adalah dokumen HTML. Bila dilihat dengan editor teks, tag ini dituliskan dengan <HTML> dan terletak pada awal dokumen dan diakhiri dengan </HTML> pada akhir dokumen.
<Blok Head> melingkupi bagian kepala dokumen HTML. Di dalamnya berisi informasi-informasi tentang judul page, basis URL, identifikasi indeks, link, header HTTP, dan nama pengenal. Blok ini dimulai dengan <HEAD> dan diakhiri dengan </HEAD>
  • Judul Page, ini harus disertakan pada blok head, judul page akan ditampilkan oleh browser pada title-bar browser tersebut atau pada baris Document Name. Tag yang digunakan adalah <TITLE>. Misalnya bila page yang kita buat akan diberi judul "Membuat Page dengan HTML", maka pada lingkup blok head kita tuliskan <TITLE>Membuat Page dengan HTML</TITLE>.
  • BASE  :Tag ini digunakan untuk menyertakan URL atau alamat induk dokumen.
    Format : <BASE [TARGET] [HREF=url]>
  • META  : Tag ini digunakan untuk menyertakan informasi pada header HTTP.
    Format : <META [HTTP-EQUIV=”refresh”] [CONTENT=”waktu”]>
<Blok Body> melingkupi semua yang ingin ditampilkan pada page, baik itu teks, gambar, animasi/grafik, musik/suara/video, ataupun hubungan dengan page-page lain pada WWW. Blok ini dimulai dengan <BODY> dan diakhiri </ BODY>.
Atribut: 
#  BACKGROUND : menggunakan file latar belakang dokumen
#  BGCOLOR : mengatur warna latar 
#  LEFTMARGIN : mengatur margin kiri dokumen
#  TOPMARGIN : mengatur margin kiri dokumen 
#  TEXT : mengatur warna default teks dokumen
#  LINK : setting warna link yang belum pernah dipilih
#  ALINK : setting warna link yang sedang aktif
#  VLINK : setting warna link yang pernah dipilih
Tag dan Kegunaannya :
<B>huruf tebal (bold)
<I>huruf miring (italics)
<U>bergaris bawah (underline)
<STRONG> untuk diperhatikan, biasanya huruf tebal
<EM> penekanan (emphasis), biasanya huruf miring
<TT> teletype, biasanya menggunakan typeface Courier, selainnya Times
<SAMP> karakter literal / sample output
<CODE> menampilkan kode, dengan typeface Courier, Teks merepresentasikan Elemen HTML
<CITE>Teks dalam kutipan
<DFN> Teks merupakan definisi
<KBD> Teks merepresentasikan tombol keyboard
<VAR> Teks mendefinisikan variabel
<P> membuat paragraf
<BR> membuat line break (tag mandiri)
<PRE> membuat teks tidak terformat, browser akan menampilkan apa adanya seperti yang kita ketikkan pada editor dan browser akan menggunakan fixed-space font.
<BLOCKQUOTE> membuat kutipan, blok akan dibuat seperti abstrak pada artikel-artikel tetapi tidak dalam huruf miring
<LI> membuat entri pada list
<OL> Ordered List,membuat list terurut. Caranya adalah dengan menyisipkan entri-entri list di dalam tag ini. Browser akan menampilkannya dengan list bernomor
<UL> Unordered List, membuat list tak terurut. Caranya sama dengan <OL>, tetapi browser menampilkannya dengan bullet, bukan dengan nomor
<DIR>Directory List, membuat list tak terurut dengan masing-masing entri tidak lebih dari 24 karakter. Caranya sama dengan <OL> 
<MENU>Menu List, membuat list tak terurut dengan masing-masing entry tidak lebih dari satu baris. Caranya sama dengan <OL>
<DT>term, membuat entri pada list definisi
<DD> definition, definisi dari kata yang diapit tag term <DT>
<DL>List of definitions. Membuat list definisi dengan entri <DT> dan <DD>
<ADDRESS> menuliskan alamat URL pads page dengan huruf miring
<Hx> membuat heading, x bernilai 1 sampai 6
<BLINK> Membuat tulisan berkedip (HTML 3.0)
& Menyisipkan karakter-karakter khusus misalnya tanda & digunakan &AMP, tanda < digunakan &LT dsb.
Karakter Khusus
CharacterHTML Code
"&quot;
&&amp;
<&lt;
>&gt;
&nbsp;
©&copy;
«&laquo;
±&plusmn;
»&raquo;
¼&frac14;
½&frac12;
¾&frac34;

Contoh: 

<HTML>
<!-HTML Yang Pertama Aku Buat-->
<HEAD> <TITLE>Contoh Page dengan HTML</TITLE></HEAD>
<BODY>
<CENTER><H1><B><I>Contoh Page</I></B></H1></CENTER>
<IMG SRC="aas.jpg" ALIGN=RIGHT>
<H1>Heading 1</H1>
<H2>Heading 2</H2>
<H3>Heading 3</H3>
<H4>Heading 4</H4>
<H5>Heading 5</H5>
<H6>Heading 6</H6> 
<P>Dibawah ini ada garis …</P><HR> 
<B>Tebal</B> <I>Miring</I> <U>Garis bawah</U> <HR>
<STRONG>Perhatian !!!</STRONG> <EM>Hati-hati</EM>
<HR>
<TT>ini ada pesan dari Tuan John</TT> 
<CODE>MOV AX, 100h</CODE>
<HR>
<P>Paragraf, ini adalah paragraf. Paragraf paragraf 
paragraf paragraf paragraf paragraf paragraf paragraf 
paragraf paragraf paragraf <B>ada BR
nya</B> <BR>paragraf paragraf
paragraf paragraf paragraf paragraf paragraf paragraf 
paragraf paragraf paragraf paragraf paragraf paragraf 
paragraf paragraf paragraf</P> <HR>
<H3>
  <P>Perhatikan pesan Dosen:</P>
</H3>
<BLOCKQUOTE>Dalam perkuliahan selalu akan diberikan tugas 
baik individu maupun kelompok, selain akan ada quiz, UTS 
dan UAS. 
Tugas-tugas harap diserahkan  dalam disket</BLOCKQUOTE> <HR>
<H3><P>Contoh List Terurut</P></H3>
<P>Keperluan bermain bulutangkis</P>
<OL> 
  <LI>Lapangan</LI>
  <LI>Net</LI>
  <LI>Raket</LI>
  <LI>Shuttlecock</LI>
</OL> <HR>
<H3><P>Contoh List Tidak Terurut</P></H3> 
<P>Buah-buahan lezat &amp bergizi</P>
<UL>
  <LI>Apel</LI>
  <LI>Jeruk</LI>
  <LI>Durian</LI>
  <LI>Mangga</LI>
  <LI>Jambu</LI>
</UL> <HR>
<H3><P>Contoh List Definisi</P></H3> 
<DL>
  <DT>Pesan</DT>
    <DD><P>Dengar isi nasihat bukan siapa yg menasihati.
    </P></DD>
  <DT>BATIG</DT>
    <DD><P>Belajarlah Apabila Tidak Ingin Gagal</P></DD>
  <DT>HTML</DT>
    <DD><P>HyperText Markup Language</P></DD> 
  <DT>Beriman</DT>
    <DD><P>Bersih Indah dan Aman</P></DD> 
</DL><HR>
<A HREF="http://www.unpad.ac.id/">Link ke Website 
Universitas Padjadjaran</A><BR><HR>
&copy 2001 Siapa Saja
</BODY>
</HTML> 
 
:: TEXT
Mengatur Tampilan Teks
Berikut ini adalah label-label tag yang dapat digunakan untuk mengatur tampilan teks
  1. Label <BR> berguna untuk berganti baris.
  2. Label <P> berguna untuk membuat paragraph teks dan menyisipkan satu baris kosong di antara teks.
  3. Label <PRE> dan </PRE> berguna untuk menampilkan teks sesuai dengan letak aslinya, sebab tanpa label ini letak teks akan diatur browser (teks akan otomatis berpindah baris bila teks mencapai margin kanan.
  4. Label <CENTER> dan </CENTER> berguna untuk meletakan objek ditengah-tengah dokumen
    Contoh dokumen Web yang menggunakan label di atas : 
    <HTML> 
<HEAD> 
  <TITLE>Penebalan Label Pengatur Teks</TITLE> 
</HEAD>
<BODY>D3 MIPA UNPAD<BR>
<P>Internet merupakan jaringan komputer global yang<BR> 
mencakup area yang luas, anggotanya mencakup komputer 
dari berbagai jenis mencakup Personal Computer, 
Main Frame, Workstation dan lain-lain.</P>
<P>Sekian<BR>
</BODY>
</HTML>
  5. Menggunakan elemen style, pada HTML terdapat dua jenis style yaitu style Logika dan style Fisik.Tampilan teks dengan style logika sangat tergantung pada jenis Web browser, browser yang berbeda akan menghasilkan efek yang berbeda pula. Tampilan teks dengan style fisik tidak tergantung jenis Web browser karena style fisik merupakan standar untuk perancangan browser, efek style pada tampilan teks akan sama walau browser berbeda. Pengaturan teks yang dapat dilakukan pada suatu dokumen HTML di antaranya adalah
    • huruf tebal/miring/garis bawah
    • pembuatan headings
    • penentuan typeface
    • pembuatan paragraf
    • pembuatan kutipan
    • pembuatan daftar (list)
    • penyisipan karakter khusus
    Hampir semua tag untuk pengaturan teks berjenis tag lingkup / memiliki atribut. Jadi semua kata/kalimat yang dilingkupi tag tersebut akan mengikuti markup yang telah dirujuk. Tabel dibawah akan memberikan ringkasan tag untuk keperluan ini beserta kegunaannya.
    • tinggi (HEIGHT)
    • lebar (WIDTH)
    • tempat (ALIGN, VSPACE, dan HSPACE)
    • bingkai (BORDER)
    • judul (ALT)
Membuat Heading
Untuk membuat heading digunakan tag <H1> sampai <H6>. Semakin kecil nilai level, maka huruf semakin besar. Untuk judul page biasanya dibuat dengan <H1>
Menambahkan garis horisontal
Untuk menambahkan garis horisontal pada Web, kita cukup menambahkan tag berikut
<HR>
Tag ini memiliki atribut yang mengatur lebar, panjang, peletakkan, dan bayangan, yaitu:
SIZE : Menentukan tebal dari garis horisontal (dalam satuan Pixel)
WIDTH : Menentukan panjang dari garis horisontal (dalam %)
ALIGN : Menentukan letak garis (LEFT, RIGHT, atau CENTER)
NOSHADE : Mengubah wara garis menjadi hitam
Untuk membuat garis dengan tebal 10 pixel , panjang 50 % dari lebar browser, dan letaknya rata kiri, maka ditambahkan label tag
<HR SIZE=10 WIDTH=50% ALIGN= LEFT>.
Pada dokumen berikut ini akan diperlihatkan penggunaan atribut - atribut <HR>. 

<HTML>
<HEAD><TITLE>Home Page D3 Komputer  UNPAD</TITLE></HEAD> 
<BODY>
<HR SIZE=7 WIDTH=25% ALIGN=LEFT> Manajemen Informatika
<HR SIZE=8 WIDTH=50% ALIGN=LEFT> Teknik Informatika
<HR SIZE=10> Teknik Komputer
</BODY> 
</HTML>
 
  
:: LISTS

Daftar Berurut
<OL TYPE="field-type"  START="n">
   <LI>…………
   <LI>…………
   <LI>…………
</OL> Atribut:
AtributFungsi
TYPE = 1Daftar berurut 1,2,3,... (default)
TYPE = IDaftar berurut I,II,III,...
TYPE = iDaftar berurut i,ii,iii,...
TYPE = ADaftar berurut A,B,C,...
TYPE = aDaftar berurut a,b,c,...
nNilai urutan awal

Contoh: <HTML> <HEAD><TITLE>Ordered List</TITLE></HEAD> <BODY> Urutan Angka : <OL> <LI>Satu <LI>Dua <LI>Tiga <LI>Empat </OL> </BODY> </HTML> Daftar Tidak Berurut
<UL TYPE="field-type">
   <LI>…………
   <LI>…………
   <LI>…………
</OL> Atribut:
AtributFungsi
TYPE = circleDaftar bertanda lingkaran
TYPE = diskDaftar bertanda cakram
TYPE = squareDaftar bertanda kotak

Contoh: <HTML> <HEAD><TITLE>Unordered List</TITLE></HEAD> <BODY> Urutan Angka : <UL> <LI>Satu <LI>Dua <LI>Tiga <LI>Empat </UL> </BODY> </HTML>  

:: FONTS
 
<font [face="nama font"] [size=ukuran] [color=warna]> ………. </font>
Ukuran Font
<font size=n> ………. </font>
n= 0..7
Jenis Font
<font face="………"> ………. </font>
contoh:
<font face="Arial"> Arial font!</font>
Warna Font
<font color=#RRGGBB> ………. </font>
#RRGGBB: kombinasi warna dalam hexa atau konstanta warna
Font Standar
<base font [face="nama font"] [size=ukuran] [color=warna]>
contoh: 
<HTML>
<HEAD>
<TITLE>Penggunaan Font</TITLE>
</HEAD>
<BODY>
<FONT FACE="Arial" SIZE=1> Font Size 1</FONT><BR>
<FONT FACE="Arial" SIZE=2> Font Size 2</FONT><BR>
<FONT FACE="Arial" SIZE=3> Font Size 3</FONT><BR>
<FONT FACE="Arial" SIZE=4> Font Size 4</FONT><BR>
<FONT FACE="Arial" SIZE=5 color="#008000"> Font Size 5</FONT><BR>
<FONT FACE="Arial" SIZE=6 color="#0000FF"> Font Size 6</FONT><BR>
<FONT FACE="Arial" SIZE=7 color="#FF0000"> Font Size 7</FONT>
</BODY>
</HTML>

Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)