Rabu, 25 Januari 2012

WEB SEDERHANA




 
<html>
<head>
<title> RESTORAN </title>
</head>

<body background = "ajaib.jpg"></body>
<body>
<basefont size=30>
<font color="red"
<p><b><align="center"> BAKSO ANDA</b></p>
</font>
<BR>
<ol>
<basefont size=5>
<li><i><b>MENU MAKANAN:</b></i></li>
<BR>
<oL TYPE="Disc">
    <LI>Bakso Bakar</LI>
    <LI>Bakso Halus</LI>
    <LI>Mie Ayam</LI>
    <LI>Mie Soe</LI>
    <LI>Bakso</LI>
    <LI>Bakso Kriting</LI>
    <LI>Bakso Ayam</LI>
    <LI>Bakso Ampas </LI>
    </oL>
</font>
<body>
<basefont size=5>
<li><i><b>MENU MINUMAN:</b></i></li>
<BR>
<UL TYPE="Square">
    <LI><u>Jus Alfukat</u></LI>
    <LI><u>Jus Orange</u></LI>
    <LI><u>Jus Tomat</u></LI>
    <LI><u>Jus Wartel</u></LI>
    <LI><u>Jus Jambu</u></LI>
    <LI><u>Teh O</u></LI>
    <LI><u>Teh Hangat</u></LI>
    <LI><u>Kopi susu<</u></LI>
    </ul>
<body>
<basefont size=5>
<li><i><B>HARGA</B></i></li>
<BR>
<TABLE BORDER="15">
<TR>
<TD>B.Kosong Rp.10.000</TD>
<TD>B.Kriting Rp.10.000</TD>
<TD>B.Ampas Rp.8.000</TD>
</TR>
<TR>
<TD>Mie.Aym,So Rp.12.000</TD>
<TD>B.Bkr Rp.10.000</TD>
<TD>B.Hlus Rp.10.000</TD>
</TR>
<TR>
<TD>K.susu Rp.5.000</TD>
<TD>ALL JUS.Rp.9.000</TD>
<TD>ALL Teh Rp.4.000</TD>
</TR>
</ol>
</TABLE>
</BODY>
</HTML>

   














Diposting oleh di Tidak ada komentar:

Selasa, 03 Januari 2012

Tutorial HTML

2. Dasar-dasar HTML

Pengetahuan pertama tentang HTML yang harus kamu miliki adalah struktur dari HTML. Struktur HTML ini dapat kamu ibaratkan seperti Hamburger. Pernah makan? Kalau belum, kamu akan melihat roti bulat yang ditumpuk-tumpuk dengan isi sayuran didalamnya. Struktur HTML ini mirip seperti Hamburger, sayuran yang dijepit oleh roti tersebut adalah isi dari kedua tag HTML yang menjepitnya. Apa itu tag? Sekarang kita langsung lihat saja pada struktur sederhana dari HTML.
Di bawah ini adalah struktur dasar suatu file html,
view plaincopy to clipboardprint?
  1. <html>  
  2.     <head>  
  3.         <title>Sedang Belajar</title>  
  4.     </head>  
  5.     <body>  
  6.           
  7.         aku belajar html nih ..  
  8.   
  9.     </body>  
  10. </html>  
kode yang dimulai dengan tanda "<" dan diakhiri dengan tanda ">" (tanpa tanda kutip) merupakan tag-tag HTML. Tag-tag ini menandai bagian-bagian pada halaman situs agar ditampilkan sesuai dengan standar tampilannya. Tag HTML dasar adalah yang kalian lihat diatas, yaitu html, head, dan body, inilah roti dari hamburger kita, mereka masing-masing menjepit isinya. Perhatikan kode paling atas dan paling bawah, yaitu
view plaincopy to clipboardprint?
  1. <html>  
dan
view plaincopy to clipboardprint?
  1. </html>  
Kedua tag tersebut adalah tag utama dari HTML, segala yang terdapat dalam tag ini adalah bagian dari html.
Berikut ini adalah penjelasan singkat mengenai tag dasar diatas. Tag <head> dan </head> digunakan untuk meletakkan informasi-informasi penting yang tidak ditampilkan oleh browser sehingga ketika kita tidak akan melihatnya pada halaman situs. Tulisan didalam <head> dan </head> hanya dapat dilihat apabila kita mengklik 'View Source' pada browser Internet Explorer, atau 'View Page Source' pada Mozilla Firefox. Keduanya dapat ditemukan dengan klik kanan pada halaman situs yang dilihat. Tag <head> ini umumnya berisi judul (tag <title> dan </title>) dari halaman situs dan beberapa informasi tambahan lainnya.
Tag <body> dan </body> adalah isi dari halaman situs. Disini tulisan, gambar, tabel, kalian akan ditampilkan di browser. Itulah mengapa tag ini disebut body atau badan. Ada banyak tag-tag HTML lain yang bisa ditampilkan disini misalnya <img> untuk menampilkan gambar, <p> untuk menampilkan paragraf, <table> untuk menampilkan tabel, dan masih banyak lagi. Tag-tag ini dapat kalian temukan definisinya dan cara pemakaiannya pada pembahasan khusus tag.
Satu hal mendasar lagi yang harus kalian ketahui dalam membangun situs kalian menggunakan html adalah atribut. Atribut berbeda dengan tag, atribut adalah keterangan untuk tag. Misalnya untuk tag body ada beberapa atribut seperti bgcolor, dan background. Contohnya seperti dibawah ini,
view plaincopy to clipboardprint?
  1. <html>  
  2.     <head>  
  3.         <title>Sedang Belajar</title>  
  4.     </head>  
  5.     <body bgcolor=red>  
  6.           
  7.         aku belajar html nih ..  
  8.   
  9.     </body>  
  10. </html>  
Atribut bgcolor=red artinya adalah, "Tampilkan latar belakang merah pada halaman situs..". Sehingga latar belakang dari halaman yang kalian buat akan berwarna merah. Atribut-atribut yang lain dapat kalian temukan pada bagian tag yang bersangkutan.
Penjelasan diatas merupakan dasar-dasar dari HTML. Kalian dapat mencobanya sendiri di komputer kalian dengan menggunakan notepad atau wordpad, caranya dengan menulis kode-kode html dalam notepad atau wordpad lalu simpan sebagai [dot]html. Jangan lupa untuk memilih pilihan 'All Files' untuk 'Save as Type'nya sehingga file yang tersimpan bukan [dot]txt. Atau kalian juga dapat mencobanya langsung disini, dengan menulis kode-kode tersebut di papan tulis dibawah ini. Setelah selesai kalian dapat melihat hasilnya dengan menekan tombol 'Lihat Hasilnya!'. Papan tulis ini akan ada di setiap pelajaran HTML berikutnya untuk memudahkan kalian mencoba kode-kode HTML dalam pelajaran tersebut.
Browser anda tidak mendukung IFRAME
Diposting oleh di Tidak ada komentar:

karakter yang digunakan dalam html

berikut karakter yang digunakan dalam html
  • <
  • "
  • =
  • /
  • >
yah, hanya 5 karakter, jika suatu saat menemukan karakter seperti :, ; (, ), ‘, itu bukan html tapi dhtml atau htmldom
contoh;
<p style="color:blue; font-size:17px;"> ini adalah gabungan css dan html </a>
<a href="javascript:void(0)" onclick="window.open('http://indaam.com/','popupwindow', 'scrollbars=yes,width=500,height=520');return
true">ini adalah link contoh html, javascript event</a>

struktur penulisan html

contoh penulisan html seperti ini
<html>
<head>
<!-- di sini penulisan tag head -->
</head>
<body>
<!-- di sini penulisan tag body -->
</body>
</html>
contoh diatas adalah penulisan html, berikut keterangannya
  • diawali dengan tag <html> dan diakhiri </html>
  • setiap penulisan tag, harus di tutup dengan tag yang sama di mana tag penutup di tambahkan /(slash atau garis miring ), contoh </html>, </head>, </body>. ada garis miringnya kan!
  • penulisan tag diantara<head> dan </head>, tidak akan ditampilkan di layar, fungsi tag <head> ini hanya menjelaskan kepada browser tentang isi document html serta menghubungkan dengan link/style eksternal
  • penulisan tag diantara<body> dan </body>, seluruhhnya akan di tampilkan di layar(browser)

komentar html

untuk memudahkan penulisan html, kita bisa menambahkan komentar. dimana komentar html ini tidak akan ditampilkan di browser, contoh
<p>ini adalah paragraf</p>
<!-- tag p diatas adalah paragraf -->
keterangan
  • dari contoh diatas, browser hanya akan menampilkan paragraf yang bertuliskan ini adalah paragraf, sedangkan
<!–tag p diatas adalah paragraf–>
  • tidak akan di tampilkan
  • penulisan komentar seperti ini
diawali dengan <!-- diakhiri dengan –>
  • contoh penulisannya seperti ini
<!-- tulis komentar anda disini -->

ekstensi html

ektensi html adalah [dot]html dan [dot]htm! terserah mau pilih mana!
ok mari kita ke

menjalankan dan menulis html

buka program notepad, atau notepad++(jika ada)
copy code markup dibawah
<html>
<head>
<title>belajar html itu madah ya</title>
<!--tag title adalah judul unntuk browser -->
</head>
<body>
<p>ya html itu memang mudah</P>
<!--tag p adalah paragraf -->
</body>
</html>
  • kemudian paste dan save as dengan nama
  • dasardasar.htm(pilih all tipes)
  • pastikan ekstensi filenya adalah [dot]html dan bukan bukan [dot]txt
  • jalankan file(double klick) atau open with
setelah dilihat, edit lagi dasardasar.htm
kemudian tambahkan markup diatas tag </body>
<b>ini text tebal</b>
<!--tag b adalah text tebal -->
<i>ini text miring</i>
<!--tag i adalah miring -->
trus save atau simpan, sakarang buka lagi browser, kemudian refresh/ reload tekan f5, lihat hasilnya
bersambung. . .
Diposting oleh di Tidak ada komentar:

  Pengertian HTML

 
   HTML adalah bahasa markup yang umum digunakan. Kepopuleran HTML disebakan karena HTML ini mudah digunakan. Pembuatan dokument WEB dengan  HTML dapat dilakukan dengan mudah dan cepat. Dokumen WEB dapat tersaji dengan cepat ke banyak pembaca di seluruh dunia sekaligus. HTML mudah melakukan kontrol terhadap tampilan halaman WEB baik berupa teks, gambar, suara, animasi maupun video.
HTML merupakan singkatan dari Hypertex Markup Language. HTML digunakan untuk membangun halaman WEB. Sekalipun banyak orang menyebutnya sebagai bahasa pemrograman, HTML sebenarnya sama sekali bukan bahasa pemrograman, hal ini terlihat dari namanya, HTML adalah suatu bahasa Markup. HTML digunakan untuk melakukan mark-up (penandaan) terhadap sebuah dokumen teks. Tanda tersebut digunakan untukmenentukan format atau style dari teks yang ditandai
halaman web dibangun oleh  kode-kode HTML yang disebut juga dengan tag-tag HTML
Tag yang harus di miliki oleh halaman WEB adalah:

<HTML>
<HEAD>
<TITLE>Halaman WEB pertama saya</TITLE>
</HEAD>
<BODY>
Halo Dunia!
</BODY>
</HTML>

Di antara kedua tag tadi adalah tempat memasukkan apa saja ke dalam halaman web.
Pada bagian HEAD, kita memberikan data mengenai dokumen kita. Tag penutup selalu ada pada halaman tersebut.
Paragraph/Baris Baru:
<P><BR>

Contoh:

<HTML>
<HEAD>
<TITLE>Halaman WEB pertama saya</TITLE>
</HEAD>
<BODY>
Halo Dunia!<p>
Halo semuanya<br>
Ini adalah halaman WEB saya. <br>
Saya sedang belajar membuat halaman WEB dengan kode HTML<p>
Salam!
</BODY>
</HTML>



Hyperlink
Hyperlynk dapat dipergunakan untuk mengkaitkan dokumen HTML ke dokumen HTML pada URL (situs) yang berbeda, mengkaitkan antar dokumen  HTML pada URL yang sama  atau pengkaitan penunjukan tempat pada URL, dokumen HTML yang sama.
1. Mengkaitkan Halaman WEB pada URL yang Berbeda
contoh:
<HTML>
<HEAD>
<TITLE>Utama</TITLE>
</HEAD>
<BODY>
Halo Dunia!<p>
Halo semuanya<br>
Ini adalah halaman WEB saya. <br>
<A hreff=”http://www.xbasicpro.com/pribadi.htm”>Klik di sini</a>untuk melihat data pribadi saya.
</BODY>
</HTML>


simpan dokumen di atas dengan nama utama.htm kemudian buatlah file lain dengan nama pribadi.htm, lalu ketik kode-kode HTML di bawah ini:

<HTML>
<HEAD>
<TITLE>Data Pribadi</TITLE>
</HEAD>
<BODY>
Nama: Hartoto <br>
Alamat: Jl. Denai gg. Muslimin 35 Medan <br>
Pekerjaan: WEB Developer<br><p>
<A hreff=”utama.htm”>klik di sini</a>untuk kembali
<A hreff=”pribadi.htm”>Klik di sini</a>untuk melihat data probadi saya.
</BODY>
</HTML>


2. Mengkaitkan Halaman WEB pada URL yang sama dan Dokumen yang Berbeda
contoh:

<HTML>
<HEAD>
<TITLE>Utama</TITLE>
</HEAD>
<BODY>
Halo Dunia!<p>
Halo semuanya<br>
Ini adalah halaman WEB saya. <br>
<A hreff=”pribadi.htm”>Klik di sini</a>untuk melihat data pribadi saya.
</BODY>
</HTML>

simpan dokumen di atas dengan nama utama.htm kemudian buatlah file lain dengan nama pribadi.htm, lalu ketik kode-kode HTML di bawah ini:

<HTML>
<HEAD>
<TITLE>Data Pribadi</TITLE>
</HEAD>
<BODY>
Nama: Hartoto <br>
Alamat: Jl. Denai gg. Muslimin 35 Medan <br>
Pekerjaan: WEB Developer<br><p>
<A hreff=”utama.htm”>klik di sini</a>untuk kembali
<A hreff=”pribadi.htm”>Klik di sini</a>untuk melihat data probadi saya.
</BODY>
</HTML>

simpan dengan nama pribadi.htm


3. Mengkaitkan Halaman WEB pada URL yang sama dan Dokumen yang Sama
contoh:

<HTML>
<HEAD>
<TITLE>Utama</TITLE>
</HEAD>
<BODY>
Halo Dunia!<p>
Halo semuanya<br>
Ini adalah halaman WEB saya. <br>
<A href="http://xbasicpro.com/latihan.htm#bab1">klik di sini </A> untuk mulai ke BAB I <BR>
Kode HTML adalah kode-kode pembagun halaman web<BR>
Kode tersebut biasanya dibentuk dalam file teks biasa<BR>
Membuat kode-kode HTML dapat dilakukan dengan teks editor biasa seperti notepad<BR>
Ada juga software khusus yang dirancang untuk<BR> memudahkan membangun kode-kode HTML seperti<BR> Microsoft FrontPage, Macromedia DreamWeaver<BR> lain-lain<BR>
<P>
Aplikasi pengolah kata Microsoft Word <BR>
juga dapat dipergunakan untuk <BR>
membuat dokument HTML.<BR>
Coba Lihat fasilitas Save AS WEB Page...<BR>
<P>
Halaman WEB yang dibentuk oleh kode-kode HTML<BR>
dapat menampilkan Teks, Gambar, animasi, Video, Suara<BR>
<P>
Dengan WEB pertukaran informasi menjadi lebih cepat<BR>















<A name=bab1>BAB I.  HTML Sebagai Pembentuk Halaman WEB</A>

</BODY>
</HTML>





Font
Speksifikasi dari Huruf (Font) : <FONT> tag ini menerangkan bahwa sebuah tulisan mempunyai beberapa pelengkap.
Pelengkapnya adalah: Ukuran (SIZE), FACE, dan Warna (COLOR)
Ukuran (SIZE): Menerangkan ukuran dari tulisan antara angka 1-7, tergantung kepada . angka 1 adalah yang terkecil dan angka 7 adalah yang terbesar.
FACE: Menerangkan huruf aktual yang Anda mau tampilkan jika huruf ini terinstal pada komputer pengguna. Anda diperbolehkan mempunyai 3 pilihan huruf, dengan dibatasi oleh koma. Semua batasan (spaces) pada nama huruf harus diganti dengan "garis bawah" ( _ ). Huruf yang Anda pilih harus ada pada komputer si pengunjung. Jika tidak, maka komputer akan lanjut ke pilihan huruf yang kedua (jika ada). Jika tidak ada huruf yang ditemukan, maka huruf yang menjadi default yang akan ditampilkan oleh komputer. Untuk menjamin gabungan tulisan itu agar terlihat adalah merubahnya menjadi grafik. Ini adalah huruf-huruf yang populer <FONT FACE="Helvetia, Times New Roman, Arial>
Warna (COLOR): Menerangkan warna dari huruf dengan namanya atau dengan angka RGB/HEX.

Contoh: <FONT SIZE="4" FACE="Arial" COLOR="Red"> Tulisan ini akan berbeda dengan yang lain. </FONT> Kode tersebut akan terlihat seperti ini: Tulisan ini akan berbeda dengan yang lainnya.
Huruf Dasar (Base Font): Tag ini ditempatkan disebelah kanan bawah dari BODY tag Anda dan tag ini menerangkan "default text" yang akan digunakan pada seluruh bagian dari halaman tersebut. Perlengkapan yang jadi satu bagian dari FONT tag dapat diterima. FONT tag tersebut akan me-overwrite setting dari BASEFONT.
Contoh: <BASEFONT SIZE=2 FACE="Arial" COLOR="red">
Font Tag lainnya:
Catatan: Semua tag di bawah ini juga memerlukan sebuah tag penutup.
<B> Tulisan Tebal
<I> Tulisan Italic
<U> Underscore
<S> Strong
<S> Strikeout Strikeout - menggambar sebuah garis sepanjang tulisan
<PRE> Preformatted Text
<SUP> Renders text sebagai superscript
<SUB> Renders test sebagai sub script
 
Membuat Tabel
Tabel adalah tag yang sangat penting dalam bahasa HTML. Untuk menjadi seorang web designer yang efektif Anda harus mengetahui dan mengerti bagaimana cara kerja dari sebuah tabel.
Ada tiga elemen pada tabel. tag dari <TABLE> tag dari row table <TR> dan tag dari sel tabel <TD>. Setiap Anda menambahkan sebuah tag <TR>, ini berarti Anda menambah 1 baris (row) ke bawah terhadap baris (row) berikutnya. Setiap Anda menambahkan sebuah tag <TD>, berarti Anda menambah sel baru disamping baris (row) yang sebelumnya. Elemen utama ada di bawah ini, bersama dengan pelengkapnya yang umum lainnya.
<TABLE> Pelengkapnya:
  • align - meratakan tabel ke kiri, ke tengah atau ke kanan.
  • bgcolor - menunjukkan warna background untuk semua tabel.
  • border - menunjukkan lebarnya batas (border) dalam satuan pixel.
  • cellpadding - luas yang tak terlihat diantara isi sel dan aktual dinding sel.
  • cellspacing - luas yang aktual (dalam pixel) diantara dua sel.
  • width - menunjukkan luas dari tabel dalam satuan pixel atau persentase
Contoh: <TABLE align="center" bgcolor="blue" border="2" cellpadding="5" cellspacing="2" width="90%">
<TR> Pelengkapnya:
  • align - meratakan isi dari baris (row) yaitu ke kiri, tengah atau ke kanan.
  • bgcolor - menunjukkan warna background dari baris (row).
  • valign - meratakan secara vertikal isi dari baris (row) ke atas, ke tengah atau ke bawah.
Contoh: <TR align="right" bgcolor="red" valign=top>
<TD> Pelengkapnya:
  • align - meratakan isi dari row yaitu ke kiri, tengah atau ke kanan.
  • background - tempat dari gambar background di dalam sel.
  • bgcolor - menunjukkan warna background untuk semua tabel.
  • height - menunjukkan tinggi dari sel dalam satuan pixel.
  • nowrap - perlengkapan untuk mengunci isi yang kita buat agar tetap pada garis yang sama.
  • valign - meratakan secara vertikal isi dari baris (row) ke atas, ke tengah atau ke bawah.

Latihan:  Membuat Tabel 3 baris 4 kolom
<TABLE  width="75%" border=1>
     <TR>
         <TD></TD>
         <TD></TD>
         <TD></TD>
         <TD></TD>
     </TR>  
     <TR>
         <TD></TD>
         <TD></TD>
         <TD></TD>
         <TD></TD>
     </TR> 
     <TR>
         <TD></TD>
         <TD></TD>
         <TD></TD>
         <TD></TD>
     </TR>
</TABLE>



ini adalah hasilnya:


 


Menyatukan Baris
<TABLE width="75%" border=1>
  <TR>
    <TD ROWSPAN=2></TD>
    <TD></TD>
    <TD></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD></TD>
    <TD></TD>
    <TD></TD>
  </TR>
  <TR>
    <TD></TD>
    <TD></TD>
    <TD></TD>
    <TD></TD>
  </TR>
</TABLE>


ini hasilnya (lihat baris yang disatukan)



Menyatukan Kolom
<TABLE width="75%" border=1>
  <TR>
    <TD COLSPAN=2></TD>< /FONT>
    <TD></TD>
    <TD></TD>
  </TR>
    <TR>
    <TD></TD>
    <TD></TD>
    <TD></TD> 
  </TR>
  <TR>
    <TD></TD>
    <TD></TD>
    <TD></TD>
    <TD></TD>
  </TR>
</TABLE>




ini hasilnya (lihat kolom yang disatukan)


 
Kembali   Lanjut   Daftar Isi

Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)