Home

Home My Profile Lingkungan Bisnis STMIK AMIKOM Pemrograman Web
Membuat Homepage Web
<!DOCTYPE.html>

<html>

<head>

<title>Untitled Document</title>

</head>


<body>

<header></header>

<nav></nav>

<aside></aside>

<article></article>

<footer></footer>

</body>

</html>



Contoh:



<html>

<head>

<title>Untitled Document</title>

<style type="text/css">  


header {

width  : 980px;

height : 300ppx;

background-color : pink;

margin : auto;

left : 0; right : 0;

}

nav{

width : 200px;

height : 300ppx;

background-color : blue;

margin : auto;

left : 0; right : 0;

}

aside{

width : 200px;

height : 300ppx;

float : left;

margin-left : 175px;

background-color : green;

}

article{

width : 780px;

height : 300ppx;

float : left;

background-color : purple;

}

footer {

width : 980px;

height : 50ppx;

float : left;

background-color : yellow;

margin: auto;

left : 0; right : 0;

margin-left : 175px;

}

</style>

</head>

Membuat Frame Untuk Menampilkan Beberapa File Menjadi Satu Halaman di Web

<html>


<frameset cols="25%,50%,25%">

<frame src="Latihan 5.html">

<frame src="Latihan 6.html">

<frame src="Latihan 7.html">

</frameset>

</html>
Membuat Curiculum Vitae Menggunakan Form HTML

 <form>
<input name=”" type=”text” size=”30″ maxlength=”30″ value=”masdann3@gmail.com” />
</form>
<form>
<input type="checkbox" name="vehicle" value="Musik">Musik<br>
<input type="checkbox" name="vehicle" value="Olahraga">Olahraga<br>
<input type="checkbox" name="vehicle" value="Membaca">Membaca
</form>
<form>
<input name=”jenis” type=”radio” value=”jenis” /> <span> Laki – Laki</span>
<input name=”jenis” type=”radio” value=”jenis” />
laki-laki
</form>
<form>
<textarea cols=”20″ rows=”5″ name=”Komentar”></textarea>
</form>
<form>
<select id=”jumpMenu” name=”jumpMenu”>
<option value=”http://vevi.info/curiculum-vitae”>CV</option>
<option value=”http://vevi.info/pengenalan-css”>Belajar CSS</option>
<option value=”http://vevi.info/format-dasar-css/”>Tutorials CSS</option>
</select>
</form>
<form name="input" action="demo_form_action.asp" method="get">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
<form>
<fieldset>
<legend>Catatan Penting</legend>
Untuk belajar lebih lanjut akan dijelaskan pada pertemuan berikutnya.....
</fieldset>
</form>


Layout Curiculum Vitae

<html>
<head>
<title>Curiculum Vitae</title>
</head>
<body style= "background-color :violet; color: #F0F0F0;"></marquee>
<div style= "background-color :red" align="center"><h1>CURICULUM VITAE</h1>
</div>
<div style="margin-left:140;">
<h2>Identitas Pribadi</h2>
<img src="IMG_6040.JPG" width="169" height="222" align="left">
<table width="712" height="214">
<tr>
<td width="137" height="25">Nama </td>
<td width="577"> : Nur Wahid</td>

</tr><tr>
<td height="33">Tempat, tanggal lahir </td>
<td> : Wonosobo, 8 januari 1993</td>
</tr>
<tr>
<td height="36">Jenis Kelamin   </td>
<td> : Laki-laki</td>
</tr>
<tr>
<td height="33">Agama </td>
<td> : Islam </td>
</tr>
<tr>
<td height="38">Alamat </td>
<td> : Ds.Batunanta,RT/RW 08/04,Dsn.Bumi rejo, Kec.Belimbing. Kab.Melawi.Kalimantan Barat</td>
</tr>
<tr>
<td height="33">Email </td>
<td> : masdann3@gmail.com</td>
</tr>
</table>
<h2>Riwayat Pendidikan</h2>
<h4>Pendidikan Formal</h4>
<br/>
<table border="1" cellpadding="1" cellspacing="1.5" width="460" align="left">
<tr>
<td><b>Tingkatan Pendidikan<b/></td>
<td><b>LULUS</b></td>
</tr>
<tr>
<td>SDN 21 Batunanta</td>
<td>2005</td>
</tr>
<tr>
<td>MTs Al-Ma'rif III Sintang</td>
<td>2008</td>
</tr>
<tr>
<td>MA Al-Ma'rif Sintang</td>
<td>2011</td>
</tr>
<tr>
<td>STMIK AMIKOM YOGYAKARTA</td>
<td>Masih dalam perkuliahan semester 2</td>
</tr>
</table>
<br/>
</body>
</html>



Membuat Tabel dan Form (HTML)
  Step 1
<html>
<head>
<title>Membuat Tabel dan Form</title>
</head>
<body>
<form action="#" method="post">
username <input type="text" name="username"><br>
password <input type="password" name="password"><br/>
<input type="submit" value="Login"> | <input type="reset" value="batal"
</form>
</body>
</html>

Step 2
<html>
<head>
<title>Tabel dan Form</title>
</head>
<body>
<table border="1" align="center" width="500"
   <tr> <!-- baris-->
      <td>&nbsp;</td>      <!--kolom-->
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <tr> <!-- baris-->
      <td>&nbsp;</td>      <!--kolom-->
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
   <tr> <!-- baris-->
      <td>&nbsp;</td>      <!--kolom-->
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
</table>
</body>
</html>

Step 3
<html>
<head>
<title>Tabel dan Form</title>
</head>
<body>
<table border="1" align="center"
   <tr> <!-- baris-->
      <td width="91">Username</td>      <!--kolom-->
      <td width="9">:</td>
      <td width="200"> <input type="text" name="username"></td>
     </tr>
   <tr>
      <td width="91">Password</td>
      <td width="9">:</td>
      <td width="200"> <input type="password" name="password"></td>
   <tr>
</table>
</body>
</html>
Step 4
<html>
<head>
<title>Tabel dan Form</title>
</head>
<body>
<table border="1" align="center"
   <tr> <!-- baris-->
      <td width="91">Username</td>      <!--kolom-->
      <td width="9">:</td>
      <td width="200"> <input type="text" name="username"></td>
     </tr>
   <tr>
      <td width="91">Password</td>
      <td width="9">:</td>
      <td width="200"> <input type="password" name="password"></td>
   <tr>
      <tr>
      <td align="center" colspan="3">
      <input type="submit" value="Login"> | <input type="reset" value="batal">
      </td>
   </tr>
</table>
</body>
</html>

Step 5
<html>
<head>
<title>Tabel dan Form</title>
</head>
<body>
<table border="0" align="center">
   <tr> <!-- baris-->
      <td width="91">Username</td>      <!--kolom-->
      <td width="9">:</td>
      <td width="200"> <input type="text" name="username"></td>
     </tr>
   <tr>
      <td width="91">Password</td>
      <td width="9">:</td>
      <td width="200"> <input type="password" name="password"></td>
   <tr>
      <tr>
      <td align="center" colspan="3">
      <input type="submit" value="Login"> | <input type="reset" value="batal">
      </td>
   </tr>
</table>
</body>
</html>

Step 6
<html>
<head>
<title>Tabel dan Form</title>
</head>
<body>
<form action="#" method="post">
<table border="0" align="center">
   <tr> <!-- baris-->
      <td width="91">Username</td>      <!--kolom-->
      <td width="9">:</td>
      <td width="200"> <input type="text" name="username"></td>
     </tr>
   <tr>
      <td width="91">Password</td>
      <td width="9">:</td>
      <td width="200"> <input type="password" name="password"></td>
   <tr>
      <tr>
      <td align="center" colspan="3">
      <input type="submit" value="Login"> | <input type="reset" value="batal">
      </td>
   </tr>
</table>
</form>
</body>
</html>



Mengenali tag pada HTML

Dalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan <x> dan ditutup dengan </x> dimana x adalah perintah dari apa yang kita inginkan.

Macam macam tag pada HTML


ELEMEN DASAR
Jenis Dokumen
<HTML></HTML>
(terdapat pada awal dan akhir dari file HTML)
Judul
<TITLE></TITLE>
(harus selalu terdapat pada mukadimah)
Mukadimah (Header)
<HEAD></HEAD>
(keterangan umum, seperti judul dsb.)
Batang Tubuh
<BODY></BODY>
(isi dari halaman HTML)
  

FORMAT TAMPILAN
Huruf Tebal
<B></B>
(Bold)
Huruf Miring
<I></I>
(Italic)
Garis Bawah
<U></U>
(Underline - jarang digunakan)
Rata Tengah
<CENTER></CENTER>
(Center - berlaku untuk teks maupun gambar)
Huruf Kedip
<BLINK></BLINK>
(Blinking - tag terlucu sampai kini)
Ukuran Huruf
<FONT SIZE=?></FONT>
(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf
<FONT COLOR="#$$$$$$"></FONT>

Pilih Jenis Huruf
<FONT FACE="***"></FONT>





PEMISAH
Paragraf
<P></P>
(tag penutup seringkali tak diperlukan)
Align Text
<P ALIGN=LEFT|CENTER|RIGHT></P>
 
Pndah Baris
<BR>
(pindah ke baris berikut)
Garis Datar
<HR>
(Horizontal Rule)
Penataan Letak Garis
<HR ALIGN=LEFT|RIGHT|CENTER>
 
Tebal Garis
<HR SIZE=?>
(dalam satuan pixel)
Lebar Garis
<HR WIDTH=?>
(dalam satuan pixel)
Lebar Garis Persentasi
<HR WIDTH="%">
(dalam persentasi terhadap lebar halaman)




LATAR BELAKANG DAN WARNA
Latar Belakang Gambar
<BODY BACKGROUND="URL">
(Tiled Background)
Warna Latar Belakang
<BODY BGCOLOR="#$$$$$$"
(Background Color - urutan: merah/hijau/biru)
Warna Huruf Teks
<BODY TEXT="#$$$$$$">





TABEL
Rancangan Tabel
<TABLE></TABLE>
Garis Batas Tabel
<TABLE BORDER=?></TABLE>

Lebar Tabel
<TABLE WIDTH=?>
(dalam satuan pixel)
Lebar Tabel Persentasi
<TABLE WIDTH="%">
(dalam satuan persen terhadap lebar halaman)
Baris dalam Tabel
<TR></TR>
 
Penataan Letak Baris
<TR ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
 
Sel dalam Tabel
<TD></TD>
(harus ada dalam setiap baris tabel)
Penataan Letak Sel
<TD ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
 
Kepala Tabel
<TH></TH>
(Table Header - seperti data dengan Bold dan Center)
Penataan Letak Kepala Tabel
<TH ALIGN=LEFT|RIGHT| CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
 
Warna Kepala Tabel
<TH BGCOLOR="#$$$$$$">





Tidak ada komentar:

Posting Komentar

Langganan: Komentar (Atom)