Cara membuat situs web Anda sendiri

Situs web dasar dapat dirancang dengan menggunakan HyperText Markup Language (HTML). Skrip dapat ditulis dalam Notepad atau dokumen teks tergantung pada sistem operasi yang Anda gunakan. Alat yang sangat mendasar untuk membuat situs web dimulai dengan penggunaan tag HTML dan elemen HTML. Yang pertama sering digunakan untuk menyampaikan informasi tentang unit konten dan yang terakhir digunakan untuk memformat alat untuk halaman web. Saat melakukan pengkodean, atribut dan nilai HTML digunakan untuk memberikan informasi seperti penempatan, ketinggian, dll untuk konten. Selain itu, orang dapat menggunakan tag warna, tag gambar dan tag divisi HTML untuk membuat halaman web yang jelas.

Cara membuat situs web Anda sendiri

  • Apa itu HTML?
  • Persyaratan
    • Contoh 1:
  • Tag HTML
  • Elemen HTML
  • Tag HTML Dasar untuk Diingat
    • Contoh 2
  • Atribut dan Nilai HTML
    • Contoh 3
  • Label Warna
    • Contoh 4
  • Pemformatan Teks
    • Contoh 5
  • Tag Divisi HTML
    • Contoh 6
  • Tag Gambar
    • Contoh 7
  • Menghubungkan Tag
    • Contoh 8
  • Tag Tabel
    • Contoh 9
  • Tag Bingkai HTML
    • Contoh 10
  • Perangkat Lunak WYSIWYG

Saat membuat situs web, banyak orang sering memilih untuk meminta bantuan perancang web. Namun, ada beberapa cara sederhana untuk mempelajari cara membuat situs web dasar sendiri dan akan dijelaskan dalam artikel ini.

Apa itu HTML?

Untuk membuat situs web, Anda harus mempelajari dasar-dasar HTML. HTML adalah akronim untuk HyperText Markup Language, yang merupakan bahasa pemrograman yang digunakan untuk membuat dokumen hypertext di World Wide Web. Bahasa ini terdiri dari serangkaian kode dan simbol yang akan menghasilkan teks, gambar, suara, bingkai, dan animasi pada halaman browser Anda.

Dua cara umum untuk memulai situs web Anda adalah:

  • Membuat kode Anda sendiri dalam editor teks sederhana dan menyimpannya sebagai file .htm
  • Menggunakan perangkat lunak penghasil HTML

Persyaratan

Bagi yang menggunakan Windows, mulailah dengan membuka dokumen Notepad baru.

Bagi mereka yang menjalankan MAC, buka dokumen SimpleText baru.

Untuk pengguna OSX, buka TextEdit dan buat perubahan berikut:

1. Buka menu "Format" dan pilih "Teks Biasa"

2. Di bawah menu "Edit Teks", buka jendela "Preferensi" dan pilih opsi "Abaikan perintah teks kaya dalam file HTML".

Contoh 1:

Setelah memiliki dokumen kosong, Anda dapat mulai dengan mengetik:

Ini adalah judul halaman Anda

Di sinilah semua konten Anda akan muncul

catatan:

1. Selalu simpan dokumen Anda dengan ekstensi .htm atau html untuk ditampilkan di browser web Anda. (mis. index.htm).

2. Untuk mengedit dokumen sumber Anda, pilih opsi "Lihat" pada bilah alat di jendela peramban dan pilih "Sumber".

3. Jangan lupa untuk menyimpan setiap perubahan yang dilakukan pada dokumen Anda.

4. Untuk melihat modifikasi yang dilakukan pada dokumen di jendela browser, segarkan halaman dengan menggunakan tombol F5.

Tag HTML

Tag HTML didefinisikan sebagai markup yang ditambahkan ke dalam dokumen HTML untuk memberikan informasi lebih lanjut tentang konten. Tag HTML diletakkan di antara tanda kurung dan membutuhkan tag penutup. (mis.).

Elemen HTML

Elemen adalah tag markup yang digunakan untuk memformat beberapa bagian halaman web. Contoh elemen HTML adalah tag, yang digunakan untuk mencetak tebal teks yang ditampilkan di browser.

digunakan untuk memberi tahu browser Anda bahwa file terdiri dari data berkode HTML. digunakan di bagian paling akhir dokumen untuk memberi tahu browser Anda bahwa konten HTML berakhir di sana.

berisi bagian pertama dari dokumen dan di mana judul halaman browser Anda akan ditemukan. Itu juga dapat berisi perintah yang digunakan untuk memformat tampilan browser Anda (mis. Panggilan CSS). kemudian digunakan untuk mengakhiri bagian ini. Bagian ini tidak akan ditampilkan di browser Anda.

akan digunakan untuk memberi label pada situs web Anda. Oleh karena itu digunakan untuk menunjukkan akhir dari perintah itu.

mendefinisikan semua konten yang akan ditampilkan di browser Anda.

Tag HTML Dasar untuk Diingat

Pos

Judul digunakan untuk menunjukkan subjek konten berikut di halaman web Anda. Dalam HTML, ukurannya bisa bervariasi, dari

Paragraf

Paragraf digunakan untuk memisahkan blok teks di halaman web Anda. Dalam HTML, mereka didefinisikan dengan

menandai. Paragraf akan memiliki tag pembuka

dan tag penutup

.
  • Bagian ini telah menetapkan tag HTML

Line Breaks

Dalam HTML, jeda baris TIDAK memerlukan tag penutup. Oleh karena itu, mereka hanya didefinisikan dengan

menandai.

  • Bagian ini telah menetapkan tag HTML

Komentar

Komentar dimasukkan dalam halaman HTML untuk menemukan bagian yang berbeda pada halaman web oleh perancangnya. Mereka didefinisikan dengan menandai. Tag komentar tidak ditampilkan di browser, dan karenanya dapat digunakan di mana saja di dalam dokumen tanpa memengaruhi format halaman web.

Contoh 2

Semua Tentang HTML

HTML adalah akronim untuk HyperText Markup Language

Atribut dan Nilai HTML

Atribut HTML adalah informasi yang ditambahkan ke elemen dan digunakan untuk memasukkan karakteristik tertentu ke elemen HTML. Atribut HTML selalu ditulis bersama dengan nilai (misalnya nama = "nilai" ) dan diletakkan di tag awal elemen HTML.

Misalnya, jika Anda ingin tajuk ditempatkan di tengah halaman alih-alih ditampilkan di sebelah kiri secara default, Anda dapat menambahkan atribut menyelaraskan ke tag:

  • HTML adalah akronim untuk HyperText Markup Language

    Label Warna

    Tag warna memungkinkan Anda untuk mengubah warna teks yang ditampilkan di jendela browser. adalah contoh tentang cara mengubah warna teks jika Anda ingin melakukannya.

    Dalam HTML, Anda juga dapat menggunakan kode warna untuk mendapatkan warna tertentu dengan menggunakan kode heksadesimal. Disebut kembar tiga heksadesimal sesuai dengan warna merah, hijau dan biru (RGB). Karenanya, tag warna dalam heksadesimal akan terlihat seperti . Anda bisa mendapatkan kode warna dan nama dengan mengikuti tautan ini: //www.computerhope.com/htmcolor.htm

    Anda juga dapat menggunakan tag warna untuk memodifikasi warna latar belakang situs web Anda dengan menambahkan atribut BGCOLOR . Karenanya, akan mengubah warna latar belakang dari putih standarnya.

    Contoh 4

    Semua Tentang HTML

    .

    HTML adalah akronim untuk HyperText Markup Language

    catatan:

    1. Dianjurkan untuk tidak memilih warna mencolok seperti kuning atau merah muda untuk teks Anda karena warna-warna ini cenderung mengganggu mata

    2. Juga, coba gunakan maksimal 4 nada warna yang sedikit serasi yang sesuai dengan suasana situs web Anda untuk hasil penyelarasan yang lebih baik.

    3. Jangan membuat kecocokan warna yang canggung seperti teks merah muda pada latar belakang biru untuk situs web formal karena akan terlihat aneh.

    Pemformatan Teks

    Tag pemformatan teks memungkinkan Anda untuk memodifikasi tampilan teks Anda di jendela browser. Misalnya, untuk tebal teks, Anda dapat menggunakan menandai. (mis. Teks ini akan memiliki huruf tebal ). Di bawah ini adalah daftar tag pemformatan teks umum yang dapat Anda gunakan untuk mengubah tampilan teks Anda:

    1. Tag Tebal

    Teks ini akan dicetak tebal

    2. Tag Miring

    Teks ini akan dicetak miring

    3. Garis Bawahi Tag

    Teks ini akan digarisbawahi

    4. Tekankan Tag

    Ini akan menekankan teks Anda

    5. Tag Yang Kuat

    Teks ini akan kuat

    6. Tag Besar

    Ini akan mendefinisikan teks besar

    7. Tag Kecil

    Ini akan mendefinisikan teks kecil

    8. Tag Berlangganan

    Teks ini akan disubkripsikan

    9. Tag Superscript

    Teks ini akan ditulis superskrip

    10. Tag Tengah

    Teks ini akan dipusatkan

    11. Tag Kiri

    Teks ini akan ditampilkan di sisi kiri layar

    12. Tag Kanan

    Teks ini akan ditampilkan di sisi kanan layar

    13. Tag Daftar Tidak Berurutan

    • Ini adalah daftar tidak terurut
    • Ini adalah daftar tidak terurut

    14. Tag Daftar Pesanan

    1. Ini nomor 1 dalam daftar saya
    2. Ini nomor 2 dalam daftar saya

    catatan:

    1. Tag ini juga dapat digabungkan. Jika Anda ingin teks tebal yang digarisbawahi, Anda dapat menggunakan Teks ini akan dicetak tebal dan bergaris bawah

    2. Namun, selalu tutup tag pertama yang terakhir Anda buka. Pada contoh di atas, telah dibuka PERTAMA, sebelum tag, tetapi telah ditutup TERAKHIR.

    Contoh 5

    Semua Tentang HTML

    .

    HTML adalah akronim untuk HyperText Markup Language

    Bahasa ini terdiri dari serangkaian kode dan simbol yang akan menghasilkan:

    • teks,
    • gambar,
    • terdengar,
    • bingkai
    • animasi di halaman browser Anda.

    Dua cara umum untuk memulai situs web Anda adalah:

    1. untuk membuat kode Anda sendiri dalam editor teks sederhana dan menyimpannya sebagai file .htm. atau
    2. gunakan perangkat lunak penghasil HTML.

    Tag Divisi HTML

    Aturan Horisontal

    Aturan horisontal digunakan untuk membagi atau membagi bagian halaman web Anda. Itu


    tag digunakan untuk membuat garis horizontal dan dapat diubah untuk membuat berbagai jenis garis dengan mengubah ukuran, warna, atau lebarnya.

    Misalnya


    atau

    Garis utuh

    Itu


    tag digunakan untuk membuat garis yang solid. Mengubah sedikit dari tag aturan horisontal karena menghasilkan garis tanpa potongan 3D yang dihasilkan oleh
    menandai.

    Contoh 6

    Semua Tentang HTML

    .


    HTML adalah akronim untuk HyperText Markup Language

    Bahasa ini terdiri dari serangkaian kode dan simbol yang akan menghasilkan:

    • teks,
    • gambar,
    • terdengar,
    • bingkai
    • animasi di halaman browser Anda.


    Dua cara umum untuk memulai situs web Anda adalah:

    1. untuk membuat kode Anda sendiri dalam editor teks sederhana dan menyimpannya sebagai file .htm. atau
    2. gunakan perangkat lunak penghasil HTML.

    Tag Gambar

    Dokumen HTML memungkinkan Anda untuk memasukkan gambar dengan menggunakan tag gambar. Anda dapat menelusuri gambar dari URL online atau dari komputer Anda sendiri. Tag gambar singkatan dari "sumber gambar"; karenanya, path gambar harus didefinisikan setelah atribut. Jika gambar ditemukan di folder yang sama dengan dokumen sumber Anda, Anda tidak perlu masuk ke direktori path keseluruhan.

    Misalnya

    atau atau

    Tag Alignment

    Sekali lagi, Anda dapat menggunakan atribut ALIGN untuk menampilkan gambar baik di bagian tengah, sisi kanan atau sisi kiri browser Anda.

    Eg1

    Catatan: Namun, itu mungkin terjadi bahwa browser Anda tidak mendukung tag ini. Karenanya Anda dapat menggunakan tag tepat sebelum tag gambar untuk memusatkan gambar Anda di browser.

    Eg2

    Ukuran gambar

    Ukuran gambar yang ditampilkan dapat dimodifikasi dengan menggunakan atribut WIDTH dan HEIGHT. Anda dapat menggunakan persentase atau piksel untuk mengukur ukuran gambar Anda.

    Eg1

    Eg2

    Batas Gambar

    Jika Anda ingin menyisipkan batas pada gambar Anda, Anda dapat menggunakan atribut BORDER untuk melakukannya.

    Misalnya

    Ruang Runaround

    Ruang runaround mengacu pada celah ruang di sekitar gambar. Ini adalah tag yang sangat berguna ketika Anda memiliki teks di sekitar gambar Anda. Ini didefinisikan menggunakan atribut VSPACE untuk sisi atas dan bawah dan atribut HSPACE digunakan untuk sisi kiri dan kanan.

    Misalnya

    Contoh 7

    Semua Tentang HTML

    .


    HTML adalah akronim untuk HyperText Markup Language

    Bahasa ini terdiri dari serangkaian kode dan simbol yang akan menghasilkan:

    • teks,
    • gambar,
    • terdengar,
    • bingkai
    • animasi di halaman browser Anda.

    Dua cara umum untuk memulai situs web Anda adalah:

    1. untuk membuat kode Anda sendiri dalam editor teks sederhana dan menyimpannya sebagai file .htm. atau
    2. gunakan perangkat lunak penghasil HTML.


    Kode Warna

    Anda dapat menggunakan kode warna heksadesimal yang disediakan oleh Theodora untuk menciptakan suasana situs web Anda sendiri

    Ini adalah contoh yang Anda miliki dengan atribut vspace dan hspace

    Menghubungkan Tag

    Dalam HTML, tag penautan digunakan untuk melompat dari satu bagian halaman ke halaman lain atau dari satu halaman ke halaman lainnya. Mereka disebut Tautan Internal jika mereka memungkinkan Anda untuk melompat dari satu bagian atau halaman situs web Anda sendiri ke yang lain dan Tautan Eksternal ketika mereka membuka jendela browser baru dari situs web lain. Keuntungan utama dari menautkan tag adalah memungkinkan mereka membuat situs web yang dinamis alih-alih membuat halaman web yang bergulir.

    Tautan Eksternal

    akan menampilkan "Tautan Alamat Web" sebagai hyperlink di halaman web Anda dan ketika pengguna akan mengklik teks, itu akan memuat halaman www.webaddress.com

    Tautan Internal

    Ada dua cara khusus untuk menyisipkan tautan internal:

    1. Untuk melompat dari halaman saat ini ke halaman lain di situs web yang sama

    2. Untuk melompat dari bagian halaman saat ini ke bagian lain di halaman yang sama.

    Untuk dapat melompat dari satu bagian ke bagian lain, Anda harus memberi nama dulu ke bagian tersebut sehingga tag dapat menemukannya ketika sedang dipanggil. Misalnya, jika bagian tentang Tautan HTML harus dimasukkan di bagian atas halaman web, tepat di atas tajuk "Tautan HTML", masukkan tag . Nilai "tautan" akan merujuk ke bagian yang harus ditemukan; karenanya jika bagian dari halaman web Anda didasarkan pada kucing, masukkan tag tepat di atas judul untuk kucing.

    Setelah proses ini, Anda juga harus memasukkan tautan yang ingin Anda lompati. Dalam contoh ini, jika Anda ingin melompat dari atas halaman ke lokasi "Tautan HTML" yang ditemukan di bagian bawah halaman, masukkan Tautan Tag . Teks hyperlink "Tag Tautan" akan muncul dan ketika pengguna mengkliknya, mereka akan melompat dari lokasi mereka saat ini ke bagian yang ditunjukkan.

    Contoh 8

    Semua Tentang HTML

    Kode Warna

    Menghubungkan Tag


    HTML adalah akronim untuk HyperText Markup Language

    Bahasa ini terdiri dari serangkaian kode dan simbol yang akan menghasilkan:

    • teks,
    • gambar,
    • terdengar,
    • bingkai
    • animasi di halaman browser Anda.

    Dua cara umum untuk memulai situs web Anda adalah:

    1. untuk membuat kode Anda sendiri dalam editor teks sederhana dan menyimpannya sebagai file .htm. atau
    2. gunakan perangkat lunak penghasil HTML.


    Kode Warna

    Anda dapat menggunakan kode warna heksadesimal yang disediakan oleh Theodora untuk menciptakan suasana situs web Anda sendiri

    Ini adalah contoh yang Anda miliki dengan atribut vspace dan hspace

    Anda dapat menemukan berguna untuk mengunjungi situs web Microsoft dengan mengklik tautan ini


    Menghubungkan Tag

    Bagian ini akan membahas tentang pentingnya menghubungkan tag di situs web Anda.

    catatan:

    Ini hanya contoh tentang bagaimana Anda dapat menggunakan tag penautan. Anda tentu saja dapat mengubah penempatan mereka untuk membuat situs web Anda lebih ramah pengguna dan menarik.

    Jendela Target

    Jendela target akan memuat halaman tertaut di jendela browser lain sehingga pengguna dapat tetap berada di halaman situs web Anda saat ini dan melihat alamat hyperlink di browser lain.

    Tag Tabel

    Memasukkan tabel di situs web Anda bisa sangat berguna untuk menampilkan informasi secara tertib. Ini juga akan memungkinkan Anda untuk menangani teks dan gambar Anda dengan lebih tepat.

    Tag pembuka

    digunakan untuk memberi tahu browser Anda bahwa tabel di halaman dimulai di sana dan diakhiri dengan
    menandai. Anda juga dapat memodifikasi warna, ukuran dan ukuran batas meja Anda.

    Ukuran tabel dapat diubah dengan menggunakan

    menandai. Anda dapat menggunakan piksel atau persentase untuk mengubah ukuran tabel.

    Anda dapat menggunakan tag

    misalnya untuk membuat batas yang tidak terlihat di browser Anda.

    Itu

    tag digunakan untuk membuat jarak spasi antara teks dan garis dalam batas tabel.

    Itu

    tag digunakan untuk menyisipkan celah ruang antara garis dalam dan luar batas tabel.

    Tabel terdiri dari sel-sel yang ditentukan oleh kolom dan baris di dalam tabel. Sel akan menjadi ruang tempat konten Anda akan disisipkan. Tag kolom didefinisikan sebagai

    tag dan baris didefinisikan sebagai dantag. Untuk memodifikasi lebar sel, Anda dapat menggunakan dan untuk menyelaraskan kolom, masukkan tag
    dan
    menandai. Ukurannya dapat diatur dalam persentase atau dalam piksel.

    Anda juga dapat menyelaraskan baris dan kolom Anda dengan menambahkan atribut ALIGN di tag Anda. Karenanya, untuk menyelaraskan baris tertentu, misalnya, masukkan tag

    Untuk menyelaraskan sel Anda, Anda dapat menggunakan atribut VALIGN .

    akan menempatkan sel ke tengah atas halaman Anda.

    Untuk merentangkan kolom, Anda dapat menggunakan tag

    untuk mengatur jumlah kolom sel harus span. Perhatikan bahwa nilai default diatur ke 1.

    Juga, untuk merentangkan sel ke sejumlah baris, gunakan

    menandai.

    Contoh 9

    Semua Tentang HTML

    Kode Warna

    Tag Tabel

    HTML adalah akronim untuk HyperText Markup Language

    Bahasa ini terdiri dari serangkaian kode dan simbol yang akan menghasilkan:

    • teks,
    • gambar,
    • terdengar,
    • bingkai
    • animasi di halaman browser Anda.

    Dua cara umum untuk memulai situs web Anda adalah:

    1. untuk membuat kode Anda sendiri dalam editor teks sederhana dan menyimpannya sebagai file .htm. atau
    2. gunakan perangkat lunak penghasil HTML.

    Kode Warna

    Anda dapat menggunakan Kode Warna Heksadesimal yang disediakan oleh Theodora untuk menciptakan suasana situs web Anda sendiri.

    Lebih banyak teks dapat ditambahkan di sini.

    Lebih banyak teks dapat ditambahkan di sini.

    Lebih banyak teks dapat ditambahkan di sini.

    Lebih banyak teks dapat ditambahkan di sini.

    Lebih banyak teks dapat ditambahkan di sini.

    Tag tabel

    Bagian ini akan memberi Anda detail lebih lanjut tentang tag tabel

    Tajuk

    Ini adalah bagian lain dari konten

    Kolom 1 Kolom 2 Kolom 3
    Spanning Sel dalam 3 Baris (digabung ke-2 dan ke-3) Spanning Sel dalam 2 Baris (Sel 1 dan 2 digabung) Sel 1
    Sel ke-2
    Sel ke-3
    Sel ke-3 Sel ke-4

    Tag Bingkai HTML

    Bingkai HTML memungkinkan Anda membuat jendela independen di dalam laman web. Mereka sangat berguna karena memungkinkan Anda untuk menampilkan lebih dari satu dokumen di halaman web.

    Untuk menggunakan frame, Anda harus memiliki setidaknya dua file .htm yang berbeda, yang salah satunya akan bernama index.htm . File index.htm akan menjadi tempat semua jendela akan ditampilkan. Tag bingkai didefinisikan sebagai dan tag digunakan untuk mendefinisikan set frame yang sedang digunakan dalam file index.htm.

    Contoh 10

    Coba tag bingkai

    akan mengatur ukuran baris yang akan ditampilkan di browser Anda.

    akan mengatur ukuran kolom yang akan ditampilkan di browser Anda.

    Itu tag akan memberi nama bingkai dan digunakan untuk menautkannya ke jendela utama.

    tag akan digunakan untuk menetapkan batas ke bingkai Anda. Mengaturnya ke 0 akan memastikan bahwa itu akan kompatibel dengan semua browser.

    akan mengatur ruang antara frame terdekat.

    akan mengatur ruang lebar di kedua sisi bingkai. Ukurannya harus diatur dalam piksel.

    akan mengatur ukuran margin atas dan bawah dalam piksel.

    Itu tag akan dapat scrollbar vertikal atau horizontal pada bingkai Anda. Nilainya harus diatur ke "ya", "tidak" atau "otomatis".

    Perangkat Lunak WYSIWYG

    Ada program perangkat lunak yang disebut WYSIWYG (apa yang Anda lihat adalah apa yang Anda dapatkan), yang menyandikan untuk Anda, namun ini seharusnya tidak menghentikan Anda dari mempelajari konsep html minimum untuk menghindari kejutan yang tidak menyenangkan! Dengan perangkat lunak ini, Anda meletakkan teks dan gambar, dan perangkat lunak menghasilkan kode HTML yang sesuai secara bersamaan. Ini juga akan membuat pekerjaan pemasukan animasi atau skrip lebih mudah. Ada, misalnya:

    Dreamweaver, tidak gratis tetapi sangat komprehensif dan mudah digunakan dengan tutorial yang dirancang dengan baik

    Editor GoLive Photoshop

    Untuk WYSIWYG gratis, kami dapat menyebutkan:

    • Matizha luhur
    • //bluegriffon.org/pages/DownloadBlueGriffon
    • Studio Maguma
    • Kit HTML
    • Halaman 1 2000
    Artikel Sebelumnya Artikel Berikutnya

    Tips