Membuat Desain Website Berbasis HTML Dengan Notepad

 

Membuat Desain Website Berbasis HTML 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 dan ditutup  

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

 

ELEMEN DASAR   Jenis Dokumen 

 

Judul 

 

Mukadimah (Header)   Batang Tubuh 

   

(terdapat pada awal dan akhir dari file HTML) (harus selalu terdapat pada mukadimah) (keterangan umum, seperti judul dsb.) (isi dari halaman HTML)

 

 

FORMAT TAMPILAN   

(Bold) (Italic) (Underline - jarang

Huruf Tebal  Huruf Miring  Garis Bawah 

 

Rata Tengah 

 

Huruf Kedip 

 

Ukuran Huruf  

 

Warna Huruf  

   

Pilih Jenis Huruf  

 

digunakan) (Center - berlaku untuk teks maupun gambar) (Blinking - tag terlucu sampai kini) (Font Size - boleh diisi dari 1 sampai 7)

PEMISAH  Paragraf  

 

Align Text 

    (pindah ke baris

Pndah Baris  Garis Datar  Penataan Letak Garis  Tebal Garis  Lebar Garis  Lebar Garis Persentasi  

(tag penutup seringkali tak diperlukan)

 berikut) (Horizontal Rule)

  R>       

(dalam satuan pixel) (dalam satuan pixel) (dalam persentasi terhadap lebar halaman)

LATAR BELAKANG DAN WARNA  Latar Belakang Gambar  Warna Latar Belakang  Warna Huruf Teks 

 

(Tiled Background)

 

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       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 adalah paragraf paragraf pertama, pertama, yang berisi berisi 3 baris. baris. tiga.  

Baris satu, dua dan

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++, notepad++, kemudian ketikan code dibawah ini:      Tag Heading       Heading 1   Heading Heading Heading Heading Heading  

2 3 4 5 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      teks normal   teks small   teks big  teks tebal   teks miring   teks bergaris bawah   Contoh superscript : x 2  Contoh subscript : H2O  Ini teks tercoret     menggunakan tag font         

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

 

Gambar 4. Format tulisan  5.  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 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        

 

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:      login web      >   Silahkan mengisi data yang ada di bawah untuk masuk ke website saya :)      Nama Anda:     

 

Email Atau telepon:    Alamat:       Tanggal Lahir      

 

2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23  24  25  26  27  28  29  30  31     

 

Februari  Maret  April  Mei  Juni  Juli  Agustus  September  Oktober  Nopember  Desember      1988  1989  1990  1991  1992 

 

1993  1994  1995  1996    Jenis Kelamin   Pria  Wanita   

 

      .... >..... . Dalam penggisiannya penggisianny a 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         ">       

border="0"

align='left'

 

~ Selamat datang di website pertama saya ~                    

 

    ~Dasar-dasar Membuat Website Berbasis HTML~   < align="lift">Nah, >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>.  

 

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-November1993   PEKERJAAN   : Mahasiswa  HOBY   : Tidur  NO.TELPONE   : 085728282066  EMAIL   : size="5"color="#00FFFF">:[email protected]      NAMA   : Bram Putra P.  ALAMAT   : Laweyan, Surakarta   TTL  

 

: size="5"color ="#00FFFF">: Surakarta, 13-April  1992   PEKERJAAN   : Mahasiswa  NO.TELPONE   : XXXXXXXXXXXXXX    

 

width='200' height='700' bgcolor='' valign='top'>    

 

        Galery     Album Kegiatan Teknisi                                 ">    <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 masingmasing.                l>               

 

 

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 12 berikut:  

Gambar 13. Artikel tulisan bergerak