Selasa, 22 Oktober 2013

HTML PEMULA

Assalamualaikum Wr.Wb....
Hari ini saya bongkar-bongkar lagi Direktori saya , ceritanya nih lagi bersih-bersih ..hehehe, eh ngeliat tutorial html dasar timbang di hapus ngk berguna lebih baik postingin aje kali-kali bermanfaat buat orang lain langsung aja ni . sebelumnya nih ane mau kasih tau sofware yang dipake,
  1. Notepad

1.  STRUKTUR DOKUMENT HTML

Berikut ini anda ketikkan di notepad dengan nama Struktur.html.

<HTML>
<HEAD>
<TITLE>Struktur Dokumen HTML</TITLE>
</HEAD>
<BODY>
Halo, apa kabar ?
</BODY>
</HTML>
Gambar Cara Penyimpanannya


2. Heading

<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>

3. Paragraf

<P ALIGN=”right”>
PHP ditulis dan diperkenalkan pertama kali sekitar tahun 1994 oleh
Rasmus Lerdorf melalui situsnya untuk mengetahui siapa saja yang
telah mengakses ringkasan online-nya. PHP merupakan salah satu
bahasa skrip yang terbilang baru dan tersedia secara bebas dan
masih memungkinkan untuk dikembangkan lebih lanjut. PHP dapat
diintegrasikan ke dalam web server, atau dapat berperan sebagai
program CGI yang terpisah.
Coba ganti <P ALIGN=”right”> dengan <P ALIGN=”center”> atau <P
ALIGN=”center”>
Blockquote
<BLOCKQUOTE>
PHP ditulis dan diperkenalkan pertama kali sekitar tahun 1994 oleh
Rasmus Lerdorf melalui situsnya untuk mengetahui siapa saja yang
telah mengakses ringkasan online-nya. PHP merupakan salah satu
bahasa skrip yang terbilang baru dan tersedia secara bebas dan
masih memungkinkan untuk dikembangkan lebih lanjut. PHP dapat
diintegrasikan ke dalam web server, atau dapat berperan sebagai
program CGI yang terpisah.
</BLOCKQUOTE>


4.Preformatted Text

<PRE>
------------------------
Nama : Abcdeugal-ogel
Alamat : siantar
Email : ogalogel@gmail.com
------------------------
</PRE>


5.Break

------------------------<BR>
Nama : Aadajase<BR>
Alamat : Bugurr<BR>
Email : ogalogel@gmail.com<BR>
------------------------<BR>


6.Font

<FONT SIZE=”1” COLOR=”red” FACE=”Arial”>Huruf Arial Ukuran
1</FONT><BR>
<FONT SIZE=”2” COLOR=”#00FF00” FACE=”Verdana”>Huruf Verdana Ukuran
2</FONT><BR>
<FONT SIZE=”3” COLOR=”#0000FF” FACE=”Tahoma”>Huruf Tahoma Ukuran
3</FONT><BR>
<B>Cetak Tebal</B><BR>
<I>Cetak Miring</I><BR>
<U>Cetak Garis Bawah</U><BR>

7.Link

----- buat file dengan nama: halaman1.html -----
<H1>Halaman 1</H1>
<A HREF=”halaman2.html”>Klik di sini</A> untuk pindah ke halaman
2.
----- buat file lain dengan nama: halaman2.html -----
<H1>Halaman 2</H1>
<A HREF=”halaman1.html”>Klik di sini</A> untuk pindah ke halaman

8.List

a.Ordered List

<OL TYPE=A>
<LI>Hasil polling pilihan scripting language/platform :
<OL TYPE=I>
<LI>PHP 57.2%
<LI>Perl 13.6%
<LI>ASP 12.8%
</OL>
<LI>Urutan empat sampai enam :
<OL TYPE=1 START=4>
<LI>JavaScript 4.6%
<LI>Java 2.6%
<LI>Flash 2.2%
</OL>
</OL>

b.Unordered List

<UL TYPE=square>
<LI>PHP 57.2%
<LI>Perl 13.6%
<LI>ASP 12.8%
</UL>


9.Gambar

<IMG SRC=”kupukupu.gif” ALT=”Ini gambar kupu-kupu”>

10.Tabel

<TABLE BORDER=1>
<CAPTION>Judul Tabel</CAPTION>
<TR>
<TH>Judul Kolom 1</TH>
<TH>Judul Kolom 2</TH>
</TR>
<TR>
<TD>Baris 1, Kolom 1</TD>
<TD>Baris 1, Kolom 2</TD>
</TR>
<TR>
<TD>Baris 2, Kolom 1</TD>
<TD>Baris 2, Kolom 2</TD>
</TR>
</TABLE>

11.Background

Background Warna

Pada tag <BODY> ditambahkan BGCOLOR=warna, contohnya :
<BODY BGCOLOR=”yellow”>

Background Gambar

Pada tag <BODY> ditambahkan BACKGROUND=nama_file, contohnya :
<BODY BACKGROUND=”kupukupu.gif”>



sekian dulu postingan Kumpulan Script kode HTML Dasar.



Jumat, 11 Oktober 2013

Buat Menu Utama Web Dengan HTML

Bissmilah....
     Dari dulu saya hanya menikmati modul-modul dari internet, sedikit malu juga sih taunya hanya download terus,, jadi akhir-akhir ini saya ceking bersih-bersih laptop ternyata sudah banyak latihan-latihan yang saya buat, ketimbang terbuang begitu saja, lebih indahnya jika kita berbagi ilmu dengan sesama , nah langsung saja kali ini saya akan berbagi ilmu membuat halaman utama sebuah website dengan HTML. Nah agar pekerjaan kita rapih walaupun hanya dengan html, dan agar kita terbiasa. alangkah baiknya kita menginstal kedalam laptop, PC kita 
 1. Xampp 1.7.4 

INI HASIL AKHIR NYA



       oke, Semua saya anggap sudah berhasil mengsinstalnya di dalam laptop masing-masing berikut gambarnya bagi yang sudah sukses

Gambar.Xampp
Selanjutnya Buka didalam system anda, kalau di tempat saya letaknya berada di C: , 

nah buat Folder di C: xampp/htdocs/ ,namanya utama ya.
oke didalam folder utama copykan gambar sebanyak 3 dan ubah namanya menjadi 2.jpg, 3.jpg, 4.jpg untuk gambarnya terserah ya.




Lalu buka notepadnya dan ketikkan lah kode berikut ini dengan penyimpannya 

C:xampp/htdocs/utama dengan nama index.html

<html>
<head>
<title>Halaman Utama</title>
</head>
<body>
<table border = 1 width= 80% height = 300 align="center" >
<tr>
<td colspan = 2 valign= middle width= 50% HEIGHT= 40 bgcolor="yellow" align="center">
SELAMAT DATANG DI AMIK TUNAS BANGSA </TD>
<tr>
<td valign = middle width = 10% height = 220 >
silahkan klik menu di sebelah kanan </td>
<td valign = middle width = 42% height = 220 bgcolor="pink"> <center><img src="2.jpg" width = 40 % height = 40> &nbsp &nbsp  

<img src="3.jpg"  width = 40 % height = 40> &nbsp &nbsp <img src="4.jpg" width = 40 % height = 40></center><br>
<center>profil &nbsp &nbsp gallery &nbsp &nbsp Ekstra</center></td>
<tr>
<td colspan = 2 valign= middle align= center width=50% HEIGHT= 40 bgcolor="#0066cc" >
<font face="Monotype Corsiva"> Terimah kasih atas kunjunganya </font></td>
</table>
</body>
</html>


Untuk Mengujinya buka Web Browser anda contohnya Mozilla Fire fox, ketikan di addres bar
Localhost/utama

Rabu, 27 Maret 2013



Tugas Pertemuan      : 1                               Nama              : Amri
Materi                         : Web Statis               Nim                 : 201001030082
PERBEDAAN WEB STATIS DAN WEB DINAMIS
Web Statis
  • Selalu menampilkan informasi yang sama kepada semua pengguna
  • Cepat dan mudah dalam pengaksesan bahkan oleh orang yang tidak punya pengalaman
  • Ideal untuk menunjukkan cara kerja sebuah situs
  • Cukup satu salinan untuk semua orang
Kekurangan
  • Susah dikelola jika situs semakin besar
  • Sulit untuk up to date
  • Kesulitan untuk personalisasi pengunjung
Web Dinamis
  • Perluasan kemampuan html
  • Menggunakan perangkat lunak tambahan
  • Perubahan informasi dalam halaman web dapat ditangani melalui peubahan data, bukan melalui perubahan kode program
  • Aplikasi web dapat dikoneksikan dengan database
  • Perubahan informasi menjadi tanggung jawab operator dan bukan tanggung jawab web master

Perbedaan Web Statis dan Web Dinamis 
  • Interaksi antara pengunjung dengan pemilik web 
Dalam web statis tidak dimungkinkan terjadinya interaksi antara pengunjung dengan pemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjung dengan pemilik web seperti memberikan komentar, transaksi online, forum dll
  • Adanya script language yang digunakan 
Web statis hanya menggunakan HTML saja, sedangkan web dinamis menggunakan bahasa pemrograman web seperti PHP atau ASP.
  • Penggunaan database 
Web statis tidak menggunakan database karena tidak ada data yang perlu disimpan dan diproses. Sedangkan web dinamis menggunakan database seperti mysql, oracle, dll untuk menyimpan dan memproses data
  • Content 
Content dalam web statis hanya diberikan oleh pemilik web dan jarang diupdate, sementara content dalam web dinamis bisa berasal dari pengunjung dan lebih sering diupdate
Study Kasus
Pada Tugas Kali ini kita akan membuat sevuah web statis dengan Template berbasis “.html” dengan Thema Fashion
Langkah Pertama
1.      Jalankan Xampp
2.      Buka Macromedia Dreamwevear, dan lalukan Manage Site Pastikan Sudah Berhasil
3.      Siapkan gambar-gambar pendukung , Seperti gambar Pakian, Header dan lain sebagainya.
4.      Desain Halaman Index Sedemikian Rupa, Hingga Selesai
5.      Kemudian Didalam Folder Htdocs Copy index.html, menjadi beberapa file baru dan ganti nama filenya menjadi pakaian.html, Celana Panjang.html, kaos.html, jaket.html
6.      Lalu kita buat link dari menu kategori agar Content/Isi mengalami perubahan
7.      Berikut Gambar-Gambarnya dibawah