Membuat Situs Web menggunakan Editor Teks

Dalam akademis ini Anda akan menemukan cara untuk membuat situs web dasar dari awal menggunakan Notepad. Jika Anda menggunakan Mac, Anda perlu menerapkan TextEhosting dit.

Ada editor kode profesional lainnya yang dapat Anda gunakan untuk mengedit kode seperti html.NotePad++ (Windows) – GRATIS Adobe Brackets (Windows/Mac) – GRATISTeks Luhur (Windows/Mac) – BERBAYAR

Jika Anda berada di Mac dan Anda menginginkan sesuatu yang lebih tinggi dari TextEdit, Anda dapat mengunduh Adobe Brackets yang cocok di Mac &Windows. Saya akan beroperasi pada Windows dan karena itu penggunaan model sederhana Notepad. Kode dalam tutorial ini bekerja di editor mana pun jadi pilih saja editor yang Anda inginkan dan izinkan untuk memulai. Membuat halaman web pertama Anda di Notepad

WindowsUntuk membuka Notepad pada Windows 7 atau versi lebih lama, klik Mulai -> Semua Program -> Aksesori -> Notepad. Anda juga dapat mengklik Start dan mencari “Notepad”.

MacBuka TextEdit dan pastikan editor konten tekstual siap untuk membuat konten tekstual standar dengan cara masuk ke Preferensi > Dokumen Baru > memilih teks biasa. Selanjutnya pastikan untuk menguji “Tampilkan dokumen html sebagai kode html” dan “Tampilkan file RTF sebagai kode RTF” di bawah “Buka dan Simpan”.

Reproduksi berikutnya dan tempelkan kode berikutnya ke editor:

<1>Ku Heading Pertama

Ku paragraf pertama.

Simpan catatan sebagai “indeks.html” dengan ekstensi HTML. Ini bisa sangat penting jika Anda tidak mengunggah .html ke berhentinya nama, itu mungkin bukan lukisan. Catatan: Meskipun .html lebih disukai, Anda juga dapat menggunakan .htm tanpa “L”.

Atur Encoding ke UTF-8, yang lebih disukai untuk dokumen html. Pengkodean ANSI paling efektif untuk karakter AS dan Eropa Barat.

Membuka File HTML di dalam Browser

Selanjutnya, buka folder di mana Anda telah menyimpan laporan dan membukanya di browser Anda. Dalam hal ini kami menggunakan Chrome, tetapi browser modern apa pun perlu berfungsi.CATATAN: Jika Anda mengalami masalah membuka catatan, pastikan Anda telah menyimpannya sebagai .html.

Melihat File HTML di dalam Browser

Setelah dokumen dibuka ke browser Anda, tampaknya ini:

Perhatikan rute rekaman di dalam Bilah URL record:///C:/Users/WebsitesDIY/Desktop/HTML/index.htmlItulah seluruh rute ke catatan untuk laptop Anda.

Sekarang setelah Anda memahami dasar-dasar pembuatan dokumen html, mari belajar cara memusatkan konten tekstual

Masuk ke file html yang telah Anda buat dan unggah

tags round “My First Heading” seperti soo

My First Heading

Hapus

Ku paragraf pertama.

untuk saat ini.

Simpan File dan buka kembali di browser sekali lagi. Jika jendela browser Anda tetap terbuka, Anda pasti dapat mengklik refresh untuk memuat ulang halaman web.

Teks header sekarang harus difokuskan di tengah-tengah halaman web.

Menambahkan video Youtube untuk Situs Web Anda

Untuk mengunggah video youtube di situs web Anda: Buka Youtube dan temukan video yang perlu Anda tambahkan di situs web Anda.”Klik Kanan” pada video dan “Salin Kode Embed”.

Menempelkan Kode Embed Video ke Notepad

Menempelkan kode semat ke Notepad

Kode embed akan terlihat seperti ini:

Anda dapat menukar lebar dan puncak dengan sesuatu yang Anda butuhkan. Hanya bertukar nomor dalam kode dan pergi segala sesuatu yang lain tidak berubah. Dalam situasi ini kita dapat menggunakan lebar = “427” dan puncak = “240”. Anda dapat mengatur milik Anda untuk sesuatu yang Anda inginkan.

Memusatkan Video dengan cara mengatur

tag di seluruh Kode Embed yang telah Anda salin dari YouTube.

Juga, haruskah kita mengubah judul antara tag <1>Ku First Heading

untuk mengatakan “Situs Web Saya”.

Menambahkan Link ke halaman lain

Kami sekarang akan mengunggah hyperlink yang masuk ke Google sementara orang mengkliknya.

Tambahkan kode berikut di situs web Anda tepat di bawah video:Go ke Google

Perhatikan bagaimana link berpusat penggunaan tag tengah. Perhatikan juga
tag hanya sebelum tag tengah – ini memberikan garis smash di antara video dan hyperlink.

Anda sekarang harus melihat tautan di bawah video yang masuk ke Google jika Anda mengkliknya.

Anda dapat membuat hyperlink yang mengunjungi halaman web apa pun yang Anda butuhkan. Hanya menukar apa yang ada dalam karakteristik href.

Jika Anda ingin membuka tautan di jendela baru ketika seseorang mengkliknya, tambahkan atribut berikutnya dalam tag hyperlink:Go ke Google< / a>

Membuat Halaman kedua untuk Situs Web Anda

Sekarang, kita akan membuat halaman kedua di situs web Anda dan menghubunginya halaman2.html. Dengan cara ini Anda dapat membuat tautan ke komponen lain dari situs web Anda alih-alih menautkan ke Google seperti yang kami lakukan sebelumnya.

Buat dokumen html baru dan unggah kode di bawahnya ke dalamnya. Simpan dan bicaralah dengannya halaman2.html

Page 2

Ini adalah halaman web ke-2 saya.

Situs web Anda sekarang akan memiliki halaman kedua yang dapat kami hyperlink dari halaman pertama.

Menautkan ke Halaman2 dari Halaman Utama Anda

Sekarang setelah kami membuat Page2, mari kita ubah hyperlink pada halaman pertama ke hyperlink ke halaman2.html

Buka “indeks.html” dan ganti URL yang menautkan ke Google ke hyperlink ke Halaman 2 sebagai gantinya:

Page 2

Anda sekarang berada di halaman 2 dari situs web Anda

Jika Anda telah membuat hyperlink Anda dengan sukses, Anda harus dibawa ke halaman.html saat Anda mengklik tautan di bawah video. Jika untuk beberapa alasan tautan Anda tidak berfungsi, kembalikan beberapa langkah dan ikuti instruksinya lagi. Mengetahui cara menambahkan tautan / URL untuk situs web Anda bisa sangat efektif. Setelah semua internet hanya serangkaian besar link yang terdaftar melalui Google.

Menambahkan pola keren dengan CSS

Kami saat ini akan membuat tautan ke halaman2 penggunaan CSS sehingga terlihat seperti tombol. CSS digunakan untuk memanipulasi tata letak situs web Anda.Salin dan tempel kode berikutnya di bagian atas halaman .html indeks Anda tepat di bawah tag. Saat menempelkan jangan menimpa kode lainnya.

sebuahtampilan: inline-block;lebar: 100px;atas: 30px;tinggi garis: 30px;padding: 10px;bayangan masa lalu historis: #00AEEF;pewarnaan: #ffffff;radius batas: 10px;Apa yang pada dasarnya dilakukan oleh kode ini adalah memberi tahu browser untuk menambahkan warna masa lalu historis dan puncak ke tautan yang kami buat sebelumnya. Kami juga membuat sudut sentuhan bulat dengan menambahkan radius perbatasan 10px. Ada beberapa tutorial longgar online di mana Anda dapat meneliti lebih lanjut tentang CSS sehingga Anda dapat membuat situs web Anda terlihat baik-baik saja.

Menambahkan efek hover ke tombol

Salah satu faktor terakhir yang akan kita lakukan adalah mengunggah efek hover ke tombol. Efek hover akan membuat tombol berubah warna khusus saat Anda melayang di atasnya bersama dengan mouse Anda.

Tambahkan kode berikut tepat di atas < / fashion>tag terakhir:

a:hover warna latar belakang: #005170;

Situs web Anda sekarang harus terlihat seperti ini

Situs web Anda sekarang harus terlihat seperti contoh dalam gambar. Harus ada header dengan panggilan di puncak, video di tengah dan tombol di bagian bawah. Ketika Anda melayang di atas tombol bersama dengan mouse Anda, warnanya perlu website diperdagangkan ke biru tua. Jika situs web Anda tidak terlihat benar, itu karena Anda mungkin memiliki kesalahan dalam kode. Silakan bergerak kembali beberapa langkah dan mencoba sekali lagi. Sangat penting untuk memahami dasar-dasar sebelum pergi ke langkah berikutnya di mana kita akan menampilkan cara untuk menempatkan situs web Anda di internet sehingga setiap orang bisa mendapatkan hak untuk mengaksesnya.

Pergi Hidup bersama dengan situs web Anda

Agar dunia dapat melihat situs web Anda, itu harus diunggah ke server web yang tetap terhubung ke internet 24/7. Sekarang, kami tidak menganjurkan menempatkan di server Anda sendiri. Jauh lebih mudah untuk membayar $three atau $five sebulan ke perusahaan hosting profesional untuk mencoba ini untuk Anda. Saya recomment penggunaan BlueHost dan mendaftar untuk Plus Planmereka untuk merilis situs web Anda dan mendapatkan panggilan area GRATIS – situs web ini dihosting di BlueHost dan kami menyukainya. Mereka cepat, aman dan memiliki dukungan pelanggan yang fantastis. Mendaftar untuk WebHosting di BlueHost

Cara Membuat Situs Web dengan WordPress Langkah dengan bantuan Step Tutorial

Add a Comment

Your email address will not be published. Required fields are marked *

Name - City
Membeli Product Time