Ib-Awalludin Blog: Web (HTML&CSS)

hari ini saya cuma mw share aj tentang materi kuliah pemrograman web di kampus. . . yaitu TENTANG MEMBUAT WEB SEDERHANA MENGGUNAKAN HTML.. silahkan di simak...

1. buatlah sebuah folder dengan nama web di desktop. . .kenapa harus di desktop?? biar gampang aja dibukanya. . .hehehe

2. bukalah folder web yang tadi dibuat dan buatlah folder kembali dengan nama images. .ingat ya images bukan image. .karna folder images ini untuk kita menaruh/menyimpan gambar yang ingin kita tampilkan di halaman web kita.. jdi kalaw pakai nama folder lain atau misal image sja itu tidak akan terbaca/nampil di halaman web kita. . .ngerti yah. . .

3. buka folder images lalu ambil lah beberapa gambar atau foto (seterah mw ambilnya dimana) kalau sudah menemukan gambar/foto yg pas. . .pindahkan lah gambar/foto tersebut ke folder images. oiiia masukan 4 gambar sja kedalam folder images dn gantilah nama gambar" tersebut seperti gambar dibawah ini...

4. bukalah sebuah Notepad atau Notepad ++. . . lalu pastekan sourcecode di bawah ini

<html>
<head>
<title>ini web ku</title>
</head>
<body width="9000" background ="images/o.jpg" >
<center>

<table bordercolor="yellow"  width="900" height="470" cellpadding="8"
 border="5%">
<tr> 
<td colspan="2"><marquee behavior="alternate" bgcolor="#0099FF">
<center>
<img src="images/nunu.jpg" width="90" height="151"><font face="arial black" color="red" size="30">Ini Tugas Pertama Anda</font> 
<img src="images/nunu.jpg" width="90"></center>
</marquee>
</td> 
 
</tr>
<tr>
 <td width="200" valign="top"><p>
<font size="4pt" face="arial" color="yellow"><b>Klik gambar panah di bawah ini untuk ke halaman berikutnya
</font></p>
<p>
<font color="yellow" size="4pt" face="arial"><a target="blank" href="pertama.html"><img src="images/panah.jpg" width="170" height="123"></a></font></p>
</td>
 
 <td valign="top"><p>
<font size="4pt" color="red"><b>Ini Adalah halaman web sederhana menggunakan HTML</p>
</font>
 
 <p>
<font size="4pt" color="#00CCFF"><b>Mata kuliah semester 5</p>
</font>
 <ul>
<li style="color:#00CCFF;"><font size="4pt" color="#00CCFF"><b>Pemrograman Berorientasi Objek</font></li>
<li style="color:#00CCFF;"><font size="4pt" color="#00CCFF">Pemrograman Web</font></li>
</ul>
<font size="4pt" color="#00CCFF"">Mata kuliah Semester 6</font>
 <ul type="square" color="white">
<li style="color:#00CCFF;"><font size="4pt" color="#00CCFF"">Pemrograman Visual</font>
<li style="color:#00CCFF;"><font size="4pt" color="#00CCFF">Pemrograman Web 2</font>
   <br>
   <br>
   
   <table bgcolor="white" width="510" border="1" cellspacing="1" cellpadding="0">
<tr>
       <td width="192" rowspan="2"><font size="4pt">Mata kuliah Semester 5</font></td>
       <td width="309"><font size="4pt">Pemrograman Berorientasi Objek</font></td>
       </tr>
<tr>
       <td><font size="4pt" >Pemrograman Web</font></td>
       </tr>
<tr>
       <td rowspan="2"><font size="4pt" >Mata kuliah Semester 6</font></td>
       <td><font size="4pt" >Pemrograman Visual</font></td>
       </tr>
<tr>
       <td><font size="4pt">Pemrograman Web 2</font></td>
       </tr>
</table>
<br>
 </ul>
</td></tr>
</table>
</body>
</html>

lalu save lah di folder web yg sudah kita buat di desktop td dengan nama index.html

5. bukalah Notepad atau Notepad ++ lalu klik file -> new dan paste kan lah sourcecode di bawah ini. . .

<html>
<head>
<title>SELESAI</title>
</head>
<body background="images/o.jpg">
<center>
<br>
<br>
<br>
<br>
<br>
<font face="Cooper Black" size="7pt" color="yellow">SELAMAT !!! <br> ANDA TELAH MENYELESAIKAN TUGAS PERTAMA </font>
</body>
</html>

lalu save lah di folder web yg sudah kita buat di desktop td dengan nama pertama.html

Hasilnya akan jadi seperti ini. . . TARRRRAAAAAA :-)

ini untuk yg file index.html

ini untuk yang file pertama.html

Membuat Website ‘Pas’ di Segala Ukuran Layar

MEMBUAT WEBSITE SEDERHANA !!!

Membuat Form Input Biodata Dengan Html