Membuat Desain Website Berbasis HTML Dengan Notepad++

07.42

Membuat Desain Website Berbasis HTML Dengan Notepad++

dimana x adalah perintah dari apa yang kita inginkan.

· Daftar Tag Pada HTML

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

FORMAT TAMPILAN
Huruf Tebal		(Bold)
Huruf Miring		(Italic)
Garis Bawah		(Underline - jarang digunakan)
Rata Tengah		(Center - berlaku untuk teks maupun gambar)
Huruf Kedip		(Blinking - tag terlucu sampai kini)
Ukuran Huruf		(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf
Pilih Jenis Huruf

PEMISAH
Paragraf		(tag penutup seringkali tak diperlukan)
Align Text
Pndah Baris		(pindah ke baris berikut)
Garis Datar		(Horizontal Rule)
Penataan Letak Garis
Tebal Garis		(dalam satuan pixel)
Lebar Garis		(dalam satuan pixel)
Lebar Garis Persentasi		(dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA
Latar Belakang Gambar		(Tiled Background)
Warna Latar Belakang		(Background Color - urutan: merah/hijau/biru)
Warna Huruf Teks

VALIGN=TOP|BOTTOM|MIDDLE>

TABEL

Rancangan Tabel

Garis Batas Tabel

Lebar Tabel

(dalam satuan pixel)

Lebar Tabel Persentasi

(dalam satuan persen terhadap lebar halaman)

Baris dalam Tabel

Penataan Letak Baris

Sel dalam Tabel

(harus ada dalam setiap baris tabel)

Penataan Letak Sel

VALIGN=TOP|BOTTOM|MIDDLE>

Kepala Tabel

(Table Header - seperti data dengan Bold dan Center)

Penataan Letak Kepala Tabel

VALIGN=TOP|BOTTOM|MIDDLE>

Warna Kepala Tabel

A. Dasar dasar HTML

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

My First HTML Project

BGCOLOR=“Green” TEXT=“Red”>

WELCOME TO MY WEBSITE

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

Gambar 1. Judul Tab Halaman

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

Tag P, Br dan Hr

Ini adalah paragraf pertama, yang berisi 3 baris. Baris satu, dua dan tiga.

Ini adalah paragraf kerdua, yang berisi garis horizontal

Ini adalah garis horizontal.

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

Gambar 2. Mengatur Paragraf

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

Tag Heading

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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

Gambar 3. Ukuran Huruf

4. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:

format tulisan</titele></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"></head></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><body></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;">teks normal <br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><small> teks small </small><br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><big> teks big</big><br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><b> teks tebal </b><br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><i> teks miring </i><br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><u> teks bergaris bawah </u><br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;">Contoh superscript : x <sup>2</sup><br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;">Contoh subscript : H<sub>2</sub>O<br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><strike> Ini teks tercoret </strike><br></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><font size = 5 face = verdana></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;">menggunakan tag font</span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"></font></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"></body></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><body BGCOLOR ="#00FF00"></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"></html></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt;"> <br /></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <span style="font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 115%;">Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:</span></div> <div align="center" class="MsoNormal" style="margin-left: 49.65pt; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0WAm8PO6tHCqxGufDhjBZFx4tV5CuSMO0mfakewYAkQQIgzl7S2jvxNZy9fHVujxARt4L0Ew7PeV189kDsY9YEJVZPdSg13zyZHFQbFyFy7POo28CdZcQGDvCNQQZ9FsnCaRaE5Y9a0d/s1600/format+tulisan.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgT0WAm8PO6tHCqxGufDhjBZFx4tV5CuSMO0mfakewYAkQQIgzl7S2jvxNZy9fHVujxARt4L0Ew7PeV189kDsY9YEJVZPdSg13zyZHFQbFyFy7POo28CdZcQGDvCNQQZ9FsnCaRaE5Y9a0d/s320/format+tulisan.png" width="320" /></a><span style="font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 115%;"> </span></div> <div align="center" class="MsoNormal" style="margin-left: 49.65pt; text-align: center;"> <span style="font-family: "Times New Roman","serif"; font-size: 12pt; line-height: 115%;">Gambar 4. Format tulisan</span></div> <div align="center" class="MsoNormal" style="margin-left: 49.65pt; text-align: center;"> <br /></div> <div class="MsoListParagraphCxSpFirst" style="line-height: normal; margin: 0cm 0cm 0pt 39.3pt; text-align: justify; text-indent: -18pt;"> <span style="font-family: "Times New Roman","serif"; font-size: 12pt;">5.<span style="font-size-adjust: none; font-stretch: normal; font: 7pt/normal "Times New Roman";"> </span></span><span style="font-family: "Times New Roman","serif"; font-size: 12pt;">Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:</span></div> <div class="MsoListParagraphCxSpMiddle" style="margin-left: 39.3pt; text-align: justify;"> <br /></div> <div class="MsoListParagraphCxSpMiddle" style="margin: 0cm 0cm 1pt 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><html></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin: 0cm 0cm 1pt 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"><head></span></div> <div class="MsoListParagraphCxSpMiddle" style="margin: 0cm 0cm 1pt 39.3pt; text-align: justify;"> <span style="font-family: "Courier New"; font-size: 10pt; line-height: 115%;"> <title> From komentar

Silahkan Berkomentar :

Nama

Komentar

value=submit>

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

Gambar 5. From komentar

6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

warna-warna

Hijau

Kuning

Merah

Abu-abu

Biru

Orange

Cokelat

Biru muda

Merah muda

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

Gambar 6. Tabel

B. Hyperlink

1. Membuat hyperlink kehalaman web lain, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

Judul tab

Ini hyperlink ke wordpress

Wordpress

Klik dan masuk ke yahoo Yahoo

Masuk ke facebook anda

Facebook

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

Gambar 7 link halaman web lain

2. Membuat hyperlink antar bagian dalam web, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

Judul tab

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

Gambar 8. Link Antar Bagian Dalam Web

C. Membuat Website Sederhana

1. Membuat halaman login pada website, buka notepad++, kemudin ketikan atau copy saja code dibawah ini:

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)

Email Atau telepon:

Alamat:

Tanggal Lahir

Jenis Kelamin

Pria

Wanita

..... Dalam penggisiannya harus jujur yaa, jangan bo'onk :) ......

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.

Hasilnya seperti pada gambar 9 berikut:

Gambar 9. Halaman login

2. Membuat halaman awal, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

Home

~ Selamat datang di website pertama saya ~

~Dasar-dasar Membuat Website Berbasis HTML~

Nah, anda pasti sudah banyak melihat tutorial tutorial HTML yang ada di ilmuwebsite.com. Tapi, masih ada 1 kekurangan, tutorial HTML untuk tingkat pemula???

Nggak ada kan??? nah, maka dari itu, saya, Rian hidayat, akan menjelaskan bagaimana website di bangun menggunakan tag-tag HTML, dan ini penulis sediakan untuk pemula. Tapi sebelum itu,? ada yang perlu diketahui.

tag <>

digunakan untuk menuliskan sintak, ada dua jenis, yaitu tag container dan tag biasa.

Tag container adalah tag yang berisi text yang akan ditampilkan

setelah tag ditutup. Contoh: <td> text yang ditampilkan

</td>.

Tag biasa, yahh…tag aja, contoh <BR> (break). <br> kaga perlu ditutup oleh tag </br>, tapi jika sintak yang digunakan tag container, contoh: <h1>, yah mesti ditutup dengan </h1>.

Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum sintaknya, contohnya: <td> </td>

Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: <body bgcolor=”red”> </body>. atau <input type=”text”>.

LANGKAH 1

MEMBUKA NOTEPAD.

LANGKAH 2

MENGETIKKAN SINTAK/SYNTAX.

Berikut ini adalah syntax dasar yang membentuk suatu HTML.

pertama, ketikkan
<html>

tekan enter, kemudian ketik
<head>
Dalam container head, kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa mengetikan sintak <title> judul halaman web </title>. Untuk sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi seperti ini:
<head> <title> judul halaman web </title> </head>

Kemudian ketikkan <body>. Tag body merupakan badan/tubuh/inti dari halaman web, tampilan web yang kita lihat itu berasal dari <body>.
Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:

<html>
<head>
<title> Judul Halaman Web </title>

</head>

<body>

</body>
?

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML??? Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
<body>
Contoh text yang ditampilin di halaman web, By: Rian Hidayat
</body>
terus, jika sudah, ketikkan </html>, script lengkapnya seperti ini :
<html>
<head>

<title> Judul Halaman Web </title>

</head>
<body>
Contoh text yang ditampilkan di halaman web, By: Rian Hidayat

</body>

</html>

kalo udah, sekarang save dengan nama dasarHTML.

kalo udah disave, buka data yang tadi di save.
?
Pada bagian ini, kalian mungkin akan bingun,g karena html yang tadi disave dan cape cape diketikkan, ternyata gagal. Malah yang terbuka adalah file di notepad/wordpad. tau kenapa???
Karena ketika men-save, file tersebut di save dalem bentuk TXT, bukan HTML. Nah cara men-save dalem bentuk HTML yaitu: ketika mensave, ada satu tempat di bawah tempat kita menulis nama file,? yakni Save As Type. Silahkan ubah dari text document(*.txt) menjadi all files, ketika menulis nama, di akhir di berikan extensi .html, contoh: dasarHTML.html.

TUTORIAL HTML

Cara membuat tulisan bergerak

Cara membuat from komentar

Cara membuat halaman login

s ~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, anda bisa menganti gambar-gambarnya sesuai yang anda inginkan, dan anda juga dapat menganti background dan animasi yang sesuai dengan anda.

Hasilnya akan seperti pada gambar 10 berikut:

Gambar 10. Halaman awal

3. Membuat data pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

Profilku

~ Selamat datang di website pertama saya ~

PROFILKU

NAMA

: Rian Hidayat

ALAMAT

: Weru, Sukoharjo

TTL

: Sukoharjo, 09-November-1993

PEKERJAAN

: Mahasiswa

HOBY

: Tidur

NO.TELPONE

: 085728282066

EMAIL

: hrian89@gmail.com

NAMA

: Bram Putra P.

ALAMAT

: Laweyan, Surakarta

TTL

: Surakarta, 13-April-1992

PEKERJAAN

: Mahasiswa

NO.TELPONE

: XXXXXXXXXXXXXX

TUTORIAL HTML

Cara membuat tulisan bergerak

Cara membuat from komentar

Cara membuat halaman login

~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~

Hasilnya akan seperti pada gambar 11 berikut:

Gambar 11. Membuat data pribadi

4. Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code dibawah ini:

Profilku

~ Selamat datang di website pertama saya ~

Galery

Album Kegiatan Teknisi

TUTORIAL HTML

Cara membuat tulisan bergerak

Cara membuat from komentar

Cara membuat halaman login

~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~

Hasilnya akan seperti pada gambar 12 berikut:

Gambar 12. Galery

5. Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian ketikan atau copy saja code dibawah ini:

Cara membuat tulisan bergerak

~ Selamat datang di website pertama saya ~

Tutorial Membuat Tulisan Menjadi Bergerak

Marquee tag digunakan untuk menggerakkan sama ada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkan beberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisan anda.

Teks Bergerak Ke Bawah...

Teks Bergerak Ke Kanan...

Teks Bergerak Ke Kiri...

Teks Bergerak Ke Atas...

1. Seperti yang anda lihat di atas, Teks ini bergerak ke kiri dan ke kanan. Anda boleh gunakan kode dibawah ini untuk melakukan tricks tersebut.

<marquee direction="

right">This text scrolls right...</marquee>

Apa yang anda perlukan, gantikan teks yang bewarna kuning kepada arah mana anda akan teks tu Scroll. Anda boleh pilih sama ada - up, down, right, left.

Teks ini Macam Ferari..

2. Anda boleh mengubah kelajuan teks dengan menggunakan kod di bawah ni.

<marquee scrollamount="30">Teks ni Macam Ferari..</marquee>

Ubah nomer yang bewarna Oren untuk mengubah kelajuan.

Teks ini seperti Siput..

<marquee scrolldelay="300">Teks ini seperti Siput..</marquee>

3. Ubah nomer yang bewarna hijau untuk mengubah kelajuan.

Teks ini Melantun

Untuk membuatkan teks anda melantun seperti di atas ini. Gunakan kode di bawah.

<marquee behavior="alternate">Teks ini Melantun</marquee>

4. Ok. Seterusnya cara untuk menetapkan ruangan untuk Marquee bergerak

Teks ini bergerak dalam kelebaran 200 width

<marquee width="200">Teks ini bergerak dalam kelebaran 200 width</marquee>

Anda boleh tentukan width mengikut kesukaan anda dengan menukarkan nomer yang bewarna hijau.

5. Seterusnya saya akan menggabungkan beberapa kode Marquee ini bersama.

Teks Paling Awesome

Ini merupakan kode yang saya gunakan untuk membuat teks bergerak seperti yang di atas.

<marquee behavior="alternate" width="400" scrollamount="30">Teks Paling Awesome</marquee>

Sekarang, anda boleh coba dalam blog anda, anda juga boleh gabungkan kode-kode marquee ini mengikut kesukaan anda masing-masing.

TUTORIAL HTML

Cara membuat tulisan bergerak

Cara membuat from komentar

Cara membuat halaman login

~ Meskipun banyak kendala dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yang terbaik ~

Hasilnya akan seperti pada gambar 12 berikut:

Gambar 13. Artikel tulisan bergerak

Read On 0 komentar