Cara Membuat Website Html Di Notepad

Cara Membuat Website Html Di Notepad

Menyiapkan Struktur Dasar HTML

Sebelum mulai menulis kode, kamu perlu tahu apa saja yang harus ada di dalam sebuah website sekolah. Struktur dasar HTML yang perlu kamu buat pertama kali adalah sebagai berikut:

Website Sekolah

Selamat datang di Website Sekolah XYZ

  • Tentang Sekolah

  • Program Pendidikan

  • Kontak

    • Tentang Sekolah

    Ini adalah bagian tentang sekolah kamu…

    Program Pendidikan

    Informasi mengenai program pendidikan yang disediakan…

    Bagian ini berisi informasi kontak sekolah…

    © 2024 Website Sekolah XYZ

    Dengan struktur dasar ini, kamu sudah bisa membuat halaman website dengan bagian-bagian seperti header, nav, section, dan footer.

    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.

    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

    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

    Tag Heading

    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

    format tulisan</titele></p><p><small> teks small </small><br></p><p><big> teks big</big><br></p><p><b> teks tebal </b><br></p><p><i> teks miring </i><br></p><p><u> teks bergaris bawah </u><br></p><p>Contoh superscript : x <sup>2</sup><br></p><p>Contoh subscript : H<sub>2</sub>O<br></p><p><strike> Ini teks tercoret </strike><br></p><p><font size = 5 face = verdana></p><p><body BGCOLOR =”#00FF00″></p><p>Langkah selanjutnya simpan dalam format HTML dan buka file dengan firefox atau sejenisnya, maka hasilnya akan seperti pada gambar 4 berikut:</p><p>Gambar 4. Format tulisan</p><p><title> From komentar

     

    Silahkan Berkomentar :

    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

    warna-warna

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

    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

    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

    login web

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

    warna-warna HijauKuningMerah Abu-abuBiruOrangeCokelatBiru mudaMerah muda




    http://MP3/Greenday%20-%20I%20walk%20Alone.swf

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

        ~ 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

    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>

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

    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.