DESAIN WEB

by Unknown 00.04 0 komentar

MODUL I


MENGANAL PERINTAH HTML

        

    HTML (Hyper Text Marque Languange) merupakan bahasa program atau script yang digunakan untuk menyusun dokummen-dokumen html dalammembuat sebuah web.

    Berikut script atau sintak yang digunakan besrta fungsinya.

  • <html>  : Untuk memulai sebuah HTML

  • <title> : Untuk memberi judul pada yang nantinya akan muncul di Tab Browser
  • <head>  : Untuk Bagian Header atau Atas

  • </head> : Untuk Penutup Header dan diawali dengan GARIS MIRING "/"
  • <body>  : Untuk Bagian Body atau Isi dalam HTML

  • </body> : Untuk Penutup/menutup Body dan diawali dengan GARIS MIRING "/"
  • </html> : Untuk Menutup Sebuah HTML dan diawali juga dengan GARIS MIRINg "/"

    Nah Itu kode-kode Dasar untuk membuat sebuah HTML
Dalam HTML dan masi banyak lagi.. brikut ini ada beberapa Tag yang saya ketahui dalam HTML.

  • <h1> : ini adalah Tag Heading, yang berlevel 1, selain <h1> ada juga <h2>, <h3>, <h4>, <h5>, <h6>
  • <b>  : (Bold) Fungsinya untuk membuat Huruf menjadi Tebal
  • <i>  : (Italic) Fungsinya untuk membuat Huruf menjadi Miring
  • <u>  : (Underline) Fungsinya untuk membuat huruf ber garis bawah
  • <p>  : Untuk membuat sebuah Paragraf
  • <br> : untuk Membuat sebuah baris baru atau enter
  • <hr> : untuk membuat sebuah garis Horizontal
  • <center> : untuk membuat tulisan atau gambar berada di tengah-tengah
  • <img src="gambar-anda.jpg atau Url gambar anda"> : fungsinya untuk memasukan sebuah gambar
  • <body bgcolor="black"> : Fungsinya untuk memberi warna untuk background atau latar belakang dan "black" bisa diganti sesuai keinginan anda, misalnya "red", "yellow"
  • <font color="red"> : Untuk mengatur warna Text dan ditutup dengan </font>
  • <font size="12"> : untuk mengatur Ukuran Sebuah Text dan ditutup dengan </font>
  • <font face="arial"> : Untuk mengatur jenis Font atau Text yang akan digunakan
  • <marquee> : untuk membuat sebuah text ataupun gambar bergerak

Jika menyimpan terserah kemudian beri simbol titik lalu HTML

Contoh :

SCRIPT  E:\PHOTO\Capture.JPG



MODUL II

REVIEW HTML  5 PART 2 ( FORM + TABLE)

HTML Form digunakan untuk memberikan data kesebuah server. Sebuah HTML Form dapat memiliki input – input element antara lain text field, checkbox, radio-button, submit button dan lain-lain. Sebuah form juga dapat mengandung select lists, textarea, fieldset, legend, dan element label

Tag yang digunakan untuk membuat HTML Form adalah<form>

Contoh:

  • password Field


  • Radio Button


  •    Drop Down list/combo box



  • Check box



  • Submit Button



  • Text Area




  • Html Tables




MODUL III

MEMBUAT HEADING, BREAK DAN PARAGRAF, STYLE

DOKUMEN

  • Heading

Heading sangatdiperlukandalamsuatudokumen. Karena heading disinimerupakan format tertentudalamsuatuparagrafdanbisa juga dikatakansebagaijuduldarisuatuparagraf.

Komponen Heading dalam HTML dimulaidengan<H1>, <H2>, <H3>, <H4>, <H5>dan<H6>. Jadiukurandari heading dapatdiaturdenganmenuliskansalahsatudarikomponentersebut. Janganlupasupaya heading tidakmerambahkedokumenlainnyadiperlukan TAG penutup. Misal<H1>JUDUL</H1>

Contoh :

<html>                       
    <head>
    <title>    LATIHAN MODUL 3</title>
    </head>
   
   
    <body>
        <h1>Company Profile</h1>
        <h2>Video Sothing </h2>
        <h3>Fhoto Digital </h3>
        <h4>Percetakan </h4>
        <h5>Rias Pengantin </h5>
        <h6>Transfer DVD/VCD</h6>
    </body>
   
</html>

Hasil :        


  • Break

Jikamenulisdokumen yang panjangtentudiperlukanpemenggalankalimatuntukmengefisiensikannya. Dalamdokumen HTML pun berlakusama. Dalam program HTML komponenatau TAG yang diperlukanuntukmemengalataumemotongkalimat yang panjangadalah break ditulisdengan<Br>

Contoh :

<html>                       
<title>                       
LATIHAN MODUL 3       
</title>
</head>
<body>
<h2>Persyaratan untuk menguasai ASP atau ASP.net</h2>
untuk mempelajari ASP atau ASP.net diperlukan latar belakan atau <br>
penguasaan HTML. karena tanpa menguasai HTML mustahil<br>
anda kakan mampu menguasai ASP dengan baik dan benar. karena ASP <br>
juga dibundel dalam HTML
</body>
</html>


  • Paragraf

<html>                       
<title>                       
LATIHAN MODUL 3       
</title>
</head>
<body>
<h2>Persyaratan untuk menguasai ASP atau ASP.net</h2>
untuk mempelajari ASP atau ASP.net diperlukan latar belakan atau <br>
penguasaan HTML. karena tanpa menguasai HTML mustahil<br>
anda kakan mampu menguasai ASP dengan baik dan benar. karena ASP <br>
juga dibundel dalam HTML

<P>
Setelah anda menguasai HTML anda juga dituntut mengerti IIS
<br>
(inernet information service). IIS ini umumnya di bundel dalam <br>windows 2000. tetapi jika anda menngunakan windows 95 atau <br>windows 98 di perlukan komponen PWS (personal web server)
</P>
</body>
</html>

  • Jenis Font

<html>                       
<title>                       
LATIHAN MODUL 3       
</title>
</head>
<body>
<B>
Ini Menggunakan Huruf TEbal</B>
<p>
<i>
Ini menggunakan Huruf miring </i>
<p>
<u>
ini menggunakan Huruf bergaris bawahi </u>
<p>
<strong>ini seperti huruf tebal</strong>
<p>
<COde>ini menyerupai huruf courier</Code>
<p>
<EM>ini menyerupai huruf italic</EM>
<p>
<TT>ini adalah Teletype write</TT>
<p>
<SAMP>ini menyerupai kode </SAMP>


</body>

</html>


  • Element Font


<html>

<Title>LATIHAN MODUL 3</title>

<body>
<Head><font color="green"><font size=+5>GLOBAL WARMING</font></font></head><P>

<font size=+3><font color="red"><P>Surabaya</font></p></font><p>Perubahan iklim berpengaruh pada pemanasan secara global. Dan ini tentunya<br>
akan membuat kehidupan manusia akan menjadi sangat terancam. Bukan hanya<br>
kita saja yang turut merasakan pengaruh buruknya tapi anak cucu kita pun akan<br>
mengalami hal yang sama dengan kita. maka dari itulah dituntut kesadaran semua pihak dalam hal ini.

</P>

</body>

</html>



  • Mengenal Bullet

<html>
    <head>
    <title>Datakom Lintas Buana</title>
    </head>
<body>
    <h3>Datakom Lintas Buana</h3>
<b>   
    Seri Operasi System   
</b>   
    <ul>
        <li> MIcrosoft Windows 2000 Profesional
        <li> Microsoft WIndows 2000 Server
        <li> instalasi dan KOnfigurasi Windows 2000
        <li> Melangkah dengan windows Me
        <li>Satu hari bersama windows XP
    </ul>
    </p>
<b>
seri microsoft office
</b>
    <ol>
        <li>microsoft word 2003
        <li>microsoft excel 2003
        <li>microsoft power point 2003
        <li>microsoft Accesss 2003
    </ol>
</body>

</html>




MODUL IV

MEMBUAT TABEL

  • Tabel Border

Border adalah yang akanmengelilingi data dalamtabel. Denganmenggunakanperintah<Table Border>. Tabel border bisadiaturketebalannya :

  • Border 0 :digunakanapabilatidakmenggunakan border
  • Border 1 :digunakanbilamenggunakannilai border standar
  • Border 2 :digunakanbilaukuran border tebal.

<html>
    <head>
    <title>Sonic Production</title>
    </head>
<body>
    <table>
    <table border>
<tr>
<td>kolom pertama
<td>kolom kedua
<td>kolom ketiga
</tr>
<tr>

<td> SATU
<td> DUA
<td> TIGA

</tr>
</table border>
<tabel>

</body>

</html>

  • Mengatur Tabel

<html>
<head>
<title>Datacom Lintas bUana</title>   
</head>

<body>
<caption><div align = center><b>DAFTAR MAHASISWA UMBO </caption></b></div>
<table>


<Table Border=1 width=75% Align=center>
<tr>

<th>NO

<th>NAMA

<th>FAKULTAS
<th><div align=right>JURUSAN</div>
<th>ALAMAT

</tr>

<tr>
<td>1.

<td>Pandu Setia nugraha
<td>MiPA
<td>Ilmu KOmputer

<td>KOmplek LIPI Cibinong

</tr>
<tr>

<td>2.

<td>Terra Surya KIP
<td>FKIP
   
<td>Biologi

<td>Sukabumi,Jampangkulon

</tr>

</table>

    </body>
</html>

  • Warna

<Html>   

    <table BGcolor=yellow>   
    <tr bgcolor=yellow>   
    <td>No   
    <td>Nama   
    <td>TempatLahir   
    <td>TanggalLahir   
    <td>Alamat   
</tr>   

    <tr bgcolor=greey>   
    <td>1   
<td>Tuntang   
<td>Sukabumi   
<td>6-6-1962   
<td>Cibinong   
</tr>   
<tr bgcolor=red>   

<td>2   
<td>Ganjar PJ   
<td>Jampangkulon
<td>1-1-1976
<td>Cibinong
</tr>
<tr Bgcolor=cyan>

<td>3
<td>Luly
<td>Cibadak
<td>1-10-1978
<td>CibadakSukabumi

</tr>
<tr bgcolor=Magenta>

<td>4
<td>Dwicahyono
<td>Cibaduyut
<td>9-9-1989
<td>Jakarta Selatan

</tr>

    </Table>
</html>


MODUL V
Gambar Dan Animasi

  • Membuat Gambar Didalam Tabel

<Html>
    <Table Border=1>
<TR>
    <TD>NO
    <TD>NAMA
    <TD>ALAMAT
    <TD>GAMBAR
</TR>
<TR>
    <TD Valign=TOP>01
    <TD VALIGN=TOP>NANA
    <TD VALIGN=TOP>MAGELANG
    <TD VALIGN=TOP>
<Img src="jingg.jpg" height="100" weidth="100">

</TR>
    <TR>
    <TD Valign=Top>02
    <TD Valign=Top>bumbum
    <td Valign=Top>Sanden, Magelang
    <td valign=top>
<Img src="Wood.jpg" height="100" weidth="100">
</tr>

    </table>
</Html>


  • Menggunakan Teks Dan Gambar

<html>

<Table Border=2>

<H2><Font size=+3>Menggunakan Teks dan Gambar<BR> </H2>

<image src="jingg.jpg" height="100" weidth="100"> <Align=Left Vspace=10><hspace=10><Font size=-1>

Dalam waktu dekat buku Microsoft Office Xpakan terbit. Di

samping itu juga akan terbit buku Share Point Team Service yang
sayat ulis.

Dalam waktu dekat buku Microsoft Office Xpakan terbit. Di

samping itu juga akan terbit buku Share Point Team Service yang

saya tulis.Dalam waktu dekat buku Microsoft Office Xpakan terbit. Di

samping itu juga akan terbit buku Share Point Team Service yang saya tulis.Dalamwaktudekatbuku Microsoft Office Xpakanterbit. Di

samping itu juga akan terbit buku Share Point Team Service yang

saya tulis.Dalam waktu dekat buku Microsoft Office Xpakan terbit.


</html>


MODUL VI
Hypel Link Atau Tautan

  • Button
                         
<html>
<h3>Menggunakan Tombol Submid dan Reset</h3>   
<form method=post action="tampil.asp">

NAMA   
    <input type=text Name=Nama1 size=30>
<br>   

ALAMAT
    <input type=text Name=Nama2 size=40>   
<br>

KOTA
    <input type=text Name=Nama3 size=40>
<p>
    <input type=submit name=Button1 value="kirim">
    <input type=reset name=button2 value="hapus">
   
    </form>
</html>

  • Checked
<html>
<h3>Menggunakan CheckedBox</h3>
<p>
<form method=Post action="Noactionyet"> Apaka kalian sudah LULUS SMP .. ???

<br>
<input type="radio" name="Jawaban" Value="Y">Ya <br>
<input type="radio" name="Jawaban" Value="T">Tidak <br>

    </form>
</html>

  • CheckedBox

<html>
<h3>Menggunakan CheckedBox</h3>
<p>
<form method=Post action="Noactionyet"> Microsoft Certified System Engineer adalah .. ???

<br>
<input type=checkbox name=Jawab1 Value="MCSE">MCSE <br>
<input type=checkbox name=Jawab2 Value="MCP">MCP <br>
<input type=checkbox name=Jawab3 Value="MCDBA">MCDBA <br>
<input type=checkbox name=Jawab4 Value="MMOUS">MMOUS <br>
<input type=checkbox name=Jawab5 Value="MOUS">MOUS <br>
    </form>
</html>

  • Membuat Password

<html>

<h3>Ketikkan Password</h3>

<form method=post action="http://localhost/E:/SMAN3/WEB/tampil.ASP">

User Name
    <input type=text name=Nama1 Size=30> <br>

Password
    <input type=Password name=Nama2 Size=8><p>

<input type=submit name=Button Value="Login">

    </form>

</html>

  • Mengenal Komponen Form

<htlml>
    <from>
<tr>
<h3>MENGENAL KOMPONEN FORM </h3>
<br>
</tr>
<tr>
<td>NAMA
<input type="text"name="Nama"size="20">
</tr>
<tr>
<br>
<td>ALAMAT
<input type="text"name="Nama"size="30">
</tr>
<tr>
<br>
<td>KETERANGAN
<input type="text"name="Nama"size="40">
</tr>
<tr>
<br>
</form>
</html>

  • Menggunakan Button

<html>

<h3>Menggunakan Type= BUtton</h3>

<form method=post action="http://localhost/E:/SMAN3/WEB/tampil.ASP">

NAMA
    <input type=text Name=Nama1 size=30><br>

ALAMAT
    <input type=text Name=Nama2 size=40><br>

KOTA
    <input type=text Name=Nama3 size=40><p>

<input type=submit name=Button1 Value="Kirim">
<input type=reset name=button2 value="hapus">
<input type=Button name=button3 value="Cari">

    </form>

</html>

  • Radio Button

<html>

    <h3>RADIO BUTTON</h3>

<p> Agama atau kepercayaan terhadap Tuhan Yang Maha Esa :<br>

<input type="radio"name="Agama" Value="I">Islam<br>
<input type="radio"name="Agama" Value="K">Kristen<br>
<input type="radio"name="Agama" Value="H">Hindu<br>
<input type="radio"name="Agama" Value="B">Budha<br>
<input type="radio"name="Agama" Value="P">Protestan<br>

</html>

  • Scroll Up dan Down

<html>   
<h3>Menggunakan Select dan Option</h3>   

Buku ini diterbitkan oleh   
<p>   
<select name="PENERBIT">   

    <option>Fajar Corporation Jakarta   
    <option>Hayat Raharja   
    <option>Luly lala   
    <option>Mahardika
    <option>Salam Kangen
    <Option Selected>Datakom Lintas Buana Jakarta
    <Option>Kucar Kacir Bogor
    <Option>Angin Ribut Sukabumi
    <Option>Maju Mundur Cianjur
    <Option>Maju Trus Bandung
    <Option>Mundur Bae Cianjur
   
    </select>
</html>


  • Select dan Option

<html>   

<h3>Menggunakan Select and option</h3>
<h4>Buku ini diterbitkan oleh </h4>   
<br>   
<select name="PENERBIT">   
    <Option>Fajar Corporation Jakarta
    <Option Selected>Datakom Lintas Buana Jakarta
    <Option>Kucar Kacir Bogor
    <Option>Angin Ribut Sukabumi
    <Option>Maju Mundur Cianjur
    <Option>Maju Trus Bandung
    <Option>Mundur Bae Cianjur
   
    </select>
</html>

  • Teks Area

<html>

<h3>Menggunakan Text area atau Memo</h3>
<form method=post action=noactionyet>
<textarea name=Memo Rows=10 Cols=50> Ketikkan Data Anda dikolom ini!!

    </textarea>
</html>



MODUL VII

Background Dan Marquee

  • Backround dengan image

<html>

<body background="ku.jpg">

</html>

  • Background Color

<html>

<body text="blue"bgcolor="green"><H1>SELAMAT DATANG</h1>
</html>

  • Dengan Pixel

Marquee width="150">Teks bergerak selebar 150px</Marquee>

  • Dengan Prosentase

<Marquee direction="up" height="75"><p>blog a</p><br><p>blog b</p><br><p>blog c</p></Marquee>


  • Jeda Antara setiap gerakan

<Marquee scrolldelay="40">scrolldelay="40", diabaikan dan didefinisikan dengan nilai 60</Marquee><Marquee scrolldelay="40" truespeed="true">scrolldelay="40", dengan truespeed="true"</Marquee>

  • Kecepatan Gerakan

Kode Marquee untuk angka 2 (scrollamout="2") adalah:

<Marquee scrollamount="2">Keceptan gerak teks dengan scrollamout="2"</Marquee> Kode Marquee untuk angka 6 (scrollamout="6") adalah:

<Marquee scrollamount="6">Kecepatan gerak teks dengan scrollamout="6"</Marquee>

  • Marquee

<Marquee direction="left">Teks bergerak dari kiri ke kanan</Marquee>

  • Perilaku Gerakan

<Marquee behavior="scroll">Teks bergerak dari kanan ke kiri</Marquee>

  • Warna Latar Belakang

<Marquee bgcolor="#ff0000">Latar belakang teks menggunakan nomor hexadecimal untuk red</Marquee>

MODUL VIII

MEMBUAT MENU

  • Last Verse

<html>
<body text="Blue" bgcolor="yellow"> <H3>
<div Align=center>
DATAKOM LINTAS BUANA</H3> <font color="black">
<p>
<a href=menu1.html target=F2>Buku Baru<br></a>
<a href=menu2.html target=F2>Akan Terbit<br></a>
<a href=menu3.html target=F2>Sudah Beredar<br></a>
<a href=menu4.html target=F2>Distributor<br></a>
<a href=menu5.html target=F2>Buku Terlaris<br></a>
<a href=menu6.html target=F2>KOmputer Untuk Anak<br></a>
</html>

  • Verse 1 lintas buana

<html>
<H3>
<div Align=center>
<font color="red">DATAKOM LINTAS BUANA
</H3>
<font color="black">
<p>
<a href=pilih1.html>Tentang Datakom<br></a>
<a href=pilih2.html>Redaksi Datakom<br></a>
<a href=pilih3.html>Buku Terbaru<br></a>
<a href=pilih4.html>Sudah Terbit<br></a>
<a href=pilih5.html>Divisi Marketing<br></a>
<a href=pilih6.html>Divisi Keuangan<br></a>
</html>

  • Verse 2 data lintas buana yellow background

<html>
<body text="Blue" bgcolor="yellow">
<H3>
<div Align=center>
DATAKOM LINTAS BUANA</H3>
<font color="black">
<p>
<HR>
<p>
<a href=menu1.html>Tentang Datakom<br></a>
<a href=menu2.html>Redaksi Datakom<br></a>
<a href=menu3.html>Buku Terbaru<br></a>
<a href=menu4.html>Sudah Terbit<br></a>
<a href=menu5.html>Divisi Marketing<br></a>
<a href=menu6.html>Divisi Keuangan<br></a>
</html>

  • Verse 3

<html>
<body text="black" bgcolor="yellow">
<H1>
<marquee>SELAMAT DATANG </marquee></h1>
<center>
<HR>
<h1>
DATAKOM LINTAS  JAKARTA</h1>
<hr>
Datakom LIntas Buana adalah Penerbit buku Komputer Bermutu.
<br>
Buku yang diterbitkan oleh Datakom LIntas Buana sebagian besar adalag best seller
</html>

  • Verse 4

<html>
<body text="Blue" bgcolor="yellow">
<H3>
<div Align=center>
DATAKOM LINTAS BUANA</H3>
<font color="black">
<p>
<HR>
<p>
<a href=menu1.html>Tentang Datakom<br></a>
<a href=menu2.html>Redaksi Datakom<br></a>
<a href=menu3.html>Buku Terbaru<br></a>
<a href=menu4.html>Sudah Terbit<br></a>
<a href=menu5.html>Divisi Marketing<br></a>
<a href=menu6.html>Divisi Keuangan<br></a>
</html>

TERIMAKASIH.!!!!!!
Continue Reading

About author: Unknown

Cress arugula peanut tigernut wattle seed kombu parsnip. Lotus root mung bean arugula tigernut horseradish endive yarrow gourd. Radicchio cress avocado garlic quandong collard greens.

0 komentar:

Langganan: Posting Komentar (Atom)