Cara Membuat Desain Website Dengan Notepad++

Cara Membuat Desain Website Dengan Notepad++

 

Pengenalan 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.

 

Daftar 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>



 

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="#$$$$$$">


 

A.    Dasar dasar HTML

1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan code di bawah ini:



Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 1 berikut:

 

Cara Membuat Desain Website Dengan Notepad++ 

 

2. Mengatur paragraf texs, buka notepad++ kemudin ketikan code dibawah ini:

 


Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 2 berikut:

 

Cara Membuat Desain Website Dengan Notepad++ 

 

 

3. Mengatur ukuran huruf, buka notepad++,  kemudian ketikan code dibawah ini:

 

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 3 berikut:

 

Cara Membuat Desain Website Dengan Notepad++ 

 

Mungkin segini dulu ya guys, mohon maaf apa bila ada kekurangan dalam penjelasannya. Tunggu untuk kelanjutannya ya!

Post a Comment

0 Comments