keJawen For GUNDAR: Desain website sederhana

Membuat website pribadi

Disini saya akan menjelaskan dimana saya membuat web pribadi untuk bahan pengumpulan tugas kuliah.

Langsung saja untuk pertamanya saya mambuat sebuah folder untuk mempermudah dalam pengumpulan data pada web saya, antara lain;

1. Folder images

2. Index htmlnya

3. Dll

Berikutnya untuk membuat index htmlnya saya mengunakan notepad++ dengan menyimpan dengan nama index.html. pada listing program paling atas untuk membuat judul dengan bergeser ke kanan sendirinya saya mengunakan kode

“<hr size="4"noshade color="#000000"align="justify">

<h1><i><marquee>sugeng kaweroh teng web agus</marquee></h1>

Hasilnya ;

Kemudian untuk menentukan background saya mengunakan

Untuk menubar saya mengunakan

<tr>

<td> <a href="http://studentsite.gunadarma.ac.id/login.php"

target="_blank">     studentsite      </a></td>

<td><A HREF = "http://aguskanangsubekti1.blogspot.com/"

target="blank">      blog      </A></td>

<td><a href = materi>      materi kuliah      </a></td>

<td><a href = tugaspbo>     tugas     </a></td>

</tr>

Dan hasilnya berupa kotak menu di atas foto saya. Berikut listing program yang lain bias saya ketikan dengan kode kode html berikut ini ;

Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halamanHTML dengan software instant seperti Dreamweaver dll.

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :

Belajar

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :

Belajar

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :

Belajar

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :

<b><i><u>Belajar</u></i></b> hasilnya seperti :

Belajar

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :

Belajar

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span>hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

Membuat Huruf Besar semua (uppercase) gunakan kode :

<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :

BELAJAR

Membuat Huruf Small caps gunakan kode:

<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:

Belajar

Membuat Huruf Subscribe / kecil di bawah gunakan kode:

<p>4<sub>2</sub></p>hasilnya seperti ini:

4₂

Membuat Huruf Superscribe / pangkat gunakan kode:

<p>4<sup>2</sup></p> hasilnya seperti ini:

4²

Membuat Huruf bergaris atas gunakan kode:

<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:

Belajar mengganti huruf

Membuat Huruf bergaris tengah gunakan kode:

<strike>Belajar</strike> hasilnya seperti ini:

~~Belajar~~

Menentukan jenis huruf gunakan kode:

<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan ukuran huruf gunakan kode:

<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:

Belajar

Menentukan warna huruf gunakan kode:

<p style="color: green; >Belajar</p> hasilnya seperti ini:

Belajar

Membuat bullet dot bolong gunakan kode:

<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1

DOT 2

DOT 3

Membuat bullet dot kotak gunakan kode:

<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Membuat bullet dot bulat gunakan kode:

<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>

hasilnya seperti ini:

DOT 1
DOT 2
DOT 3

Mengatur posisi bullet gunakan kode:

<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>

hasilnya seperti ini:

· DOT 1

· DOT 2

· DOT 3

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:

<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>

hasilnya seperti ini:

Belajar

Membuat tabel border solid gunakan kode:

hasilnya seperti :

Text

Membuat tabel border dot gunakan kode:

<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border dashed gunakan kode:

<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border groove gunakan kode:

<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Ridge gunakan kode:

<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Insert gunakan kode:

<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat tabel border Outset gunakan kode:

<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>

hasilnya seperti ini:

Text

Membuat Tabel Biasa gunakan kode :

<table border="1"width="200"><td>Text</td></table>

hasilnya seperti:

Text

Membuat Tabel berwarna gunakan kode :

<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

Membuat Tabel berwarna tak berbingkai gunakan kode :

<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

Kemudian setelah jadi index.htmlnya saya langsung hosting dengan cara yang saya dapatkan dari teman : berikut turtolnhya

http://www.mediafire.com/?2im6ap9j723l5a4

dan setelah saya hosting sampai nungu dua hari baru bisa tersambung ke web akhirnya berikut website saya yang sudah jadi belum tahap pengembangan;

http://agusjawen.keren.la/

sehingga saya dapat memperoleh kesimpulan website yang baik menurut saya adalah sebuah website yang mudah dimengerti oleh para pembaca dan untuk saya pribadi yang bias dikatakan sebagai tahap pembelajaran sebaiknya mengunakan domain atau cara hosting yang free terlebih dahulu saja.

keJawen For GUNDAR

Kamis, 14 Februari 2013

Desain website sederhana

Tidak ada komentar:

Posting Komentar

Mengenai Saya