Cara membuat laman web anda sendiri

Laman web asas boleh direka dengan menggunakan HyperText Markup Language (HTML). Skrip boleh ditulis dalam Notepad atau dokumen teks bergantung kepada sistem operasi yang anda gunakan. Alat yang sangat asas untuk membuat laman web bermula dengan penggunaan tag HTML dan elemen HTML. Yang pertama sering digunakan untuk menyampaikan maklumat tentang unit kandungan dan yang terakhir digunakan untuk memformat alat untuk laman web. Semasa pengekodan, atribut dan nilai HTML digunakan untuk memberikan maklumat seperti peletakan, ketinggian dan sebagainya untuk kandungan. Di samping itu, seseorang boleh menggunakan tag warna, tag gambar dan tag pembahagian HTML untuk membuat halaman web yang jelas.

Cara membuat laman web anda sendiri

Apakah itu HTML?
Keperluan
- Contoh 1:
Tags HTML
Elemen HTML
Teg HTML Asas untuk Ingat
- Contoh 2
Atribut dan Nilai HTML
- Contoh 3
Tag Warna
- Contoh 4
Pemformatan Teks
- Contoh 5
Tags Bahagian HTML
- Contoh 6
Teg Image
- Contoh 7
Pautkan Pautan
- Contoh 8
Tag Jadual
- Contoh 9
Tag HTML Frame
- Contoh 10
Perisian WYSIWYG

Apabila membuat laman web, ramai orang sering memilih untuk mendapatkan pereka web untuk mendapatkan bantuan. Walau bagaimanapun, terdapat cara mudah untuk mempelajari cara membuat laman web asas sendiri dan mereka akan dijelaskan dalam artikel ini.

Apakah itu HTML?

Untuk membuat laman web, anda perlu mempelajari asas-asas HTML. HTML adalah akronim untuk HyperText Markup Language, yang merupakan bahasa pengaturcaraan yang digunakan untuk membuat dokumen hypertext di World Wide Web. Bahasa ini terdiri daripada satu set kod dan simbol yang akan menghasilkan teks, imej, bunyi, bingkai dan animasi pada halaman penyemak imbas anda.

Dua cara biasa untuk memulakan laman web anda ialah:

Mencipta kod anda sendiri dalam editor teks mudah dan menyimpannya sebagai fail .htm
Menggunakan perisian penjana HTML

Keperluan

Bagi mereka yang menggunakan Windows, mulakan dengan membuka dokumen Notepad baru.

Bagi mereka yang menjalankan MAC, buka dokumen SimpleText yang baru.

Untuk pengguna OSX, buka TextEdit dan buat perubahan berikut:

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

2. Di bawah menu "Edit Teks", buka tetingkap "Keutamaan" dan pilih pilihan "Abaikan perintah teks yang kaya dalam fail HTML".

Contoh 1:

Sebaik sahaja anda mempunyai dokumen kosong anda, anda boleh mulakan dengan menaip:

Ini tajuk halaman anda

Di sinilah semua kandungan anda akan muncul

Catatan:

1. Sentiasa simpan dokumen anda dengan sambungan htm atau html untuk memaparkannya dalam pelayar web anda. (contohnya index.htm).

2. Untuk mengedit dokumen sumber anda, pilih pilihan "Lihat" pada bar alat anda dalam tetingkap penyemak imbas dan pilih "Sumber".

3. Jangan lupa untuk menyimpan semua perubahan yang dibuat pada dokumen anda.

4. Untuk melihat pengubahsuaian yang dibuat pada dokumen dalam tetingkap penyemak imbas, muat semula halaman dengan menggunakan kekunci F5.

Tags HTML

Teg HTML ditakrifkan sebagai markup yang dimasukkan ke dalam dokumen HTML untuk memberi lebih banyak maklumat mengenai kandungan tersebut. Tag HTML diletakkan di antara tanda kurung dan memerlukan tag penutup. (contohnya).

Elemen HTML

Elemen adalah tanda markup yang digunakan untuk memformat beberapa bahagian halaman web. Contoh elemen HTML adalah tag, digunakan untuk menebalkan teks yang dipaparkan dalam penyemak imbas.

digunakan untuk memberitahu pelayar anda bahawa fail itu terdiri daripada data berkod HTML. digunakan pada akhir dokumen untuk memberitahu pelayar anda bahawa kandungan HTML berakhir di sana.

mengandungi bahagian pertama dokumen dan di mana tajuk laman pelayar anda akan dijumpai. Ia juga boleh mengandungi arahan yang digunakan untuk memformat paparan penyemak imbas anda (cth. Panggilan CSS). kemudian digunakan untuk mengakhiri bahagian ini. Bahagian ini tidak akan dipaparkan dalam penyemak imbas anda.

akan digunakan untuk melabelkan tapak web anda. Oleh itu, digunakan untuk menandakan arahan akhir.

mentakrifkan semua kandungan yang akan dipaparkan dalam penyemak imbas anda.

Teg HTML Asas untuk Ingat

Tajuk

Tajuk digunakan untuk menunjukkan subjek kandungan berikut dalam halaman web anda. Dalam HTML, mereka boleh berubah mengikut saiz, dari

Perenggan

Perenggan digunakan untuk memisahkan blok teks dalam halaman web anda. Dalam HTML, mereka ditakrifkan dengan

tag. Perenggan akan mempunyai tag pembuka

dan tag penutup

Bahagian ini telah menentukan tag HTML

Talian Berputar

Dalam HTML, garisan baris TIDAK memerlukan tag tutup. Oleh itu, mereka hanya ditakrifkan dengan

tag.

Bahagian ini telah menentukan tag HTML

Komen

Komen dimasukkan ke dalam halaman HTML untuk mencari bahagian yang berbeza di halaman web oleh pereka. Mereka ditakrifkan dengan tag. Tag komen tidak dipaparkan dalam penyemak imbas, dan dengan itu boleh digunakan di mana saja dalam dokumen tanpa menjejaskan format laman web.

Contoh 2

Semua Mengenai HTML

HTML adalah singkatan dari HyperText Markup Language

Atribut dan Nilai HTML

Atribut HTML adalah maklumat yang ditambahkan pada unsur-unsur dan digunakan untuk memasukkan karakteristik tertentu kepada elemen HTML. Atribut HTML selalu ditulis bersamaan dengan nilai (misalnya nama = "nilai" ) dan diletakkan pada tanda permulaan elemen HTML.

Contohnya, jika anda mahu tajuk ditempatkan di pusat halaman anda, bukannya dipaparkan di sebelah kiri secara lalai, anda boleh menambah atribut penyelarasan ke tag:

HTML adalah singkatan dari HyperText Markup Language

Tag Warna

Tag warna membolehkan anda mengubah suai warna teks yang dipaparkan dalam tetingkap penyemak imbas. adalah contoh bagaimana mengubah suai warna teks jika anda mahu melakukannya.

Dalam HTML, anda juga boleh menggunakan kod warna untuk mendapatkan warna tertentu dengan menggunakan kod heksadesimal. Jadi dipanggil triplot heksadesimal sepadan dengan warna merah, hijau dan biru (RGB). Oleh itu, tag warna dalam heksadesimal akan kelihatan seperti . Anda boleh mendapatkan kod dan nama warna dengan mengikuti pautan ini: //www.computerhope.com/htmcolor.htm

Anda juga boleh menggunakan tag berwarna untuk mengubah suai warna latar belakang laman web anda dengan menambahkan atribut BGCOLOR . Oleh itu, akan menukar warna latar belakang dari putih lalai.

Contoh 4

Semua Mengenai HTML

HTML adalah singkatan dari HyperText Markup Language

Catatan:

1. Adalah dinasihatkan untuk tidak memilih warna yang menarik seperti kuning atau merah jambu untuk teks anda kerana warna ini cenderung mengganggu mata

2. Juga, cuba gunakan maksimum 4 nada warna yang sepadan dengan sepadan dengan atmosfera tapak web anda untuk hasil harmonisasi yang lebih baik.

3. Jangan buat padanan warna janggal seperti teks merah jambu pada latar belakang biru untuk laman web rasmi kerana ia akan kelihatan ganjil.

Pemformatan Teks

Teg pemformatan teks membolehkan anda mengubah suai paparan teks anda dalam tetingkap penyemak imbas. Contohnya, untuk berani teks, anda boleh menggunakannya tag. (mis. Teks ini akan mempunyai huruf tebal ). Di bawah adalah senarai tag pemformatan teks biasa yang boleh anda gunakan untuk mengubah paparan teks anda:

1. Teg Bold

Teks ini akan berani

2. Tag Italic

Teks ini akan dalam huruf italik

3. Garis bawah Tag

Teks ini akan digariskan

4. Penekanan Tag

Ini akan menekankan teks anda

5. Teg Tegas

Teks ini akan menjadi kuat

6. Tag Besar

Ini akan menentukan teks besar

7. Tag Kecil

Ini akan menentukan teks kecil

8. Tag Subskrip

_{Teks ini akan menjadi subskrip}

9. Superscript Tag

Teks ini akan diseragamkan

10. Pusat Tag

Teks ini akan tertumpu

11. Tanda Kiri

Teks ini akan dipaparkan di sebelah kiri skrin

12. Tag Tepat

Teks ini akan dipaparkan di sebelah kanan skrin

13. Tag senarai tidak disusun

Ini adalah senarai tidak teratur

Ini adalah senarai tidak teratur

14. Senarai Senarai Pesanan

Ini nombor 1 dalam senarai saya

Ini nombor 2 dalam senarai saya

Catatan:

1. Label ini juga boleh digabungkan. Jika anda mahu teks tebal yang digariskan, anda boleh menggunakannya Teks ini akan berani dan digariskan

2. Walau bagaimanapun, selalu menutup tag pertama yang telah dibuka terakhir. Dalam contoh di atas, telah dibuka PERTAMA, sebelum tag, tetapi telah ditutup LAST.

Contoh 5

Semua Mengenai HTML

HTML adalah singkatan dari HyperText Markup Language

Bahasa ini terdiri daripada satu set kod dan simbol yang akan menghasilkan:

teks,

imej,

bunyi,

bingkai

animasi pada halaman penyemak imbas anda.

Dua cara biasa untuk memulakan laman web anda adalah sama ada:

untuk membuat kod anda sendiri dalam editor teks mudah dan simpannya sebagai fail .htm. atau

gunakan perisian penjana HTML.

Tags Bahagian HTML

Peraturan mendatar

Peraturan mendatar digunakan untuk membahagikan atau membahagi bahagian halaman web anda. The

tag digunakan untuk membuat garis mendatar dan boleh diubah untuk membuat pelbagai jenis garisan dengan mengubah saiz, warna atau lebarnya.

Contohnya

atau

Talian Pepejal

The

tag digunakan untuk membuat garis pepejal. Ia berubah sedikit dari tag peraturan mendatar kerana ia menghasilkan garis tanpa potongan 3D dihasilkan oleh

tag.

Contoh 6

Semua Mengenai HTML

HTML adalah singkatan dari HyperText Markup Language

Bahasa ini terdiri daripada satu set kod dan simbol yang akan menghasilkan:

teks,

imej,

bunyi,

bingkai

animasi pada halaman penyemak imbas anda.

Dua cara biasa untuk memulakan laman web anda adalah sama ada:

untuk membuat kod anda sendiri dalam editor teks mudah dan simpannya sebagai fail .htm. atau

gunakan perisian penjana HTML.

Teg Image

Dokumen HTML membolehkan anda memasukkan imej dengan menggunakan tag imej. Anda boleh melayari imej dari URL dalam talian atau dari komputer anda sendiri. Tag imej bermaksud "sumber imej"; Oleh itu, jalan imej harus ditakrifkan selepas sifatnya. Sekiranya imej itu ditemui dalam folder yang sama dengan dokumen sumber anda, tidak perlu anda memasuki direktori keseluruhan path.

Contohnya

atau atau

Tag Alignment

Sekali lagi, anda boleh menggunakan atribut ALIGN untuk memaparkan imej sama ada di tengah, sebelah kanan atau sebelah kiri pelayar anda.

Eg1

Nota: Walau bagaimanapun, mungkin penyemak imbas anda tidak menyokong teg ini. Oleh itu, anda boleh menggunakan tag sebelum tag imej untuk memusatkan imej anda dalam penyemak imbas.

Eg2

Saiz gambar

Saiz imej yang anda paparkan boleh diubahsuai dengan menggunakan atribut WIDTH dan HEIGHT. Anda boleh menggunakan peratusan atau piksel untuk saiz imej anda.

Eg1

Eg2

Sempadan Imej

Sekiranya anda ingin memasukkan sempadan pada imej anda, anda boleh menggunakan atribut BORDER untuk berbuat demikian.

Contohnya

Ruang Runaround

Ruang runaround merujuk kepada jurang ruang di sekitar imej. Ini adalah tag yang sangat berguna apabila anda mempunyai teks di sekeliling gambar anda. Ia ditakrifkan menggunakan atribut VSPACE untuk bahagian atas dan bawah dan atribut HSPACE digunakan untuk sisi kiri dan kanan.

Contohnya

Contoh 7

Semua Mengenai HTML

HTML adalah singkatan dari HyperText Markup Language

Bahasa ini terdiri daripada satu set kod dan simbol yang akan menghasilkan:

teks,

imej,

bunyi,

bingkai

animasi pada halaman penyemak imbas anda.

Dua cara biasa untuk memulakan laman web anda adalah sama ada:

untuk membuat kod anda sendiri dalam editor teks mudah dan simpannya sebagai fail .htm. atau

gunakan perisian penjana HTML.

Kod warna

Anda boleh menggunakan kod warna heksadesimal yang disediakan oleh Theodora untuk mewujudkan suasana laman web anda sendiri

Inilah contoh yang anda ada dengan atribut vspace dan hspace

Pautkan Pautan

Dalam HTML, pautan pena digunakan untuk melompat dari satu bahagian halaman ke halaman lain atau dari satu halaman ke halaman lain. Mereka dipanggil Pautan Dalaman jika mereka membenarkan anda untuk melompat dari satu bahagian atau halaman laman web anda sendiri ke pautan lain dan External apabila mereka membuka tetingkap penyemak imbas baru dari laman web lain. Kelebihan utama menghubungkan tag ialah membolehkan anda membuat laman web dinamik dan bukannya membuat halaman web yang menatal.

Pautan Luar

akan memaparkan "Pautan Alamat Web" sebagai pautan di laman web anda dan apabila pengguna akan mengklik pada teks, ia akan memuat halaman www.webaddress.com

Pautan Dalaman

Terdapat dua cara tertentu untuk memasukkan pautan dalaman:

1. Untuk melompat dari halaman semasa ke laman lain di laman web yang sama

2. Untuk melompat dari bahagian semasa halaman ke seksyen lain pada halaman yang sama.

Untuk dapat melompat dari satu bahagian ke bahagian yang lain, anda harus memberi nama terlebih dahulu ke bahagian itu supaya tag itu dapat mengesannya apabila ia dipanggil. Sebagai contoh, jika seksyen berkenaan Pautan HTML perlu dimasukkan ke dalam bahagian atas halaman web, tepat di atas tajuk "Pautan HTML", masukkan tag . Nilai "pautan" merujuk kepada bahagian yang perlu ditempatkan; jadi jika seksyen laman web anda didasarkan pada kucing, masukkan tag tersebut tepat di atas tajuk untuk kucing.

Selepas proses ini, anda juga harus memasukkan pautan dari mana anda ingin melompat. Dalam contoh ini, jika anda ingin melompat dari bahagian atas halaman ke lokasi "Pautan HTML" yang terdapat di bahagian bawah halaman, masukkan Pautan Pautan . Pautan hiperpautan "Pautan Pautan" akan muncul dan apabila pengguna mengklik padanya, mereka akan melompat dari lokasi semasa mereka ke bahagian yang ditunjukkan.

Contoh 8

Semua Mengenai HTML

Kod warna

Pautkan Pautan

HTML adalah singkatan dari HyperText Markup Language

Bahasa ini terdiri daripada satu set kod dan simbol yang akan menghasilkan:

teks,

imej,

bunyi,

bingkai

animasi pada halaman penyemak imbas anda.

Dua cara biasa untuk memulakan laman web anda adalah sama ada:

untuk membuat kod anda sendiri dalam editor teks mudah dan simpannya sebagai fail .htm. atau

gunakan perisian penjana HTML.

Kod warna

Anda boleh menggunakan kod warna heksadesimal yang disediakan oleh Theodora untuk mewujudkan suasana laman web anda sendiri

Inilah contoh yang anda ada dengan atribut vspace dan hspace

Anda boleh mencari berguna untuk melawati laman web Microsoft dengan mengklik pada pautan ini

Pautkan Pautan

Bahagian ini akan membincangkan tentang kepentingan Menghubungkan tag di laman web anda.

Catatan:

Ini hanya contoh bagaimana anda boleh menggunakan tag yang menghubungkannya. Anda tentu dapat mengubah penempatan mereka untuk menjadikan laman web anda lebih mesra pengguna dan menarik.

Tetingkap Sasaran

Tetingkap sasaran akan memuatkan halaman yang dipautkan dalam tetingkap penyemak imbas yang lain supaya pengguna dapat tinggal di halaman semasa laman web anda dan melihat alamat hiperpautan dalam penyemak imbas lain.

Tag Jadual

Memasukkan jadual di tapak web anda boleh sangat berguna untuk memaparkan maklumat dengan cara teratur. Ia juga akan membolehkan anda mengendalikan teks dan grafik anda dengan lebih tepat.

Tag pembuka

digunakan untuk memberitahu pelayar anda bahawa jadual di halaman bermula di sana dan berakhir dengan

tag. Anda juga boleh mengubah suai warna, saiz dan saiz sempadan meja anda.

Saiz meja boleh diubah dengan menggunakan

tag. Anda boleh menggunakan piksel atau peratusan untuk menukar saiz jadual.

Anda boleh menggunakan tag tersebut

sebagai contoh untuk membuat sempadan yang tidak kelihatan di pelayar anda.

The

tag digunakan untuk membuat jurang ruang antara teks dan garisan dalaman sempadan meja.

The

tag digunakan untuk memasukkan jurang ruang antara garis dalaman dan luaran sempadan meja.

Jadual terdiri daripada sel yang ditentukan oleh lajur dan baris di dalam jadual. Sel akan menjadi ruang di mana kandungan anda akan dimasukkan. Teg lajur ditakrifkan sebagai

tag dan baris ditakrifkan sebagai dantag. Untuk mengubah suai lebar sel, anda boleh menggunakannya dan untuk menyelaraskan lajur, masukkan tag

dan

tag. Saiznya boleh sama ada dalam peratusan atau dalam piksel.

Anda juga boleh menyelaraskan baris dan lajur anda dengan menambahkan atribut ALIGN dalam tag anda. Oleh itu, untuk menyelaraskan baris tertentu, sebagai contoh, masukkan tag

Untuk menyelaraskan sel anda, anda boleh menggunakan VALIGN atribut.

akan meletakkan sel ke bahagian tengah halaman anda.

Untuk menjangkau lajur, anda boleh menggunakan tag tersebut

untuk menetapkan bilangan lajur sel mesti sepadan. Ambil perhatian bahawa nilai lalai ditetapkan kepada 1.

Juga, untuk menjangkau sel ke beberapa baris, gunakan

tag.

Contoh 9

Semua Mengenai HTML

Kod warna

Tag Jadual

HTML adalah singkatan dari HyperText Markup Language

Bahasa ini terdiri daripada satu set kod dan simbol yang akan menghasilkan:

teks,

imej,

bunyi,

bingkai

animasi pada halaman penyemak imbas anda.

Dua cara biasa untuk memulakan laman web anda adalah sama ada:

untuk membuat kod anda sendiri dalam editor teks mudah dan simpannya sebagai fail .htm. atau

gunakan perisian penjana HTML.

Kod warna

Anda boleh menggunakan Kod Warna Hexadecimal yang disediakan oleh Theodora untuk mewujudkan suasana laman web anda sendiri.

Lebih banyak teks boleh ditambah di sini.

Tag jadual

Bahagian ini akan memberi anda lebih banyak maklumat mengenai tag jadual

Tajuk
Ini adalah sebahagian daripada kandungan
Lajur 1	Lajur 2	Lajur 3
Sel Spanning dalam 3 baris (2 dan 3 digabungkan)	Sel Spanning dalam 2 baris (sel pertama dan kedua digabungkan)	Sel pertama
		Sel 2
		Sel 3
	Sel 3	Sel 4

Tag HTML Frame

Bingkai HTML membolehkan anda membuat tingkap bebas dalam halaman web. Mereka sangat berguna kerana membolehkan anda memaparkan lebih daripada satu dokumen dalam laman web.

Untuk menggunakan bingkai, anda mesti mempunyai sekurang-kurangnya dua fail .htm yang berbeza, salah satunya akan dinamakan index.htm . Fail index.htm akan berada di mana semua tetingkap akan dipaparkan. Tag bingkai ditakrifkan sebagai dan juga tag digunakan untuk menentukan set bingkai yang digunakan dalam fail index.htm.

Contoh 10

Cuba tag bingkai

akan menetapkan saiz baris yang akan dipaparkan dalam penyemak imbas anda.

akan menetapkan saiz lajur yang akan dipaparkan dalam penyemak imbas anda.

The tag akan namakan bingkai dan digunakan untuk menghubungkannya ke tetingkap utama.

tag akan digunakan untuk menetapkan sempadan pada bingkai anda. Menetapkannya kepada 0 akan memastikan bahawa ia akan serasi dengan semua pelayar.

akan menetapkan ruang antara bingkai yang paling dekat.

akan menetapkan ruang lebar pada kedua-dua belah bingkai. Saiz hendaklah ditetapkan dalam piksel.

akan menetapkan saiz margin atas dan bawah dalam piksel.

The tag akan dapat bar skrol menegak atau mendatar pada bingkai anda. Nilainya mesti ditetapkan kepada "ya", "tidak" atau "auto".

Perisian WYSIWYG

Terdapat program perisian yang dipanggil WYSIWYG (yang anda lihat adalah apa yang anda dapatkan), yang dikodkan untuk anda, tetapi ini tidak sepatutnya menghalang anda daripada mempelajari konsep html minimum untuk mengelakkan kejutan yang tidak menyenangkan! Dengan perisian ini, anda meletakkan teks dan imej, dan perisian menjana kod HTML yang sepadan secara serentak. Ia juga akan membuat kerja kemasukan animasi atau skrip lebih mudah. Ada, contohnya:

Dreamweaver, bukan percuma tetapi sangat komprehensif dan mudah digunakan dengan tutorial yang direka dengan baik

Editor GoLive Photoshop

Untuk WYSIWYG percuma, kami boleh menyebut: