Membuat Desain Website Berbasis HTML Dengan Notepad

5/28/2018 Membuat Desain Website Berbasis HTML Dengan Notepad

http:///reader/full/membuat-desain-website-berbasis-html-dengan-notepad-562450ac2

Membuat Desain Website Berbasis HTML Dengan Notepad++

Pengenalan Tag Pada HTMLDalam HTML tag merupakan code sekaligus perintah dimana kita dapat mengatur

tampilan yang kita inginkan. Tag pada HTML selalu diawali dengan dan ditutup

dengan dimana x adalah perintah dari apa yang kita inginkan. Daftar Tag Pada HTML

ELEMEN DASARJenis Dokumen (terdapat pada awal dan akhir dari

file HTML)

Judul (harus selalu terdapat pada

mukadimah)

Mukadimah(Header)

(keterangan umum, seperti juduldsb.)

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



Garis Batas

Tabel

Lebar Tabel (dalam satuan pixel)

Lebar Tabel

Persentasi

(dalam satuan persen

terhadap lebar halaman)

Baris dalamTabel

Penataan Letak

Baris

Sel dalam Tabel (harus ada dalam setiap

baris tabel)

Penataan Letak

Sel

Kepala Tabel (Table Header - seperti

data dengan Bold danCenter)

Penataan Letak

Kepala Tabel

Warna Kepala

Tabel

A. Dasar dasar HTML1. Membuat judul tab dalam halaman web, buka notepad++ terlebih dahulu, kemudian ketikan

code dibawah ini:

My First HTML Project

WELCOME TO MY WEBSITE

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

Gambar 1. Judul Tab Halaman
http://1.bp.blogspot.com/-xTscPfRjoMw/USHO22PVGqI/AAAAAAAAAEE/8SYp6DeCxdw/s1600/welcome.png



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

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

http://4.bp.blogspot.com/-IGJRk62Idqk/USHPvsQmPhI/AAAAAAAAAFM/7d9uXKmsdCg/s1600/paragraf.png



Gambar 3. Ukuran Huruf

4. Mengatur format texs, Buka notepad++, kemudian ketikan code dibawah ini:format tulisanteks normal
teks small
teks big
teks tebal
teks miring
teks bergaris bawah
Contoh superscript : x 2

Contoh subscript : H2O
Ini teks tercoret
menggunakan tag fontLangkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau

http://1.bp.blogspot.com/-1JaotESmsZg/USHPjeYO3KI/AAAAAAAAAEk/To21v98ue9U/s1600/format+tulisan.pnghttp://4.bp.blogspot.com/-flp7qBC_K_A/USHPWrdZsQI/AAAAAAAAAEM/zHKiwJoGyp4/s1600/Header.pnghttp://1.bp.blogspot.com/-1JaotESmsZg/USHPjeYO3KI/AAAAAAAAAEk/To21v98ue9U/s1600/format+tulisan.pnghttp://4.bp.blogspot.com/-flp7qBC_K_A/USHPWrdZsQI/AAAAAAAAAEM/zHKiwJoGyp4/s1600/Header.png



Gambar 4. Format tulisan5. Membuat from komentar, buka notepad++, kemudian ketikan code dibawah ini:

From komentar

Silahkan Berkomentar : Nama:Email:Komentar:

Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau




Gambar 5. From komentar6. Mengatur kolom, buka notepad++ kemudian ketikan code dibawah ini:

warna-warna

warna-warna

Hijau

KuningMerah

Abu-abuBiruOrange

CokelatBiru mudaMerah muda


http://3.bp.blogspot.com/-E0XQMoE8TP4/USHPsWU9PhI/AAAAAAAAAFE/-qJ_FGk69GQ/s1600/komentar.png



Gambar 6. TabelB. Hyperlink1. 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


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
http://1.bp.blogspot.com/-G21F6Kfyj_I/USHPlXVQ8VI/AAAAAAAAAE0/gyiwzDBtRkI/s1600/hyperlink.pnghttp://4.bp.blogspot.com/-p5c5whXOJn0/USHPpZqRjeI/AAAAAAAAAE8/QmFam9Xv8zo/s1600/kolom.pnghttp://1.bp.blogspot.com/-G21F6Kfyj_I/USHPlXVQ8VI/AAAAAAAAAE0/gyiwzDBtRkI/s1600/hyperlink.pnghttp://4.bp.blogspot.com/-p5c5whXOJn0/USHPpZqRjeI/AAAAAAAAAE8/QmFam9Xv8zo/s1600/kolom.png





Gambar 8. Link Antar Bagian Dalam WebC. Membuat Website Sederhana1. Membuat halaman login pada website, buka notepad++, kemudin ketikan atau copy saja code

dibawah ini:login web

Silahkan mengisi data yang ada di bawah untuk masuk ke website saya:)
Nama Anda:
http://4.bp.blogspot.com/-AAuFOWBKzvQ/USHPkJEYz-I/AAAAAAAAAEs/OkUgKvv71dk/s1600/hyperlink+folder.png



Email Atau telepon:
Alamat:
Tanggal Lahir
1234567891011

12131415161718192021222324

25262728293031JanuariFebruariMaretApril

MeiJuniJuliAgustusSeptemberOktoberNopemberDesember19881989199019911992



1993199419951996Jenis Kelamin
PriaWanita

..... Dalampenggisiannya harus jujur yaa, jangan bo'onk :) ......Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atausejenisnya, background dapat anda ganti sendiri sesuai dengan kesukaan anda.Hasilnya seperti pada gambar 9 berikut:

Gambar 9. Halaman login2. 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 ditampilkansetelah tag ditutup. Contoh: text yang ditampilkan.
Tag biasa, yahhtag aja, contoh
(break).
kaga

perlu ditutup oleh tag , tapi jika sintak yang digunakan tag

container, contoh: , yah mesti ditutup dengan .
Tag yang digunakan untuk mengakhiri sintak punya karakter /(slash) sebelum

sintaknya, contohnya:
Kita juga dapat mengetik attribut di dalam sebuah tag, contoh: . atau .
LANGKAH 1



MEMBUKA NOTEPAD.LANGKAH 2
MENGETIKKAN SINTAK/SYNTAX.Berikut ini adalah syntax dasar yang membentuk suatu HTML.
pertama, ketikkan

tekan enter, kemudian ketik

Dalam container head,

kita bisa mengetikan beberapa sintak, tapi yangpaling penting jangan lupa

mengetikan sintak judul halaman web . Untuk

sintak lain nanti saja.
Sekarang ketikkan sintak title tadi, jadi

seperti ini:
judul halaman web

Kemudian ketikkan . Tag body merupakan badan/tubuh/inti dari

halaman web, tampilan web yang kita lihat itu berasal dari .Body tuh tag container, jadi mesti ditutup. Hasil sampai sekarang:

Judul Halaman Web

?

Selanjutnya bagaimana cara menampilkan tulisan ke dalam HTML???

Ketikan sembarang text ke dalam tag body, contohnya seperti ini :
Contoh text yang ditampilin di halaman web, By: Rian

Hidayat

terus, jika sudah, ketikkan ,

script lengkapnya seperti ini :

Judul Halaman Web

Contoh text yang ditampilkan di

halaman web, By: Rian Hidayat

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 HTMLCara 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 ~




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 awal3. Membuat data pribadi atau profil, buka notepad++, kemudian ketikan atau copy saja code

dibawah ini:

Profilku

~ Selamat datang di
http://4.bp.blogspot.com/-sDM1S5qlaVk/USHPhFABbUI/AAAAAAAAAEU/DBEjge8Wjz8/s1600/Home.jpg



website pertama saya ~

PROFILKU

NAMA

: Rian Hidayat
ALAMAT : Weru, Sukoharjo
TTL
: Sukoharjo, 09-November-
1993PEKERJAAN
: Mahasiswa
HOBY

: TidurNO.TELPONE
: 085728282066
EMAIL
:[email protected]
NAMA

: Bram Putra P.
ALAMAT : Laweyan,
Surakarta TTL
mailto:[email protected]%3c/tdmailto:[email protected]%3c/tdmailto:[email protected]%3c/td



: Surakarta, 13-April-1992

PEKERJAAN

: MahasiswaNO.TELPONE
: XXXXXXXXXXXXXX
TUTORIAL HTMLCara membuat tulisanbergerak

Cara membuat fromkomentar

Cara membuat halaman

login

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






Gambar 11. Membuat data pribadi4. Membuat album galery, buka notepad++, kemudian ketikan atau bisa copy saja code

dibawah ini:

Profilku

~ Selamat datang diwebsite pertama saya ~



title="Kode Warna Pada HTML">

Galery

Album Kegiatan

Teknisi


Cara membuat fromkomentar

Cara membuat halamanlogin

~ Meskipun banyak kendala



dalam pembuatan desain web, tapi tetap berusaha untuk mencapai hasil yangterbaik ~




Gambar 12. Galery5. Membuat artikel html tentang cara membuat tulisan bergerak, buka notepad++, kemudian

ketikan atau copy saja code dibawah ini:

Cara membuat tulisan bergerak
http://4.bp.blogspot.com/-38SdKMJZk4c/USHPyTRheFI/AAAAAAAAAFU/BvC9Uk38UgY/s1600/album.jpg



~ Selamat datang diwebsite pertama saya ~

Tutorial Membuat Tulisan MenjadiBergerak

Marquee tag digunakan untuk menggerakkan samaada perkataan ataupun gambar. Dalam contoh ini, saya akan tunjukkanbeberapa cara untuk menggunakan Marquee tag ini untuk menggerakkan tulisananda.

Teks Bergerak Ke Bawah...Teks Bergerak KeKanan... Teks Bergerak KeKiri...
Teks Bergerak Ke Atas...



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

This text scrolls right...

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

Teks ini MacamFerari..
2. Anda boleh mengubah kelajuan teks denganmenggunakan kod di bawah ni.

Teks niMacam Ferari..

Ubah nomer yang bewarnaOren untuk mengubahkelajuan.

Teks ini sepertiSiput..

Teks ini seperti Siput..

3. Ubah nomer yang bewarna hijau untuk mengubah kelajuan.

Teks ini Melantun
Untuk membuatkan teks anda melantunseperti di atas ini. Gunakan kode di bawah.

Teks iniMelantun

4. Ok. Seterusnya

cara untuk menetapkan ruangan untuk Marquee bergerak

Teks ini bergerak dalam kelebaran 200width

Teks ini bergerakdalam kelebaran 200 width
Anda boleh tentukan width mengikut kesukaananda dengan menukarkan nomer yang bewarna hijau.

5. Seterusnya saya akan menggabungkan beberapakode Marquee ini bersama.

Teks Paling Awesome



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

Teks PalingAwesome

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


Cara membuat fromkomentar Cara membuat halamanlogin

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






Gambar 13. Artikel tulisan bergerak
http://3.bp.blogspot.com/-vtlDaTVvBfU/USHP7XaEVMI/AAAAAAAAAFk/yVDnY-K0sL8/s1600/tulisan+bergerak.jpg

Membuat Desain Website Berbasis HTML Dengan Notepad

Documents

Transcript of Membuat Desain Website Berbasis HTML Dengan Notepad